@yberagroup/kaizen-ui 0.0.1

package/README.md

@@ -0,0 +1,21 @@
+# @yberagroup/kaizen-ui
+
+Componentes React do Kaizen Design System (Radix/shadcn + Tailwind).  
+Depende de `@yberagroup/kaizen-tokens` para temas e variáveis CSS.
+
+## Ícones (Font Awesome Pro)
+
+O projeto usa **Font Awesome Pro** (conta paga). Para instalar dependências:
+
+1. **Obtenha seu token Pro** em [fontawesome.com/account → Pro Package Tokens](https://fontawesome.com/account#pro-package-tokens).
+
+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`
+
+3. Na raiz do monorepo: `npm install`
+
+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.
+
+Em CI (GitHub Actions, etc.), configure `FONTAWESOME_PRO_TOKEN` como secret e use no passo de install.

package/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "fontawesome",
+  "aliases": {
+    "components": "@yberagroup/kaizen-ui/components",
+    "utils": "@yberagroup/kaizen-ui/lib/utils",
+    "hooks": "@yberagroup/kaizen-ui/hooks",
+    "lib": "@yberagroup/kaizen-ui/lib",
+    "ui": "@yberagroup/kaizen-ui/components"
+  }
+}

package/eslint.config.js

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

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@yberagroup/kaizen-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "private": false,
+  "scripts": {
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@yberagroup/kaizen-tokens": "file:../tokens",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/pro-regular-svg-icons": "^6.7.2",
+    "@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"
+  },
+  "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",
+    "eslint": "^9.39.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./postcss.config": "./postcss.config.mjs",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}

package/postcss.config.mjs

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

package/src/components/title.tsx

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,48 @@
+/**
+ * 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

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

package/src/styles/globals.css

@@ -0,0 +1,38 @@
+@import "tailwindcss";
+@source "../../../../apps/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+@import "../../../tokens/dist/foundations.css";
+@import "../../../tokens/dist/themes/esc.css";
+@import "../../../tokens/dist/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;
+  }
+}

package/tsconfig.json

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

package/tsconfig.lint.json

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