feat: initialize React Spectrum template with layouts and showcases

1 files changed, 80 insertions, 0 deletions

diff --git a/src/components/ui-kit/ui-kit.module.css b/src/components/ui-kit/ui-kit.module.css
new file mode 100644
index 0000000..d590bb4
--- /dev/null
+++ b/src/components/ui-kit/ui-kit.module.css
@@ -0,0 +1,80 @@
+.section {
+  min-width: 0;
+  display: grid;
+  gap: 24px;
+  padding: 24px;
+  margin-bottom: 24px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
+
+.section > h2 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.grid,
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
+  gap: 20px;
+  min-width: 0;
+}
+
+.grid > *,
+.cards > * {
+  min-width: 0;
+}
+
+.caption,
+.tabContent,
+.popover p {
+  font-size: 14px;
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+
+.tabContent {
+  padding: 20px 0;
+}
+
+.popover {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  width: min(260px, calc(100vw - 64px));
+  box-sizing: border-box;
+}
+
+.cardPreview {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100px;
+  color: var(--accent);
+  background: var(--social-bg);
+}
+
+.tableContainer {
+  min-width: 0;
+  overflow: auto;
+}
+
+.table.table {
+  height: 280px;
+  min-width: 440px;
+  width: 100%;
+}
+
+@media (max-width: 640px) {
+  .section {
+    padding: 16px;
+  }
+}