@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/BestPracticesSection-D5Q-WnOS.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-CQ1tqJiQ.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const r=["Use LucideIcons namespace for general UI icons (1500+ available)","Use custom icons for domain-specific needs (crypto, layouts, brands)","Size icons with Tailwind classes: w-4 h-4, w-5 h-5, w-6 h-6","Use currentColor via text-* classes for theme-aware coloring",'Add aria-hidden="true" on decorative icons next to text',"Add aria-label on buttons containing only an icon","Use consistent sizes within the same context (buttons, nav, etc.)","Prefer className over inline style for sizing and color"],n=["Don't import Lucide icons individually — use LucideIcons.* namespace","Don't mix sizing approaches (className vs size prop) in same project","Don't use icon-only buttons without aria-label","Don't use color alone to convey meaning (pair with text or shape)","Don't hardcode colors with fill/stroke — use Tailwind text-* classes","Don't import the entire icon set manually — rely on tree-shaking","Don't use custom Tucu icons when Lucide has an equivalent","Don't forget hover/focus states on interactive icons"],c=[{title:"Lucide is External",description:"lucide-react is not bundled inside tucu-ui — your bundler tree-shakes it. Only icons you reference are included.",icon:e.jsx(a.Package,{className:"w-5 h-5 text-green-500"})},{title:"Custom Icons Are Bundled",description:"All 96 custom icons are always included in the tucu-ui bundle. They are small SVGs (~200B each).",icon:e.jsx(a.HardDrive,{className:"w-5 h-5 text-blue-500"})},{title:"Avoid Dynamic Imports",description:"Don't lazy-load individual icons. SVGs are tiny and the network overhead outweighs the savings.",icon:e.jsx(a.Zap,{className:"w-5 h-5 text-amber-500"})},{title:"Use Namespace Pattern",description:"LucideIcons.Home is a single import. Your bundler only includes Home, not the entire library.",icon:e.jsx(a.TreeDeciduous,{className:"w-5 h-5 text-purple-500"})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.CheckCircle,{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:"Do's and Don'ts"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Quick reference for icon best practices"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.CheckCircle,{className:"w-5 h-5 text-green-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-green-700 dark:text-green-400",children:"Do"})]}),r.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})}),e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-4",children:[e.jsx(a.XCircle,{className:"w-5 h-5 text-red-500"}),e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-red-700 dark:text-red-400",children:"Don't"})]}),n.map((t,i)=>e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsx(a.X,{className:"w-4 h-4 text-red-500 shrink-0 mt-0.5"}),e.jsx(s.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:t})]},i))]})})]})]}),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:"Performance Tips"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"How the icon system affects bundle size"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:c.map((t,i)=>e.jsx(s.CardContainer,{children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[t.icon,e.jsx(s.Typography,{tag:"h3",className:"font-semibold",children:t.title})]}),e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 leading-relaxed",children:t.description})]})},i))})]})]})};exports.default=l;

package/documentation/BestPracticesSection-Do13tJHA.js

@@ -1,153 +0,0 @@
-import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { H as h, T as a, C as t, c as l } from "../index-BOVWnu1L.js";
-import { ShieldCheck as p, Check as i, X as n, Puzzle as u, Monitor as g } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const N = () => {
-  const c = [
-    "Use useIsMounted to guard async state updates and prevent memory leaks",
-    "Prefer useElementSize over useMeasure for simple width/height tracking",
-    "Leverage generic types: useElementSize<HTMLCanvasElement>()",
-    "Debounce rapid state changes when using useToastStore",
-    "Import only needed hooks for optimal tree-shaking",
-    "Combine useLockBodyScroll with focus management for accessible modals",
-    "Use useEventListener for keyboard navigation instead of inline handlers",
-    "Pass proper event types to useEventListener for type safety",
-    "Use useClickAway with a RefObject for dropdown/popover close behavior",
-    "Call useAnchorScroll once at root level for smooth scroll navigation"
-  ], d = [
-    "Destructure useCopyToClipboard as [value, fn] — it returns [stateObj, fn]",
-    "Forget that useScrollableSlider requires react-router-dom context",
-    "Use useMeasure when you only need width/height — it has more overhead",
-    "Lock body scroll without preserving scrollbar width (useLockBodyScroll handles this)",
-    "Create multiple useToastStore instances — it is a singleton Zustand store",
-    "Ignore the noUserInteraction field in useCopyToClipboard state",
-    "Use useIsMounted as a function — it returns a boolean directly",
-    "Mix up useElementSize ref (callback ref) with useRef (RefObject)",
-    "Hardcode breakpoint pixel values — use useBreakpoint named values instead",
-    "Forget cleanup when using useEventListener with custom elements"
-  ];
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ e(
-      h,
-      {
-        title: "Best Practices",
-        description: "Guidelines for optimal hook usage, common pitfalls to avoid, and patterns that ensure performance, type safety, and accessibility.",
-        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Recommendations" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Follow these guidelines for robust hook implementations"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(i, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(i, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
-          ] }, r)) })
-        ] }) }),
-        /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: d.map((o, r) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: o })
-          ] }, r)) })
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Common Patterns" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Recommended hook composition patterns"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-indigo-500 to-purple-500 shadow-lg", children: /* @__PURE__ */ e(u, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Accessible Modal Pattern" })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          l,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `function Modal({ isOpen, onClose, children }) {
-  const modalRef = useRef<HTMLDivElement>(null);
-  
-  // Lock scroll when modal opens
-  useLockBodyScroll(isOpen);
-  
-  // Close on click outside
-  useClickAway(modalRef, onClose);
-  
-  // Close on Escape key
-  useEventListener('keydown', (e) => {
-    if (e.key === 'Escape') onClose();
-  });
-
-  if (!isOpen) return null;
-  return <div ref={modalRef} role="dialog">{children}</div>;
-}`
-          }
-        ) })
-      ] }) }),
-      /* @__PURE__ */ e(t, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-6", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-blue-500 to-cyan-500 shadow-lg", children: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Responsive Layout Pattern" })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-light-dark p-4 rounded-xl border dark:border-border overflow-x-auto", children: /* @__PURE__ */ e(
-          l,
-          {
-            language: "tsx",
-            noExpand: !0,
-            code: `function ResponsiveGrid({ children }) {
-  const { isMobile } = useIsMobile();
-  const { isGridCompact, setIsGridCompact } = useGridSwitcher();
-  const breakpoint = useBreakpoint();
-
-  // Auto-switch to compact on mobile
-  useEffect(() => {
-    if (isMobile && !isGridCompact) {
-      setIsGridCompact(true);
-    }
-  }, [isMobile]);
-
-  const cols = breakpoint === '4xl' ? 6 
-    : breakpoint === '2xl' ? 4 
-    : isGridCompact ? 3 : 2;
-
-  return <div className={\`grid grid-cols-\${cols}\`}>{children}</div>;
-}`
-          }
-        ) })
-      ] }) })
-    ] })
-  ] });
-};
-export {
-  N as default
-};

