@e-burgos/tucu-ui 2.0.9 → 2.0.10

package/CHANGELOG.md

@@ -5,6 +5,79 @@ 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.10] - 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`
+  - Two positioning modes: `'fixed'` (fullscreen layer + content wrapper) and `'absolute'` (within parent container)
+  - 7 CSS-only gradients (no image download) + 3 SVG asset variants from CDN
+  - Automatic dark/light mode adaptation via CSS classes (`tucu-bg-base`, `tucu-bg-radial`, etc.)
+  - Animated aurora variant with `prefers-reduced-motion` support
+  - `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/dock)
+  - 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
+  - `DefaultColorSettings`: Grouped dot-based color editor (Brand, Surfaces, Text, Status) with light/dark awareness
+  - 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)
+
+### 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'`: Blue Sonoma bundle + 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
+- **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
+
+### Fixed
+
+- **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.9] - 2026-05-19
 
 ### Added

package/components/layouts/macos-layout/index.d.ts

@@ -1,7 +1,9 @@
 import { MacOSSonomaLayout, MacOSSonomaLayoutProps } from './macos-sonoma-layout';
 import { MacOSTahoeLayout, MacOSTahoeLayoutProps } from './macos-tahoe-layout';
 import { MacOSTahoeDockLayout, MacOSTahoeDockLayoutProps } from './macos-tahoe-dock-layout';
