xertica-ui 2.4.0 → 2.5.0

package/llms.txt

@@ -1,6 +1,6 @@
 # Xertica UI
 
-> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.4.0
+> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.5.0
 
 Xertica UI ships with full source, typed declarations, Storybook stories, and structured documentation inside `node_modules/xertica-ui/`. AI agents should read this file first, then follow links for component-specific detail.
 

package/package.json

@@ -1,219 +1,219 @@
-{
-  "name": "xertica-ui",
-  "version": "2.4.0",
-  "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
-  "type": "module",
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/components/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/components/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
-    },
-    "./ui": {
-      "types": "./dist/components/ui/index.d.ts",
-      "import": "./dist/ui.es.js",
-      "require": "./dist/ui.cjs.js"
-    },
-    "./blocks": {
-      "types": "./dist/components/blocks/index.d.ts",
-      "import": "./dist/blocks.es.js",
-      "require": "./dist/blocks.cjs.js"
-    },
-    "./assistant": {
-      "types": "./dist/components/assistant/index.d.ts",
-      "import": "./dist/assistant.es.js",
-      "require": "./dist/assistant.cjs.js"
-    },
-    "./layout": {
-      "types": "./dist/components/layout/index.d.ts",
-      "import": "./dist/layout.es.js",
-      "require": "./dist/layout.cjs.js"
-    },
-    "./brand": {
-      "types": "./dist/components/brand/index.d.ts",
-      "import": "./dist/brand.es.js",
-      "require": "./dist/brand.cjs.js"
-    },
-    "./media": {
-      "types": "./dist/components/media/index.d.ts",
-      "import": "./dist/media.es.js",
-      "require": "./dist/media.cjs.js"
-    },
-    "./hooks": {
-      "types": "./dist/components/hooks/index.d.ts",
-      "import": "./dist/hooks.es.js",
-      "require": "./dist/hooks.cjs.js"
-    },
-    "./pages": {
-      "types": "./dist/components/pages/index.d.ts",
-      "import": "./dist/pages.es.js",
-      "require": "./dist/pages.cjs.js"
-    },
-    "./style.css": "./dist/xertica-ui.css"
-  },
-  "bin": "./dist/cli.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build --sourcemap=false --minify=false",
-    "build:production": "npm run build",
-    "build:types": "tsc -p tsconfig.build.json",
-    "build:cli": "tsup bin/cli.ts --format esm",
-    "cli:dev": "tsup bin/cli.ts --format esm --watch",
-    "cli:run": "node dist/cli.js",
-    "prepublishOnly": "npm run check && npm run build:production && npm run build:types && npm run build:cli",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "type-check": "tsc --noEmit",
-    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
-    "check": "npm run type-check && npm run lint",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_017a22f53dc2543",
-    "test": "vitest",
-    "test:ui": "vitest --ui",
-    "test:coverage": "vitest run --coverage"
-  },
-  "files": [
-    "dist",
-    "bin",
-    "templates",
-    "components",
-    "contexts",
-    "styles",
-    "hooks",
-    "assets",
-    "imports",
-    "utils",
-    "guidelines",
-    "llms.txt",
-    "llms-full.txt",
-    "components.json",
-    "docs",
-    "mcp",
-    "scripts",
-    "CHANGELOG.md",
-    "llms-compact.txt"
-  ],
-  "dependencies": {
-    "@google/generative-ai": "^0.24.1",
-    "@hookform/resolvers": "^3.9.1",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-aspect-ratio": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.4",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-hover-card": "^1.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.4",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-query": "^5.100.11",
-    "chalk": "^5.6.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.0.4",
-    "commander": "^14.0.2",
-    "date-fns": "^3.6.0",
-    "embla-carousel-react": "^8.5.2",
-    "execa": "^9.6.1",
-    "framer-motion": "^11.15.0",
-    "fs-extra": "^11.3.3",
-    "i18next": "^26.2.0",
-    "input-otp": "^1.4.1",
-    "lucide-react": "^0.469.0",
-    "ora": "^9.1.0",
-    "prompts": "^2.4.2",
-    "re-resizable": "^6.9.17",
-    "react-day-picker": "^9.13.0",
-    "react-hook-form": "^7.55.0",
-    "react-i18next": "^17.0.8",
-    "react-resizable-panels": "^2.1.7",
-    "react-syntax-highlighter": "^16.1.1",
-    "recharts": "^2.15.0",
-    "sonner": "^1.7.3",
-    "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1",
-    "zustand": "^5.0.13"
-  },
-  "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^5.2.1",
-    "@emotion/is-prop-valid": "^1.4.0",
-    "@storybook/addon-a11y": "10.4.0",
-    "@storybook/addon-docs": "10.4.0",
-    "@storybook/addon-onboarding": "10.4.0",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/react-vite": "10.4.0",
-    "@tailwindcss/postcss": "^4.0.0",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/fs-extra": "^11.0.4",
-    "@types/google.maps": "^3.58.1",
-    "@types/node": "^22.19.7",
-    "@types/prompts": "^2.4.9",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.19.1",
-    "@typescript-eslint/parser": "^8.19.1",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser-playwright": "^4.1.9",
-    "@vitest/coverage-v8": "^4.1.9",
-    "autoprefixer": "^10.4.20",
-    "chromatic": "^16.6.0",
-    "cookie": "^1.1.1",
-    "eslint": "^9.18.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^10.4.0",
-    "globals": "^15.14.0",
-    "jsdom": "^29.0.2",
-    "playwright": "^1.59.1",
-    "postcss": "^8.4.49",
-    "prettier": "^3.8.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.3",
-    "set-cookie-parser": "^3.1.0",
-    "storybook": "^10.4.0",
-    "tailwindcss": "^4.0.0",
-    "ts-morph": "^28.0.0",
-    "ts-node": "^10.9.2",
-    "tsup": "^8.5.1",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.5",
-    "vitest": "^4.1.9"
-  },
-  "overrides": {
-    "esbuild": "0.28.1"
-  }
-}
+{
+  "name": "xertica-ui",
+  "version": "2.5.0",
+  "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
+  "type": "module",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/components/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/components/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./ui": {
+      "types": "./dist/components/ui/index.d.ts",
+      "import": "./dist/ui.es.js",
+      "require": "./dist/ui.cjs.js"
+    },
+    "./blocks": {
+      "types": "./dist/components/blocks/index.d.ts",
+      "import": "./dist/blocks.es.js",
+      "require": "./dist/blocks.cjs.js"
+    },
+    "./assistant": {
+      "types": "./dist/components/assistant/index.d.ts",
+      "import": "./dist/assistant.es.js",
+      "require": "./dist/assistant.cjs.js"
+    },
+    "./layout": {
+      "types": "./dist/components/layout/index.d.ts",
+      "import": "./dist/layout.es.js",
+      "require": "./dist/layout.cjs.js"
+    },
+    "./brand": {
+      "types": "./dist/components/brand/index.d.ts",
+      "import": "./dist/brand.es.js",
+      "require": "./dist/brand.cjs.js"
+    },
+    "./media": {
+      "types": "./dist/components/media/index.d.ts",
+      "import": "./dist/media.es.js",
+      "require": "./dist/media.cjs.js"
+    },
+    "./hooks": {
+      "types": "./dist/components/hooks/index.d.ts",
+      "import": "./dist/hooks.es.js",
+      "require": "./dist/hooks.cjs.js"
+    },
+    "./pages": {
+      "types": "./dist/components/pages/index.d.ts",
+      "import": "./dist/pages.es.js",
+      "require": "./dist/pages.cjs.js"
+    },
+    "./style.css": "./dist/xertica-ui.css"
+  },
+  "bin": "./dist/cli.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build --sourcemap=false --minify=false",
+    "build:production": "npm run build",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:cli": "tsup bin/cli.ts --format esm",
+    "cli:dev": "tsup bin/cli.ts --format esm --watch",
+    "cli:run": "node dist/cli.js",
+    "prepublishOnly": "npm run check && npm run build:production && npm run build:types && npm run build:cli",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "check": "npm run type-check && npm run lint",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_017a22f53dc2543",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  },
+  "files": [
+    "dist",
+    "bin",
+    "templates",
+    "components",
+    "contexts",
+    "styles",
+    "hooks",
+    "assets",
+    "imports",
+    "utils",
+    "guidelines",
+    "llms.txt",
+    "llms-full.txt",
+    "components.json",
+    "docs",
+    "mcp",
+    "scripts",
+    "CHANGELOG.md",
+    "llms-compact.txt"
+  ],
+  "dependencies": {
+    "@google/generative-ai": "^0.24.1",
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-query": "^5.100.11",
+    "chalk": "^5.6.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "commander": "^14.0.2",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.5.2",
+    "execa": "^9.6.1",
+    "framer-motion": "^11.15.0",
+    "fs-extra": "^11.3.3",
+    "i18next": "^26.2.0",
+    "input-otp": "^1.4.1",
+    "lucide-react": "^0.469.0",
+    "ora": "^9.1.0",
+    "prompts": "^2.4.2",
+    "re-resizable": "^6.9.17",
+    "react-day-picker": "^9.13.0",
+    "react-hook-form": "^7.55.0",
+    "react-i18next": "^17.0.8",
+    "react-resizable-panels": "^2.1.7",
+    "react-syntax-highlighter": "^16.1.1",
+    "recharts": "^2.15.0",
+    "sonner": "^1.7.3",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.1",
+    "zustand": "^5.0.13"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.2.1",
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@storybook/addon-a11y": "10.4.0",
+    "@storybook/addon-docs": "10.4.0",
+    "@storybook/addon-onboarding": "10.4.0",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/react-vite": "10.4.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/fs-extra": "^11.0.4",
+    "@types/google.maps": "^3.58.1",
+    "@types/node": "^22.19.7",
+    "@types/prompts": "^2.4.9",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser-playwright": "^4.1.9",
+    "@vitest/coverage-v8": "^4.1.9",
+    "autoprefixer": "^10.4.20",
+    "chromatic": "^16.6.0",
+    "cookie": "^1.1.1",
+    "eslint": "^9.18.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "eslint-plugin-storybook": "^10.4.0",
+    "globals": "^15.14.0",
+    "jsdom": "^29.0.2",
+    "playwright": "^1.59.1",
+    "postcss": "^8.4.49",
+    "prettier": "^3.8.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.1.3",
+    "set-cookie-parser": "^3.1.0",
+    "storybook": "^10.4.0",
+    "tailwindcss": "^4.0.0",
+    "ts-morph": "^28.0.0",
+    "ts-node": "^10.9.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5",
+    "vitest": "^4.1.9"
+  },
+  "overrides": {
+    "esbuild": "0.28.1"
+  }
+}

