@snksergio/design-system 0.5.0 → 0.17.0

package/dist-lib/tokens/brands/default/semantic/elevation.d.ts

@@ -0,0 +1,147 @@
+/**
+ * elevation.ts — Elevation tokens (shadows + opacity + blur + z-index) — V3
+ *
+ * REGRAS:
+ * - Shadows ficam juntos com opacity porque definem "elevação".
+ * - Shadows usam string literal pra parsing em build time.
+ * - Múltiplas shadows por camada (ambient + key light).
+ * - Dark mode: opacidade ~2-3x maior (sombras precisam ser mais fortes em fundo escuro).
+ *
+ * NOTA: Shadows usam OKLCH com slash alpha — formato moderno, suporte amplo.
+ *
+ * HIERARQUIA DE ELEVAÇÃO (V3):
+ *   none    → sem elevação
+ *   sm      → controles, botões em repouso
+ *   md      → cards em repouso, tooltips
+ *   lg      → popovers, dropdowns ancorados
+ *   xl      → dropdowns grandes
+ *   2xl     → modais, dialogs
+ *   aside   → drawer slide-in lateral (direção horizontal)
+ *
+ * Outros composites:
+ *   ring    → focus de input/textarea/select (3px brand-tinted box-shadow)
+ */
+export declare const shadow: {
+    readonly light: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px oklch(0 0 0 / 0.04)";
+        readonly md: "rgba(145, 158, 171, 0.18) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px";
+        readonly lg: "0 8px 24px oklch(0 0 0 / 0.08)";
+        readonly xl: "0 12px 32px oklch(0 0 0 / 0.08)";
+        readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.16)";
+        readonly aside: "-8px 0 24px oklch(0 0 0 / 0.12)";
+        readonly ring: "0 0 0 3px color-mix(in oklch, oklch(0.5248 0.1415 150.9) 22%, transparent)";
+        readonly "ring-danger": "0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent)";
+        readonly "ring-warning": "0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent)";
+        readonly "ring-success": "0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent)";
+        readonly "ring-info": "0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent)";
+    };
+    readonly dark: {
+        readonly none: "none";
+        readonly sm: "0 1px 2px oklch(0 0 0 / 0.15)";
+        readonly md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)";
+        readonly lg: "0 8px 24px oklch(0 0 0 / 0.30)";
+        readonly xl: "0 12px 32px oklch(0 0 0 / 0.40)";
+        readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.45)";
+        readonly aside: "-8px 0 24px oklch(0 0 0 / 0.40)";
+        readonly ring: "0 0 0 3px color-mix(in oklch, oklch(0.7289 0.1571 162.3) 22%, transparent)";
+        readonly "ring-danger": "0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent)";
+        readonly "ring-warning": "0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent)";
+        readonly "ring-success": "0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent)";
+        readonly "ring-info": "0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent)";
+    };
+};
+export declare const opacity: {
+    readonly disabled: 0.38;
+    readonly hover: 0.08;
+    readonly focus: 0.12;
+    readonly pressed: 0.12;
+    readonly dragged: 0.16;
+    readonly invisible: 0;
+    readonly muted: 0.5;
+    readonly subtle: 0.7;
+    readonly full: 1;
+    readonly "scrim-light": 0.32;
+    readonly "scrim-dark": 0.64;
+};
+export declare const blur: {
+    readonly sm: "blur(4px)";
+    readonly md: "blur(8px)";
+    readonly lg: "blur(16px)";
+    readonly xl: "blur(24px)";
+};
+export declare const zIndex: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly dropdown: 100;
+    readonly sticky: 200;
+    readonly overlay: 300;
+    readonly modal: 400;
+    readonly popover: 500;
+    readonly toast: 600;
+    readonly tooltip: 700;
+};
+export declare const elevation: {
+    readonly shadow: {
+        readonly light: {
+            readonly none: "none";
+            readonly sm: "0 1px 2px oklch(0 0 0 / 0.04)";
+            readonly md: "rgba(145, 158, 171, 0.18) 0 0 2px 0, rgba(145, 158, 171, 0.12) 0 12px 24px -4px";
+            readonly lg: "0 8px 24px oklch(0 0 0 / 0.08)";
+            readonly xl: "0 12px 32px oklch(0 0 0 / 0.08)";
+            readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.16)";
+            readonly aside: "-8px 0 24px oklch(0 0 0 / 0.12)";
+            readonly ring: "0 0 0 3px color-mix(in oklch, oklch(0.5248 0.1415 150.9) 22%, transparent)";
+            readonly "ring-danger": "0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent)";
+            readonly "ring-warning": "0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent)";
+            readonly "ring-success": "0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent)";
+            readonly "ring-info": "0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent)";
+        };
+        readonly dark: {
+            readonly none: "none";
+            readonly sm: "0 1px 2px oklch(0 0 0 / 0.15)";
+            readonly md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)";
+            readonly lg: "0 8px 24px oklch(0 0 0 / 0.30)";
+            readonly xl: "0 12px 32px oklch(0 0 0 / 0.40)";
+            readonly "2xl": "0 24px 56px oklch(0 0 0 / 0.45)";
+            readonly aside: "-8px 0 24px oklch(0 0 0 / 0.40)";
+            readonly ring: "0 0 0 3px color-mix(in oklch, oklch(0.7289 0.1571 162.3) 22%, transparent)";
+            readonly "ring-danger": "0 0 0 3px color-mix(in oklch, oklch(0.6368 0.2078 25.33) 22%, transparent)";
+            readonly "ring-warning": "0 0 0 3px color-mix(in oklch, oklch(0.81 0.160 81) 22%, transparent)";
+            readonly "ring-success": "0 0 0 3px color-mix(in oklch, oklch(0.66 0.135 161) 22%, transparent)";
+            readonly "ring-info": "0 0 0 3px color-mix(in oklch, oklch(0.62 0.210 280) 22%, transparent)";
+        };
+    };
+    readonly opacity: {
+        readonly disabled: 0.38;
+        readonly hover: 0.08;
+        readonly focus: 0.12;
+        readonly pressed: 0.12;
+        readonly dragged: 0.16;
+        readonly invisible: 0;
+        readonly muted: 0.5;
+        readonly subtle: 0.7;
+        readonly full: 1;
+        readonly "scrim-light": 0.32;
+        readonly "scrim-dark": 0.64;
+    };
+    readonly blur: {
+        readonly sm: "blur(4px)";
+        readonly md: "blur(8px)";
+        readonly lg: "blur(16px)";
+        readonly xl: "blur(24px)";
+    };
+    readonly zIndex: {
+        readonly hide: -1;
+        readonly base: 0;
+        readonly dropdown: 100;
+        readonly sticky: 200;
+        readonly overlay: 300;
+        readonly modal: 400;
+        readonly popover: 500;
+        readonly toast: 600;
+        readonly tooltip: 700;
+    };
+};
+export type ElevationToken = typeof elevation;
+//# sourceMappingURL=elevation.d.ts.map

