@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/ColorSystemSection-CduyyhhZ.js

@@ -0,0 +1,263 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as v, useEffect as g } from "react";
+import { ay as y, H as f, C as m, a as n, aj as w, T as t } from "../index-lfg6LZ1p.js";
+import { Palette as k, Info as C } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const p = (d) => {
+  if (typeof window > "u") return "";
+  const l = document.documentElement;
+  return getComputedStyle(l).getPropertyValue(d).trim() || "";
+}, j = () => {
+  const { mode: d } = y(), [l, c] = v(0);
+  g(() => {
+    const a = setTimeout(() => {
+      c((s) => s + 1);
+    }, 100);
+    return () => clearTimeout(a);
+  }, [d]), g(() => {
+    const a = new MutationObserver(() => {
+      c((s) => s + 1);
+    });
+    return a.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["class"]
+    }), () => a.disconnect();
+  }, []);
+  const u = [
+    { name: "Primary", class: "bg-primary", hex: "#3B82F6" },
+    { name: "Secondary", class: "bg-secondary", hex: "#6B7280" },
+    { name: "Accent", class: "bg-accent", hex: "#10B981" },
+    { name: "Muted", class: "bg-muted", hex: "#F3F4F6" }
+  ], x = [
+    { name: "Success", class: "bg-green-500", hex: "#10B981" },
+    { name: "Warning", class: "bg-yellow-500", hex: "#F59E0B" },
+    { name: "Error", class: "bg-red-500", hex: "#EF4444" },
+    { name: "Info", class: "bg-blue-500", hex: "#3B82F6" }
+  ], b = [
+    {
+      name: "blue",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "green",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "orange",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "gray",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "indigo",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "pink",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "purple",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "red",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "teal",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "yellow",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    },
+    {
+      name: "chartreuse",
+      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
+    }
+  ], N = [
+    { name: "brand", varName: "--color-brand", class: "bg-brand" },
+    { name: "primary", varName: "--color-primary", class: "bg-primary" },
+    { name: "secondary", varName: "--color-secondary", class: "bg-secondary" },
+    { name: "accent", varName: "--color-accent", class: "bg-accent" },
+    { name: "muted", varName: "--color-muted", class: "bg-muted" },
+    { name: "success", varName: "--color-success", class: "bg-success" },
+    { name: "warning", varName: "--color-warning", class: "bg-warning" },
+    { name: "error", varName: "--color-error", class: "bg-error" },
+    { name: "info", varName: "--color-info", class: "bg-info" },
+    { name: "body", varName: "--color-body", class: "bg-body" },
+    { name: "dark", varName: "--color-dark", class: "bg-dark" },
+    { name: "light", varName: "--color-light", class: "bg-light" },
+    {
+      name: "light-dark",
+      varName: "--color-light-dark",
+      class: "bg-light-dark"
+    }
+  ];
+  return /* @__PURE__ */ r("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(
+      f,
+      {
+        title: "Color System",
+        description: "Carefully crafted color palettes that work across all themes and contexts.",
+        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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(k, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "space-y-8", children: [
+      /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Brand Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: u.map((a) => /* @__PURE__ */ r("div", { className: "text-center space-y-2", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `w-16 h-16 rounded-lg ${a.class} mx-auto`
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "text-sm", children: [
+          /* @__PURE__ */ e("div", { className: "font-semibold", children: a.name }),
+          /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: a.hex })
+        ] })
+      ] }, a.name)) }) }) }),
+      /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Semantic Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: x.map((a) => /* @__PURE__ */ r("div", { className: "text-center space-y-2", children: [
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: `w-16 h-16 rounded-lg ${a.class} mx-auto`
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "text-sm", children: [
+          /* @__PURE__ */ e("div", { className: "font-semibold", children: a.name }),
+          /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: a.hex })
+        ] })
+      ] }, a.name)) }) }) }),
+      /* @__PURE__ */ e(w, { variant: "info", children: /* @__PURE__ */ r("div", { children: [
+        /* @__PURE__ */ r("div", { className: "font-semibold flex items-center gap-2", children: [
+          /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
+          "Dynamic Theming"
+        ] }),
+        /* @__PURE__ */ e("div", { children: "Colors automatically adapt based on the selected theme preset and mode (light/dark)." })
+      ] }) }),
+      /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Color Spectrum", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 mb-6",
+            children: "Complete color palette with all shades from 0 to 100 for each color spectrum."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "space-y-8", children: b.map((a) => /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              tag: "h3",
+              className: "font-semibold text-lg mb-4 capitalize",
+              children: a.name
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-4 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-[repeat(13,minmax(0,1fr))] gap-2", children: a.shades.map((s) => {
+            const i = `bg-${a.name}-${s}`, h = `--color-${a.name}-${s}`, o = p(h);
+            return /* @__PURE__ */ r(
+              "div",
+              {
+                className: "space-y-1 w-full min-w-[40px]",
+                children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: `h-16 w-full rounded border border-gray-200 dark:border-gray-700 ${i}`,
+                      title: `${a.name}-${s}: ${o || h}`
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    t,
+                    {
+                      tag: "h4",
+                      className: "text-center text-xs font-semibold",
+                      children: s
+                    }
+                  ),
+                  o && /* @__PURE__ */ e(
+                    t,
+                    {
+                      tag: "h4",
+                      className: "text-center text-muted text-[10px]",
+                      children: o
+                    }
+                  )
+                ]
+              },
+              `${a.name}-${s}-${l}`
+            );
+          }) })
+        ] }, a.name)) })
+      ] }) }) }),
+      /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Main Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
+        /* @__PURE__ */ e(
+          t,
+          {
+            tag: "p",
+            className: "text-gray-600 dark:text-gray-400 mb-6",
+            children: "Primary theme colors used throughout the application. These colors are mapped from semantic colors and adapt to light/dark mode."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: N.map((a) => {
+          const s = p(a.varName), i = a.name === "body" || a.name === "light" || a.name === "light-dark" ? "text-dark dark:text-light" : "text-white";
+          return /* @__PURE__ */ r(
+            "div",
+            {
+              className: "space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2",
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: `h-20 rounded flex items-center justify-center ${a.class} ${i} border border-gray-200 dark:border-gray-700`,
+                    title: `${a.name}: var(${a.varName})${s ? ` = ${s}` : ""}`,
+                    children: /* @__PURE__ */ e(
+                      t,
+                      {
+                        tag: "h4",
+                        className: "text-center px-2 break-all text-xs",
+                        children: a.name
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-xs",
+                    children: a.name
+                  }
+                ),
+                s && /* @__PURE__ */ e(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-[10px]",
+                    children: s
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  t,
+                  {
+                    tag: "h4",
+                    className: "text-center text-muted text-[9px] mt-1 break-all px-1",
+                    children: a.class
+                  }
+                )
+              ]
+            },
+            `main-${a.name}-${l}`
+          );
+        }) })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  j as default
+};

