@e-burgos/tucu-ui 1.1.0 → 1.5.0

package/AdvancedFeaturesSection-q8VXmitJ.mjs

@@ -0,0 +1,100 @@
+import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { T as r, C as s } from "./index-DCf83AyI.mjs";
+import { GitBranch as l, Plus as d, ArrowRight as n, Zap as c, Eye as m, AlertTriangle as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const u = () => /* @__PURE__ */ i(o, { children: [
+  /* @__PURE__ */ i("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "h2",
+        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+        children: "Advanced Features"
+      }
+    ),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+        children: "Powerful features for complex form scenarios"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+    {
+      icon: /* @__PURE__ */ e(l, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Conditional Fields",
+      description: "Show/hide fields based on other field values with dynamic validation",
+      color: "from-blue-500 via-indigo-500 to-purple-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(d, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Dynamic Arrays",
+      description: "Handle dynamic lists of fields with add/remove functionality",
+      color: "from-green-500 via-emerald-500 to-teal-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(n, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Multi-Step Forms",
+      description: "Wizard-style forms with step validation and progress tracking",
+      color: "from-orange-500 via-red-500 to-pink-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(c, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Async Validation",
+      description: "Server-side validation with debouncing and loading states",
+      color: "from-purple-500 via-violet-500 to-indigo-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(m, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Form State Management",
+      description: "Real-time access to form state, values, and validation status",
+      color: "from-pink-500 via-rose-500 to-red-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Error Handling",
+      description: "Comprehensive error handling with custom error display options",
+      color: "from-yellow-500 via-orange-500 to-red-500"
+    }
+  ].map((t, a) => /* @__PURE__ */ e(
+    s,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ i("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-linear-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        )
+      ] })
+    },
+    a
+  )) })
+] });
+export {
+  u as default
+};

package/AdvancedFeaturesSection-sL-_vRo2.mjs

@@ -0,0 +1,82 @@
+import { jsxs as r, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as a, C as s } from "./index-DCf83AyI.mjs";
+import { Globe as l, Save as n, Layers as c } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ r(i, { children: [
+  /* @__PURE__ */ r("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "h2",
+        className: "mb-4 text-2xl sm:text-3xl md:text-4xl font-bold",
+        children: "Advanced Features"
+      }
+    ),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-base sm:text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto",
+        children: "Powerful features for complex theming scenarios"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", children: [
+    {
+      icon: /* @__PURE__ */ e(l, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "RTL/LTR Support",
+      description: "Full right-to-left language support with automatic layout adjustments",
+      color: "from-blue-500 via-indigo-500 to-purple-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(n, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Persistent Settings",
+      description: "Automatic localStorage integration for user preference persistence",
+      color: "from-green-500 via-emerald-500 to-teal-500"
+    },
+    {
+      icon: /* @__PURE__ */ e(c, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      title: "Custom Routes",
+      description: "Advanced routing scenarios with custom route configuration",
+      color: "from-orange-500 via-red-500 to-pink-500"
+    }
+  ].map((t, o) => /* @__PURE__ */ e(
+    s,
+    {
+      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
+      children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `p-3 rounded-xl bg-gradient-to-br ${t.color} group-hover:scale-110 transition-all duration-300 shadow-lg`,
+              children: t.icon
+            }
+          ),
+          /* @__PURE__ */ e(
+            a,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg group-hover:text-primary transition-colors duration-300",
+              children: t.title
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+            children: t.description
+          }
+        )
+      ] })
+    },
+    o
+  )) })
+] });
+export {
+  x as default
+};

