@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/SelectSection-CYx0EZJX.js

@@ -0,0 +1,346 @@
+import { jsxs as l, Fragment as S, jsx as e } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { H as N, C as a, a as n, T as s, S as o, P as f, A as w, c as y } from "../index-lfg6LZ1p.js";
+import { ChevronDown as C, Globe as i, Star as x, Zap as P, Shield as O } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const E = () => {
+  const [p, m] = d(void 0), r = [
+    { name: "Argentina", value: "ar" },
+    { name: "Brasil", value: "br" },
+    { name: "Chile", value: "cl" },
+    { name: "Colombia", value: "co" },
+    { name: "México", value: "mx" },
+    { name: "Perú", value: "pe" },
+    { name: "Uruguay", value: "uy" },
+    { name: "Venezuela", value: "ve" }
+  ], h = [
+    {
+      name: "Free",
+      value: "free",
+      description: "Basic features, 1 user",
+      icon: /* @__PURE__ */ e(x, { className: "h-4 w-4 text-gray-400" })
+    },
+    {
+      name: "Pro",
+      value: "pro",
+      description: "Advanced features, 5 users",
+      icon: /* @__PURE__ */ e(P, { className: "h-4 w-4 text-brand" })
+    },
+    {
+      name: "Enterprise",
+      value: "enterprise",
+      description: "Custom features, unlimited",
+      icon: /* @__PURE__ */ e(O, { className: "h-4 w-4 text-green-500" })
+    },
+    {
+      name: "Legacy",
+      value: "legacy",
+      description: "No longer available",
+      disabled: !0
+    }
+  ], u = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], g = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ], [b, v] = d(r[0]);
+  return /* @__PURE__ */ l(S, { children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        title: "Select",
+        description: "A dropdown select component with search, descriptions, disabled options, and check indicators.",
+        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-teal-500 via-emerald-500 to-green-500 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50", children: /* @__PURE__ */ e(C, { 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(n, { 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(s, { tag: "h5", className: "mb-3", children: "Basic Select" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Country",
+            placeholder: "Select a country",
+            options: r,
+            selectedOption: p,
+            onChange: m
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Searchable" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Country",
+            placeholder: "Search and select...",
+            options: r,
+            searchable: !0,
+            searchPlaceholder: "Type to filter...",
+            showCheck: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Descriptions & Icons" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Plan",
+            placeholder: "Choose a plan",
+            options: h,
+            showCheck: !0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Helper Text" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Language",
+            placeholder: "Select a language",
+            helperText: "Choose your preferred language",
+            options: [
+              {
+                name: "English",
+                value: "en",
+                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
+              },
+              {
+                name: "Spanish",
+                value: "es",
+                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
+              },
+              {
+                name: "French",
+                value: "fr",
+                icon: /* @__PURE__ */ e(i, { className: "h-4 w-4" })
+              }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Error" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Category",
+            placeholder: "Select a category",
+            errorMessage: "Category is required",
+            options: [
+              { name: "Option 1", value: "opt1" },
+              { name: "Option 2", value: "opt2" }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Status",
+            placeholder: "Select status",
+            disabled: !0,
+            options: [
+              { name: "Active", value: "active" },
+              { name: "Inactive", value: "inactive" }
+            ]
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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(s, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Ghost Variant",
+            placeholder: "Select option",
+            variant: "ghost",
+            options: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Solid Variant",
+            placeholder: "Select option",
+            variant: "solid",
+            options: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l(a, { className: "p-4", children: [
+        /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Transparent Variant",
+            placeholder: "Select option",
+            variant: "transparent",
+            options: r
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: u.map(({ label: t, color: c }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: t }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          label: `${t} Select`,
+          placeholder: "Select option",
+          color: c,
+          options: r
+        }
+      )
+    ] }, c)) }) }) }) }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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: g.map(({ label: t, size: c }) => /* @__PURE__ */ l(a, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: t }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          label: `${t} Select`,
+          placeholder: "Select option",
+          size: c,
+          options: r
+        }
+      )
+    ] }, c)) }) }) }) }),
+    /* @__PURE__ */ e(
+      f,
+      {
+        componentName: "Select",
+        defaultValues: {
+          label: "Preview Select",
+          placeholder: "Select a country",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          helperText: "",
+          errorMessage: "",
+          searchable: !1,
+          searchPlaceholder: "Search...",
+          showCheck: !0,
+          disabled: !1
+        },
+        controlOverrides: [
+          {
+            name: "placeholder",
+            type: "text",
+            description: "Placeholder text rendered before selecting an option"
+          }
+        ],
+        includeProps: [
+          "label",
+          "placeholder",
+          "variant",
+          "color",
+          "size",
+          "helperText",
+          "errorMessage",
+          "searchable",
+          "searchPlaceholder",
+          "showCheck",
+          "disabled"
+        ],
+        excludeProps: [
+          "options",
+          "selectedOption",
+          "onChange",
+          "onSelect",
+          "value",
+          "name",
+          "buttonClassName",
+          "children"
+        ],
+        children: (t) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
+          o,
+          {
+            ...t,
+            placeholder: t.placeholder || "Select a country",
+            options: r,
+            selectedOption: b,
+            onChange: (c) => v(c)
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(w, { componentName: "Select" }),
+    /* @__PURE__ */ e(a, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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 { Select } from '@e-burgos/tucu-ui';
+
+const options = [
+  { name: 'Argentina', value: 'ar' },
+  { name: 'Brasil', value: 'br' },
+  { name: 'Chile', value: 'cl' },
+];
+
+// Basic
+<Select
+  label="Country"
+  placeholder="Select a country"
+  options={options}
+  selectedOption={selectedOption}
+  onChange={setSelectedOption}
+/>
+
+// Searchable with check
+<Select
+  label="Country"
+  placeholder="Search..."
+  options={options}
+  searchable
+  searchPlaceholder="Type to filter..."
+  showCheck
+/>
+
+// With descriptions, icons, and disabled options
+const plans = [
+  { name: 'Free', value: 'free', description: 'Basic features' },
+  { name: 'Pro', value: 'pro', description: 'Advanced', icon: <Zap /> },
+  { name: 'Legacy', value: 'legacy', disabled: true },
+];
+<Select label="Plan" options={plans} showCheck />
+
+// Variants
+<Select variant="ghost" options={options} />
+<Select variant="solid" options={options} />
+<Select variant="transparent" options={options} />
+
+// Colors
+<Select color="primary" options={options} />
+<Select color="secondary" options={options} />
+<Select color="danger" options={options} />
+<Select color="info" options={options} />
+<Select color="success" options={options} />
+<Select color="warning" options={options} />
+
+// Sizes
+<Select size="sm" options={options} />
+<Select size="md" options={options} />
+<Select size="lg" options={options} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  E as default
+};

package/documentation/SelectSection-DupPSBKF.js

@@ -0,0 +1,52 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const u=()=>{const[n,c]=t.useState(void 0),l=[{name:"Argentina",value:"ar"},{name:"Brasil",value:"br"},{name:"Chile",value:"cl"},{name:"Colombia",value:"co"},{name:"México",value:"mx"},{name:"Perú",value:"pe"},{name:"Uruguay",value:"uy"},{name:"Venezuela",value:"ve"}],i=[{name:"Free",value:"free",description:"Basic features, 1 user",icon:e.jsx(r.Star,{className:"h-4 w-4 text-gray-400"})},{name:"Pro",value:"pro",description:"Advanced features, 5 users",icon:e.jsx(r.Zap,{className:"h-4 w-4 text-brand"})},{name:"Enterprise",value:"enterprise",description:"Custom features, unlimited",icon:e.jsx(r.Shield,{className:"h-4 w-4 text-green-500"})},{name:"Legacy",value:"legacy",description:"No longer available",disabled:!0}],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"}],p=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],[h,m]=t.useState(l[0]);return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Select",description:"A dropdown select component with search, descriptions, disabled options, and check indicators.",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-teal-500 via-emerald-500 to-green-500 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50",children:e.jsx(r.ChevronDown,{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 Select"}),e.jsx(a.Select,{label:"Country",placeholder:"Select a country",options:l,selectedOption:n,onChange:c})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Searchable"}),e.jsx(a.Select,{label:"Country",placeholder:"Search and select...",options:l,searchable:!0,searchPlaceholder:"Type to filter...",showCheck:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Descriptions & Icons"}),e.jsx(a.Select,{label:"Plan",placeholder:"Choose a plan",options:i,showCheck:!0})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Helper Text"}),e.jsx(a.Select,{label:"Language",placeholder:"Select a language",helperText:"Choose your preferred language",options:[{name:"English",value:"en",icon:e.jsx(r.Globe,{className:"h-4 w-4"})},{name:"Spanish",value:"es",icon:e.jsx(r.Globe,{className:"h-4 w-4"})},{name:"French",value:"fr",icon:e.jsx(r.Globe,{className:"h-4 w-4"})}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Error"}),e.jsx(a.Select,{label:"Category",placeholder:"Select a category",errorMessage:"Category is required",options:[{name:"Option 1",value:"opt1"},{name:"Option 2",value:"opt2"}]})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.Select,{label:"Status",placeholder:"Select status",disabled:!0,options:[{name:"Active",value:"active"},{name:"Inactive",value:"inactive"}]})]})]})})})}),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.Select,{label:"Ghost Variant",placeholder:"Select option",variant:"ghost",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.Select,{label:"Solid Variant",placeholder:"Select option",variant:"solid",options:l})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.Select,{label:"Transparent Variant",placeholder:"Select option",variant:"transparent",options:l})]})]})})})}),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:s,color:o})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.Select,{label:`${s} Select`,placeholder:"Select option",color:o,options:l})]},o))})})})}),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:p.map(({label:s,size:o})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.Select,{label:`${s} Select`,placeholder:"Select option",size:o,options:l})]},o))})})})}),e.jsx(a.PropPlayground,{componentName:"Select",defaultValues:{label:"Preview Select",placeholder:"Select a country",variant:"ghost",color:"primary",size:"md",helperText:"",errorMessage:"",searchable:!1,searchPlaceholder:"Search...",showCheck:!0,disabled:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text rendered before selecting an option"}],includeProps:["label","placeholder","variant","color","size","helperText","errorMessage","searchable","searchPlaceholder","showCheck","disabled"],excludeProps:["options","selectedOption","onChange","onSelect","value","name","buttonClassName","children"],children:s=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.Select,{...s,placeholder:s.placeholder||"Select a country",options:l,selectedOption:h,onChange:o=>m(o)})})}),e.jsx(a.AutoPropsTable,{componentName:"Select"}),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 { Select } from '@e-burgos/tucu-ui';
+
+const options = [
+  { name: 'Argentina', value: 'ar' },
+  { name: 'Brasil', value: 'br' },
+  { name: 'Chile', value: 'cl' },
+];
+
+// Basic
+<Select
+  label="Country"
+  placeholder="Select a country"
+  options={options}
+  selectedOption={selectedOption}
+  onChange={setSelectedOption}
+/>
+
+// Searchable with check
+<Select
+  label="Country"
+  placeholder="Search..."
+  options={options}
+  searchable
+  searchPlaceholder="Type to filter..."
+  showCheck
+/>
+
+// With descriptions, icons, and disabled options
+const plans = [
+  { name: 'Free', value: 'free', description: 'Basic features' },
+  { name: 'Pro', value: 'pro', description: 'Advanced', icon: <Zap /> },
+  { name: 'Legacy', value: 'legacy', disabled: true },
+];
+<Select label="Plan" options={plans} showCheck />
+
+// Variants
+<Select variant="ghost" options={options} />
+<Select variant="solid" options={options} />
+<Select variant="transparent" options={options} />
+
+// Colors
+<Select color="primary" options={options} />
+<Select color="secondary" options={options} />
+<Select color="danger" options={options} />
+<Select color="info" options={options} />
+<Select color="success" options={options} />
+<Select color="warning" options={options} />
+
+// Sizes
+<Select size="sm" options={options} />
+<Select size="md" options={options} />
+<Select size="lg" options={options} />`})})})})]})};exports.default=u;

package/documentation/SettingsPanelSection-GhZ66ZdG.js

@@ -0,0 +1,139 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { ay as x, H as N, T as s, ax as f, C as y, a as w, K as a, x as l } from "../index-lfg6LZ1p.js";
+import { Settings as b, Moon as v, Globe as C, Layout as k, Palette as S } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const D = () => {
+  const {
+    mode: r,
+    layout: o,
+    primaryPreset: c,
+    secondaryPreset: d,
+    accentPreset: m,
+    direction: g,
+    setMode: h,
+    setIsSettingsOpen: u,
+    isSettingsOpen: i
+  } = x();
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        title: "Settings Panel",
+        description: "Built-in UI for users to customize theme mode, layout, direction, and all color presets at runtime.",
+        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-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Panel Features" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "What users can customize through the settings panel"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
+        {
+          icon: /* @__PURE__ */ e(v, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+          title: "Mode Switching",
+          description: "Toggle between light and dark modes.",
+          iconBgClassName: "from-blue-500 to-indigo-500"
+        },
+        {
+          icon: /* @__PURE__ */ e(C, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+          title: "RTL/LTR Direction",
+          description: "Switch text direction for international apps.",
+          iconBgClassName: "from-green-500 to-emerald-500"
+        },
+        {
+          icon: /* @__PURE__ */ e(k, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+          title: "Layout Options",
+          description: "Choose between Clean, Admin, and Horizontal layouts.",
+          iconBgClassName: "from-orange-500 to-red-500"
+        },
+        {
+          icon: /* @__PURE__ */ e(S, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+          title: "Color Management",
+          description: "Select from 34 presets for primary, secondary, accent, muted, and backgrounds.",
+          iconBgClassName: "from-pink-500 to-rose-500"
+        }
+      ].map((n) => /* @__PURE__ */ e(f, { layout: "horizontal", ...n }, n.title)) })
+    ] }),
+    /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Live Preview" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "Current theme state and interactive controls"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(w, { title: "Current Settings", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ t("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-3", children: [
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Mode" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: r })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Layout" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: o })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Primary" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: c?.label || "DEFAULT_PRIMARY" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Secondary" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: d?.label || "DEFAULT_SECONDARY" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Accent" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: m?.label || "DEFAULT_ACCENT" })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg", children: [
+            /* @__PURE__ */ e("span", { className: "text-sm font-medium", children: "Direction" }),
+            /* @__PURE__ */ e(a, { variant: "outline", className: "text-xs", children: g || "LTR" })
+          ] })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex gap-2 w-full mt-4", children: [
+          /* @__PURE__ */ t(
+            l,
+            {
+              size: "small",
+              onClick: () => h(r === "dark" ? "light" : "dark"),
+              className: "flex-1",
+              children: [
+                "Toggle ",
+                r === "dark" ? "Light" : "Dark"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            l,
+            {
+              size: "small",
+              variant: "ghost",
+              onClick: () => u(!i),
+              className: "flex-1",
+              children: [
+                i ? "Close" : "Open",
+                " Settings"
+              ]
+            }
+          )
+        ] })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  D as default
+};

package/documentation/SettingsPanelSection-legHUhoT.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const h=()=>{const{mode:a,layout:n,primaryPreset:l,secondaryPreset:d,accentPreset:c,direction:o,setMode:m,setIsSettingsOpen:g,isSettingsOpen:r}=s.useTheme(),x=[{icon:e.jsx(t.Moon,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Mode Switching",description:"Toggle between light and dark modes.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(t.Globe,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"RTL/LTR Direction",description:"Switch text direction for international apps.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(t.Layout,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Layout Options",description:"Choose between Clean, Admin, and Horizontal layouts.",iconBgClassName:"from-orange-500 to-red-500"},{icon:e.jsx(t.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Color Management",description:"Select from 34 presets for primary, secondary, accent, muted, and backgrounds.",iconBgClassName:"from-pink-500 to-rose-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Settings Panel",description:"Built-in UI for users to customize theme mode, layout, direction, and all color presets at runtime.",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-orange-500 via-red-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Settings,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Panel Features"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"What users can customize through the settings panel"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:x.map(i=>e.jsx(s.FeatureCard,{layout:"horizontal",...i},i.title))})]}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Live Preview"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Current theme state and interactive controls"})]}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Current Settings",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-3",children:[e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Mode"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:a})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Layout"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:n})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Primary"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:l?.label||"DEFAULT_PRIMARY"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Secondary"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:d?.label||"DEFAULT_SECONDARY"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Accent"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:c?.label||"DEFAULT_ACCENT"})]}),e.jsxs("div",{className:"flex justify-between items-center p-3 bg-gray-200 dark:bg-gray-800 rounded-lg",children:[e.jsx("span",{className:"text-sm font-medium",children:"Direction"}),e.jsx(s.Badge,{variant:"outline",className:"text-xs",children:o||"LTR"})]})]}),e.jsxs("div",{className:"flex gap-2 w-full mt-4",children:[e.jsxs(s.Button,{size:"small",onClick:()=>m(a==="dark"?"light":"dark"),className:"flex-1",children:["Toggle ",a==="dark"?"Light":"Dark"]}),e.jsxs(s.Button,{size:"small",variant:"ghost",onClick:()=>g(!r),className:"flex-1",children:[r?"Close":"Open"," Settings"]})]})]})})})]})]})};exports.default=h;

package/documentation/ShadowsSection-kJV-ttft.js

@@ -0,0 +1,101 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { H as o, C as n, a as d, T as r } from "../index-lfg6LZ1p.js";
+import { Layers as i } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const m = (a) => {
+  if (typeof window > "u") return "";
+  const t = document.documentElement;
+  return getComputedStyle(t).getPropertyValue(a).trim() || "";
+}, f = () => /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+  /* @__PURE__ */ e(
+    o,
+    {
+      title: "Shadows",
+      description: "Shadow tokens from Tucu UI Design System for depth and elevation.",
+      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-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Shadow Tokens", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
+    {
+      name: "Main",
+      varName: "--shadow-main",
+      description: "Primary shadow for cards and elevated elements"
+    },
+    {
+      name: "Light",
+      varName: "--shadow-light",
+      description: "Subtle shadow for minimal elevation"
+    },
+    {
+      name: "Large",
+      varName: "--shadow-large",
+      description: "Prominent shadow for modals and overlays"
+    },
+    {
+      name: "Card",
+      varName: "--shadow-card",
+      description: "Standard shadow for card components"
+    },
+    {
+      name: "Transaction",
+      varName: "--shadow-transaction",
+      description: "Shadow for transaction lists and tables"
+    },
+    {
+      name: "Expand",
+      varName: "--shadow-expand",
+      description: "Strong shadow for expanded elements"
+    },
+    {
+      name: "Button",
+      varName: "--shadow-button",
+      description: "Shadow for button components"
+    },
+    {
+      name: "Drop Shadow Main",
+      varName: "--drop-shadow-main",
+      description: "Drop shadow for images and graphics"
+    }
+  ].map((a) => {
+    const t = m(a.varName);
+    return /* @__PURE__ */ s("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(r, { tag: "h3", className: "font-semibold", children: a.name }),
+        /* @__PURE__ */ e(r, { tag: "p", className: "text-sm text-muted", children: a.description })
+      ] }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "h-32 bg-white dark:bg-gray-800 rounded-lg p-4 flex items-center justify-center",
+          style: {
+            boxShadow: t || `var(${a.varName})`
+          },
+          children: /* @__PURE__ */ e(r, { tag: "h4", className: "text-center", children: a.name })
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "h4",
+            className: "text-muted text-xs break-all font-mono",
+            children: a.varName
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          r,
+          {
+            tag: "h4",
+            className: "text-muted text-[10px] break-all",
+            children: t
+          }
+        )
+      ] })
+    ] }, a.name);
+  }) }) }) }) })
+] });
+export {
+  f as default
+};