@e-burgos/tucu-ui 1.5.0 → 2.0.0

package/README.md

@@ -2,11 +2,10 @@
 
 A modern, comprehensive React component library built with TypeScript, Tailwind CSS v4, and designed for creating production-ready web applications. Features **automatic layout generation**, **advanced routing system** with Standalone and Micro Frontends (MFE) support, **powerful form systems** with React Hook Form, **5000+ icons**, **specialized blockchain components**, and **WCAG 2.1 AA accessibility compliance**.
 
-## 🌟 Storybook & Documentation
+## 🌟 Documentation
 
-- **📚 [Live Documentation](https://main--683712ba90eaad206f988c65.chromatic.com/?path=/docs/1-documentation-1-introduction--documentation)** - Complete component documentation
-- **🎨 [Interactive Storybook](https://main--683712ba90eaad206f988c65.chromatic.com/)** - Explore components in action
-- **🔧 [Component Examples](https://main--683712ba90eaad206f988c65.chromatic.com/?path=/story/ui-components-buttons-button--default)** - See all variations and use cases
+- **📚 [Live Documentation](https://tucu-ui.netlify.app/)** - Complete component documentation
+- **🔧 [Component Examples](https://tucu-ui.netlify.app/components)** - See all variations and use cases
 
 ## 🚀 Key Features
 
@@ -122,11 +121,11 @@ Available color presets include: Green, Black, Blue, Red, Purple, Orange, Rose,
 ### 1. **Basic Component Usage**
 
 ```tsx
-import { Button, Card, Input, Alert } from '@e-burgos/tucu-ui';
+import { Button, CardContainer, Input, Alert } from '@e-burgos/tucu-ui';
 
 function App() {
   return (
-    <Card className="p-6">
+    <CardContainer className="p-6">
       <h2 className="text-2xl font-bold mb-4">Welcome to Tucu UI</h2>
       <Input placeholder="Enter your name" className="mb-4" />
       <Button size="large" className="w-full">
@@ -135,7 +134,7 @@ function App() {
       <Alert variant="success" className="mt-4">
         You're ready to build amazing UIs!
       </Alert>
-    </Card>
+    </CardContainer>
   );
 }
 ```
@@ -150,31 +149,31 @@ import { ThemeProvider, LucideIcons } from '@e-burgos/tucu-ui';
 const menuItems = [
   {
     name: 'Dashboard',
-    href: '/',
+    path: '/',
     icon: <LucideIcons.Home />,
     component: <DashboardPage />,
   },
   {
     name: 'Analytics',
-    href: '/analytics',
+    path: '/analytics',
     icon: <LucideIcons.BarChart3 />,
     component: <AnalyticsPage />,
     dropdownItems: [
       {
         name: 'Reports',
-        href: '/analytics/reports',
+        path: '/analytics/reports',
         component: <ReportsPage />,
       },
       {
         name: 'Insights',
-        href: '/analytics/insights',
+        path: '/analytics/insights',
         component: <InsightsPage />,
       },
     ],
   },
   {
     name: 'Settings',
-    href: '/settings',
+    path: '/settings',
     icon: <LucideIcons.Settings />,
     component: <SettingsPage />,
   },
@@ -190,6 +189,9 @@ function App() {
       // Theme Configuration
       brandColor="Blue"
       mode="light"
+      // Authentication (Required)
+      isAuthenticated={true} // Authentication state
+      loginUrl="/login" // Optional: redirect URL for unauthenticated users
       // Optional: Override automatic route generation
       customRoutes={<CustomRoutes />}
       // UI Customization
@@ -234,7 +236,8 @@ function MfeApp() {
       architecturalPatterns="mfe" // Activates MFE mode
       basePath="/my-app" // Base path for the micro frontend
       appRoutesConfig={appRoutesConfig} // Required for MFE
-      isAuthenticated={true} // Authentication state
+      isAuthenticated={true} // Authentication state (Required)
+      loginUrl="/login" // Redirect URL for unauthenticated users (Required)
       logo={{ name: 'MFE', secondName: 'App' }}
       showSettings
     />
@@ -273,6 +276,8 @@ function MfeApp() {
 | ----------------------- | ------------------------------- | -------------- | ------------------------------------------------ |
 | `architecturalPatterns` | `'standalone'`                  | `'standalone'` | Architectural pattern (default, can be omitted)  |
 | `menuItems`             | `StandaloneAppRoutesMenuItem[]` | Required       | Navigation menu items with routing configuration |
+| `isAuthenticated`       | `boolean`                       | Required       | Authentication state for route protection        |
+| `loginUrl`              | `string`                        | -              | Optional: Redirect URL for unauthenticated users |
 | `customRoutes`          | `ReactElement<typeof Routes>`   | -              | Optional: Override automatic route generation    |
 | `withRouterProvider`    | `boolean`                       | `true`         | Enable automatic React Router setup              |
 
@@ -283,7 +288,8 @@ function MfeApp() {
 | `architecturalPatterns` | `'mfe'`               | Required | Must be set to `'mfe'` to activate MFE mode            |
 | `basePath`              | `string`              | Required | Base path for the micro frontend (e.g., `/my-app`)     |
 | `appRoutesConfig`       | `IAppRouteConfig[]`   | Required | Explicit route configuration with protection           |
-| `isAuthenticated`       | `boolean`             | -        | Authentication state for route protection              |
+| `isAuthenticated`       | `boolean`             | Required | Authentication state for route protection              |
+| `loginUrl`              | `string`              | Required | Redirect URL for unauthenticated users                 |
 | `menuItems`             | `AppRoutesMenuItem[]` | -        | Optional: Navigation menu items (separate from routes) |
 
 **Note:** TypeScript ensures type safety - you cannot mix Standalone and MFE props. The type system will show errors at compile time if you use incorrect props for the selected pattern.
@@ -364,9 +370,11 @@ function ThemeControls() {
 ```tsx
 interface StandaloneAppRoutesMenuItem {
   name: string; // Display name
-  href: string; // Navigation URL path
+  path: string; // Navigation URL path (route path)
+  href?: string; // Optional: external link URL (if different from path)
   icon?: React.ReactNode; // Optional icon component
   component: JSX.Element; // Page component to render
+  isPublic?: boolean; // Whether route is publicly accessible (default: true)
   dropdownItems?: StandaloneAppRoutesMenuItem[]; // Nested submenu items
   hide?: boolean; // Hide from navigation (default: false)
   onClick?: () => void; // Optional click handler
@@ -386,8 +394,11 @@ interface IAppRouteConfig extends RouteProps {
 
 interface AppRoutesMenuItem {
   name: string; // Display name (for navigation menu)
-  href: string; // Navigation URL path
+  path: string; // Navigation URL path
+  href?: string; // Optional: external link URL (if different from path)
   icon?: React.ReactNode; // Optional icon component
+  hide?: boolean; // Hide from navigation (default: false)
+  onClick?: () => void; // Optional click handler
   // Note: component is NOT used in MFE pattern - routes are defined in appRoutesConfig
 }
 ```
@@ -842,33 +853,43 @@ import { Carousel, CarouselCards, CarouselImage } from '@e-burgos/tucu-ui';
 
 // Basic Carousel
 <Carousel
-  items={[
-    { id: 1, content: <div>Slide 1</div> },
-    { id: 2, content: <div>Slide 2</div> },
-    { id: 3, content: <div>Slide 3</div> },
-  ]}
-  autoplay
+  slidesPerView={1}
+  spaceBetween={20}
+  showNavigation
+  showPagination
+  autoplay={{ delay: 3000 }}
   loop
-/>
+>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</Carousel>
 
 // Card Carousel
 <CarouselCards
-  items={cardData}
-  renderItem={(item) => <Card {...item} />}
+  cards={[
+    { title: 'Card 1', description: 'Description 1', content: <div>Content 1</div> },
+    { title: 'Card 2', description: 'Description 2', content: <div>Content 2</div> },
+  ]}
+  showNavigation
+  showPagination
 />
 
 // Image Carousel
 <CarouselImage
-  images={imageUrls}
-  showThumbnails
+  images={[
+    { src: '/image1.jpg', alt: 'Image 1', title: 'Title 1' },
+    { src: '/image2.jpg', alt: 'Image 2', title: 'Title 2' },
+  ]}
   showNavigation
+  showPagination
 />
 ```
 
 ### **Feedback Components**
 
 ```tsx
-import { Alert, Toast, useToast } from '@e-burgos/tucu-ui';
+import { Alert, useToastStore } from '@e-burgos/tucu-ui';
 
 // Alert Messages
 <Alert variant="success" dismissible>
@@ -881,10 +902,11 @@ import { Alert, Toast, useToast } from '@e-burgos/tucu-ui';
 
 // Toast Notifications
 function ToastExample() {
-  const { toast } = useToast();
+  const { addToast } = useToastStore();
 
   const showToast = () => {
-    toast({
+    addToast({
+      id: Date.now().toString(),
       title: 'Success!',
       message: 'Your profile has been updated',
       variant: 'success',
@@ -956,7 +978,7 @@ import { SignInForm, SignUpForm, ForgetPasswordForm, ResetPinForm } from '@e-bur
 // Complete authentication flow
 function AuthPages() {
   return (
-    <ThemeProvider layout="none" menuItems={[]}>
+    <ThemeProvider layout="none" menuItems={[]} isAuthenticated={false} loginUrl="/login">
       <div className="min-h-screen flex items-center justify-center">
         {/* Sign In with validation */}
         <SignInForm forgetPasswordPath="/forgot-password" />
@@ -1023,31 +1045,31 @@ import { ThemeProvider, LucideIcons, useTheme } from '@e-burgos/tucu-ui';
 const dashboardMenuItems = [
   {
     name: 'Overview',
-    href: '/',
+    path: '/',
     icon: <LucideIcons.LayoutDashboard />,
     component: <OverviewPage />,
   },
   {
     name: 'Analytics',
-    href: '/analytics',
+    path: '/analytics',
     icon: <LucideIcons.BarChart3 />,
     component: <AnalyticsPage />,
     dropdownItems: [
       {
         name: 'Reports',
-        href: '/analytics/reports',
+        path: '/analytics/reports',
         component: <ReportsPage />,
       },
       {
         name: 'Real-time',
-        href: '/analytics/realtime',
+        path: '/analytics/realtime',
         component: <RealtimePage />,
       },
     ],
   },
   {
     name: 'Users',
-    href: '/users',
+    path: '/users',
     icon: <LucideIcons.Users />,
     component: <UsersPage />,
   },
@@ -1058,6 +1080,8 @@ function Dashboard() {
     <ThemeProvider
       layout="classic"
       menuItems={dashboardMenuItems} // Standalone pattern (default)
+      isAuthenticated={true}
+      loginUrl="/login"
       logo={{ name: 'Admin', secondName: 'Panel' }}
       brandColor="BufusBlue"
       showSettings={true}
@@ -1075,19 +1099,19 @@ import { ThemeProvider, CoinCard, LivePriceFeed, LucideIcons } from '@e-burgos/t
 const defiMenuItems = [
   {
     name: 'Portfolio',
-    href: '/',
+    path: '/',
     icon: <LucideIcons.Wallet />,
     component: <PortfolioPage />,
   },
   {
     name: 'Swap',
-    href: '/swap',
+    path: '/swap',
     icon: <LucideIcons.ArrowLeftRight />,
     component: <SwapPage />,
   },
   {
     name: 'Staking',
-    href: '/staking',
+    path: '/staking',
     icon: <LucideIcons.Coins />,
     component: <StakingPage />,
   },
@@ -1098,6 +1122,8 @@ function DeFiApp() {
     <ThemeProvider
       layout="minimal"
       menuItems={defiMenuItems} // Standalone pattern
+      isAuthenticated={true}
+      loginUrl="/login"
       logo={{ name: 'DeFi', secondName: 'Portfolio' }}
       brandColor="Green"
       rightButton={<WalletConnector />}
@@ -1141,6 +1167,7 @@ function MfeDeFiApp() {
       basePath="/defi-app"
       appRoutesConfig={appRoutesConfig}
       isAuthenticated={isAuthenticated}
+      loginUrl="/login" // Required for MFE pattern
       logo={{ name: 'DeFi', secondName: 'MFE' }}
       brandColor="Green"
     />
@@ -1156,19 +1183,19 @@ import { ThemeProvider, LucideIcons, Form, FormField, Input } from '@e-burgos/tu
 const ecommerceMenuItems = [
   {
     name: 'Products',
-    href: '/products',
+    path: '/products',
     icon: <LucideIcons.Package />,
     component: <ProductsPage />,
   },
   {
     name: 'Orders',
-    href: '/orders',
+    path: '/orders',
     icon: <LucideIcons.ShoppingCart />,
     component: <OrdersPage />,
   },
   {
     name: 'Customers',
-    href: '/customers',
+    path: '/customers',
     icon: <LucideIcons.Users />,
     component: <CustomersPage />,
   },
@@ -1179,6 +1206,8 @@ function EcommerceAdmin() {
     <ThemeProvider
       layout="classic"
       menuItems={ecommerceMenuItems} // Standalone pattern
+      isAuthenticated={true}
+      loginUrl="/login"
       logo={{ name: 'Shop', secondName: 'Admin' }}
       brandColor="Purple"
       showSettings={true}
@@ -1315,8 +1344,7 @@ Contributions are welcome! Please:
 
 ## 🌐 Community & Support
 
-- **📚 [Documentation](https://main--683712ba90eaad206f988c65.chromatic.com/?path=/docs/1-documentation-1-introduction--documentation)** - Complete guides and examples
-- **🎨 [Storybook](https://main--683712ba90eaad206f988c65.chromatic.com/)** - Interactive component explorer
+- **📚 [Documentation](https://tucu-ui.netlify.app/)** - Complete guides and examples
 - **🐛 [Issues](https://github.com/e-burgos/tucu-ui/issues)** - Report bugs and request features
 - **💬 [Discussions](https://github.com/e-burgos/tucu-ui/discussions)** - Community support and ideas
 

package/{RadioGroupSection-BUWSW6uI.js → RadioGroupSection-BIMkY1F0.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[o,t]=d.useState(""),i=[{value:"male",label:"Male"},{value:"female",label:"Female"},{value:"other",label:"Other"}],s=[{key:"prop",label:"Prop",render:l=>e.jsx("code",{className:"text-xs text-brand",children:String(l)})},{key:"type",label:"Type",render:l=>e.jsx("code",{className:"text-xs",children:String(l)})},{key:"default",label:"Default",render:l=>{const r=String(l);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],n=[{prop:"options",type:"{ value: string | number, label: string }[]",default:"required",description:"Array of radio options"},{prop:"value",type:"string | number",default:"-",description:"Currently selected value"},{prop:"onChange",type:"(value: string | number) => void",default:"-",description:"Callback when selection changes"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the radio buttons"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the radio buttons"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the radio buttons"},{prop:"direction",type:"'horizontal' | 'vertical'",default:"'vertical'",description:"Layout direction of radio buttons"},{prop:"label",type:"React.ReactNode",default:"-",description:"Group label text"},{prop:"disabled",type:"boolean",default:"false",description:"Disables all radio buttons in the group"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"React.ReactNode",default:"-",description:"Helper text displayed below the group"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"RadioGroup"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A group of radio buttons for selecting one option from multiple choices."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic RadioGroup"}),e.jsx(a.RadioGroup,{label:"Gender",options:i,value:o,onChange:l=>t(l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.RadioGroup,{label:"Size",helperText:"Select your preferred size",options:[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.RadioGroup,{label:"Priority",error:"Please select a priority",options:[{value:"low",label:"Low"},{value:"high",label:"High"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.RadioGroup,{label:"Status",disabled:!0,options:[{value:"active",label:"Active"},{value:"inactive",label:"Inactive"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Horizontal Layout"}),e.jsx(a.RadioGroup,{label:"Direction",direction:"horizontal",options:[{value:"vertical",label:"Vertical"},{value:"horizontal",label:"Horizontal"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Colors"}),e.jsx(a.RadioGroup,{label:"Color",color:"danger",options:[{value:"red",label:"Red"},{value:"blue",label:"Blue"}]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.RadioGroup,{label:"Ghost Variant",variant:"ghost",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.RadioGroup,{label:"Solid Variant",variant:"solid",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.RadioGroup,{label:"Transparent Variant",variant:"transparent",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:s,data:n})})})}),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:"typescript",code:`import { RadioGroup } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[o,t]=d.useState(""),i=[{value:"male",label:"Male"},{value:"female",label:"Female"},{value:"other",label:"Other"}],s=[{key:"prop",label:"Prop",render:l=>e.jsx("code",{className:"text-xs text-brand",children:String(l)})},{key:"type",label:"Type",render:l=>e.jsx("code",{className:"text-xs",children:String(l)})},{key:"default",label:"Default",render:l=>{const r=String(l);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],n=[{prop:"options",type:"{ value: string | number, label: string }[]",default:"required",description:"Array of radio options"},{prop:"value",type:"string | number",default:"-",description:"Currently selected value"},{prop:"onChange",type:"(value: string | number) => void",default:"-",description:"Callback when selection changes"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the radio buttons"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the radio buttons"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the radio buttons"},{prop:"direction",type:"'horizontal' | 'vertical'",default:"'vertical'",description:"Layout direction of radio buttons"},{prop:"label",type:"React.ReactNode",default:"-",description:"Group label text"},{prop:"disabled",type:"boolean",default:"false",description:"Disables all radio buttons in the group"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"React.ReactNode",default:"-",description:"Helper text displayed below the group"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"RadioGroup"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A group of radio buttons for selecting one option from multiple choices."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic RadioGroup"}),e.jsx(a.RadioGroup,{label:"Gender",options:i,value:o,onChange:l=>t(l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.RadioGroup,{label:"Size",helperText:"Select your preferred size",options:[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.RadioGroup,{label:"Priority",error:"Please select a priority",options:[{value:"low",label:"Low"},{value:"high",label:"High"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.RadioGroup,{label:"Status",disabled:!0,options:[{value:"active",label:"Active"},{value:"inactive",label:"Inactive"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Horizontal Layout"}),e.jsx(a.RadioGroup,{label:"Direction",direction:"horizontal",options:[{value:"vertical",label:"Vertical"},{value:"horizontal",label:"Horizontal"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Colors"}),e.jsx(a.RadioGroup,{label:"Color",color:"danger",options:[{value:"red",label:"Red"},{value:"blue",label:"Blue"}]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.RadioGroup,{label:"Ghost Variant",variant:"ghost",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.RadioGroup,{label:"Solid Variant",variant:"solid",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.RadioGroup,{label:"Transparent Variant",variant:"transparent",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:s,data:n})})})}),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:"typescript",code:`import { RadioGroup } from '@e-burgos/tucu-ui';
 
 const options = [
   { value: 'male', label: 'Male' },

package/{RadioGroupSection-BPp-Tp9a.mjs → RadioGroupSection-CLbIvqN6.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
 import { useState as c } from "react";
-import { T as o, C as l, a as i, o as t, B as u, c as m } from "./index-DCf83AyI.mjs";
+import { T as o, C as l, a as i, o as t, B as u, c as m } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/{RadioSection-Cl2T68su.js → RadioSection-DZD5W976.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[l,r]=d.useState(""),t=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const i=String(s);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],o=[{prop:"label",type:"React.ReactNode",default:"-",description:"Radio button label"},{prop:"value",type:"string",default:"required",description:"Radio button value"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the radio button"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the radio button"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the radio button"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the radio button"},{prop:"labelPlacement",type:"'start' | 'end'",default:"'end'",description:"Position of the label relative to the radio"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"React.ReactNode",default:"-",description:"Helper text displayed below the radio"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Radio"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A single radio button component for binary choices."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic Radio"}),e.jsx(a.Radio,{label:"Option 1",value:"option1",checked:l==="option1",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Radio,{label:"Disabled option",value:"disabled",disabled:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Radio,{label:"Primary",value:"primary",color:"primary"}),e.jsx(a.Radio,{label:"Danger",value:"danger",color:"danger"}),e.jsx(a.Radio,{label:"Success",value:"success",color:"success"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Radio,{label:"Small",value:"sm",size:"sm"}),e.jsx(a.Radio,{label:"Medium",value:"md",size:"md"}),e.jsx(a.Radio,{label:"Large",value:"lg",size:"lg"})]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Radio,{label:"Ghost Variant",value:"ghost",variant:"ghost",checked:l==="ghost",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Radio,{label:"Solid Variant",value:"solid",variant:"solid",checked:l==="solid",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Radio,{label:"Transparent Variant",value:"transparent",variant:"transparent",checked:l==="transparent",onChange:s=>r(s.target.value)})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:t,data:o})})})}),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 { Radio } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const n=()=>{const[l,r]=d.useState(""),t=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const i=String(s);return i==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:i})}},{key:"description",label:"Description"}],o=[{prop:"label",type:"React.ReactNode",default:"-",description:"Radio button label"},{prop:"value",type:"string",default:"required",description:"Radio button value"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the radio button"},{prop:"size",type:"'sm' | 'md' | 'lg' | 'xl'",default:"'md'",description:"Size of the radio button"},{prop:"color",type:"'primary' | 'secondary' | 'danger' | 'info' | 'success' | 'warning'",default:"'primary'",description:"Color theme of the radio button"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the radio button"},{prop:"labelPlacement",type:"'start' | 'end'",default:"'end'",description:"Position of the label relative to the radio"},{prop:"error",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"React.ReactNode",default:"-",description:"Helper text displayed below the radio"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Radio"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A single radio button component for binary choices."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic Radio"}),e.jsx(a.Radio,{label:"Option 1",value:"option1",checked:l==="option1",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Radio,{label:"Disabled option",value:"disabled",disabled:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Colors"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Radio,{label:"Primary",value:"primary",color:"primary"}),e.jsx(a.Radio,{label:"Danger",value:"danger",color:"danger"}),e.jsx(a.Radio,{label:"Success",value:"success",color:"success"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Different Sizes"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Radio,{label:"Small",value:"sm",size:"sm"}),e.jsx(a.Radio,{label:"Medium",value:"md",size:"md"}),e.jsx(a.Radio,{label:"Large",value:"lg",size:"lg"})]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Radio,{label:"Ghost Variant",value:"ghost",variant:"ghost",checked:l==="ghost",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Radio,{label:"Solid Variant",value:"solid",variant:"solid",checked:l==="solid",onChange:s=>r(s.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Radio,{label:"Transparent Variant",value:"transparent",variant:"transparent",checked:l==="transparent",onChange:s=>r(s.target.value)})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:t,data:o})})})}),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 { Radio } from '@e-burgos/tucu-ui';
 
 <Radio
   label="Option 1"

package/{RadioSection-CSn_sr4P.mjs → RadioSection-LW7GeXAA.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as c, jsx as e } from "react/jsx-runtime";
 import { useState as p } from "react";
-import { T as s, C as r, a as d, R as t, B as m, c as h } from "./index-DCf83AyI.mjs";
+import { T as s, C as r, a as d, R as t, B as m, c as h } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/{RevealContentSection-B4yEXfQY.mjs → RevealContentSection-PGiR5VJY.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
-import { T as t, C as n, a as i, af as r, B as p, c as m } from "./index-DCf83AyI.mjs";
+import { T as t, C as n, a as i, af as r, B as p, c as m } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{RevealContentSection-DMZRYCm2.js → RevealContentSection-kDLDHOGV.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const n=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const l=String(a);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{prop:"defaultHeight",type:"number",default:"required",description:"Default collapsed height in pixels"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to reveal/hide"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}],s=e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Typography,{tag:"p",children:"This is a long piece of content that will be collapsed by default."}),e.jsx(t.Typography,{tag:"p",children:'When the content exceeds the default height, a "Show More" button will appear.'}),e.jsx(t.Typography,{tag:"p",children:"Clicking the button will expand the content to show everything."}),e.jsx(t.Typography,{tag:"p",children:'You can then click "Show Less" to collapse it back to the default height.'}),e.jsx(t.Typography,{tag:"p",children:"This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view."})]});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"RevealContent"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.'})]}),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:"Default Height 100px"}),e.jsx(t.RevealContent,{defaultHeight:100,children:s})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 150px"}),e.jsx(t.RevealContent,{defaultHeight:150,children:s})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:n,data:r})})})}),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 { RevealContent, Typography } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const n=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const l=String(a);return l==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:l})}},{key:"description",label:"Description"}],r=[{prop:"defaultHeight",type:"number",default:"required",description:"Default collapsed height in pixels"},{prop:"children",type:"React.ReactNode",default:"required",description:"Content to reveal/hide"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"}],s=e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Typography,{tag:"p",children:"This is a long piece of content that will be collapsed by default."}),e.jsx(t.Typography,{tag:"p",children:'When the content exceeds the default height, a "Show More" button will appear.'}),e.jsx(t.Typography,{tag:"p",children:"Clicking the button will expand the content to show everything."}),e.jsx(t.Typography,{tag:"p",children:'You can then click "Show Less" to collapse it back to the default height.'}),e.jsx(t.Typography,{tag:"p",children:"This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view."})]});return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"RevealContent"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.'})]}),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:"Default Height 100px"}),e.jsx(t.RevealContent,{defaultHeight:100,children:s})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 150px"}),e.jsx(t.RevealContent,{defaultHeight:150,children:s})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:n,data:r})})})}),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 { RevealContent, Typography } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <RevealContent defaultHeight={100}>

package/{RouteConfigurationSection-DqLJ2vbf.mjs → RouteConfigurationSection-BmwVvMMw.mjs}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { C as a, a as r, T as n, c as o } from "./index-DCf83AyI.mjs";
+import { C as a, a as r, T as n, c as o } from "./index-Hq6IUBmn.mjs";
 import { Settings as i, Play as s } from "lucide-react";
 import "react-router-dom";
 import "react";

package/{RouteConfigurationSection-CoQn38dJ.js → RouteConfigurationSection-DR7u1n3x.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BoEJRnmP.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Route Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(n.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Interface"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For single applications, routes are defined using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"StandaloneAppRoutesMenuItem"})," ","interface which extends"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"IMenuItem"}),"."]}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const o=()=>e.jsx("div",{className:"space-y-8",children:e.jsx(t.CardContainer,{children:e.jsx(t.CardTitle,{title:"Route Configuration",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(n.Settings,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(t.Typography,{tag:"h4",className:"font-semibold",children:"StandaloneAppRoutesMenuItem Interface"})]}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:["For single applications, routes are defined using the"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"StandaloneAppRoutesMenuItem"})," ","interface which extends"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"IMenuItem"}),"."]}),e.jsx(t.CodeBlock,{language:"typescript",code:`interface StandaloneAppRoutesMenuItem extends Omit<IMenuItem, 'dropdownItems'> {
   component: JSX.Element;        // The component to render
   dropdownItems?: StandaloneAppRoutesMenuItem[]; // Optional sub-routes
 }

package/{ScrollToTopSection-DY_WQiIp.js → ScrollToTopSection-BWEgLKlr.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],a=[{prop:"top",type:"string | number",default:"undefined",description:"Distance from the top of the viewport (in pixels or Tailwind class). If undefined, uses bottom instead."},{prop:"right",type:"string | number",default:"24",description:"Distance from the right of the viewport (in pixels or Tailwind class)."},{prop:"bottom",type:"string | number",default:"24",description:"Distance from the bottom of the viewport (in pixels or Tailwind class)."},{prop:"left",type:"string | number",default:"undefined",description:"Distance from the left of the viewport (in pixels or Tailwind class). If undefined, uses right instead."},{prop:"showAfter",type:"number",default:"400",description:"Minimum scroll position (in pixels) to show the button."},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the button."},{prop:"className",type:"string",default:"undefined",description:"Custom className for the button."}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ScrollToTop"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A utility component that displays a floating button to scroll back to the top of the page. It automatically scrolls to top when the route changes and shows a button when the user scrolls down."})]}),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:"Default Usage"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"Add this component to your router or app component. By default, it displays a button in the bottom-right corner (24px from edges) that appears when you scroll down more than 400px."}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"The button automatically scrolls to the top when clicked and also scrolls to top whenever the route changes."}),e.jsx("div",{className:"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg",children:e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"Scroll down on this page to see the button appear in the bottom-right corner."})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Position"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"You can customize the button position using the position props."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-left:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-right:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} right={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-left:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-right:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} right={20} />"})]})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Size and Threshold"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"Control when the button appears and its size."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Small button:"})," ",e.jsx("code",{children:'<ScrollToTop size="small" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Large button:"})," ",e.jsx("code",{children:'<ScrollToTop size="large" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Show after 200px:"})," ",e.jsx("code",{children:"<ScrollToTop showAfter={200} />"})]})]})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:r,data:a})})})}),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 { ScrollToTop } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],a=[{prop:"top",type:"string | number",default:"undefined",description:"Distance from the top of the viewport (in pixels or Tailwind class). If undefined, uses bottom instead."},{prop:"right",type:"string | number",default:"24",description:"Distance from the right of the viewport (in pixels or Tailwind class)."},{prop:"bottom",type:"string | number",default:"24",description:"Distance from the bottom of the viewport (in pixels or Tailwind class)."},{prop:"left",type:"string | number",default:"undefined",description:"Distance from the left of the viewport (in pixels or Tailwind class). If undefined, uses right instead."},{prop:"showAfter",type:"number",default:"400",description:"Minimum scroll position (in pixels) to show the button."},{prop:"size",type:"'small' | 'medium' | 'large'",default:"'medium'",description:"Size of the button."},{prop:"className",type:"string",default:"undefined",description:"Custom className for the button."}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ScrollToTop"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A utility component that displays a floating button to scroll back to the top of the page. It automatically scrolls to top when the route changes and shows a button when the user scrolls down."})]}),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:"Default Usage"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"Add this component to your router or app component. By default, it displays a button in the bottom-right corner (24px from edges) that appears when you scroll down more than 400px."}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"The button automatically scrolls to the top when clicked and also scrolls to top whenever the route changes."}),e.jsx("div",{className:"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg",children:e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"Scroll down on this page to see the button appear in the bottom-right corner."})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Position"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"You can customize the button position using the position props."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-left:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"top-right:"})," ",e.jsx("code",{children:"<ScrollToTop top={20} right={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-left:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} left={20} />"})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"bottom-right:"})," ",e.jsx("code",{children:"<ScrollToTop bottom={20} right={20} />"})]})]})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Custom Size and Threshold"}),e.jsx(t.Typography,{tag:"p",className:"mb-4",children:"Control when the button appears and its size."}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Small button:"})," ",e.jsx("code",{children:'<ScrollToTop size="small" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Large button:"})," ",e.jsx("code",{children:'<ScrollToTop size="large" />'})]}),e.jsxs(t.Typography,{tag:"p",children:[e.jsx("code",{className:"text-brand",children:"Show after 200px:"})," ",e.jsx("code",{children:"<ScrollToTop showAfter={200} />"})]})]})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:r,data:a})})})}),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 { ScrollToTop } from '@e-burgos/tucu-ui';
 import { BrowserRouter } from 'react-router-dom';
 
 function App() {

package/{ScrollToTopSection-bsPO6VoN.mjs → ScrollToTopSection-CXx2x8gR.mjs}

@@ -1,5 +1,5 @@
 import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as t, C as r, a as s, B as n, c } from "./index-DCf83AyI.mjs";
+import { T as t, C as r, a as s, B as n, c } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{ScrollbarSection-f9m-PsRb.js → ScrollbarSection-DsoKO-RW.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const t=[{key:"prop",label:"Prop",render:l=>e.jsx("code",{className:"text-xs text-brand",children:String(l)})},{key:"type",label:"Type",render:l=>e.jsx("code",{className:"text-xs",children:String(l)})},{key:"default",label:"Default",render:l=>{const a=String(l);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],c=[{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display inside the scrollbar"},{prop:"autoHide",type:"'never' | 'scroll' | 'leave' | 'move'",default:"'scroll'",description:"When to hide the scrollbar"},{prop:"direction",type:"'horizontal' | 'vertical' | 'both'",default:"'vertical'",description:"Scroll direction"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"},{prop:"scrollbarStyle",type:"{ track?: CSSProperties; thumb?: CSSProperties }",default:"-",description:"Custom styles for scrollbar track and thumb"}],s=Array.from({length:20},(l,a)=>e.jsx("div",{className:"p-4 border-b",children:e.jsxs(r.Typography,{tag:"p",children:["Content item ",a+1]})},a));return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Scrollbar"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A customizable scrollbar component with auto-hide functionality and custom styling options."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Vertical Scrollbar"}),e.jsx(r.Scrollbar,{className:"h-48",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Auto Hide on Leave"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"leave",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Never Hide"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"never",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Custom Styled"}),e.jsx(r.Scrollbar,{className:"h-48",scrollbarStyle:{track:{backgroundColor:"transparent"},thumb:{borderRadius:"8px",width:"8px"}},children:e.jsx("div",{children:s.slice(0,10)})})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:t,data:c})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { Scrollbar } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const t=[{key:"prop",label:"Prop",render:l=>e.jsx("code",{className:"text-xs text-brand",children:String(l)})},{key:"type",label:"Type",render:l=>e.jsx("code",{className:"text-xs",children:String(l)})},{key:"default",label:"Default",render:l=>{const a=String(l);return a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:a})}},{key:"description",label:"Description"}],c=[{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display inside the scrollbar"},{prop:"autoHide",type:"'never' | 'scroll' | 'leave' | 'move'",default:"'scroll'",description:"When to hide the scrollbar"},{prop:"direction",type:"'horizontal' | 'vertical' | 'both'",default:"'vertical'",description:"Scroll direction"},{prop:"className",type:"string",default:"-",description:"Additional CSS classes"},{prop:"scrollbarStyle",type:"{ track?: CSSProperties; thumb?: CSSProperties }",default:"-",description:"Custom styles for scrollbar track and thumb"}],s=Array.from({length:20},(l,a)=>e.jsx("div",{className:"p-4 border-b",children:e.jsxs(r.Typography,{tag:"p",children:["Content item ",a+1]})},a));return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Scrollbar"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A customizable scrollbar component with auto-hide functionality and custom styling options."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Vertical Scrollbar"}),e.jsx(r.Scrollbar,{className:"h-48",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Auto Hide on Leave"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"leave",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Never Hide"}),e.jsx(r.Scrollbar,{className:"h-48",autoHide:"never",children:e.jsx("div",{children:s.slice(0,10)})})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Custom Styled"}),e.jsx(r.Scrollbar,{className:"h-48",scrollbarStyle:{track:{backgroundColor:"transparent"},thumb:{borderRadius:"8px",width:"8px"}},children:e.jsx("div",{children:s.slice(0,10)})})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:t,data:c})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { Scrollbar } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <Scrollbar className="h-48">

package/{ScrollbarSection-BQLoKdfQ.mjs → ScrollbarSection-Dubf9f65.mjs}

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { T as r, C as a, a as o, J as i, B as h, c as p } from "./index-DCf83AyI.mjs";
+import { T as r, C as a, a as o, J as i, B as h, c as p } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react";

package/{SelectSection-BN9qlOW6.mjs → SelectSection-Btr390sY.mjs}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { T as l, C as t, a as o, S as r, B as h, c as u } from "./index-DCf83AyI.mjs";
+import { T as l, C as t, a as o, S as r, B as h, c as u } from "./index-Hq6IUBmn.mjs";
 import "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/{SelectSection-BSY-VzxD.js → SelectSection-D85H1YXr.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),a=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[r,i]=c.useState(void 0),l=[{name:"Argentina",value:"ar"},{name:"Brasil",value:"br"},{name:"Chile",value:"cl"},{name:"Colombia",value:"co"},{name:"México",value:"mx"}],n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const s=String(t);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],o=[{prop:"options",type:"SelectOption[]",default:"required",description:"Array of select options"},{prop:"selectedOption",type:"SelectOption",default:"-",description:"Currently selected option"},{prop:"onChange",type:"(option: SelectOption) => void",default:"-",description:"Callback when selection changes"},{prop:"onSelect",type:"(value: string) => void",default:"-",description:"Callback with selected value string"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the select"},{prop:"label",type:"string",default:"-",description:"Field label text"},{prop:"placeholder",type:"string",default:"-",description:"Placeholder text"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the select field"},{prop:"required",type:"boolean",default:"false",description:"Marks the field as required"},{prop:"errorMessage",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the select"},{prop:"value",type:"string",default:"-",description:"String value for react-hook-form integration"},{prop:"name",type:"string",default:"-",description:"Name attribute for form submission"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Select"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A dropdown select component for choosing from a list of options."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic Select"}),e.jsx(a.Select,{label:"Country",placeholder:"Select a country",options:l,selectedOption:r,onChange:i})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Select,{label:"Language",placeholder:"Select a language",helperText:"Choose your preferred language",options:[{name:"English",value:"en"},{name:"Spanish",value:"es"},{name:"French",value:"fr"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Select,{label:"Category",placeholder:"Select a category",errorMessage:"Category is required",options:[{name:"Option 1",value:"opt1"},{name:"Option 2",value:"opt2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Select,{label:"Status",placeholder:"Select status",disabled:!0,options:[{name:"Active",value:"active"},{name:"Inactive",value:"inactive"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Required Field"}),e.jsx(a.Select,{label:"Priority",placeholder:"Select priority",required:!0,options:[{name:"Low",value:"low"},{name:"Medium",value:"medium"},{name:"High",value:"high"}]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Select,{label:"Ghost Variant",placeholder:"Select option",variant:"ghost",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Select,{label:"Solid Variant",placeholder:"Select option",variant:"solid",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Select,{label:"Transparent Variant",placeholder:"Select option",variant:"transparent",options:l})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:n,data:o})})})}),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 { Select } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),a=require("./index-CjRk4ezu.js");require("lucide-react");require("react-router-dom");require("react-dom");const d=()=>{const[r,i]=c.useState(void 0),l=[{name:"Argentina",value:"ar"},{name:"Brasil",value:"br"},{name:"Chile",value:"cl"},{name:"Colombia",value:"co"},{name:"México",value:"mx"}],n=[{key:"prop",label:"Prop",render:t=>e.jsx("code",{className:"text-xs text-brand",children:String(t)})},{key:"type",label:"Type",render:t=>e.jsx("code",{className:"text-xs",children:String(t)})},{key:"default",label:"Default",render:t=>{const s=String(t);return s==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:s})}},{key:"description",label:"Description"}],o=[{prop:"options",type:"SelectOption[]",default:"required",description:"Array of select options"},{prop:"selectedOption",type:"SelectOption",default:"-",description:"Currently selected option"},{prop:"onChange",type:"(option: SelectOption) => void",default:"-",description:"Callback when selection changes"},{prop:"onSelect",type:"(value: string) => void",default:"-",description:"Callback with selected value string"},{prop:"variant",type:"'ghost' | 'solid' | 'transparent'",default:"'ghost'",description:"Visual variant of the select"},{prop:"label",type:"string",default:"-",description:"Field label text"},{prop:"placeholder",type:"string",default:"-",description:"Placeholder text"},{prop:"disabled",type:"boolean",default:"false",description:"Disables the select field"},{prop:"required",type:"boolean",default:"false",description:"Marks the field as required"},{prop:"errorMessage",type:"string",default:"-",description:"Error message to display"},{prop:"helperText",type:"string",default:"-",description:"Helper text displayed below the select"},{prop:"value",type:"string",default:"-",description:"String value for react-hook-form integration"},{prop:"name",type:"string",default:"-",description:"Name attribute for form submission"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Select"}),e.jsx(a.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A dropdown select component for choosing from a list of options."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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:"Basic Select"}),e.jsx(a.Select,{label:"Country",placeholder:"Select a country",options:l,selectedOption:r,onChange:i})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Select,{label:"Language",placeholder:"Select a language",helperText:"Choose your preferred language",options:[{name:"English",value:"en"},{name:"Spanish",value:"es"},{name:"French",value:"fr"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Select,{label:"Category",placeholder:"Select a category",errorMessage:"Category is required",options:[{name:"Option 1",value:"opt1"},{name:"Option 2",value:"opt2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Select,{label:"Status",placeholder:"Select status",disabled:!0,options:[{name:"Active",value:"active"},{name:"Inactive",value:"inactive"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Required Field"}),e.jsx(a.Select,{label:"Priority",placeholder:"Select priority",required:!0,options:[{name:"Low",value:"low"},{name:"Medium",value:"medium"},{name:"High",value:"high"}]})]})]})})})}),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:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.Select,{label:"Ghost Variant",placeholder:"Select option",variant:"ghost",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Select,{label:"Solid Variant",placeholder:"Select option",variant:"solid",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Select,{label:"Transparent Variant",placeholder:"Select option",variant:"transparent",options:l})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:n,data:o})})})}),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 { Select } from '@e-burgos/tucu-ui';
 
 const options = [
   { name: 'Argentina', value: 'ar' },