package/styles/xertica/base.css

@@ -1,90 +1,90 @@
-/* ============================================
-   🧱 BASE STYLES
-   ============================================ */
-
-@import 'tailwindcss';
-@plugin "tailwindcss-animate";
-
-@custom-variant dark (&:is(.dark *));
-@custom-variant mobile (@media (max-width: 767px));
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  html,
-  body {
-    height: 100%;
-    overflow: hidden;
-  }
-
-  body {
-    @apply bg-background text-foreground;
-    font-family: 'Roboto', sans-serif;
-  }
-
-  html {
-    font-size: var(--font-size);
-  }
-
-  h1 {
-    font-size: var(--text-h1);
-    font-weight: var(--font-weight-extrabold);
-    line-height: 1.2;
-  }
-
-  h2 {
-    font-size: var(--text-h2);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  h3 {
-    font-size: var(--text-h3);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  h4 {
-    font-size: var(--text-h4);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.2;
-  }
-
-  p {
-    font-size: var(--text-p);
-    font-weight: var(--font-weight-regular);
-    line-height: 1.5;
-  }
-
-  label {
-    font-size: var(--text-label);
-    font-weight: var(--font-weight-semibold);
-    line-height: 1.3;
-  }
-
-  button {
-    font-size: var(--text-small);
-    font-weight: var(--font-weight-medium);
-    line-height: 1.4;
-  }
-
-  input {
-    font-size: var(--text-small);
-    font-weight: var(--font-weight-regular);
-    line-height: 1.4;
-  }
-}
-
-@layer utilities {
-  /* Global mobile content padding utility class.
-     Add class="content-area" to any wrapper to receive the mobile padding.
-     Change --mobile-content-padding in tokens.css to adjust globally. */
-  @media (max-width: 767px) {
-    .content-area {
-      padding-left: var(--mobile-content-padding);
-      padding-right: var(--mobile-content-padding);
-    }
-  }
-}
+/* ============================================
+   🧱 BASE STYLES
+   ============================================ */
+
+@import 'tailwindcss';
+@plugin "tailwindcss-animate";
+
+@custom-variant dark (&:is(.dark *));
+@custom-variant mobile (@media (max-width: 767px));
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html,
+  body {
+    height: 100%;
+    overflow: hidden;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Roboto', sans-serif;
+  }
+
+  html {
+    font-size: var(--font-size);
+  }
+
+  h1 {
+    font-size: var(--text-h1);
+    font-weight: var(--font-weight-extrabold);
+    line-height: 1.2;
+  }
+
+  h2 {
+    font-size: var(--text-h2);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  h3 {
+    font-size: var(--text-h3);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  h4 {
+    font-size: var(--text-h4);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  p {
+    font-size: var(--text-p);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.5;
+  }
+
+  label {
+    font-size: var(--text-label);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.3;
+  }
+
+  button {
+    font-size: var(--text-small);
+    font-weight: var(--font-weight-medium);
+    line-height: 1.4;
+  }
+
+  input {
+    font-size: var(--text-small);
+    font-weight: var(--font-weight-regular);
+    line-height: 1.4;
+  }
+}
+
+@layer utilities {
+  /* Global mobile content padding utility class.
+     Add class="content-area" to any wrapper to receive the mobile padding.
+     Change --mobile-content-padding in tokens.css to adjust globally. */
+  @media (max-width: 767px) {
+    .content-area {
+      padding-left: var(--mobile-content-padding);
+      padding-right: var(--mobile-content-padding);
+    }
+  }
+}