package/documentation/ColorSystemSection-D8sZHXAT.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),s=require("../index-BaGqriuz.js"),o=require("lucide-react");require("react-router-dom");require("react-dom");const h=l=>{if(typeof window>"u")return"";const t=document.documentElement;return getComputedStyle(t).getPropertyValue(l).trim()||""},y=()=>{const{mode:l}=s.useTheme(),[t,n]=m.useState(0);m.useEffect(()=>{const a=setTimeout(()=>{n(r=>r+1)},100);return()=>clearTimeout(a)},[l]),m.useEffect(()=>{const a=new MutationObserver(()=>{n(r=>r+1)});return a.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>a.disconnect()},[]);const x=[{name:"Primary",class:"bg-primary",hex:"#3B82F6"},{name:"Secondary",class:"bg-secondary",hex:"#6B7280"},{name:"Accent",class:"bg-accent",hex:"#10B981"},{name:"Muted",class:"bg-muted",hex:"#F3F4F6"}],g=[{name:"Success",class:"bg-green-500",hex:"#10B981"},{name:"Warning",class:"bg-yellow-500",hex:"#F59E0B"},{name:"Error",class:"bg-red-500",hex:"#EF4444"},{name:"Info",class:"bg-blue-500",hex:"#3B82F6"}],p=[{name:"blue",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"green",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"orange",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"gray",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"indigo",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"pink",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"purple",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"red",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"teal",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"yellow",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]},{name:"chartreuse",shades:[0,5,10,15,20,30,40,50,60,70,80,90,100]}],u=[{name:"brand",varName:"--color-brand",class:"bg-brand"},{name:"primary",varName:"--color-primary",class:"bg-primary"},{name:"secondary",varName:"--color-secondary",class:"bg-secondary"},{name:"accent",varName:"--color-accent",class:"bg-accent"},{name:"muted",varName:"--color-muted",class:"bg-muted"},{name:"success",varName:"--color-success",class:"bg-success"},{name:"warning",varName:"--color-warning",class:"bg-warning"},{name:"error",varName:"--color-error",class:"bg-error"},{name:"info",varName:"--color-info",class:"bg-info"},{name:"body",varName:"--color-body",class:"bg-body"},{name:"dark",varName:"--color-dark",class:"bg-dark"},{name:"light",varName:"--color-light",class:"bg-light"},{name:"light-dark",varName:"--color-light-dark",class:"bg-light-dark"}];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(s.HeroCard,{title:"Color System",description:"Carefully crafted color palettes that work across all themes and contexts.",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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(o.Palette,{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("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Brand Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6",children:x.map(a=>e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted-foreground",children:a.hex})]})]},a.name))})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Semantic Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6",children:g.map(a=>e.jsxs("div",{className:"text-center space-y-2",children:[e.jsx("div",{className:`w-16 h-16 rounded-lg ${a.class} mx-auto`}),e.jsxs("div",{className:"text-sm",children:[e.jsx("div",{className:"font-semibold",children:a.name}),e.jsx("div",{className:"text-muted-foreground",children:a.hex})]})]},a.name))})})}),e.jsx(s.Alert,{variant:"info",children:e.jsxs("div",{children:[e.jsxs("div",{className:"font-semibold flex items-center gap-2",children:[e.jsx(o.Info,{className:"h-4 w-4"}),"Dynamic Theming"]}),e.jsx("div",{children:"Colors automatically adapt based on the selected theme preset and mode (light/dark)."})]})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Color Spectrum",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Complete color palette with all shades from 0 to 100 for each color spectrum."}),e.jsx("div",{className:"space-y-8",children:p.map(a=>e.jsxs("div",{children:[e.jsx(s.Typography,{tag:"h3",className:"font-semibold text-lg mb-4 capitalize",children:a.name}),e.jsx("div",{className:"grid grid-cols-4 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-[repeat(13,minmax(0,1fr))] gap-2",children:a.shades.map(r=>{const d=`bg-${a.name}-${r}`,i=`--color-${a.name}-${r}`,c=h(i);return e.jsxs("div",{className:"space-y-1 w-full min-w-[40px]",children:[e.jsx("div",{className:`h-16 w-full rounded border border-gray-200 dark:border-gray-700 ${d}`,title:`${a.name}-${r}: ${c||i}`}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-xs font-semibold",children:r}),c&&e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[10px]",children:c})]},`${a.name}-${r}-${t}`)})})]},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Main Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-6",children:[e.jsx(s.Typography,{tag:"p",className:"text-gray-600 dark:text-gray-400 mb-6",children:"Primary theme colors used throughout the application. These colors are mapped from semantic colors and adapt to light/dark mode."}),e.jsx("div",{className:"grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4",children:u.map(a=>{const r=h(a.varName),d=a.name==="body"||a.name==="light"||a.name==="light-dark"?"text-dark dark:text-light":"text-white";return e.jsxs("div",{className:"space-y-2 border border-gray-200 dark:border-gray-700 rounded-lg p-2",children:[e.jsx("div",{className:`h-20 rounded flex items-center justify-center ${a.class} ${d} border border-gray-200 dark:border-gray-700`,title:`${a.name}: var(${a.varName})${r?` = ${r}`:""}`,children:e.jsx(s.Typography,{tag:"h4",className:"text-center px-2 break-all text-xs",children:a.name})}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-xs",children:a.name}),r&&e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[10px]",children:r}),e.jsx(s.Typography,{tag:"h4",className:"text-center text-muted text-[9px] mt-1 break-all px-1",children:a.class})]},`main-${a.name}-${t}`)})})]})})})]})]})};exports.default=y;

package/documentation/CommonErrorsSection-8pIQ5P0f.js

@@ -0,0 +1,77 @@
+import { jsxs as o, Fragment as i, jsx as e } from "react/jsx-runtime";
+import { H as n, T as r, C as m, a as l, aj as d } from "../index-lfg6LZ1p.js";
+import { Bug as c, AlertCircle as u, XCircle as h, Info as s, AlertTriangle as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ o(i, { children: [
+  /* @__PURE__ */ e(
+    n,
+    {
+      title: "Common Errors and Solutions",
+      description: "Troubleshooting guide for the most frequent layout system issues.",
+      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-red-500 via-rose-500 to-pink-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__ */ o("div", { className: "text-center", children: [
+    /* @__PURE__ */ e(r, { tag: "h2", className: "mb-2", children: "Common Errors and Solutions" }),
+    /* @__PURE__ */ e(
+      r,
+      {
+        tag: "p",
+        className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "Troubleshooting guide for the most frequent layout system issues"
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(m, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Troubleshooting Guide", className: "mt-2 mb-2", children: /* @__PURE__ */ o("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+    /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ e("div", { className: "p-2 rounded-lg bg-linear-to-br from-red-500 via-rose-500 to-pink-500 shadow-md", children: /* @__PURE__ */ e(u, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+      /* @__PURE__ */ e(r, { tag: "h3", className: "text-base font-semibold", children: "Common Issues" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-6", children: [
+      {
+        variant: "error",
+        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
+        title: "useTheme must be used within ThemeProvider",
+        description: "This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Layout not rendering correctly",
+        description: "Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."
+      },
+      {
+        variant: "warning",
+        icon: /* @__PURE__ */ e(p, { className: "h-4 w-4" }),
+        title: "Menu items not showing",
+        description: "For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."
+      },
+      {
+        variant: "info",
+        icon: /* @__PURE__ */ e(s, { className: "h-4 w-4" }),
+        title: "Routing not working as expected?",
+        description: /* @__PURE__ */ o(i, { children: [
+          "Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",
+          /* @__PURE__ */ e("code", { children: "path" }),
+          " instead of",
+          " ",
+          /* @__PURE__ */ e("code", { children: "href" }),
+          " in menuItems. The ",
+          /* @__PURE__ */ e("code", { children: "component" }),
+          " prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."
+        ] })
+      }
+    ].map((t, a) => /* @__PURE__ */ e(d, { variant: t.variant, children: /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ o("div", { className: "flex items-center gap-2 font-semibold", children: [
+        t.icon,
+        t.title
+      ] }),
+      /* @__PURE__ */ e("div", { className: "text-sm mt-1", children: t.description })
+    ] }) }, a)) })
+  ] }) }) })
+] });
+export {
+  x as default
+};

package/documentation/CommonErrorsSection-CPIUNSdZ.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const o=[{variant:"error",icon:e.jsx(t.XCircle,{className:"h-4 w-4"}),title:"useTheme must be used within ThemeProvider",description:"This error occurs when you try to use useTheme outside of ThemeProvider context. Always wrap your application with ThemeProvider first. The ThemeProvider must be at the root level of your application."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Layout not rendering correctly",description:"Make sure you're using ThemeProvider instead of trying to use RootLayout directly. ThemeProvider handles all layout logic internally. Also ensure menuItems prop is provided for Admin and Horizontal layouts."},{variant:"warning",icon:e.jsx(t.AlertTriangle,{className:"h-4 w-4"}),title:"Menu items not showing",description:"For Admin and Horizontal layouts, you must provide the menuItems prop. Clean layout does not require menuItems. Ensure each menu item has at least a name and path property."},{variant:"info",icon:e.jsx(t.Info,{className:"h-4 w-4"}),title:"Routing not working as expected?",description:e.jsxs(e.Fragment,{children:["Remember that ThemeProvider includes BrowserRouter internally. If you use customRoutes, make sure to use ",e.jsx("code",{children:"path"})," instead of"," ",e.jsx("code",{children:"href"})," in menuItems. The ",e.jsx("code",{children:"component"})," prop in menuItems is only used for automatic routing. If you provide customRoutes, it takes precedence."]})}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Common Errors and Solutions",description:"Troubleshooting guide for the most frequent layout system issues.",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-red-500 via-rose-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.Bug,{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("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"Common Errors and Solutions"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Troubleshooting guide for the most frequent layout system issues"})]}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Troubleshooting Guide",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-6 p-4 sm:p-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-red-500 via-rose-500 to-pink-500 shadow-md",children:e.jsx(t.AlertCircle,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Common Issues"})]}),e.jsx("div",{className:"space-y-6",children:o.map((r,i)=>e.jsx(s.Alert,{variant:r.variant,children:e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold",children:[r.icon,r.title]}),e.jsx("div",{className:"text-sm mt-1",children:r.description})]})},i))})]})})})]})};exports.default=n;

package/documentation/ComponentAnatomySection-B_3X6zAV.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const m=()=>{const t=[{name:"Default",component:e.jsx(s.Button,{children:"Default"})},{name:"Hover",component:e.jsx(s.Button,{className:"hover:bg-primary/90",children:"Hover"})},{name:"Active",component:e.jsx(s.Button,{className:"active:bg-primary/95",children:"Active"})},{name:"Disabled",component:e.jsx(s.Button,{disabled:!0,children:"Disabled"})}],i=[{name:"Solid",component:e.jsx(s.Button,{variant:"solid",children:"Solid"})},{name:"Ghost",component:e.jsx(s.Button,{variant:"ghost",children:"Ghost"})},{name:"Transparent",component:e.jsx(s.Button,{variant:"transparent",children:"Transparent"})}],l=[{name:"Tiny",component:e.jsx(s.Button,{size:"tiny",children:"Tiny"})},{name:"Mini",component:e.jsx(s.Button,{size:"mini",children:"Mini"})},{name:"Small",component:e.jsx(s.Button,{size:"small",children:"Small"})},{name:"Medium",component:e.jsx(s.Button,{size:"medium",children:"Medium"})},{name:"Large",component:e.jsx(s.Button,{size:"large",children:"Large"})}];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(s.HeroCard,{title:"Component Anatomy",description:"Understanding component states, variants, and sizes for consistent implementation.",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.Component,{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("div",{className:"space-y-8",children:[e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Component States",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-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-green-500 via-emerald-500 to-teal-500 shadow-md",children:e.jsx(a.Layers,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Component States"})]}),e.jsx("div",{className:"flex flex-wrap gap-4 sm:gap-6",children:t.map(n=>e.jsxs("div",{className:"text-center space-y-2",children:[n.component,e.jsx("div",{className:"text-sm text-muted-foreground",children:n.name})]},n.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Component Variants",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-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-purple-500 via-violet-500 to-indigo-500 shadow-md",children:e.jsx(a.Zap,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Component Variants"})]}),e.jsx("div",{className:"flex flex-wrap gap-4 sm:gap-6",children:i.map(n=>e.jsxs("div",{className:"text-center space-y-2",children:[n.component,e.jsx("div",{className:"text-sm text-muted-foreground",children:n.name})]},n.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Component Sizes",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full space-y-8 p-4 sm:p-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-blue-500 via-cyan-500 to-sky-500 shadow-md",children:e.jsx(a.Maximize,{className:"w-6 h-6 text-white filter drop-shadow-sm"})}),e.jsx(s.Typography,{tag:"h3",className:"text-base font-semibold",children:"Component Sizes"})]}),e.jsx("div",{className:"flex flex-wrap items-end gap-4 sm:gap-6",children:l.map(n=>e.jsxs("div",{className:"text-center space-y-2",children:[n.component,e.jsx("div",{className:"text-sm text-muted-foreground",children:n.name})]},n.name))})]})})})]})]})};exports.default=m;

