@atomsix/design-system 0.0.2

package/README.md

@@ -0,0 +1,127 @@
+# @atomsix/design-system
+
+Design system da Atom6 Studio — componentes React tipados, estilizados com
+**Tailwind CSS v4** (abordagem CSS-first, sem `tailwind.config.js`) e
+distribuídos via npm.
+
+- **Build:** tsup (ESM + CJS + `.d.ts`)
+- **Variantes:** [cva](https://cva.style) + helper `cn()` (`clsx` + `tailwind-merge`)
+- **Docs/dev:** Storybook (local)
+- **Versionamento:** [Changesets](https://github.com/changesets/changesets), com publish automático via GitHub Actions
+
+---
+
+## Instalação (projeto consumidor)
+
+```bash
+pnpm add @atomsix/design-system
+```
+
+O projeto consumidor precisa ter **Tailwind CSS v4** instalado
+(`tailwindcss` + o plugin do seu bundler, ex.: `@tailwindcss/vite` ou
+`@tailwindcss/postcss`).
+
+### Configurando o Tailwind v4
+
+O Tailwind v4 não usa `tailwind.config.js` nem a opção `content`. Tudo é
+feito na sua folha CSS principal:
+
+```css
+/* app.css (ou globals.css) do projeto consumidor */
+@import 'tailwindcss';
+
+/* Tokens do design system (cores primary, fonte, spacing...) */
+@import '@atomsix/design-system/theme.css';
+
+/* Faz o Tailwind escanear as classes usadas DENTRO do pacote publicado.
+   Ajuste o caminho relativo conforme a localização deste arquivo CSS. */
+@source '../node_modules/@atomsix/design-system';
+```
+
+> Sem a diretiva `@source`, as classes usadas internamente pelos componentes
+> (ex.: `bg-primary-600`) não seriam geradas no CSS final do seu app.
+
+### Usando os componentes
+
+```tsx
+import { A6Button } from '@atomsix/design-system'
+
+export function Exemplo() {
+  return (
+    <A6Button variant="outline" size="sm" className="w-full">
+      Cancelar
+    </A6Button>
+  )
+}
+```
+
+Todos os componentes aceitam `className` — os conflitos com as classes
+padrão são resolvidos automaticamente pelo `tailwind-merge`, então a sua
+classe sempre vence.
+
+---
+
+## Desenvolvimento
+
+> Requer **Node ≥ 20** (há um `.nvmrc` no repo — rode `nvm use`) e **pnpm**.
+
+```bash
+pnpm install
+
+# Storybook local — ambiente de dev e documentação dos componentes
+pnpm storybook
+
+# Build da lib (dist/: ESM + CJS + tipos + theme.css)
+pnpm build
+
+# Checagem de tipos
+pnpm typecheck
+```
+
+O Storybook é **apenas local** nesta fase — não há publicação da
+documentação em nenhum serviço externo.
+
+### Criando um componente novo
+
+Siga o padrão do `src/components/A6Button/` (ele está comentado como modelo).
+Todo componente público leva o prefixo `A6` — no nome do componente
+(`A6NomeDoComponente`), nos tipos (`A6NomeDoComponenteProps`) e nas
+variants (`a6NomeDoComponenteVariants`):
+
+1. `A6NomeDoComponente.tsx` — variantes com `cva`, props tipadas, `className` mesclado com `cn()`
+2. `A6NomeDoComponente.stories.tsx` — stories com controles
+3. `index.ts` — re-export
+4. Exportar em `src/index.ts`
+
+---
+
+## Propondo uma mudança (fluxo de release)
+
+O versionamento é automatizado com **Changesets**:
+
+1. Faça sua alteração numa branch.
+2. Rode `pnpm changeset` — escolha o tipo de bump (patch/minor/major) e
+   descreva a mudança. Isso cria um arquivo em `.changeset/`, que deve ser
+   commitado junto.
+3. Abra o PR e faça o merge na `main`.
+4. O workflow `release.yml` abre (ou atualiza) automaticamente um PR chamado
+   **"chore: nova versão"**, acumulando os changesets pendentes.
+5. Quando esse PR de versão for mergeado, o workflow **publica no npm
+   sozinho** e atualiza o `CHANGELOG.md`.
+
+> Mudanças que não afetam o pacote publicado (docs, CI, stories) não
+> precisam de changeset.
+
+---
+
+## CI/CD
+
+Um único workflow: `.github/workflows/release.yml`, disparado em push na
+`main`. Ele instala as dependências, builda a lib e usa a action oficial
+`changesets/action` para versionar/publicar.
+
+**Secret necessário no GitHub** (Settings → Secrets and variables → Actions):
+
+| Secret      | O que é                                                                                        |
+| ----------- | ---------------------------------------------------------------------------------------------- |
+| `NPM_TOKEN` | Token de **Automation** gerado em npmjs.com → Access Tokens, com permissão de publish no scope `@atomsix` |

package/dist/index.cjs

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  A6Button: () => A6Button,
+  a6ButtonVariants: () => a6ButtonVariants,
+  cn: () => cn
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/A6Button/A6Button.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/A6Button/A6Button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var a6ButtonVariants = (0, import_class_variance_authority.cva)(
+  // Classes base — aplicadas em todas as variantes
+  "inline-flex items-end justify-end gap-2 rounded-ds font-sans font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      /** Estilo visual do botão */
+      variant: {
+        primary: "bg-orange-600 text-violet-600 hover:bg-orange-700 active:bg-orange-800",
+        outline: "border border-orange-600 bg-transparent text-orange-600 hover:bg-orange-50 active:bg-orange-100"
+      },
+      /** Tamanho do botão */
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var A6Button = (0, import_react.forwardRef)(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(a6ButtonVariants({ variant, size }), className),
+        ...props
+      }
+    );
+  }
+);
+A6Button.displayName = "A6Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  A6Button,
+  a6ButtonVariants,
+  cn
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/A6Button/A6Button.tsx","../src/lib/cn.ts"],"sourcesContent":["// Componentes\nexport { A6Button, a6ButtonVariants, type A6ButtonProps } from './components/A6Button'\n\n// Utilitários\nexport { cn } from './lib/cn'\n","import { forwardRef, type ButtonHTMLAttributes } from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/cn'\n\n/**\n * Variantes do A6Button definidas com cva (class-variance-authority).\n *\n * Este componente serve de MODELO para os próximos componentes do\n * design system. O padrão é sempre o mesmo:\n *\n *   1. Definir as classes base + variantes com cva()\n *   2. Tipar as props estendendo os atributos nativos + VariantProps\n *   3. Aceitar `className` e mesclar com cn() por último, para que o\n *      consumidor consiga sobrescrever qualquer estilo padrão\n *\n * Todos os componentes públicos usam o prefixo `A6` (ex.: A6Button,\n * A6Input), assim como seus tipos (A6ButtonProps) e variants\n * (a6ButtonVariants).\n */\nconst a6ButtonVariants = cva(\n  // Classes base — aplicadas em todas as variantes\n  'inline-flex items-end justify-end gap-2 rounded-ds font-sans font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      /** Estilo visual do botão */\n      variant: {\n        primary: 'bg-orange-600 text-violet-600 hover:bg-orange-700 active:bg-orange-800',\n        outline:\n          'border border-orange-600 bg-transparent text-orange-600 hover:bg-orange-50 active:bg-orange-100',\n      },\n      /** Tamanho do botão */\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport interface A6ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof a6ButtonVariants> {}\n\n/**\n * Botão padrão do design system.\n *\n * @example\n * <A6Button variant=\"outline\" size=\"sm\" onClick={...}>Cancelar</A6Button>\n */\nexport const A6Button = forwardRef<HTMLButtonElement, A6ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(a6ButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n  },\n)\n\nA6Button.displayName = 'A6Button'\n\nexport { a6ButtonVariants }\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Combina classes condicionalmente (clsx) e resolve conflitos de utilitários\n * Tailwind (tailwind-merge). Ex.: cn('px-4', 'px-2') → 'px-2'.\n *\n * Use em todo componente que aceita `className` como prop, para que o\n * consumidor consiga sobrescrever estilos padrão do design system.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAsD;AACtD,sCAAuC;;;ACDvC,kBAAsC;AACtC,4BAAwB;AASjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD4CM;AArCN,IAAM,uBAAmB;AAAA;AAAA,EAEvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,MACJ;AAAA;AAAA,MAEA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAYO,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QAC3D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+/**
+ * Variantes do A6Button definidas com cva (class-variance-authority).
+ *
+ * Este componente serve de MODELO para os próximos componentes do
+ * design system. O padrão é sempre o mesmo:
+ *
+ *   1. Definir as classes base + variantes com cva()
+ *   2. Tipar as props estendendo os atributos nativos + VariantProps
+ *   3. Aceitar `className` e mesclar com cn() por último, para que o
+ *      consumidor consiga sobrescrever qualquer estilo padrão
+ *
+ * Todos os componentes públicos usam o prefixo `A6` (ex.: A6Button,
+ * A6Input), assim como seus tipos (A6ButtonProps) e variants
+ * (a6ButtonVariants).
+ */
+declare const a6ButtonVariants: (props?: ({
+    variant?: "primary" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface A6ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof a6ButtonVariants> {
+}
+/**
+ * Botão padrão do design system.
+ *
+ * @example
+ * <A6Button variant="outline" size="sm" onClick={...}>Cancelar</A6Button>
+ */
+declare const A6Button: react.ForwardRefExoticComponent<A6ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Combina classes condicionalmente (clsx) e resolve conflitos de utilitários
+ * Tailwind (tailwind-merge). Ex.: cn('px-4', 'px-2') → 'px-2'.
+ *
+ * Use em todo componente que aceita `className` como prop, para que o
+ * consumidor consiga sobrescrever estilos padrão do design system.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { A6Button, type A6ButtonProps, a6ButtonVariants, cn };

package/dist/index.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { ClassValue } from 'clsx';
+
+/**
+ * Variantes do A6Button definidas com cva (class-variance-authority).
+ *
+ * Este componente serve de MODELO para os próximos componentes do
+ * design system. O padrão é sempre o mesmo:
+ *
+ *   1. Definir as classes base + variantes com cva()
+ *   2. Tipar as props estendendo os atributos nativos + VariantProps
+ *   3. Aceitar `className` e mesclar com cn() por último, para que o
+ *      consumidor consiga sobrescrever qualquer estilo padrão
+ *
+ * Todos os componentes públicos usam o prefixo `A6` (ex.: A6Button,
+ * A6Input), assim como seus tipos (A6ButtonProps) e variants
+ * (a6ButtonVariants).
+ */
+declare const a6ButtonVariants: (props?: ({
+    variant?: "primary" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface A6ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof a6ButtonVariants> {
+}
+/**
+ * Botão padrão do design system.
+ *
+ * @example
+ * <A6Button variant="outline" size="sm" onClick={...}>Cancelar</A6Button>
+ */
+declare const A6Button: react.ForwardRefExoticComponent<A6ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Combina classes condicionalmente (clsx) e resolve conflitos de utilitários
+ * Tailwind (tailwind-merge). Ex.: cn('px-4', 'px-2') → 'px-2'.
+ *
+ * Use em todo componente que aceita `className` como prop, para que o
+ * consumidor consiga sobrescrever estilos padrão do design system.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { A6Button, type A6ButtonProps, a6ButtonVariants, cn };

package/dist/index.js

@@ -0,0 +1,54 @@
+// src/components/A6Button/A6Button.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/A6Button/A6Button.tsx
+import { jsx } from "react/jsx-runtime";
+var a6ButtonVariants = cva(
+  // Classes base — aplicadas em todas as variantes
+  "inline-flex items-end justify-end gap-2 rounded-ds font-sans font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      /** Estilo visual do botão */
+      variant: {
+        primary: "bg-orange-600 text-violet-600 hover:bg-orange-700 active:bg-orange-800",
+        outline: "border border-orange-600 bg-transparent text-orange-600 hover:bg-orange-50 active:bg-orange-100"
+      },
+      /** Tamanho do botão */
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var A6Button = forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(a6ButtonVariants({ variant, size }), className),
+        ...props
+      }
+    );
+  }
+);
+A6Button.displayName = "A6Button";
+export {
+  A6Button,
+  a6ButtonVariants,
+  cn
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/A6Button/A6Button.tsx","../src/lib/cn.ts"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes } from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/cn'\n\n/**\n * Variantes do A6Button definidas com cva (class-variance-authority).\n *\n * Este componente serve de MODELO para os próximos componentes do\n * design system. O padrão é sempre o mesmo:\n *\n *   1. Definir as classes base + variantes com cva()\n *   2. Tipar as props estendendo os atributos nativos + VariantProps\n *   3. Aceitar `className` e mesclar com cn() por último, para que o\n *      consumidor consiga sobrescrever qualquer estilo padrão\n *\n * Todos os componentes públicos usam o prefixo `A6` (ex.: A6Button,\n * A6Input), assim como seus tipos (A6ButtonProps) e variants\n * (a6ButtonVariants).\n */\nconst a6ButtonVariants = cva(\n  // Classes base — aplicadas em todas as variantes\n  'inline-flex items-end justify-end gap-2 rounded-ds font-sans font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-orange-500 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      /** Estilo visual do botão */\n      variant: {\n        primary: 'bg-orange-600 text-violet-600 hover:bg-orange-700 active:bg-orange-800',\n        outline:\n          'border border-orange-600 bg-transparent text-orange-600 hover:bg-orange-50 active:bg-orange-100',\n      },\n      /** Tamanho do botão */\n      size: {\n        sm: 'h-8 px-3 text-sm',\n        md: 'h-10 px-4 text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  },\n)\n\nexport interface A6ButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof a6ButtonVariants> {}\n\n/**\n * Botão padrão do design system.\n *\n * @example\n * <A6Button variant=\"outline\" size=\"sm\" onClick={...}>Cancelar</A6Button>\n */\nexport const A6Button = forwardRef<HTMLButtonElement, A6ButtonProps>(\n  ({ className, variant, size, ...props }, ref) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(a6ButtonVariants({ variant, size }), className)}\n        {...props}\n      />\n    )\n  },\n)\n\nA6Button.displayName = 'A6Button'\n\nexport { a6ButtonVariants }\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Combina classes condicionalmente (clsx) e resolve conflitos de utilitários\n * Tailwind (tailwind-merge). Ex.: cn('px-4', 'px-2') → 'px-2'.\n *\n * Use em todo componente que aceita `className` como prop, para que o\n * consumidor consiga sobrescrever estilos padrão do design system.\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";AAAA,SAAS,kBAA6C;AACtD,SAAS,WAA8B;;;ACDvC,SAAS,YAA6B;AACtC,SAAS,eAAe;AASjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AD4CM;AArCN,IAAM,mBAAmB;AAAA;AAAA,EAEvB;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SACE;AAAA,MACJ;AAAA;AAAA,MAEA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAYO,IAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,iBAAiB,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QAC3D,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;","names":[]}

package/dist/theme.css

@@ -0,0 +1,45 @@
+/**
+ * Tokens do design system — Tailwind CSS v4 (abordagem CSS-first).
+ *
+ * Este arquivo é publicado no pacote como `@atomsix/design-system/theme.css`.
+ * O projeto consumidor importa ele na folha CSS principal, logo após o Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "@atomsix/design-system/theme.css";
+ *   @source "../node_modules/@atomsix/design-system";
+ *
+ * Cada variável dentro de @theme vira automaticamente utilitários Tailwind:
+ *   --color-primary-600  →  bg-primary-600, text-primary-600, border-primary-600...
+ *   --font-sans          →  font-sans
+ *   --spacing-18         →  p-18, m-18, gap-18...
+ */
+@theme {
+  /* ── Cores da marca ─────────────────────────────────────────────
+     Escala de 50 (mais claro) a 950 (mais escuro).
+     Troque os valores abaixo pelas cores da sua identidade visual. */
+  --color-primary-50: oklch(0.97 0.015 260);
+  --color-primary-100: oklch(0.93 0.03 260);
+  --color-primary-200: oklch(0.87 0.06 260);
+  --color-primary-300: oklch(0.78 0.1 260);
+  --color-primary-400: oklch(0.68 0.15 260);
+  --color-primary-500: oklch(0.58 0.2 260);
+  --color-primary-600: oklch(0.51 0.22 260);
+  --color-primary-700: oklch(0.45 0.2 260);
+  --color-primary-800: oklch(0.39 0.16 260);
+  --color-primary-900: oklch(0.34 0.12 260);
+  --color-primary-950: oklch(0.25 0.09 260);
+
+  /* ── Tipografia ─────────────────────────────────────────────────
+     Fonte padrão dos componentes. Se usar uma fonte customizada
+     (ex.: via @font-face ou next/font), atualize aqui. */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+
+  /* ── Spacing extra ──────────────────────────────────────────────
+     O Tailwind já gera a escala padrão a partir de --spacing (0.25rem).
+     Adicione aqui apenas valores fora da escala, se precisar. */
+  --spacing-18: 4.5rem;
+
+  /* ── Border radius ──────────────────────────────────────────────
+     Raio padrão usado nos componentes (rounded-ds). */
+  --radius-ds: 0.5rem;
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@atomsix/design-system",
+  "version": "0.0.2",
+  "description": "Design system da Atom6 Studio — componentes React estilizados com Tailwind CSS v4",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JucoskiCristian/teste-design-system.git"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./theme.css": "./dist/theme.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "packageManager": "pnpm@11.3.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup && shx cp src/styles/theme.css dist/theme.css",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "changeset": "changeset",
+    "release": "pnpm build && changeset publish"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
+    "@tailwindcss/vite": "^4.3.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "shx": "^0.4.0",
+    "storybook": "^10.4.6",
+    "tailwindcss": "^4.3.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.1.3"
+  }
+}