@thangnqdev/ui 0.1.2 → 0.2.0

package/LICENSE

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

package/README.md

@@ -1,8 +1,8 @@
 # @thangnqdev/ui
 
-> **AETHER** — Spatial Optics & Apple Human Interface System for React & Tailwind CSS.
+> **AETHER** — Spatial Optics & Enterprise-Grade Component Infrastructure for React & Tailwind CSS.
 
-An enterprise-grade, Apple HIG & visionOS-inspired architectural UI component system designed for complex SaaS, Fintech, AI Agents, ERP dashboards, and spatial web applications.
+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)
@@ -29,7 +29,7 @@ npm install react react-dom
 
 ## 🎨 Thiết Lập Nhanh (Quickstart)
 
-### Cách 1: Sử dụng Standalone CSS (Đơn giản nhất, Đẹp ngay 100%)
+### 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
@@ -41,259 +41,107 @@ import { ThemeProvider, Button, DataTablePro, DatePicker, Combobox } from '@than
 export default function App() {
   return (
     <ThemeProvider defaultTheme="dark">
-      <Button variant="primary">Apple Keynote Button</Button>
+      <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';
+```
+
 ---
 
-### Cách 2: Tích hợp sâu với Tailwind CSS (Tùy chọn)
+## 🏛️ Kiến Trúc Hệ Thống (Architectural Pillars)
 
-#### A. Tailwind CSS v4
-Trong file CSS chính của bạn (`src/index.css`):
-```css
-@import "tailwindcss";
+### 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}$$
 
-/* Scan source bundle */
-@source "node_modules/@thangnqdev/ui/dist";
+### 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`...).
 
-/* Import design tokens & Apple glass rules */
-@import "@thangnqdev/ui/styles.css";
-```
+### 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`.
 
-#### B. Tailwind CSS v3
-Trong `tailwind.config.js`:
-```javascript
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@thangnqdev/ui/dist/**/*.{js,cjs}',
-  ],
-  darkMode: 'class',
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
+### 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 Toàn Diện (Customization Guide)
-
-Thư viện được thiết kế để người dùng có thể **tùy biến 100%** theo phong cách thương hiệu riêng qua 4 tầng:
+## 🛠️ 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)
-Mặc định, thư viện sử dụng bảng màu **Apple Human Interface (`#0071e3` / `#000000`)**. 
-
-Khi người khác kéo package về dùng, nếu họ muốn **đổi sang màu thương hiệu riêng** (ví dụ Fintech Indigo, Neon Cyberpunk...), họ chỉ cần ghi đè các biến CSS trong file `src/index.css` của họ:
 
 ```css
-/* Ví dụ: Người dùng tùy biến đổi sang màu thương hiệu của riêng họ */
 :root {
-  /* 🔤 Đổi Font chữ chính & Font Monospace */
+  /* 🔤 Font chữ & Monospace */
   --ui-font-sans: 'Plus Jakarta Sans', 'Inter', sans-serif;
   --ui-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
 
-  /* 🎨 Đổi màu chủ đạo sang thương hiệu riêng (Ví dụ: Tím Indigo) */
+  /* 🎨 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;
 
-  /* 📐 Đổi độ bo góc */
+  /* 📐 Bo góc */
   --ui-radius-lg: 16px;
-
-  /* 📏 Phóng to/thu nhỏ toàn bộ tỷ lệ UI */
-  font-size: 16px;
 }
 
-/* Tùy chỉnh riêng cho Dark Mode của người dùng */
 .dark, [data-theme="dark"] {
   --ui-primary: #818cf8;
-  --ui-bg-page: #09090b;           /* Nền trang Dark Mode tùy chọn */
-  --ui-bg-secondary: #18181b;      /* Nền Card tùy chọn */
+  --ui-bg-page: #09090b;
+  --ui-bg-secondary: #18181b;
 }
 ```
 
-#### Bảng Biến CSS Tokens Chính:
-| CSS Variable | Mô tả | Mặc định Light | Mặc định Dark |
-|---|---|---|---|
-| `--ui-font-sans` | Font chữ chính | SF Pro Display, Inter | SF Pro Display, Inter |
-| `--ui-font-mono` | Font số & code | SF Mono, Consolas | SF Mono, Consolas |
-| `--ui-primary` | Màu chính (Primary) | `#0071e3` (Apple Blue) | `#2997ff` (Vision Blue) |
-| `--ui-accent` | Màu điểm nhấn (Accent) | `#af52de` (Apple Purple) | `#bf5af2` |
-| `--ui-success` | Màu thành công / Pin | `#34c759` (Apple Green) | `#30d158` |
-| `--ui-warning` | Màu cảnh báo | `#ff9500` (Apple Orange) | `#ffd60a` |
-| `--ui-error` | Màu lỗi | `#ff3b30` (Apple Red) | `#ff453a` |
-| `--ui-bg-page` | Màu nền trang | `#f5f5f7` | `#000000` |
-| `--ui-bg-surface` | Màu bề mặt kính mờ | `rgba(255,255,255,0.75)` | `rgba(30,30,34,0.72)` |
-| `--ui-radius-lg` | Bo góc tiêu chuẩn | `1.125rem` (18px) | `1.125rem` (18px) |
-
----
-
-### 2. Tùy Biến Từng Component qua Props
-Mọi component đều hỗ trợ đầy đủ các props để thay đổi kích cỡ, màu sắc, hiệu ứng:
-
-```tsx
-import { Button, GlassBadge, CircularProgress, GlassCard } from '@thangnqdev/ui';
-
-// Nút bấm kích thước lớn, kiểu trong suốt
-<Button variant="outline" size="lg" className="rounded-full">
-  Khám Phá Thêm
-</Button>
-
-// Thẻ kính mờ với viền phát sáng màu ngọc lam (Cyan Glow)
-<GlassCard intensity="acrylic" glow="cyan" radius="xl" padding="lg">
-  <h3>Card Content</h3>
-</GlassCard>
-
-// Vòng tiến trình màu vàng cảnh báo với hiệu ứng phát sáng
-<CircularProgress value={78} size={64} strokeWidth={6} variant="warning" glow />
-```
-
 ---
 
-### 3. Ghi Đè Trực Tiếp Bằng `className` (Không lo xung đột CSS)
-Tất cả component đều được xử lý qua hàm `cn()` (`clsx` + `tailwind-merge`). Class bạn truyền vào sẽ tự động ghi đè class mặc định:
-
-```tsx
-// Ghi đè cỡ chữ 2xl, font Serif, background gradient
-<Button className="text-2xl font-serif bg-gradient-to-r from-purple-500 to-pink-500 hover:opacity-90 shadow-2xl">
-  Custom Button
-</Button>
+## 🤖 Machine-Readable Contracts for AI Agents
 
-// Ghi đè bảng DataTablePro
-<DataTablePro className="border-2 border-purple-500/30 rounded-none font-mono" ... />
-```
+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.
 
 ---
 
-### 4. Quản Lý Theme & Chuyển Đổi Dark / Light Mode
-Sử dụng hook `useTheme()` để tạo nút chuyển đổi giao diện trong 1 dòng:
-
-```tsx
-import { ThemeProvider, useTheme, Button } from '@thangnqdev/ui';
+## 🧪 Quality Gates & Kiểm Thử
 
-function Header() {
-  const { theme, toggleTheme } = useTheme();
-
-  return (
-    <Button variant="outline" onClick={toggleTheme}>
-      {theme === 'dark' ? '☀️ Chuyển sang Light Mode' : '🌙 Chuyển sang Dark Mode'}
-    </Button>
-  );
-}
-
-export default function App() {
-  return (
-    <ThemeProvider defaultTheme="dark" storageKey="my-app-theme">
-      <Header />
-    </ThemeProvider>
-  );
-}
-```
-
----
+```bash
+# Kiểm tra strict TypeScript
+npm run typecheck
 
-### 5. Tích Hợp với React Hook Form & Zod
-Các component Form hỗ trợ cả **Controlled** và **Uncontrolled** mode:
+# Chạy toàn bộ 115+ test cases (A11y, Axe, Invariant, SSR, Controllable State)
+npm test
 
-```tsx
-import { useForm, Controller } from 'react-hook-form';
-import { DatePicker, Combobox, NumberInput, Switch, Button } from '@thangnqdev/ui';
+# Kiểm tra tính bất biến SSOT
+npm run test:ssot
 
-export function RegistrationForm() {
-  const { control, handleSubmit } = useForm({
-    defaultValues: {
-      birthDate: new Date(),
-      role: 'developer',
-      experienceYears: 5,
-      notifications: true,
-    },
-  });
+# Kiểm tra WAI-ARIA & Axe automated scans
+npm run test:a11y
 
-  const onSubmit = (data) => console.log('Form Submit:', data);
+# Kiểm tra Server-Side Rendering
+npm run test:ssr
 
-  return (
-    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4 max-w-md">
-      <Controller
-        name="birthDate"
-        control={control}
-        render={({ field }) => <DatePicker value={field.value} onChange={field.onChange} />}
-      />
-
-      <Controller
-        name="role"
-        control={control}
-        render={({ field }) => (
-          <Combobox
-            value={field.value}
-            onChange={field.onChange}
-            options={[
-              { value: 'developer', label: 'Software Engineer' },
-              { value: 'designer', label: 'UI/UX Designer' },
-            ]}
-          />
-        )}
-      />
-
-      <Controller
-        name="experienceYears"
-        control={control}
-        render={({ field }) => <NumberInput value={field.value} onChange={field.onChange} min={1} max={30} />}
-      />
-
-      <Button type="submit" variant="primary">Lưu Thay Đổi</Button>
-    </form>
-  );
-}
+# Quy trình Prepack Gate trước khi phát hành
+npm run prepack
 ```
 
 ---
 
-## 🚀 Danh Mục 48+ Components Chi Tiết
-
-### 1. Nhóm Form & Nhập Liệu Phức Tạp (`@thangnqdev/ui/forms`)
-* **`DatePicker` & `DateRangePicker`**: Lịch popover kính mờ, chọn ngày đơn lẻ hoặc khoảng ngày (Date Range).
-* **`TimePicker`**: Bộ chọn giờ/phút định dạng 24h & 12h.
-* **`Combobox` & `MultiSelect`**: Dropdown tìm kiếm gõ để lọc (search-as-you-type) & chọn nhiều tag.
-* **`FileUpload` & Dropzone**: Vùng kéo thả file với hiệu ứng bắt sáng và xem trước ảnh.
-* **`NumberInput` & `CurrencyInput`**: Input số tăng giảm `+ / -` và format tiền tệ tự động.
-* **`MaskedInput`**: Input định dạng số điện thoại `(###) ###-####`, thẻ tín dụng, CCCD.
-* **Cơ bản**: `FormField`, `Input`, `SearchInput`, `PasswordInput`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch`, `Slider`, `RangeSlider`, `PinInput`.
-
-### 2. Nhóm Xử Lý Dữ Liệu Lớn (`@thangnqdev/ui/data-display`)
-* **`DataTablePro`**: Bảng dữ liệu cấp doanh nghiệp với Live Search toàn bộ cột, Multi-Column Sort, Row Selection, Phân trang và Export CSV.
-* **`TreeView`**: Cây thư mục phân cấp chuẩn macOS Finder.
-* **`Carousel`**: Trình chiếu trượt ngang tự động chạy với hiệu ứng Apple Keynote.
-* **Cơ bản**: `Card`, `Table`, `Avatar`, `Accordion`, `Chip`, `StatCard`, `Timeline`.
-
-### 3. Nhóm Điều Hướng & Overlays (`@thangnqdev/ui/overlays` & `@thangnqdev/ui/navigation`)
-* **`BottomSheet`**: Tấm trượt đáy màn hình tối ưu cho Mobile.
-* **`ContextMenu`**: Menu chuột phải Desktop với phím tắt (`⌘C`, `⌘S`).
-* **`HoverCard`**: Card xem trước thông tin khi rê chuột.
-* **Cơ bản**: `Modal`, `AlertDialog`, `Drawer`, `Tooltip`, `Popover`, `Toast`, `Tabs`, `Breadcrumb`, `Pagination`, `Stepper`, `CommandPalette`.
-
-### 4. Nhóm Phản Hồi & Vật Liệu Apple (`@thangnqdev/ui/glass` & `@thangnqdev/ui/feedback`)
-* **`GlassCard` & `GlassButton`**: Kính mờ Acrylic 28px blur với 1px viền phản quang (Specular Hairline).
-* **`GlassBadge`**: Huy hiệu SF Pro capsule pill với đèn LED phát sáng xung nhịp.
-* **`CircularProgress`**: Vòng tiến trình Apple Watch Activity gradient rings.
-* **`ScrollArea`**: Thanh cuộn capsule tự ẩn chuẩn Apple.
-* **`BentoGrid` & `BentoCard`**: Lưới bento Apple Keynote editorial.
-
----
-
-## 🤖 AI Machine Context Manifests
-
-Thư viện tích hợp sẵn các manifest định dạng chuẩn AI coding assistants (Cursor, Antigravity, Claude Code):
-- `llms.txt`: Đặc tả đầy đủ token, API component và triết lý thiết kế.
-- `ui-contract.json`: Schema JSON nghiêm ngặt để sinh mã tự động không bị lệch kiểu.
-
----
-
 ## 📄 License
 MIT © 2026 AETHER Spatial UI

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';\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"]}
+{"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"]}

package/dist/bento/index.js

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