@e-burgos/tucu-ui 2.0.10 → 2.0.11

package/CHANGELOG.md

@@ -5,6 +5,96 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.0.11] - 2026-05-22
+
+### Added
+
+- **`ThemeBackground` Component**: New unified background component replacing `MacOSBackground`
+  - 10 background variants: `none`, `base`, `sonoma`, `radial`, `aurora`, `depth`, `demo`, `window`, `wave`, `wallpaper`, `mobile`
+  - CSS-class-driven variants with CDN-hosted SVG assets for `wave`, `wallpaper`, and `mobile`
+  - `getBackgroundUrl()` helper for direct SVG asset URLs
+- **`default-backgrounds.css`**: New CSS file with all background variant styles (276 lines)
+- **Clean Layout Variants**: Two new layout options for minimal content-only rendering
+  - `MacOSSonomaCleanLayout`: Sonoma with only background + content (no sidebar/toolbar)
+  - `MacOSTahoeCleanLayout`: Tahoe with only background + content (no sidebar/toolbar)
+  - New `LAYOUT_OPTIONS.MACOS_CLEAN` and `LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN` enum values
+- **BackgroundPicker**: New unified Settings panel section available across all three themes
+  - 11-option grid (None, Base, Sonoma, Radial, Wave, Wallpaper, Mobile, Window, Aurora, Depth, Demo)
+  - Replaces previous Tahoe-only `TahoeBackgroundPicker`
+- **Settings Drawer — Visual Color Editor**:
+  - `ColorSwatchModal`: Full-featured color picker with preset grid, native color input, opacity slider, and mode switcher
+  - `ColorDot`: Compact swatch trigger replacing the old Select-based ColorSwitcher
+  - Replaces old `Select`-based `ColorSwitcher` with a more compact, visual interface
+- **Extended Color Presets**: 12 new preset categories in theme store
+  - `successPreset` / `darkSuccessPreset`, `warningPreset` / `darkWarningPreset`
+  - `errorPreset` / `darkErrorPreset`, `infoPreset` / `darkInfoPreset`
+  - `fgPreset` / `darkFgPreset`, `borderPreset` / `darkBorderPreset`
+- **`useThemeColor` expanded**: Now applies status colors, foreground, and border to DOM via `setProperty()`
+- **`ThemeWrapper` expanded**: Supports all 24 color palette slots + new `background` prop
+- **`BackgroundVariant` type** exported from `use-theme.tsx` (11 options)
+- **Backgrounds Documentation**: New `BackgroundsSection` demo page with interactive previews and props table
+- **Layout Switcher for Sonoma**: Now shows macOS + Clean options (previously hidden)
+- **Layout Switcher for Tahoe**: Expanded to 3 columns (Sidebar, Dock, Clean)
+- **ListContainer `closeDelay` prop**: Configurable delay before closing dropdown on mouse leave
+
+### Changed
+
+- **Renamed**: `MacOSBackground` → `ThemeBackground`, `getMacOSBackgroundUrl` → `getBackgroundUrl`
+- **`backgroundVariant` store default**: Changed from `'base'` to `'radial'`
+- **`restoreDefaultColors`**: Now theme-aware — resets to different defaults per `colorScheme`:
+  - `'macos-tahoe'`: Glass Neutral bundle + radial background
+  - `'macos'`: Sonoma presets + sonoma background
+  - `'default'`: Default presets + no background
+- **`applyMacOSTheme`**: Now also sets `backgroundVariant: 'sonoma'`
+- **`applyMacOSTahoeTheme`**: Now also sets `backgroundVariant: 'radial'`
+- **`applyDefaultTheme`**: Now also sets `backgroundVariant: 'none'`
+- **`applyThemeStyle`**: Sets appropriate background variant per theme style
+- **Settings Drawer structure**: All themes share `DefaultColorSettings` + `BackgroundPicker` sections
+- **`settings-button.tsx`**: Now reads all 24 color slots for theme detection
+- **`THEME_STYLE_LAYOUTS`**: Added `MACOS_CLEAN` and `MACOS_TAHOE_CLEAN` to valid layouts
+- **`ListContainer` Rewrite**: Replaced CSS-relative positioning with fixed positioning strategy (same as `Select`)
+  - Uses `getBoundingClientRect()` for viewport-relative dropdown placement
+  - Supports `position`, `align`, drop-up detection, and overflow prevention
+  - Hover trigger uses configurable `closeDelay` with timer-based open/close
+- **`HorizontalNavMenu`**: Migrated text color classes from `text-gray-600 dark:text-gray-300` → `text-foreground/60`; dropdown gets `z-50` and `border-border`
+- **`HorizontalHeader`**: Added `min-w-0` and `overflow-visible` for proper dropdown rendering; border uses `border-border` token
+- **Root Layout (`LayoutType`)**: All layout variants wrapped in `<ThemeBackground>` for unified background rendering
+- **Demo pages**: Migrated all border classes from `border-gray-200 dark:border-gray-700` → `border-border`
+  - Updated: MacOSBackgroundsSection, MacOSColorsSection, MacOSMaterialsSection, MacOSTextStylesSection, TahoeLayoutContentSection, TahoeLayoutSidebarSection, TahoeToolbarSection, BackgroundUtilities, Colors, EffectsUtilities, FiltersUtilities, TablesUtilities, TypographyUtilities, AccessibilityUtilities
+- **Input Components**: Migrated border classes to use `border-border` token
+  - Updated: Checkbox, FileInput, Input, PinCode, Radio, Select, Switch, Textarea, InputSearcher
+
+### Fixed
+
+- **Horizontal Nav Dropdown Clipping**: Fixed dropdowns not showing on hover in Default theme horizontal layout
+  - Root cause: `overflow-hidden` on parent containers clipped absolutely-positioned dropdowns
+  - Solution: Changed to `overflow-visible` on nav container and added `min-w-0` for flex children
+- **ListContainer Dropdown Clipping**: Fixed dropdown cut off by parent overflow containers
+  - Rewrote to use `position: fixed` + `getBoundingClientRect()` (same strategy as Select)
+  - Dropdown no longer depends on parent overflow/z-index context
+- **ListContainer Initial Render Position**: Fixed dropdown briefly appearing in wrong position before hover
+  - When closed, dropdown uses `visibility: hidden` + `pointer-events: none` inline style
+- **ListContainer Close Animation**: Fixed strange "fly away" animation when dropdown closes
+  - Changed from `transition-all` to `transition-opacity` to prevent position properties from animating
+- **Border Color Settings**: Fixed `--color-border` not updating when changing the Border color in the Settings panel
+  - `--color-border` now references `--color-semantic-line-primary-subtle` (with `color-mix()` fallback) instead of a hardcoded formula
+  - The `useThemeColor` hook correctly updates `--color-semantic-line-primary-subtle` which propagates to `border-border` Tailwind class
+- **Sonoma Circular CSS Reference**: Fixed `--macos-separator` ↔ `--color-border` ↔ `--color-semantic-line-primary-subtle` circular dependency
+  - Inverted dependency: `--color-semantic-line-primary-subtle` now holds the concrete value, `--macos-separator` derives from it
+  - All three themes (Default, Sonoma, Tahoe) use consistent `color-mix()` formulas for borders
+- **Restore Theme Border Presets**: Fixed "Restore Theme" button not resetting border colors
+  - Added `borderPreset` and `darkBorderPreset` to `buildSonomaPresets()` and `buildTahoePresets()`
+  - Default border preset values now use `color-mix(in oklab, var(--color-black) 10%, transparent)` (light) and `color-mix(in oklab, var(--color-white) 8%, transparent)` (dark)
+- **InfoCard Key Warning**: Fixed React "Each child in a list should have a unique key prop" warning in footer tags rendering
+- **Tahoe section border typo**: Fixed `border-borderrounded-2xl` → `border-border rounded-2xl` in MacOSTahoeSection
+
+### Removed
+
+- **`MacOSBackground`**: Replaced by unified `ThemeBackground` component
+- **`getMacOSBackgroundUrl`**: Replaced by `getBackgroundUrl`
+- **`TahoeBackgroundPicker`**: Replaced by shared `BackgroundPicker` available in all themes
+- **`ColorSwitcher` (old Select-based)**: Replaced by `ColorDot` + `ColorSwatchModal`
+
 ## [2.0.10] - 2026-05-22
 
 ### Added

