@sbkbs/ui 1.0.5 → 2.0.0-beta.0

package/dist/tokens.css

@@ -0,0 +1,327 @@
+/* ============================================================
+   @sbkbs/ui · Design tokens (Brand Book SBK 2026)
+   Fonte de verdade: docs/SBK_BRAND_GUIDE.md
+
+   Camadas:
+   1. Paleta oficial     --sbk-<nome>         (valores literais do brand book)
+   2. Semânticos         --sbk-color-<uso>    (o que os componentes consomem)
+   3. Escalas            --sbk-radius-*, --sbk-shadow-*, --sbk-font-*, --sbk-duration-*
+   4. Aliases legados    --md-*, --brand-*, --bg-*, --text-* (deprecados, removidos na 3.0)
+
+   Temas:
+   - Padrão: SBK IA (produto digital)
+   - [data-brand='sbk']: SBK institucional (marca-mãe)
+   - [data-theme='dark']: modo escuro (proposta, a validar com marca)
+   ============================================================ */
+
+/* ---------- 1. Paleta oficial ---------- */
+:root {
+  /* Primária */
+  --sbk-verde-escuro: #023631;
+  --sbk-ciano-escuro: #075056;
+  --sbk-off-white: #eceff3;
+
+  /* Secundária */
+  --sbk-verde-claro: #0a5a52;
+  --sbk-verde-profundo: #012824;
+  --sbk-ciano: #2a7c79;
+  --sbk-ciano-profundo: #0e4442;
+  --sbk-chumbo-leve: #4a545e;
+  --sbk-preto: #000000;
+  --sbk-branco: #ffffff;
+
+  /* Estados: fora do brand book, PROPOSTA pendente de aprovação da marca.
+     Tons sóbrios, todos com contraste AA (>= 4.5:1) sobre branco. */
+  --sbk-estado-sucesso: #1d6b43;
+  --sbk-estado-alerta: #b45309;
+  --sbk-estado-erro: #b42318;
+  --sbk-estado-info: var(--sbk-ciano-escuro);
+}
+
+/* ---------- 2 e 3. Semânticos e escalas (tema SBK IA, claro) ---------- */
+:root {
+  /* Fundos e superfícies */
+  --sbk-color-bg: var(--sbk-off-white);
+  --sbk-color-surface: var(--sbk-branco);
+  --sbk-color-surface-sunken: var(--sbk-off-white);
+  --sbk-color-surface-hover: color-mix(in srgb, var(--sbk-verde-escuro) 5%, var(--sbk-branco));
+  --sbk-color-surface-inverse: var(--sbk-verde-escuro);
+  --sbk-color-overlay: color-mix(in srgb, var(--sbk-verde-profundo) 60%, transparent);
+
+  /* Texto */
+  --sbk-color-fg: var(--sbk-preto);
+  --sbk-color-fg-heading: var(--sbk-verde-escuro);
+  --sbk-color-fg-muted: var(--sbk-chumbo-leve);
+  --sbk-color-fg-inverse: var(--sbk-branco);
+
+  /* Linhas: derivadas da paleta. line-strong tem >= 3:1 sobre branco (WCAG 1.4.11) */
+  --sbk-color-line: color-mix(in srgb, var(--sbk-chumbo-leve) 22%, var(--sbk-branco));
+  --sbk-color-line-strong: color-mix(in srgb, var(--sbk-chumbo-leve) 65%, var(--sbk-branco));
+
+  /* Marca */
+  --sbk-color-primary: var(--sbk-verde-claro);
+  --sbk-color-primary-hover: var(--sbk-verde-escuro);
+  --sbk-color-on-primary: var(--sbk-branco);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-verde-claro) 10%, var(--sbk-branco));
+  --sbk-color-secondary: var(--sbk-ciano-escuro);
+  --sbk-color-secondary-hover: var(--sbk-ciano-profundo);
+  --sbk-color-on-secondary: var(--sbk-branco);
+  --sbk-color-accent: var(--sbk-ciano);
+  --sbk-color-highlight-bg: var(--sbk-ciano-escuro);
+  --sbk-color-highlight-fg: var(--sbk-branco);
+  --sbk-color-focus: var(--sbk-ciano);
+
+  /* Estados */
+  --sbk-color-success: var(--sbk-estado-sucesso);
+  --sbk-color-success-subtle: color-mix(in srgb, var(--sbk-estado-sucesso) 10%, var(--sbk-branco));
+  --sbk-color-warning: var(--sbk-estado-alerta);
+  --sbk-color-warning-subtle: color-mix(in srgb, var(--sbk-estado-alerta) 10%, var(--sbk-branco));
+  --sbk-color-error: var(--sbk-estado-erro);
+  --sbk-color-error-subtle: color-mix(in srgb, var(--sbk-estado-erro) 10%, var(--sbk-branco));
+  --sbk-color-info: var(--sbk-estado-info);
+  --sbk-color-info-subtle: color-mix(in srgb, var(--sbk-estado-info) 10%, var(--sbk-branco));
+  --sbk-color-on-state: var(--sbk-branco);
+  /* Cores de estado para TEXTO e ícones (no escuro ficam mais claras para manter contraste) */
+  --sbk-color-success-fg: var(--sbk-estado-sucesso);
+  --sbk-color-warning-fg: var(--sbk-estado-alerta);
+  --sbk-color-error-fg: var(--sbk-estado-erro);
+  --sbk-color-info-fg: var(--sbk-estado-info);
+
+  /* Tipografia: somente dois pesos (brand book) */
+  --sbk-font-family: 'Plus Jakarta Sans', Calibri, system-ui, sans-serif;
+  --sbk-font-weight-heading: 600; /* Seminegrito */
+  --sbk-font-weight-body: 300; /* Leve */
+
+  /* Raio: brand book define 8 a 16 para cards e blocos.
+     xs (4px) existe apenas para controles de 16px, como checkbox. */
+  --sbk-radius-xs: 0.25rem;
+  --sbk-radius-sm: 0.5rem;
+  --sbk-radius-md: 0.75rem;
+  --sbk-radius-lg: 1rem;
+
+  /* Sombras leves, tingidas de verde escuro (sem sombras pesadas) */
+  --sbk-shadow-sm: 0 0.0625rem 0.125rem rgb(2 54 49 / 0.06), 0 0.5rem 1.5rem rgb(2 54 49 / 0.05);
+  --sbk-shadow-md: 0 0.25rem 0.5rem rgb(2 54 49 / 0.06), 0 0.75rem 2rem rgb(2 54 49 / 0.1);
+
+  /* Opacidade de cards sobrepostos (brand book: 60% a 90%) */
+  --sbk-card-layer-opacity-1: 0.9;
+  --sbk-card-layer-opacity-2: 0.75;
+  --sbk-card-layer-opacity-3: 0.6;
+
+  /* Movimento */
+  --sbk-duration-fast: 150ms;
+  --sbk-duration-normal: 250ms;
+  --sbk-duration-slow: 400ms;
+  --sbk-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Liquid Glass (opt-in): translucidez tingida de verde, desfoque com saturação,
+     borda especular e brilho interno. Fallback opaco em prefers-reduced-transparency
+     e em navegadores sem backdrop-filter (ver styles/glass.css). */
+  --sbk-glass-bg: color-mix(in srgb, var(--sbk-branco) 55%, transparent);
+  --sbk-glass-bg-strong: color-mix(in srgb, var(--sbk-branco) 72%, transparent);
+  --sbk-glass-tint: color-mix(in srgb, var(--sbk-verde-claro) 6%, transparent);
+  --sbk-glass-border: color-mix(in srgb, var(--sbk-branco) 70%, transparent);
+  --sbk-glass-highlight: color-mix(in srgb, var(--sbk-branco) 85%, transparent);
+  --sbk-glass-blur: 20px;
+  --sbk-glass-saturate: 180%;
+  --sbk-glass-shadow: 0 0.5rem 2rem rgb(2 54 49 / 0.12);
+  --sbk-glass-fallback: var(--sbk-color-surface);
+
+  /* Camadas */
+  --sbk-z-dropdown: 1000;
+  --sbk-z-sticky: 1010;
+  --sbk-z-modal: 1050;
+  --sbk-z-toast: 1100;
+  --sbk-z-tooltip: 1200;
+}
+
+/* ---------- Tema institucional SBK (marca-mãe) ---------- */
+[data-brand='sbk'] {
+  --sbk-color-primary: var(--sbk-verde-escuro);
+  --sbk-color-primary-hover: var(--sbk-verde-profundo);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-verde-escuro) 10%, var(--sbk-branco));
+  --sbk-color-accent: var(--sbk-ciano-escuro);
+}
+
+/* ---------- Modo escuro (proposta: o brand book não define tema dark completo) ---------- */
+[data-theme='dark'],
+.theme-dark {
+  --sbk-color-bg: var(--sbk-verde-profundo);
+  --sbk-color-surface: color-mix(in srgb, var(--sbk-verde-escuro) 70%, var(--sbk-verde-profundo));
+  --sbk-color-surface-sunken: var(--sbk-verde-profundo);
+  --sbk-color-surface-hover: color-mix(in srgb, var(--sbk-off-white) 6%, var(--sbk-verde-escuro));
+  /* Blocos de marca (Header, SideNav escuro, Card inverse) continuam escuros no tema escuro */
+  --sbk-color-surface-inverse: var(--sbk-ciano-profundo);
+  --sbk-color-overlay: color-mix(in srgb, var(--sbk-preto) 65%, transparent);
+
+  --sbk-color-fg: var(--sbk-off-white);
+  --sbk-color-fg-heading: var(--sbk-branco);
+  --sbk-color-fg-muted: color-mix(in srgb, var(--sbk-off-white) 72%, var(--sbk-verde-escuro));
+  --sbk-color-fg-inverse: var(--sbk-branco);
+
+  --sbk-color-line: color-mix(in srgb, var(--sbk-off-white) 16%, var(--sbk-verde-escuro));
+  --sbk-color-line-strong: color-mix(in srgb, var(--sbk-off-white) 45%, var(--sbk-verde-escuro));
+
+  --sbk-color-primary: var(--sbk-ciano);
+  --sbk-color-primary-hover: var(--sbk-verde-claro);
+  --sbk-color-on-primary: var(--sbk-branco);
+  --sbk-color-primary-subtle: color-mix(in srgb, var(--sbk-ciano) 22%, var(--sbk-verde-profundo));
+  --sbk-color-secondary: var(--sbk-verde-claro);
+  --sbk-color-secondary-hover: var(--sbk-ciano-escuro);
+  --sbk-color-focus: var(--sbk-off-white);
+
+  --sbk-color-success-fg: color-mix(in srgb, var(--sbk-estado-sucesso) 45%, var(--sbk-branco));
+  --sbk-color-warning-fg: color-mix(in srgb, var(--sbk-estado-alerta) 50%, var(--sbk-branco));
+  --sbk-color-error-fg: color-mix(in srgb, var(--sbk-estado-erro) 45%, var(--sbk-branco));
+  --sbk-color-info-fg: color-mix(in srgb, var(--sbk-ciano) 45%, var(--sbk-branco));
+
+  --sbk-color-success-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-sucesso) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-warning-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-alerta) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-error-subtle: color-mix(
+    in srgb,
+    var(--sbk-estado-erro) 28%,
+    var(--sbk-verde-profundo)
+  );
+  --sbk-color-info-subtle: color-mix(in srgb, var(--sbk-ciano) 28%, var(--sbk-verde-profundo));
+
+  --sbk-shadow-sm: 0 0.0625rem 0.125rem rgb(0 0 0 / 0.3), 0 0.5rem 1.5rem rgb(0 0 0 / 0.25);
+  --sbk-shadow-md: 0 0.25rem 0.5rem rgb(0 0 0 / 0.3), 0 0.75rem 2rem rgb(0 0 0 / 0.4);
+
+  --sbk-glass-bg: color-mix(in srgb, var(--sbk-verde-escuro) 45%, transparent);
+  --sbk-glass-bg-strong: color-mix(in srgb, var(--sbk-verde-escuro) 65%, transparent);
+  --sbk-glass-tint: color-mix(in srgb, var(--sbk-ciano) 10%, transparent);
+  --sbk-glass-border: color-mix(in srgb, var(--sbk-branco) 18%, transparent);
+  --sbk-glass-highlight: color-mix(in srgb, var(--sbk-branco) 28%, transparent);
+  --sbk-glass-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.35);
+}
+
+/* ============================================================
+   4. ALIASES LEGADOS (1.x): deprecados, serão removidos na 3.0.
+   Mantidos para CSS de consumidores que lê essas variáveis.
+   Os componentes da 2.x NÃO leem estes nomes: sobrescrever
+   --md-primary não altera mais o Button. Use --sbk-color-primary.
+   ============================================================ */
+:root {
+  --brand-verde-vibrante: var(--sbk-verde-claro);
+  --brand-verde-profundo: var(--sbk-verde-escuro);
+  --brand-verde-medio: var(--sbk-ciano);
+  --brand-grafite-azulado: var(--sbk-ciano-profundo);
+  --brand-azul-acinzentado: var(--sbk-chumbo-leve);
+  --brand-cinza-medio: var(--sbk-chumbo-leve);
+  --brand-cinza-escuro: var(--sbk-verde-profundo);
+  --brand-off-white: var(--sbk-off-white);
+  --brand-off-white-gelo: var(--sbk-off-white);
+  --brand-branco: var(--sbk-branco);
+  --brand-preto: var(--sbk-preto);
+
+  --font-primary: var(--sbk-font-family);
+  --font-heading: var(--sbk-font-family);
+  --font-body: var(--sbk-font-family);
+  --font-weight-light: 300;
+  --font-weight-semibold: 600;
+
+  --border-radius-sm: var(--sbk-radius-sm);
+  --border-radius-md: var(--sbk-radius-sm);
+  --border-radius-lg: var(--sbk-radius-md);
+  --border-radius-2xl: var(--sbk-radius-lg);
+
+  --z-index-dropdown: var(--sbk-z-dropdown);
+  --z-index-modal-backdrop: var(--sbk-z-modal);
+  --z-index-modal: var(--sbk-z-modal);
+
+  --border-width-thin: 0.0625rem;
+
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 0.75rem;
+  --spacing-lg: 1rem;
+  --spacing-xl: 1.5rem;
+  --spacing-2xl: 2rem;
+  --spacing-3xl: 2.5rem;
+
+  --font-size-xs: 0.75rem;
+  --font-size-sm: 0.875rem;
+  --font-size-base: 1rem;
+  --font-size-md: 1.125rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.75rem;
+  --font-size-3xl: 2rem;
+  --font-size-4xl: 2.5rem;
+  /* --font-weight-normal/medium/bold não são redefinidos: colidiriam com as variáveis
+     do Tailwind 4 (font-normal, font-medium, font-bold) nos apps consumidores. */
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.6;
+  --line-height-loose: 1.8;
+
+  --transition-base: var(--sbk-duration-normal) ease;
+  --transition-all: all var(--transition-base);
+  --transition-colors:
+    color var(--transition-base), background-color var(--transition-base),
+    border-color var(--transition-base);
+
+  --motion-duration-fast: var(--sbk-duration-fast);
+  --motion-duration-normal: var(--sbk-duration-normal);
+  --motion-duration-slow: var(--sbk-duration-slow);
+  --motion-easing-standard: var(--sbk-easing-standard);
+}
+
+:root,
+[data-brand='sbk'],
+[data-theme='dark'],
+.theme-dark {
+  --primary-color: var(--sbk-color-primary);
+  --primary-color-hover: var(--sbk-color-primary-hover);
+  --secondary-color: var(--sbk-color-accent);
+  --accent-color: var(--sbk-color-accent);
+  --md-primary: var(--sbk-color-primary);
+  --md-on-primary: var(--sbk-color-on-primary);
+  --md-primary-container: var(--sbk-color-primary-subtle);
+  --md-secondary: var(--sbk-color-secondary);
+  --md-on-secondary: var(--sbk-branco);
+  --md-surface: var(--sbk-color-surface);
+  --md-on-surface: var(--sbk-color-fg);
+  --md-on-surface-variant: var(--sbk-color-fg-muted);
+  --md-surface-container: var(--sbk-color-surface-sunken);
+  --md-surface-container-high: var(--sbk-color-surface-sunken);
+  --md-outline: var(--sbk-color-line-strong);
+  --md-outline-variant: var(--sbk-color-line);
+  --md-error: var(--sbk-color-error);
+  --md-on-error: var(--sbk-color-on-state);
+  --color-primary: var(--sbk-color-primary);
+  --color-on-primary: var(--sbk-color-on-primary);
+  --color-surface: var(--sbk-color-surface);
+  --color-on-surface: var(--sbk-color-fg);
+  --success-color: var(--sbk-color-success);
+  --warning-color: var(--sbk-color-warning);
+  --error-color: var(--sbk-color-error);
+  --info-color: var(--sbk-color-info);
+  --bg-page: var(--sbk-color-bg);
+  --bg-primary: var(--sbk-color-bg);
+  --bg-secondary: var(--sbk-color-surface);
+  --bg-tertiary: var(--sbk-color-surface-sunken);
+  --bg-card: var(--sbk-color-surface);
+  --bg-card-border: var(--sbk-color-line);
+  --bg-hover: var(--sbk-color-surface-hover);
+  --text-primary: var(--sbk-color-fg);
+  --text-secondary: var(--sbk-color-fg-muted);
+  --text-muted: var(--sbk-color-fg-muted);
+  --text-on-primary: var(--sbk-color-on-primary);
+  --border-color: var(--sbk-color-line);
+  --border-color-hover: var(--sbk-color-line-strong);
+  --border-color-focus: var(--sbk-color-focus);
+  --shadow-sm: var(--sbk-shadow-sm);
+  --shadow-md: var(--sbk-shadow-md);
+  --shadow-lg: var(--sbk-shadow-md);
+  --shadow-xs: var(--sbk-shadow-sm);
+  --md-on-primary-container: var(--sbk-color-fg-heading);
+}

