@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/documentation/InputSearcherSection-CJd1uwoE.js

@@ -1,45 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),a=require("../index-COp_AWCS.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' },
-  { name: 'Vue', value: 'vue' },
-  { name: 'Angular', value: 'angular' },
-];
-
-<InputSearcher
-  label="Search Framework"
-  options={options}
-  initialValue={selectedOption?.value}
-  onOptionSelect={(option) => {
-    if (!Array.isArray(option)) {
-      setSelectedOption(option);
-    }
-  }}
-/>
-
-<InputSearcher
-  label="Select Frameworks"
-  options={options}
-  multiple
-  onOptionSelect={(option) => {
-    console.log('Selected:', option);
-  }}
-/>
-
-// Variants
-<InputSearcher label="Ghost" variant="ghost" options={options} />
-<InputSearcher label="Solid" variant="solid" options={options} />
-<InputSearcher label="Transparent" variant="transparent" options={options} />
-
-// Colors
-<InputSearcher label="Primary" color="primary" options={options} />
-<InputSearcher label="Secondary" color="secondary" options={options} />
-<InputSearcher label="Danger" color="danger" options={options} />
-<InputSearcher label="Info" color="info" options={options} />
-<InputSearcher label="Success" color="success" options={options} />
-<InputSearcher label="Warning" color="warning" options={options} />
-
-// Sizes
-<InputSearcher label="Small" size="sm" options={options} />
-<InputSearcher label="Medium" size="md" options={options} />
-<InputSearcher label="Large" size="lg" options={options} />`})})})})]})};exports.default=p;

package/documentation/InputSearcherSection-JzvqQlCG.js

@@ -1,267 +0,0 @@
-import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { H as S, C as l, a as t, T as n, q as s, P as g, A as b, c as N } from "../index-DYDFy1df.js";
-import { Search as v } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const M = () => {
-  const [i, d] = u(void 0), p = [
-    { label: "Primary", color: "primary" },
-    { label: "Secondary", color: "secondary" },
-    { label: "Danger", color: "danger" },
-    { label: "Info", color: "info" },
-    { label: "Success", color: "success" },
-    { label: "Warning", color: "warning" }
-  ], h = [
-    { label: "Small", size: "sm" },
-    { label: "Medium", size: "md" },
-    { label: "Large", size: "lg" }
-  ], r = [
-    { name: "React", value: "react" },
-    { name: "Vue", value: "vue" },
-    { name: "Angular", value: "angular" },
-    { name: "Svelte", value: "svelte" },
-    { name: "Next.js", value: "nextjs" }
-  ];
-  return /* @__PURE__ */ o(m, { children: [
-    /* @__PURE__ */ e(
-      S,
-      {
-        title: "InputSearcher",
-        description: "A search input component with dropdown suggestions and filtering capabilities.",
-        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-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", 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" }) })
-      }
-    ),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Basic InputSearcher" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Search Framework",
-            placeholder: "Search frameworks",
-            options: r,
-            initialValue: i?.value,
-            onOptionSelect: (a) => {
-              Array.isArray(a) || d(a);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Multiple Selection" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Select Frameworks",
-            placeholder: "Select frameworks",
-            options: r,
-            multiple: !0,
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Custom No Matches Message" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Search",
-            placeholder: "Search...",
-            options: r,
-            noMatchesMessage: "No results found",
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Search",
-            disabled: !0,
-            placeholder: "Disabled",
-            options: r,
-            noMatchesMessage: "No results found",
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Ghost Variant",
-            placeholder: "Search...",
-            variant: "ghost",
-            options: r,
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Solid" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Solid Variant",
-            placeholder: "Search...",
-            variant: "solid",
-            options: r,
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ o(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Transparent" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            label: "Transparent Variant",
-            placeholder: "Search...",
-            variant: "transparent",
-            options: r,
-            onOptionSelect: (a) => {
-              console.log("Selected:", a);
-            }
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: p.map(({ label: a, color: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
-      /* @__PURE__ */ e(
-        s,
-        {
-          label: `${a} Search`,
-          placeholder: "Search...",
-          color: c,
-          options: r
-        }
-      )
-    ] }, c)) }) }) }) }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: h.map(({ label: a, size: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
-      /* @__PURE__ */ e(
-        s,
-        {
-          label: `${a} Search`,
-          placeholder: "Search frameworks",
-          size: c,
-          options: r
-        }
-      )
-    ] }, c)) }) }) }) }),
-    /* @__PURE__ */ e(
-      g,
-      {
-        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: (a) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
-          s,
-          {
-            ...a,
-            placeholder: a.placeholder || "Search frameworks",
-            options: r
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ e(b, { componentName: "InputSearcher" }),
-    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      N,
-      {
-        language: "tsx",
-        code: `import { InputSearcher } from '@e-burgos/tucu-ui';
-
-const options = [
-  { name: 'React', value: 'react' },
-  { name: 'Vue', value: 'vue' },
-  { name: 'Angular', value: 'angular' },
-];
-
-<InputSearcher
-  label="Search Framework"
-  options={options}
-  initialValue={selectedOption?.value}
-  onOptionSelect={(option) => {
-    if (!Array.isArray(option)) {
-      setSelectedOption(option);
-    }
-  }}
-/>
-
-<InputSearcher
-  label="Select Frameworks"
-  options={options}
-  multiple
-  onOptionSelect={(option) => {
-    console.log('Selected:', option);
-  }}
-/>
-
-// Variants
-<InputSearcher label="Ghost" variant="ghost" options={options} />
-<InputSearcher label="Solid" variant="solid" options={options} />
-<InputSearcher label="Transparent" variant="transparent" options={options} />
-
-// Colors
-<InputSearcher label="Primary" color="primary" options={options} />
-<InputSearcher label="Secondary" color="secondary" options={options} />
-<InputSearcher label="Danger" color="danger" options={options} />
-<InputSearcher label="Info" color="info" options={options} />
-<InputSearcher label="Success" color="success" options={options} />
-<InputSearcher label="Warning" color="warning" options={options} />
-
-// Sizes
-<InputSearcher label="Small" size="sm" options={options} />
-<InputSearcher label="Medium" size="md" options={options} />
-<InputSearcher label="Large" size="lg" options={options} />`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  M as default
-};

package/documentation/InputSection-BPLR_DD_.js

@@ -1,50 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),a=require("../index-COp_AWCS.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
-  label="Name"
-  placeholder="Enter your name"
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-/>
-
-// With helper text
-<Input
-  label="Email"
-  type="email"
-  placeholder="Enter your email"
-  helperText="We'll never share your email"
-/>
-
-// With error
-<Input
-  label="Password"
-  type="password"
-  placeholder="Enter password"
-  error="Password is required"
-/>
-
-// Variants
-<Input label="Ghost" variant="ghost" />
-<Input label="Solid" variant="solid" />
-<Input label="Transparent" variant="transparent" />
-
-// Colors
-<Input label="Primary" color="primary" />
-<Input label="Secondary" color="secondary" />
-<Input label="Danger" color="danger" />
-<Input label="Info" color="info" />
-<Input label="Success" color="success" />
-<Input label="Warning" color="warning" />
-
-// Sizes
-<Input label="Small" size="sm" />
-<Input label="Medium" size="md" />
-<Input label="Large" size="lg" />
-
-// Date input
-<Input
-  label="Date"
-  type="date"
-  dateFormat="DD-MM-YYYY"
-/>`})})})})]})};exports.default=m;

