@e-burgos/tucu-ui 2.6.0 → 2.7.0

package/documentation/ToastSection-C2_Av055.js

@@ -1,38 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-DWDUS-PU.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const{addToast:a}=t.useToastStore(),r=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],n=[{prop:"Toast Component",type:"React.FC",default:"-",description:"The Toast component renders automatically from the toast store"},{prop:"useToastStore",type:"Hook",default:"-",description:"Hook to manage toast notifications"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Toast",description:`A toast notification system for displaying temporary messages with
-          multiple variants and auto-dismiss functionality.`,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-red-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(i.BellRing,{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.jsxs("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(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Success Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Success!",message:"Operation completed successfully.",variant:"success"}),children:"Show Success Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Error Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Error!",message:"Something went wrong.",variant:"destructive"}),children:"Show Error Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Warning Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Warning!",message:"Please review this information.",variant:"warning"}),children:"Show Warning Toast"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Info Toast"}),e.jsx(t.Button,{onClick:()=>a({id:Date.now().toString(),title:"Info",message:"Here is some information.",variant:"info"}),children:"Show Info Toast"})]})]}),e.jsx(t.Toast,{})]})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:r,data:n})})})}),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 { Toast, useToastStore } from '@e-burgos/tucu-ui';
-
-function MyComponent() {
-  const { addToast } = useToastStore();
-
-  const showSuccess = () => {
-    addToast({
-      id: Date.now().toString(),
-      title: 'Success!',
-      message: 'Operation completed successfully.',
-      variant: 'success',
-    });
-  };
-
-  const showError = () => {
-    addToast({
-      id: Date.now().toString(),
-      title: 'Error!',
-      message: 'Something went wrong.',
-      variant: 'destructive',
-    });
-  };
-
-  return (
-    <>
-      <button onClick={showSuccess}>Show Success</button>
-      <button onClick={showError}>Show Error</button>
-      <Toast />
-    </>
-  );
-}
-
-// Toast variants
-addToast({ id: Date.now().toString(), variant: 'success', title: 'Success', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'destructive', title: 'Error', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'warning', title: 'Warning', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`})})})})]})};exports.default=l;

package/documentation/ToastSection-NoDnkMGu.js