package/documentation/BestPracticesSection-MUDLaOXj.js

@@ -1,91 +0,0 @@
-import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
-import { H as l, T as a, C as m } from "../index-BOVWnu1L.js";
-import { Star as c, CheckCircle as d, ArrowRight as p } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => /* @__PURE__ */ t(n, { children: [
-  /* @__PURE__ */ e(
-    l,
-    {
-      title: "Best Practices",
-      description: "Guidelines for optimal layout system implementation and common patterns.",
-      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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", 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__ */ t("div", { className: "text-center", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Best Practices" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        tag: "p",
-        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Guidelines for optimal layout system implementation"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-    {
-      category: "Layout Selection",
-      items: [
-        "Admin: Use for complex applications with many navigation items and sidebar menus",
-        "Horizontal: Use for content-focused sites and simple applications with top navigation",
-        "Clean: Use for authentication flows, landing pages, and standalone content"
-      ]
-    },
-    {
-      category: "ThemeProvider Setup",
-      items: [
-        "Always wrap your application with ThemeProvider before using layouts",
-        "Provide menuItems prop for Admin and Horizontal layouts",
-        "Use layout prop to control which layout is rendered",
-        "Theme settings are automatically persisted to localStorage"
-      ]
-    },
-    {
-      category: "Responsive Design",
-      items: [
-        "Always test layouts on mobile devices",
-        "Use provided breakpoint system for responsive behavior",
-        "Consider touch interactions for mobile navigation",
-        "Admin layout automatically shows drawer on mobile"
-      ]
-    },
-    {
-      category: "Accessibility",
-      items: [
-        "Provide meaningful menu item names",
-        "Use semantic HTML structure",
-        "Test keyboard navigation",
-        "Ensure proper color contrast in all themes",
-        "Support RTL/LTR for international users"
-      ]
-    }
-  ].map((s, i) => /* @__PURE__ */ e(
-    m,
-    {
-      className: "group hover:shadow-large transition-all duration-300 hover:-translate-y-1",
-      children: /* @__PURE__ */ t("div", { className: "w-full space-y-4 p-4 sm:p-6", children: [
-        /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 shadow-md", children: /* @__PURE__ */ e(d, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold text-lg", children: s.category })
-        ] }),
-        /* @__PURE__ */ e("ul", { className: "space-y-2", children: s.items.map((r, o) => /* @__PURE__ */ t("li", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ e(p, { className: "w-4 h-4 text-primary mt-0.5 shrink-0" }),
-          /* @__PURE__ */ e(
-            a,
-            {
-              tag: "span",
-              className: "text-sm text-gray-600 dark:text-gray-400",
-              children: r
-            }
-          )
-        ] }, o)) })
-      ] })
-    },
-    i
-  )) })
-] });
-export {
-  x as default
-};