package/AlertSection-Bqcg-w-7.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a)})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a)})},{key:"default",label:"Default",render:a=>{const r=String(a);return r==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:r})}},{key:"description",label:"Description"}],t=[{prop:"children",type:"React.ReactNode",default:"required",description:"Content to display in the alert"},{prop:"variant",type:"'info' | 'warning' | 'error' | 'success'",default:"'info'",description:"Visual variant of the alert"},{prop:"dismissible",type:"boolean",default:"true",description:"Whether the alert can be dismissed"},{prop:"onDismiss",type:"() => void",default:"-",description:"Callback when alert is dismissed"},{prop:"aria-label",type:"string",default:"-",description:"Accessibility label"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(s.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"Alert"}),e.jsx(s.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"An alert component for displaying important messages and notifications with different variants and dismissible functionality."})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Info Alert"}),e.jsx(s.Alert,{variant:"info",children:e.jsx(s.Typography,{tag:"p",children:"This is an informational message."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Success Alert"}),e.jsx(s.Alert,{variant:"success",children:e.jsx(s.Typography,{tag:"p",children:"Operation completed successfully!"})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Warning Alert"}),e.jsx(s.Alert,{variant:"warning",children:e.jsx(s.Typography,{tag:"p",children:"Please review this information carefully."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Error Alert"}),e.jsx(s.Alert,{variant:"error",children:e.jsx(s.Typography,{tag:"p",children:"An error occurred. Please try again."})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.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:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Non-dismissible Alert"}),e.jsx(s.Alert,{variant:"info",dismissible:!1,children:e.jsx(s.Typography,{tag:"p",children:"This alert cannot be dismissed."})})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom onDismiss"}),e.jsx(s.Alert,{variant:"success",onDismiss:()=>console.log("Alert dismissed"),children:e.jsx(s.Typography,{tag:"p",children:"This alert has a custom dismiss handler."})})]})]})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.BasicTable,{columns:i,data:t})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { Alert, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Alert variant="info">
+  <Typography tag="p">This is an informational message.</Typography>
+</Alert>
+
+// Different variants
+<Alert variant="info">Info message</Alert>
+<Alert variant="success">Success message</Alert>
+<Alert variant="warning">Warning message</Alert>
+<Alert variant="error">Error message</Alert>
+
+// Non-dismissible
+<Alert variant="info" dismissible={false}>
+  <Typography tag="p">Cannot be dismissed</Typography>
+</Alert>
+
+// With custom dismiss handler
+<Alert
+  variant="success"
+  onDismiss={() => handleDismiss()}
+>
+  <Typography tag="p">Custom dismiss handler</Typography>
+</Alert>`})})})})]})};exports.default=l;

package/AlertSection-Dn6NjQDr.mjs

@@ -0,0 +1,143 @@
+import { jsxs as s, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { T as a, C as r, a as t, a4 as i, B as d, c as o } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => /* @__PURE__ */ s(c, { children: [
+  /* @__PURE__ */ s("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Alert" }),
+    /* @__PURE__ */ e(
+      a,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "An alert component for displaying important messages and notifications with different variants and dismissible functionality."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Info Alert" }),
+      /* @__PURE__ */ e(i, { variant: "info", children: /* @__PURE__ */ e(a, { tag: "p", children: "This is an informational message." }) })
+    ] }),
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Success Alert" }),
+      /* @__PURE__ */ e(i, { variant: "success", children: /* @__PURE__ */ e(a, { tag: "p", children: "Operation completed successfully!" }) })
+    ] }),
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Warning Alert" }),
+      /* @__PURE__ */ e(i, { variant: "warning", children: /* @__PURE__ */ e(a, { tag: "p", children: "Please review this information carefully." }) })
+    ] }),
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Error Alert" }),
+      /* @__PURE__ */ e(i, { variant: "error", children: /* @__PURE__ */ e(a, { tag: "p", children: "An error occurred. Please try again." }) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Non-dismissible Alert" }),
+      /* @__PURE__ */ e(i, { variant: "info", dismissible: !1, children: /* @__PURE__ */ e(a, { tag: "p", children: "This alert cannot be dismissed." }) })
+    ] }),
+    /* @__PURE__ */ s(r, { className: "p-4", children: [
+      /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Custom onDismiss" }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          variant: "success",
+          onDismiss: () => console.log("Alert dismissed"),
+          children: /* @__PURE__ */ e(a, { tag: "p", children: "This alert has a custom dismiss handler." })
+        }
+      )
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(l) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (l) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(l) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (l) => {
+        const n = String(l);
+        return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "children",
+      type: "React.ReactNode",
+      default: "required",
+      description: "Content to display in the alert"
+    },
+    {
+      prop: "variant",
+      type: "'info' | 'warning' | 'error' | 'success'",
+      default: "'info'",
+      description: "Visual variant of the alert"
+    },
+    {
+      prop: "dismissible",
+      type: "boolean",
+      default: "true",
+      description: "Whether the alert can be dismissed"
+    },
+    {
+      prop: "onDismiss",
+      type: "() => void",
+      default: "-",
+      description: "Callback when alert is dismissed"
+    },
+    {
+      prop: "aria-label",
+      type: "string",
+      default: "-",
+      description: "Accessibility label"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    o,
+    {
+      language: "tsx",
+      code: `import { Alert, Typography } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Alert variant="info">
+  <Typography tag="p">This is an informational message.</Typography>
+</Alert>
+
+// Different variants
+<Alert variant="info">Info message</Alert>
+<Alert variant="success">Success message</Alert>
+<Alert variant="warning">Warning message</Alert>
+<Alert variant="error">Error message</Alert>
+
+// Non-dismissible
+<Alert variant="info" dismissible={false}>
+  <Typography tag="p">Cannot be dismissed</Typography>
+</Alert>
+
+// With custom dismiss handler
+<Alert
+  variant="success"
+  onDismiss={() => handleDismiss()}
+>
+  <Typography tag="p">Custom dismiss handler</Typography>
+</Alert>`
+    }
+  ) }) }) })
+] });
+export {
+  b as default
+};

package/AnchorLinkSection-3cpqAe_7.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("./index-BoEJRnmP.js");require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const a=[{key:"prop",label:"Prop",render:n=>e.jsx("code",{className:"text-xs text-brand",children:String(n)})},{key:"type",label:"Type",render:n=>e.jsx("code",{className:"text-xs",children:String(n)})},{key:"default",label:"Default",render:n=>{const t=String(n);return t==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:t})}},{key:"description",label:"Description"}],s=[{prop:"to",type:"string",default:"required",description:"Link destination (internal or external URL)"},{prop:"...LinkProps",type:"LinkProps",default:"-",description:"All React Router Link props are supported"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(r.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"AnchorLink"}),e.jsx(r.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A smart link component that automatically handles both internal routes and external URLs."})]}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Internal Link"}),e.jsx(r.AnchorLink,{to:"/components",children:"Go to Components"})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"External Link"}),e.jsx(r.AnchorLink,{to:r.GITHUB_URL,target:"_blank",children:"External Link"})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.BasicTable,{columns:a,data:s})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { AnchorLink } from '@e-burgos/tucu-ui';
+
+// Internal link (uses React Router Link)
+<AnchorLink to="/components">
+  Go to Components
+</AnchorLink>
+
+// External link (uses native <a> tag)
+<AnchorLink to="https://example.com" target="_blank">
+  External Link
+</AnchorLink>
+
+// With all Link props
+<AnchorLink
+  to="/about"
+  className="text-blue-500 hover:underline"
+>
+  About Us
+</AnchorLink>`})})})})]})};exports.default=l;