package/documentation/InputSection-DdzpSHWp.js

@@ -1,280 +0,0 @@
-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-DYDFy1df.js";
-import { TextCursorInput as f } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const P = () => {
-  const [d, c] = o(""), [p, m] = o(""), h = [
-    { label: "Primary", color: "primary" },
-    { label: "Secondary", color: "secondary" },
-    { label: "Danger", color: "danger" },
-    { label: "Info", color: "info" },
-    { label: "Success", color: "success" },
-    { label: "Warning", color: "warning" }
-  ], u = [
-    { label: "Small", size: "sm" },
-    { label: "Medium", size: "md" },
-    { label: "Large", size: "lg" }
-  ];
-  return /* @__PURE__ */ l(b, { children: [
-    /* @__PURE__ */ e(
-      g,
-      {
-        title: "Input",
-        description: "A versatile input component that supports various input types including text, email, password, date, and more.",
-        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-blue-500 via-indigo-500 to-violet-500 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50", children: /* @__PURE__ */ e(f, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Basic Input" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Name",
-            placeholder: "Enter your name",
-            value: d,
-            onChange: (s) => c(s.target.value)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Email",
-            type: "email",
-            placeholder: "Enter your email",
-            helperText: "We'll never share your email"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "With Error" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Password",
-            type: "password",
-            placeholder: "Enter password",
-            error: "Password is required"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Disabled" }),
-        /* @__PURE__ */ e(r, { label: "Disabled", placeholder: "Disabled input", disabled: !0 })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Date Input" }),
-        /* @__PURE__ */ e(r, { label: "Date", type: "date", dateFormat: "DD-MM-YYYY" })
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Number Input" }),
-        /* @__PURE__ */ e(r, { label: "Age", type: "number", placeholder: "Enter age" })
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Ghost Variant",
-            placeholder: "Enter text",
-            variant: "ghost"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Solid" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Solid Variant",
-            placeholder: "Enter text",
-            variant: "solid"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ l(a, { className: "p-4", children: [
-        /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Transparent" }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            label: "Transparent Variant",
-            placeholder: "Enter text",
-            variant: "transparent"
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: h.map(({ label: s, color: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          label: `${s} Input`,
-          placeholder: "Enter text",
-          color: n
-        }
-      )
-    ] }, n)) }) }) }) }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: u.map(({ label: s, size: n }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: s }),
-      /* @__PURE__ */ e(
-        r,
-        {
-          label: `${s} Input`,
-          placeholder: "Enter text",
-          size: n
-        }
-      )
-    ] }, n)) }) }) }) }),
-    /* @__PURE__ */ e(
-      N,
-      {
-        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: (s) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
-          r,
-          {
-            ...s,
-            placeholder: s.placeholder || "Enter text",
-            value: p,
-            onChange: (n) => m(n.target.value)
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ e(v, { componentName: "Input" }),
-    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      y,
-      {
-        language: "tsx",
-        code: `import { Input } from '@e-burgos/tucu-ui';
-
-// Basic usage
-<Input
-  label="Name"
-  placeholder="Enter your name"
-  value={value}
-  onChange={(e) => setValue(e.target.value)}
-/>
-
-// With helper text
-<Input
-  label="Email"
-  type="email"
-  placeholder="Enter your email"
-  helperText="We'll never share your email"
-/>
-
-// With error
-<Input
-  label="Password"
-  type="password"
-  placeholder="Enter password"
-  error="Password is required"
-/>
-
-// Variants
-<Input label="Ghost" variant="ghost" />
-<Input label="Solid" variant="solid" />
-<Input label="Transparent" variant="transparent" />
-
-// Colors
-<Input label="Primary" color="primary" />
-<Input label="Secondary" color="secondary" />
-<Input label="Danger" color="danger" />
-<Input label="Info" color="info" />
-<Input label="Success" color="success" />
-<Input label="Warning" color="warning" />
-
-// Sizes
-<Input label="Small" size="sm" />
-<Input label="Medium" size="md" />
-<Input label="Large" size="lg" />
-
-// Date input
-<Input
-  label="Date"
-  type="date"
-  dateFormat="DD-MM-YYYY"
-/>`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  P as default
-};