package/dist-lib/tokens/brands/default/semantic/elevation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/elevation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAMH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCT,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;;;;;;;CAiBV,CAAC;AAGX,eAAO,MAAM,IAAI;;;;;CAKP,CAAC;AAGX,eAAO,MAAM,MAAM;;;;;;;;;;CAUT,CAAC;AAEX,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA6C,CAAC;AACpE,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC"}

package/dist-lib/tokens/brands/default/semantic/shape.d.ts

@@ -0,0 +1,90 @@
+/**
+ * shape.ts — Shape tokens (border-radius + border-width)
+ *
+ * REGRAS:
+ * - border-radius e border-width ficam juntos porque definem a "forma" visual.
+ *   Quando um muda, o outro costuma mudar — são co-dependentes de tema.
+ * - Nomenclatura: base (default), none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full.
+ *
+ * FILOSOFIA DE FORMA:
+ *   O sistema usa um "knob" central (RADIUS_BASE = 0.625rem = 10px).
+ *   Todos os steps são derivados por multiplicador.
+ *   Mudar RADIUS_BASE escala toda a personalidade do sistema.
+ *
+ *   `base` = radius padrão de componentes interativos (buttons, cards, inputs, dialogs).
+ *   Escala numérica (xs→4xl) existe para casos onde se precisa de um radius específico.
+ *
+ * RELAÇÃO form height → radius:
+ *   xl (44px)  → base (10px)
+ *   lg (40px)  → base (10px)
+ *   md (36px)  → base (10px)
+ *   sm (32px)  → md  (8px)
+ *   xs (28px)  → md  (8px)
+ */
+/**
+ * Knob central do sistema — controla a "personalidade de forma" (sharp → pill).
+ * Alterar este valor escala toda a curva de radius proporcionalmente.
+ * O transform to-tailwind-v4 gera calc(RADIUS_BASE * N) para cada step.
+ */
+export declare const RADIUS_BASE = "0.625rem";
+export declare const radius: {
+    readonly base: "0.625rem";
+    readonly none: "0px";
+    readonly xs: "0.625rem * 0.4";
+    readonly sm: "0.625rem * 0.6";
+    readonly md: "0.625rem * 0.8";
+    readonly lg: "0.625rem";
+    readonly xl: "0.625rem * 1.4";
+    readonly "2xl": "0.625rem * 1.8";
+    readonly "3xl": "0.625rem * 2.2";
+    readonly "4xl": "0.625rem * 2.6";
+    readonly full: "9999px";
+};
+export declare const borderWidth: {
+    readonly none: "0px";
+    readonly xs: "1px";
+    readonly sm: "2px";
+    readonly md: "4px";
+};
+export declare const outline: {
+    readonly width: "2px";
+    readonly offset: "2px";
+    readonly style: "solid";
+};
+export declare const divider: {
+    readonly width: "1px";
+    readonly style: "solid";
+};
+export declare const shape: {
+    readonly radius: {
+        readonly base: "0.625rem";
+        readonly none: "0px";
+        readonly xs: "0.625rem * 0.4";
+        readonly sm: "0.625rem * 0.6";
+        readonly md: "0.625rem * 0.8";
+        readonly lg: "0.625rem";
+        readonly xl: "0.625rem * 1.4";
+        readonly "2xl": "0.625rem * 1.8";
+        readonly "3xl": "0.625rem * 2.2";
+        readonly "4xl": "0.625rem * 2.6";
+        readonly full: "9999px";
+    };
+    readonly RADIUS_BASE: "0.625rem";
+    readonly borderWidth: {
+        readonly none: "0px";
+        readonly xs: "1px";
+        readonly sm: "2px";
+        readonly md: "4px";
+    };
+    readonly outline: {
+        readonly width: "2px";
+        readonly offset: "2px";
+        readonly style: "solid";
+    };
+    readonly divider: {
+        readonly width: "1px";
+        readonly style: "solid";
+    };
+};
+export type ShapeToken = typeof shape;
+//# sourceMappingURL=shape.d.ts.map