@@ -1,168 +0,0 @@
-import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { al as d, H as m, C as s, a as n, T as r, x as i, am as h, y as p, c as u } from "../index-DoxeCFUJ.js";
-import { BellRing as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => {
-  const { addToast: o } = d();
-  return /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Toast",
-        description: `A toast notification system for displaying temporary messages with
-          multiple variants and auto-dismiss functionality.`,
-        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-red-600 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(g, { 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(n, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-        /* @__PURE__ */ t(s, { className: "p-4", children: [
-          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Success Toast" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              onClick: () => o({
-                id: Date.now().toString(),
-                title: "Success!",
-                message: "Operation completed successfully.",
-                variant: "success"
-              }),
-              children: "Show Success Toast"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t(s, { className: "p-4", children: [
-          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Error Toast" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              onClick: () => o({
-                id: Date.now().toString(),
-                title: "Error!",
-                message: "Something went wrong.",
-                variant: "destructive"
-              }),
-              children: "Show Error Toast"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t(s, { className: "p-4", children: [
-          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Warning Toast" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              onClick: () => o({
-                id: Date.now().toString(),
-                title: "Warning!",
-                message: "Please review this information.",
-                variant: "warning"
-              }),
-              children: "Show Warning Toast"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ t(s, { className: "p-4", children: [
-          /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Info Toast" }),
-          /* @__PURE__ */ e(
-            i,
-            {
-              onClick: () => o({
-                id: Date.now().toString(),
-                title: "Info",
-                message: "Here is some information.",
-                variant: "info"
-              }),
-              children: "Show Info Toast"
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ e(h, {})
-    ] }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(p, { columns: [
-      {
-        key: "prop",
-        label: "Prop",
-        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
-      },
-      {
-        key: "type",
-        label: "Type",
-        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
-      },
-      {
-        key: "default",
-        label: "Default",
-        render: (a) => {
-          const l = String(a);
-          return l === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l });
-        }
-      },
-      {
-        key: "description",
-        label: "Description"
-      }
-    ], data: [
-      {
-        prop: "Toast Component",
-        type: "React.FC",
-        default: "-",
-        description: "The Toast component renders automatically from the toast store"
-      },
-      {
-        prop: "useToastStore",
-        type: "Hook",
-        default: "-",
-        description: "Hook to manage toast notifications"
-      }
-    ] }) }) }) }),
-    /* @__PURE__ */ e(s, { 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(
-      u,
-      {
-        language: "tsx",
-        code: `import { Toast, useToastStore } from '@e-burgos/tucu-ui';
-
-function MyComponent() {
-  const { addToast } = useToastStore();
-
-  const showSuccess = () => {
-    addToast({
-      id: Date.now().toString(),
-      title: 'Success!',
-      message: 'Operation completed successfully.',
-      variant: 'success',
-    });
-  };
-
-  const showError = () => {
-    addToast({
-      id: Date.now().toString(),
-      title: 'Error!',
-      message: 'Something went wrong.',
-      variant: 'destructive',
-    });
-  };
-
-  return (
-    <>
-      <button onClick={showSuccess}>Show Success</button>
-      <button onClick={showError}>Show Error</button>
-      <Toast />
-    </>
-  );
-}
-
-// Toast variants
-addToast({ id: Date.now().toString(), variant: 'success', title: 'Success', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'destructive', title: 'Error', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'warning', title: 'Warning', message: '...' });
-addToast({ id: Date.now().toString(), variant: 'info', title: 'Info', message: '...' });`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  x as default
-};

package/documentation/ToggleBarSection-BdjFoJjH.js

@@ -1,186 +0,0 @@
-import { jsxs as t, Fragment as T, jsx as e } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { H as b, C as l, a as i, T as r, w as s, P as w, A as N, c as f } from "../index-DoxeCFUJ.js";
-import { ToggleRight as B, Save as h } from "lucide-react";
-import "react-router-dom";
-import "react-dom";
-const W = () => {
-  const [a, n] = d(!1), [g, m] = d(!0), k = [
-    { 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, p] = d({
-    primary: !0,
-    secondary: !0,
-    danger: !0,
-    info: !0,
-    success: !0,
-    warning: !0
-  }), C = (o) => () => {
-    p((c) => ({
-      ...c,
-      [o]: !c[o]
-    }));
-  };
-  return /* @__PURE__ */ t(T, { children: [
-    /* @__PURE__ */ e(
-      b,
-      {
-        title: "ToggleBar",
-        description: "A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",
-        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-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50", 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__ */ e(l, { 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__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Basic ToggleBar" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            title: "Enable Notifications",
-            checked: a,
-            onChange: () => n(!a)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Subtitle" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            title: "Dark Mode",
-            subTitle: "Switch between light and dark themes",
-            checked: a,
-            onChange: () => n(!a)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Icon" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            title: "Auto Save",
-            subTitle: "Automatically save your work",
-            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
-            checked: a,
-            onChange: () => n(!a)
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t(l, { className: "p-4", children: [
-        /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "With Children" }),
-        /* @__PURE__ */ e(
-          s,
-          {
-            title: "Advanced Settings",
-            subTitle: "Show advanced configuration options",
-            checked: a,
-            onChange: () => n(!a),
-            children: /* @__PURE__ */ e("div", { className: "mt-4 space-y-2", children: /* @__PURE__ */ e(
-              r,
-              {
-                tag: "p",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: "Additional content appears here when toggle is enabled."
-              }
-            ) })
-          }
-        )
-      ] })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(l, { 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 md:grid-cols-2 xl:grid-cols-3", children: k.map(({ label: o, color: c }) => /* @__PURE__ */ t(l, { className: "p-4", children: [
-      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: o }),
-      /* @__PURE__ */ e(
-        s,
-        {
-          title: `${o} Toggle`,
-          subTitle: "Toggle with inherited Switch color",
-          color: c,
-          checked: u[c],
-          onChange: C(c)
-        }
-      )
-    ] }, c)) }) }) }) }),
-    /* @__PURE__ */ e(
-      w,
-      {
-        componentName: "ToggleBar",
-        defaultValues: {
-          title: "Preview ToggleBar",
-          subTitle: "Use the controls to adjust the component",
-          color: "primary"
-        },
-        includeProps: ["title", "subTitle", "color"],
-        excludeProps: ["checked", "onChange", "icon", "children"],
-        children: (o) => /* @__PURE__ */ e("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ e(
-          s,
-          {
-            ...o,
-            icon: /* @__PURE__ */ e(h, { className: "w-5 h-5" }),
-            checked: g,
-            onChange: () => m((c) => !c)
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ e(N, { componentName: "ToggleBar" }),
-    /* @__PURE__ */ e(l, { 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(
-      f,
-      {
-        language: "tsx",
-        code: `import { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';
-
-const [checked, setChecked] = useState(false);
-
-// Basic usage
-<ToggleBar
-  title="Enable Notifications"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// With subtitle
-<ToggleBar
-  title="Dark Mode"
-  subTitle="Switch between light and dark themes"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// With icon
-<ToggleBar
-  title="Auto Save"
-  icon={<LucideIcons.Save className="w-5 h-5" />}
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// Colors
-<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Warning" color="warning" checked={checked} onChange={() => setChecked(!checked)} />
-
-// With children
-<ToggleBar
-  title="Advanced Settings"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
->
-  <div className="mt-4">
-    <p>Additional content here</p>
-  </div>
-</ToggleBar>`
-      }
-    ) }) }) })
-  ] });
-};
-export {
-  W as default
-};