package/AnchorLinkSection-B5z9BGZb.mjs

@@ -0,0 +1,94 @@
+import { jsxs as a, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { T as r, C as n, a as l, W as o, X as c, B as d, c as p } from "./index-DCf83AyI.mjs";
+import "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => /* @__PURE__ */ a(i, { children: [
+  /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "AnchorLink" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A smart link component that automatically handles both internal routes and external URLs."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { 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: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ a(n, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "Internal Link" }),
+      /* @__PURE__ */ e(o, { to: "/components", children: "Go to Components" })
+    ] }),
+    /* @__PURE__ */ a(n, { className: "p-4", children: [
+      /* @__PURE__ */ e(r, { tag: "h5", className: "mb-3", children: "External Link" }),
+      /* @__PURE__ */ e(o, { to: c, target: "_blank", children: "External Link" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(d, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(t) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (t) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(t) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (t) => {
+        const s = String(t);
+        return s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: s });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "to",
+      type: "string",
+      default: "required",
+      description: "Link destination (internal or external URL)"
+    },
+    {
+      prop: "...LinkProps",
+      type: "LinkProps",
+      default: "-",
+      description: "All React Router Link props are supported"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    p,
+    {
+      language: "tsx",
+      code: `import { AnchorLink } from '@e-burgos/tucu-ui';
+
+// Internal link (uses React Router Link)
+<AnchorLink to="/components">
+  Go to Components
+</AnchorLink>
+
+// External link (uses native <a> tag)
+<AnchorLink to="https://example.com" target="_blank">
+  External Link
+</AnchorLink>
+
+// With all Link props
+<AnchorLink
+  to="/about"
+  className="text-blue-500 hover:underline"
+>
+  About Us
+</AnchorLink>`
+    }
+  ) }) }) })
+] });
+export {
+  b as default
+};