package/documentation/BestPracticesSection-cejYRZHH.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-CQ1tqJiQ.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const l=()=>{const i=["Use the useTheme hook to access theme state","Utilize built-in color presets for consistency","Test your application in both light and dark modes","Use the settings panel for user customization","Leverage persistent storage for user preferences","Use semantic Tailwind classes (bg-brand, text-secondary)","Respect THEME_STYLE_LAYOUTS constraints when changing layouts"],n=["Directly manipulate CSS custom properties","Hardcode colors that don't adapt to themes","Override theme state without using setters","Ignore RTL support for international apps","Disable all settings without providing alternatives","Use arbitrary hex values instead of design tokens","Assign layouts incompatible with the current theme style"];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Best Practices",description:"Recommended patterns and anti-patterns for working with the theme system effectively.",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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(r.ShieldCheck,{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:"Guidelines"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Follow these patterns to keep your theming consistent and maintainable"})]}),e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:[e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Do's",children:e.jsx("ul",{className:"space-y-2",children:i.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.Check,{className:"w-4 h-4 text-green-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Don'ts",children:e.jsx("ul",{className:"space-y-2",children:n.map((t,a)=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx(r.X,{className:"w-4 h-4 text-red-500 mt-0.5 shrink-0"}),e.jsx("span",{className:"text-sm",children:t})]},a))})})})]})]})]})};exports.default=l;

package/documentation/BestPracticesSection-ftxO88ZU.js

@@ -1,151 +0,0 @@
-import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as a, C as n } from "../index-BOVWnu1L.js";
-import { CheckCircle as c, Check as h, XCircle as p, X as u, Package as g, HardDrive as x, Zap as y, TreeDeciduous as f } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const C = () => {
-  const r = [
-    "Use LucideIcons namespace for general UI icons (1500+ available)",
-    "Use custom icons for domain-specific needs (crypto, layouts, brands)",
-    "Size icons with Tailwind classes: w-4 h-4, w-5 h-5, w-6 h-6",
-    "Use currentColor via text-* classes for theme-aware coloring",
-    'Add aria-hidden="true" on decorative icons next to text',
-    "Add aria-label on buttons containing only an icon",
-    "Use consistent sizes within the same context (buttons, nav, etc.)",
-    "Prefer className over inline style for sizing and color"
-  ], l = [
-    "Don't import Lucide icons individually — use LucideIcons.* namespace",
-    "Don't mix sizing approaches (className vs size prop) in same project",
-    "Don't use icon-only buttons without aria-label",
-    "Don't use color alone to convey meaning (pair with text or shape)",
-    "Don't hardcode colors with fill/stroke — use Tailwind text-* classes",
-    "Don't import the entire icon set manually — rely on tree-shaking",
-    "Don't use custom Tucu icons when Lucide has an equivalent",
-    "Don't forget hover/focus states on interactive icons"
-  ], o = [
-    {
-      title: "Lucide is External",
-      description: "lucide-react is not bundled inside tucu-ui — your bundler tree-shakes it. Only icons you reference are included.",
-      icon: /* @__PURE__ */ e(g, { className: "w-5 h-5 text-green-500" })
-    },
-    {
-      title: "Custom Icons Are Bundled",
-      description: "All 96 custom icons are always included in the tucu-ui bundle. They are small SVGs (~200B each).",
-      icon: /* @__PURE__ */ e(x, { className: "w-5 h-5 text-blue-500" })
-    },
-    {
-      title: "Avoid Dynamic Imports",
-      description: "Don't lazy-load individual icons. SVGs are tiny and the network overhead outweighs the savings.",
-      icon: /* @__PURE__ */ e(y, { className: "w-5 h-5 text-amber-500" })
-    },
-    {
-      title: "Use Namespace Pattern",
-      description: "LucideIcons.Home is a single import. Your bundler only includes Home, not the entire library.",
-      icon: /* @__PURE__ */ e(f, { className: "w-5 h-5 text-purple-500" })
-    }
-  ];
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Best Practices",
-        description: "Guidelines for optimal icon usage — performance, accessibility, consistency, and maintainability patterns.",
-        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", 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__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Do's and Don'ts" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Quick reference for icon best practices"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: [
-        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(c, { className: "w-5 h-5 text-green-500" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "font-semibold text-green-700 dark:text-green-400",
-                children: "Do"
-              }
-            )
-          ] }),
-          r.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: t
-              }
-            )
-          ] }, i))
-        ] }) }),
-        /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-4", children: [
-            /* @__PURE__ */ e(p, { className: "w-5 h-5 text-red-500" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h3",
-                className: "font-semibold text-red-700 dark:text-red-400",
-                children: "Don't"
-              }
-            )
-          ] }),
-          l.map((t, i) => /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(u, { className: "w-4 h-4 text-red-500 shrink-0 mt-0.5" }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "span",
-                className: "text-sm text-gray-600 dark:text-gray-400",
-                children: t
-              }
-            )
-          ] }, i))
-        ] }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Performance Tips" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "How the icon system affects bundle size"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: o.map((t, i) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 space-y-2", children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-          t.icon,
-          /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: t.title })
-        ] }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-sm text-gray-600 dark:text-gray-400 leading-relaxed",
-            children: t.description
-          }
-        )
-      ] }) }, i)) })
-    ] })
-  ] });
-};
-export {
-  C as default
-};

