@fluityy/designsystem 0.1.0

package/dist/styles.css

@@ -0,0 +1,264 @@
+/* flui-ds — design tokens + Tailwind v4 theme mapping */
+
+/* tokens.css */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --flui-color-accent-scale-50: #f9ffe0;
+  --flui-color-accent-scale-100: #f3ffb8;
+  --flui-color-accent-scale-200: #e8ff80;
+  --flui-color-accent-scale-300: #dcff45;
+  --flui-color-accent-scale-400: #d7ff15;
+  --flui-color-accent-scale-500: #c4eb00;
+  --flui-color-accent-scale-600: #afd100;
+  --flui-color-accent-scale-700: #8ab000;
+  --flui-color-accent-scale-800: #638000;
+  --flui-color-accent-scale-900: #1a2200;
+  --flui-color-brand-50: #e8eeff;
+  --flui-color-brand-100: #ccd5ff;
+  --flui-color-brand-200: #99abff;
+  --flui-color-brand-300: #6680ff;
+  --flui-color-brand-400: #3355ff;
+  --flui-color-brand-500: #0033d6;
+  --flui-color-brand-600: #0029b0;
+  --flui-color-brand-700: #001f8a;
+  --flui-color-brand-800: #001566;
+  --flui-color-brand-900: #000b42;
+  --flui-color-neutral-0: #ffffff;
+  --flui-color-neutral-50: #f7f8fa;
+  --flui-color-neutral-100: #f3f4f7;
+  --flui-color-neutral-200: #dde1e9;
+  --flui-color-neutral-300: #c2c8d4;
+  --flui-color-neutral-400: #9aa2b4;
+  --flui-color-neutral-500: #6b7385;
+  --flui-color-neutral-600: #4c5263;
+  --flui-color-neutral-700: #363b49;
+  --flui-color-neutral-800: #22262f;
+  --flui-color-neutral-900: #13151b;
+  --flui-color-success-500: #1f9d55;
+  --flui-color-success-600: #157f43;
+  --flui-color-warning-500: #d9920a;
+  --flui-color-warning-600: #b6790a;
+  --flui-color-danger-500: #e02424;
+  --flui-color-danger-600: #bd1b1b;
+  --flui-space-0: 0;
+  --flui-space-1: 4px;
+  --flui-space-2: 8px;
+  --flui-space-3: 12px;
+  --flui-space-4: 16px;
+  --flui-space-5: 20px;
+  --flui-space-6: 24px;
+  --flui-space-8: 32px;
+  --flui-space-10: 40px;
+  --flui-space-12: 48px;
+  --flui-space-16: 64px;
+  --flui-radius-none: 0;
+  --flui-radius-sm: 8px;
+  --flui-radius-md: 12px;
+  --flui-radius-lg: 16px;
+  --flui-radius-xl: 24px;
+  --flui-radius-full: 9999px;
+  --flui-shadow-sm: 0 1px 2px rgba(19, 21, 27, 0.06);
+  --flui-shadow-md: 0 4px 12px rgba(19, 21, 27, 0.10);
+  --flui-shadow-lg: 0 12px 32px rgba(19, 21, 27, 0.14);
+  --flui-font-family-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --flui-font-family-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+  --flui-font-weight-regular: 400;
+  --flui-font-weight-medium: 500;
+  --flui-font-weight-semibold: 600;
+  --flui-font-weight-bold: 700;
+  --flui-font-size-xs: 12px;
+  --flui-font-size-sm: 14px;
+  --flui-font-size-md: 16px;
+  --flui-font-size-lg: 18px;
+  --flui-font-size-xl: 24px;
+  --flui-font-size-2xl: 32px;
+  --flui-font-line-height-tight: 1.2;
+  --flui-font-line-height-normal: 1.5;
+  --flui-font-line-height-relaxed: 1.75;
+  --flui-semantic-bg-base: var(--flui-color-neutral-0);
+  --flui-semantic-bg-subtle: var(--flui-color-neutral-50);
+  --flui-semantic-bg-muted: var(--flui-color-neutral-100);
+  --flui-semantic-fg-default: var(--flui-color-neutral-900);
+  --flui-semantic-fg-muted: var(--flui-color-neutral-500);
+  --flui-semantic-fg-on-brand: var(--flui-color-neutral-0);
+  --flui-semantic-border-default: var(--flui-color-neutral-200);
+  --flui-semantic-border-strong: var(--flui-color-neutral-300);
+  --flui-semantic-primary-default: var(--flui-color-brand-500);
+  --flui-semantic-primary-hover: var(--flui-color-brand-600);
+  --flui-semantic-primary-active: var(--flui-color-brand-700);
+  --flui-semantic-primary-subtle: var(--flui-color-brand-50);
+  --flui-semantic-accent-default: var(--flui-color-accent-scale-400);
+  --flui-semantic-accent-hover: var(--flui-color-accent-scale-500);
+  --flui-semantic-accent-active: var(--flui-color-accent-scale-600);
+  --flui-semantic-accent-subtle: var(--flui-color-accent-scale-100);
+  --flui-semantic-accent-foreground: var(--flui-color-accent-scale-900);
+  --flui-semantic-danger-default: var(--flui-color-danger-500);
+  --flui-semantic-danger-hover: var(--flui-color-danger-600);
+  --flui-semantic-success-default: var(--flui-color-accent-scale-600);
+  --flui-semantic-success-subtle: var(--flui-color-accent-scale-100);
+  --flui-semantic-success-foreground: var(--flui-color-accent-scale-900);
+  --flui-semantic-warning-default: var(--flui-color-warning-500);
+  --flui-semantic-warning-on-warning: var(--flui-color-neutral-900);
+}
+
+/* tokens.dark.css */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-theme="dark"] {
+  --flui-semantic-bg-base: var(--flui-color-neutral-900);
+  --flui-semantic-bg-subtle: var(--flui-color-neutral-800);
+  --flui-semantic-bg-muted: var(--flui-color-neutral-700);
+  --flui-semantic-fg-default: var(--flui-color-neutral-50);
+  --flui-semantic-fg-muted: var(--flui-color-neutral-400);
+  --flui-semantic-border-default: var(--flui-color-neutral-700);
+  --flui-semantic-border-strong: var(--flui-color-neutral-600);
+  --flui-semantic-primary-subtle: var(--flui-color-brand-800);
+  --flui-semantic-warning-on-warning: var(--flui-color-neutral-900);
+}
+
+/* tokens.brand-emerald.css */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-brand="emerald"] {
+  --flui-color-brand-50: #ecfdf5;
+  --flui-color-brand-100: #d1fae5;
+  --flui-color-brand-200: #a7f3d0;
+  --flui-color-brand-300: #6ee7b7;
+  --flui-color-brand-400: #34d399;
+  --flui-color-brand-500: #10b981;
+  --flui-color-brand-600: #059669;
+  --flui-color-brand-700: #047857;
+  --flui-color-brand-800: #065f46;
+  --flui-color-brand-900: #064e3b;
+}
+
+/* tokens.brand-violet.css */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-brand="violet"] {
+  --flui-color-brand-50: #f5f3ff;
+  --flui-color-brand-100: #ede9fe;
+  --flui-color-brand-200: #ddd6fe;
+  --flui-color-brand-300: #c4b5fd;
+  --flui-color-brand-400: #a78bfa;
+  --flui-color-brand-500: #7c3aed;
+  --flui-color-brand-600: #6d28d9;
+  --flui-color-brand-700: #5b21b6;
+  --flui-color-brand-800: #4c1d95;
+  --flui-color-brand-900: #3b0764;
+}
+
+/* tokens.brand-amber.css */
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+[data-brand="amber"] {
+  --flui-color-brand-50: #fffbeb;
+  --flui-color-brand-100: #fef3c7;
+  --flui-color-brand-200: #fde68a;
+  --flui-color-brand-300: #fcd34d;
+  --flui-color-brand-400: #fbbf24;
+  --flui-color-brand-500: #f59e0b;
+  --flui-color-brand-600: #d97706;
+  --flui-color-brand-700: #b45309;
+  --flui-color-brand-800: #92400e;
+  --flui-color-brand-900: #78350f;
+}
+
+/* Tailwind v4 theme mapping */
+@theme inline {
+  /* cores semânticas */
+  --color-bg: var(--flui-semantic-bg-base);
+  --color-bg-subtle: var(--flui-semantic-bg-subtle);
+  --color-bg-muted: var(--flui-semantic-bg-muted);
+  --color-fg: var(--flui-semantic-fg-default);
+  --color-fg-muted: var(--flui-semantic-fg-muted);
+  --color-fg-on-brand: var(--flui-semantic-fg-on-brand);
+  --color-border-default: var(--flui-semantic-border-default);
+  --color-border-strong: var(--flui-semantic-border-strong);
+  --color-primary: var(--flui-semantic-primary-default);
+  --color-primary-hover: var(--flui-semantic-primary-hover);
+  --color-primary-active: var(--flui-semantic-primary-active);
+  --color-primary-subtle: var(--flui-semantic-primary-subtle);
+  --color-accent: var(--flui-semantic-accent-default);
+  --color-accent-hover: var(--flui-semantic-accent-hover);
+  --color-accent-active: var(--flui-semantic-accent-active);
+  --color-accent-subtle: var(--flui-semantic-accent-subtle);
+  --color-accent-fg: var(--flui-semantic-accent-foreground);
+  --color-danger: var(--flui-semantic-danger-default);
+  --color-danger-hover: var(--flui-semantic-danger-hover);
+  --color-success: var(--flui-semantic-success-default);
+  --color-success-subtle: var(--flui-semantic-success-subtle);
+  --color-success-fg: var(--flui-semantic-success-foreground);
+  --color-warning: var(--flui-semantic-warning-default);
+  --color-on-warning: var(--flui-semantic-warning-on-warning);
+
+  /* paleta primitiva (para swatches/utilitários quando necessário) */
+  --color-brand-50: var(--flui-color-brand-50);
+  --color-brand-100: var(--flui-color-brand-100);
+  --color-brand-800: var(--flui-color-brand-800);
+  --color-brand-500: var(--flui-color-brand-500);
+  --color-brand-600: var(--flui-color-brand-600);
+  --color-neutral-100: var(--flui-color-neutral-100);
+  --color-neutral-500: var(--flui-color-neutral-500);
+  --color-neutral-900: var(--flui-color-neutral-900);
+
+  /* espaçamento */
+  --spacing-1: var(--flui-space-1);
+  --spacing-2: var(--flui-space-2);
+  --spacing-3: var(--flui-space-3);
+  --spacing-4: var(--flui-space-4);
+  --spacing-5: var(--flui-space-5);
+  --spacing-6: var(--flui-space-6);
+  --spacing-8: var(--flui-space-8);
+  --spacing-10: var(--flui-space-10);
+  --spacing-12: var(--flui-space-12);
+  --spacing-16: var(--flui-space-16);
+
+  /* raio */
+  --radius-sm: var(--flui-radius-sm);
+  --radius-md: var(--flui-radius-md);
+  --radius-lg: var(--flui-radius-lg);
+  --radius-xl: var(--flui-radius-xl);
+  --radius-full: var(--flui-radius-full);
+
+  /* tipografia */
+  --font-display: var(--flui-font-family-display);
+  --font-sans: var(--flui-font-family-sans);
+  --font-mono: var(--flui-font-family-mono);
+  --text-xs: var(--flui-font-size-xs);
+  --text-sm: var(--flui-font-size-sm);
+  --text-md: var(--flui-font-size-md);
+  --text-lg: var(--flui-font-size-lg);
+  --text-xl: var(--flui-font-size-xl);
+  --text-2xl: var(--flui-font-size-2xl);
+
+  /* sombras */
+  --shadow-sm: var(--flui-shadow-sm);
+  --shadow-md: var(--flui-shadow-md);
+  --shadow-lg: var(--flui-shadow-lg);
+}
+
+/* Animations */
+@keyframes flui-indeterminate {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+@keyframes flui-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes flui-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}

