@axtec/components 0.1.4 → 0.1.6

package/dist/index58.js

@@ -1,71 +1,67 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { cn as u } from "./index3.js";
-function c({
-  variant: e = "text",
-  width: r,
-  height: l,
-  className: n
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as t } from "./index3.js";
+import { CheckIcon as c } from "@heroicons/react/20/solid";
+const d = {
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6"
+}, b = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10"
+};
+function f({
+  icon: a,
+  label: m,
+  description: s,
+  selected: r = !1,
+  onClick: n,
+  variant: l = "default",
+  size: i = "md",
+  className: p
 }) {
-  const o = {
-    width: typeof r == "number" ? `${r}px` : r,
-    height: typeof l == "number" ? `${l}px` : l
-  };
-  return /* @__PURE__ */ t(
-    "div",
+  return /* @__PURE__ */ o(
+    "button",
     {
-      className: u(
-        "animate-pulse bg-slate-200",
-        e === "text" && "h-4 rounded",
-        e === "circular" && "rounded-full",
-        e === "rectangular" && "rounded-lg",
-        !r && e === "text" && "w-full",
-        !r && e === "circular" && "w-10",
-        !l && e === "circular" && "h-10",
-        !r && e === "rectangular" && "w-full",
-        !l && e === "rectangular" && "h-20",
-        n
+      type: "button",
+      role: "radio",
+      "aria-checked": r,
+      onClick: n,
+      className: t(
+        "relative rounded-xl border-2 cursor-pointer transition-all text-center w-full",
+        d[i],
+        r ? "bg-primary-50 border-primary-300 ring-1 ring-primary-200" : l === "branded" ? "bg-primary-50/50 border-primary-200 hover:border-primary-300 hover:bg-primary-50" : "bg-slate-50 border-slate-200 hover:border-slate-300 hover:bg-slate-100",
+        p
       ),
-      style: o
-    }
-  );
-}
-function d({ lines: e = 3, className: r }) {
-  return /* @__PURE__ */ t("div", { className: u("space-y-2", r), children: Array.from({ length: e }).map((l, n) => /* @__PURE__ */ t(
-    c,
-    {
-      variant: "text",
-      width: n === e - 1 ? "60%" : "100%"
-    },
-    n
-  )) });
-}
-function s({ size: e = 40, className: r }) {
-  return /* @__PURE__ */ t(
-    c,
-    {
-      variant: "circular",
-      width: e,
-      height: e,
-      className: r
+      children: [
+        r && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white", children: /* @__PURE__ */ e(c, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2", children: [
+          a && /* @__PURE__ */ e(
+            a,
+            {
+              className: t(
+                b[i],
+                r ? "text-primary-600" : l === "branded" ? "text-primary-400" : "text-slate-400"
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: t(
+                "font-semibold text-sm",
+                r ? "text-primary-600" : "text-slate-800"
+              ),
+              children: m
+            }
+          ),
+          s && /* @__PURE__ */ e("span", { className: "text-xs text-slate-500", children: s })
+        ] })
+      ]
     }
   );
 }
-function f({ className: e }) {
-  return /* @__PURE__ */ a("div", { className: u("p-4 border border-slate-200 rounded-xl", e), children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-4", children: [
-      /* @__PURE__ */ t(s, {}),
-      /* @__PURE__ */ a("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ t(c, { variant: "text", width: "40%" }),
-        /* @__PURE__ */ t(c, { variant: "text", width: "20%" })
-      ] })
-    ] }),
-    /* @__PURE__ */ t(d, { lines: 3 })
-  ] });
-}
 export {
-  c as Skeleton,
-  s as SkeletonAvatar,
-  f as SkeletonCard,
-  d as SkeletonText
+  f as SelectionCard
 };
 //# sourceMappingURL=index58.js.map

package/dist/index58.js.map