package/dist/utils/cn.d.ts

@@ -1,7 +1,7 @@
 import { type ClassValue } from 'clsx';
 /**
  * Utilitário de composição de classes Tailwind.
- * Usa clsx para lógica condicional e tailwind-merge para resolver
- * conflitos de classes (ex.: bg-red-500 + bg-blue-500 → bg-blue-500).
+ * Usa clsx para lógica condicional e tailwind-merge (ciente dos tokens sbk)
+ * para resolver conflitos, permitindo que o className do consumidor sobrescreva o padrão.
  */
 export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/utils/cn.js

@@ -1,7 +1,22 @@
-import { clsx as r } from "clsx";
-import { twMerge as t } from "tailwind-merge";
-const e = (...o) => t(r(o));
+import { clsx as o } from "clsx";
+import { extendTailwindMerge as b } from "tailwind-merge";
+const e = b({
+  extend: {
+    classGroups: {
+      "sbk-glass": ["sbk-glass"]
+    },
+    // sbk-glass define o próprio fundo: remove bg-* anteriores (ex.: bg-transparent do buttonReset)
+    conflictingClassGroups: {
+      "sbk-glass": ["bg-color"]
+    },
+    theme: {
+      radius: ["sbk-xs", "sbk-sm", "sbk-md", "sbk-lg"],
+      shadow: ["sbk-sm", "sbk-md", "sbk-glass"],
+      font: ["sbk"]
+    }
+  }
+}), r = (...s) => e(o(s));
 export {
-  e as cn
+  r as cn
 };
 //# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -1 +1 @@