package/documentation/ComponentAnatomySection-D9CJ7NKe.js

@@ -0,0 +1,78 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { H as d, C as s, a as m, T as i, x as a } from "../index-lfg6LZ1p.js";
+import { Component as c, Layers as p, Zap as h, Maximize as f } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = () => {
+  const l = [
+    { name: "Default", component: /* @__PURE__ */ e(a, { children: "Default" }) },
+    {
+      name: "Hover",
+      component: /* @__PURE__ */ e(a, { className: "hover:bg-primary/90", children: "Hover" })
+    },
+    {
+      name: "Active",
+      component: /* @__PURE__ */ e(a, { className: "active:bg-primary/95", children: "Active" })
+    },
+    { name: "Disabled", component: /* @__PURE__ */ e(a, { disabled: !0, children: "Disabled" }) }
+  ], o = [
+    { name: "Solid", component: /* @__PURE__ */ e(a, { variant: "solid", children: "Solid" }) },
+    { name: "Ghost", component: /* @__PURE__ */ e(a, { variant: "ghost", children: "Ghost" }) },
+    {
+      name: "Transparent",
+      component: /* @__PURE__ */ e(a, { variant: "transparent", children: "Transparent" })
+    }
+  ], r = [
+    { name: "Tiny", component: /* @__PURE__ */ e(a, { size: "tiny", children: "Tiny" }) },
+    { name: "Mini", component: /* @__PURE__ */ e(a, { size: "mini", children: "Mini" }) },
+    { name: "Small", component: /* @__PURE__ */ e(a, { size: "small", children: "Small" }) },
+    { name: "Medium", component: /* @__PURE__ */ e(a, { size: "medium", children: "Medium" }) },
+    { name: "Large", component: /* @__PURE__ */ e(a, { size: "large", children: "Large" }) }
+  ];
+  return /* @__PURE__ */ t("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(
+      d,
+      {
+        title: "Component Anatomy",
+        description: "Understanding component states, variants, and sizes for consistent implementation.",
+        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: "space-y-8", children: [
+      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component States", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 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(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component States" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 sm:gap-6", children: l.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
+          n.component,
+          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
+        ] }, n.name)) })
+      ] }) }) }),
+      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 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-purple-500 via-violet-500 to-indigo-500 shadow-md", children: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component Variants" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-4 sm:gap-6", children: o.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
+          n.component,
+          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
+        ] }, n.name)) })
+      ] }) }) }),
+      /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(m, { title: "Component Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full space-y-8 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-blue-500 via-cyan-500 to-sky-500 shadow-md", children: /* @__PURE__ */ e(f, { className: "w-6 h-6 text-white filter drop-shadow-sm" }) }),
+          /* @__PURE__ */ e(i, { tag: "h3", className: "text-base font-semibold", children: "Component Sizes" })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "flex flex-wrap items-end gap-4 sm:gap-6", children: r.map((n) => /* @__PURE__ */ t("div", { className: "text-center space-y-2", children: [
+          n.component,
+          /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: n.name })
+        ] }, n.name)) })
+      ] }) }) })
+    ] })
+  ] });
+};
+export {
+  b as default
+};

