@e-burgos/tucu-ui 2.0.9 → 2.0.10

package/documentation/{InputSearcherSection-DMtIqnZm.js → InputSearcherSection-DFk3eBSo.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-BaGqriuz.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[o,n]=c.useState(void 0),t=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],i=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],l=[{name:"React",value:"react"},{name:"Vue",value:"vue"},{name:"Angular",value:"angular"},{name:"Svelte",value:"svelte"},{name:"Next.js",value:"nextjs"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"InputSearcher",description:"A search input component with dropdown suggestions and filtering capabilities.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(d.Search,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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 InputSearcher"}),e.jsx(a.InputSearcher,{label:"Search Framework",placeholder:"Search frameworks",options:l,initialValue:o?.value,onOptionSelect:r=>{Array.isArray(r)||n(r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Multiple Selection"}),e.jsx(a.InputSearcher,{label:"Select Frameworks",placeholder:"Select frameworks",options:l,multiple:!0,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom No Matches Message"}),e.jsx(a.InputSearcher,{label:"Search",placeholder:"Search...",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.InputSearcher,{label:"Search",disabled:!0,placeholder:"Disabled",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),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.InputSearcher,{label:"Ghost Variant",placeholder:"Search...",variant:"ghost",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.InputSearcher,{label:"Solid Variant",placeholder:"Search...",variant:"solid",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.InputSearcher,{label:"Transparent Variant",placeholder:"Search...",variant:"transparent",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:t.map(({label:r,color:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search...",color:s,options:l})]},s))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:i.map(({label:r,size:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search frameworks",size:s,options:l})]},s))})})})}),e.jsx(a.PropPlayground,{componentName:"InputSearcher",defaultValues:{label:"Preview Search",placeholder:"Search frameworks",variant:"ghost",color:"primary",size:"md",multiple:!1,noMatchesMessage:"No results found",disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the search input"}],includeProps:["label","placeholder","variant","color","size","multiple","noMatchesMessage","disabled"],excludeProps:["options","initialValue","onOptionSelect"],children:r=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.InputSearcher,{...r,placeholder:r.placeholder||"Search frameworks",options:l})})}),e.jsx(a.AutoPropsTable,{componentName:"InputSearcher"}),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 { InputSearcher } 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-DMs_SmPq.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[o,n]=c.useState(void 0),t=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],i=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],l=[{name:"React",value:"react"},{name:"Vue",value:"vue"},{name:"Angular",value:"angular"},{name:"Svelte",value:"svelte"},{name:"Next.js",value:"nextjs"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"InputSearcher",description:"A search input component with dropdown suggestions and filtering capabilities.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(d.Search,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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 InputSearcher"}),e.jsx(a.InputSearcher,{label:"Search Framework",placeholder:"Search frameworks",options:l,initialValue:o?.value,onOptionSelect:r=>{Array.isArray(r)||n(r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Multiple Selection"}),e.jsx(a.InputSearcher,{label:"Select Frameworks",placeholder:"Select frameworks",options:l,multiple:!0,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom No Matches Message"}),e.jsx(a.InputSearcher,{label:"Search",placeholder:"Search...",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.InputSearcher,{label:"Search",disabled:!0,placeholder:"Disabled",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),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.InputSearcher,{label:"Ghost Variant",placeholder:"Search...",variant:"ghost",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.InputSearcher,{label:"Solid Variant",placeholder:"Search...",variant:"solid",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.InputSearcher,{label:"Transparent Variant",placeholder:"Search...",variant:"transparent",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:t.map(({label:r,color:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search...",color:s,options:l})]},s))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:i.map(({label:r,size:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search frameworks",size:s,options:l})]},s))})})})}),e.jsx(a.PropPlayground,{componentName:"InputSearcher",defaultValues:{label:"Preview Search",placeholder:"Search frameworks",variant:"ghost",color:"primary",size:"md",multiple:!1,noMatchesMessage:"No results found",disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the search input"}],includeProps:["label","placeholder","variant","color","size","multiple","noMatchesMessage","disabled"],excludeProps:["options","initialValue","onOptionSelect"],children:r=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.InputSearcher,{...r,placeholder:r.placeholder||"Search frameworks",options:l})})}),e.jsx(a.AutoPropsTable,{componentName:"InputSearcher"}),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 { InputSearcher } from '@e-burgos/tucu-ui';
 
 const options = [
   { name: 'React', value: 'react' },

package/documentation/{InputSection-DAQlSKNm.js → InputSection-B5ty4Onb.js}

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as b, jsx as e } from "react/jsx-runtime";
 import { useState as o } from "react";
