@sbkbs/ui 1.0.3 → 1.0.5

package/dist/theme/ThemeProvider.d.ts

@@ -9,5 +9,5 @@ interface ThemeProviderProps {
     children: ReactNode;
     defaultTheme?: Theme;
 }
-export declare const ThemeProvider: ({ children, defaultTheme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, defaultTheme }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/theme/ThemeProvider.js

@@ -0,0 +1,22 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as d, useEffect as u, useContext as c, createContext as h } from "react";
+const n = h(void 0), f = () => {
+  const e = c(n);
+  if (!e)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return e;
+}, l = ({ children: e, defaultTheme: o = "light" }) => {
+  const [t, i] = d(() => typeof window > "u" ? o : window.localStorage.getItem("theme") || o);
+  u(() => {
+    typeof window > "u" || (window.localStorage.setItem("theme", t), document.documentElement.setAttribute("data-theme", t));
+  }, [t]);
+  const m = () => {
+    i((r) => r === "dark" ? "light" : "dark");
+  };
+  return /* @__PURE__ */ s(n.Provider, { value: { theme: t, toggleTheme: m }, children: e });
+};
+export {
+  l as ThemeProvider,
+  f as useTheme
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/theme/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/theme/ThemeProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext, useEffect, useState } from 'react';\n\nexport type Theme = 'light' | 'dark';\n\ninterface ThemeContextType {\n  theme: Theme;\n  toggleTheme: () => void;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport const useTheme = (): ThemeContextType => {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n};\n\ninterface ThemeProviderProps {\n  children: ReactNode;\n  defaultTheme?: Theme;\n}\n\nexport const ThemeProvider = ({ children, defaultTheme = 'light' }: ThemeProviderProps) => {\n  const [theme, setTheme] = useState<Theme>(() => {\n    if (typeof window === 'undefined') {\n      return defaultTheme;\n    }\n    const saved = window.localStorage.getItem('theme');\n    return (saved as Theme) || defaultTheme;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return;\n    }\n    window.localStorage.setItem('theme', theme);\n    document.documentElement.setAttribute('data-theme', theme);\n  }, [theme]);\n\n  const toggleTheme = (): void => {\n    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'));\n  };\n\n  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;\n};\n"],"names":["ThemeContext","createContext","useTheme","context","useContext","ThemeProvider","children","defaultTheme","theme","setTheme","useState","useEffect","toggleTheme","prev","jsx"],"mappings":";;AASA,MAAMA,IAAeC,EAA4C,MAAS,GAE7DC,IAAW,MAAwB;AAC9C,QAAMC,IAAUC,EAAWJ,CAAY;AACvC,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,8CAA8C;AAEhE,SAAOA;AACT,GAOaE,IAAgB,CAAC,EAAE,UAAAC,GAAU,cAAAC,IAAe,cAAkC;AACzF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAgB,MACpC,OAAO,SAAW,MACbH,IAEK,OAAO,aAAa,QAAQ,OAAO,KACtBA,CAC5B;AAED,EAAAI,EAAU,MAAM;AACd,IAAI,OAAO,SAAW,QAGtB,OAAO,aAAa,QAAQ,SAASH,CAAK,GAC1C,SAAS,gBAAgB,aAAa,cAAcA,CAAK;AAAA,EAC3D,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMI,IAAc,MAAY;AAC9B,IAAAH,EAAS,CAACI,MAAUA,MAAS,SAAS,UAAU,MAAO;AAAA,EACzD;AAEA,SAAO,gBAAAC,EAACd,EAAa,UAAb,EAAsB,OAAO,EAAE,OAAAQ,GAAO,aAAAI,KAAgB,UAAAN,GAAS;AACzE;"}

package/dist/theme.css

@@ -3,8 +3,8 @@
    Guia de marca: cores e tipografia SBK
    ============================================================ */
 
-@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');
 
 /* ============================================================
    GUIA DE MARCA - CORES (paleta fixa para referência e paletas)
@@ -17,8 +17,9 @@
   --brand-azul-acinzentado: #5f7b8d;
   --brand-cinza-medio: #4b4b4b;
   --brand-cinza-escuro: #24262d;
-  --brand-off-white: #ffffff;
-  --brand-neutral-75: rgba(255, 255, 255, 0.75);
+  --brand-off-white: #eef0f4; /* Off-White Gelo — cor de fundo oficial SBK */
+  --brand-off-white-gelo: #eef0f4; /* alias explícito */
+  --brand-neutral-75: rgba(238, 240, 244, 0.75);
   --brand-branco: #ffffff;
 
   /* DNA da marca - O Criador */
@@ -37,12 +38,11 @@
    Jakarta = headlines fortes; alta legibilidade; estrutura
    ============================================================ */
 :root {
-  --font-primary:
-    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  --font-secondary: "Plus Jakarta Sans", var(--font-primary);
+  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-secondary: 'Plus Jakarta Sans', var(--font-primary);
   --font-heading: var(--font-primary);
   --font-body: var(--font-primary);
+  --font-logo: 'Sora', var(--font-primary); /* logo e títulos de marca */
 }
 
 html {
@@ -53,19 +53,11 @@ html {
 :root {
   --primary-color: var(--brand-verde-vibrante);
   --primary-color-dark: var(--brand-verde-profundo);
-  --primary-color-light: color-mix(
-    in srgb,
-    var(--brand-verde-vibrante) 84%,
-    white
-  );
+  --primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 84%, white);
   --primary-color-hover: var(--brand-verde-profundo);
   --md-primary: var(--brand-verde-vibrante);
   --md-on-primary: #ffffff;
-  --md-primary-container: color-mix(
-    in srgb,
-    var(--brand-verde-vibrante) 18%,
-    white
-  );
+  --md-primary-container: color-mix(in srgb, var(--brand-verde-vibrante) 18%, white);
   --md-on-primary-container: var(--brand-grafite-azulado);
   --secondary-color: var(--brand-grafite-azulado);
   /* Tokens semânticos para integração com Tailwind */
@@ -80,11 +72,7 @@ html {
   --md-secondary: var(--brand-grafite-azulado);
   --md-on-secondary: #ffffff;
   --md-outline: var(--brand-azul-acinzentado);
-  --md-outline-variant: color-mix(
-    in srgb,
-    var(--brand-azul-acinzentado) 35%,
-    white
-  );
+  --md-outline-variant: color-mix(in srgb, var(--brand-azul-acinzentado) 35%, white);
   --success-color: #22c55e;
   --success-color-light: #4ade80;
   --error-color: #ef4444;
@@ -103,39 +91,29 @@ html {
   --md-on-surface: var(--brand-grafite-azulado);
   --accent-color: var(--primary-color);
   --accent-color-hover: var(--primary-color-hover);
-  --bg-primary: var(--brand-neutral-75);
+  --gradient-espectro-turquesa: linear-gradient(
+    135deg,
+    #01b2aa 0%,
+    #1f3a3a 100%
+  ); /* Espectro Turquesa — expressão visual primária SBK */
+  --bg-page: var(--brand-off-white-gelo); /* fundo de página — Off-White Gelo */
+  --bg-primary: var(--brand-off-white-gelo);
   --bg-secondary: #ffffff;
   --bg-tertiary: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);
   --md-surface: #ffffff;
   --md-surface-container: var(--brand-neutral-75);
-  --md-surface-container-high: color-mix(
-    in srgb,
-    var(--brand-azul-acinzentado) 14%,
-    white
-  );
-  --border-color-hover: color-mix(
-    in srgb,
-    var(--brand-grafite-azulado) 32%,
-    white
-  );
+  --md-surface-container-high: color-mix(in srgb, var(--brand-azul-acinzentado) 14%, white);
+  --border-color-hover: color-mix(in srgb, var(--brand-grafite-azulado) 32%, white);
   --bg-card: #ffffff;
   --bg-card-hover: color-mix(in srgb, var(--brand-azul-acinzentado) 8%, white);
-  --bg-card-border: color-mix(
-    in srgb,
-    var(--brand-azul-acinzentado) 28%,
-    white
-  );
+  --bg-card-border: color-mix(in srgb, var(--brand-azul-acinzentado) 28%, white);
   --text-primary: var(--brand-grafite-azulado);
   --text-secondary: var(--brand-cinza-escuro);
   --text-tertiary: var(--brand-cinza-medio);
   --text-muted: var(--brand-cinza-medio);
   --text-on-primary: #ffffff;
   --border-color: color-mix(in srgb, var(--brand-azul-acinzentado) 30%, white);
-  --border-color-focus: color-mix(
-    in srgb,
-    var(--brand-verde-vibrante) 52%,
-    transparent
-  );
+  --border-color-focus: color-mix(in srgb, var(--brand-verde-vibrante) 52%, transparent);
   --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
   --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.08);
   --shadow-md: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
@@ -166,6 +144,21 @@ html {
   --transition-colors:
     color var(--transition-base), background-color var(--transition-base),
     border-color var(--transition-base);
+
+  /* ============================================================
+     MOTION TOKENS — durações e easings padronizados
+     Uso: transition: opacity var(--motion-duration-fast) var(--motion-easing-standard)
+     ============================================================ */
+  --motion-duration-instant: 75ms; /* micro-feedback: ripple, checkbox tick */
+  --motion-duration-fast: 150ms; /* hover, focus, small state changes */
+  --motion-duration-normal: 250ms; /* entrada/saída de elementos pequenos */
+  --motion-duration-slow: 400ms; /* modais, drawers, page transitions */
+  --motion-duration-x-slow: 600ms; /* onboarding, animações elaboradas */
+
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* padrão — entrada e saída suave */
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* elementos entrando na tela */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /* elementos saindo da tela */
+  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce suave para feedback */
   --z-index-dropdown: 1000;
   --z-index-modal-backdrop: 1040;
   --z-index-modal: 1050;
@@ -182,8 +175,9 @@ html {
   --spacing-3xl: 2.5rem;
 }
 
-[data-theme="dark"],
+[data-theme='dark'],
 .theme-dark {
+  --bg-page: #0a0d12;
   --bg-primary: #0f141a;
   --bg-secondary: #161b22;
   --bg-tertiary: #1b222b;
@@ -199,11 +193,7 @@ html {
   --md-primary: var(--brand-verde-vibrante);
   --md-on-primary: #062126;
   --primary-color: var(--brand-verde-vibrante);
-  --primary-color-light: color-mix(
-    in srgb,
-    var(--brand-verde-vibrante) 85%,
-    white
-  );
+  --primary-color-light: color-mix(in srgb, var(--brand-verde-vibrante) 85%, white);
   --primary-color-hover: var(--brand-verde-profundo);
   --secondary-color: var(--brand-azul-acinzentado);
   --color-primary: var(--primary-color);
@@ -229,73 +219,73 @@ html {
    PALETAS DE BOTÃO (guia de marca)
    Use data-button-palette no pai (ex.: body) ou prop palette no Button.
    ============================================================ */
-[data-button-palette="verde-vibrante"],
+[data-button-palette='verde-vibrante'],
 .btn--palette-verde-vibrante.btn--primary {
   --md-primary: var(--brand-verde-vibrante);
   --primary-color-hover: var(--brand-verde-profundo);
 }
-[data-button-palette="verde-vibrante"] .btn--primary {
+[data-button-palette='verde-vibrante'] .btn--primary {
   --md-primary: var(--brand-verde-vibrante);
   --primary-color-hover: var(--brand-verde-profundo);
 }
 
-[data-button-palette="verde-profundo"],
+[data-button-palette='verde-profundo'],
 .btn--palette-verde-profundo.btn--primary {
   --md-primary: var(--brand-verde-profundo);
   --primary-color-hover: var(--brand-grafite-azulado);
 }
-[data-button-palette="verde-profundo"] .btn--primary {
+[data-button-palette='verde-profundo'] .btn--primary {
   --md-primary: var(--brand-verde-profundo);
   --primary-color-hover: var(--brand-grafite-azulado);
 }
 
-[data-button-palette="grafite-azulado"],
+[data-button-palette='grafite-azulado'],
 .btn--palette-grafite-azulado.btn--primary {
   --md-primary: var(--brand-grafite-azulado);
   --primary-color-hover: var(--brand-cinza-escuro);
 }
-[data-button-palette="grafite-azulado"] .btn--primary {
+[data-button-palette='grafite-azulado'] .btn--primary {
   --md-primary: var(--brand-grafite-azulado);
   --primary-color-hover: var(--brand-cinza-escuro);
 }
 
-[data-button-palette="azul-acinzentado"],
+[data-button-palette='azul-acinzentado'],
 .btn--palette-azul-acinzentado.btn--primary {
   --md-primary: var(--brand-azul-acinzentado);
   --primary-color-hover: var(--brand-grafite-azulado);
 }
-[data-button-palette="azul-acinzentado"] .btn--primary {
+[data-button-palette='azul-acinzentado'] .btn--primary {
   --md-primary: var(--brand-azul-acinzentado);
   --primary-color-hover: var(--brand-grafite-azulado);
 }
 
-[data-button-palette="cinza-medio"],
+[data-button-palette='cinza-medio'],
 .btn--palette-cinza-medio.btn--primary {
   --md-primary: var(--brand-cinza-medio);
   --primary-color-hover: var(--brand-cinza-escuro);
 }
-[data-button-palette="cinza-medio"] .btn--primary {
+[data-button-palette='cinza-medio'] .btn--primary {
   --md-primary: var(--brand-cinza-medio);
   --primary-color-hover: var(--brand-cinza-escuro);
 }
 
-[data-button-palette="cinza-escuro"],
+[data-button-palette='cinza-escuro'],
 .btn--palette-cinza-escuro.btn--primary {
   --md-primary: var(--brand-cinza-escuro);
   --primary-color-hover: var(--brand-preto);
 }
-[data-button-palette="cinza-escuro"] .btn--primary {
+[data-button-palette='cinza-escuro'] .btn--primary {
   --md-primary: var(--brand-cinza-escuro);
   --primary-color-hover: var(--brand-preto);
 }
 
-[data-button-palette="off-white"],
+[data-button-palette='off-white'],
 .btn--palette-off-white.btn--primary {
   --md-primary: var(--brand-off-white);
   --md-on-primary: var(--brand-grafite-azulado);
   --primary-color-hover: var(--brand-branco);
 }
-[data-button-palette="off-white"] .btn--primary {
+[data-button-palette='off-white'] .btn--primary {
   --md-primary: var(--brand-off-white);
   --md-on-primary: var(--brand-grafite-azulado);
   --primary-color-hover: var(--brand-branco);

package/dist/utils/cn.d.ts

@@ -1 +1,7 @@
-export declare const cn: (...classes: Array<string | false | null | undefined>) => string;
+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).
+ */
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/utils/cn.js

@@ -0,0 +1,7 @@
+import { clsx as r } from "clsx";
+import { twMerge as t } from "tailwind-merge";
+const e = (...o) => t(r(o));
+export {
+  e as cn
+};
+//# sourceMappingURL=cn.js.map

package/dist/utils/cn.js.map

@@ -0,0 +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;"}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@sbkbs/ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Biblioteca de componentes UI SBK BS",
   "type": "module",
   "main": "./dist/oficios-ui.umd.cjs",
-  "module": "./dist/oficios-ui.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/oficios-ui.js",
+      "import": "./dist/index.js",
       "require": "./dist/oficios-ui.umd.cjs",
-      "default": "./dist/oficios-ui.js"
+      "default": "./dist/index.js"
     },
     "./theme.css": "./dist/theme.css",
     "./styles.css": "./dist/oficios-ui.css"
@@ -26,43 +26,71 @@
     "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
     "build": "vite build && tsc -p tsconfig.build.json && node -e \"require('fs').copyFileSync('src/theme/theme.css', 'dist/theme.css')\"",
     "dev": "vite build --watch",
-    "prepublishOnly": "npm run clean && npm run build && npm run typecheck",
+    "prepublishOnly": "npm run clean && npm run build && npm run typecheck && npm run lint",
     "playground": "vite",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test:visual": "playwright test",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
+    "prepare": "cd .. && husky",
     "publish:public": "npm publish --access public",
-    "release:minor": "npm version minor && npm run publish:public",
-    "release:major": "npm version major && npm run publish:public",
-    "release:patch": "npm version patch && npm run publish:public",
+    "changeset": "changeset",
+    "changeset:version": "changeset version",
     "typecheck": "tsc --noEmit -p tsconfig.build.json"
   },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "src/**/*.css": [
+      "prettier --write"
+    ]
+  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.59.1",
     "@storybook/addon-a11y": "^8.6.14",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/react-vite": "^8.6.14",
-    "@playwright/test": "^1.55.0",
+    "@tailwindcss/vite": "^4.2.2",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
+    "@types/node": "^25.6.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
-    "jsdom": "^26.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
     "@vitejs/plugin-react": "^5.0.4",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
+    "@vitest/coverage-v8": "^2.1.9",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "husky": "^9.1.7",
+    "jsdom": "^26.1.0",
+    "lint-staged": "^16.4.0",
+    "prettier": "^3.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.4.17",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
-    "vitest": "^2.1.8",
     "vite": "^6.3.5",
-    "storybook": "^8.6.14"
+    "vitest": "^2.1.8"
   },
   "keywords": [
     "oficios",
@@ -75,5 +103,12 @@
   "license": "ISC",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "overrides": {
+    "vite": "$vite"
   }
 }