package/documentation/BestPracticesSection-wmf2_O-5.js

@@ -1,79 +0,0 @@
-import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as m, T as a, C as r } from "../index-BOVWnu1L.js";
-import { ShieldCheck as h, Check as n, X as o } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const x = () => {
-  const l = [
-    "Use descriptive route names and paths",
-    "Keep route hierarchy shallow (max 2-3 levels)",
-    "Use consistent naming conventions across routes",
-    "Leverage TypeScript for type-safe route definitions",
-    "Use useMemo for dynamic route generation",
-    "Include icons for better navigation UX",
-    "Test routes with different user roles and permissions",
-    "Use basePath for MFE applications",
-    "Provide isAuthenticated and loginUrl in MFE mode",
-    "Use enableNestedRoutes when child components need internal routing"
-  ], c = [
-    "Create overly deep nesting (>3 levels)",
-    'Use generic names like "Page" or "Component"',
-    "Hardcode paths in components — use ReactRouter hooks",
-    "Forget to handle 404 pages with customRoutes",
-    "Mix routing logic with business logic",
-    "Skip accessibility considerations in navigation",
-    "Ignore mobile navigation UX patterns",
-    "Mix Standalone and MFE props in the same ThemeProvider",
-    "Import directly from react-router-dom — use ReactRouter namespace",
-    "Use StandaloneAppThemeProvider directly — use ThemeProvider"
-  ];
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      m,
-      {
-        title: "Best Practices",
-        description: "Guidelines for building maintainable, accessible, and type-safe routing configurations.",
-        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
-      }
-    ),
-    /* @__PURE__ */ s("section", { className: "space-y-8", children: [
-      /* @__PURE__ */ s("div", { className: "text-center", children: [
-        /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Recommendations" }),
-        /* @__PURE__ */ e(
-          a,
-          {
-            tag: "p",
-            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
-            children: "Follow these guidelines for robust routing"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ s("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
-        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-green-500 to-emerald-500 shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Do's" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: l.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(n, { className: "w-4 h-4 text-green-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
-          ] }, i)) })
-        ] }) }),
-        /* @__PURE__ */ e(r, { children: /* @__PURE__ */ s("div", { className: "p-6 space-y-4", children: [
-          /* @__PURE__ */ s("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 to-rose-500 shadow-lg", children: /* @__PURE__ */ e(o, { className: "w-5 h-5 text-white filter drop-shadow-sm" }) }),
-            /* @__PURE__ */ e(a, { tag: "h3", className: "font-semibold", children: "Don'ts" })
-          ] }),
-          /* @__PURE__ */ e("ul", { className: "space-y-2", children: c.map((t, i) => /* @__PURE__ */ s("li", { className: "flex items-start gap-2", children: [
-            /* @__PURE__ */ e(o, { className: "w-4 h-4 text-red-500 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ e("span", { className: "text-sm", children: t })
-          ] }, i)) })
-        ] }) })
-      ] })
-    ] })
-  ] });
-};
-export {
-  x as default
-};