package/documentation/ComponentStatusSection-BPM9MaGx.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=()=>{const i=[{name:"Input",status:"complete",features:["label + htmlFor association","aria-required on required fields","aria-invalid on error","aria-describedby for helperText/error","Auto-generated IDs via useId()"]},{name:"Button",status:"complete",features:["aria-busy during loading","aria-label support","aria-describedby support","Loading visually hides text without removing DOM","Focus ring visible on all variants"]},{name:"Modal",status:"partial",features:['role="dialog" + aria-modal="true"',"aria-labelledby + aria-describedby","Escape key closes","Focus restore on close","⚠️ Missing: Focus trapping (Tab can escape)"]},{name:"Drawer",status:"complete",features:['role="dialog" + aria-modal="true"',"Full focus trap (Tab/Shift+Tab cycles)","Escape key closes","Focus first element on open","Focus restore on close"]},{name:"Alert",status:"complete",features:['role="alert"','aria-live="assertive" + aria-atomic',"Dismiss button with aria-label","Supports custom aria-label prop","Dismissible toggle via prop"]},{name:"Tabs",status:"complete",features:['role="tablist" / role="tab" / role="tabpanel"',"aria-selected on active tab","aria-controls linking tab↔panel","ArrowRight/Left + Home/End navigation","tabIndex roving (0 on active, -1 on others)"]},{name:"Select",status:"complete",features:['role="combobox" + aria-haspopup="listbox"','role="listbox" + role="option"',"aria-expanded + aria-activedescendant","Arrow/Enter/Space/Escape keyboard","Focus restore on close"]},{name:"Checkbox",status:"complete",features:["label + htmlFor association","aria-invalid on error","aria-describedby for helperText/error","Auto-generated IDs via useId()","Standard checkbox keyboard (Space)"]}],o=s=>s==="complete"?e.jsx(a.Badge,{variant:"soft",color:"success",size:"small",children:"Complete"}):e.jsx(a.Badge,{variant:"soft",color:"warning",size:"small",children:"Partial"});return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Component Status",description:"Detailed accessibility compliance status for each component — verified against the actual source code implementation.",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-indigo-500 via-blue-500 to-cyan-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ListChecks,{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(a.Typography,{tag:"h2",className:"mb-2",children:"Per-Component Breakdown"}),e.jsx(a.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"7 of 8 core components have full accessibility — Modal needs focus trapping"})]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6",children:i.map(s=>e.jsx(a.CardContainer,{className:"group hover:shadow-large transition-all duration-300",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(a.Typography,{tag:"h3",className:"font-semibold text-lg",children:s.name}),o(s.status)]}),e.jsx("div",{className:"space-y-1.5",children:s.features.map((r,l)=>e.jsxs("div",{className:"flex items-start gap-2",children:[r.startsWith("⚠️")?e.jsx(t.AlertTriangle,{className:"w-4 h-4 text-amber-500 shrink-0 mt-0.5"}):e.jsx(t.Check,{className:"w-4 h-4 text-green-500 shrink-0 mt-0.5"}),e.jsx(a.Typography,{tag:"span",className:"text-sm text-gray-600 dark:text-gray-400",children:r.replace("⚠️ ","")})]},l))})]})},s.name))})]})]})};exports.default=n;