package/dist/theme/ThemeProvider.d.ts

@@ -0,0 +1,34 @@
+/** Modo de cor. "system" segue a preferência do SO. */
+export type ColorMode = "light" | "dark" | "system";
+/**
+ * Marca/tema. "default" usa o ramp base (:root). Os demais correspondem aos
+ * blocos [data-brand="…"] gerados pelo Style Dictionary a partir de
+ * tokens/brands/*.json — daí o tipo aberto (string) para temas customizados.
+ */
+export type Brand = "default" | (string & {});
+interface ThemeContextValue {
+    /** Preferência escolhida (pode ser "system"). */
+    mode: ColorMode;
+    /** Modo efetivo já resolvido ("light" | "dark"). */
+    resolvedMode: "light" | "dark";
+    brand: Brand;
+    setMode: (mode: ColorMode) => void;
+    setBrand: (brand: Brand) => void;
+    /** Alterna entre claro e escuro (resolve "system" antes). */
+    toggleMode: () => void;
+}
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Modo inicial caso não haja preferência salva. Padrão: "system". */
+    defaultMode?: ColorMode;
+    /** Marca inicial caso não haja preferência salva. Padrão: "default". */
+    defaultBrand?: Brand;
+    /**
+     * Onde aplicar os atributos data-theme / data-brand.
+     * Padrão: document.documentElement (escopo global do app).
+     */
+    target?: () => HTMLElement | null;
+}
+export declare function ThemeProvider({ children, defaultMode, defaultBrand, target, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,10 @@
+export interface TokenMeta {
+    name: string;
+    cssVar: string;
+    path: string[];
+    group: string;
+    value: string;
+    isColor: boolean;
+    reference: string | null;
+}
+export declare const tokens: TokenMeta[];

package/dist/utils/Portal.d.ts

@@ -0,0 +1,4 @@
+/** Renderiza os filhos em document.body, evitando problemas de overflow/z-index. */
+export declare function Portal({ children }: {
+    children: React.ReactNode;
+}): import('react').ReactPortal | null;

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import { ClassValue } from 'clsx';
+/** Combina classes condicionais e resolve conflitos do Tailwind. */
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fluityy/designsystem",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Flui Design System — componentes React com Tailwind v4 e tokens semânticos",
+  "keywords": ["design-system", "react", "tailwindcss", "components", "ui"],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "tokens": "node style-dictionary.config.mjs",
+    "tokens:watch": "chokidar \"tokens/**/*.json\" -c \"npm run tokens\"",
+    "predev": "npm run tokens",
+    "dev": "vite",
+    "prebuild": "npm run tokens",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "build:lib": "npm run tokens && vite build --config vite.lib.config.ts && node scripts/build-styles.mjs",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "tailwindcss": ">=4"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "devDependencies": {
+    "@tabler/icons-react": "^3.44.0",
+    "@tailwindcss/vite": "^4.1.10",
+    "@types/node": "^22.19.21",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.5.2",
+    "chokidar-cli": "^3.0.0",
+    "geist": "^1.7.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "style-dictionary": "^4.3.3",
+    "tailwindcss": "^4.1.10",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^5.0.2"
+  }
+}