@@ -1 +1 @@
-{"version":3,"file":"index58.js","sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface SkeletonProps {\n  variant?: 'text' | 'circular' | 'rectangular'\n  width?: string | number\n  height?: string | number\n  className?: string\n}\n\nexport function Skeleton({\n  variant = 'text',\n  width,\n  height,\n  className,\n}: SkeletonProps) {\n  const style: React.CSSProperties = {\n    width: typeof width === 'number' ? `${width}px` : width,\n    height: typeof height === 'number' ? `${height}px` : height,\n  }\n\n  return (\n    <div\n      className={cn(\n        'animate-pulse bg-slate-200',\n        variant === 'text' && 'h-4 rounded',\n        variant === 'circular' && 'rounded-full',\n        variant === 'rectangular' && 'rounded-lg',\n        !width && variant === 'text' && 'w-full',\n        !width && variant === 'circular' && 'w-10',\n        !height && variant === 'circular' && 'h-10',\n        !width && variant === 'rectangular' && 'w-full',\n        !height && variant === 'rectangular' && 'h-20',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n\n// Convenience components for common skeleton patterns\nexport function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {\n  return (\n    <div className={cn('space-y-2', className)}>\n      {Array.from({ length: lines }).map((_, i) => (\n        <Skeleton\n          key={i}\n          variant=\"text\"\n          width={i === lines - 1 ? '60%' : '100%'}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport function SkeletonAvatar({ size = 40, className }: { size?: number; className?: string }) {\n  return (\n    <Skeleton\n      variant=\"circular\"\n      width={size}\n      height={size}\n      className={className}\n    />\n  )\n}\n\nexport function SkeletonCard({ className }: { className?: string }) {\n  return (\n    <div className={cn('p-4 border border-slate-200 rounded-xl', className)}>\n      <div className=\"flex items-center gap-3 mb-4\">\n        <SkeletonAvatar />\n        <div className=\"flex-1 space-y-2\">\n          <Skeleton variant=\"text\" width=\"40%\" />\n          <Skeleton variant=\"text\" width=\"20%\" />\n        </div>\n      </div>\n      <SkeletonText lines={3} />\n    </div>\n  )\n}\n"],"names":["Skeleton","variant","width","height","className","style","jsx","cn","SkeletonText","lines","_","i","SkeletonAvatar","size","SkeletonCard","jsxs"],"mappings":";;AASO,SAASA,EAAS;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;AAChB,QAAMC,IAA6B;AAAA,IACjC,OAAO,OAAOH,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAAA,IAClD,QAAQ,OAAOC,KAAW,WAAW,GAAGA,CAAM,OAAOA;AAAA,EAAA;AAGvD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,MAAY,UAAU;AAAA,QACtBA,MAAY,cAAc;AAAA,QAC1BA,MAAY,iBAAiB;AAAA,QAC7B,CAACC,KAASD,MAAY,UAAU;AAAA,QAChC,CAACC,KAASD,MAAY,cAAc;AAAA,QACpC,CAACE,KAAUF,MAAY,cAAc;AAAA,QACrC,CAACC,KAASD,MAAY,iBAAiB;AAAA,QACvC,CAACE,KAAUF,MAAY,iBAAiB;AAAA,QACxCG;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASG,EAAa,EAAE,OAAAC,IAAQ,GAAG,WAAAL,KAAqD;AAC7F,2BACG,OAAA,EAAI,WAAWG,EAAG,aAAaH,CAAS,GACtC,UAAA,MAAM,KAAK,EAAE,QAAQK,EAAA,CAAO,EAAE,IAAI,CAACC,GAAGC,MACrC,gBAAAL;AAAA,IAACN;AAAA,IAAA;AAAA,MAEC,SAAQ;AAAA,MACR,OAAOW,MAAMF,IAAQ,IAAI,QAAQ;AAAA,IAAA;AAAA,IAF5BE;AAAA,EAAA,CAIR,GACH;AAEJ;AAEO,SAASC,EAAe,EAAE,MAAAC,IAAO,IAAI,WAAAT,KAAoD;AAC9F,SACE,gBAAAE;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAOa;AAAA,MACP,QAAQA;AAAA,MACR,WAAAT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,SAASU,EAAa,EAAE,WAAAV,KAAqC;AAClE,2BACG,OAAA,EAAI,WAAWG,EAAG,0CAA0CH,CAAS,GACpE,UAAA;AAAA,IAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,MAAA,gBAAAT,EAACM,GAAA,EAAe;AAAA,MAChB,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,QAAA,gBAAAT,EAACN,GAAA,EAAS,SAAQ,QAAO,OAAM,OAAM;AAAA,QACrC,gBAAAM,EAACN,GAAA,EAAS,SAAQ,QAAO,OAAM,MAAA,CAAM;AAAA,MAAA,EAAA,CACvC;AAAA,IAAA,GACF;AAAA,IACA,gBAAAM,EAACE,GAAA,EAAa,OAAO,EAAA,CAAG;AAAA,EAAA,GAC1B;AAEJ;"}
+{"version":3,"file":"index58.js","sources":["../src/components/SelectionCard/SelectionCard.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { CheckIcon } from '@heroicons/react/20/solid'\nimport type { ComponentType, SVGProps } from 'react'\n\nexport interface SelectionCardProps {\n  icon?: ComponentType<SVGProps<SVGSVGElement>>\n  label: string\n  description?: string\n  selected?: boolean\n  onClick?: () => void\n  variant?: 'default' | 'branded'\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n}\n\nconst sizeStyles = {\n  sm: 'p-3',\n  md: 'p-5',\n  lg: 'p-6',\n}\n\nconst iconSizeStyles = {\n  sm: 'h-6 w-6',\n  md: 'h-8 w-8',\n  lg: 'h-10 w-10',\n}\n\nexport function SelectionCard({\n  icon: Icon,\n  label,\n  description,\n  selected = false,\n  onClick,\n  variant = 'default',\n  size = 'md',\n  className,\n}: SelectionCardProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      onClick={onClick}\n      className={cn(\n        'relative rounded-xl border-2 cursor-pointer transition-all text-center w-full',\n        sizeStyles[size],\n        selected\n          ? 'bg-primary-50 border-primary-300 ring-1 ring-primary-200'\n          : variant === 'branded'\n            ? 'bg-primary-50/50 border-primary-200 hover:border-primary-300 hover:bg-primary-50'\n            : 'bg-slate-50 border-slate-200 hover:border-slate-300 hover:bg-slate-100',\n        className\n      )}\n    >\n      {selected && (\n        <span className=\"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white\">\n          <CheckIcon className=\"h-3.5 w-3.5\" />\n        </span>\n      )}\n\n      <div className=\"flex flex-col items-center gap-2\">\n        {Icon && (\n          <Icon\n            className={cn(\n              iconSizeStyles[size],\n              selected ? 'text-primary-600' : variant === 'branded' ? 'text-primary-400' : 'text-slate-400'\n            )}\n          />\n        )}\n        <span\n          className={cn(\n            'font-semibold text-sm',\n            selected ? 'text-primary-600' : 'text-slate-800'\n          )}\n        >\n          {label}\n        </span>\n        {description && (\n          <span className=\"text-xs text-slate-500\">{description}</span>\n        )}\n      </div>\n    </button>\n  )\n}\n"],"names":["sizeStyles","iconSizeStyles","SelectionCard","Icon","label","description","selected","onClick","variant","size","className","jsxs","cn","jsx","CheckIcon"],"mappings":";;;AAeA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAc;AAAA,EAC5B,MAAMC;AAAA,EACN,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,WAAAC;AACF,GAAuB;AACrB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAcL;AAAA,MACd,SAAAC;AAAA,MACA,WAAWK;AAAA,QACT;AAAA,QACAZ,EAAWS,CAAI;AAAA,QACfH,IACI,6DACAE,MAAY,YACV,qFACA;AAAA,QACNE;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAJ,KACC,gBAAAO,EAAC,UAAK,WAAU,0GACd,4BAACC,GAAA,EAAU,WAAU,eAAc,EAAA,CACrC;AAAA,QAGF,gBAAAH,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAR,KACC,gBAAAU;AAAA,YAACV;AAAA,YAAA;AAAA,cACC,WAAWS;AAAA,gBACTX,EAAeQ,CAAI;AAAA,gBACnBH,IAAW,qBAAqBE,MAAY,YAAY,qBAAqB;AAAA,cAAA;AAAA,YAC/E;AAAA,UAAA;AAAA,UAGJ,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAN,IAAW,qBAAqB;AAAA,cAAA;AAAA,cAGjC,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,0BAA0B,UAAAR,EAAA,CAAY;AAAA,QAAA,EAAA,CAE1D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/index59.js

@@ -1,239 +1,221 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as q } from "react";
-import { ResponsiveContainer as M, BarChart as E, CartesianGrid as w, XAxis as y, YAxis as b, Tooltip as T, Legend as L, Bar as F, Cell as P, LineChart as J, Line as z, ComposedChart as O } from "recharts";
-import { cn as i } from "./index3.js";
-const Q = (a) => a >= 1e6 ? `$${(a / 1e6).toFixed(1)}M` : a >= 1e3 ? `$${(a / 1e3).toFixed(0)}K` : `$${a}`, C = ({
-  data: a,
-  type: R = "bar",
-  height: g = 300,
-  primaryColor: v = "var(--color-primary-500, #1DA061)",
-  primaryColorHover: j = "var(--color-primary-700, #168a52)",
-  secondaryColor: f = "var(--color-primary-300, #6FCF97)",
-  showGrid: K = !0,
-  showLegend: W = !1,
-  showXAxis: N = !0,
-  showYAxis: D = !0,
-  valueFormatter: h = Q,
-  title: o,
-  subtitle: x,
-  headerColor: n,
-  interactive: m = !1,
-  onHover: p,
-  minimal: t = !1,
-  emptyMessage: V = "No data available",
-  className: S
+import { jsx as e, jsxs as m, Fragment as f } from "react/jsx-runtime";
+import { useState as b, useContext as v, createContext as w } from "react";
+import { cn as l } from "./index3.js";
+import { ChevronRightIcon as N, ChevronLeftIcon as y } from "@heroicons/react/24/outline";
+const g = w(null), p = () => {
+  const t = v(g);
+  if (!t) throw new Error("useSidebar must be used within a <Sidebar>");
+  return t;
+}, O = ({
+  children: t,
+  defaultOpen: r = !0,
+  open: a,
+  onOpenChange: s,
+  inline: i = !1,
+  className: c
 }) => {
-  const [$, A] = q(-1), l = a.map((r) => ({
-    name: r.label,
-    value: r.value,
-    secondary: r.secondaryValue
-  })), B = (r) => {
-    m && r && typeof r.activeTooltipIndex == "number" && r.activeTooltipIndex !== $ && (A(r.activeTooltipIndex), p == null || p(r.activeTooltipIndex, a[r.activeTooltipIndex] || null));
-  }, _ = () => {
-    m && (A(-1), p == null || p(-1, null));
-  }, u = {
-    tick: { fontSize: 11, fill: "#64748b" },
-    axisLine: { stroke: "#e2e8f0" },
-    tickLine: { stroke: "#e2e8f0" }
-  }, k = {
-    hide: !0
-  };
-  if (!a || a.length === 0)
-    return /* @__PURE__ */ s("div", { className: i("w-full", S), children: [
-      (o || n) && /* @__PURE__ */ s(
-        "div",
-        {
-          className: i(
-            "px-5 py-4 rounded-t-2xl",
-            n ? "text-white" : "bg-slate-100"
-          ),
-          style: n ? { backgroundColor: n } : void 0,
-          children: [
-            o && /* @__PURE__ */ e("h3", { className: "text-lg font-bold", children: o }),
-            x && /* @__PURE__ */ e("p", { className: i("text-xs", n ? "opacity-80" : "text-slate-500"), children: x })
-          ]
-        }
+  const [o, d] = b(r), n = a !== void 0 ? a : o, x = (h) => {
+    s ? s(h) : d(h);
+  }, u = () => x(!n);
+  return /* @__PURE__ */ e(g.Provider, { value: { isOpen: n, setIsOpen: x, toggle: u }, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: l(
+        "flex flex-col justify-between bg-slate-50 border-r border-slate-200 transition-all duration-300 ease-in-out",
+        i ? "relative h-full" : "hidden md:flex fixed top-0 left-0 z-10 h-screen",
+        n ? "w-64" : "w-16",
+        c
       ),
-      /* @__PURE__ */ e(
-        "div",
-        {
-          className: i(
-            "flex items-center justify-center bg-slate-50 rounded-xl",
-            o || n ? "rounded-t-none" : ""
-          ),
-          style: { height: g },
-          children: /* @__PURE__ */ e("p", { className: "text-slate-500 text-sm", children: V })
-        }
-      )
-    ] });
-  const I = () => {
-    const r = t ? { top: 5, right: 5, left: 5, bottom: 5 } : { top: 20, right: 20, left: 20, bottom: N ? 60 : 20 };
-    return R === "bar" ? /* @__PURE__ */ s(
-      E,
+      children: /* @__PURE__ */ e("div", { className: "flex flex-col h-full", children: t })
+    }
+  ) });
+}, E = ({
+  children: t,
+  showToggle: r = !0,
+  className: a
+}) => {
+  const { isOpen: s, toggle: i } = p();
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      className: l(
+        "flex items-center border-b border-slate-200 h-16",
+        s ? "px-4 justify-between" : "px-2 justify-center",
+        a
+      ),
+      children: [
+        s && t,
+        r && /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: i,
+            className: "p-2 rounded-lg hover:bg-slate-200 transition-colors cursor-pointer flex-shrink-0",
+            "aria-label": s ? "Collapse sidebar" : "Expand sidebar",
+            children: s ? /* @__PURE__ */ e(y, { className: "h-5 w-5 text-slate-500" }) : /* @__PURE__ */ e(N, { className: "h-5 w-5 text-slate-500" })
+          }
+        )
+      ]
+    }
+  );
+}, F = ({ children: t, className: r }) => /* @__PURE__ */ e("nav", { className: l("flex-1 py-4", r), children: /* @__PURE__ */ e("ul", { className: "flex flex-col space-y-1 px-2", children: t }) }), z = ({ label: t, children: r, className: a }) => {
+  const { isOpen: s } = p();
+  return /* @__PURE__ */ m("div", { className: l("mt-4 first:mt-0", a), children: [
+    t && s && /* @__PURE__ */ e("div", { className: "px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400", children: t }),
+    !t && s && /* @__PURE__ */ e("div", { className: "border-t border-slate-200 mx-3 mb-2" }),
+    /* @__PURE__ */ e("ul", { className: "flex flex-col space-y-1", children: r })
+  ] });
+}, B = ({
+  label: t,
+  icon: r,
+  active: a = !1,
+  href: s,
+  onClick: i,
+  as: c,
+  badge: o,
+  className: d
+}) => {
+  const { isOpen: n } = p(), x = l(
+    "flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full",
+    n ? "px-3 py-2.5" : "px-2 py-2.5 justify-center",
+    a ? "bg-accent-tint text-accent-tint-dark" : "text-slate-600 hover:bg-slate-200 hover:text-slate-900",
+    d
+  ), u = /* @__PURE__ */ m(f, { children: [
+    r && /* @__PURE__ */ e(
+      r,
       {
-        data: l,
-        margin: r,
-        onMouseMove: B,
-        onMouseLeave: _,
+        className: l(
+          "h-5 w-5 flex-shrink-0 transition-colors",
+          a ? "text-primary-500" : "text-slate-500 group-hover:text-slate-700"
+        )
+      }
+    ),
+    n && /* @__PURE__ */ e(
+      "span",
+      {
+        className: l(
+          "ml-3 text-sm font-medium truncate",
+          a ? "text-accent-tint-dark" : ""
+        ),
+        children: t
+      }
+    ),
+    n && o !== void 0 && /* @__PURE__ */ e("span", { className: "ml-auto text-xs font-semibold bg-accent-tint text-accent-tint-dark rounded-full px-2 py-0.5", children: o })
+  ] });
+  return s && c ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(c, { href: s, className: x, title: n ? void 0 : t, children: u }) }) : s ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: s, className: x, title: n ? void 0 : t, onClick: i, children: u }) }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+    "button",
+    {
+      onClick: i,
+      className: x,
+      title: n ? void 0 : t,
+      children: u
+    }
+  ) });
+}, G = ({
+  label: t,
+  icon: r,
+  active: a = !1,
+  defaultOpen: s = !1,
+  children: i,
+  className: c
+}) => {
+  const { isOpen: o } = p(), [d, n] = b(s);
+  return /* @__PURE__ */ m("li", { className: c, children: [
+    /* @__PURE__ */ m(
+      "button",
+      {
+        onClick: () => n(!d),
+        className: l(
+          "flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full",
+          o ? "px-3 py-2.5" : "px-2 py-2.5 justify-center",
+          a ? "text-accent-tint-dark" : "text-slate-600 hover:bg-slate-200 hover:text-slate-900"
+        ),
+        title: o ? void 0 : t,
         children: [
-          K && !t && /* @__PURE__ */ e(w, { strokeDasharray: "3 3", stroke: "#f1f5f9" }),
-          N && !t && /* @__PURE__ */ e(
-            y,
+          r && /* @__PURE__ */ e(
+            r,
             {
-              dataKey: "name",
-              ...u,
-              angle: -45,
-              textAnchor: "end",
-              interval: 0
+              className: l(
+                "h-5 w-5 flex-shrink-0 transition-colors",
+                a ? "text-primary-500" : "text-slate-500 group-hover:text-slate-700"
+              )
             }
           ),
-          t && /* @__PURE__ */ e(y, { ...k }),
-          D && !t && /* @__PURE__ */ e(b, { ...u, tickFormatter: h }),
-          t && /* @__PURE__ */ e(b, { ...k }),
-          !t && /* @__PURE__ */ e(
-            T,
-            {
-              formatter: (d) => [h(Number(d) || 0), "Value"],
-              contentStyle: {
-                backgroundColor: "white",
-                border: "1px solid #e2e8f0",
-                borderRadius: "8px",
-                fontSize: "12px"
+          o && /* @__PURE__ */ m(f, { children: [
+            /* @__PURE__ */ e("span", { className: "ml-3 text-sm font-medium truncate", children: t }),
+            /* @__PURE__ */ e(
+              N,
+              {
+                className: l(
+                  "ml-auto h-4 w-4 text-slate-400 transition-transform duration-200",
+                  d && "rotate-90"
+                )
               }
-            }
-          ),
-          W && /* @__PURE__ */ e(L, {}),
-          /* @__PURE__ */ e(F, { dataKey: "value", radius: [4, 4, 0, 0], children: l.map((d, c) => /* @__PURE__ */ e(
-            P,
-            {
-              fill: m && $ === c ? j : v
-            },
-            `cell-${c}`
-          )) })
+            )
+          ] })
         ]
       }
-    ) : R === "line" ? /* @__PURE__ */ s(J, { data: l, margin: r, children: [
-      K && !t && /* @__PURE__ */ e(w, { strokeDasharray: "3 3", stroke: "#f1f5f9" }),
-      N && !t && /* @__PURE__ */ e(
-        y,
-        {
-          dataKey: "name",
-          ...u,
-          angle: -45,
-          textAnchor: "end",
-          interval: 0
-        }
-      ),
-      t && /* @__PURE__ */ e(y, { ...k }),
-      D && !t && /* @__PURE__ */ e(b, { ...u, tickFormatter: h }),
-      t && /* @__PURE__ */ e(b, { ...k }),
-      !t && /* @__PURE__ */ e(
-        T,
-        {
-          formatter: (d) => [h(Number(d) || 0), "Value"],
-          contentStyle: {
-            backgroundColor: "white",
-            border: "1px solid #e2e8f0",
-            borderRadius: "8px",
-            fontSize: "12px"
-          }
-        }
-      ),
-      W && /* @__PURE__ */ e(L, {}),
-      /* @__PURE__ */ e(
-        z,
-        {
-          type: "monotone",
-          dataKey: "value",
-          stroke: v,
-          strokeWidth: 2,
-          dot: { fill: v, strokeWidth: 2, r: 4 },
-          activeDot: { r: 6, stroke: v, strokeWidth: 2, fill: "#fff" }
-        }
-      ),
-      l.some((d) => d.secondary !== void 0) && /* @__PURE__ */ e(
-        z,
-        {
-          type: "monotone",
-          dataKey: "secondary",
-          stroke: f,
-          strokeWidth: 2,
-          dot: { fill: f, strokeWidth: 2, r: 4 },
-          activeDot: { r: 6, stroke: f, strokeWidth: 2, fill: "#fff" }
-        }
-      )
-    ] }) : /* @__PURE__ */ s(O, { data: l, margin: r, children: [
-      K && !t && /* @__PURE__ */ e(w, { strokeDasharray: "3 3", stroke: "#f1f5f9" }),
-      N && !t && /* @__PURE__ */ e(
-        y,
-        {
-          dataKey: "name",
-          ...u,
-          angle: -45,
-          textAnchor: "end",
-          interval: 0
-        }
-      ),
-      t && /* @__PURE__ */ e(y, { ...k }),
-      D && !t && /* @__PURE__ */ e(b, { ...u, tickFormatter: h }),
-      t && /* @__PURE__ */ e(b, { ...k }),
-      !t && /* @__PURE__ */ e(
-        T,
-        {
-          formatter: (d, c) => [
-            h(Number(d)),
-            c === "value" ? "Primary" : "Secondary"
-          ],
-          contentStyle: {
-            backgroundColor: "white",
-            border: "1px solid #e2e8f0",
-            borderRadius: "8px",
-            fontSize: "12px"
-          }
-        }
-      ),
-      W && /* @__PURE__ */ e(L, {}),
-      /* @__PURE__ */ e(F, { dataKey: "value", radius: [4, 4, 0, 0], children: l.map((d, c) => /* @__PURE__ */ e(
-        P,
-        {
-          fill: m && $ === c ? j : v
-        },
-        `cell-${c}`
-      )) }),
-      l.some((d) => d.secondary !== void 0) && /* @__PURE__ */ e(
-        z,
-        {
-          type: "monotone",
-          dataKey: "secondary",
-          stroke: f,
-          strokeWidth: 2,
-          dot: { fill: f, strokeWidth: 2, r: 4 },
-          activeDot: { r: 6, stroke: f, strokeWidth: 2, fill: "#fff" }
-        }
-      )
-    ] });
-  };
-  return n ? /* @__PURE__ */ s(
-    "div",
-    {
-      className: i("rounded-2xl overflow-hidden border border-slate-200 shadow-sm", S),
-      children: [
-        /* @__PURE__ */ s("div", { className: "px-5 py-4", style: { backgroundColor: n }, children: [
-          o && /* @__PURE__ */ e("h3", { className: "text-lg font-bold text-white", children: o }),
-          x && /* @__PURE__ */ e("p", { className: "text-xs text-white/80", children: x })
-        ] }),
-        /* @__PURE__ */ e("div", { className: "bg-white p-5", children: /* @__PURE__ */ e("div", { style: { height: g }, children: /* @__PURE__ */ e(M, { width: "100%", height: "100%", children: I() }) }) })
-      ]
-    }
-  ) : o ? /* @__PURE__ */ s("div", { className: i("w-full", S), children: [
-    /* @__PURE__ */ s("div", { className: "mb-4", children: [
-      /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-slate-900", children: o }),
-      x && /* @__PURE__ */ e("p", { className: "text-sm text-slate-500", children: x })
+    ),
+    o && d && /* @__PURE__ */ e("ul", { className: "mt-1 ml-4 pl-3 border-l border-slate-200 space-y-1", children: i })
+  ] });
+}, H = ({ children: t, className: r }) => /* @__PURE__ */ e("div", { className: l("p-3", r), children: t }), P = ({
+  icon: t,
+  title: r,
+  description: a,
+  buttonLabel: s,
+  onAction: i,
+  children: c,
+  className: o
+}) => {
+  const { isOpen: d } = p();
+  if (!d)
+    return i ? /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: i,
+        className: l(
+          "w-full p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors cursor-pointer flex items-center justify-center",
+          o
+        ),
+        title: r,
+        children: t ? /* @__PURE__ */ e(t, { className: "h-5 w-5" }) : /* @__PURE__ */ e("span", { className: "text-xs font-bold", children: r.charAt(0) })
+      }
+    ) : /* @__PURE__ */ e(
+      "div",
+      {
+        className: l(
+          "w-full p-2 rounded-lg bg-primary-500 text-white flex items-center justify-center",
+          o
+        ),
+        title: r,
+        children: t ? /* @__PURE__ */ e(t, { className: "h-5 w-5" }) : /* @__PURE__ */ e("span", { className: "text-xs font-bold", children: r.charAt(0) })
+      }
+    );
+  const n = c || s && i;
+  return /* @__PURE__ */ m("div", { className: l("p-4 rounded-xl bg-gradient-to-br from-primary-500 to-primary-500/80 text-white", o), children: [
+    /* @__PURE__ */ m("div", { className: l("flex items-center gap-2", (a || n) && "mb-2"), children: [
+      t && /* @__PURE__ */ e(t, { className: "h-5 w-5" }),
+      /* @__PURE__ */ e("span", { className: "font-semibold text-sm", children: r })
     ] }),
-    /* @__PURE__ */ e("div", { style: { height: g }, children: /* @__PURE__ */ e(M, { width: "100%", height: "100%", children: I() }) })
-  ] }) : /* @__PURE__ */ e("div", { className: i("w-full", S), style: { height: g }, children: /* @__PURE__ */ e(M, { width: "100%", height: "100%", children: I() }) });
+    a && /* @__PURE__ */ e("p", { className: l("text-xs text-white/90", n && "mb-3"), children: a }),
+    c || (s && i ? /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: i,
+        className: "w-full bg-white text-primary-600 px-3 py-2 rounded-lg font-semibold text-sm hover:bg-white/90 transition-colors cursor-pointer",
+        children: s
+      }
+    ) : null)
+  ] });
 };
 export {
-  C as StatisticsChart
+  O as Sidebar,
+  P as SidebarCard,
+  H as SidebarFooter,
+  G as SidebarGroup,
+  E as SidebarHeader,
+  B as SidebarItem,
+  F as SidebarNav,
+  z as SidebarSection,
+  p as useSidebar
 };
 //# sourceMappingURL=index59.js.map