-import { H as g, C as a, a as i, T as t, I as r, P as N, A as v, c as y } from "../index-lfg6LZ1p.js";
+import { H as g, C as a, a as i, T as t, I as r, P as N, A as v, c as y } from "../index-19KsCnyX.js";
 import { TextCursorInput as f } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{InputSection-WnlrF_LD.js → InputSection-DLQ6hyWl.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),a=require("../index-BaGqriuz.js"),p=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[t,n]=s.useState(""),[i,o]=s.useState(""),d=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Input",description:"A versatile input component that supports various input types including text, email, password, date, and more.",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-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(p.TextCursorInput,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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 Input"}),e.jsx(a.Input,{label:"Name",placeholder:"Enter your name",value:t,onChange:l=>n(l.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Input,{label:"Email",type:"email",placeholder:"Enter your email",helperText:"We'll never share your email"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Input,{label:"Password",type:"password",placeholder:"Enter password",error:"Password is required"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Input,{label:"Disabled",placeholder:"Disabled input",disabled:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Date Input"}),e.jsx(a.Input,{label:"Date",type:"date",dateFormat:"DD-MM-YYYY"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Number Input"}),e.jsx(a.Input,{label:"Age",type:"number",placeholder:"Enter age"})]})]})})})}),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.Input,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Input,{label:"Solid Variant",placeholder:"Enter text",variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Input,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:d.map(({label:l,color:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",color:r})]},r))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:c.map(({label:l,size:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",size:r})]},r))})})})}),e.jsx(a.PropPlayground,{componentName:"Input",defaultValues:{label:"Preview Input",placeholder:"Enter text",variant:"ghost",color:"primary",size:"md",type:"text",dateFormat:"DD/MM/YYYY",locale:"en-US",helperText:"",error:"",useUppercaseLabel:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the input"},{name:"color",type:"select",options:["primary","secondary","danger","info","success","warning"],description:"Color treatment applied to the control"},{name:"type",type:"select",options:["text","email","password","number","date"],description:"Native input type used for the preview"},{name:"disabled",type:"boolean",description:"Disables the input and prevents interaction"}],includeProps:["label","placeholder","variant","color","size","type","dateFormat","locale","helperText","error","useUppercaseLabel","disabled"],excludeProps:["inputClassName","labelClassName","suffix","suffixClassName","icon","dateFormat","locale"],children:l=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.Input,{...l,placeholder:l.placeholder||"Enter text",value:i,onChange:r=>o(r.target.value)})})}),e.jsx(a.AutoPropsTable,{componentName:"Input"}),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 { Input } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),a=require("../index-DMs_SmPq.js"),p=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[t,n]=s.useState(""),[i,o]=s.useState(""),d=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Input",description:"A versatile input component that supports various input types including text, email, password, date, and more.",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-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(p.TextCursorInput,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"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 Input"}),e.jsx(a.Input,{label:"Name",placeholder:"Enter your name",value:t,onChange:l=>n(l.target.value)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Input,{label:"Email",type:"email",placeholder:"Enter your email",helperText:"We'll never share your email"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Input,{label:"Password",type:"password",placeholder:"Enter password",error:"Password is required"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Input,{label:"Disabled",placeholder:"Disabled input",disabled:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Date Input"}),e.jsx(a.Input,{label:"Date",type:"date",dateFormat:"DD-MM-YYYY"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Number Input"}),e.jsx(a.Input,{label:"Age",type:"number",placeholder:"Enter age"})]})]})})})}),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.Input,{label:"Ghost Variant",placeholder:"Enter text",variant:"ghost"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Input,{label:"Solid Variant",placeholder:"Enter text",variant:"solid"})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Input,{label:"Transparent Variant",placeholder:"Enter text",variant:"transparent"})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:d.map(({label:l,color:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",color:r})]},r))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:c.map(({label:l,size:r})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:l}),e.jsx(a.Input,{label:`${l} Input`,placeholder:"Enter text",size:r})]},r))})})})}),e.jsx(a.PropPlayground,{componentName:"Input",defaultValues:{label:"Preview Input",placeholder:"Enter text",variant:"ghost",color:"primary",size:"md",type:"text",dateFormat:"DD/MM/YYYY",locale:"en-US",helperText:"",error:"",useUppercaseLabel:!1,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered inside the input"},{name:"color",type:"select",options:["primary","secondary","danger","info","success","warning"],description:"Color treatment applied to the control"},{name:"type",type:"select",options:["text","email","password","number","date"],description:"Native input type used for the preview"},{name:"disabled",type:"boolean",description:"Disables the input and prevents interaction"}],includeProps:["label","placeholder","variant","color","size","type","dateFormat","locale","helperText","error","useUppercaseLabel","disabled"],excludeProps:["inputClassName","labelClassName","suffix","suffixClassName","icon","dateFormat","locale"],children:l=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.Input,{...l,placeholder:l.placeholder||"Enter text",value:i,onChange:r=>o(r.target.value)})})}),e.jsx(a.AutoPropsTable,{componentName:"Input"}),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 { Input } from '@e-burgos/tucu-ui';
 
 // Basic usage
 <Input