package/dist-lib/tokens/brands/default/semantic/shape.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shape.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/shape.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAGH;;;;GAIG;AACH,eAAO,MAAM,WAAW,aAAa,CAAC;AAEtC,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAC;AAGX,eAAO,MAAM,WAAW;;;;;CAKd,CAAC;AAIX,eAAO,MAAM,OAAO;;;;CAIV,CAAC;AAGX,eAAO,MAAM,OAAO;;;CAGV,CAAC;AAEX,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAkE,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,OAAO,KAAK,CAAC"}

package/dist-lib/tokens/brands/default/semantic/sizing.d.ts

@@ -0,0 +1,42 @@
+/**
+ * sizing.ts — Escala genérica de dimensões de componente
+ *
+ * REGRAS:
+ * - Escala única `comp` para h-*, w-*, size-* (height, width, square).
+ * - Baseada em scales.ts (base-4 system).
+ * - Heights são min-height (componentes crescem com conteúdo).
+ * - WCAG 2.1 AA: mínimo 44px de touch target para interativos.
+ *
+ * Tokens orientados a componente específico (form, layout, icon, container)
+ * ficam em components/sizing.ts.
+ */
+export declare const comp: {
+    readonly base: string;
+    readonly "3xs": string;
+    readonly "2xs": string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly "3xl": string;
+    readonly "4xl": string;
+};
+export declare const sizing: {
+    readonly comp: {
+        readonly base: string;
+        readonly "3xs": string;
+        readonly "2xs": string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+    };
+};
+export type SizingToken = typeof sizing;
+//# sourceMappingURL=sizing.d.ts.map

