@assembleo/ui 0.1.0

package/dist/theme.css

@@ -0,0 +1,538 @@
+/*
+ * Tokens do Assembleo — a "cara" do produto em um arquivo.
+ *
+ * A ideia visual, em uma linha: a vida em comum de um condomínio — superfícies
+ * claras e calmas como as áreas comuns, um azul cívico para a decisão, e uma
+ * família de cores expressivas (telhado, jardim, luz de janela) reservada para a
+ * camada lúdica: prédios, crachás, livretos.
+ *
+ * Três princípios, herdados da Apple HIG e adaptados:
+ *
+ *   Clareza      o conteúdo manda; tipografia do sistema, hierarquia por peso e
+ *                cor, nunca por ornamento.
+ *   Deferência   a interface cede o palco: fundos neutros, cor com propósito,
+ *                profundidade por camadas e não por bordas pesadas.
+ *   Vida         a camada expressiva é bem-vinda onde representa uma coisa real
+ *                do condomínio (um prédio, um crachá, uma ata) — nunca como
+ *                decoração solta.
+ *
+ * Os valores ficam em variáveis CSS comuns, e não direto no `@theme`, porque é o
+ * que permite o tema escuro trocar o valor sem que nenhum componente tenha um
+ * caminho condicional por tema (técnica herdada do theme.css original do web).
+ */
+
+/* ---------------------------------------------------------------------------
+ * Tema claro — o padrão.
+ *
+ * O fundo é cinza-frio (como o systemGroupedBackground do iOS) e os cartões são
+ * brancos: a profundidade nasce dessa inversão, não de bordas. Todo par
+ * texto/fundo aqui foi verificado para WCAG AA (≥ 4.5:1 em texto corrente).
+ * ------------------------------------------------------------------------- */
+:root {
+  /* Superfícies, do fundo para a frente */
+  --assembleo-bg: #f2f2f7;
+  --assembleo-surface: #ffffff;
+  --assembleo-surface-sunken: #e9e9ef;
+  --assembleo-surface-raised: #ffffff;
+
+  /* Bordas são coadjuvantes: separam quando a sombra não alcança */
+  --assembleo-border: #e2e2ea;
+  --assembleo-border-strong: #c9c9d4;
+
+  /* Texto em três vozes */
+  --assembleo-text: #1d1d22;
+  --assembleo-text-secondary: #52525c;
+  --assembleo-text-muted: #66666f;
+
+  /* O azul cívico — a cor da decisão. 5.7:1 sobre branco. */
+  --assembleo-accent: #3a5bd9;
+  --assembleo-accent-hover: #3050c8;
+  --assembleo-accent-active: #2a46b0;
+  --assembleo-accent-text: #ffffff;
+  --assembleo-accent-soft: #e8edfc;
+  --assembleo-accent-soft-text: #2c49b8;
+
+  /* Semânticas — sempre em par: cor forte + fundo suave com texto que passa AA */
+  --assembleo-success: #1f6b3f;
+  --assembleo-success-text: #ffffff;
+  --assembleo-success-soft: #e3f3e9;
+  --assembleo-success-soft-text: #175934;
+
+  --assembleo-warning: #8a5a00;
+  --assembleo-warning-text: #ffffff;
+  --assembleo-warning-soft: #fbf1dc;
+  --assembleo-warning-soft-text: #744b00;
+
+  --assembleo-danger: #b3261e;
+  --assembleo-danger-text: #ffffff;
+  --assembleo-danger-soft: #fbeae8;
+  --assembleo-danger-soft-text: #8c1d17;
+
+  /*
+   * A vila — a paleta expressiva. É dela que saem os prédios, crachás e
+   * livretos. Uso decorativo (preenchimento, ilustração), nunca texto corrente
+   * sobre fundo claro sem verificação.
+   */
+  --assembleo-terracota: #c2593b;
+  --assembleo-terracota-soft: #f9e9e3;
+  --assembleo-jardim: #2f8a57;
+  --assembleo-jardim-soft: #e2f2e8;
+  --assembleo-ambar: #e8a33d;
+  --assembleo-ambar-soft: #fdf2df;
+  --assembleo-lavanda: #7a6fe0;
+  --assembleo-lavanda-soft: #eeecfb;
+  --assembleo-ceu: #3f8fd2;
+  --assembleo-ceu-soft: #e5f1fa;
+
+  /* Véus e materiais translúcidos (o "frosted glass" das barras e sheets) */
+  --assembleo-overlay: rgb(24 24 32 / 0.4);
+  --assembleo-material: rgb(255 255 255 / 0.72);
+  --assembleo-material-thick: rgb(255 255 255 / 0.88);
+
+  /*
+   * Elevação: sombras difusas e tingidas de azul-cinza, nunca preto puro.
+   * Três níveis bastam — repouso, flutuando, sobreposto.
+   */
+  --assembleo-shadow-1: 0 1px 2px 0 rgb(29 29 41 / 0.05), 0 1px 6px -1px rgb(29 29 41 / 0.05);
+  --assembleo-shadow-2: 0 2px 8px -2px rgb(29 29 41 / 0.08), 0 8px 24px -4px rgb(29 29 41 / 0.08);
+  --assembleo-shadow-3: 0 8px 16px -6px rgb(29 29 41 / 0.1), 0 24px 48px -12px rgb(29 29 41 / 0.18);
+}
+
+/* ---------------------------------------------------------------------------
+ * Tema escuro.
+ *
+ * Ativa de duas formas: pela preferência do sistema, ou por `data-theme="dark"`
+ * no <html> quando o app quiser dar a escolha ao usuário. `data-theme="light"`
+ * força o claro pelo mesmo caminho. Os valores são os mesmos nos dois blocos —
+ * CSS não tem como nomear um conjunto e reusar; o teste de tokens garante que
+ * os blocos não divirjam.
+ * ------------------------------------------------------------------------- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --assembleo-bg: #101014;
+    --assembleo-surface: #1b1b21;
+    --assembleo-surface-sunken: #0c0c10;
+    --assembleo-surface-raised: #232329;
+
+    --assembleo-border: #2d2d35;
+    --assembleo-border-strong: #3d3d47;
+
+    --assembleo-text: #f4f4f6;
+    --assembleo-text-secondary: #b9b9c3;
+    --assembleo-text-muted: #8e8e99;
+
+    --assembleo-accent: #94a9f8;
+    --assembleo-accent-hover: #a5b7fa;
+    --assembleo-accent-active: #b6c5fb;
+    --assembleo-accent-text: #101736;
+    --assembleo-accent-soft: #252c4e;
+    --assembleo-accent-soft-text: #bcc8ff;
+
+    --assembleo-success: #7fd0a0;
+    --assembleo-success-text: #06301a;
+    --assembleo-success-soft: #1a3527;
+    --assembleo-success-soft-text: #a4e2bf;
+
+    --assembleo-warning: #ecc06e;
+    --assembleo-warning-text: #3a2800;
+    --assembleo-warning-soft: #3a2f16;
+    --assembleo-warning-soft-text: #f2d195;
+
+    --assembleo-danger: #f2b8b5;
+    --assembleo-danger-text: #3a0906;
+    --assembleo-danger-soft: #45201d;
+    --assembleo-danger-soft-text: #f7cfcd;
+
+    --assembleo-terracota: #e08a6d;
+    --assembleo-terracota-soft: #40241b;
+    --assembleo-jardim: #6fc493;
+    --assembleo-jardim-soft: #1d3529;
+    --assembleo-ambar: #edb964;
+    --assembleo-ambar-soft: #3c2e14;
+    --assembleo-lavanda: #a99ff0;
+    --assembleo-lavanda-soft: #2b2650;
+    --assembleo-ceu: #7ab8e8;
+    --assembleo-ceu-soft: #16293a;
+
+    --assembleo-overlay: rgb(0 0 0 / 0.6);
+    --assembleo-material: rgb(24 24 30 / 0.72);
+    --assembleo-material-thick: rgb(24 24 30 / 0.9);
+
+    /* No escuro a sombra perde força; a separação vem da superfície mais clara */
+    --assembleo-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+    --assembleo-shadow-2: 0 2px 8px -2px rgb(0 0 0 / 0.32), 0 8px 24px -4px rgb(0 0 0 / 0.28);
+    --assembleo-shadow-3: 0 8px 16px -6px rgb(0 0 0 / 0.36), 0 24px 48px -12px rgb(0 0 0 / 0.5);
+  }
+}
+
+:root[data-theme="dark"] {
+  --assembleo-bg: #101014;
+  --assembleo-surface: #1b1b21;
+  --assembleo-surface-sunken: #0c0c10;
+  --assembleo-surface-raised: #232329;
+
+  --assembleo-border: #2d2d35;
+  --assembleo-border-strong: #3d3d47;
+
+  --assembleo-text: #f4f4f6;
+  --assembleo-text-secondary: #b9b9c3;
+  --assembleo-text-muted: #8e8e99;
+
+  --assembleo-accent: #94a9f8;
+  --assembleo-accent-hover: #a5b7fa;
+  --assembleo-accent-active: #b6c5fb;
+  --assembleo-accent-text: #101736;
+  --assembleo-accent-soft: #252c4e;
+  --assembleo-accent-soft-text: #bcc8ff;
+
+  --assembleo-success: #7fd0a0;
+  --assembleo-success-text: #06301a;
+  --assembleo-success-soft: #1a3527;
+  --assembleo-success-soft-text: #a4e2bf;
+
+  --assembleo-warning: #ecc06e;
+  --assembleo-warning-text: #3a2800;
+  --assembleo-warning-soft: #3a2f16;
+  --assembleo-warning-soft-text: #f2d195;
+
+  --assembleo-danger: #f2b8b5;
+  --assembleo-danger-text: #3a0906;
+  --assembleo-danger-soft: #45201d;
+  --assembleo-danger-soft-text: #f7cfcd;
+
+  --assembleo-terracota: #e08a6d;
+  --assembleo-terracota-soft: #40241b;
+  --assembleo-jardim: #6fc493;
+  --assembleo-jardim-soft: #1d3529;
+  --assembleo-ambar: #edb964;
+  --assembleo-ambar-soft: #3c2e14;
+  --assembleo-lavanda: #a99ff0;
+  --assembleo-lavanda-soft: #2b2650;
+  --assembleo-ceu: #7ab8e8;
+  --assembleo-ceu-soft: #16293a;
+
+  --assembleo-overlay: rgb(0 0 0 / 0.6);
+  --assembleo-material: rgb(24 24 30 / 0.72);
+  --assembleo-material-thick: rgb(24 24 30 / 0.9);
+
+  --assembleo-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+  --assembleo-shadow-2: 0 2px 8px -2px rgb(0 0 0 / 0.32), 0 8px 24px -4px rgb(0 0 0 / 0.28);
+  --assembleo-shadow-3: 0 8px 16px -6px rgb(0 0 0 / 0.36), 0 24px 48px -12px rgb(0 0 0 / 0.5);
+}
+
+/* ---------------------------------------------------------------------------
+ * Ponte para o Tailwind.
+ *
+ * `inline` faz o Tailwind emitir `var(--assembleo-*)` em vez de resolver o
+ * valor no build — sem isso o tema escuro não chegaria às utilidades.
+ * ------------------------------------------------------------------------- */
+@theme inline {
+  /* Cor */
+  --color-*: initial;
+  --color-bg: var(--assembleo-bg);
+  --color-surface: var(--assembleo-surface);
+  --color-surface-sunken: var(--assembleo-surface-sunken);
+  --color-surface-raised: var(--assembleo-surface-raised);
+  --color-border: var(--assembleo-border);
+  --color-border-strong: var(--assembleo-border-strong);
+  --color-text: var(--assembleo-text);
+  --color-text-secondary: var(--assembleo-text-secondary);
+  --color-text-muted: var(--assembleo-text-muted);
+
+  --color-accent: var(--assembleo-accent);
+  --color-accent-hover: var(--assembleo-accent-hover);
+  --color-accent-active: var(--assembleo-accent-active);
+  --color-accent-text: var(--assembleo-accent-text);
+  --color-accent-soft: var(--assembleo-accent-soft);
+  --color-accent-soft-text: var(--assembleo-accent-soft-text);
+
+  --color-success: var(--assembleo-success);
+  --color-success-text: var(--assembleo-success-text);
+  --color-success-soft: var(--assembleo-success-soft);
+  --color-success-soft-text: var(--assembleo-success-soft-text);
+  --color-warning: var(--assembleo-warning);
+  --color-warning-text: var(--assembleo-warning-text);
+  --color-warning-soft: var(--assembleo-warning-soft);
+  --color-warning-soft-text: var(--assembleo-warning-soft-text);
+  --color-danger: var(--assembleo-danger);
+  --color-danger-text: var(--assembleo-danger-text);
+  --color-danger-soft: var(--assembleo-danger-soft);
+  --color-danger-soft-text: var(--assembleo-danger-soft-text);
+
+  --color-terracota: var(--assembleo-terracota);
+  --color-terracota-soft: var(--assembleo-terracota-soft);
+  --color-jardim: var(--assembleo-jardim);
+  --color-jardim-soft: var(--assembleo-jardim-soft);
+  --color-ambar: var(--assembleo-ambar);
+  --color-ambar-soft: var(--assembleo-ambar-soft);
+  --color-lavanda: var(--assembleo-lavanda);
+  --color-lavanda-soft: var(--assembleo-lavanda-soft);
+  --color-ceu: var(--assembleo-ceu);
+  --color-ceu-soft: var(--assembleo-ceu-soft);
+
+  --color-overlay: var(--assembleo-overlay);
+  --color-material: var(--assembleo-material);
+  --color-material-thick: var(--assembleo-material-thick);
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+
+  /*
+   * Tipografia do sistema — a decisão mais Apple do sistema inteiro: em iPhone
+   * e Mac o app fala SF Pro nativo, e em todo lugar a fonte chega em 0ms.
+   * `ui-rounded` vira SF Pro Rounded em aparelho Apple; é a voz da camada
+   * expressiva, com fallback gracioso para a sans comum.
+   */
+  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --font-friendly: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
+
+  /*
+   * Escala tipográfica da HIG (Large Title → Caption), em rem.
+   * O corpo é 17px como no iOS — generoso de propósito: síndico e morador leem
+   * ata e pauta no celular, muitas vezes com o braço esticado na assembleia.
+   */
+  --text-*: initial;
+  --text-display: 2.125rem;
+  --text-display--line-height: 1.18;
+  --text-display--letter-spacing: -0.022em;
+  --text-display--font-weight: 700;
+  --text-title-1: 1.75rem;
+  --text-title-1--line-height: 1.2;
+  --text-title-1--letter-spacing: -0.018em;
+  --text-title-1--font-weight: 700;
+  --text-title-2: 1.375rem;
+  --text-title-2--line-height: 1.27;
+  --text-title-2--letter-spacing: -0.012em;
+  --text-title-2--font-weight: 600;
+  --text-title-3: 1.25rem;
+  --text-title-3--line-height: 1.3;
+  --text-title-3--letter-spacing: -0.008em;
+  --text-title-3--font-weight: 600;
+  --text-headline: 1.0625rem;
+  --text-headline--line-height: 1.3;
+  --text-headline--font-weight: 600;
+  --text-body: 1.0625rem;
+  --text-body--line-height: 1.47;
+  --text-callout: 1rem;
+  --text-callout--line-height: 1.44;
+  --text-subhead: 0.9375rem;
+  --text-subhead--line-height: 1.42;
+  --text-footnote: 0.8125rem;
+  --text-footnote--line-height: 1.38;
+  --text-caption: 0.75rem;
+  --text-caption--line-height: 1.34;
+
+  /*
+   * Raios generosos — a assinatura de forma do Assembleo. `control` para o que
+   * se aperta, `surface` para o que contém, `expressive` para a camada lúdica.
+   */
+  --radius-*: initial;
+  --radius-control: 0.75rem;
+  --radius-control-sm: 0.5rem;
+  --radius-surface: 1rem;
+  --radius-surface-lg: 1.25rem;
+  --radius-expressive: 1.5rem;
+  --radius-pill: 9999px;
+  --radius-full: 9999px;
+
+  /* Elevação */
+  --shadow-*: initial;
+  --shadow-level-1: var(--assembleo-shadow-1);
+  --shadow-level-2: var(--assembleo-shadow-2);
+  --shadow-level-3: var(--assembleo-shadow-3);
+  --shadow-none: 0 0 #0000;
+
+  /*
+   * Movimento: rápido para responder, suave para acomodar, mola para dar vida.
+   * A mola (`--ease-spring`) é para a camada expressiva e microinterações;
+   * transição de layout usa as curvas suaves.
+   */
+  --ease-out-soft: cubic-bezier(0.25, 1, 0.5, 1);
+  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.15, 1);
+  --ease-spring: linear(
+    0,
+    0.009,
+    0.035 2.1%,
+    0.141 4.4%,
+    0.723 12.9%,
+    0.938 16.7%,
+    1.017,
+    1.077 20.4%,
+    1.121,
+    1.149 24.3%,
+    1.159,
+    1.163 27.8%,
+    1.154,
+    1.129 32.8%,
+    1.051 39.6%,
+    1.017 43.1%,
+    0.991,
+    0.977 51%,
+    0.974 53.8%,
+    0.975 57.1%,
+    0.997 69.8%,
+    1.003 76.9%,
+    1
+  );
+
+  /* Alvo de toque mínimo: 44 pontos, o piso de iOS e Android. */
+  --spacing-touch: 2.75rem;
+
+  /* Animações de entrada dos componentes de sobreposição */
+  --animate-fade-in: assembleo-fade-in var(--motion-quick) var(--ease-out-soft);
+  --animate-pop-in: assembleo-pop-in var(--motion-smooth) var(--ease-spring);
+  --animate-slide-up: assembleo-slide-up var(--motion-smooth) var(--ease-out-soft);
+  --animate-shimmer: assembleo-shimmer 1.6s var(--ease-in-out-soft) infinite;
+
+  @keyframes assembleo-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes assembleo-pop-in {
+    from {
+      opacity: 0;
+      transform: scale(0.96);
+    }
+  }
+
+  @keyframes assembleo-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(1rem);
+    }
+  }
+
+  @keyframes assembleo-shimmer {
+    50% {
+      opacity: 0.45;
+    }
+  }
+}
+
+/*
+ * Durações fora do @theme: não são um namespace do Tailwind; componentes usam
+ * `duration-(--motion-quick)` e afins.
+ */
+:root {
+  --motion-instant: 100ms;
+  --motion-quick: 160ms;
+  --motion-smooth: 260ms;
+  --motion-gentle: 420ms;
+
+  /* Camadas de empilhamento — únicas e nomeadas para nunca competirem no grito */
+  --z-nav: 20;
+  --z-overlay: 40;
+  --z-modal: 50;
+  --z-toast: 60;
+  --z-tooltip: 70;
+}
+
+/* ---------------------------------------------------------------------------
+ * Utilidades próprias do sistema.
+ * ------------------------------------------------------------------------- */
+
+/*
+ * O squircle — curvatura contínua como a do iOS. `corner-shape` é melhoria
+ * progressiva (Chrome 139+); onde não existe, fica o raio comum, que já carrega
+ * a assinatura.
+ */
+@utility squircle {
+  corner-shape: squircle;
+}
+
+/*
+ * Materiais translúcidos: a barra que deixa o conteúdo passar por baixo.
+ * Onde não há backdrop-filter, o fundo vira sólido — legibilidade antes do
+ * efeito.
+ */
+@utility material {
+  background-color: var(--assembleo-surface);
+
+  @supports (backdrop-filter: blur(1px)) {
+    background-color: var(--assembleo-material);
+    backdrop-filter: blur(20px) saturate(1.8);
+  }
+}
+
+@utility material-thick {
+  background-color: var(--assembleo-surface);
+
+  @supports (backdrop-filter: blur(1px)) {
+    background-color: var(--assembleo-material-thick);
+    backdrop-filter: blur(24px) saturate(1.6);
+  }
+}
+
+/* Números tabulares: coluna de votos e de valores alinha dígito a dígito. */
+@utility tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------------------------------------------------------------------------
+ * Base.
+ * ------------------------------------------------------------------------- */
+@layer base {
+  :root {
+    color-scheme: light dark;
+  }
+
+  :root[data-theme="light"] {
+    color-scheme: light;
+  }
+
+  :root[data-theme="dark"] {
+    color-scheme: dark;
+  }
+
+  html {
+    font-family: var(--font-sans);
+    /* Impede o iOS de aumentar o texto ao girar o aparelho. */
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    margin: 0;
+    min-height: 100dvh;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    font-size: var(--text-body);
+    line-height: var(--text-body--line-height);
+    -webkit-font-smoothing: antialiased;
+    /* Em PWA instalada no iPhone não existe barra do navegador para proteger o
+       conteúdo da barra de gestos. */
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+      env(safe-area-inset-left);
+  }
+
+  /* Sem contorno de foco não há navegação por teclado utilizável. */
+  :focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background-color: var(--assembleo-accent);
+    color: var(--assembleo-accent-text);
+  }
+
+  /*
+   * Quem pediu menos movimento recebe menos movimento — tudo, de uma vez.
+   * As animações caem para um corte quase instantâneo em vez de sumirem, para
+   * que estados de entrada (opacity inicial) nunca fiquem presos.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 1ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 1ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@assembleo/ui",
+  "version": "0.1.0",
+  "description": "Design system do Assembleo: tokens, componentes e a camada expressiva que dão cara ao produto.",
+  "license": "UNLICENSED",
+  "private": false,
+  "type": "module",
+  "engines": {
+    "node": ">=22.0.0",
+    "pnpm": ">=11"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/The-Fant-Company/assembleo-ui.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./theme.css": "./dist/theme.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^1.33.0",
+    "radix-ui": "^1.6.7",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.5.7",
+    "@changesets/cli": "^2.31.1",
+    "@commitlint/cli": "^21.2.1",
+    "@commitlint/config-conventional": "^21.2.0",
+    "@storybook/addon-a11y": "^10.5.10",
+    "@storybook/addon-docs": "^10.5.10",
+    "@storybook/react-vite": "^10.5.10",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.3",
+    "@types/node": "^22.19.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.4",
+    "axe-core": "^4.11.0",
+    "jsdom": "^30.0.1",
+    "lefthook": "^2.1.10",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "storybook": "^10.5.10",
+    "tailwindcss": "^4.3.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10"
+  },
+  "scripts": {
+    "build": "tsup && cp src/tokens/theme.css dist/theme.css",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "biome check .",
+    "format": "biome check --write .",
+    "clean": "rm -rf dist storybook-static",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "pnpm build && changeset publish"
+  }
+}