package/documentation/{KeyValueRowSection-Ctph5iO5.js → KeyValueRowSection-BgKXD67j.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"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"KeyValueRow",description:`A simple row component for displaying label-value pairs, ideal for
+"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 r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"KeyValueRow",description:`A simple row component for displaying label-value pairs, ideal for
           detail panels, summaries, and settings views.`,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-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Rows3,{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:"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-6",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic Usage"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Name",value:"John Doe"}),e.jsx(a.KeyValueRow,{label:"Email",value:"john@example.com"}),e.jsx(a.KeyValueRow,{label:"Role",value:"Administrator"}),e.jsx(a.KeyValueRow,{label:"Status",value:"Active"})]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Monospace & Accent"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Balance",value:"$12,450.00",mono:!0}),e.jsx(a.KeyValueRow,{label:"Interest Rate",value:"3.5%",mono:!0,accent:!0}),e.jsx(a.KeyValueRow,{label:"Account ID",value:"ACC-0042891",mono:!0}),e.jsx(a.KeyValueRow,{label:"Next Payment",value:"Jun 15, 2026",accent:!0})]})]}),e.jsxs(a.CardContainer,{className:"p-4 md:col-span-2",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Custom Values (ReactNode)"}),e.jsxs("div",{className:"divide-y divide-gray-200/50 dark:divide-gray-700/50",children:[e.jsx(a.KeyValueRow,{label:"Health",value:e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-green-500 text-xs font-medium",children:[e.jsx("span",{className:"h-2 w-2 rounded-full bg-green-500"}),"Healthy"]})}),e.jsx(a.KeyValueRow,{label:"Progress",value:e.jsx("div",{className:"w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden",children:e.jsx("div",{className:"h-full w-3/4 bg-brand rounded-full"})})}),e.jsx(a.KeyValueRow,{label:"Tags",value:e.jsxs("div",{className:"flex gap-1",children:[e.jsx("span",{className:"px-1.5 py-0.5 text-[10px] rounded bg-brand/10 text-brand",children:"React"}),e.jsx("span",{className:"px-1.5 py-0.5 text-[10px] rounded bg-blue-500/10 text-blue-500",children:"TypeScript"})]})})]})]})]})})})}),e.jsx(a.PropPlayground,{componentName:"KeyValueRow",title:"KeyValueRow Playground",defaultValues:{label:"Status",value:"Active",accent:!1,mono:!1},excludeProps:["className"],children:l=>e.jsx(a.KeyValueRow,{...l})}),e.jsx(a.AutoPropsTable,{componentName:"KeyValueRow"}),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 { KeyValueRow } from '@e-burgos/tucu-ui';
 
 // Basic

package/documentation/{KeyValueRowSection-BjXEg9g3.js → KeyValueRowSection-CJWvh1z_.js}

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

package/documentation/{KeyboardNavigationSection-BgP2RBJx.js → KeyboardNavigationSection-B38QXuO1.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"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const s=[{category:"General",items:[{key:"Tab",action:"Move focus to next interactive element"},{key:"Shift + Tab",action:"Move focus to previous element"},{key:"Enter / Space",action:"Activate focused button or link"},{key:"Escape",action:"Close Modal, Drawer, Select dropdown"}]},{category:"Tabs Component",items:[{key:"ArrowRight",action:"Focus next tab"},{key:"ArrowLeft",action:"Focus previous tab"},{key:"Home",action:"Focus first tab"},{key:"End",action:"Focus last tab"}]},{category:"Select / Dropdown",items:[{key:"ArrowDown",action:"Open dropdown / highlight next option"},{key:"ArrowUp",action:"Highlight previous option"},{key:"Enter / Space",action:"Select highlighted option"},{key:"Escape",action:"Close dropdown, restore focus to trigger"}]},{category:"Modal & Drawer",items:[{key:"Escape",action:"Close the dialog"},{key:"Tab (Drawer)",action:"Cycles within focus trap"},{key:"Shift+Tab (Drawer)",action:"Reverse cycle within trap"},{key:"Tab (Modal)",action:"Standard focus movement (no trap)"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Keyboard Navigation",description:"Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Keyboard,{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:"Keyboard Shortcuts"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Keyboard mappings for each component category"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:s.map((a,r)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category}),e.jsx("div",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("div",{className:"flex items-center justify-between gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0",children:[e.jsx("code",{className:"text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap",children:o.key}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400 text-right",children:o.action})]},n))})]})},r))})]}),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:"Usage Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Components that respond to keyboard interactions"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Button keyboard interaction
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const s=[{category:"General",items:[{key:"Tab",action:"Move focus to next interactive element"},{key:"Shift + Tab",action:"Move focus to previous element"},{key:"Enter / Space",action:"Activate focused button or link"},{key:"Escape",action:"Close Modal, Drawer, Select dropdown"}]},{category:"Tabs Component",items:[{key:"ArrowRight",action:"Focus next tab"},{key:"ArrowLeft",action:"Focus previous tab"},{key:"Home",action:"Focus first tab"},{key:"End",action:"Focus last tab"}]},{category:"Select / Dropdown",items:[{key:"ArrowDown",action:"Open dropdown / highlight next option"},{key:"ArrowUp",action:"Highlight previous option"},{key:"Enter / Space",action:"Select highlighted option"},{key:"Escape",action:"Close dropdown, restore focus to trigger"}]},{category:"Modal & Drawer",items:[{key:"Escape",action:"Close the dialog"},{key:"Tab (Drawer)",action:"Cycles within focus trap"},{key:"Shift+Tab (Drawer)",action:"Reverse cycle within trap"},{key:"Tab (Modal)",action:"Standard focus movement (no trap)"}]}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Keyboard Navigation",description:"Every interactive component supports full keyboard operation. Users can navigate, activate, and dismiss elements without a mouse.",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-purple-500 via-violet-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.Keyboard,{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:"Keyboard Shortcuts"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Keyboard mappings for each component category"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:s.map((a,r)=>e.jsx(t.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsx(t.Typography,{tag:"h3",className:"font-semibold text-lg",children:a.category}),e.jsx("div",{className:"space-y-2",children:a.items.map((o,n)=>e.jsxs("div",{className:"flex items-center justify-between gap-2 py-1 border-b border-[var(--color-border)] last:border-0",children:[e.jsx("code",{className:"text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap",children:o.key}),e.jsx(t.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400 text-right",children:o.action})]},n))})]})},r))})]}),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:"Usage Examples"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Components that respond to keyboard interactions"})]}),e.jsx(t.CodeBlock,{language:"tsx",code:`// Button keyboard interaction
 <Button onClick={handleAction} aria-label="Submit form">
   Submit
 </Button>

package/documentation/{KeyboardNavigationSection-BcQUUxeW.js → KeyboardNavigationSection-B8IX8HhB.js}

@@ -1,10 +1,10 @@
 import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { H as c, T as a, C as l, c as d } from "../index-lfg6LZ1p.js";
+import { H as c, T as a, C as l, c as d } from "../index-19KsCnyX.js";
 import { Keyboard as m } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const k = () => /* @__PURE__ */ t(i, { children: [
+const f = () => /* @__PURE__ */ t(i, { children: [
   /* @__PURE__ */ e(
     c,
     {
@@ -67,7 +67,7 @@ const k = () => /* @__PURE__ */ t(i, { children: [
       /* @__PURE__ */ e("div", { className: "space-y-2", children: o.items.map((r, n) => /* @__PURE__ */ t(
         "div",
         {
-          className: "flex items-center justify-between gap-2 py-1 border-b border-gray-100 dark:border-gray-800 last:border-0",
+          className: "flex items-center justify-between gap-2 py-1 border-b border-[var(--color-border)] last:border-0",
           children: [
             /* @__PURE__ */ e("code", { className: "text-xs sm:text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded font-mono whitespace-nowrap", children: r.key }),
             /* @__PURE__ */ e(
@@ -126,5 +126,5 @@ const k = () => /* @__PURE__ */ t(i, { children: [
   ] })
 ] });
 export {
-  k as default
+  f as default
 };

package/documentation/{LayoutPrinciplesSection-DZgjhU-5.js → LayoutPrinciplesSection-Dtv-aHj6.js}

@@ -1,5 +1,5 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { H as c, C as l, a as d, T as i, K as n } from "../index-lfg6LZ1p.js";
+import { H as c, C as l, a as d, T as i, K as n } from "../index-19KsCnyX.js";
 import { Layout as t, Layers3 as m } from "lucide-react";
 import "react-router-dom";
 import "react";
@@ -91,7 +91,7 @@ const f = () => {
         /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: r.map((s) => /* @__PURE__ */ e(
           "div",
           {
-            className: "space-y-3 p-4 bg-muted/20 rounded-lg border border-gray-200 dark:border-gray-700",
+            className: "space-y-3 p-4 bg-muted/20 rounded-lg border border-border",
             children: /* @__PURE__ */ a("div", { className: "space-y-1", children: [
               /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
                 /* @__PURE__ */ e(n, { variant: "outline", className: "font-mono", children: s.name }),

package/documentation/{LayoutPrinciplesSection-CZE5j4TD.js → LayoutPrinciplesSection-TN7sNEHN.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const l=[{name:"xs",value:"480px",description:"Extra small devices"},{name:"sm",value:"640px",description:"Small devices (landscape phones)"},{name:"md",value:"768px",description:"Medium devices (tablets)"},{name:"lg",value:"1024px",description:"Large devices (desktops)"},{name:"xl",value:"1280px",description:"Extra large devices"},{name:"2xl",value:"1440px",description:"2X large screens"},{name:"3xl",value:"1780px",description:"3X large screens"},{name:"4xl",value:"2160px",description:"4X large screens (4K UHD)"}],d=[{name:"Base",value:"0",description:"Default layer for most elements"},{name:"Dropdown",value:"10",description:"Dropdown menus and popovers"},{name:"Sticky",value:"20",description:"Sticky positioned elements"},{name:"Fixed",value:"30",description:"Fixed positioned elements"},{name:"Modal Backdrop",value:"40",description:"Modal overlay backgrounds"},{name:"Modal",value:"50",description:"Modal dialogs and drawers"},{name:"Popover",value:"60",description:"Tooltips and popovers"},{name:"Toast",value:"70",description:"Toast notifications"},{name:"Tooltip",value:"80",description:"Tooltips (highest priority)"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(s.HeroCard,{title:"Layout Principles",description:"Responsive design patterns and layout guidelines for consistent experiences.",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(i.Layout,{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("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Responsive Breakpoints",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(i.Layout,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Responsive Breakpoints"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:l.map(a=>e.jsx("div",{className:"space-y-3 p-4 bg-muted/20 rounded-lg border border-gray-200 dark:border-gray-700",children:e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono",children:a.name}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.description})]}),e.jsx("div",{className:"space-y-1",children:e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-sm font-semibold",children:["Min-width: ",a.value]})})]})},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Z-Index Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md",children:e.jsx(i.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Z-Index Scale"})]}),e.jsx("div",{className:"space-y-2",children:d.map(a=>e.jsx("div",{className:"flex items-center justify-between p-3 bg-muted/20 rounded",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono w-12 justify-center",children:a.value}),e.jsxs("div",{children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-sm text-muted-foreground",children:a.description})]})]})},a.name))})]})})})]})]})};exports.default=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const l=[{name:"xs",value:"480px",description:"Extra small devices"},{name:"sm",value:"640px",description:"Small devices (landscape phones)"},{name:"md",value:"768px",description:"Medium devices (tablets)"},{name:"lg",value:"1024px",description:"Large devices (desktops)"},{name:"xl",value:"1280px",description:"Extra large devices"},{name:"2xl",value:"1440px",description:"2X large screens"},{name:"3xl",value:"1780px",description:"3X large screens"},{name:"4xl",value:"2160px",description:"4X large screens (4K UHD)"}],d=[{name:"Base",value:"0",description:"Default layer for most elements"},{name:"Dropdown",value:"10",description:"Dropdown menus and popovers"},{name:"Sticky",value:"20",description:"Sticky positioned elements"},{name:"Fixed",value:"30",description:"Fixed positioned elements"},{name:"Modal Backdrop",value:"40",description:"Modal overlay backgrounds"},{name:"Modal",value:"50",description:"Modal dialogs and drawers"},{name:"Popover",value:"60",description:"Tooltips and popovers"},{name:"Toast",value:"70",description:"Toast notifications"},{name:"Tooltip",value:"80",description:"Tooltips (highest priority)"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(s.HeroCard,{title:"Layout Principles",description:"Responsive design patterns and layout guidelines for consistent experiences.",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(i.Layout,{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("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Responsive Breakpoints",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 via-purple-500 to-violet-500 shadow-md",children:e.jsx(i.Layout,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Responsive Breakpoints"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:l.map(a=>e.jsx("div",{className:"space-y-3 p-4 bg-muted/20 rounded-lg border border-border",children:e.jsxs("div",{className:"space-y-1",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono",children:a.name}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:a.description})]}),e.jsx("div",{className:"space-y-1",children:e.jsxs(s.Typography,{tag:"h4",className:"text-muted text-sm font-semibold",children:["Min-width: ",a.value]})})]})},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Z-Index Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-cyan-500 via-teal-500 to-blue-500 shadow-md",children:e.jsx(i.Layers3,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Z-Index Scale"})]}),e.jsx("div",{className:"space-y-2",children:d.map(a=>e.jsx("div",{className:"flex items-center justify-between p-3 bg-muted/20 rounded",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(s.Badge,{variant:"outline",className:"font-mono w-12 justify-center",children:a.value}),e.jsxs("div",{children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-sm text-muted-foreground",children:a.description})]})]})},a.name))})]})})})]})]})};exports.default=n;

package/documentation/{LayoutTypesSection-847E1FZA.js → LayoutTypesSection-DtAUqzLt.js}

@@ -1,17 +1,17 @@
-import { jsx as e, jsxs as a, Fragment as c } from "react/jsx-runtime";
-import { az as r, H as m, T as t, C as p, K as h } from "../index-lfg6LZ1p.js";
-import { Layout as g, Menu as u, Minimize2 as x, LayoutGrid as v, Zap as f, CheckCircle as b, Star as w, Check as y, Code as N } from "lucide-react";
+import { jsx as e, jsxs as a, Fragment as d } from "react/jsx-runtime";
+import { aB as n, H as m, T as t, C as p, K as h } from "../index-19KsCnyX.js";
+import { Layout as u, Menu as g, Minimize2 as w, Monitor as v, Sparkles as b, AppWindow as f, Layers as x, Gem as y, LayoutGrid as N, Zap as S, CheckCircle as k, Star as L, Check as O, Code as C } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const M = () => {
-  const o = [
+const q = () => {
+  const r = [
     {
       name: "Admin Layout",
       description: "Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",
-      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-blue-500 via-cyan-500 to-teal-500",
-      value: r.ADMIN,
+      value: n.ADMIN,
       useCases: [
         "Dashboard applications",
         "Admin panels and management systems",
@@ -39,9 +39,9 @@ const M = () => {
     {
       name: "Horizontal Layout",
       description: "Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",
-      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-purple-500 via-violet-500 to-indigo-500",
-      value: r.HORIZONTAL,
+      value: n.HORIZONTAL,
       useCases: [
         "Content-focused websites",
         "Marketing and landing pages",
@@ -69,9 +69,9 @@ const M = () => {
     {
       name: "Clean Layout",
       description: "Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",
-      icon: /* @__PURE__ */ e(x, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      icon: /* @__PURE__ */ e(w, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
       color: "from-emerald-500 via-green-500 to-teal-500",
-      value: r.CLEAN,
+      value: n.CLEAN,
       useCases: [
         "Authentication pages (login, signup, password reset)",
         "Landing pages and marketing sites",
@@ -95,15 +95,165 @@ const M = () => {
         customization: "Full control via className prop",
         useWhen: "No navigation needed, standalone content"
       }
+    },
+    {
+      name: "macOS Sonoma Layout",
+      description: "macOS Sonoma desktop-style layout with frosted sidebar, toolbar, and window chrome. Ideal for desktop-like applications with macOS-inspired aesthetics.",
+      icon: /* @__PURE__ */ e(v, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-gray-500 via-slate-500 to-zinc-500",
+      value: n.MACOS,
+      useCases: [
+        "Desktop-like applications",
+        "macOS-inspired user interfaces",
+        "Content apps with sidebar navigation",
+        "Media and file management apps",
+        "Developer tools and IDEs",
+        "Applications requiring native-feel chrome"
+      ],
+      features: [
+        "Frosted glass sidebar with blur effects",
+        "Native toolbar with window controls",
+        "Window chrome styling and rounded corners",
+        "Responsive layout adapts to screen size",
+        "Smooth animations and transitions",
+        "AccentBundles support (9 color presets)",
+        "Integrates with ThemeBackground (sonoma variant)"
+      ],
+      technical: {
+        component: 'MacOSSonomaLayout or MacOSLayout variant="sonoma"',
+        sidebar: "Frosted sidebar with backdrop-blur",
+        toolbar: "Native-style toolbar with actions",
+        accents: "9 Sonoma AccentBundles (built via buildSonomaPresets)"
+      }
+    },
+    {
+      name: "macOS Tahoe Layout",
+      description: "macOS Tahoe (macOS 26) layout with Liquid Glass aesthetics, translucent sidebar and refined toolbar. The most modern desktop-inspired layout.",
+      icon: /* @__PURE__ */ e(b, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-indigo-500 via-purple-500 to-pink-500",
+      value: n.MACOS_TAHOE,
+      useCases: [
+        "Modern desktop applications",
+        "Liquid Glass UI experiences",
+        "Immersive content experiences",
+        "Creative and design tools",
+        "Applications requiring premium aesthetics",
+        "Next-generation web experiences"
+      ],
+      features: [
+        "Liquid Glass sidebar with translucent effects",
+        "Refined toolbar with modern controls",
+        "Dynamic mesh backgrounds",
+        "Frosted glass surfaces throughout",
+        "Accent color bundles (9 Tahoe presets)",
+        "Smooth spring-based animations",
+        "Integrates with ThemeBackground (radial variant)"
+      ],
+      technical: {
+        component: 'MacOSTahoeLayout or MacOSLayout variant="tahoe"',
+        sidebar: "Liquid Glass translucent sidebar",
+        toolbar: "Refined toolbar with glass effects",
+        accents: "9 Tahoe AccentBundles (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite)"
+      }
+    },
+    {
+      name: "macOS Tahoe Dock Layout",
+      description: "macOS Tahoe dock-based layout with floating app dock at the bottom and maximized content area. Best for full-screen and immersive experiences.",
+      icon: /* @__PURE__ */ e(f, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-violet-500 via-fuchsia-500 to-pink-500",
+      value: n.MACOS_TAHOE_DOCK,
+      useCases: [
+        "Full-screen applications",
+        "Media and entertainment apps",
+        "Dock-based navigation patterns",
+        "Immersive gaming or creative experiences",
+        "Applications with few top-level sections",
+        "Presentation and showcase apps"
+      ],
+      features: [
+        "Floating dock with Liquid Glass effect",
+        "Full-width maximized content area",
+        "Dynamic mesh backgrounds",
+        "No sidebar — dock-only navigation",
+        "Hover-to-expand dock items",
+        "Accent color bundles support",
+        "Pairs with ThemeBackground (radial variant)"
+      ],
+      technical: {
+        component: 'MacOSTahoeDockLayout or MacOSLayout variant="tahoe-dock"',
+        dock: "Floating bottom dock with glass effect and magnification",
+        content: "Full viewport content area without sidebar",
+        navigation: "Dock items act as primary navigation"
+      }
+    },
+    {
+      name: "macOS Sonoma Clean Layout",
+      description: "Minimal Sonoma layout with only background and content, no sidebar or toolbar. Inherits Sonoma visual styling without navigation chrome.",
+      icon: /* @__PURE__ */ e(x, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-slate-400 via-gray-400 to-zinc-400",
+      value: n.MACOS_CLEAN,
+      useCases: [
+        "Authentication pages within Sonoma theme",
+        "Landing pages with macOS aesthetics",
+        "Standalone content pages",
+        "Full-screen experiences within macOS theme",
+        "Onboarding flows",
+        "Embedded views that inherit theme"
+      ],
+      features: [
+        "Background only + content slot",
+        "Inherits Sonoma theme styling",
+        "No navigation chrome (no sidebar, toolbar)",
+        "Full viewport content area",
+        "Seamless transition to/from Sonoma layout",
+        "Minimal overhead",
+        "Customizable via className prop"
+      ],
+      technical: {
+        component: 'MacOSSonomaCleanLayout or MacOSLayout variant="sonoma-clean"',
+        structure: "Background wrapper + content container",
+        dependencies: "No navigation components required",
+        useWhen: "Auth pages, standalone content within Sonoma theme"
+      }
+    },
+    {
+      name: "macOS Tahoe Clean Layout",
+      description: "Minimal Tahoe layout with only Liquid Glass background and content area. Perfect for standalone views that need Tahoe visual identity without navigation.",
+      icon: /* @__PURE__ */ e(y, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-purple-400 via-violet-400 to-indigo-400",
+      value: n.MACOS_TAHOE_CLEAN,
+      useCases: [
+        "Authentication pages within Tahoe theme",
+        "Full-screen content experiences",
+        "Standalone views with Liquid Glass aesthetic",
+        "Onboarding and setup wizards",
+        "Modal-like full-page overlays",
+        "Embedded views that inherit Tahoe theme"
+      ],
+      features: [
+        "Dynamic Liquid Glass background only",
+        "Content slot without chrome",
+        "Tahoe visual identity (mesh gradients)",
+        "No sidebar, toolbar, or dock",
+        "Seamless transition to/from Tahoe layouts",
+        "Minimal dependencies",
+        "Full viewport height"
+      ],
+      technical: {
+        component: 'MacOSTahoeCleanLayout or MacOSLayout variant="macos-tahoe-clean"',
+        structure: "Liquid Glass background + content container",
+        dependencies: "No navigation components required",
+        useWhen: "Auth pages, standalone content within Tahoe theme"
+      }
     }
   ];
-  return /* @__PURE__ */ a(c, { children: [
+  return /* @__PURE__ */ a(d, { children: [
     /* @__PURE__ */ e(
       m,
       {
         title: "Layout Types",
-        description: "Three distinct layout patterns for various application types and navigation needs.",
-        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+        description: "Eight layout patterns spanning classic admin panels, modern horizontal menus, and macOS-inspired desktop experiences with Sonoma and Tahoe aesthetics.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(N, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
       }
     ),
     /* @__PURE__ */ a("div", { className: "text-center", children: [
@@ -113,11 +263,11 @@ const M = () => {
         {
           tag: "p",
           className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Three distinct layout patterns for various application types. Choose the right layout based on your application's navigation needs and structure."
+          children: "Eight layout patterns for every use case — from classic admin panels to macOS-inspired desktop experiences with Liquid Glass aesthetics."
         }
       )
     ] }),
-    /* @__PURE__ */ e("div", { className: "space-y-8", children: o.map((i, l) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: r.map((i, l) => /* @__PURE__ */ e(
       p,
       {
         className: "group hover:shadow-large transition-all duration-300 overflow-hidden",
@@ -154,21 +304,21 @@ const M = () => {
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-3", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(f, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(S, { className: "w-5 h-5 text-primary" }),
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "When to Use" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: i.useCases.map((n, s) => /* @__PURE__ */ a(
+            /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: i.useCases.map((o, s) => /* @__PURE__ */ a(
               "div",
               {
                 className: "flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",
                 children: [
-                  /* @__PURE__ */ e(b, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
+                  /* @__PURE__ */ e(k, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
                   /* @__PURE__ */ e(
                     t,
                     {
                       tag: "span",
                       className: "text-sm text-gray-700 dark:text-gray-300",
-                      children: n
+                      children: o
                     }
                   )
                 ]
@@ -178,28 +328,28 @@ const M = () => {
           ] }),
           /* @__PURE__ */ a("div", { className: "space-y-3", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(w, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(L, { className: "w-5 h-5 text-primary" }),
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Features" })
             ] }),
-            /* @__PURE__ */ e("div", { className: "space-y-2", children: i.features.map((n, s) => /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ e(y, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: i.features.map((o, s) => /* @__PURE__ */ a("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ e(O, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
               /* @__PURE__ */ e(
                 t,
                 {
                   tag: "span",
                   className: "text-sm text-gray-600 dark:text-gray-400",
-                  children: n
+                  children: o
                 }
               )
             ] }, s)) })
           ] }),
-          /* @__PURE__ */ a("div", { className: "space-y-3 pt-3 border-t border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ a("div", { className: "space-y-3 pt-3 border-t border-border", children: [
             /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ e(N, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(C, { className: "w-5 h-5 text-primary" }),
               /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Technical Details" })
             ] }),
             /* @__PURE__ */ e("div", { className: "space-y-2", children: Object.entries(i.technical).map(
-              ([n, s], d) => /* @__PURE__ */ a(
+              ([o, s], c) => /* @__PURE__ */ a(
                 "div",
                 {
                   className: "flex items-start gap-2 text-sm",
@@ -210,7 +360,7 @@ const M = () => {
                         tag: "span",
                         className: "font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",
                         children: [
-                          n.replace(/([A-Z])/g, " $1").trim(),
+                          o.replace(/([A-Z])/g, " $1").trim(),
                           ":"
                         ]
                       }
@@ -225,7 +375,7 @@ const M = () => {
                     )
                   ]
                 },
-                d
+                c
               )
             ) })
           ] })
@@ -236,5 +386,5 @@ const M = () => {
   ] });
 };
 export {
-  M as default
+  q as default
 };

package/documentation/LayoutTypesSection-prvabVsZ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=()=>{const o=[{name:"Admin Layout",description:"Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",icon:e.jsx(t.Layout,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-blue-500 via-cyan-500 to-teal-500",value:a.LAYOUT_OPTIONS.ADMIN,useCases:["Dashboard applications","Admin panels and management systems","Complex applications with many navigation items","Applications requiring hierarchical menu structure","Enterprise software and internal tools","Applications with multiple sections and subsections"],features:["Expandable sidebar navigation (visible on xl screens)","Fixed header with logo and action buttons","Responsive drawer menu for mobile devices","RTL/LTR direction support","Full-width content option available","Sidebar padding: 96px (xl) / 112px (2xl)","Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])"],technical:{sidebar:"ExpandableSidebar component (hidden on mobile, visible xl+)",header:"AdminHeader component with menu toggle",drawer:"Drawer component for mobile navigation",breakpoint:"Sidebar visible from xl breakpoint (1280px)"}},{name:"Horizontal Layout",description:"Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",icon:e.jsx(t.Menu,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-500 via-violet-500 to-indigo-500",value:a.LAYOUT_OPTIONS.HORIZONTAL,useCases:["Content-focused websites","Marketing and landing pages","Simple applications with few navigation items","Portfolio and showcase sites","Blog and content management systems","Public-facing applications"],features:["Horizontal top navigation menu","Sticky header with logo and action buttons","Mobile hamburger menu with drawer","Backdrop blur effects on header","Full-width content option available","Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (min-[1780px])","Minimal vertical space usage"],technical:{header:"HorizontalHeader component with horizontal menu",menu:"HorizontalNavMenu component",drawer:"Drawer component for mobile navigation",breakpoint:"Horizontal menu visible on all screen sizes"}},{name:"Clean Layout",description:"Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",icon:e.jsx(t.Minimize2,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-emerald-500 via-green-500 to-teal-500",value:a.LAYOUT_OPTIONS.CLEAN,useCases:["Authentication pages (login, signup, password reset)","Landing pages and marketing sites","Standalone content pages","Full-screen applications","Modal and overlay content","Embedded widgets and components"],features:["No navigation elements or headers","Full viewport height (100vh)","Flex column layout","Perfect for centered content","Minimal overhead and dependencies","No menu items required","Customizable via className prop"],technical:{structure:"Simple flex container with full height",dependencies:"No header, sidebar, or menu components",customization:"Full control via className prop",useWhen:"No navigation needed, standalone content"}},{name:"macOS Sonoma Layout",description:"macOS Sonoma desktop-style layout with frosted sidebar, toolbar, and window chrome. Ideal for desktop-like applications with macOS-inspired aesthetics.",icon:e.jsx(t.Monitor,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-gray-500 via-slate-500 to-zinc-500",value:a.LAYOUT_OPTIONS.MACOS,useCases:["Desktop-like applications","macOS-inspired user interfaces","Content apps with sidebar navigation","Media and file management apps","Developer tools and IDEs","Applications requiring native-feel chrome"],features:["Frosted glass sidebar with blur effects","Native toolbar with window controls","Window chrome styling and rounded corners","Responsive layout adapts to screen size","Smooth animations and transitions","AccentBundles support (9 color presets)","Integrates with ThemeBackground (sonoma variant)"],technical:{component:'MacOSSonomaLayout or MacOSLayout variant="sonoma"',sidebar:"Frosted sidebar with backdrop-blur",toolbar:"Native-style toolbar with actions",accents:"9 Sonoma AccentBundles (built via buildSonomaPresets)"}},{name:"macOS Tahoe Layout",description:"macOS Tahoe (macOS 26) layout with Liquid Glass aesthetics, translucent sidebar and refined toolbar. The most modern desktop-inspired layout.",icon:e.jsx(t.Sparkles,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-indigo-500 via-purple-500 to-pink-500",value:a.LAYOUT_OPTIONS.MACOS_TAHOE,useCases:["Modern desktop applications","Liquid Glass UI experiences","Immersive content experiences","Creative and design tools","Applications requiring premium aesthetics","Next-generation web experiences"],features:["Liquid Glass sidebar with translucent effects","Refined toolbar with modern controls","Dynamic mesh backgrounds","Frosted glass surfaces throughout","Accent color bundles (9 Tahoe presets)","Smooth spring-based animations","Integrates with ThemeBackground (radial variant)"],technical:{component:'MacOSTahoeLayout or MacOSLayout variant="tahoe"',sidebar:"Liquid Glass translucent sidebar",toolbar:"Refined toolbar with glass effects",accents:"9 Tahoe AccentBundles (Glass, Blue, Purple, Pink, Red, Orange, Yellow, Green, Graphite)"}},{name:"macOS Tahoe Dock Layout",description:"macOS Tahoe dock-based layout with floating app dock at the bottom and maximized content area. Best for full-screen and immersive experiences.",icon:e.jsx(t.AppWindow,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-violet-500 via-fuchsia-500 to-pink-500",value:a.LAYOUT_OPTIONS.MACOS_TAHOE_DOCK,useCases:["Full-screen applications","Media and entertainment apps","Dock-based navigation patterns","Immersive gaming or creative experiences","Applications with few top-level sections","Presentation and showcase apps"],features:["Floating dock with Liquid Glass effect","Full-width maximized content area","Dynamic mesh backgrounds","No sidebar — dock-only navigation","Hover-to-expand dock items","Accent color bundles support","Pairs with ThemeBackground (radial variant)"],technical:{component:'MacOSTahoeDockLayout or MacOSLayout variant="tahoe-dock"',dock:"Floating bottom dock with glass effect and magnification",content:"Full viewport content area without sidebar",navigation:"Dock items act as primary navigation"}},{name:"macOS Sonoma Clean Layout",description:"Minimal Sonoma layout with only background and content, no sidebar or toolbar. Inherits Sonoma visual styling without navigation chrome.",icon:e.jsx(t.Layers,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-slate-400 via-gray-400 to-zinc-400",value:a.LAYOUT_OPTIONS.MACOS_CLEAN,useCases:["Authentication pages within Sonoma theme","Landing pages with macOS aesthetics","Standalone content pages","Full-screen experiences within macOS theme","Onboarding flows","Embedded views that inherit theme"],features:["Background only + content slot","Inherits Sonoma theme styling","No navigation chrome (no sidebar, toolbar)","Full viewport content area","Seamless transition to/from Sonoma layout","Minimal overhead","Customizable via className prop"],technical:{component:'MacOSSonomaCleanLayout or MacOSLayout variant="sonoma-clean"',structure:"Background wrapper + content container",dependencies:"No navigation components required",useWhen:"Auth pages, standalone content within Sonoma theme"}},{name:"macOS Tahoe Clean Layout",description:"Minimal Tahoe layout with only Liquid Glass background and content area. Perfect for standalone views that need Tahoe visual identity without navigation.",icon:e.jsx(t.Gem,{className:"w-8 h-8 text-white filter drop-shadow-sm"}),color:"from-purple-400 via-violet-400 to-indigo-400",value:a.LAYOUT_OPTIONS.MACOS_TAHOE_CLEAN,useCases:["Authentication pages within Tahoe theme","Full-screen content experiences","Standalone views with Liquid Glass aesthetic","Onboarding and setup wizards","Modal-like full-page overlays","Embedded views that inherit Tahoe theme"],features:["Dynamic Liquid Glass background only","Content slot without chrome","Tahoe visual identity (mesh gradients)","No sidebar, toolbar, or dock","Seamless transition to/from Tahoe layouts","Minimal dependencies","Full viewport height"],technical:{component:'MacOSTahoeCleanLayout or MacOSLayout variant="macos-tahoe-clean"',structure:"Liquid Glass background + content container",dependencies:"No navigation components required",useWhen:"Auth pages, standalone content within Tahoe theme"}}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Layout Types",description:"Eight layout patterns spanning classic admin panels, modern horizontal menus, and macOS-inspired desktop experiences with Sonoma and Tahoe aesthetics.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-teal-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.LayoutGrid,{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("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"h2",className:"mb-2",children:"Layout Types"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Eight layout patterns for every use case — from classic admin panels to macOS-inspired desktop experiences with Liquid Glass aesthetics."})]}),e.jsx("div",{className:"space-y-8",children:o.map((i,r)=>e.jsx(a.CardContainer,{className:"group hover:shadow-large transition-all duration-300 overflow-hidden",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-start gap-4",children:[e.jsx("div",{className:`p-3 rounded-xl bg-linear-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,children:i.icon}),e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg group-hover:text-primary transition-colors duration-300",children:i.name}),e.jsx(a.Badge,{variant:"outline",className:"text-xs",children:i.value})]}),e.jsx(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 leading-relaxed",children:i.description})]})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Zap,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"When to Use"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-2",children:i.useCases.map((n,s)=>e.jsxs("div",{className:"flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",children:[e.jsx(t.CheckCircle,{className:"w-3 h-3 text-primary mt-1 shrink-0"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-700 dark:text-gray-300",children:n})]},s))})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Star,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Features"})]}),e.jsx("div",{className:"space-y-2",children:i.features.map((n,s)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:n})]},s))})]}),e.jsxs("div",{className:"space-y-3 pt-3 border-t border-border",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Code,{className:"w-5 h-5 text-primary"}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-base",children:"Technical Details"})]}),e.jsx("div",{className:"space-y-2",children:Object.entries(i.technical).map(([n,s],l)=>e.jsxs("div",{className:"flex items-start gap-2 text-sm",children:[e.jsxs(a.Typography,{tag:"span",className:"font-medium text-gray-700 dark:text-gray-300 capitalize min-w-25",children:[n.replace(/([A-Z])/g," $1").trim(),":"]}),e.jsx(a.Typography,{tag:"span",className:"text-gray-600 dark:text-gray-400",children:s})]},l))})]})]})},r))})]})};exports.default=c;

package/documentation/{LineChartSection-CLKCstC7.js → LineChartSection-CzARfWf9.js}

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

package/documentation/{LineChartSection-BFVXYiK4.js → LineChartSection-HJuiXWwE.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");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",revenue:4e3,expenses:2400,profit:1600},{name:"Feb",revenue:3e3,expenses:1398,profit:1602},{name:"Mar",revenue:5e3,expenses:3200,profit:1800},{name:"Apr",revenue:4780,expenses:2908,profit:1872},{name:"May",revenue:5890,expenses:4800,profit:1090},{name:"Jun",revenue:6390,expenses:3800,profit:2590},{name:"Jul",revenue:7490,expenses:4300,profit:3190}],n=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"LineChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Line chart component for displaying trends and time-series data with multiple series, custom curves, and theme integration."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Line Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Multiple Series with Dots",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"},{dataKey:"profit",name:"Profit"}],showDots:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Straight Lines (No Curve)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"profit",name:"Profit"}],curved:!1,strokeWidth:3,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { LineChart } 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");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const s=[{name:"Jan",revenue:4e3,expenses:2400,profit:1600},{name:"Feb",revenue:3e3,expenses:1398,profit:1602},{name:"Mar",revenue:5e3,expenses:3200,profit:1800},{name:"Apr",revenue:4780,expenses:2908,profit:1872},{name:"May",revenue:5890,expenses:4800,profit:1090},{name:"Jun",revenue:6390,expenses:3800,profit:2590},{name:"Jul",revenue:7490,expenses:4300,profit:3190}],n=()=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(a.Typography,{tag:"h2",className:"text-base md:text-base font-semibold",children:"LineChart"}),e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"Line chart component for displaying trends and time-series data with multiple series, custom curves, and theme integration."})]}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Basic Line Chart",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"}],height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Multiple Series with Dots",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"expenses",name:"Expenses"},{dataKey:"profit",name:"Profit"}],showDots:!0,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Straight Lines (No Curve)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.LineChart,{data:s,series:[{dataKey:"revenue",name:"Revenue"},{dataKey:"profit",name:"Profit"}],curved:!1,strokeWidth:3,height:300})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Usage",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{code:`import { LineChart } from '@e-burgos/tucu-ui';
 
 const data = [
   { name: 'Jan', revenue: 4000, expenses: 2400 },

package/documentation/{ListContainerSection-D5k1iNKV.js → ListContainerSection-Ca8Y_cJJ.js}

@@ -1,6 +1,6 @@
 import { jsxs as i, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { useState as d } from "react";
-import { H as h, C as o, a, T as n, ab as s, P as p, A as g, c as C } from "../index-lfg6LZ1p.js";
+import { H as h, C as o, a, T as n, ab as s, P as p, A as g, c as C } from "../index-19KsCnyX.js";
 import { List as N, Activity as u, Edit as f, Trash as b, Share as w } from "lucide-react";
 import "react-router-dom";
 import "react-dom";