package/dist-lib/tokens/brands/default/semantic/sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sizing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/sizing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAMH,eAAO,MAAM,IAAI;;;;;;;;;;;;CAYP,CAAC;AAEX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAAoB,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,OAAO,MAAM,CAAC"}

package/dist-lib/tokens/brands/default/semantic/spacing.d.ts

@@ -0,0 +1,121 @@
+/**
+ * spacing.ts — Semantic spacing tokens
+ *
+ * REGRAS:
+ * - Todos os valores derivam de scales.ts.
+ * - 3 conceitos: space (genérico), gap (entre items), pad (padding).
+ * - Os 3 compartilham a MESMA escala de valores.
+ * - O prefixo (sp-, gp-, pad-) diferencia o papel no CSS.
+ *
+ * ESCALA UNIFICADA:
+ *   2xs=2  xs=4  sm=6  md=8  lg=10  xl=12  2xl=16  3xl=20  4xl=24  5xl=28  6xl=32  7xl=48
+ *
+ * CONVENÇÃO DE PAPÉIS:
+ *   space → genérico (margin, padding simétrico, offsets)
+ *   gap   → entre filhos flex/grid, icon-to-label, section spacing
+ *   pad   → padding interno de componente
+ */
+export declare const space: {
+    readonly "2xs": string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly "3xl": string;
+    readonly "4xl": string;
+    readonly "5xl": string;
+    readonly "6xl": string;
+    readonly "7xl": string;
+    readonly base: string;
+    readonly 0: string;
+    readonly px: {
+        readonly px: "1px";
+        readonly raw: 1;
+    };
+};
+export declare const gap: {
+    readonly "2xs": string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly "3xl": string;
+    readonly "4xl": string;
+    readonly "5xl": string;
+    readonly "6xl": string;
+    readonly "7xl": string;
+    readonly base: string;
+};
+export declare const pad: {
+    readonly "2xs": string;
+    readonly xs: string;
+    readonly sm: string;
+    readonly md: string;
+    readonly lg: string;
+    readonly xl: string;
+    readonly "2xl": string;
+    readonly "3xl": string;
+    readonly "4xl": string;
+    readonly "5xl": string;
+    readonly "6xl": string;
+    readonly "7xl": string;
+    readonly base: string;
+};
+export declare const spacing: {
+    readonly space: {
+        readonly "2xs": string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+        readonly "5xl": string;
+        readonly "6xl": string;
+        readonly "7xl": string;
+        readonly base: string;
+        readonly 0: string;
+        readonly px: {
+            readonly px: "1px";
+            readonly raw: 1;
+        };
+    };
+    readonly gap: {
+        readonly "2xs": string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+        readonly "5xl": string;
+        readonly "6xl": string;
+        readonly "7xl": string;
+        readonly base: string;
+    };
+    readonly pad: {
+        readonly "2xs": string;
+        readonly xs: string;
+        readonly sm: string;
+        readonly md: string;
+        readonly lg: string;
+        readonly xl: string;
+        readonly "2xl": string;
+        readonly "3xl": string;
+        readonly "4xl": string;
+        readonly "5xl": string;
+        readonly "6xl": string;
+        readonly "7xl": string;
+        readonly base: string;
+    };
+};
+export type SpacingToken = typeof spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/dist-lib/tokens/brands/default/semantic/spacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/spacing.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAqBH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;CAKR,CAAC;AAGX,eAAO,MAAM,GAAG;;;;;;;;;;;;;;CAGN,CAAC;AAGX,eAAO,MAAM,GAAG;;;;;;;;;;;;;;CAGN,CAAC;AAGX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+B,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,OAAO,CAAC"}