package/documentation/BorderRadiusSection-C53fGJbg.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-CQ1tqJiQ.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=()=>{const a={0:"rounded-[0px]",100:"rounded-[4px]",200:"rounded-[8px]",300:"rounded-[12px]",400:"rounded-[16px]",500:"rounded-[24px]",600:"rounded-[32px]",700:"rounded-[40px]",800:"rounded-[48px]",900:"rounded-[56px]",1e3:"rounded-[100000px]"};return e.jsxs("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:[e.jsx(r.HeroCard,{title:"Border Radius",description:"Border radius scale using Tailwind arbitrary values for consistent rounded corners.",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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Circle,{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(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Border Radius Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:Object.entries(a).map(([s,d])=>{const i=d.replace("rounded-[","").replace("]","");return e.jsxs("div",{className:"border border-border rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(r.Typography,{tag:"h4",className:"font-semibold",children:s}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[10px]",children:i})]}),e.jsx("div",{className:"flex justify-center",children:e.jsx("div",{className:`w-20 h-20 bg-primary ${d}`})}),e.jsx(r.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1 text-center",children:d})]},s)})})})})})]})};exports.default=t;

package/documentation/BorderRadiusSection-C_cRGAYg.js

@@ -1,58 +0,0 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { H as l, C as i, a as o, T as a } from "../index-BOVWnu1L.js";
-import { Circle as n } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const f = () => /* @__PURE__ */ d("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(
-    l,
-    {
-      title: "Border Radius",
-      description: "Border radius scale using Tailwind arbitrary values for consistent rounded corners.",
-      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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Border Radius Scale", 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-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries({
-    0: "rounded-[0px]",
-    100: "rounded-[4px]",
-    200: "rounded-[8px]",
-    300: "rounded-[12px]",
-    400: "rounded-[16px]",
-    500: "rounded-[24px]",
-    600: "rounded-[32px]",
-    700: "rounded-[40px]",
-    800: "rounded-[48px]",
-    900: "rounded-[56px]",
-    1e3: "rounded-[100000px]"
-  }).map(
-    ([s, r]) => {
-      const t = r.replace("rounded-[", "").replace("]", "");
-      return /* @__PURE__ */ d(
-        "div",
-        {
-          className: "border border-border rounded-lg p-4 space-y-3",
-          children: [
-            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: s }),
-              /* @__PURE__ */ e(a, { tag: "h4", className: "text-muted text-[10px]", children: t })
-            ] }),
-            /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: `w-20 h-20 bg-primary ${r}` }) }),
-            /* @__PURE__ */ e(
-              a,
-              {
-                tag: "h4",
-                className: "text-muted text-[9px] break-all px-1 text-center",
-                children: r
-              }
-            )
-          ]
-        },
-        s
-      );
-    }
-  ) }) }) }) })
-] });
-export {
-  f as default
-};