package/documentation/ComponentStatusSection-DckFRSjC.js

@@ -0,0 +1,148 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { H as d, T as s, C as m, K as i } from "../index-lfg6LZ1p.js";
+import { ListChecks as p, AlertTriangle as u, Check as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => {
+  const o = [
+    {
+      name: "Input",
+      status: "complete",
+      features: [
+        "label + htmlFor association",
+        "aria-required on required fields",
+        "aria-invalid on error",
+        "aria-describedby for helperText/error",
+        "Auto-generated IDs via useId()"
+      ]
+    },
+    {
+      name: "Button",
+      status: "complete",
+      features: [
+        "aria-busy during loading",
+        "aria-label support",
+        "aria-describedby support",
+        "Loading visually hides text without removing DOM",
+        "Focus ring visible on all variants"
+      ]
+    },
+    {
+      name: "Modal",
+      status: "partial",
+      features: [
+        'role="dialog" + aria-modal="true"',
+        "aria-labelledby + aria-describedby",
+        "Escape key closes",
+        "Focus restore on close",
+        "⚠️ Missing: Focus trapping (Tab can escape)"
+      ]
+    },
+    {
+      name: "Drawer",
+      status: "complete",
+      features: [
+        'role="dialog" + aria-modal="true"',
+        "Full focus trap (Tab/Shift+Tab cycles)",
+        "Escape key closes",
+        "Focus first element on open",
+        "Focus restore on close"
+      ]
+    },
+    {
+      name: "Alert",
+      status: "complete",
+      features: [
+        'role="alert"',
+        'aria-live="assertive" + aria-atomic',
+        "Dismiss button with aria-label",
+        "Supports custom aria-label prop",
+        "Dismissible toggle via prop"
+      ]
+    },
+    {
+      name: "Tabs",
+      status: "complete",
+      features: [
+        'role="tablist" / role="tab" / role="tabpanel"',
+        "aria-selected on active tab",
+        "aria-controls linking tab↔panel",
+        "ArrowRight/Left + Home/End navigation",
+        "tabIndex roving (0 on active, -1 on others)"
+      ]
+    },
+    {
+      name: "Select",
+      status: "complete",
+      features: [
+        'role="combobox" + aria-haspopup="listbox"',
+        'role="listbox" + role="option"',
+        "aria-expanded + aria-activedescendant",
+        "Arrow/Enter/Space/Escape keyboard",
+        "Focus restore on close"
+      ]
+    },
+    {
+      name: "Checkbox",
+      status: "complete",
+      features: [
+        "label + htmlFor association",
+        "aria-invalid on error",
+        "aria-describedby for helperText/error",
+        "Auto-generated IDs via useId()",
+        "Standard checkbox keyboard (Space)"
+      ]
+    }
+  ], l = (a) => a === "complete" ? /* @__PURE__ */ e(i, { variant: "soft", color: "success", size: "small", children: "Complete" }) : /* @__PURE__ */ e(i, { variant: "soft", color: "warning", size: "small", children: "Partial" });
+  return /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Component Status",
+        description: "Detailed accessibility compliance status for each component — verified against the actual source code implementation.",
+        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-indigo-500 via-blue-500 to-cyan-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__ */ t("section", { className: "space-y-8", children: [
+      /* @__PURE__ */ t("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "Per-Component Breakdown" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            tag: "p",
+            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+            children: "7 of 8 core components have full accessibility — Modal needs focus trapping"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6", children: o.map((a) => /* @__PURE__ */ e(
+        m,
+        {
+          className: "group hover:shadow-large transition-all duration-300",
+          children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-3", children: [
+            /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ e(s, { tag: "h3", className: "font-semibold text-lg", children: a.name }),
+              l(a.status)
+            ] }),
+            /* @__PURE__ */ e("div", { className: "space-y-1.5", children: a.features.map((r, n) => /* @__PURE__ */ t("div", { className: "flex items-start gap-2", children: [
+              r.startsWith("⚠️") ? /* @__PURE__ */ e(u, { className: "w-4 h-4 text-amber-500 shrink-0 mt-0.5" }) : /* @__PURE__ */ e(h, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+              /* @__PURE__ */ e(
+                s,
+                {
+                  tag: "span",
+                  className: "text-sm text-gray-600 dark:text-gray-400",
+                  children: r.replace("⚠️ ", "")
+                }
+              )
+            ] }, n)) })
+          ] })
+        },
+        a.name
+      )) })
+    ] })
+  ] });
+};
+export {
+  w as default
+};