package/ArchitecturalPatternsComparisonSection-D1lgF9Qq.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("./index-BoEJRnmP.js"),s=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const t=[{key:"feature",label:"Feature",render:i=>e.jsx(a.Typography,{tag:"span",className:"font-medium",children:String(i)})},{key:"standalone",label:"Standalone App"},{key:"mfe",label:"Micro Frontends (MFE)"}],r=[{feature:"Route Configuration",standalone:"menuItems (automatic generation)",mfe:"appRoutesConfig (explicit configuration)"},{feature:"Base Path",standalone:"Not required (uses root /)",mfe:"Required (e.g., /my-app)"},{feature:"Route Generation",standalone:"Automatic from menuItems",mfe:"Manual via appRoutesConfig"},{feature:"Nested Routes",standalone:"Supported via dropdownItems",mfe:"Supported via nested routes in config"},{feature:"Custom Routes",standalone:"Optional customRoutes prop",mfe:"Not available"},{feature:"Authentication",standalone:"Basic support via isPublic",mfe:"Advanced support with isPublic per route"},{feature:"Route Disabling",standalone:"Not directly supported",mfe:"Supported via disabled prop"},{feature:"Deployment",standalone:"Single deployment",mfe:"Independent deployments per app"},{feature:"Use Case",standalone:"Traditional SPAs, monolithic apps",mfe:"Distributed architectures, micro frontends"},{feature:"TypeScript Safety",standalone:"Enforced via discriminated unions",mfe:"Enforced via discriminated unions"}];return e.jsx("div",{className:"space-y-8",children:e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Architectural Patterns: Standalone vs MFE",className:"mt-2 mb-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg",children:e.jsx(s.GitCompare,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Pattern Comparison & Selection Guide"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400",children:["Understanding the differences between Standalone and MFE patterns helps you choose the right architecture for your project. Both patterns use the same"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"ThemeProvider"})," ","component, but with different configuration approaches and use cases."]}),e.jsx(a.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(s.Lightbulb,{className:"w-4 h-4"}),e.jsx(a.Typography,{tag:"span",className:"font-semibold",children:"TypeScript Safety"})]}),e.jsxs(a.Typography,{tag:"p",className:"text-sm",children:["Both patterns use TypeScript discriminated unions to enforce the correct props. The"," ",e.jsx("code",{className:"px-1 py-0.5 border border-gray-300 dark:border-gray-600 rounded text-xs",children:"architecturalPatterns"})," ","prop determines which props are available, preventing configuration errors at compile time."]})]})}),e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-4",children:[e.jsx(a.Typography,{tag:"h4",className:"font-semibold text-lg",children:"Feature Comparison"}),e.jsx(a.BasicTable,{columns:t,data:r})]}),e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg",children:e.jsx(s.Package,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Standalone App Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Traditional single-page applications"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"All routes in one codebase"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Simple deployment model"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Want automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"No need for route isolation"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Simple configuration with menuItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Automatic route generation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Nested routes via dropdownItems"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Optional customRoutes override"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use Standalone App Pattern when:
+// ✅ Building a traditional single-page application
+// ✅ All routes are in one codebase
+// ✅ You want automatic route generation
+// ✅ Simple deployment model
+// ✅ No need for route isolation
+
+function MyStandaloneApp() {
+  return (
+    <ThemeProvider
+      menuItems={menuItems}  // Simple configuration
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}`})})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsxs("div",{className:"flex items-center gap-3 mb-4",children:[e.jsx("div",{className:"p-2 rounded-lg bg-linear-to-br from-purple-500 to-indigo-500 shadow-lg",children:e.jsx(s.Box,{className:"w-5 h-5 text-white filter drop-shadow-sm"})}),e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:"Micro Frontends (MFE) Pattern"})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"When to Use:"}),e.jsxs("ul",{className:"space-y-2 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Micro frontend architecture"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Multiple teams working independently"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need independent deployments"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Require route isolation"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx("span",{children:"Need explicit route control"})]})]})]}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"h5",className:"font-semibold text-sm mb-2",children:"Key Advantages:"}),e.jsxs("ul",{className:"space-y-1 text-sm text-gray-600 dark:text-gray-400",children:[e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Explicit route configuration"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route isolation with basePath"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Advanced authentication support"})]}),e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(s.Circle,{className:"w-3 h-3 mt-1 shrink-0 fill-current"}),e.jsx("span",{children:"Route disabling capability"})]})]})]})]}),e.jsx("div",{className:"mt-4 p-3 bg-light-dark rounded-lg",children:e.jsx(a.CodeBlock,{language:"tsx",code:`// Use MFE Pattern when:
+// ✅ Building micro frontend architecture
+// ✅ Multiple teams working independently
+// ✅ Need independent deployments
+// ✅ Require route isolation
+// ✅ Need explicit route control
+
+function MyMfeApp() {
+  return (
+    <ThemeProvider
+      architecturalPatterns="mfe"
+      basePath="/my-app"  // Required for MFE
+      appRoutesConfig={appRoutesConfig}  // Explicit routes
+      logo={{ name: 'My', secondName: 'App' }}
+    />
+  );
+}`})})]})]}),e.jsx(a.CardContainer,{className:"p-4",children:e.jsxs("div",{className:"flex items-start gap-3",children:[e.jsx(s.Lightbulb,{className:"w-5 h-5 text-yellow-500 shrink-0 mt-0.5"}),e.jsxs("div",{children:[e.jsx(a.Typography,{tag:"p",className:"text-sm font-semibold mb-2",children:"Decision Guide"}),e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Choose ",e.jsx("strong",{children:"Standalone App Pattern"})," if you're building a traditional SPA with all routes in one codebase. Choose ",e.jsx("strong",{children:"MFE Pattern"})," if you need independent deployments, route isolation, or are building a micro frontend architecture."]}),e.jsxs("div",{className:"space-y-2 text-sm",children:[e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-blue-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Start with Standalone"})," if you're unsure - it's simpler and can be migrated to MFE later if needed."]})]}),e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(s.ArrowRight,{className:"w-4 h-4 text-purple-500 shrink-0 mt-0.5"}),e.jsxs("span",{children:[e.jsx("strong",{children:"Use MFE"})," from the start if you know you'll need independent deployments or route isolation."]})]})]})]})]})})]})]})})})})};exports.default=n;