@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/InputSearcherSection-DMtIqnZm.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-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';
+
+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-DAQlSKNm.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-lfg6LZ1p.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
+};

package/documentation/InputSection-WnlrF_LD.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-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';
+
+// 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/KeyValueRowSection-BjXEg9g3.js

@@ -0,0 +1,117 @@
+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 { Rows3 as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = () => /* @__PURE__ */ l(i, { children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      title: "KeyValueRow",
+      description: `A simple row component for displaying label-value pairs, ideal for
+          detail panels, summaries, and settings views.`,
+      icon: /* @__PURE__ */ e("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: /* @__PURE__ */ e(u, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { 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-6", children: [
+    /* @__PURE__ */ l(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Basic Usage" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(a, { label: "Name", value: "John Doe" }),
+        /* @__PURE__ */ e(a, { label: "Email", value: "john@example.com" }),
+        /* @__PURE__ */ e(a, { label: "Role", value: "Administrator" }),
+        /* @__PURE__ */ e(a, { label: "Status", value: "Active" })
+      ] })
+    ] }),
+    /* @__PURE__ */ l(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "Monospace & Accent" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(a, { label: "Balance", value: "$12,450.00", mono: !0 }),
+        /* @__PURE__ */ e(a, { label: "Interest Rate", value: "3.5%", mono: !0, accent: !0 }),
+        /* @__PURE__ */ e(a, { label: "Account ID", value: "ACC-0042891", mono: !0 }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Next Payment",
+            value: "Jun 15, 2026",
+            accent: !0
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ l(s, { className: "p-4 md:col-span-2", children: [
+      /* @__PURE__ */ e(d, { tag: "h5", className: "mb-3", children: "With Custom Values (ReactNode)" }),
+      /* @__PURE__ */ l("div", { className: "divide-y divide-gray-200/50 dark:divide-gray-700/50", children: [
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Health",
+            value: /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1.5 text-green-500 text-xs font-medium", children: [
+              /* @__PURE__ */ e("span", { className: "h-2 w-2 rounded-full bg-green-500" }),
+              "Healthy"
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Progress",
+            value: /* @__PURE__ */ e("div", { className: "w-24 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden", children: /* @__PURE__ */ e("div", { className: "h-full w-3/4 bg-brand rounded-full" }) })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            label: "Tags",
+            value: /* @__PURE__ */ l("div", { className: "flex gap-1", children: [
+              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-brand/10 text-brand", children: "React" }),
+              /* @__PURE__ */ e("span", { className: "px-1.5 py-0.5 text-[10px] rounded bg-blue-500/10 text-blue-500", children: "TypeScript" })
+            ] })
+          }
+        )
+      ] })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(
+    n,
+    {
+      componentName: "KeyValueRow",
+      title: "KeyValueRow Playground",
+      defaultValues: {
+        label: "Status",
+        value: "Active",
+        accent: !1,
+        mono: !1
+      },
+      excludeProps: ["className"],
+      children: (o) => /* @__PURE__ */ e(a, { ...o })
+    }
+  ),
+  /* @__PURE__ */ e(c, { componentName: "KeyValueRow" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    m,
+    {
+      language: "tsx",
+      code: `import { KeyValueRow } from '@e-burgos/tucu-ui';
+
+// Basic
+<KeyValueRow label="Name" value="John Doe" />
+
+// Monospace numbers
+<KeyValueRow label="Balance" value="$12,450.00" mono />
+
+// Accent color
+<KeyValueRow label="Rate" value="3.5%" mono accent />
+
+// Custom ReactNode value
+<KeyValueRow
+  label="Status"
+  value={<span className="text-green-500">Active</span>}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  y as default
+};

package/documentation/KeyValueRowSection-Ctph5iO5.js

@@ -0,0 +1,17 @@
+"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
+          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
+<KeyValueRow label="Name" value="John Doe" />
+
+// Monospace numbers
+<KeyValueRow label="Balance" value="$12,450.00" mono />
+
+// Accent color
+<KeyValueRow label="Rate" value="3.5%" mono accent />
+
+// Custom ReactNode value
+<KeyValueRow
+  label="Status"
+  value={<span className="text-green-500">Active</span>}
+/>`})})})})]});exports.default=r;