package/documentation/ToggleBarSection-CSPKIKSE.js

@@ -1,45 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-DWDUS-PU.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const u=()=>{const[l,t]=o.useState(!1),[n,d]=o.useState(!0),i=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],[h,g]=o.useState({primary:!0,secondary:!0,danger:!0,info:!0,success:!0,warning:!0}),m=s=>()=>{g(c=>({...c,[s]:!c[s]}))};return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"ToggleBar",description:"A toggle bar component with title, subtitle, icon, and optional content. Perfect for settings panels and feature toggles.",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-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(r.ToggleRight,{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 ToggleBar"}),e.jsx(a.ToggleBar,{title:"Enable Notifications",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Subtitle"}),e.jsx(a.ToggleBar,{title:"Dark Mode",subTitle:"Switch between light and dark themes",checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Icon"}),e.jsx(a.ToggleBar,{title:"Auto Save",subTitle:"Automatically save your work",icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:l,onChange:()=>t(!l)})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"With Children"}),e.jsx(a.ToggleBar,{title:"Advanced Settings",subTitle:"Show advanced configuration options",checked:l,onChange:()=>t(!l),children:e.jsx("div",{className:"mt-4 space-y-2",children:e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Additional content appears here when toggle is enabled."})})})]})]})})})}),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 md:grid-cols-2 xl:grid-cols-3",children:i.map(({label:s,color:c})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:s}),e.jsx(a.ToggleBar,{title:`${s} Toggle`,subTitle:"Toggle with inherited Switch color",color:c,checked:h[c],onChange:m(c)})]},c))})})})}),e.jsx(a.PropPlayground,{componentName:"ToggleBar",defaultValues:{title:"Preview ToggleBar",subTitle:"Use the controls to adjust the component",color:"primary"},includeProps:["title","subTitle","color"],excludeProps:["checked","onChange","icon","children"],children:s=>e.jsx("div",{className:"w-full max-w-2xl",children:e.jsx(a.ToggleBar,{...s,icon:e.jsx(r.Save,{className:"w-5 h-5"}),checked:n,onChange:()=>d(c=>!c)})})}),e.jsx(a.AutoPropsTable,{componentName:"ToggleBar"}),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 { ToggleBar, LucideIcons } from '@e-burgos/tucu-ui';
-
-const [checked, setChecked] = useState(false);
-
-// Basic usage
-<ToggleBar
-  title="Enable Notifications"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// With subtitle
-<ToggleBar
-  title="Dark Mode"
-  subTitle="Switch between light and dark themes"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// With icon
-<ToggleBar
-  title="Auto Save"
-  icon={<LucideIcons.Save className="w-5 h-5" />}
-  checked={checked}
-  onChange={() => setChecked(!checked)}
-/>
-
-// Colors
-<ToggleBar title="Primary" color="primary" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Secondary" color="secondary" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Danger" color="danger" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Info" color="info" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Success" color="success" checked={checked} onChange={() => setChecked(!checked)} />
-<ToggleBar title="Warning" color="warning" checked={checked} onChange={() => setChecked(!checked)} />
-
-// With children
-<ToggleBar
-  title="Advanced Settings"
-  checked={checked}
-  onChange={() => setChecked(!checked)}
->
-  <div className="mt-4">
-    <p>Additional content here</p>
-  </div>
-</ToggleBar>`})})})})]})};exports.default=u;

package/documentation/ToolsSection-C-esUuLz.js

@@ -1,221 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { H as h, T as n, aC as u, C as g, a as x, K as i, c as r } from "../index-DoxeCFUJ.js";
-import { Wrench as y, List as o, Search as s, Code as c, FileInput as l, Layout as m, BarChart3 as d, Sparkles as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = [
-  {
-    name: "list_components",
-    description: "List available components, optionally filtered by category. Returns name, category, and short description for each.",
-    icon: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-blue-500" }),
-    input: `{
-  "category?": "string",  // e.g. "form", "layout", "feedback"
-  "limit?": "number"      // max results (default: all)
-}`,
-    example: `// Agent request
-{ "category": "form", "limit": 5 }
-
-// Response includes:
-// InputText, InputNumber, Select, Checkbox, RadioGroup`
-  },
-  {
-    name: "get_component",
-    description: "Get full details for a specific component: all props with types, valid variants, default values, and a complete usage example.",
-    icon: /* @__PURE__ */ e(s, { className: "w-5 h-5 text-emerald-500" }),
-    input: `{
-  "name": "string"  // Component name, e.g. "Button"
-}`,
-    example: `// Agent request
-{ "name": "Button" }
-
-// Response includes:
-// - variant: "solid" | "ghost" | "transparent"
-// - size: "large" | "medium" | "small" | "mini" | "tiny"
-// - Full TypeScript interface
-// - Ready-to-use example code`
-  },
-  {
-    name: "generate_component",
-    description: "Generate ready-to-use JSX code for a component with specified props, optional wrapper, and theme integration.",
-    icon: /* @__PURE__ */ e(c, { className: "w-5 h-5 text-violet-500" }),
-    input: `{
-  "component": "string",           // e.g. "Button"
-  "props?": "Record<string,string>", // e.g. { variant: "solid", size: "large" }
-  "withWrapper?": "boolean",       // wrap in layout container
-  "theme?": "string"               // color preset name
-}`,
-    example: `// Agent request
-{ "component": "Alert", "props": { "variant": "success", "title": "Done!" } }
-
-// Generated output:
-<Alert variant="success" title="Done!">
-  Operation completed successfully.
-</Alert>`
-  },
-  {
-    name: "generate_form",
-    description: "Generate a complete form with Zod validation schema and react-hook-form integration. Supports predefined patterns or custom field definitions.",
-    icon: /* @__PURE__ */ e(l, { className: "w-5 h-5 text-amber-500" }),
-    input: `{
-  "pattern?": "string",      // "login" | "register" | "contact" | "settings"
-  "fields?": "FieldDef[]",   // custom fields array
-  "withValidation?": "boolean" // include Zod schema (default: true)
-}
-
-// FieldDef = { name, type, label, required?, validation? }`,
-    example: `// Agent request
-{ "pattern": "contact", "withValidation": true }
-
-// Generates: ContactForm with name, email, subject, message
-// Includes: Zod schema, Form wrapper, Submit handler`
-  },
-  {
-    name: "generate_page",
-    description: "Generate a full page component with layout, navigation integration, and optional sections.",
-    icon: /* @__PURE__ */ e(m, { className: "w-5 h-5 text-pink-500" }),
-    input: `{
-  "name": "string",         // page name, e.g. "Dashboard"
-  "layout": "string",       // "sidebar" | "top-nav" | "full-width"
-  "sections?": "string[]"   // e.g. ["stats", "chart", "table"]
-}`,
-    example: `// Agent request
-{ "name": "Dashboard", "layout": "sidebar", "sections": ["stats", "chart"] }
-
-// Generates: DashboardPage with MainLayout, StatsGrid, Chart sections`
-  },
-  {
-    name: "generate_chart",
-    description: "Generate a Recharts chart component with tucu-ui theming integration and responsive container.",
-    icon: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-cyan-500" }),
-    input: `{
-  "type": "string",     // "line" | "bar" | "area" | "pie" | "radar"
-  "data?": "object[]"   // sample data array
-}`,
-    example: `// Agent request
-{ "type": "bar", "data": [{ name: "Jan", value: 400 }, { name: "Feb", value: 300 }] }
-
-// Generates: BarChart with ResponsiveContainer, theme colors, tooltips`
-  },
-  {
-    name: "search_icons",
-    description: "Search the Lucide icon catalog by keyword. Returns matching icon names that can be used with LucideIcons component.",
-    icon: /* @__PURE__ */ e(p, { className: "w-5 h-5 text-orange-500" }),
-    input: `{
-  "query": "string",    // search term, e.g. "arrow"
-  "limit?": "number"    // max results (default: 20)
-}`,
-    example: `// Agent request
-{ "query": "chart", "limit": 5 }
-
-// Response:
-// BarChart3, LineChart, PieChart, AreaChart, TrendingUp`
-  }
-], b = [
-  {
-    icon: /* @__PURE__ */ e(o, { className: "w-5 h-5" }),
-    title: "list_components",
-    description: "List available components filtered by category",
-    color: "blue"
-  },
-  {
-    icon: /* @__PURE__ */ e(s, { className: "w-5 h-5" }),
-    title: "get_component",
-    description: "Get full details, props, and usage example",
-    color: "emerald"
-  },
-  {
-    icon: /* @__PURE__ */ e(c, { className: "w-5 h-5" }),
-    title: "generate_component",
-    description: "Generate ready-to-use JSX with specified props",
-    color: "violet"
-  },
-  {
-    icon: /* @__PURE__ */ e(l, { className: "w-5 h-5" }),
-    title: "generate_form",
-    description: "Complete form with Zod validation and RHF",
-    color: "amber"
-  },
-  {
-    icon: /* @__PURE__ */ e(m, { className: "w-5 h-5" }),
-    title: "generate_page",
-    description: "Full page with layout and navigation",
-    color: "pink"
-  },
-  {
-    icon: /* @__PURE__ */ e(d, { className: "w-5 h-5" }),
-    title: "generate_chart",
-    description: "Recharts chart with theming integration",
-    color: "cyan"
-  },
-  {
-    icon: /* @__PURE__ */ e(p, { className: "w-5 h-5" }),
-    title: "search_icons",
-    description: "Search Lucide icon catalog by keyword",
-    color: "orange"
-  }
-], A = () => /* @__PURE__ */ a("div", { className: "flex flex-col gap-8", children: [
-  /* @__PURE__ */ e(
-    h,
-    {
-      title: "Tools",
-      description: "7 executable tools that agents can call to generate code, inspect components, and search the library.",
-      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 bg-linear-to-br from-blue-500 to-indigo-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(y, { className: "w-8 h-8 sm:w-10 sm:h-10 text-white" }) })
-    }
-  ),
-  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Available Tools" }),
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Each tool can be called by any MCP-compatible AI agent"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", children: b.map((t) => /* @__PURE__ */ e(
-      u,
-      {
-        icon: t.icon,
-        title: t.title,
-        description: t.description,
-        color: t.color
-      },
-      t.title
-    )) })
-  ] }),
-  /* @__PURE__ */ a("section", { className: "space-y-6", children: [
-    /* @__PURE__ */ a("div", { className: "text-center", children: [
-      /* @__PURE__ */ e(n, { tag: "h2", className: "mb-2", children: "Tool Details" }),
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "Input schemas and usage examples for each tool"
-        }
-      )
-    ] }),
-    f.map((t) => /* @__PURE__ */ e(g, { children: /* @__PURE__ */ a(x, { title: t.name, children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center gap-2 mb-3", children: [
-        t.icon,
-        /* @__PURE__ */ e(n, { className: "text-sm text-foreground/70", children: t.description })
-      ] }),
-      /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(i, { variant: "outline", className: "mb-2", children: "Input Schema" }),
-          /* @__PURE__ */ e(r, { code: t.input })
-        ] }),
-        /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ e(i, { variant: "outline", className: "mb-2", children: "Example" }),
-          /* @__PURE__ */ e(r, { code: t.example })
-        ] })
-      ] })
-    ] }) }, t.name))
-  ] })
-] });
-export {
-  A as default
-};