package/dist-lib/tokens/brands/default/semantic/typography.d.ts

@@ -0,0 +1,59 @@
+/**
+ * typography.ts — Semantic typography tokens (composite)
+ *
+ * 6 roles: display | heading | title | body | caption | code
+ * 23 presets totais
+ *
+ * REGRAS:
+ * - Presets compostos: combinam fontSize + lineHeight + fontWeight + letterSpacing + fontFamily.
+ * - Nomenclatura: {role}-{tier}
+ * - Valores em rem (acessibilidade: respeita preferência de fonte do usuário).
+ * - display/heading (≥ 32px desktop) usam clamp() para fluid typography.
+ * - Presets menores usam rem estático (fluid não faz diferença abaixo de 32px).
+ *
+ * WEIGHT DEFAULT POR ROLE:
+ *   - display:  varia por tier (semibold → bold)
+ *   - heading:  500 (medium) para fluid; 500 para heading-xs estático
+ *   - title:    600 (semibold) — mais usado no projeto
+ *   - body-xs/sm: 500 (medium) — interactive (button, dropdown, input, table cell)
+ *   - body-md/lg/xl/2xl: 400 (regular) — body corrido
+ *   - caption:  400 (regular)
+ *   - code:     400 (regular, mono)
+ *
+ * OVERRIDE CONVENCIONAL via Tailwind nativo:
+ *   - font-bold/semibold/medium/normal — peso diferente
+ *   - leading-X — line-height
+ *   - tracking-X — letter-spacing
+ *
+ * HIERARQUIA:
+ *   display    → hero sections, marketing (muito grande, fluid)
+ *   heading    → títulos de página, modais (grande, fluid a partir de sm)
+ *   title      → títulos de card, seção (médio, estático, weight 600)
+ *   body       → texto corrido + interactive (estático)
+ *   caption    → texto auxiliar, metadados, microlabels (estático)
+ *   code       → código inline e blocos (estático, mono)
+ *
+ * Migration log:
+ *   - 2026-05-19: rewrite enxuto. Removidos paragraph-*, label-*, subheading-* (32→23 presets).
+ *                 Decimais e órfãos (10.5/11.5/12.5/13.5/14.5/15/17/22/26) já eliminados nas Ondas 1-4.
+ */
+interface TypographyPreset {
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    letterSpacing: string;
+    fontFamily: string;
+}
+export declare const display: Record<string, TypographyPreset>;
+export declare const heading: Record<string, TypographyPreset>;
+export declare const title: Record<string, TypographyPreset>;
+export declare const body: Record<string, TypographyPreset>;
+export declare const caption: Record<string, TypographyPreset>;
+export declare const code: Record<string, TypographyPreset>;
+export declare const typography: {
+    readonly [x: string]: TypographyPreset;
+};
+export type TypographyToken = typeof typography;
+export type TypographyKey = keyof typeof typography;
+export {};
+//# sourceMappingURL=typography.d.ts.map

