@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/RadioGroupSection-C0qbZCEy.js

@@ -0,0 +1,269 @@
+import { jsxs as a, Fragment as g, jsx as l } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { H as v, C as e, a as t, T as i, t as o, P as N, A as f, c as G } from "../index-lfg6LZ1p.js";
+import { CircleDot as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const P = () => {
+  const [c, p] = d(""), [m, u] = d("starter"), 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" }
+  ], b = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" },
+    { label: "Extra Large", size: "xl" }
+  ], n = [
+    { value: "male", label: "Male" },
+    { value: "female", label: "Female" },
+    { value: "other", label: "Other" }
+  ];
+  return /* @__PURE__ */ a(g, { children: [
+    /* @__PURE__ */ l(
+      v,
+      {
+        title: "RadioGroup",
+        description: "A group of radio buttons for selecting one option from multiple choices.",
+        icon: /* @__PURE__ */ l("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-indigo-500/50", children: /* @__PURE__ */ l(w, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ l(e, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Basic RadioGroup" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Gender",
+            options: n,
+            value: c,
+            onChange: (r) => p(r)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Size",
+            helperText: "Select your preferred size",
+            options: [
+              { value: "small", label: "Small" },
+              { value: "medium", label: "Medium" },
+              { value: "large", label: "Large" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Priority",
+            error: "Please select a priority",
+            options: [
+              { value: "low", label: "Low" },
+              { value: "high", label: "High" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Status",
+            disabled: !0,
+            options: [
+              { value: "active", label: "Active" },
+              { value: "inactive", label: "Inactive" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Horizontal Layout" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Direction",
+            direction: "horizontal",
+            options: [
+              { value: "vertical", label: "Vertical" },
+              { value: "horizontal", label: "Horizontal" }
+            ]
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ l(e, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Ghost Variant",
+            variant: "ghost",
+            options: [
+              { value: "opt1", label: "Option 1" },
+              { value: "opt2", label: "Option 2" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Solid Variant",
+            variant: "solid",
+            options: [
+              { value: "opt1", label: "Option 1" },
+              { value: "opt2", label: "Option 2" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ a(e, { className: "p-4", children: [
+        /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ l(
+          o,
+          {
+            label: "Transparent Variant",
+            variant: "transparent",
+            options: [
+              { value: "opt1", label: "Option 1" },
+              { value: "opt2", label: "Option 2" }
+            ]
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ l(e, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: h.map(({ label: r, color: s }) => /* @__PURE__ */ a(e, { className: "p-4", children: [
+      /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: r }),
+      /* @__PURE__ */ l(
+        o,
+        {
+          label: `${r} Group`,
+          color: s,
+          options: n
+        }
+      )
+    ] }, s)) }) }) }) }),
+    /* @__PURE__ */ l(e, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: b.map(({ label: r, size: s }) => /* @__PURE__ */ a(e, { className: "p-4", children: [
+      /* @__PURE__ */ l(i, { tag: "h5", className: "mb-3", children: r }),
+      /* @__PURE__ */ l(
+        o,
+        {
+          label: `${r} Group`,
+          size: s,
+          options: n
+        }
+      )
+    ] }, s)) }) }) }) }),
+    /* @__PURE__ */ l(
+      N,
+      {
+        componentName: "RadioGroup",
+        defaultValues: {
+          label: "Preview RadioGroup",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          labelPlacement: "end",
+          disabled: !1,
+          helperText: "",
+          error: "",
+          direction: "vertical",
+          gap: "md"
+        },
+        includeProps: [
+          "label",
+          "variant",
+          "color",
+          "size",
+          "labelPlacement",
+          "disabled",
+          "helperText",
+          "error",
+          "direction",
+          "gap"
+        ],
+        excludeProps: [
+          "options",
+          "value",
+          "defaultValue",
+          "children",
+          "onChange"
+        ],
+        children: (r) => /* @__PURE__ */ l("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ l(
+          o,
+          {
+            ...r,
+            options: [
+              { value: "starter", label: "Starter" },
+              { value: "growth", label: "Growth" },
+              { value: "scale", label: "Scale" }
+            ],
+            value: m,
+            onChange: (s) => u(String(s))
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ l(f, { componentName: "RadioGroup" }),
+    /* @__PURE__ */ l(e, { className: "overflow-hidden", children: /* @__PURE__ */ l(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ l(
+      G,
+      {
+        language: "typescript",
+        code: `import { RadioGroup } from '@e-burgos/tucu-ui';
+
+const options = [
+  { value: 'male', label: 'Male' },
+  { value: 'female', label: 'Female' },
+  { value: 'other', label: 'Other' },
+];
+
+<RadioGroup
+  label="Gender"
+  options={options}
+  value={value}
+  onChange={(value) => setValue(value)}
+/>
+
+// Variants
+<RadioGroup label="Ghost" variant="ghost" options={options} />
+<RadioGroup label="Solid" variant="solid" options={options} />
+<RadioGroup label="Transparent" variant="transparent" options={options} />
+
+// Colors
+<RadioGroup label="Primary" color="primary" options={options} />
+<RadioGroup label="Secondary" color="secondary" options={options} />
+<RadioGroup label="Danger" color="danger" options={options} />
+<RadioGroup label="Info" color="info" options={options} />
+<RadioGroup label="Success" color="success" options={options} />
+<RadioGroup label="Warning" color="warning" options={options} />
+
+// Sizes
+<RadioGroup label="Small" size="sm" options={options} />
+<RadioGroup label="Medium" size="md" options={options} />
+<RadioGroup label="Large" size="lg" options={options} />
+<RadioGroup label="Extra Large" size="xl" options={options} />
+
+// Layout
+<RadioGroup label="Horizontal" direction="horizontal" options={options} />
+<RadioGroup label="Vertical" direction="vertical" options={options} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  P as default
+};

package/documentation/RadioGroupSection-Dnu2rhAj.js

@@ -0,0 +1,37 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),e=require("../index-BaGqriuz.js"),u=require("lucide-react");require("react-router-dom");require("react-dom");const m=()=>{const[s,n]=i.useState(""),[t,d]=i.useState("starter"),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"}],c=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"},{label:"Extra Large",size:"xl"}],r=[{value:"male",label:"Male"},{value:"female",label:"Female"},{value:"other",label:"Other"}];return a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"RadioGroup",description:"A group of radio buttons for selecting one option from multiple choices.",icon:a.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-indigo-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-indigo-500/50",children:a.jsx(u.CircleDot,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Basic RadioGroup"}),a.jsx(e.RadioGroup,{label:"Gender",options:r,value:s,onChange:l=>n(l)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),a.jsx(e.RadioGroup,{label:"Size",helperText:"Select your preferred size",options:[{value:"small",label:"Small"},{value:"medium",label:"Medium"},{value:"large",label:"Large"}]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),a.jsx(e.RadioGroup,{label:"Priority",error:"Please select a priority",options:[{value:"low",label:"Low"},{value:"high",label:"High"}]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),a.jsx(e.RadioGroup,{label:"Status",disabled:!0,options:[{value:"active",label:"Active"},{value:"inactive",label:"Inactive"}]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Horizontal Layout"}),a.jsx(e.RadioGroup,{label:"Direction",direction:"horizontal",options:[{value:"vertical",label:"Vertical"},{value:"horizontal",label:"Horizontal"}]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),a.jsx(e.RadioGroup,{label:"Ghost Variant",variant:"ghost",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),a.jsx(e.RadioGroup,{label:"Solid Variant",variant:"solid",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),a.jsx(e.RadioGroup,{label:"Transparent Variant",variant:"transparent",options:[{value:"opt1",label:"Option 1"},{value:"opt2",label:"Option 2"}]})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:p.map(({label:l,color:o})=>a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:l}),a.jsx(e.RadioGroup,{label:`${l} Group`,color:o,options:r})]},o))})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4",children:c.map(({label:l,size:o})=>a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:l}),a.jsx(e.RadioGroup,{label:`${l} Group`,size:o,options:r})]},o))})})})}),a.jsx(e.PropPlayground,{componentName:"RadioGroup",defaultValues:{label:"Preview RadioGroup",variant:"ghost",color:"primary",size:"md",labelPlacement:"end",disabled:!1,helperText:"",error:"",direction:"vertical",gap:"md"},includeProps:["label","variant","color","size","labelPlacement","disabled","helperText","error","direction","gap"],excludeProps:["options","value","defaultValue","children","onChange"],children:l=>a.jsx("div",{className:"w-full max-w-lg",children:a.jsx(e.RadioGroup,{...l,options:[{value:"starter",label:"Starter"},{value:"growth",label:"Growth"},{value:"scale",label:"Scale"}],value:t,onChange:o=>d(String(o))})})}),a.jsx(e.AutoPropsTable,{componentName:"RadioGroup"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"typescript",code:`import { RadioGroup } from '@e-burgos/tucu-ui';
+
+const options = [
+  { value: 'male', label: 'Male' },
+  { value: 'female', label: 'Female' },
+  { value: 'other', label: 'Other' },
+];
+
+<RadioGroup
+  label="Gender"
+  options={options}
+  value={value}
+  onChange={(value) => setValue(value)}
+/>
+
+// Variants
+<RadioGroup label="Ghost" variant="ghost" options={options} />
+<RadioGroup label="Solid" variant="solid" options={options} />
+<RadioGroup label="Transparent" variant="transparent" options={options} />
+
+// Colors
+<RadioGroup label="Primary" color="primary" options={options} />
+<RadioGroup label="Secondary" color="secondary" options={options} />
+<RadioGroup label="Danger" color="danger" options={options} />
+<RadioGroup label="Info" color="info" options={options} />
+<RadioGroup label="Success" color="success" options={options} />
+<RadioGroup label="Warning" color="warning" options={options} />
+
+// Sizes
+<RadioGroup label="Small" size="sm" options={options} />
+<RadioGroup label="Medium" size="md" options={options} />
+<RadioGroup label="Large" size="lg" options={options} />
+<RadioGroup label="Extra Large" size="xl" options={options} />
+
+// Layout
+<RadioGroup label="Horizontal" direction="horizontal" options={options} />
+<RadioGroup label="Vertical" direction="vertical" options={options} />`})})})})]})};exports.default=m;

package/documentation/RadioSection-DWy0dsvZ.js

@@ -0,0 +1,27 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),e=require("../index-BaGqriuz.js"),h=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[r,i]=t.useState(""),[d,n]=t.useState("a"),c=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],m=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"},{label:"Extra Large",size:"xl"}];return a.jsxs(a.Fragment,{children:[a.jsx(e.HeroCard,{title:"Radio",description:"A single radio button component for binary choices.",icon:a.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50",children:a.jsx(h.Circle,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Basic Radio"}),a.jsx(e.Radio,{label:"Option 1",value:"option1",checked:r==="option1",onChange:l=>i(l.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),a.jsx(e.Radio,{label:"Disabled option",value:"disabled",disabled:!0})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-4",children:[a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),a.jsx(e.Radio,{label:"Ghost Variant",value:"ghost",variant:"ghost",checked:r==="ghost",onChange:l=>i(l.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),a.jsx(e.Radio,{label:"Solid Variant",value:"solid",variant:"solid",checked:r==="solid",onChange:l=>i(l.target.value)})]}),a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),a.jsx(e.Radio,{label:"Transparent Variant",value:"transparent",variant:"transparent",checked:r==="transparent",onChange:l=>i(l.target.value)})]})]})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:c.map(({label:l,color:s})=>a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:l}),a.jsx(e.Radio,{label:`${l} Radio`,value:s,color:s})]},s))})})})}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4",children:m.map(({label:l,size:s})=>a.jsxs(e.CardContainer,{className:"p-4",children:[a.jsx(e.Typography,{tag:"h5",className:"mb-3",children:l}),a.jsx(e.Radio,{label:`${l} Radio`,value:s,size:s})]},s))})})})}),a.jsx(e.PropPlayground,{componentName:"Radio",defaultValues:{label:"Preview Radio",variant:"ghost",color:"primary",size:"md",disabled:!1,labelPlacement:"end"},includeProps:["label","variant","color","size","disabled","labelPlacement"],excludeProps:["checked","onChange","value"],children:l=>{const s=typeof l.label=="string"&&l.label.length>0?l.label:"Preview Radio";return a.jsxs("div",{className:"space-y-3",children:[a.jsx(e.Radio,{...l,label:`${s} A`,value:"a",checked:d==="a",onChange:o=>n(o.target.value)}),a.jsx(e.Radio,{...l,label:`${s} B`,value:"b",checked:d==="b",onChange:o=>n(o.target.value)})]})}}),a.jsx(e.AutoPropsTable,{componentName:"Radio"}),a.jsx(e.CardContainer,{className:"overflow-hidden",children:a.jsx(e.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:a.jsx("div",{className:"w-full p-4 sm:p-6",children:a.jsx(e.CodeBlock,{language:"tsx",code:`import { Radio } from '@e-burgos/tucu-ui';
+
+<Radio
+  label="Option 1"
+  value="option1"
+  checked={value === 'option1'}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// Variants
+<Radio label="Ghost" variant="ghost" value="ghost" />
+<Radio label="Solid" variant="solid" value="solid" />
+<Radio label="Transparent" variant="transparent" value="transparent" />
+
+// Colors
+<Radio label="Primary" color="primary" />
+<Radio label="Secondary" color="secondary" />
+<Radio label="Danger" color="danger" />
+<Radio label="Info" color="info" />
+<Radio label="Success" color="success" />
+<Radio label="Warning" color="warning" />
+
+// Sizes
+<Radio label="Small" size="sm" />
+<Radio label="Medium" size="md" />
+<Radio label="Large" size="lg" />
+<Radio label="Extra Large" size="xl" />`})})})})]})};exports.default=g;

package/documentation/RadioSection-rHrHsIha.js

@@ -0,0 +1,183 @@
+import { jsxs as i, Fragment as p, jsx as a } from "react/jsx-runtime";
+import { useState as g } from "react";
+import { H as v, C as l, a as d, T as o, s as r, P as N, A as f, c as R } from "../index-lfg6LZ1p.js";
+import { Circle as w } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const V = () => {
+  const [c, n] = g(""), [m, h] = g("a"), b = [
+    { 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" },
+    { label: "Extra Large", size: "xl" }
+  ];
+  return /* @__PURE__ */ i(p, { children: [
+    /* @__PURE__ */ a(
+      v,
+      {
+        title: "Radio",
+        description: "A single radio button component for binary choices.",
+        icon: /* @__PURE__ */ a("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-violet-500 via-purple-500 to-fuchsia-500 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ a(w, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ i(l, { className: "p-4", children: [
+        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Basic Radio" }),
+        /* @__PURE__ */ a(
+          r,
+          {
+            label: "Option 1",
+            value: "option1",
+            checked: c === "option1",
+            onChange: (e) => n(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(l, { className: "p-4", children: [
+        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ a(r, { label: "Disabled option", value: "disabled", disabled: !0 })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ i(l, { className: "p-4", children: [
+        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ a(
+          r,
+          {
+            label: "Ghost Variant",
+            value: "ghost",
+            variant: "ghost",
+            checked: c === "ghost",
+            onChange: (e) => n(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(l, { className: "p-4", children: [
+        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ a(
+          r,
+          {
+            label: "Solid Variant",
+            value: "solid",
+            variant: "solid",
+            checked: c === "solid",
+            onChange: (e) => n(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ i(l, { className: "p-4", children: [
+        /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ a(
+          r,
+          {
+            label: "Transparent Variant",
+            value: "transparent",
+            variant: "transparent",
+            checked: c === "transparent",
+            onChange: (e) => n(e.target.value)
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: b.map(({ label: e, color: s }) => /* @__PURE__ */ i(l, { className: "p-4", children: [
+      /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: e }),
+      /* @__PURE__ */ a(r, { label: `${e} Radio`, value: s, color: s })
+    ] }, s)) }) }) }) }),
+    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4", children: u.map(({ label: e, size: s }) => /* @__PURE__ */ i(l, { className: "p-4", children: [
+      /* @__PURE__ */ a(o, { tag: "h5", className: "mb-3", children: e }),
+      /* @__PURE__ */ a(r, { label: `${e} Radio`, value: s, size: s })
+    ] }, s)) }) }) }) }),
+    /* @__PURE__ */ a(
+      N,
+      {
+        componentName: "Radio",
+        defaultValues: {
+          label: "Preview Radio",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          disabled: !1,
+          labelPlacement: "end"
+        },
+        includeProps: [
+          "label",
+          "variant",
+          "color",
+          "size",
+          "disabled",
+          "labelPlacement"
+        ],
+        excludeProps: ["checked", "onChange", "value"],
+        children: (e) => {
+          const s = typeof e.label == "string" && e.label.length > 0 ? e.label : "Preview Radio";
+          return /* @__PURE__ */ i("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a(
+              r,
+              {
+                ...e,
+                label: `${s} A`,
+                value: "a",
+                checked: m === "a",
+                onChange: (t) => h(t.target.value)
+              }
+            ),
+            /* @__PURE__ */ a(
+              r,
+              {
+                ...e,
+                label: `${s} B`,
+                value: "b",
+                checked: m === "b",
+                onChange: (t) => h(t.target.value)
+              }
+            )
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ a(f, { componentName: "Radio" }),
+    /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a(
+      R,
+      {
+        language: "tsx",
+        code: `import { Radio } from '@e-burgos/tucu-ui';
+
+<Radio
+  label="Option 1"
+  value="option1"
+  checked={value === 'option1'}
+  onChange={(e) => setValue(e.target.value)}
+/>
+
+// Variants
+<Radio label="Ghost" variant="ghost" value="ghost" />
+<Radio label="Solid" variant="solid" value="solid" />
+<Radio label="Transparent" variant="transparent" value="transparent" />
+
+// Colors
+<Radio label="Primary" color="primary" />
+<Radio label="Secondary" color="secondary" />
+<Radio label="Danger" color="danger" />
+<Radio label="Info" color="info" />
+<Radio label="Success" color="success" />
+<Radio label="Warning" color="warning" />
+
+// Sizes
+<Radio label="Small" size="sm" />
+<Radio label="Medium" size="md" />
+<Radio label="Large" size="lg" />
+<Radio label="Extra Large" size="xl" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  V as default
+};

package/documentation/{RevealContentSection-D1NNa1Zb.js → RevealContentSection-B7d6jZ3X.js}

@@ -1,10 +1,10 @@
 import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
-import { T as t, C as n, a as o, ar as l, P as h, A as c, c as d } from "../index-D3gBsvbO.js";
-import "lucide-react";
+import { H as h, C as n, a as o, T as t, au as l, P as d, A as c, c as p } from "../index-lfg6LZ1p.js";
+import { Eye as m } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const f = () => {
+const x = () => {
   const i = /* @__PURE__ */ a("div", { className: "space-y-2", children: [
     /* @__PURE__ */ e(t, { tag: "p", children: "This is a long piece of content that will be collapsed by default." }),
     /* @__PURE__ */ e(t, { tag: "p", children: 'When the content exceeds the default height, a "Show More" button will appear.' }),
@@ -13,17 +13,14 @@ const f = () => {
     /* @__PURE__ */ e(t, { tag: "p", children: "This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view." })
   ] });
   return /* @__PURE__ */ a(r, { children: [
-    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
-      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "RevealContent" }),
-      /* @__PURE__ */ e(
-        t,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: 'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.'
-        }
-      )
-    ] }),
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "RevealContent",
+        description: 'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.',
+        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-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(m, { 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(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       /* @__PURE__ */ a(n, { className: "p-4", children: [
         /* @__PURE__ */ e(t, { tag: "h5", className: "mb-3", children: "Default Height 100px" }),
@@ -35,7 +32,7 @@ const f = () => {
       ] })
     ] }) }) }) }),
     /* @__PURE__ */ e(
-      h,
+      d,
       {
         componentName: "RevealContent",
         defaultValues: { defaultHeight: 100 },
@@ -50,7 +47,7 @@ const f = () => {
     ),
     /* @__PURE__ */ e(c, { componentName: "RevealContent" }),
     /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      d,
+      p,
       {
         language: "tsx",
         code: `import { RevealContent, Typography } from '@e-burgos/tucu-ui';
@@ -79,5 +76,5 @@ const f = () => {
   ] });
 };
 export {
-  f as default
+  x as default
 };

package/documentation/RevealContentSection-DFeDG75P.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=e.jsxs("div",{className:"space-y-2",children:[e.jsx(t.Typography,{tag:"p",children:"This is a long piece of content that will be collapsed by default."}),e.jsx(t.Typography,{tag:"p",children:'When the content exceeds the default height, a "Show More" button will appear.'}),e.jsx(t.Typography,{tag:"p",children:"Clicking the button will expand the content to show everything."}),e.jsx(t.Typography,{tag:"p",children:'You can then click "Show Less" to collapse it back to the default height.'}),e.jsx(t.Typography,{tag:"p",children:"This is useful for displaying long descriptions, articles, or any content that might be too long for the initial view."})]});return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"RevealContent",description:'A component that automatically collapses long content and provides a "Show More" / "Show Less" button.',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-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.Eye,{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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 100px"}),e.jsx(t.RevealContent,{defaultHeight:100,children:a})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Default Height 150px"}),e.jsx(t.RevealContent,{defaultHeight:150,children:a})]})]})})})}),e.jsx(t.PropPlayground,{componentName:"RevealContent",defaultValues:{defaultHeight:100},excludeProps:[],children:n=>e.jsx(t.RevealContent,{...n,children:e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This is the first paragraph of content that is initially visible."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This second paragraph may be hidden depending on the defaultHeight value."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"This third paragraph is likely hidden and revealed when expanded."}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"And here is even more content to demonstrate the reveal functionality."})]})})}),e.jsx(t.AutoPropsTable,{componentName:"RevealContent"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.CodeBlock,{language:"tsx",code:`import { RevealContent, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<RevealContent defaultHeight={100}>
+  <div>
+    <Typography tag="p">Long content here...</Typography>
+    <Typography tag="p">More content...</Typography>
+  </div>
+</RevealContent>
+
+// With custom height
+<RevealContent defaultHeight={150}>
+  <div>
+    {/* Your long content */}
+  </div>
+</RevealContent>
+
+// The component automatically:
+// - Shows "Show More" if content exceeds defaultHeight
+// - Shows "Show Less" when expanded
+// - Hides button if content is shorter than defaultHeight`})})})})]})};exports.default=l;