package/components/list/list-container.d.ts

@@ -12,6 +12,8 @@ export interface ListContainerProps {
     onOpenChange?: (isOpen: boolean) => void;
     keepOpen?: boolean;
     trigger?: 'hover' | 'click';
+    /** Delay in ms before closing on mouse leave (default: 1000) */
+    closeDelay?: number;
 }
 export declare const ListContainer: React.FC<ListContainerProps>;
 export default ListContainer;

package/documentation/{APIReferenceSection-DNiwamR3.js → APIReferenceSection-D-0yFcGB.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as c, T as r, C as a, a as n, y as s, K as l } from "../index-19KsCnyX.js";
+import { H as c, T as r, C as a, a as n, y as s, K as l } from "../index-4GONhZIF.js";
 import { BookOpen as u } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{APIReferenceSection-CD5kel2M.js → APIReferenceSection-atXRbZ3K.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),p=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const i=[{key:"prop",label:"Property",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"required",label:"Required",render:r=>{const a=String(r);return e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:a==="Yes"?"Yes":"Optional"})}},{key:"description",label:"Description"}],o=[{prop:"name",type:"string",required:"Yes",description:"Display name for navigation menu"},{prop:"path",type:"string",required:"Yes",description:"URL path for the route"},{prop:"component",type:"React.JSX.Element",required:"Yes",description:"Component to render for this route"},{prop:"icon",type:"React.ReactNode",required:"Optional",description:"Icon to display in navigation"},{prop:"dropdownItems",type:"StandaloneAppRoutesMenuItem[]",required:"Optional",description:"Array of nested sub-routes (recursive)"},{prop:"enableNestedRoutes",type:"boolean",required:"Optional",description:"Adds /* to path for nested routing within the component"},{prop:"isPublic",type:"boolean",required:"Optional",description:"Whether the route is publicly accessible"},{prop:"hide",type:"boolean",required:"Optional",description:"Hide route from navigation menu"},{prop:"href",type:"string",required:"Optional",description:"External URL (opens in new tab)"},{prop:"isActive",type:"boolean",required:"Optional",description:"Force active state in navigation"},{prop:"onClick",type:"() => void",required:"Optional",description:"Custom click handler for the menu item"}],s=[{prop:"key",type:"string",required:"Yes",description:"Unique identifier for the route"},{prop:"path",type:"string",required:"Yes",description:"URL path (inherited from RouteProps)"},{prop:"element",type:"React.ReactNode",required:"Yes",description:"Component to render (inherited from RouteProps)"},{prop:"isPublic",type:"boolean",required:"Optional",description:"If true, accessible without authentication (default: false)"},{prop:"disabled",type:"boolean",required:"Optional",description:"Temporarily disable this route"}],n=[{prop:"architecturalPatterns",type:"'mfe'",required:"Yes",description:"Activates MFE mode"},{prop:"basePath",type:"string",required:"Yes",description:"Base path for the micro frontend (e.g., /my-app)"},{prop:"appRoutesConfig",type:"IAppRouteConfig[]",required:"Yes",description:"Array of route configurations"},{prop:"isAuthenticated",type:"boolean",required:"Yes",description:"Whether the user is authenticated"},{prop:"loginUrl",type:"string",required:"Yes",description:"Redirect URL for unauthenticated users"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"API Reference",description:"Complete API reference for all routing system interfaces and their properties.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(p.BookOpen,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"StandaloneAppRoutesMenuItem"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for standalone route definitions"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"IAppRouteConfig (MFE)"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for MFE route configurations (extends RouteProps)"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:s})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"MFE ThemeProvider Props"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:'Required props when using architecturalPatterns="mfe"'})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"MFE-Specific Props",children:e.jsx(t.BasicTable,{columns:i,data:n})})})]})]})};exports.default=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-C0NugKZs.js"),p=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=()=>{const i=[{key:"prop",label:"Property",render:r=>e.jsx("code",{className:"text-xs text-brand",children:String(r)})},{key:"type",label:"Type",render:r=>e.jsx("code",{className:"text-xs",children:String(r)})},{key:"required",label:"Required",render:r=>{const a=String(r);return e.jsx(t.Badge,{variant:"outline",className:"text-xs",children:a==="Yes"?"Yes":"Optional"})}},{key:"description",label:"Description"}],o=[{prop:"name",type:"string",required:"Yes",description:"Display name for navigation menu"},{prop:"path",type:"string",required:"Yes",description:"URL path for the route"},{prop:"component",type:"React.JSX.Element",required:"Yes",description:"Component to render for this route"},{prop:"icon",type:"React.ReactNode",required:"Optional",description:"Icon to display in navigation"},{prop:"dropdownItems",type:"StandaloneAppRoutesMenuItem[]",required:"Optional",description:"Array of nested sub-routes (recursive)"},{prop:"enableNestedRoutes",type:"boolean",required:"Optional",description:"Adds /* to path for nested routing within the component"},{prop:"isPublic",type:"boolean",required:"Optional",description:"Whether the route is publicly accessible"},{prop:"hide",type:"boolean",required:"Optional",description:"Hide route from navigation menu"},{prop:"href",type:"string",required:"Optional",description:"External URL (opens in new tab)"},{prop:"isActive",type:"boolean",required:"Optional",description:"Force active state in navigation"},{prop:"onClick",type:"() => void",required:"Optional",description:"Custom click handler for the menu item"}],s=[{prop:"key",type:"string",required:"Yes",description:"Unique identifier for the route"},{prop:"path",type:"string",required:"Yes",description:"URL path (inherited from RouteProps)"},{prop:"element",type:"React.ReactNode",required:"Yes",description:"Component to render (inherited from RouteProps)"},{prop:"isPublic",type:"boolean",required:"Optional",description:"If true, accessible without authentication (default: false)"},{prop:"disabled",type:"boolean",required:"Optional",description:"Temporarily disable this route"}],n=[{prop:"architecturalPatterns",type:"'mfe'",required:"Yes",description:"Activates MFE mode"},{prop:"basePath",type:"string",required:"Yes",description:"Base path for the micro frontend (e.g., /my-app)"},{prop:"appRoutesConfig",type:"IAppRouteConfig[]",required:"Yes",description:"Array of route configurations"},{prop:"isAuthenticated",type:"boolean",required:"Yes",description:"Whether the user is authenticated"},{prop:"loginUrl",type:"string",required:"Yes",description:"Redirect URL for unauthenticated users"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"API Reference",description:"Complete API reference for all routing system interfaces and their properties.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-gray-500 via-slate-500 to-zinc-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(p.BookOpen,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"StandaloneAppRoutesMenuItem"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for standalone route definitions"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:o})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"IAppRouteConfig (MFE)"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Properties for MFE route configurations (extends RouteProps)"})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Properties",children:e.jsx(t.BasicTable,{columns:i,data:s})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"MFE ThemeProvider Props"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:'Required props when using architecturalPatterns="mfe"'})]}),e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"MFE-Specific Props",children:e.jsx(t.BasicTable,{columns:i,data:n})})})]})]})};exports.default=d;