package/dist-lib/tokens/brands/default/semantic/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../tokens/brands/default/semantic/typography.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAKH,UAAU,gBAAgB;IACxB,QAAQ,EAAO,MAAM,CAAC;IACtB,UAAU,EAAK,MAAM,CAAC;IACtB,UAAU,EAAK,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAK,MAAM,CAAC;CACvB;AAID,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CA6B3C,CAAC;AAIX,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAoC3C,CAAC;AAIX,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAsBzC,CAAC;AAIX,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CA6CxC,CAAC;AAIX,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAsB3C,CAAC;AAGX,eAAO,MAAM,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAexC,CAAC;AAGX,eAAO,MAAM,UAAU;;CAOb,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,OAAO,UAAU,CAAC;AAChD,MAAM,MAAM,aAAa,GAAK,MAAM,OAAO,UAAU,CAAC"}

package/dist-lib/tokens/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * index.ts — Barrel export do Design System
+ *
+ * Importar daqui nas aplicações consumidoras.
+ * Não expõe primitivos (API privada).
+ *
+ * Tier 3 (component tokens como objetos .ts) foi removido.
+ * Componentes agora usam classes semânticas via tv() em *.styles.ts.
+ * A fonte de verdade visual de cada componente é seu *.styles.ts.
+ */
+export { colorLight } from './brands/default/semantic/color-light';
+export { colorDark } from './brands/default/semantic/color-dark';
+export { spacing } from './brands/default/semantic/spacing';
+export { sizing } from './brands/default/semantic/sizing';
+export { shape } from './brands/default/semantic/shape';
+export { elevation } from './brands/default/semantic/elevation';
+export { typography } from './brands/default/semantic/typography';
+export { motionPresets, duration, easing } from './brands/default/primitives/motion';
+export type { ShapeToken } from './brands/default/semantic/shape';
+export type { SizingToken } from './brands/default/semantic/sizing';
+export type { ElevationToken } from './brands/default/semantic/elevation';
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAS,uCAAuC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAU,sCAAsC,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAY,mCAAmC,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAa,kCAAkC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAc,iCAAiC,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAU,qCAAqC,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,MAAS,sCAAsC,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAGrF,YAAY,EAAE,UAAU,EAAE,MAAU,iCAAiC,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,MAAS,kCAAkC,CAAC;AACvE,YAAY,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC"}

