@thangnqdev/ui 0.2.1 → 0.2.3

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 thangnqdev
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 thangnqdev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,147 +1,149 @@
-# @thangnqdev/ui
-
-> **AETHER** — Spatial Optics & Enterprise-Grade Component Infrastructure for React & Tailwind CSS.
-
-An enterprise-ready architectural UI system engineered for complex SaaS, Fintech, AI Agents, ERP dashboards, and spatial web applications. Features machine-readable contracts (`llms.txt`, `ui-contract.json`), 100% SSOT parity, WCAG 2.1 AA accessibility tiers, hydration-safe SSR, and modular standalone CSS packaging.
-
-[![npm version](https://img.shields.io/npm/v/@thangnqdev/ui.svg?style=flat-square)](https://www.npmjs.com/package/@thangnqdev/ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
-
----
-
-## 📦 Cài Đặt (Installation)
-
-```bash
-npm install @thangnqdev/ui
-# or
-pnpm add @thangnqdev/ui
-# or
-yarn add @thangnqdev/ui
-```
-
-### Peer Dependencies
-Yêu cầu `react` và `react-dom` (>= 18.0.0 hoặc 19.0.0):
-```bash
-npm install react react-dom
-```
-
----
-
-## 🎨 Thiết Lập Nhanh (Quickstart)
-
-### Cách 1: Sử dụng Standalone All-In-One CSS
-File `styles.css` đã được biên dịch trọn gói toàn bộ hệ thống Apple Liquid Glass, màu sắc HSL, font SF Pro và các class tiện ích:
-
-```tsx
-// Trong file src/main.tsx hoặc app/layout.tsx
-import '@thangnqdev/ui/styles.css';
-
-import { ThemeProvider, Button, DataTablePro, DatePicker, Combobox } from '@thangnqdev/ui';
-
+# @thangnqdev/ui
+
+> **AETHER** — Spatial Optics & Enterprise-Grade Component Infrastructure for React & Tailwind CSS.
+
+An enterprise-ready architectural UI system engineered for complex SaaS, Fintech, AI Agents, ERP dashboards, and spatial web applications. Features machine-readable contracts (`llms.txt`, `ui-contract.json`), 100% SSOT parity, WCAG 2.1 AA accessibility tiers, hydration-safe SSR, and modular standalone CSS packaging.
+
+[![npm version](https://img.shields.io/npm/v/@thangnqdev/ui.svg?style=flat-square)](https://www.npmjs.com/package/@thangnqdev/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
+
+---
+
+## 📦 Cài Đặt (Installation)
+
+```bash
+npm install @thangnqdev/ui
+# or
+pnpm add @thangnqdev/ui
+# or
+yarn add @thangnqdev/ui
+```
+
+### Peer Dependencies
+Yêu cầu `react` và `react-dom` (>= 18.0.0 hoặc 19.0.0):
+```bash
+npm install react react-dom
+```
+
+---
+
+## 🎨 Thiết Lập Nhanh (Quickstart)
+
+### Cách 1: Sử dụng Standalone All-In-One CSS
+File `styles.css` đã được biên dịch trọn gói toàn bộ hệ thống Apple Liquid Glass, màu sắc HSL, font SF Pro và các class tiện ích:
+
+```tsx
+// Trong file src/main.tsx hoặc app/layout.tsx
+import '@thangnqdev/ui/styles.css';
+
+import { ThemeProvider, Button, DataTablePro, DatePicker, Combobox } from '@thangnqdev/ui';
+
 export default function App() {
-  return (
-    <ThemeProvider defaultTheme="dark">
-      <Button variant="primary">Primary Action</Button>
-    </ThemeProvider>
-  );
+  return (
+    <ThemeProvider defaultTheme="light">
+      <Button variant="primary">Primary Action</Button>
+    </ThemeProvider>
+  );
 }
 ```
 
-### Cách 2: Sử dụng Domain Modular Subpath CSS (Tối ưu hóa Bundle Size)
-Mỗi domain module có stylesheet độc lập đã được biên dịch toàn bộ utility class và design tokens:
-
-```tsx
-import { Button, IconButton } from '@thangnqdev/ui/buttons';
-import '@thangnqdev/ui/buttons/styles.css';
-
-import { Modal, ModalTitle, ModalBody } from '@thangnqdev/ui/overlays';
-import '@thangnqdev/ui/overlays/styles.css';
-```
-
----
-
-## 🏛️ Kiến Trúc Hệ Thống (Architectural Pillars)
-
-### 1. Single Source of Truth (SSOT) Invariant Guarantee
-Toàn bộ metadata component, public exports, `ui-contract.json` và `llms.txt` được liên kết trực tiếp với `COMPONENT_REGISTRY` (145 components). CI tự động kiểm tra tính bất biến 1-to-1:
-$$\text{Registry Exports} \equiv \text{Public TS Exports} \equiv \text{ui-contract.json} \equiv \text{llms.txt}$$
-
-### 2. Ba Cấp Độ Accessibility Rõ Ràng (A11y Tiers)
-Không overclaim accessibility; mọi primitive được phân loại minh bạch:
-- **`native`**: Các thẻ nền tảng browser (`Container`, `Grid`, `Heading`, `Text`, `Link`, `Portal`, `Divider`...).
-- **`supported`**: Các component composite hỗ trợ ARIA attributes và keyboard shortcuts.
-- **`verified`**: Các interactive primitives đã vượt qua kiểm thử WAI-ARIA pattern đầy đủ và automated audit bằng `axe-core` (`Button`, `Modal`, `FocusTrap`, `DatePicker`, `DateRangePicker`, `TimePicker`, `Tooltip`, `SplitButton`, `Checkbox`, `RangeSlider`, `Tabs`, `Accordion`, `DataTablePro`...).
-
-### 3. Chuẩn Hóa State với `useControllableState`
-Mọi stateful component (`CurrencyInput`, `NumberInput`, `Popover`, `DatePicker`, `Combobox`, `Checkbox`...) hỗ trợ cả **Controlled** và **Uncontrolled** mode với cam kết:
-- Khi controlled, UI luôn trung thực với `value` prop (không bao giờ lệch khi parent reject update).
-- Chuyển đổi trạng thái mượt mà, hỗ trợ `open` / `defaultOpen` / `onOpenChange` và `value` / `defaultValue` / `onChange`.
-
-### 4. Hydration-Safe SSR cho Next.js / Remix
-`ThemeProvider` và toàn bộ overlay components khởi tạo an toàn, đồng bộ theme client-side sau mount để loại bỏ hoàn toàn lỗi React hydration mismatch.
+`ThemeProvider` mặc định sử dụng theme `light`, vì vậy có thể bỏ prop `defaultTheme` nếu ứng dụng không cần chọn theme khác. Các giá trị `dark` và `system` vẫn được hỗ trợ.
 
----
-
-## 🛠️ Hướng Dẫn Tùy Biến (Customization Guide)
-
-### 1. Tùy Biến Toàn Cục bằng CSS Variables (Global Theming)
-
-```css
-:root {
-  /* 🔤 Font chữ & Monospace */
-  --ui-font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;
-  --ui-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-
-  /* 🎨 Màu chủ đạo thương hiệu (Brand Colors) */
-  --ui-primary: #6366f1;
-  --ui-primary-hover: #4f46e5;
-  --ui-primary-glow: rgba(99, 102, 241, 0.35);
-  --ui-accent: #ec4899;
-
-  /* 📐 Bo góc */
-  --ui-radius-lg: 16px;
-}
-
-.dark, [data-theme="dark"] {
-  --ui-primary: #818cf8;
-  --ui-bg-page: #09090b;
-  --ui-bg-secondary: #18181b;
-}
-```
-
----
-
-## 🤖 Machine-Readable Contracts for AI Agents
-
-Thư viện cung cấp hợp đồng chuẩn máy cho các trợ lý AI (Antigravity, Claude Code, Cursor, Codex):
-- **`llms.txt`**: Đặc tả toàn diện cấu trúc import, signature, và quy tắc lập trình.
-- **`ui-contract.json`**: Schema JSON chặt chẽ phục vụ validate và sinh code tự động.
-
----
-
-## 🧪 Quality Gates & Kiểm Thử
-
-```bash
-# Kiểm tra strict TypeScript
-npm run typecheck
-
-# Chạy toàn bộ 115+ test cases (A11y, Axe, Invariant, SSR, Controllable State)
-npm test
-
-# Kiểm tra tính bất biến SSOT
-npm run test:ssot
-
-# Kiểm tra WAI-ARIA & Axe automated scans
-npm run test:a11y
-
-# Kiểm tra Server-Side Rendering
-npm run test:ssr
-
-# Quy trình Prepack Gate trước khi phát hành
-npm run prepack
-```
-
----
-
-## 📄 License
-MIT © 2026 AETHER Spatial UI
+### Cách 2: Sử dụng Domain Modular Subpath CSS (Tối ưu hóa Bundle Size)
+Mỗi domain module có stylesheet độc lập đã được biên dịch toàn bộ utility class và design tokens:
+
+```tsx
+import { Button, IconButton } from '@thangnqdev/ui/buttons';
+import '@thangnqdev/ui/buttons/styles.css';
+
+import { Modal, ModalTitle, ModalBody } from '@thangnqdev/ui/overlays';
+import '@thangnqdev/ui/overlays/styles.css';
+```
+
+---
+
+## 🏛️ Kiến Trúc Hệ Thống (Architectural Pillars)
+
+### 1. Single Source of Truth (SSOT) Invariant Guarantee
+Toàn bộ metadata component, public exports, `ui-contract.json` và `llms.txt` được liên kết trực tiếp với `COMPONENT_REGISTRY` (145 components). CI tự động kiểm tra tính bất biến 1-to-1:
+$$\text{Registry Exports} \equiv \text{Public TS Exports} \equiv \text{ui-contract.json} \equiv \text{llms.txt}$$
+
+### 2. Ba Cấp Độ Accessibility Rõ Ràng (A11y Tiers)
+Không overclaim accessibility; mọi primitive được phân loại minh bạch:
+- **`native`**: Các thẻ nền tảng browser (`Container`, `Grid`, `Heading`, `Text`, `Link`, `Portal`, `Divider`...).
+- **`supported`**: Các component composite hỗ trợ ARIA attributes và keyboard shortcuts.
+- **`verified`**: Các interactive primitives đã vượt qua kiểm thử WAI-ARIA pattern đầy đủ và automated audit bằng `axe-core` (`Button`, `Modal`, `FocusTrap`, `DatePicker`, `DateRangePicker`, `TimePicker`, `Tooltip`, `SplitButton`, `Checkbox`, `RangeSlider`, `Tabs`, `Accordion`, `DataTablePro`...).
+
+### 3. Chuẩn Hóa State với `useControllableState`
+Mọi stateful component (`CurrencyInput`, `NumberInput`, `Popover`, `DatePicker`, `Combobox`, `Checkbox`...) hỗ trợ cả **Controlled** và **Uncontrolled** mode với cam kết:
+- Khi controlled, UI luôn trung thực với `value` prop (không bao giờ lệch khi parent reject update).
+- Chuyển đổi trạng thái mượt mà, hỗ trợ `open` / `defaultOpen` / `onOpenChange` và `value` / `defaultValue` / `onChange`.
+
+### 4. Hydration-Safe SSR cho Next.js / Remix
+`ThemeProvider` và toàn bộ overlay components khởi tạo an toàn, đồng bộ theme client-side sau mount để loại bỏ hoàn toàn lỗi React hydration mismatch.
+
+---
+
+## 🛠️ Hướng Dẫn Tùy Biến (Customization Guide)
+
+### 1. Tùy Biến Toàn Cục bằng CSS Variables (Global Theming)
+
+```css
+:root {
+  /* 🔤 Font chữ & Monospace */
+  --ui-font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;
+  --ui-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+  /* 🎨 Màu chủ đạo thương hiệu (Brand Colors) */
+  --ui-primary: #6366f1;
+  --ui-primary-hover: #4f46e5;
+  --ui-primary-glow: rgba(99, 102, 241, 0.35);
+  --ui-accent: #ec4899;
+
+  /* 📐 Bo góc */
+  --ui-radius-lg: 16px;
+}
+
+.dark, [data-theme="dark"] {
+  --ui-primary: #818cf8;
+  --ui-bg-page: #09090b;
+  --ui-bg-secondary: #18181b;
+}
+```
+
+---
+
+## 🤖 Machine-Readable Contracts for AI Agents
+
+Thư viện cung cấp hợp đồng chuẩn máy cho các trợ lý AI (Antigravity, Claude Code, Cursor, Codex):
+- **`llms.txt`**: Đặc tả toàn diện cấu trúc import, signature, và quy tắc lập trình.
+- **`ui-contract.json`**: Schema JSON chặt chẽ phục vụ validate và sinh code tự động.
+
+---
+
+## 🧪 Quality Gates & Kiểm Thử
+
+```bash
+# Kiểm tra strict TypeScript
+npm run typecheck
+
+# Chạy toàn bộ 115+ test cases (A11y, Axe, Invariant, SSR, Controllable State)
+npm test
+
+# Kiểm tra tính bất biến SSOT
+npm run test:ssot
+
+# Kiểm tra WAI-ARIA & Axe automated scans
+npm run test:a11y
+
+# Kiểm tra Server-Side Rendering
+npm run test:ssr
+
+# Quy trình Prepack Gate trước khi phát hành
+npm run prepack
+```
+
+---
+
+## 📄 License
+MIT © 2026 AETHER Spatial UI

package/bin/cli.js

@@ -1,125 +1,125 @@
-#!/usr/bin/env node
-
-import fs from 'node:fs';
-import path from 'node:path';
-import os from 'node:os';
-import readline from 'node:readline';
-import { execSync } from 'node:child_process';
-
-const CONFIG_DIR = path.join(os.homedir(), '.thangnqdev-ui');
-const CONFIG_FILE = path.join(CONFIG_DIR, 'telemetry.json');
-
-const args = process.argv.slice(2);
-const command = args[0] || 'help';
-
-function getGitRemote() {
-  try {
-    return execSync('git remote get-url origin', {
-      stdio: ['pipe', 'pipe', 'ignore'],
-      timeout: 1000,
-    })
-      .toString()
-      .trim();
-  } catch {
-    return null;
-  }
-}
-
-function loadConfig() {
-  if (fs.existsSync(CONFIG_FILE)) {
-    try {
-      return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
-    } catch {
-      return {};
-    }
-  }
-  return {};
-}
-
-function saveConfig(data) {
-  if (!fs.existsSync(CONFIG_DIR)) {
-    fs.mkdirSync(CONFIG_DIR, { recursive: true });
-  }
-  fs.writeFileSync(
-    CONFIG_FILE,
-    JSON.stringify(
-      {
-        ...loadConfig(),
-        ...data,
-        updatedAt: new Date().toISOString(),
-      },
-      null,
-      2
-    )
-  );
-}
-
-switch (command) {
-  case 'showcase':
-  case 'register': {
-    const detected = getGitRemote();
-    const rl = readline.createInterface({
-      input: process.stdin,
-      output: process.stdout,
-    });
-
-    console.log('\n\x1b[36m✦ AETHER Community Showcase Registration\x1b[0m');
-    console.log('Share your project or repository using @thangnqdev/ui:\n');
-
-    rl.question(`  Repository URL [${detected || 'none'}]: `, (repoUrl) => {
-      const finalRepo = repoUrl.trim() || detected || 'custom';
-      rl.question('  Project / Company Name (optional): ', (name) => {
-        saveConfig({
-          enabled: true,
-          repo: finalRepo,
-          projectName: name.trim() || undefined,
-          prompted: true,
-        });
-
-        console.log('\n\x1b[32m✔ Successfully registered for AETHER Community Showcase!\x1b[0m');
-        console.log(`  Repo: \x1b[33m${finalRepo}\x1b[0m\n`);
-        rl.close();
-      });
-    });
-    break;
-  }
-
-  case 'telemetry': {
-    const sub = args[1] || 'status';
-    if (sub === 'enable') {
-      const remote = getGitRemote();
-      saveConfig({ enabled: true, repo: remote, prompted: true });
-      console.log('\x1b[32m✔ Repository sharing & showcase telemetry enabled.\x1b[0m');
-    } else if (sub === 'disable') {
-      saveConfig({ enabled: false, repo: null, prompted: true });
-      console.log('\x1b[90m✔ Repository sharing & showcase telemetry disabled.\x1b[0m');
-    } else {
-      const cfg = loadConfig();
-      console.log('\n\x1b[36m✦ AETHER Telemetry & Showcase Status\x1b[0m');
-      console.log(`  Status: ${cfg.enabled ? '\x1b[32mEnabled (Sharing active)\x1b[0m' : '\x1b[90mDisabled (Anonymous)\x1b[0m'}`);
-      if (cfg.repo) console.log(`  Repository: \x1b[33m${cfg.repo}\x1b[0m`);
-      console.log('\n  Commands:');
-      console.log('    npx @thangnqdev/ui showcase          # Register project for showcase');
-      console.log('    npx @thangnqdev/ui telemetry enable   # Enable repo telemetry');
-      console.log('    npx @thangnqdev/ui telemetry disable  # Disable repo telemetry\n');
-    }
-    break;
-  }
-
-  case 'help':
-  default: {
-    console.log(`
-\x1b[1m@thangnqdev/ui CLI\x1b[0m (AETHER System)
-
-Usage:
-  npx @thangnqdev/ui <command>
-
-Commands:
-  showcase            Register repository for AETHER Community Showcase
-  telemetry status    View repository sharing & telemetry status
-  telemetry enable    Opt-in to share repository telemetry
-  telemetry disable   Opt-out from repository telemetry
-`);
-    break;
-  }
-}
+#!/usr/bin/env node
+
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import readline from 'node:readline';
+import { execSync } from 'node:child_process';
+
+const CONFIG_DIR = path.join(os.homedir(), '.thangnqdev-ui');
+const CONFIG_FILE = path.join(CONFIG_DIR, 'telemetry.json');
+
+const args = process.argv.slice(2);
+const command = args[0] || 'help';
+
+function getGitRemote() {
+  try {
+    return execSync('git remote get-url origin', {
+      stdio: ['pipe', 'pipe', 'ignore'],
+      timeout: 1000,
+    })
+      .toString()
+      .trim();
+  } catch {
+    return null;
+  }
+}
+
+function loadConfig() {
+  if (fs.existsSync(CONFIG_FILE)) {
+    try {
+      return JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
+    } catch {
+      return {};
+    }
+  }
+  return {};
+}
+
+function saveConfig(data) {
+  if (!fs.existsSync(CONFIG_DIR)) {
+    fs.mkdirSync(CONFIG_DIR, { recursive: true });
+  }
+  fs.writeFileSync(
+    CONFIG_FILE,
+    JSON.stringify(
+      {
+        ...loadConfig(),
+        ...data,
+        updatedAt: new Date().toISOString(),
+      },
+      null,
+      2
+    )
+  );
+}
+
+switch (command) {
+  case 'showcase':
+  case 'register': {
+    const detected = getGitRemote();
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    console.log('\n\x1b[36m✦ AETHER Community Showcase Registration\x1b[0m');
+    console.log('Share your project or repository using @thangnqdev/ui:\n');
+
+    rl.question(`  Repository URL [${detected || 'none'}]: `, (repoUrl) => {
+      const finalRepo = repoUrl.trim() || detected || 'custom';
+      rl.question('  Project / Company Name (optional): ', (name) => {
+        saveConfig({
+          enabled: true,
+          repo: finalRepo,
+          projectName: name.trim() || undefined,
+          prompted: true,
+        });
+
+        console.log('\n\x1b[32m✔ Successfully registered for AETHER Community Showcase!\x1b[0m');
+        console.log(`  Repo: \x1b[33m${finalRepo}\x1b[0m\n`);
+        rl.close();
+      });
+    });
+    break;
+  }
+
+  case 'telemetry': {
+    const sub = args[1] || 'status';
+    if (sub === 'enable') {
+      const remote = getGitRemote();
+      saveConfig({ enabled: true, repo: remote, prompted: true });
+      console.log('\x1b[32m✔ Repository sharing & showcase telemetry enabled.\x1b[0m');
+    } else if (sub === 'disable') {
+      saveConfig({ enabled: false, repo: null, prompted: true });
+      console.log('\x1b[90m✔ Repository sharing & showcase telemetry disabled.\x1b[0m');
+    } else {
+      const cfg = loadConfig();
+      console.log('\n\x1b[36m✦ AETHER Telemetry & Showcase Status\x1b[0m');
+      console.log(`  Status: ${cfg.enabled ? '\x1b[32mEnabled (Sharing active)\x1b[0m' : '\x1b[90mDisabled (Anonymous)\x1b[0m'}`);
+      if (cfg.repo) console.log(`  Repository: \x1b[33m${cfg.repo}\x1b[0m`);
+      console.log('\n  Commands:');
+      console.log('    npx @thangnqdev/ui showcase          # Register project for showcase');
+      console.log('    npx @thangnqdev/ui telemetry enable   # Enable repo telemetry');
+      console.log('    npx @thangnqdev/ui telemetry disable  # Disable repo telemetry\n');
+    }
+    break;
+  }
+
+  case 'help':
+  default: {
+    console.log(`
+\x1b[1m@thangnqdev/ui CLI\x1b[0m (AETHER System)
+
+Usage:
+  npx @thangnqdev/ui <command>
+
+Commands:
+  showcase            Register repository for AETHER Community Showcase
+  telemetry status    View repository sharing & telemetry status
+  telemetry enable    Opt-in to share repository telemetry
+  telemetry disable   Opt-out from repository telemetry
+`);
+    break;
+  }
+}

package/dist/bento/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/cn.ts","../../src/bento/BentoGrid.tsx","../../src/bento/BentoCard.tsx"],"names":["twMerge","clsx","cva","jsx","forwardRef","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../utils/cn';\n\nconst bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {\n  variants: {\n    cols: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 md:grid-cols-2',\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n    },\n    gap: {\n      sm: 'gap-4',\n      md: 'gap-6',\n      lg: 'gap-8',\n    },\n    flow: {\n      row: 'grid-flow-row',\n      col: 'grid-flow-col',\n      dense: 'grid-flow-dense',\n      'row-dense': 'grid-flow-row-dense',\n      'col-dense': 'grid-flow-col-dense',\n    },\n  },\n  defaultVariants: {\n    cols: 3,\n    gap: 'md',\n    flow: 'row',\n  },\n});\n\nexport interface BentoGridProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof bentoGridVariants> {}\n\nexport const BentoGrid: React.FC<BentoGridProps> = ({\n  className,\n  cols,\n  gap,\n  flow,\n  children,\n  ...props\n}) => {\n  return (\n    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>\n      {children}\n    </div>\n  );\n};\n","import React, { forwardRef } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../utils/cn';\n\nconst bentoCardVariants = cva(\n  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',\n  {\n    variants: {\n      colSpan: {\n        1: 'col-span-1',\n        2: 'col-span-1 md:col-span-2',\n        3: 'col-span-1 md:col-span-2 lg:col-span-3',\n      },\n      rowSpan: {\n        1: 'row-span-1',\n        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',\n        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',\n      },\n      variant: {\n        default:\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',\n        spotlight:\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',\n        elevated:\n          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',\n      },\n      radius: {\n        md: 'rounded-[var(--ui-bento-radius-md)]',\n        lg: 'rounded-[var(--ui-bento-radius-lg)]',\n      },\n      padding: {\n        sm: 'p-4 sm:p-5',\n        md: 'p-5 sm:p-7',\n        lg: 'p-6 sm:p-9',\n      },\n    },\n    defaultVariants: {\n      colSpan: 1,\n      rowSpan: 1,\n      variant: 'default',\n      radius: 'lg',\n      padding: 'md',\n    },\n  }\n);\n\nexport interface BentoCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\n    VariantProps<typeof bentoCardVariants> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  icon?: React.ReactNode;\n  tag?: React.ReactNode;\n  /**\n   * Decorative background graphic. Non-interactive backdrop element.\n   */\n  backgroundGraphic?: React.ReactNode;\n  /**\n   * @deprecated Use `backgroundGraphic` instead.\n   */\n  graphic?: React.ReactNode;\n}\n\nexport const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(\n  (\n    {\n      className,\n      colSpan,\n      rowSpan,\n      variant,\n      radius,\n      padding,\n      title,\n      description,\n      icon,\n      tag,\n      backgroundGraphic,\n      graphic,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const bgGraphic = backgroundGraphic ?? graphic;\n\n    return (\n      <div\n        ref={ref}\n        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}\n        {...props}\n      >\n        {/* Subtle Specular Top Line */}\n        <div\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50\"\n          aria-hidden=\"true\"\n        />\n\n        {/* Background Visual Graphic Slot (Decorative) */}\n        {bgGraphic && (\n          <div className=\"absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105\">\n            {bgGraphic}\n          </div>\n        )}\n\n        {/* Top Header Section */}\n        {(icon || tag) && (\n          <div className=\"relative z-10 flex items-start justify-between gap-4\">\n            {icon && (\n              <div className=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105\">\n                {icon}\n              </div>\n            )}\n            {tag && (\n              <div className=\"font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm\">\n                {tag}\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Main Content Area */}\n        <div className=\"relative z-10 mt-auto pt-6\">\n          {title && (\n            <h3 className=\"text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white\">\n              {title}\n            </h3>\n          )}\n          {description && (\n            <p className=\"mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal\">\n              {description}\n            </p>\n          )}\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nBentoCard.displayName = 'BentoCard';\n"]}
+{"version":3,"sources":["../../src/utils/cn.ts","../../src/bento/BentoGrid.tsx","../../src/bento/BentoCard.tsx"],"names":["twMerge","clsx","cva","jsx","forwardRef","jsxs"],"mappings":"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","file":"index.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n  return twMerge(clsx(inputs));\r\n}\r\n","import React from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {\r\n  variants: {\r\n    cols: {\r\n      1: 'grid-cols-1',\r\n      2: 'grid-cols-1 md:grid-cols-2',\r\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\r\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\r\n    },\r\n    gap: {\r\n      sm: 'gap-4',\r\n      md: 'gap-6',\r\n      lg: 'gap-8',\r\n    },\r\n    flow: {\r\n      row: 'grid-flow-row',\r\n      col: 'grid-flow-col',\r\n      dense: 'grid-flow-dense',\r\n      'row-dense': 'grid-flow-row-dense',\r\n      'col-dense': 'grid-flow-col-dense',\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    cols: 3,\r\n    gap: 'md',\r\n    flow: 'row',\r\n  },\r\n});\r\n\r\nexport interface BentoGridProps\r\n  extends React.HTMLAttributes<HTMLDivElement>,\r\n    VariantProps<typeof bentoGridVariants> {}\r\n\r\nexport const BentoGrid: React.FC<BentoGridProps> = ({\r\n  className,\r\n  cols,\r\n  gap,\r\n  flow,\r\n  children,\r\n  ...props\r\n}) => {\r\n  return (\r\n    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n","import React, { forwardRef } from 'react';\r\nimport { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from '../utils/cn';\r\n\r\nconst bentoCardVariants = cva(\r\n  'group relative flex flex-col justify-between overflow-hidden transition-all duration-500 ease-out border text-[var(--ui-bento-text-title)]',\r\n  {\r\n    variants: {\r\n      colSpan: {\r\n        1: 'col-span-1',\r\n        2: 'col-span-1 md:col-span-2',\r\n        3: 'col-span-1 md:col-span-2 lg:col-span-3',\r\n      },\r\n      rowSpan: {\r\n        1: 'row-span-1',\r\n        2: 'row-span-1 md:row-span-2 md:min-h-[460px]',\r\n        3: 'row-span-1 md:row-span-3 md:min-h-[680px]',\r\n      },\r\n      variant: {\r\n        default:\r\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] hover:bg-[var(--ui-bento-bg-card-hover)] shadow-[var(--ui-bento-shadow)]',\r\n        spotlight:\r\n          'bg-[var(--ui-bento-bg-card)] border-[var(--ui-bento-border)] hover:border-white/30 dark:hover:border-white/30 hover:shadow-[0_0_35px_-8px_rgba(255,255,255,0.12)]',\r\n        elevated:\r\n          'bg-[image:var(--ui-bento-bg-elevated)] border-[var(--ui-bento-border)] hover:border-[var(--ui-bento-border-hover)] shadow-[var(--ui-bento-shadow-elevated)]',\r\n      },\r\n      radius: {\r\n        md: 'rounded-[var(--ui-bento-radius-md)]',\r\n        lg: 'rounded-[var(--ui-bento-radius-lg)]',\r\n      },\r\n      padding: {\r\n        sm: 'p-4 sm:p-5',\r\n        md: 'p-5 sm:p-7',\r\n        lg: 'p-6 sm:p-9',\r\n      },\r\n    },\r\n    defaultVariants: {\r\n      colSpan: 1,\r\n      rowSpan: 1,\r\n      variant: 'default',\r\n      radius: 'lg',\r\n      padding: 'md',\r\n    },\r\n  }\r\n);\r\n\r\nexport interface BentoCardProps\r\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>,\r\n    VariantProps<typeof bentoCardVariants> {\r\n  title?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  icon?: React.ReactNode;\r\n  tag?: React.ReactNode;\r\n  /**\r\n   * Decorative background graphic. Non-interactive backdrop element.\r\n   */\r\n  backgroundGraphic?: React.ReactNode;\r\n  /**\r\n   * @deprecated Use `backgroundGraphic` instead.\r\n   */\r\n  graphic?: React.ReactNode;\r\n}\r\n\r\nexport const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>(\r\n  (\r\n    {\r\n      className,\r\n      colSpan,\r\n      rowSpan,\r\n      variant,\r\n      radius,\r\n      padding,\r\n      title,\r\n      description,\r\n      icon,\r\n      tag,\r\n      backgroundGraphic,\r\n      graphic,\r\n      children,\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const bgGraphic = backgroundGraphic ?? graphic;\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        className={cn(bentoCardVariants({ colSpan, rowSpan, variant, radius, padding, className }))}\r\n        {...props}\r\n      >\r\n        {/* Subtle Specular Top Line */}\r\n        <div\r\n          className=\"pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent opacity-50\"\r\n          aria-hidden=\"true\"\r\n        />\r\n\r\n        {/* Background Visual Graphic Slot (Decorative) */}\r\n        {bgGraphic && (\r\n          <div className=\"absolute inset-0 z-0 overflow-hidden pointer-events-none opacity-70 transition-transform duration-700 ease-out motion-safe:group-hover:scale-105\">\r\n            {bgGraphic}\r\n          </div>\r\n        )}\r\n\r\n        {/* Top Header Section */}\r\n        {(icon || tag) && (\r\n          <div className=\"relative z-10 flex items-start justify-between gap-4\">\r\n            {icon && (\r\n              <div className=\"flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ui-bento-icon-bg)] border border-[var(--ui-bento-icon-border)] backdrop-blur-md shadow-inner transition-transform duration-300 group-hover:scale-105\">\r\n                {icon}\r\n              </div>\r\n            )}\r\n            {tag && (\r\n              <div className=\"font-mono text-[10px] font-semibold uppercase tracking-widest text-[var(--ui-bento-text-tag)] border border-[var(--ui-bento-icon-border)] bg-[var(--ui-bento-icon-bg)] px-2.5 py-1 rounded-md backdrop-blur-sm\">\r\n                {tag}\r\n              </div>\r\n            )}\r\n          </div>\r\n        )}\r\n\r\n        {/* Main Content Area */}\r\n        <div className=\"relative z-10 mt-auto pt-6\">\r\n          {title && (\r\n            <h3 className=\"text-xl font-bold tracking-tight text-[var(--ui-bento-text-title)] transition-colors group-hover:text-[var(--ui-primary)] dark:group-hover:text-white\">\r\n              {title}\r\n            </h3>\r\n          )}\r\n          {description && (\r\n            <p className=\"mt-2 text-sm leading-relaxed text-[var(--ui-bento-text-desc)] font-normal\">\r\n              {description}\r\n            </p>\r\n          )}\r\n          {children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n);\r\n\r\nBentoCard.displayName = 'BentoCard';\r\n"]}

package/dist/bento/index.js

@@ -1,4 +1,4 @@
-export { BentoCard, BentoGrid } from '../chunk-S6XJMYME.js';
-import '../chunk-2YJBW4E2.js';
+export { BentoCard, BentoGrid } from '../chunk-C4SUXMI3.js';
+import '../chunk-4S6L5V7X.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map