-{"version":3,"file":"cn.js","sources":["../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Utilitário de composição de classes Tailwind.\n * Usa clsx para lógica condicional e tailwind-merge para resolver\n * conflitos de classes (ex.: bg-red-500 + bg-blue-500 → bg-blue-500).\n */\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\n"],"names":["cn","inputs","twMerge","clsx"],"mappings":";;AAQO,MAAMA,IAAK,IAAIC,MAAyBC,EAAQC,EAAKF,CAAM,CAAC;"}
+{"version":3,"file":"cn.js","sources":["../../src/utils/cn.ts"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge<'sbk-glass'>({\n  extend: {\n    classGroups: {\n      'sbk-glass': ['sbk-glass'],\n    },\n    // sbk-glass define o próprio fundo: remove bg-* anteriores (ex.: bg-transparent do buttonReset)\n    conflictingClassGroups: {\n      'sbk-glass': ['bg-color'],\n    },\n    theme: {\n      radius: ['sbk-xs', 'sbk-sm', 'sbk-md', 'sbk-lg'],\n      shadow: ['sbk-sm', 'sbk-md', 'sbk-glass'],\n      font: ['sbk'],\n    },\n  },\n});\n\n/**\n * Utilitário de composição de classes Tailwind.\n * Usa clsx para lógica condicional e tailwind-merge (ciente dos tokens sbk)\n * para resolver conflitos, permitindo que o className do consumidor sobrescreva o padrão.\n */\nexport const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));\n"],"names":["twMerge","extendTailwindMerge","cn","inputs","clsx"],"mappings":";;AAGA,MAAMA,IAAUC,EAAiC;AAAA,EAC/C,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa,CAAC,WAAW;AAAA,IAAA;AAAA;AAAA,IAG3B,wBAAwB;AAAA,MACtB,aAAa,CAAC,UAAU;AAAA,IAAA;AAAA,IAE1B,OAAO;AAAA,MACL,QAAQ,CAAC,UAAU,UAAU,UAAU,QAAQ;AAAA,MAC/C,QAAQ,CAAC,UAAU,UAAU,WAAW;AAAA,MACxC,MAAM,CAAC,KAAK;AAAA,IAAA;AAAA,EACd;AAEJ,CAAC,GAOYC,IAAK,IAAIC,MAAyBH,EAAQI,EAAKD,CAAM,CAAC;"}

package/dist/utils/styles.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Fragmentos de classe compartilhados entre componentes.
+ * Centralizar aqui garante foco, hover e estados idênticos em toda a lib.
+ */
+/**
+ * Zera o estilo nativo de <button> (fundo, borda, fonte, margem) para que os componentes
+ * funcionem mesmo em apps sem reset CSS. Aplique antes das demais classes no cn().
+ */
+export declare const buttonReset = "m-0 appearance-none border-0 border-solid bg-transparent p-0 font-sbk text-inherit no-underline";
+/** Anel de foco visível apenas na navegação por teclado. */
+export declare const focusRing = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid";
+/** Transição padrão de cores, respeitando prefers-reduced-motion. */
+export declare const transitionColors = "transition-colors duration-150 ease-out motion-reduce:transition-none";
+/** Rótulo de campo de formulário. */
+export declare const fieldLabel = "text-sm font-semibold text-sbk-fg";
+/** Controle de formulário (input, select, textarea). */
+export declare const fieldControl: string;
+/** Texto de apoio abaixo do campo. */
+export declare const fieldHelper = "text-xs font-light text-sbk-fg-muted";
+/** Mensagem de erro abaixo do campo. */
+export declare const fieldError = "text-xs font-semibold text-sbk-error-fg";
+/** Tamanhos de controle de formulário. */
+export declare const fieldSize: {
+    readonly sm: "min-h-8 px-3 py-1.5 text-sm";
+    readonly md: "min-h-10 px-3.5 py-2 text-base";
+    readonly lg: "min-h-12 px-4 py-3 text-lg";
+};
+export type FieldSize = keyof typeof fieldSize;
+/** Monta o aria-describedby a partir dos ids de erro e de apoio. */
+export declare const describedBy: (id: string, error?: string, helperText?: string) => string | undefined;
+/**
+ * Redefine os tokens de texto e linha para uma superfície invertida (verde escuro no tema claro).
+ * Filhos que usam text-sbk-fg, text-sbk-fg-heading ou text-sbk-fg-muted ficam legíveis sem props extras.
+ */
+export declare const inverseScope: string;
+/** Checkbox e radio nativos coloridos com a marca (accent-color). */
+export declare const choiceControl = "mt-0.5 size-4 shrink-0 cursor-pointer accent-sbk-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid disabled:cursor-not-allowed";

package/dist/utils/styles.js

@@ -0,0 +1,35 @@
+const i = "m-0 appearance-none border-0 border-solid bg-transparent p-0 font-sbk text-inherit no-underline", t = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid", r = "transition-colors duration-150 ease-out motion-reduce:transition-none", n = "text-sm font-semibold text-sbk-fg", l = [
+  "m-0 w-full rounded-sbk-sm border border-solid border-sbk-line-strong bg-sbk-surface font-sbk font-light text-sbk-fg",
+  "placeholder:text-sbk-fg-muted",
+  "hover:border-sbk-fg-muted",
+  "focus:border-sbk-primary focus:outline-2 focus:outline-offset-0 focus:outline-sbk-focus focus:outline-solid",
+  "disabled:cursor-not-allowed disabled:bg-sbk-surface-sunken disabled:opacity-60",
+  "aria-invalid:border-sbk-error aria-invalid:focus:outline-sbk-error",
+  r
+].join(" "), b = "text-xs font-light text-sbk-fg-muted", c = "text-xs font-semibold text-sbk-error-fg", f = {
+  sm: "min-h-8 px-3 py-1.5 text-sm",
+  md: "min-h-10 px-3.5 py-2 text-base",
+  lg: "min-h-12 px-4 py-3 text-lg"
+}, u = (o, e, s) => e ? `${o}-error` : s ? `${o}-helper` : void 0, a = [
+  "bg-sbk-surface-inverse text-sbk-fg-inverse",
+  "[--sbk-color-fg:var(--sbk-color-fg-inverse)]",
+  "[--sbk-color-fg-heading:var(--sbk-color-fg-inverse)]",
+  "[--sbk-color-fg-muted:color-mix(in_srgb,var(--sbk-color-fg-inverse)_72%,transparent)]",
+  "[--sbk-color-line:color-mix(in_srgb,var(--sbk-color-fg-inverse)_18%,transparent)]",
+  "[--sbk-color-surface-hover:color-mix(in_srgb,var(--sbk-color-fg-inverse)_10%,transparent)]",
+  "[--sbk-color-focus:var(--sbk-color-fg-inverse)]"
+].join(" "), d = "mt-0.5 size-4 shrink-0 cursor-pointer accent-sbk-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid disabled:cursor-not-allowed";
+export {
+  i as buttonReset,
+  d as choiceControl,
+  u as describedBy,
+  l as fieldControl,
+  c as fieldError,
+  b as fieldHelper,
+  n as fieldLabel,
+  f as fieldSize,
+  t as focusRing,
+  a as inverseScope,
+  r as transitionColors
+};
+//# sourceMappingURL=styles.js.map

package/dist/utils/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../src/utils/styles.ts"],"sourcesContent":["/**\n * Fragmentos de classe compartilhados entre componentes.\n * Centralizar aqui garante foco, hover e estados idênticos em toda a lib.\n */\n\n/**\n * Zera o estilo nativo de <button> (fundo, borda, fonte, margem) para que os componentes\n * funcionem mesmo em apps sem reset CSS. Aplique antes das demais classes no cn().\n */\nexport const buttonReset =\n  'm-0 appearance-none border-0 border-solid bg-transparent p-0 font-sbk text-inherit no-underline';\n\n/** Anel de foco visível apenas na navegação por teclado. */\nexport const focusRing =\n  'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid';\n\n/** Transição padrão de cores, respeitando prefers-reduced-motion. */\nexport const transitionColors =\n  'transition-colors duration-150 ease-out motion-reduce:transition-none';\n\n/** Rótulo de campo de formulário. */\nexport const fieldLabel = 'text-sm font-semibold text-sbk-fg';\n\n/** Controle de formulário (input, select, textarea). */\nexport const fieldControl = [\n  'm-0 w-full rounded-sbk-sm border border-solid border-sbk-line-strong bg-sbk-surface font-sbk font-light text-sbk-fg',\n  'placeholder:text-sbk-fg-muted',\n  'hover:border-sbk-fg-muted',\n  'focus:border-sbk-primary focus:outline-2 focus:outline-offset-0 focus:outline-sbk-focus focus:outline-solid',\n  'disabled:cursor-not-allowed disabled:bg-sbk-surface-sunken disabled:opacity-60',\n  'aria-invalid:border-sbk-error aria-invalid:focus:outline-sbk-error',\n  transitionColors,\n].join(' ');\n\n/** Texto de apoio abaixo do campo. */\nexport const fieldHelper = 'text-xs font-light text-sbk-fg-muted';\n\n/** Mensagem de erro abaixo do campo. */\nexport const fieldError = 'text-xs font-semibold text-sbk-error-fg';\n\n/** Tamanhos de controle de formulário. */\nexport const fieldSize = {\n  sm: 'min-h-8 px-3 py-1.5 text-sm',\n  md: 'min-h-10 px-3.5 py-2 text-base',\n  lg: 'min-h-12 px-4 py-3 text-lg',\n} as const;\n\nexport type FieldSize = keyof typeof fieldSize;\n\n/** Monta o aria-describedby a partir dos ids de erro e de apoio. */\nexport const describedBy = (id: string, error?: string, helperText?: string) =>\n  error ? `${id}-error` : helperText ? `${id}-helper` : undefined;\n\n/**\n * Redefine os tokens de texto e linha para uma superfície invertida (verde escuro no tema claro).\n * Filhos que usam text-sbk-fg, text-sbk-fg-heading ou text-sbk-fg-muted ficam legíveis sem props extras.\n */\nexport const inverseScope = [\n  'bg-sbk-surface-inverse text-sbk-fg-inverse',\n  '[--sbk-color-fg:var(--sbk-color-fg-inverse)]',\n  '[--sbk-color-fg-heading:var(--sbk-color-fg-inverse)]',\n  '[--sbk-color-fg-muted:color-mix(in_srgb,var(--sbk-color-fg-inverse)_72%,transparent)]',\n  '[--sbk-color-line:color-mix(in_srgb,var(--sbk-color-fg-inverse)_18%,transparent)]',\n  '[--sbk-color-surface-hover:color-mix(in_srgb,var(--sbk-color-fg-inverse)_10%,transparent)]',\n  '[--sbk-color-focus:var(--sbk-color-fg-inverse)]',\n].join(' ');\n\n/** Checkbox e radio nativos coloridos com a marca (accent-color). */\nexport const choiceControl =\n  'mt-0.5 size-4 shrink-0 cursor-pointer accent-sbk-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sbk-focus focus-visible:outline-solid disabled:cursor-not-allowed';\n"],"names":["buttonReset","focusRing","transitionColors","fieldLabel","fieldControl","fieldHelper","fieldError","fieldSize","describedBy","id","error","helperText","inverseScope","choiceControl"],"mappings":"AASO,MAAMA,IACX,mGAGWC,IACX,sHAGWC,IACX,yEAGWC,IAAa,qCAGbC,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACAF;AACF,EAAE,KAAK,GAAG,GAGGG,IAAc,wCAGdC,IAAa,2CAGbC,IAAY;AAAA,EACvB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAKaC,IAAc,CAACC,GAAYC,GAAgBC,MACtDD,IAAQ,GAAGD,CAAE,WAAWE,IAAa,GAAGF,CAAE,YAAY,QAM3CG,IAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG,GAGGC,IACX;"}