package/dist-lib/tokens.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const brand = {
+  500: "oklch(0.58 0.140 151)",
   600: "oklch(0.5248 0.1415 150.9)"
 };
 const brandContrast = {
@@ -93,6 +94,13 @@ const bg$1 = {
   // (não usar `bg-brand-subtle` 14% — forte demais como bg de row)
   "table-row-selected": `color-mix(in oklch, ${brand[600]} 6%, transparent)`,
   "table-row-selected-hover": `color-mix(in oklch, ${brand[600]} 10%, transparent)`,
+  // Versões OPACAS dos selected — pra sticky/pinned cells não vazarem o conteúdo
+  // de trás (color-mix com `transparent` deixa o conteúdo scrollado aparecer
+  // sob a coluna fixa). Mix em SRGB (não oklch): misturar em oklch com um bg
+  // achromático (hue 0) contamina o hue → tinge de vermelho. Em srgb o resultado
+  // é o mesmo alpha-over do token transparente sobre o bg da tabela (white).
+  "table-row-selected-solid": `color-mix(in srgb, ${brand[600]} 6%, ${white})`,
+  "table-row-selected-hover-solid": `color-mix(in srgb, ${brand[600]} 10%, ${white})`,
   // Dropdown/Popover — referencia bg-canvas (white no light)
   "dropdown": "var(--color-bg-canvas)"
 };
@@ -155,7 +163,21 @@ const overlay$1 = {
   // 12% mantém o efeito "halo sutil" mas com presença visual real.
   float: "oklch(0.55 0 0 / 0.12)"
 };
-const colorLight = { bg: bg$1, fg: fg$1, border: border$1, ring: ring$1, overlay: overlay$1 };
+const chart$1 = {
+  "1": brand[500],
+  // verde da marca (primitive — acompanha a brand)
+  "2": "oklch(0.66 0.12 195)",
+  // teal
+  "3": "oklch(0.55 0.15 250)",
+  // azul
+  "4": "oklch(0.76 0.15 80)",
+  // âmbar
+  "5": "oklch(0.56 0.18 300)",
+  // violeta
+  grid: gray[200]
+  // linhas-guia dos gráficos (CartesianGrid/PolarGrid)
+};
+const colorLight = { bg: bg$1, fg: fg$1, border: border$1, ring: ring$1, overlay: overlay$1, chart: chart$1 };
 const bg = {
   // Surfaces sólidas
   canvas: gray[900],
@@ -211,6 +233,12 @@ const bg = {
   // (no dark precisa de alpha levemente maior pra ficar visível sobre surface escuro)
   "table-row-selected": `color-mix(in oklch, ${brandContrast[400]} 10%, transparent)`,
   "table-row-selected-hover": `color-mix(in oklch, ${brandContrast[400]} 14%, transparent)`,
+  // Versões OPACAS dos selected — pra sticky/pinned cells não vazarem o conteúdo
+  // de trás. Mix em SRGB (não oklch): misturar em oklch com o bg achromático
+  // (hue 0) contamina o hue → tinge de vermelho. Em srgb dá o mesmo alpha-over
+  // do token transparente sobre o bg sólido da tabela (surface escuro).
+  "table-row-selected-solid": `color-mix(in srgb, ${brandContrast[400]} 10%, oklch(0.225 0 0))`,
+  "table-row-selected-hover-solid": `color-mix(in srgb, ${brandContrast[400]} 14%, oklch(0.225 0 0))`,
   // Dropdown/Popover — frosted-glass: bg-canvas com 70% opacidade
   // (combina com backdrop-blur no componente pra efeito vidro fosco)
   "dropdown": "color-mix(in oklab, var(--color-bg-canvas) 70%, transparent)"
@@ -272,7 +300,21 @@ const overlay = {
   // 8% mantém o efeito "halo sutil" mas com presença visual real.
   float: "oklch(1 0 0 / 0.08)"
 };
-const colorDark = { bg, fg, border, ring, overlay };
+const chart = {
+  "1": brandContrast[400],
+  // verde da marca (primitive dark — acompanha a brand)
+  "2": "oklch(0.72 0.13 195)",
+  // teal
+  "3": "oklch(0.68 0.15 250)",
+  // azul
+  "4": "oklch(0.80 0.15 80)",
+  // âmbar
+  "5": "oklch(0.70 0.17 300)",
+  // violeta
+  grid: "oklch(1 0 0 / 0.12)"
+  // linhas-guia dos gráficos — branco 12% (visível na surface escura)
+};
+const colorDark = { bg, fg, border, ring, overlay, chart };
 const BASE = 4;
 const sp = (n) => `${n * BASE}px`;
 const scale = {
@@ -445,8 +487,11 @@ const shadow = {
   // ── Dark mode ────────────────────────────────────────────────────────────────
   dark: {
     none: "none",
-    sm: "none",
-    md: `0 0 0 1px ${gray[800]}`,
+    // Drop shadows reais no dark (antes: sm=none, md=hairline cinza claro → parecia
+    // "mais claro" no hover). Agora sm = sombra sutil, md = elevação mais profunda
+    // (sempre mais escura que sm). L-011: dark ≥ 2× a opacidade do light.
+    sm: "0 1px 2px oklch(0 0 0 / 0.15)",
+    md: "0 1px 2px oklch(0 0 0 / 0.30), 0 8px 18px -4px oklch(0 0 0 / 0.42)",
     lg: "0 8px 24px oklch(0 0 0 / 0.30)",
     xl: "0 12px 32px oklch(0 0 0 / 0.40)",
     "2xl": "0 24px 56px oklch(0 0 0 / 0.45)",