package/documentation/{ActiveLinkSection-CLeqqRJA.js → ActiveLinkSection-DfDLkxts.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"ActiveLink",description:`A link component that automatically applies an active class when the
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"ActiveLink",description:`A link component that automatically applies an active class when the
           current path matches the link path.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-cyan-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Link,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Active Link"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(t.ActiveLink,{to:"/components",path:"/components",children:"Components"}),e.jsx(t.ActiveLink,{to:"/about",path:"/about",children:"About"})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Custom Active Class"}),e.jsx(t.ActiveLink,{to:"/home",path:"/home",activeClassName:"text-brand font-bold",children:"Home"})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"ActiveLink",defaultValues:{path:"/demo",activeClassName:"active"},excludeProps:["state","to"],children:i=>e.jsx(t.ActiveLink,{...i,to:"#",children:"Active Link Example"})}),e.jsx(t.AutoPropsTable,{componentName:"ActiveLink"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ActiveLink } from '@e-burgos/tucu-ui';
 
 // Basic usage

package/documentation/{ActiveLinkSection-nW2qUEkC.js → ActiveLinkSection-DzIK-w3U.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { H as l, C as a, a as o, T as c, a8 as i, P as m, A as r, c as h } from "../index-19KsCnyX.js";
+import { H as l, C as a, a as o, T as c, a8 as i, P as m, A as r, c as h } from "../index-4GONhZIF.js";
 import { Link as d } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AdvancedColorSystemSection-ClZP9L76.js → AdvancedColorSystemSection-Bf729JeV.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=[{layer:"Primary",description:"Primary brand identity color",variable:"--color-semantic-bg-primary",default:"#0052ff (DEFAULT_PRIMARY)"},{layer:"Dark Primary",description:"Primary color for dark mode",variable:"--color-semantic-dark-bg-primary",default:"#578bfa (DEFAULT_DARK_PRIMARY)"},{layer:"Secondary",description:"Supporting color for accents",variable:"--color-semantic-bg-secondary",default:"#f3f4f6 (DEFAULT_SECONDARY)"},{layer:"Dark Secondary",description:"Secondary color for dark mode",variable:"--color-semantic-dark-bg-secondary",default:"#172131 (DEFAULT_DARK_SECONDARY)"},{layer:"Accent",description:"Highlight color for actions",variable:"--color-semantic-accent-bold-yellow",default:"#f7d21a (DEFAULT_ACCENT)"},{layer:"Dark Accent",description:"Accent color for dark mode",variable:"--color-semantic-dark-accent-bold-yellow",default:"#936000 (DEFAULT_DARK_ACCENT)"},{layer:"Muted",description:"Muted text color",variable:"--color-semantic-fg-muted",default:"#4a5565 (DEFAULT_MUTED)"},{layer:"Dark Muted",description:"Muted text color for dark mode",variable:"--color-semantic-dark-fg-muted",default:"#828a99 (DEFAULT_DARK_MUTED)"},{layer:"Dark Background",description:"Dark theme base color",variable:"--color-semantic-dark-bg",default:"#030712 (DEFAULT_DARK_BG)"},{layer:"Light Background",description:"Light theme base color",variable:"--color-semantic-bg",default:"#ffffff (DEFAULT_LIGHT_BG)"},{layer:"Light Dark",description:"Light theme secondary background",variable:"--color-semantic-bg-secondary-wash",default:"#f9fafb (DEFAULT_LIGHT_DARK)"},{layer:"Dark Light Dark",description:"Dark theme secondary background",variable:"--color-semantic-dark-bg-secondary-wash",default:"#0a101d (DEFAULT_DARK_LIGHT_DARK)"}],i=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Color System",description:"Multi-layered color architecture with 12 semantic variables controlling every surface and foreground in your application.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Color Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"12 semantic color variables organized in light/dark pairs"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"All Color Variables",children:e.jsx("div",{className:"space-y-3",children:c.map((r,t)=>e.jsxs("div",{className:"p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm",children:r.layer}),e.jsx(a.Typography,{tag:"code",className:"text-xs text-gray-500 dark:text-gray-400",children:r.variable})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-1",children:r.description}),e.jsxs(a.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-500",children:["Default: ",r.default]})]},t))})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"CSS Variable Mapping"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How design tokens map to Tailwind utilities"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Variable → Utility Mapping",children:e.jsx(a.CodeBlock,{language:"css",expanded:!1,code:`/* Theme colors are available via CSS variables */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=[{layer:"Primary",description:"Primary brand identity color",variable:"--color-semantic-bg-primary",default:"#0052ff (DEFAULT_PRIMARY)"},{layer:"Dark Primary",description:"Primary color for dark mode",variable:"--color-semantic-dark-bg-primary",default:"#578bfa (DEFAULT_DARK_PRIMARY)"},{layer:"Secondary",description:"Supporting color for accents",variable:"--color-semantic-bg-secondary",default:"#f3f4f6 (DEFAULT_SECONDARY)"},{layer:"Dark Secondary",description:"Secondary color for dark mode",variable:"--color-semantic-dark-bg-secondary",default:"#172131 (DEFAULT_DARK_SECONDARY)"},{layer:"Accent",description:"Highlight color for actions",variable:"--color-semantic-accent-bold-yellow",default:"#f7d21a (DEFAULT_ACCENT)"},{layer:"Dark Accent",description:"Accent color for dark mode",variable:"--color-semantic-dark-accent-bold-yellow",default:"#936000 (DEFAULT_DARK_ACCENT)"},{layer:"Muted",description:"Muted text color",variable:"--color-semantic-fg-muted",default:"#4a5565 (DEFAULT_MUTED)"},{layer:"Dark Muted",description:"Muted text color for dark mode",variable:"--color-semantic-dark-fg-muted",default:"#828a99 (DEFAULT_DARK_MUTED)"},{layer:"Dark Background",description:"Dark theme base color",variable:"--color-semantic-dark-bg",default:"#030712 (DEFAULT_DARK_BG)"},{layer:"Light Background",description:"Light theme base color",variable:"--color-semantic-bg",default:"#ffffff (DEFAULT_LIGHT_BG)"},{layer:"Light Dark",description:"Light theme secondary background",variable:"--color-semantic-bg-secondary-wash",default:"#f9fafb (DEFAULT_LIGHT_DARK)"},{layer:"Dark Light Dark",description:"Dark theme secondary background",variable:"--color-semantic-dark-bg-secondary-wash",default:"#0a101d (DEFAULT_DARK_LIGHT_DARK)"}],i=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Color System",description:"Multi-layered color architecture with 12 semantic variables controlling every surface and foreground in your application.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Color Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"12 semantic color variables organized in light/dark pairs"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"All Color Variables",children:e.jsx("div",{className:"space-y-3",children:c.map((r,t)=>e.jsxs("div",{className:"p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm",children:r.layer}),e.jsx(a.Typography,{tag:"code",className:"text-xs text-gray-500 dark:text-gray-400",children:r.variable})]}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-1",children:r.description}),e.jsxs(a.Typography,{tag:"p",className:"text-xs text-gray-500 dark:text-gray-500",children:["Default: ",r.default]})]},t))})})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"CSS Variable Mapping"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How design tokens map to Tailwind utilities"})]}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Variable → Utility Mapping",children:e.jsx(a.CodeBlock,{language:"css",expanded:!1,code:`/* Theme colors are available via CSS variables */
 --color-semantic-bg-primary: var(--color-tucu-ui-blue-60);
 --color-semantic-dark-bg-primary: var(--color-tucu-ui-dark-blue-70);
 --color-semantic-bg-secondary: var(--color-tucu-ui-gray-10);

package/documentation/{AdvancedColorSystemSection-CcXCp_R4.js → AdvancedColorSystemSection-BhT4nZB1.js}

@@ -1,5 +1,5 @@
 import { jsxs as e, Fragment as i, jsx as a } from "react/jsx-runtime";
-import { H as d, T as r, C as o, a as c, c as s } from "../index-19KsCnyX.js";
+import { H as d, T as r, C as o, a as c, c as s } from "../index-4GONhZIF.js";
 import { Layers as n } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AdvancedFeaturesSection-DeodzomR.js → AdvancedFeaturesSection-BFMW48vw.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const i=[{title:"Conditional Fields",description:"Show/hide fields based on other values using watch(). Validation adapts dynamically when fields appear or disappear.",icon:e.jsx(o.GitBranch,{className:"w-6 h-6"})},{title:"Custom Validation",description:"Use the validate option for async server-side checks, cross-field validation, or complex business rules.",icon:e.jsx(o.Zap,{className:"w-6 h-6"})},{title:"Form State Access",description:"Real-time access to isDirty, isValid, errors, touchedFields via useFormContext from any child component.",icon:e.jsx(o.Eye,{className:"w-6 h-6"})},{title:"Programmatic Control",description:"Set values, trigger validation, reset forms, and clear errors programmatically from anywhere in the tree.",icon:e.jsx(o.Settings,{className:"w-6 h-6"})},{title:"Validation Modes",description:"Choose when validation triggers: onChange (real-time), onBlur (on field exit), onSubmit (only on submit), or all.",icon:e.jsx(o.Clock,{className:"w-6 h-6"})},{title:"Error Customization",description:"FormField auto-displays errors, but you can hide them with hideError and render custom error UI using formState.errors.",icon:e.jsx(o.AlertTriangle,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Features",description:"Patterns for complex form scenarios: conditional fields, async validation, programmatic control, and custom error handling — all powered by react-hook-form via tucu-ui.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Capabilities"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Advanced patterns available through the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map((s,r)=>e.jsx(a.FeatureCard,{title:s.title,description:s.description,icon:s.icon},r))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Conditional Fields Example"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Show/hide fields based on form values using watch + useFormContext"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Select, useFormContext } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const i=[{title:"Conditional Fields",description:"Show/hide fields based on other values using watch(). Validation adapts dynamically when fields appear or disappear.",icon:e.jsx(o.GitBranch,{className:"w-6 h-6"})},{title:"Custom Validation",description:"Use the validate option for async server-side checks, cross-field validation, or complex business rules.",icon:e.jsx(o.Zap,{className:"w-6 h-6"})},{title:"Form State Access",description:"Real-time access to isDirty, isValid, errors, touchedFields via useFormContext from any child component.",icon:e.jsx(o.Eye,{className:"w-6 h-6"})},{title:"Programmatic Control",description:"Set values, trigger validation, reset forms, and clear errors programmatically from anywhere in the tree.",icon:e.jsx(o.Settings,{className:"w-6 h-6"})},{title:"Validation Modes",description:"Choose when validation triggers: onChange (real-time), onBlur (on field exit), onSubmit (only on submit), or all.",icon:e.jsx(o.Clock,{className:"w-6 h-6"})},{title:"Error Customization",description:"FormField auto-displays errors, but you can hide them with hideError and render custom error UI using formState.errors.",icon:e.jsx(o.AlertTriangle,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Advanced Features",description:"Patterns for complex form scenarios: conditional fields, async validation, programmatic control, and custom error handling — all powered by react-hook-form via tucu-ui.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Capabilities"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Advanced patterns available through the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:i.map((s,r)=>e.jsx(a.FeatureCard,{title:s.title,description:s.description,icon:s.icon},r))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Conditional Fields Example"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Show/hide fields based on form values using watch + useFormContext"})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Form, FormField, Input, Select, useFormContext } from '@e-burgos/tucu-ui';
 
 function ConditionalForm() {
   return (

package/documentation/{AdvancedFeaturesSection-dp4NWt73.js → AdvancedFeaturesSection-BKGD3z9z.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { H as s, T as o, ax as n, C as l, c as d } from "../index-19KsCnyX.js";
+import { H as s, T as o, ax as n, C as l, c as d } from "../index-4GONhZIF.js";
 import { Sparkles as m, GitBranch as c, Zap as h, Eye as u, Settings as p, Clock as g, AlertTriangle as y } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AdvancedFeaturesSection-DTklgMJa.js → AdvancedFeaturesSection-ChbswzIX.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>{const o=[{icon:e.jsx(t.Globe,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"RTL/LTR Support",description:"Full right-to-left language support with automatic layout mirroring via the useDirection hook.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(t.Save,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Persistent Settings",description:"Automatic localStorage integration using Zustand persist middleware (key: theme-storage).",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Route,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Custom Routes",description:"Advanced routing via customRoutes prop or setCurrentPathname for dynamic navigation.",iconBgClassName:"from-orange-500 to-red-500"},{icon:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Theme Styles",description:"Switch between default, macOS Sonoma, and macOS Tahoe visual styles at runtime.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(t.LayoutGrid,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Layout Constraints",description:"THEME_STYLE_LAYOUTS enforces valid layout combinations per theme style automatically.",iconBgClassName:"from-cyan-500 to-teal-500"},{icon:e.jsx(t.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Scheme Presets",description:"The colorScheme state exposes the active palette for conditional styling logic.",iconBgClassName:"from-pink-500 to-rose-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Advanced Features",description:"Powerful capabilities for complex theming scenarios — from RTL support to constrained layout systems.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Feature Overview"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Additional theme system capabilities beyond basic configuration"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map(i=>e.jsx(s.FeatureCard,{layout:"vertical",...i},i.title))})]})]})};exports.default=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>{const o=[{icon:e.jsx(t.Globe,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"RTL/LTR Support",description:"Full right-to-left language support with automatic layout mirroring via the useDirection hook.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(t.Save,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Persistent Settings",description:"Automatic localStorage integration using Zustand persist middleware (key: theme-storage).",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Route,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Custom Routes",description:"Advanced routing via customRoutes prop or setCurrentPathname for dynamic navigation.",iconBgClassName:"from-orange-500 to-red-500"},{icon:e.jsx(t.Monitor,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Theme Styles",description:"Switch between default, macOS Sonoma, and macOS Tahoe visual styles at runtime.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(t.LayoutGrid,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Layout Constraints",description:"THEME_STYLE_LAYOUTS enforces valid layout combinations per theme style automatically.",iconBgClassName:"from-cyan-500 to-teal-500"},{icon:e.jsx(t.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Scheme Presets",description:"The colorScheme state exposes the active palette for conditional styling logic.",iconBgClassName:"from-pink-500 to-rose-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Advanced Features",description:"Powerful capabilities for complex theming scenarios — from RTL support to constrained layout systems.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Feature Overview"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Additional theme system capabilities beyond basic configuration"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:o.map(i=>e.jsx(s.FeatureCard,{layout:"vertical",...i},i.title))})]})]})};exports.default=a;