-type MacOSLayoutVariant = 'sonoma' | 'tahoe' | 'tahoe-dock';
+import { MacOSTahoeCleanLayout, MacOSTahoeCleanLayoutProps } from './macos-tahoe-clean-layout';
+import { MacOSSonomaCleanLayout, MacOSSonomaCleanLayoutProps } from './macos-sonoma-clean-layout';
+type MacOSLayoutVariant = 'sonoma' | 'sonoma-clean' | 'tahoe' | 'tahoe-dock' | 'macos-tahoe-clean';
 export interface MacOSLayoutProps {
     children: React.ReactNode;
     menuItems: MacOSSonomaLayoutProps['menuItems'];
@@ -15,5 +17,5 @@ export interface MacOSLayoutProps {
 }
 export declare function MacOSLayout({ variant, ...props }: MacOSLayoutProps): import("react/jsx-runtime").JSX.Element;
 export default MacOSLayout;
-export { MacOSSonomaLayout, MacOSTahoeLayout, MacOSTahoeDockLayout };
-export type { MacOSSonomaLayoutProps, MacOSTahoeLayoutProps, MacOSTahoeDockLayoutProps, MacOSLayoutVariant, };
+export { MacOSSonomaLayout, MacOSSonomaCleanLayout, MacOSTahoeLayout, MacOSTahoeDockLayout, MacOSTahoeCleanLayout, };
+export type { MacOSSonomaLayoutProps, MacOSSonomaCleanLayoutProps, MacOSTahoeLayoutProps, MacOSTahoeDockLayoutProps, MacOSTahoeCleanLayoutProps, MacOSLayoutVariant, };

package/components/layouts/macos-layout/macos-sonoma-clean-layout.d.ts

@@ -0,0 +1,7 @@
+export interface MacOSSonomaCleanLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function MacOSSonomaCleanLayout({ children, className, contentClassName, }: MacOSSonomaCleanLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default MacOSSonomaCleanLayout;

package/components/layouts/macos-layout/macos-tahoe-clean-layout.d.ts

@@ -0,0 +1,7 @@
+export interface MacOSTahoeCleanLayoutProps {
+    children: React.ReactNode;
+    className?: string;
+    contentClassName?: string;
+}
+export declare function MacOSTahoeCleanLayout({ children, className, contentClassName, }: MacOSTahoeCleanLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default MacOSTahoeCleanLayout;

package/components/macos/tahoe/foundations/background.d.ts

@@ -1,23 +1,7 @@
-import { CSSProperties } from 'react';
-export type MacOSBackgroundVariant = 'base' | 'wave' | 'wallpaper' | 'mobile';
-export interface MacOSBackgroundProps {
-    /** Background variant to display */
-    variant?: MacOSBackgroundVariant;
-    /** Override CDN base URL for self-hosted assets */
-    cdnBase?: string;
-    /** Additional CSS class for the root container */
-    className?: string;
-    /** Inline styles for the root container */
-    style?: CSSProperties;
-    /** Content rendered on top of the background */
-    children?: React.ReactNode;
-    /** Whether to show the fallback gradient while the image loads */
-    showFallback?: boolean;
-}
-declare function getBaseGradient(isDark: boolean): "radial-gradient(circle at 28% 32%, rgba(142, 200, 255, 0.45) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(170, 150, 255, 0.28) 0%, transparent 42%), #f0f2f7" | "radial-gradient(circle at 28% 32%, rgba(18, 60, 100, 0.8) 0%, transparent 42%), radial-gradient(circle at 72% 68%, rgba(55, 30, 100, 0.6) 0%, transparent 42%), #131318";
-export declare const MacOSBackground: React.FC<MacOSBackgroundProps>;
-/** Get the CDN URL for a specific background asset */
-export declare function getMacOSBackgroundUrl(variant: Exclude<MacOSBackgroundVariant, 'base'>, isDark: boolean, base?: string): string;
-/** Get the CSS gradient string for the Base background */
-export { getBaseGradient as getMacOSBaseGradient };
-export default MacOSBackground;
+/**
+ * @deprecated This file re-exports from `themes/components/theme-background`.
+ * Import directly from `@e-burgos/tucu-ui` or `themes` instead.
+ */
+export { ThemeBackground, ThemeBackground as MacOSBackground, getBackgroundUrl, getBackgroundUrl as getMacOSBackgroundUrl, } from '../../../../themes/components/theme-background';
+export type { ThemeBackgroundProps, ThemeBackgroundProps as MacOSBackgroundProps, } from '../../../../themes/components/theme-background';
+export type { BackgroundVariant as MacOSBackgroundVariant } from '../../../../themes/hooks/use-theme';

package/demo/pages/design-system/design-system-sections/BackgroundsSection.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const BackgroundsSection: React.FC;
+export default BackgroundsSection;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.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-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;

package/documentation/{APIReferenceSection-DQ9eEJU3.js → APIReferenceSection-DNiwamR3.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-lfg6LZ1p.js";
+import { H as c, T as r, C as a, a as n, y as s, K as l } from "../index-19KsCnyX.js";
 import { BookOpen as u } from "lucide-react";
 import "react-router-dom";
 import "react";

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.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-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
           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-ZQgU44Mo.js → ActiveLinkSection-nW2qUEkC.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-lfg6LZ1p.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-19KsCnyX.js";
 import { Link as d } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AdvancedColorSystemSection-BT-UpUVF.js → AdvancedColorSystemSection-CcXCp_R4.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-lfg6LZ1p.js";
+import { H as d, T as r, C as o, a as c, c as s } from "../index-19KsCnyX.js";
 import { Layers as n } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{AdvancedColorSystemSection-D-6qlD3s.js → AdvancedColorSystemSection-ClZP9L76.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.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-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 */
 --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/{AdvancedFeaturesSection-mfiPnKVY.js → AdvancedFeaturesSection-DTklgMJa.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.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-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;

package/documentation/{AdvancedFeaturesSection-mbP5hR-H.js → AdvancedFeaturesSection-DZsIzQM1.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-lfg6LZ1p.js";
+import { H as s, T as a, ax as r } from "../index-19KsCnyX.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/{AdvancedFeaturesSection-D2ZWLXY5.js → AdvancedFeaturesSection-DeodzomR.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.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-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';
 
 function ConditionalForm() {
   return (

package/documentation/{AdvancedFeaturesSection-B5wK85Bl.js → AdvancedFeaturesSection-dp4NWt73.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-lfg6LZ1p.js";
+import { H as s, T as o, ax as n, C as l, c as d } from "../index-19KsCnyX.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/{AlertSection-BBto0fHS.js → AlertSection-C8JxRieS.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-lfg6LZ1p.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-19KsCnyX.js";
 import { AlertCircle as h } from "lucide-react";
 import "react-router-dom";
 import "react";

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.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-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
           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-k40j2vM0.js → AnchorLinkSection-Cnh7qsTW.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../index-BaGqriuz.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-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
           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/{AnchorLinkSection-DSCjeuS9.js → AnchorLinkSection-DMdLIqCp.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-lfg6LZ1p.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-19KsCnyX.js";
 import { ExternalLink as p } from "lucide-react";
 import "react-router-dom";
 import "react";

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.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-gray-300 dark:border-gray-600 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-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 Standalone when:
 // ✅ Building a traditional SPA

package/documentation/{ArchitecturalPatternsComparisonSection-Doa_MJjU.js → ArchitecturalPatternsComparisonSection-vYbHlGY-.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-lfg6LZ1p.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-19KsCnyX.js";
 import { GitCompare as p, Lightbulb as u, ArrowRight as i } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -83,9 +83,11 @@ const S = () => /* @__PURE__ */ t(l, { children: [
     ) }) }),
     /* @__PURE__ */ e(m, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
       /* @__PURE__ */ e(u, { className: "w-4 h-4 inline mr-2" }),
-      "Both patterns use TypeScript discriminated unions. The ",
-      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs", children: "architecturalPatterns" }),
-      " prop determines which props are available, preventing configuration errors at compile time."
+      "Both patterns use TypeScript discriminated unions. The",
+      " ",
+      /* @__PURE__ */ e("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."
     ] }) })
   ] }),
   /* @__PURE__ */ t("section", { className: "space-y-8", children: [

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.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-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;

package/documentation/{ArchitectureOverviewSection-DUkNwRmR.js → ArchitectureOverviewSection-D_RmIFCA.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-lfg6LZ1p.js";
+import { H as m, T as r, ax as o, C as l, K as s } from "../index-19KsCnyX.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/{AreaChartSection-BDVO57jx.js → AreaChartSection-CPJSq736.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.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-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';
 
 const data = [
   { name: 'Jan', users: 400, sessions: 2400 },

package/documentation/{AreaChartSection-C4ruqExr.js → AreaChartSection-SQjiTBmB.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-lfg6LZ1p.js";
+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 "lucide-react";
 import "react-router-dom";
 import "react";

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.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-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,
           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-cB8Liia6.js → AuthorCardSection-kk79QuNK.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-lfg6LZ1p.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-19KsCnyX.js";
 import { UserCircle as p } from "lucide-react";
 import "react-router-dom";
 import "react";

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../index-BaGqriuz.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-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
           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-DpUjg_yW.js → AvatarSection-CLq51gbg.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-lfg6LZ1p.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-19KsCnyX.js";
 import { CircleUser as h } from "lucide-react";
 import "react-router-dom";
 import "react";