@yberagroup/kaizen-ui 0.0.2 → 0.0.4

package/README.md

@@ -1,21 +1,101 @@
 # @yberagroup/kaizen-ui
 
-Componentes React do Kaizen Design System (Radix/shadcn + Tailwind).  
-Depende de `@yberagroup/kaizen-tokens` para temas e variáveis CSS.
+Componentes React do Kaizen Design System com Tailwind CSS v3.
 
-## Ícones (Font Awesome Pro)
+## Requisitos no projeto consumidor
 
-O projeto usa **Font Awesome Pro** (conta paga). Para instalar dependências:
+- Tailwind CSS `^3.4`
+- PostCSS + Autoprefixer
+- `@yberagroup/kaizen-tokens` instalado (dependencia ja declarada na UI)
 
-1. **Obtenha seu token Pro** em [fontawesome.com/account → Pro Package Tokens](https://fontawesome.com/account#pro-package-tokens).
+## Instalacao
 
-2. **Defina a variável de ambiente** antes de rodar `npm install`:
-   - Windows (PowerShell): `$env:FONTAWESOME_PRO_TOKEN="seu-token"`
-   - Windows (CMD): `set FONTAWESOME_PRO_TOKEN=seu-token`
-   - Linux/macOS: `export FONTAWESOME_PRO_TOKEN=seu-token`
+```bash
+npm i @yberagroup/kaizen-ui @yberagroup/kaizen-tokens
+```
 
-3. Na raiz do monorepo: `npm install`
+## Setup via wizard
 
-O `.npmrc` na raiz já aponta o escopo `@fortawesome` para o registry Pro; o token é lido de `FONTAWESOME_PRO_TOKEN` para não precisar commitar o token no repositório.
+```bash
+npx @yberagroup/kaizen-ui init
+```
 
-Em CI (GitHub Actions, etc.), configure `FONTAWESOME_PRO_TOKEN` como secret e use no passo de install.
+O comando cria/atualiza:
+- `tailwind.config.cjs` com preset Kaizen
+- `postcss.config.cjs` com Tailwind + Autoprefixer
+- se existirem `tailwind.config.js`, `tailwind.config.mjs`, `postcss.config.js` ou `postcss.config.mjs` (ex.: template Vite), eles sao **removidos** para nao competir com os `.cjs`
+- import do tema no arquivo de entrada (`src/main.tsx`, `src/index.tsx`, `app/layout.tsx`, etc.) **ou**, no modo migracao, no seu CSS global
+
+Temas suportados no wizard:
+- `esc` — `@yberagroup/kaizen-ui/globals/esc.css`
+- `group` — `@yberagroup/kaizen-ui/globals/group.css`
+
+### CSS global ja existente (semi-automatico)
+
+Se o wizard encontrar alguma destas folhas (quando existirem no disco), ele pergunta como integrar:
+
+- `src/index.css`
+- `src/globals.css`, `src/global.css`
+- `src/styles/globals.css`, `src/styles/index.css`
+- `app/globals.css`
+- `styles/globals.css`
+
+**Opcao 1 — Manter locais:** o tema Kaizen e importado no **entry** (TS/JS). Se o seu CSS local ainda tiver `@tailwind base|components|utilities`, comente ou remova para nao duplicar as camadas do Tailwind ja incluidas no bundle Kaizen.
+
+**Opcao 2 — Migrar:** e feito um **backup** do arquivo principal (`.kaizen-backup`, ou `.kaizen-backup.<timestamp>` se ja existir). O arquivo e substituido por um `@import` do tema escolhido e um lembrete para reaplicar regras custom do backup **sem** repetir `@tailwind`. Imports diretos do tema no entry sao removidos para evitar duplicacao; se faltar, o wizard adiciona o `import` do CSS global no entry.
+
+Com **varios** candidatos e **nenhum** importado pelo entry, o wizard lista os arquivos e pede qual migrar.
+
+## Configuracao Tailwind (consumidor)
+
+O Tailwind so gera classes que aparecem nos arquivos listados em `content`. As classes dos componentes (`text-kz-*`, `font-kz-*`, `rounded-kz-*`, etc.) ficam no **JS compilado** em `node_modules/@yberagroup/kaizen-ui/dist`. Por isso e obrigatorio incluir esse caminho; o `init` ja faz isso com `require.resolve`.
+
+No `tailwind.config.cjs`:
+
+```js
+const path = require("path");
+
+const kaizenUiRoot = path.dirname(
+  require.resolve("@yberagroup/kaizen-ui/package.json"),
+);
+
+module.exports = {
+  presets: [require("@yberagroup/kaizen-ui/tailwind-preset")],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    path.join(kaizenUiRoot, "dist", "**", "*.{js,mjs}"),
+  ],
+  darkMode: "class",
+};
+```
+
+No `postcss.config.cjs`:
+
+```js
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+```
+
+No entry (ou no CSS global, apos migracao no wizard). Tema **esc**:
+
+```ts
+import "@yberagroup/kaizen-ui/globals/esc.css";
+```
+
+Tema **group**: `import "@yberagroup/kaizen-ui/globals/group.css"`. O export `globals.css` neste pacote segue o tema esc.
+
+## Exemplo
+
+```tsx
+import { Title } from "@yberagroup/kaizen-ui/components/title";
+
+export function App() {
+  return <Title size="h2">Kaizen UI</Title>;
+}
+```

package/bin/kaizen-ui.mjs

@@ -0,0 +1,311 @@
+#!/usr/bin/env node
+import {
+  readFileSync,
+  writeFileSync,
+  existsSync,
+  copyFileSync,
+  unlinkSync,
+} from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import process from "node:process";
+import { createInterface } from "node:readline/promises";
+import { stdin as input, stdout as output } from "node:process";
+
+const THEME_IMPORT = {
+  esc: "@yberagroup/kaizen-ui/globals/esc.css",
+  group: "@yberagroup/kaizen-ui/globals/group.css",
+};
+
+function logStep(message) {
+  output.write(`\n[kaizen-ui] ${message}\n`);
+}
+
+function detectEntryCandidates(cwd) {
+  return [
+    "src/main.tsx",
+    "src/main.jsx",
+    "src/index.tsx",
+    "src/index.jsx",
+    "app/layout.tsx",
+    "app/layout.jsx",
+  ]
+    .map((p) => resolve(cwd, p))
+    .filter((p) => existsSync(p));
+}
+
+/** Caminhos comuns de CSS global (existentes no disco). */
+function detectGlobalCssCandidates(cwd) {
+  const relPaths = [
+    "src/index.css",
+    "src/globals.css",
+    "src/global.css",
+    "src/styles/globals.css",
+    "src/styles/index.css",
+    "app/globals.css",
+    "styles/globals.css",
+  ];
+  return relPaths
+    .map((p) => resolve(cwd, p))
+    .filter((p) => existsSync(p));
+}
+
+function findCssImportsFromEntry(entryPath) {
+  const source = readFileSync(entryPath, "utf-8");
+  const re = /import\s+["']([^"']+\.css)["']\s*;?/g;
+  const out = [];
+  let m;
+  while ((m = re.exec(source))) {
+    out.push(resolve(dirname(entryPath), m[1]));
+  }
+  return out;
+}
+
+function hasTailwindDirectives(css) {
+  return /@tailwind\s+(base|components|utilities)\b/.test(css);
+}
+
+function pickMigrateTarget(cwd, entryPath, candidates) {
+  const fromEntry = findCssImportsFromEntry(entryPath);
+  for (const abs of fromEntry) {
+    if (candidates.includes(abs)) return abs;
+  }
+  return candidates[0];
+}
+
+function backupFile(absPath) {
+  let bak = `${absPath}.kaizen-backup`;
+  if (existsSync(bak)) {
+    bak = `${absPath}.kaizen-backup.${Date.now()}`;
+  }
+  copyFileSync(absPath, bak);
+  return bak;
+}
+
+function relativeImport(fromFile, toFile) {
+  let rel = relative(dirname(fromFile), toFile);
+  if (!rel.startsWith(".")) rel = `./${rel}`;
+  return rel.split("\\").join("/");
+}
+
+function ensureLocalCssImportInEntry(entryPath, cssAbsPath) {
+  const line = `import "${relativeImport(entryPath, cssAbsPath)}";`;
+  const source = readFileSync(entryPath, "utf-8");
+  if (source.includes(line)) return false;
+  const altSingle = line.replace(/"/g, "'");
+  if (source.includes(altSingle)) return false;
+  writeFileSync(entryPath, `${line}\n${source}`, "utf-8");
+  return true;
+}
+
+function removeKaizenThemeImportsFromEntry(entryPath) {
+  let source = readFileSync(entryPath, "utf-8");
+  const lines = source.split("\n");
+  const themePrefixes = [
+    '@yberagroup/kaizen-ui/globals/esc.css',
+    '@yberagroup/kaizen-ui/globals/group.css',
+    '@yberagroup/kaizen-ui/globals.css',
+  ];
+  const filtered = lines.filter((line) => {
+    const t = line.trim();
+    if (!t.startsWith("import ")) return true;
+    return !themePrefixes.some((p) => t.includes(p));
+  });
+  const next = filtered.join("\n");
+  if (next === source) return false;
+  writeFileSync(entryPath, next, "utf-8");
+  return true;
+}
+
+function ensureImportInEntry(entryPath, importPath) {
+  const source = readFileSync(entryPath, "utf-8");
+  const importLine = `import "${importPath}";`;
+  if (source.includes(importLine)) return false;
+
+  const nextSource = `${importLine}\n${source}`;
+  writeFileSync(entryPath, nextSource, "utf-8");
+  return true;
+}
+
+function writeTailwindConfig(cwd) {
+  const file = join(cwd, "tailwind.config.cjs");
+  const content = `/** @type {import('tailwindcss').Config} */
+const path = require("path");
+
+const kaizenUiRoot = path.dirname(
+  require.resolve("@yberagroup/kaizen-ui/package.json"),
+);
+
+module.exports = {
+  presets: [require("@yberagroup/kaizen-ui/tailwind-preset")],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./app/**/*.{js,ts,jsx,tsx}",
+    path.join(kaizenUiRoot, "dist", "**", "*.{js,mjs}"),
+  ],
+  darkMode: "class",
+};
+`;
+  writeFileSync(file, content, "utf-8");
+}
+
+function writePostcssConfig(cwd) {
+  const file = join(cwd, "postcss.config.cjs");
+  const content = `module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`;
+  writeFileSync(file, content, "utf-8");
+}
+
+/** Remove configs legadas (.js/.mjs) para o Tailwind/PostCSS nao carregarem o arquivo errado ao lado do .cjs. */
+function removeConflictingToolingConfigs(cwd) {
+  const names = [
+    "tailwind.config.js",
+    "tailwind.config.mjs",
+    "postcss.config.js",
+    "postcss.config.mjs",
+  ];
+  for (const name of names) {
+    const abs = join(cwd, name);
+    if (!existsSync(abs)) continue;
+    unlinkSync(abs);
+    logStep(
+      `Removido ${name} (evita conflito com ${name.replace(/\.(js|mjs)$/i, ".cjs")}).`,
+    );
+  }
+}
+
+async function runInit() {
+  const cwd = process.cwd();
+  const rl = createInterface({ input, output });
+
+  logStep("Inicializando setup do Kaizen UI...");
+
+  const themeAnswer = (
+    await rl.question("Escolha o tema (esc/group) [esc]: ")
+  ).trim();
+  const theme = themeAnswer === "group" ? "group" : "esc";
+
+  const candidates = detectEntryCandidates(cwd);
+  const suggested = candidates[0] ?? "src/main.tsx";
+  const entryAnswer = (
+    await rl.question(`Arquivo de entrada para importar CSS [${suggested}]: `)
+  ).trim();
+  const entryPath = resolve(cwd, entryAnswer || suggested);
+
+  if (!existsSync(entryPath)) {
+    rl.close();
+    throw new Error(`Arquivo de entrada não encontrado: ${entryPath}`);
+  }
+
+  const cssCandidates = detectGlobalCssCandidates(cwd);
+  let cssStrategy = "entry"; // "entry" | "migrate"
+
+  if (cssCandidates.length > 0) {
+    const list = cssCandidates
+      .map((p) => relative(cwd, p) || p)
+      .join(", ");
+    logStep(`Folhas de estilo globais encontradas: ${list}`);
+    const mode = (
+      await rl.question(
+        "Integração com CSS existente:\n  [1] Manter locais — adiciono só o import do tema Kaizen no entry (evite @tailwind duplicado no seu CSS).\n  [2] Migrar — backup do arquivo principal e substituo por import único do tema Kaizen (revise custom no .bak).\nEscolha [1]: ",
+      )
+    ).trim();
+    cssStrategy = mode === "2" ? "migrate" : "entry";
+  }
+
+  writeTailwindConfig(cwd);
+  logStep("tailwind.config.cjs criado/atualizado.");
+
+  writePostcssConfig(cwd);
+  logStep("postcss.config.cjs criado/atualizado.");
+
+  removeConflictingToolingConfigs(cwd);
+
+  const themeImport = THEME_IMPORT[theme];
+
+  if (cssStrategy === "migrate") {
+    let target = pickMigrateTarget(cwd, entryPath, cssCandidates);
+    const fromEntry = findCssImportsFromEntry(entryPath);
+    const linked = cssCandidates.filter((c) => fromEntry.includes(c));
+    if (linked.length === 0 && cssCandidates.length > 1) {
+      const lines = cssCandidates
+        .map((p, i) => `  [${i + 1}] ${relative(cwd, p) || p}`)
+        .join("\n");
+      const n = (
+        await rl.question(
+          `Qual arquivo migrar?\n${lines}\nNúmero [1]: `,
+        )
+      ).trim();
+      const idx = Math.max(0, Math.min(cssCandidates.length - 1, (parseInt(n, 10) || 1) - 1));
+      target = cssCandidates[idx];
+    }
+    const bak = backupFile(target);
+    logStep(`Backup: ${relative(cwd, bak) || bak}`);
+
+    const migratedBody = `/* kaizen-ui init: migração — tema ${theme}. Backup do conteúdo anterior: ${relative(cwd, bak) || bak} */
+@import "${themeImport}";
+
+/* Reaplique aqui regras do backup sem repetir @tailwind base/components/utilities. */
+`;
+    writeFileSync(target, migratedBody, "utf-8");
+    logStep(`Arquivo atualizado: ${relative(cwd, target) || target}`);
+
+    removeKaizenThemeImportsFromEntry(entryPath);
+    if (ensureLocalCssImportInEntry(entryPath, target)) {
+      logStep(`Import do CSS global adicionado em ${entryPath}.`);
+    }
+
+    const prev = readFileSync(bak, "utf-8");
+    if (hasTailwindDirectives(prev)) {
+      logStep(
+        "O backup continha @tailwind; o novo arquivo usa só o bundle Kaizen (sem duplicar camadas).",
+      );
+    }
+  } else {
+    const changed = ensureImportInEntry(entryPath, themeImport);
+    if (changed) {
+      logStep(`Import do tema ${theme} adicionado em ${entryPath}.`);
+    } else {
+      logStep(`Import já existente em ${entryPath}.`);
+    }
+
+    if (cssCandidates.length > 0) {
+      for (const p of cssCandidates) {
+        const css = readFileSync(p, "utf-8");
+        if (hasTailwindDirectives(css)) {
+          logStep(
+            `Aviso: ${relative(cwd, p) || p} contém @tailwind — comente ou remova para não duplicar o Tailwind junto com Kaizen.`,
+          );
+        }
+      }
+    }
+  }
+
+  rl.close();
+  logStep("Concluído.");
+  output.write(
+    "\nPróximos passos:\n- npm i @yberagroup/kaizen-ui @yberagroup/kaizen-tokens tailwindcss postcss autoprefixer\n- npm run dev\n",
+  );
+}
+
+async function main() {
+  const command = process.argv[2];
+  if (!command || command === "init") {
+    await runInit();
+    return;
+  }
+
+  output.write(`Comando não suportado: ${command}\n`);
+  output.write("Uso: npx @yberagroup/kaizen-ui init\n");
+  process.exitCode = 1;
+}
+
+main().catch((error) => {
+  output.write(`\n[kaizen-ui] Erro: ${error.message}\n`);
+  process.exitCode = 1;
+});

package/dist/components/title.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+export type TitleSize = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type TitleWeight = "medium" | "semibold";
+declare const titleVariants: (props?: ({
+    size?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | null | undefined;
+    weight?: "medium" | "semibold" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TitleProps = React.HTMLAttributes<HTMLHeadingElement> & VariantProps<typeof titleVariants> & {
+    size?: TitleSize;
+    weight?: TitleWeight;
+};
+declare function Title({ size, weight, className, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export { Title };
+//# sourceMappingURL=title.d.ts.map

package/dist/components/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../src/components/title.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,GAC/D,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EACb,IAAW,EACX,MAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CASZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/title.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+const titleVariants = cva("typeface-kz-syne tracking-kz-0 text-text-primary-dark leading-kz-0 p-0 m-0", {
+    variants: {
+        size: {
+            h1: "text-kz-40 leading-kz-48",
+            h2: "text-kz-32 leading-kz-40",
+            h3: "text-kz-24 leading-kz-32",
+            h4: "text-kz-18 leading-kz-24",
+            h5: "text-kz-16 leading-kz-22",
+            h6: "text-kz-14 leading-kz-20",
+        },
+        weight: {
+            medium: "font-kz-500",
+            semibold: "font-kz-600",
+        },
+    },
+    defaultVariants: {
+        size: "h2",
+        weight: "medium",
+    },
+});
+function Title({ size = "h2", weight = "medium", className, ...props }) {
+    const Tag = size;
+    return (_jsx(Tag, { className: clsx(titleVariants({ size, weight }), className), ...props }));
+}
+export { Title };
+//# sourceMappingURL=title.js.map

package/dist/components/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sourceRoot":"","sources":["../../src/components/title.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAK5B,MAAM,aAAa,GAAG,GAAG,CACvB,4EAA4E,EAC5E;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE,0BAA0B;YAC9B,EAAE,EAAE,0BAA0B;YAC9B,EAAE,EAAE,0BAA0B;YAC9B,EAAE,EAAE,0BAA0B;YAC9B,EAAE,EAAE,0BAA0B;YAC9B,EAAE,EAAE,0BAA0B;SAC/B;QACD,MAAM,EAAE;YACN,MAAM,EAAE,aAAa;YACrB,QAAQ,EAAE,aAAa;SACxB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,QAAQ;KACjB;CACF,CACF,CAAC;AAQF,SAAS,KAAK,CAAC,EACb,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,QAAQ,EACjB,SAAS,EACT,GAAG,KAAK,EACG;IACX,MAAM,GAAG,GAAG,IAAI,CAAC;IAEjB,OAAO,CACL,KAAC,GAAG,IACF,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,KACvD,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/lib/icons.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Re-export de ícones Font Awesome Pro para uso no design system.
+ * Conta Pro: mais ícones e estilos (solid, regular, light, thin, duotone).
+ * Para outros ícones, importe de @fortawesome/pro-solid-svg-icons ou pro-regular-svg-icons.
+ */
+export { faCheck, faChevronDown, faChevronLeft, faChevronRight, faChevronUp, faCircleInfo, faXmark, faPlus, faMinus, faMagnifyingGlass, faBars, faEllipsis, faEllipsisVertical, faUser, faGear, faArrowRight, faArrowLeft, faExternalLink, faTriangleExclamation, faCircleCheck, faCircleXmark, } from "@fortawesome/pro-solid-svg-icons";
+export { faCircleQuestion, faUser as faUserRegular, } from "@fortawesome/pro-regular-svg-icons";
+export { faFacebook, faInstagram, faLinkedin, faTwitter, faXTwitter, faYoutube, faWhatsapp, faGoogle, faGithub, faSpotify, faApple, faMicrosoft, } from "@fortawesome/free-brands-svg-icons";
+//# sourceMappingURL=icons.d.ts.map

package/dist/lib/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/lib/icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EACL,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,iBAAiB,EACjB,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,aAAa,GACd,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,gBAAgB,EAChB,MAAM,IAAI,aAAa,GACxB,MAAM,oCAAoC,CAAA;AAE3C,OAAO,EACL,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,GACZ,MAAM,oCAAoC,CAAA"}

package/dist/lib/icons.js

@@ -0,0 +1,9 @@
+/**
+ * Re-export de ícones Font Awesome Pro para uso no design system.
+ * Conta Pro: mais ícones e estilos (solid, regular, light, thin, duotone).
+ * Para outros ícones, importe de @fortawesome/pro-solid-svg-icons ou pro-regular-svg-icons.
+ */
+export { faCheck, faChevronDown, faChevronLeft, faChevronRight, faChevronUp, faCircleInfo, faXmark, faPlus, faMinus, faMagnifyingGlass, faBars, faEllipsis, faEllipsisVertical, faUser, faGear, faArrowRight, faArrowLeft, faExternalLink, faTriangleExclamation, faCircleCheck, faCircleXmark, } from "@fortawesome/pro-solid-svg-icons";
+export { faCircleQuestion, faUser as faUserRegular, } from "@fortawesome/pro-regular-svg-icons";
+export { faFacebook, faInstagram, faLinkedin, faTwitter, faXTwitter, faYoutube, faWhatsapp, faGoogle, faGithub, faSpotify, faApple, faMicrosoft, } from "@fortawesome/free-brands-svg-icons";
+//# sourceMappingURL=icons.js.map

package/dist/lib/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../src/lib/icons.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EACL,OAAO,EACP,aAAa,EACb,aAAa,EACb,cAAc,EACd,WAAW,EACX,YAAY,EACZ,OAAO,EACP,MAAM,EACN,OAAO,EACP,iBAAiB,EACjB,MAAM,EACN,UAAU,EACV,kBAAkB,EAClB,MAAM,EACN,MAAM,EACN,YAAY,EACZ,WAAW,EACX,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,aAAa,GACd,MAAM,kCAAkC,CAAA;AAEzC,OAAO,EACL,gBAAgB,EAChB,MAAM,IAAI,aAAa,GACxB,MAAM,oCAAoC,CAAA;AAE3C,OAAO,EACL,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,OAAO,EACP,WAAW,GACZ,MAAM,oCAAoC,CAAA"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+//# sourceMappingURL=utils.js.map

package/dist/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAmB,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@yberagroup/kaizen-ui",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "private": false,
   "scripts": {
-    "lint": "eslint . --max-warnings 0"
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint . --max-warnings 0",
+    "prepublishOnly": "npm run build && npm run lint"
   },
   "dependencies": {
-    "@yberagroup/kaizen-tokens": "^0.0.2",
+    "@yberagroup/kaizen-tokens": "^0.0.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -15,33 +17,49 @@
     "@fortawesome/pro-solid-svg-icons": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0",
-    "zod": "^3.25.76"
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
-    "@turbo/gen": "^2.8.1",
     "@types/node": "^25.1.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "@workspace/eslint-config": "file:../eslint-config",
     "@workspace/typescript-config": "file:../typescript-config",
+    "autoprefixer": "^10.4.21",
     "eslint": "^9.39.2",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5.9.3"
   },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "bin": {
+    "kaizen-ui": "./bin/kaizen-ui.mjs"
+  },
   "exports": {
     "./globals.css": "./src/styles/globals.css",
+    "./globals/esc.css": "./src/styles/globals.esc.css",
+    "./globals/group.css": "./src/styles/globals.group.css",
     "./postcss.config": "./postcss.config.mjs",
-    "./lib/*": "./src/lib/*.ts",
-    "./components/*": "./src/components/*.tsx",
-    "./hooks/*": "./src/hooks/*.ts"
+    "./tailwind-preset": "./tailwind-preset.cjs",
+    "./lib/*": "./dist/lib/*.js",
+    "./components/*": "./dist/components/*.js",
+    "./hooks/*": "./dist/hooks/*.js"
   },
+  "files": [
+    "dist",
+    "src/styles",
+    "postcss.config.mjs",
+    "tailwind-preset.cjs",
+    "bin",
+    "README.md",
+    "components.json"
+  ],
   "publishConfig": {
     "access": "public"
   }

package/postcss.config.mjs

@@ -1,6 +1,9 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
-    plugins: { "@tailwindcss/postcss": {} },
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 };
 
 export default config;

package/src/styles/globals.base.css

@@ -0,0 +1,33 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@500;600&family=Syne:wght@500;600&display=swap");
+
+@import "@yberagroup/kaizen-tokens/foundations.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Typefaces: primitivos --kz-syne e --kz-nunitosans vêm de kaizen-foundations (foundations.css).
+ * next/font injeta --font-sans (Syne) e --font-nunito (Nunito Sans) no layout da app.
+ *
+ * Usamos classes typeface-kz-* (não font-kz-*) para não colidir com pesos tipográficos (font-kz-500/600):
+ * o tailwind-merge trata qualquer utilitário "font-*" como o mesmo grupo e acaba removendo a família.
+ */
+@layer utilities {
+  .typeface-kz-syne {
+    font-family: var(--font-sans, var(--kz-syne)), "Syne", sans-serif;
+  }
+
+  .typeface-kz-nunitosans {
+    font-family:
+      var(--font-nunito, var(--kz-nunitosans)), "Nunito Sans", sans-serif;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border-primary outline-border-input-selected;
+  }
+  body {
+    @apply bg-background-primary text-text-primary-dark;
+  }
+}

package/src/styles/globals.css

@@ -1,36 +1,2 @@
-@import "tailwindcss";
-@source "../../../../apps/**/*.{ts,tsx}";
-@source "../**/*.{ts,tsx}";
-@import "@yberagroup/kaizen-tokens/foundations.css";
-@import "@yberagroup/kaizen-tokens/themes/esc.css"; /* ou group.css */
-@import "@yberagroup/kaizen-tokens/tailwind-semantic-theme.css";
-@import "tw-animate-css";
-
-/*
- * Typefaces: primitivos --kz-syne e --kz-nunitosans vêm de kaizen-foundations (foundations.css).
- * next/font injeta --font-sans (Syne) e --font-nunito (Nunito Sans) no layout da app.
- *
- * Usamos classes typeface-kz-* (não font-kz-*) para não colidir com pesos tipográficos (font-kz-500/600):
- * o tailwind-merge trata qualquer utilitário "font-*" como o mesmo grupo e acaba removendo a família.
- */
-@layer utilities {
-  .typeface-kz-syne {
-    font-family: var(--font-sans, var(--kz-syne)), "Syne", sans-serif;
-  }
-
-  .typeface-kz-nunitosans {
-    font-family:
-      var(--font-nunito, var(--kz-nunitosans)), "Nunito Sans", sans-serif;
-  }
-}
-
-@custom-variant dark (&:is(.dark *));
-
-@layer base {
-  * {
-    @apply border-border-primary outline-border-input-selected/50;
-  }
-  body {
-    @apply bg-background-primary text-text-primary-dark;
-  }
-}
+@import "@yberagroup/kaizen-tokens/themes/esc.css";
+@import "./globals.base.css";

package/src/styles/globals.esc.css

@@ -0,0 +1,2 @@
+@import "@yberagroup/kaizen-tokens/themes/esc.css";
+@import "./globals.base.css";

package/src/styles/globals.group.css

@@ -0,0 +1,2 @@
+@import "@yberagroup/kaizen-tokens/themes/group.css";
+@import "./globals.base.css";

package/tailwind-preset.cjs

@@ -0,0 +1,96 @@
+/* global module, require */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+const foundations = require("@yberagroup/kaizen-tokens/foundations");
+const semanticBase = require("@yberagroup/kaizen-tokens/semantic-base");
+
+function buildSemanticColors() {
+  const keys = new Set(Object.keys(semanticBase));
+  keys.add("background-primary");
+
+  const semanticColors = {};
+  for (const key of keys) {
+    semanticColors[key] = `var(--color-${key})`;
+  }
+
+  return semanticColors;
+}
+
+function buildPrimitiveKzColors() {
+  const kz = {};
+  const colors = foundations.colors ?? {};
+  const system = colors.system ?? {};
+
+  for (const [palette, scales] of Object.entries(system)) {
+    kz[palette] = {};
+    for (const step of Object.keys(scales)) {
+      kz[palette][step] = `var(--color-kz-${palette}-${step})`;
+    }
+  }
+
+  for (const palette of ["group", "club"]) {
+    if (!colors[palette]) continue;
+    kz[palette] = {};
+    for (const step of Object.keys(colors[palette])) {
+      kz[palette][step] = `var(--color-kz-${palette}-${step})`;
+    }
+  }
+
+  if (colors.escritorio) {
+    kz.esc = {};
+    for (const step of Object.keys(colors.escritorio)) {
+      kz.esc[step] = `var(--color-kz-esc-${step})`;
+    }
+  }
+
+  kz.alfa = {};
+  for (const mode of ["light", "dark"]) {
+    const modeValues = colors.alfa?.[mode] ?? {};
+    for (const step of Object.keys(modeValues)) {
+      kz.alfa[step] = kz.alfa[step] ?? {};
+      kz.alfa[step][mode] = `var(--color-kz-alfa-${step}-${mode})`;
+    }
+  }
+
+  return kz;
+}
+
+function buildPrefixedScale(values, cssVarPrefix) {
+  const out = {};
+  for (const key of Object.keys(values ?? {})) {
+    out[`kz-${key}`] = `var(${cssVarPrefix}${key})`;
+  }
+  return out;
+}
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        ...buildSemanticColors(),
+        kz: buildPrimitiveKzColors(),
+      },
+      spacing: buildPrefixedScale(foundations.layout?.space, "--space-kz-"),
+      borderRadius: buildPrefixedScale(
+        foundations.layout?.border?.radius,
+        "--rounded-kz-",
+      ),
+      borderWidth: buildPrefixedScale(
+        foundations.layout?.border?.width,
+        "--border-kz-",
+      ),
+      fontSize: buildPrefixedScale(foundations.text?.fontsize, "--kz-text-"),
+      lineHeight: buildPrefixedScale(
+        foundations.text?.lineheight,
+        "--kz-leading-",
+      ),
+      fontWeight: buildPrefixedScale(
+        foundations.text?.weight,
+        "--kz-font-weight-",
+      ),
+      letterSpacing: {
+        "kz-0": "0",
+      },
+    },
+  },
+};

package/eslint.config.js

@@ -1,4 +0,0 @@
-import { config } from "@workspace/eslint-config/react-internal"
-
-/** @type {import("eslint").Linter.Config} */
-export default config

package/src/components/title.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { clsx } from "clsx";
-
-export type TitleSize = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-export type TitleWeight = "medium" | "semibold";
-
-const titleVariants = cva(
-  "typeface-kz-syne tracking-kz-0 text-text-primary-dark leading-kz-0 p-0 m-0",
-  {
-    variants: {
-      size: {
-        h1: "text-kz-40 leading-kz-48",
-        h2: "text-kz-32 leading-kz-40",
-        h3: "text-kz-24 leading-kz-32",
-        h4: "text-kz-18 leading-kz-24",
-        h5: "text-kz-16 leading-kz-22",
-        h6: "text-kz-14 leading-kz-20",
-      },
-      weight: {
-        medium: "font-kz-500",
-        semibold: "font-kz-600",
-      },
-    },
-    defaultVariants: {
-      size: "h2",
-      weight: "medium",
-    },
-  },
-);
-
-export type TitleProps = React.HTMLAttributes<HTMLHeadingElement> &
-  VariantProps<typeof titleVariants> & {
-    size?: TitleSize;
-    weight?: TitleWeight;
-  };
-
-function Title({
-  size = "h2",
-  weight = "medium",
-  className,
-  ...props
-}: TitleProps) {
-  const Tag = size;
-
-  return (
-    <Tag
-      className={clsx(titleVariants({ size, weight }), className)}
-      {...props}
-    />
-  );
-}
-
-export { Title };

package/src/lib/icons.ts

@@ -1,48 +0,0 @@
-/**
- * Re-export de ícones Font Awesome Pro para uso no design system.
- * Conta Pro: mais ícones e estilos (solid, regular, light, thin, duotone).
- * Para outros ícones, importe de @fortawesome/pro-solid-svg-icons ou pro-regular-svg-icons.
- */
-export {
-  faCheck,
-  faChevronDown,
-  faChevronLeft,
-  faChevronRight,
-  faChevronUp,
-  faCircleInfo,
-  faXmark,
-  faPlus,
-  faMinus,
-  faMagnifyingGlass,
-  faBars,
-  faEllipsis,
-  faEllipsisVertical,
-  faUser,
-  faGear,
-  faArrowRight,
-  faArrowLeft,
-  faExternalLink,
-  faTriangleExclamation,
-  faCircleCheck,
-  faCircleXmark,
-} from "@fortawesome/pro-solid-svg-icons"
-
-export {
-  faCircleQuestion,
-  faUser as faUserRegular,
-} from "@fortawesome/pro-regular-svg-icons"
-
-export {
-  faFacebook,
-  faInstagram,
-  faLinkedin,
-  faTwitter,
-  faXTwitter,
-  faYoutube,
-  faWhatsapp,
-  faGoogle,
-  faGithub,
-  faSpotify,
-  faApple,
-  faMicrosoft,
-} from "@fortawesome/free-brands-svg-icons"

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/tsconfig.json

@@ -1,11 +0,0 @@
-{
-  "extends": "@workspace/typescript-config/react-library.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@yberagroup/kaizen-ui/*": ["./src/*"]
-    }
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsconfig.lint.json

@@ -1,8 +0,0 @@
-{
-  "extends": "@workspace/typescript-config/react-library.json",
-  "compilerOptions": {
-    "outDir": "dist"
-  },
-  "include": ["src", "turbo"],
-  "exclude": ["node_modules", "dist"]
-}