@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/InputSearcherSection-Bm_4y_eJ.js

@@ -0,0 +1,267 @@
+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-DoxeCFUJ.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/InputSearcherSection-DnVt-6OY.js

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

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

@@ -0,0 +1,280 @@
+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-DoxeCFUJ.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
+};