package/documentation/{AdvancedFeaturesSection-DZsIzQM1.js → AdvancedFeaturesSection-Dz1_1lrC.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { H as s, T as a, ax as r } from "../index-19KsCnyX.js";
+import { H as s, T as a, ax as r } from "../index-4GONhZIF.js";
 import { Sparkles as l, Globe as m, Save as n, Route as c, Monitor as d, LayoutGrid as h, Palette as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AlertSection-C8JxRieS.js → AlertSection-PCql-dTz.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { H as c, C as r, a as l, T as s, aj as i, P as m, A as o, c as d } from "../index-19KsCnyX.js";
+import { H as c, C as r, a as l, T as s, aj as i, P as m, A as o, c as d } from "../index-4GONhZIF.js";
 import { AlertCircle as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AlertSection-CqhX5i16.js → AlertSection-cU2Ed_fE.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Alert",description:`An alert component for displaying important messages and notifications
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Alert",description:`An alert component for displaying important messages and notifications
           with different variants and dismissible functionality.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-red-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.AlertCircle,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Info Alert"}),e.jsx(s.Alert,{variant:"info",children:e.jsx(s.Typography,{tag:"p",children:"This is an informational message."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Success Alert"}),e.jsx(s.Alert,{variant:"success",children:e.jsx(s.Typography,{tag:"p",children:"Operation completed successfully!"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Warning Alert"}),e.jsx(s.Alert,{variant:"warning",children:e.jsx(s.Typography,{tag:"p",children:"Please review this information carefully."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Error Alert"}),e.jsx(s.Alert,{variant:"error",children:e.jsx(s.Typography,{tag:"p",children:"An error occurred. Please try again."})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Dismissible Alert"}),e.jsx(s.Alert,{variant:"info",dismissible:!0,children:e.jsx(s.Typography,{tag:"p",children:"This alert can be dismissed."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom onDismiss"}),e.jsx(s.Alert,{variant:"success",onDismiss:()=>console.log("Alert dismissed"),children:e.jsx(s.Typography,{tag:"p",children:"This alert has a custom dismiss handler."})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"Alert",defaultValues:{variant:"info",dismissible:!0},excludeProps:["onDismiss","aria-label"],children:r=>e.jsx(s.Alert,{...r,children:"This is an alert message for the playground preview."})}),e.jsx(s.AutoPropsTable,{componentName:"Alert"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Alert, Typography } from '@e-burgos/tucu-ui';
 
 // Basic usage

package/documentation/{AnchorLinkSection-DMdLIqCp.js → AnchorLinkSection-Cs8t_LkK.js}

@@ -1,5 +1,5 @@
 import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
-import { H as i, C as a, a as t, T as r, a9 as o, aa as c, P as m, A as d, c as h } from "../index-19KsCnyX.js";
+import { H as i, C as a, a as t, T as r, a9 as o, aa as c, P as m, A as d, c as h } from "../index-4GONhZIF.js";
 import { ExternalLink as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AnchorLinkSection-Cnh7qsTW.js → AnchorLinkSection-DA-Q9PB2.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(n.HeroCard,{title:"AnchorLink",description:`A smart link component that automatically handles both internal routes
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../index-C0NugKZs.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=()=>e.jsxs(e.Fragment,{children:[e.jsx(n.HeroCard,{title:"AnchorLink",description:`A smart link component that automatically handles both internal routes
           and external URLs.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ExternalLink,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"Internal Link"}),e.jsx(n.AnchorLink,{to:"/components",children:"Go to Components"})]}),e.jsxs(n.CardContainer,{className:"p-4",children:[e.jsx(n.Typography,{tag:"h5",className:"mb-3",children:"External Link"}),e.jsx(n.AnchorLink,{to:n.GITHUB_URL,target:"_blank",children:"External Link"})]})]})})})}),e.jsx(n.PropPlayground,{componentName:"AnchorLink",defaultValues:{},excludeProps:["state","to"],children:r=>e.jsx(n.AnchorLink,{...r,to:"#",children:"Anchor Link Example"})}),e.jsx(n.AutoPropsTable,{componentName:"AnchorLink"}),e.jsx(n.CardContainer,{className:"overflow-hidden",children:e.jsx(n.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(n.CodeBlock,{language:"tsx",code:`import { AnchorLink } from '@e-burgos/tucu-ui';
 
 // Internal link (uses React Router Link)

package/documentation/{ArchitecturalPatternsComparisonSection-vYbHlGY-.js → ArchitecturalPatternsComparisonSection-Ckw-hj50.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as l, jsx as e } from "react/jsx-runtime";
-import { H as d, T as a, C as r, y as c, aj as m, a as n, c as s } from "../index-19KsCnyX.js";
+import { H as d, T as a, C as r, y as c, aj as m, a as n, c as s } from "../index-4GONhZIF.js";
 import { GitCompare as p, Lightbulb as u, ArrowRight as i } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{ArchitecturalPatternsComparisonSection-Bgp9PUt7.js → ArchitecturalPatternsComparisonSection-l5Wrr7He.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const s=[{key:"feature",label:"Feature",render:i=>e.jsx(t.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone"},{key:"mfe",label:"MFE"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic)",mfe:"appRoutesConfig (explicit)"},{feature:"Base Path",standalone:"Not required (root /)",mfe:"Required (e.g., /my-app)"},{feature:"Authentication",standalone:"Basic via isPublic",mfe:"isAuthenticated + loginUrl (required)"},{feature:"Nested Routes",standalone:"dropdownItems + enableNestedRoutes",mfe:"Via nested route config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Route Disabling",standalone:"Not supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent per app"},{feature:"Use Case",standalone:"Traditional SPAs",mfe:"Distributed architectures"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Architectural Patterns",description:"Compare Standalone and MFE patterns to choose the right architecture. Both use the same ThemeProvider with TypeScript-enforced discriminated unions.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.GitCompare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Feature Comparison"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Side-by-side comparison of routing capabilities"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"p-4",children:e.jsx(t.BasicTable,{columns:s,data:r})})}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.Lightbulb,{className:"w-4 h-4 inline mr-2"}),"Both patterns use TypeScript discriminated unions. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Pattern Selection"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Choose the right architecture for your project"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Standalone App",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-C0NugKZs.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const s=[{key:"feature",label:"Feature",render:i=>e.jsx(t.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone"},{key:"mfe",label:"MFE"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic)",mfe:"appRoutesConfig (explicit)"},{feature:"Base Path",standalone:"Not required (root /)",mfe:"Required (e.g., /my-app)"},{feature:"Authentication",standalone:"Basic via isPublic",mfe:"isAuthenticated + loginUrl (required)"},{feature:"Nested Routes",standalone:"dropdownItems + enableNestedRoutes",mfe:"Via nested route config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Route Disabling",standalone:"Not supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent per app"},{feature:"Use Case",standalone:"Traditional SPAs",mfe:"Distributed architectures"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Architectural Patterns",description:"Compare Standalone and MFE patterns to choose the right architecture. Both use the same ThemeProvider with TypeScript-enforced discriminated unions.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.GitCompare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Feature Comparison"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Side-by-side comparison of routing capabilities"})]}),e.jsx(t.CardContainer,{children:e.jsx("div",{className:"p-4",children:e.jsx(t.BasicTable,{columns:s,data:r})})}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx(a.Lightbulb,{className:"w-4 h-4 inline mr-2"}),"Both patterns use TypeScript discriminated unions. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-border rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Pattern Selection"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Choose the right architecture for your project"})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Standalone App",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { ThemeProvider } from '@e-burgos/tucu-ui';
 
 // Use Standalone when:
 // ✅ Building a traditional SPA

package/documentation/{ArchitectureOverviewSection-D_RmIFCA.js → ArchitectureOverviewSection-2GHOBuT3.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as r, ax as o, C as l, K as s } from "../index-19KsCnyX.js";
+import { H as m, T as r, ax as o, C as l, K as s } from "../index-4GONhZIF.js";
 import { Layers as i, Box as c, GitBranch as h, AlertCircle as p, TextCursorInput as g, Link as x, Eye as u, Activity as f, RotateCcw as y, Info as N, Shield as v, Zap as w } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{ArchitectureOverviewSection-Cw1LKmfg.js → ArchitectureOverviewSection-BXXzg8Af.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const t=[{title:"Form Container",description:"Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",icon:e.jsx(s.Box,{className:"w-6 h-6"})},{title:"FormField Wrapper",description:"Connects any input to the form state. Handles registration, error display, and label rendering automatically.",icon:e.jsx(s.Layers,{className:"w-6 h-6"})},{title:"Validation System",description:"Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",icon:e.jsx(s.Shield,{className:"w-6 h-6"})},{title:"Performance",description:"Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",icon:e.jsx(s.Zap,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Architecture Overview",description:"The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Core Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Four architectural layers that compose the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:t.map((r,i)=>e.jsx(a.FeatureCard,{title:r.title,description:r.description,icon:r.icon},i))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Component Tree"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How Form, FormField, and useFormContext relate to each other"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0",children:e.jsx(s.Box,{className:"w-5 h-5 text-blue-600 dark:text-blue-400"})}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-blue-700 dark:text-blue-300",children:"<Form>"}),e.jsxs("div",{className:"flex flex-wrap gap-2 mt-1",children:[e.jsx(a.Badge,{variant:"soft",color:"info",children:"useFormProps"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"validationSchema"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"onSubmit"})]})]})]})}),e.jsx("div",{className:"w-px h-6 bg-gray-300 dark:bg-gray-600"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Layers,{className:"w-4 h-4 text-purple-600 dark:text-purple-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-purple-700 dark:text-purple-300",children:"<FormField>"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.GitBranch,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Controller (react-hook-form)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.AlertCircle,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Error display (automatic)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.TextCursorInput,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsxs(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:["<Input />"," (any input)"]})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2",children:["Input","Select","Checkbox","Switch","Radio"].map(r=>e.jsx(a.Badge,{variant:"outline",color:"primary",children:r},r))})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Link,{className:"w-4 h-4 text-emerald-600 dark:text-emerald-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-emerald-700 dark:text-emerald-300",children:"useFormContext()"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Eye,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"watch, setValue, getValues"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Activity,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"formState: errors, isDirty"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.RotateCcw,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"reset, trigger, clearErrors"})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsxs(a.Badge,{variant:"soft",color:"success",children:[e.jsx(s.Info,{className:"w-3.5 h-3.5"}),"Available in any child component"]})]})]})]})]})]})};exports.default=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const t=[{title:"Form Container",description:"Main wrapper that initializes react-hook-form, handles submission, and provides context to all children.",icon:e.jsx(s.Box,{className:"w-6 h-6"})},{title:"FormField Wrapper",description:"Connects any input to the form state. Handles registration, error display, and label rendering automatically.",icon:e.jsx(s.Layers,{className:"w-6 h-6"})},{title:"Validation System",description:"Centralized or per-field validation via FormValidations type. Supports required, pattern, min/max, and custom validators.",icon:e.jsx(s.Shield,{className:"w-6 h-6"})},{title:"Performance",description:"Built on react-hook-form — minimal re-renders by isolating field state. Only the changed field re-renders.",icon:e.jsx(s.Zap,{className:"w-6 h-6"})}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Architecture Overview",description:"The tucu-ui form system is a thin, typed wrapper around react-hook-form. It provides Form, FormField, and useFormContext with centralized validation and automatic error handling.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-blue-500 via-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Core Layers"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Four architectural layers that compose the form system"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6",children:t.map((r,i)=>e.jsx(a.FeatureCard,{title:r.title,description:r.description,icon:r.icon},i))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Component Tree"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How Form, FormField, and useFormContext relate to each other"})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 flex items-center gap-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-lg bg-blue-200 dark:bg-blue-800 flex items-center justify-center shrink-0",children:e.jsx(s.Box,{className:"w-5 h-5 text-blue-600 dark:text-blue-400"})}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-blue-700 dark:text-blue-300",children:"<Form>"}),e.jsxs("div",{className:"flex flex-wrap gap-2 mt-1",children:[e.jsx(a.Badge,{variant:"soft",color:"info",children:"useFormProps"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"validationSchema"}),e.jsx(a.Badge,{variant:"soft",color:"info",children:"onSubmit"})]})]})]})}),e.jsx("div",{className:"w-px h-6 bg-gray-300 dark:bg-gray-600"}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-3xl",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-purple-200 dark:bg-purple-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Layers,{className:"w-4 h-4 text-purple-600 dark:text-purple-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-purple-700 dark:text-purple-300",children:"<FormField>"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.GitBranch,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Controller (react-hook-form)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.AlertCircle,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"Error display (automatic)"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.TextCursorInput,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsxs(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:["<Input />"," (any input)"]})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2",children:["Input","Select","Checkbox","Switch","Radio"].map(r=>e.jsx(a.Badge,{variant:"outline",color:"primary",children:r},r))})]}),e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx(a.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-5 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"w-9 h-9 rounded-lg bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center shrink-0",children:e.jsx(s.Link,{className:"w-4 h-4 text-emerald-600 dark:text-emerald-400"})}),e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-emerald-700 dark:text-emerald-300",children:"useFormContext()"})]}),e.jsxs("div",{className:"space-y-2 pl-12",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Eye,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"watch, setValue, getValues"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Activity,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"formState: errors, isDirty"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.RotateCcw,{className:"w-3.5 h-3.5 text-gray-400"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:"reset, trigger, clearErrors"})]})]})]})}),e.jsx("div",{className:"w-px h-4 bg-gray-300 dark:bg-gray-600"}),e.jsxs(a.Badge,{variant:"soft",color:"success",children:[e.jsx(s.Info,{className:"w-3.5 h-3.5"}),"Available in any child component"]})]})]})]})]})]})};exports.default=l;

package/documentation/{AreaChartSection-CPJSq736.js → AreaChartSection-B1G50vNb.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=[{name:"Jan",users:400,sessions:2400,pageViews:4400},{name:"Feb",users:300,sessions:1398,pageViews:3210},{name:"Mar",users:500,sessions:3800,pageViews:5400},{name:"Apr",users:780,sessions:3908,pageViews:6200},{name:"May",users:890,sessions:4800,pageViews:7100},{name:"Jun",users:1200,sessions:5800,pageViews:9400},{name:"Jul",users:1500,sessions:6300,pageViews:11e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"AreaChart"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Area Chart with Gradient",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],height:300,gradient:!0})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Stacked Area Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users",stackId:"a"},{dataKey:"sessions",name:"Sessions",stackId:"a"},{dataKey:"pageViews",name:"Page Views",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Without Gradient (Flat)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],gradient:!1,curved:!1,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{code:`import { AreaChart } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-C0NugKZs.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=[{name:"Jan",users:400,sessions:2400,pageViews:4400},{name:"Feb",users:300,sessions:1398,pageViews:3210},{name:"Mar",users:500,sessions:3800,pageViews:5400},{name:"Apr",users:780,sessions:3908,pageViews:6200},{name:"May",users:890,sessions:4800,pageViews:7100},{name:"Jun",users:1200,sessions:5800,pageViews:9400},{name:"Jul",users:1500,sessions:6300,pageViews:11e3}],t=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"AreaChart"}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Area chart component for visualizing volume and trends over time with gradient fills, stacking, and smooth curves."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Area Chart with Gradient",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],height:300,gradient:!0})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Stacked Area Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users",stackId:"a"},{dataKey:"sessions",name:"Sessions",stackId:"a"},{dataKey:"pageViews",name:"Page Views",stackId:"a"}],stacked:!0,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Without Gradient (Flat)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.AreaChart,{data:a,series:[{dataKey:"users",name:"Users"},{dataKey:"sessions",name:"Sessions"}],gradient:!1,curved:!1,height:300})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{code:`import { AreaChart } from '@e-burgos/tucu-ui';
 
 const data = [
   { name: 'Jan', users: 400, sessions: 2400 },

package/documentation/{AreaChartSection-SQjiTBmB.js → AreaChartSection-DHp2cGnI.js}

@@ -1,5 +1,5 @@
 import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
-import { T as n, C as s, a, m as t, c as m, P as l, A as c } from "../index-19KsCnyX.js";
+import { T as n, C as s, a, m as t, c as m, P as l, A as c } from "../index-4GONhZIF.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AuthorCardSection-DPF5SE5r.js → AuthorCardSection-DD1rPOTi.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),o=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=require("../1-CArqgiQa.js"),s=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"AuthorCard",description:`A card component for displaying author information with avatar, name,
           and role.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.UserCircle,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name and Role"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"John Doe",authorRole:"Senior Developer"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Name Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img,name:"Jane Smith"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Avatar Only"}),e.jsx(a.AuthorCard,{image:r.avatar1Img})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"AuthorCard",defaultValues:{name:"John Doe",authorRole:"Developer",image:"https://randomuser.me/api/portraits/men/1.jpg"},excludeProps:[],children:t=>e.jsx(a.AuthorCard,{...t})}),e.jsx(a.AutoPropsTable,{componentName:"AuthorCard"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { AuthorCard } from '@e-burgos/tucu-ui';
 
 // With name and role

package/documentation/{AuthorCardSection-kk79QuNK.js → AuthorCardSection-DKWXsN5r.js}

@@ -1,5 +1,5 @@
 import { jsxs as e, Fragment as s, jsx as a } from "react/jsx-runtime";
-import { H as n, C as r, a as l, T as t, G as o, P as d, A as h, c } from "../index-19KsCnyX.js";
+import { H as n, C as r, a as l, T as t, G as o, P as d, A as h, c } from "../index-4GONhZIF.js";
 import { UserCircle as p } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AvatarSection-BnRHw27e.js → AvatarSection-CEy3tSFZ.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-C0NugKZs.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=require("../1-CArqgiQa.js"),t=()=>a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Avatar",description:`A versatile avatar component for displaying user profile images with
           multiple sizes and shapes.`,icon:a.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:a.jsx(i.CircleUser,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Default Avatar"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar"})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Without Border"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"User avatar",border:!1})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"space-y-6",children:[a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Sizes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XS",size:"xs"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"SM",size:"sm"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"MD",size:"md"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"LG",size:"lg"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"XL",size:"xl"})]})]}),a.jsxs("div",{children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Shapes"}),a.jsxs("div",{className:"flex items-center gap-4",children:[a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Circle",shape:"circle"}),a.jsx(e.Avatar,{image:s.avatar1Img,alt:"Rounded",shape:"rounded"})]})]})]})})})}),a.jsx(e.PropPlayground,{componentName:"Avatar",defaultValues:{size:"md",shape:"circle",border:!0,image:"https://randomuser.me/api/portraits/men/1.jpg",alt:"Avatar"},children:r=>a.jsx(e.Avatar,{...r})}),a.jsx(e.AutoPropsTable,{componentName:"Avatar"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Avatar } from '@e-burgos/tucu-ui';
 
 // Basic usage

package/documentation/{AvatarSection-CLq51gbg.js → AvatarSection-D6q5cCro.js}

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-19KsCnyX.js";
+import { H as c, C as i, a as t, T as l, X as e, P as o, A as n, c as g } from "../index-4GONhZIF.js";
 import { CircleUser as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BackgroundsSection-Ibr9oqUO.js → BackgroundsSection-DIO489vW.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=[{id:"base",name:"Base",type:"css",desc:"Spatial radial gradient. Default body/window background that adapts between light and dark.",usage:"Body, root window, app shell"},{id:"sonoma",name:"Sonoma",type:"css",desc:"Flat neutral surface matching macOS Sonoma system colors.",usage:"System-like flat interfaces"},{id:"radial",name:"Radial",type:"css",desc:"Vibrant radial gradient with brand colors for expressive surfaces.",usage:"Hero sections, expressive cards"},{id:"aurora",name:"Aurora",type:"css",desc:"Spatial aurora with animated-style blurred color orbs.",usage:"Landing pages, immersive UIs"},{id:"depth",name:"Depth",type:"css",desc:"Sober linear gradient, data-focused and subtle.",usage:"Dashboards, data-heavy layouts"},{id:"demo",name:"Demo",type:"css",desc:"Expressive dual-ellipse gradient for showcases and presentations.",usage:"Demos, showcases, marketing"},{id:"window",name:"Window",type:"css",desc:"Frosted glass surface with subtle backdrop blur.",usage:"Modal backdrops, floating panels"},{id:"wave",name:"Wave",type:"svg",desc:"Full-width decorative flowing shapes for desktop/tablet viewports.",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",type:"svg",desc:"Compact landscape format for banners and contained sections.",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",type:"svg",desc:"Portrait-oriented asset optimized for mobile viewports.",usage:"Mobile screens, narrow containers, portrait layouts"}],o=d.filter(t=>t.type==="css");d.filter(t=>t.type==="svg");const n=()=>{const{mode:t}=a.useTheme(),r=t==="dark";return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(a.HeroCard,{title:"Backgrounds",description:"Unified background system with 10 variants available across all theme layouts. CSS-only gradients and SVG assets that adapt automatically between light and dark modes.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"All Background Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","component supports ",e.jsx("strong",{children:"10 variants"})," (7 CSS-only + 3 SVG assets). All are available in every theme layout via the"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"backgroundVariant"})," ","store value."]}),e.jsx(a.BasicTable,{columns:[{key:"name",label:"Variant"},{key:"type",label:"Type",className:"font-mono"},{key:"desc",label:"Description"},{key:"usage",label:"Usage"}],data:d.map(s=>({name:s.name,type:s.type.toUpperCase(),desc:s.desc,usage:s.usage})),hoverable:!0,striped:!1})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Pure CSS backgrounds generated with gradients and custom properties. No image downloads required."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",children:o.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-32 rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:s.id,className:"!z-0"})}),e.jsx("p",{className:"text-xs font-semibold text-center text-gray-700 dark:text-gray-300",children:s.name}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:s.desc})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"SVG Asset Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"SVG backgrounds loaded from CDN. Optimized for specific viewport sizes. The component handles loading states and fallback gracefully."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wave"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1512 × 982 — Landscape (desktop full-screen)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[200px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wave",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wave",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wallpaper"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1080 × 560 — Landscape (contained sections)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[180px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wallpaper",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wallpaper",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Mobile"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"402 × 874 — Portrait (mobile screens)"})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"mobile",className:"!z-0"})})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("mobile",r)]})})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","with two positioning modes:"]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Fixed Mode (Default Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Fullscreen fixed layer behind content. Content is wrapped automatically."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<ThemeBackground>
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const d=[{id:"base",name:"Base",type:"css",desc:"Spatial radial gradient. Default body/window background that adapts between light and dark.",usage:"Body, root window, app shell"},{id:"sonoma",name:"Sonoma",type:"css",desc:"Flat neutral surface matching macOS Sonoma system colors.",usage:"System-like flat interfaces"},{id:"radial",name:"Radial",type:"css",desc:"Vibrant radial gradient with brand colors for expressive surfaces.",usage:"Hero sections, expressive cards"},{id:"aurora",name:"Aurora",type:"css",desc:"Spatial aurora with animated-style blurred color orbs.",usage:"Landing pages, immersive UIs"},{id:"depth",name:"Depth",type:"css",desc:"Sober linear gradient, data-focused and subtle.",usage:"Dashboards, data-heavy layouts"},{id:"demo",name:"Demo",type:"css",desc:"Expressive dual-ellipse gradient for showcases and presentations.",usage:"Demos, showcases, marketing"},{id:"window",name:"Window",type:"css",desc:"Frosted glass surface with subtle backdrop blur.",usage:"Modal backdrops, floating panels"},{id:"wave",name:"Wave",type:"svg",desc:"Full-width decorative flowing shapes for desktop/tablet viewports.",usage:"Hero sections, landing pages, desktop full-screen"},{id:"wallpaper",name:"Wallpaper",type:"svg",desc:"Compact landscape format for banners and contained sections.",usage:"Banners, feature sections, contained backgrounds"},{id:"mobile",name:"Mobile",type:"svg",desc:"Portrait-oriented asset optimized for mobile viewports.",usage:"Mobile screens, narrow containers, portrait layouts"}],o=d.filter(t=>t.type==="css");d.filter(t=>t.type==="svg");const n=()=>{const{mode:t}=a.useTheme(),r=t==="dark";return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(a.HeroCard,{title:"Backgrounds",description:"Unified background system with 10 variants available across all theme layouts. CSS-only gradients and SVG assets that adapt automatically between light and dark modes.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-400/50",children:e.jsx(l.Image,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"All Background Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["The"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","component supports ",e.jsx("strong",{children:"10 variants"})," (7 CSS-only + 3 SVG assets). All are available in every theme layout via the"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"backgroundVariant"})," ","store value."]}),e.jsx(a.BasicTable,{columns:[{key:"name",label:"Variant"},{key:"type",label:"Type",className:"font-mono"},{key:"desc",label:"Description"},{key:"usage",label:"Usage"}],data:d.map(s=>({name:s.name,type:s.type.toUpperCase(),desc:s.desc,usage:s.usage})),hoverable:!0,striped:!1})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Pure CSS backgrounds generated with gradients and custom properties. No image downloads required."}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",children:o.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsx("div",{className:"relative w-full h-32 rounded-xl overflow-hidden border border-border",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:s.id,className:"!z-0"})}),e.jsx("p",{className:"text-xs font-semibold text-center text-gray-700 dark:text-gray-300",children:s.name}),e.jsx("p",{className:"text-[10px] text-center text-gray-400",children:s.desc})]},s.id))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"SVG Asset Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"SVG backgrounds loaded from CDN. Optimized for specific viewport sizes. The component handles loading states and fallback gracefully."}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wave"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1512 × 982 — Landscape (desktop full-screen)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[200px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wave",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wave",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Wallpaper"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"1080 × 560 — Landscape (contained sections)"})]}),e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border h-[180px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"wallpaper",className:"!z-0"})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("wallpaper",r)]})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsxs("p",{className:"text-sm font-semibold text-gray-700 dark:text-gray-300",children:["Mobile"," ",e.jsx("span",{className:"text-[10px] font-mono font-normal text-gray-400",children:"402 × 874 — Portrait (mobile screens)"})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:"relative rounded-xl overflow-hidden border border-border w-[180px] h-[390px]",children:e.jsx(a.ThemeBackground,{mode:"absolute",variant:"mobile",className:"!z-0"})})}),e.jsx("div",{className:"p-2 rounded-lg bg-gray-100 dark:bg-gray-800/50",children:e.jsxs("p",{className:"text-[11px] font-mono text-gray-500 dark:text-gray-400 truncate",children:[e.jsx("span",{className:"text-gray-700 dark:text-gray-300",children:"url:"})," ",a.getBackgroundUrl("mobile",r)]})})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400",children:["Use"," ",e.jsx("code",{className:"text-xs px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"ThemeBackground"})," ","with two positioning modes:"]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Fixed Mode (Default Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Fullscreen fixed layer behind content. Content is wrapped automatically."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<ThemeBackground>
   {children}
 </ThemeBackground>`})]}),e.jsxs("div",{className:"p-4 rounded-xl border border-border space-y-2",children:[e.jsx("p",{className:"text-xs font-semibold text-gray-700 dark:text-gray-300",children:"Absolute Mode (macOS Layouts)"}),e.jsx("p",{className:"text-[11px] text-gray-500 dark:text-gray-400",children:"Absolute layer within parent container. No children wrapper."}),e.jsx("pre",{className:"text-[10px] font-mono bg-gray-100 dark:bg-gray-800 rounded-lg p-3 overflow-x-auto",children:`<div className="relative">
   <ThemeBackground mode="absolute" />

package/documentation/{BackgroundsSection-3X9Iw31T.js → BackgroundsSection-ml2K7sVT.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { ay as p, H as g, C as s, a as l, T as o, y as i, az as n, aA as c } from "../index-19KsCnyX.js";
+import { ay as p, H as g, C as s, a as l, T as o, y as i, az as n, aA as c } from "../index-4GONhZIF.js";
 import { Image as y } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BadgeSection-C9_vLylm.js → BadgeSection-D87SEfxH.js}

@@ -1,5 +1,5 @@
 import { jsxs as i, Fragment as t, jsx as e } from "react/jsx-runtime";
-import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-19KsCnyX.js";
+import { H as d, C as s, a as l, T as r, K as a, P as n, A as o, c as m } from "../index-4GONhZIF.js";
 import { Award as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{BadgeSection-Dy1g7XfP.js → BadgeSection-Nan3Lkev.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Badge",description:`A badge component for displaying status indicators and labels with
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-C0NugKZs.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Badge",description:`A badge component for displaying status indicators and labels with
           various styles and sizes.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Award,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Badges"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",children:"Active"}),e.jsx(a.Badge,{status:"inactive",children:"Inactive"}),e.jsx(a.Badge,{status:"pending",children:"Pending"}),e.jsx(a.Badge,{status:"default",children:"Default"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Status Indicators (Dots Only)"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"active",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Online"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"inactive",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Offline"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Badge,{status:"pending",withDot:!0}),e.jsx("span",{className:"text-sm",children:"Away"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Dot Indicator"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{status:"active",withDot:!0,children:"Active"}),e.jsx(a.Badge,{status:"inactive",withDot:!0,children:"Inactive"}),e.jsx(a.Badge,{status:"pending",withDot:!0,children:"Pending"})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{color:"primary",children:"Primary"}),e.jsx(a.Badge,{color:"success",children:"Success"}),e.jsx(a.Badge,{color:"info",children:"Info"}),e.jsx(a.Badge,{color:"warning",children:"Warning"}),e.jsx(a.Badge,{color:"danger",children:"Danger"}),e.jsx(a.Badge,{color:"gray",children:"Gray"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{size:"tiny",color:"primary",children:"Tiny"}),e.jsx(a.Badge,{size:"small",color:"primary",children:"Small"}),e.jsx(a.Badge,{size:"medium",color:"primary",children:"Medium"}),e.jsx(a.Badge,{size:"large",color:"primary",children:"Large"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"solid",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"solid",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"solid",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Soft"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"soft",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"soft",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"soft",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Outline"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"outline",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"outline",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"outline",color:"danger",children:"Danger"})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost"}),e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{variant:"ghost",color:"primary",children:"Primary"}),e.jsx(a.Badge,{variant:"ghost",color:"success",children:"Success"}),e.jsx(a.Badge,{variant:"ghost",color:"danger",children:"Danger"})]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shapes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-3",children:[e.jsx(a.Badge,{shape:"rounded",color:"primary",children:"Rounded"}),e.jsx(a.Badge,{shape:"pill",color:"success",children:"Pill"}),e.jsx(a.Badge,{shape:"circle",color:"danger",size:"large",withDot:!0})]})})})}),e.jsx(a.PropPlayground,{componentName:"Badge",defaultValues:{variant:"solid",size:"small",shape:"pill",color:"primary",withDot:!1},excludeProps:["status"],children:s=>e.jsx(a.Badge,{...s,children:"Badge"})}),e.jsx(a.AutoPropsTable,{componentName:"Badge"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { Badge } from '@e-burgos/tucu-ui';
 
 // Basic usage with status

package/documentation/{BarChartSection-Do0Yq1CS.js → BarChartSection-CDVExS5W.js}

@@ -1,5 +1,5 @@
 import { jsxs as l, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-19KsCnyX.js";
+import { T as n, C as e, a as s, l as t, c as i, P as m, A as c } from "../index-4GONhZIF.js";
 import "lucide-react";
 import "react-router-dom";
 import "react";