ruler-components 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -31,18 +31,2228 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// components/ui/progress.tsx
-import * as React from "react";
-import { cva } from "class-variance-authority";
+// components/ui/accordion.tsx
+import { createContext, useContext, useState, useRef, useLayoutEffect, useId } from "react";
+import { Plus, ChevronDown, ChevronRight } from "lucide-react";
 
 // lib/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 var cn = (...inputs) => twMerge(clsx(inputs));
 
+// components/ui/accordion.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var AccordionContext = createContext(null);
+function useAccordionContext() {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) throw new Error("Accordion components must be used inside Accordion");
+  return ctx;
+}
+var EASE = { transitionTimingFunction: "cubic-bezier(0.16,1,0.3,1)" };
+function Accordion({ children, defaultValue = null, className = "" }) {
+  const [openValue, setOpenValue] = useState(defaultValue);
+  const toggle = (value) => setOpenValue((current) => current === value ? null : value);
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { openValue, toggle }, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function AccordionItem({ value, title, children, variant = "plus" }) {
+  const { openValue, toggle } = useAccordionContext();
+  const isOpen = openValue === value;
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  const panelId = useId();
+  useLayoutEffect(() => {
+    if (!contentRef.current) return;
+    setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+  }, [isOpen]);
+  if (variant === "chevron") {
+    return /* @__PURE__ */ jsxs("div", { className: "border-b border-zinc-200 dark:border-zinc-800 last:border-0", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(value),
+          "aria-expanded": isOpen,
+          "aria-controls": panelId,
+          className: "group flex w-full items-center justify-between rounded-lg py-5 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20",
+          children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-[15px] font-medium transition-colors duration-200",
+                  isOpen ? "text-zinc-900 dark:text-white" : "text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200"
+                ),
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                size: 18,
+                style: EASE,
+                className: cn(
+                  "shrink-0 text-zinc-400 transition-transform duration-300 group-hover:text-zinc-600 dark:group-hover:text-zinc-300",
+                  isOpen && "rotate-180 text-zinc-900 dark:text-white"
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, EASE), { height }), className: "overflow-hidden transition-[height] duration-300", children: /* @__PURE__ */ jsx("div", { id: panelId, ref: contentRef, className: "pb-5 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400", children }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-zinc-200 dark:border-zinc-800 last:border-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => toggle(value),
+        "aria-expanded": isOpen,
+        "aria-controls": panelId,
+        className: "group flex w-full items-center gap-3 rounded-lg py-4 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: EASE,
+              className: cn(
+                "flex h-6 w-6 shrink-0 items-center justify-center rounded-full border transition-all duration-300",
+                isOpen ? "border-zinc-900 bg-zinc-900 text-white shadow-sm dark:border-zinc-100 dark:bg-zinc-100 dark:text-zinc-900" : "border-zinc-300 text-zinc-400 group-hover:border-zinc-400 group-hover:text-zinc-500 dark:border-zinc-700 dark:group-hover:border-zinc-600"
+              ),
+              children: /* @__PURE__ */ jsx(Plus, { size: 12, style: EASE, className: cn("transition-transform duration-300", isOpen && "rotate-45") })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "text-[15px] font-medium transition-colors duration-200",
+                isOpen ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-600 group-hover:text-zinc-900 dark:text-zinc-400 dark:group-hover:text-zinc-200"
+              ),
+              children: title
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, EASE), { height }), className: "overflow-hidden transition-[height] duration-300", children: /* @__PURE__ */ jsx("div", { id: panelId, ref: contentRef, className: "pb-4 pl-9 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400", children }) })
+  ] });
+}
+function AccordionNested({ title, children, level = 0 }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  const panelId = useId();
+  useLayoutEffect(() => {
+    if (!contentRef.current) return;
+    setHeight(isOpen ? contentRef.current.scrollHeight : 0);
+  }, [isOpen, children]);
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-zinc-100 dark:border-zinc-800 last:border-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-controls": panelId,
+        className: "group flex w-full items-center gap-2.5 rounded-lg py-3.5 text-left outline-none transition-colors duration-200 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:hover:bg-zinc-900/40 dark:focus-visible:ring-white/20",
+        style: { paddingLeft: `${level * 1.5}rem` },
+        children: [
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              size: 15,
+              style: EASE,
+              className: cn(
+                "shrink-0 text-zinc-400 transition-transform duration-300 group-hover:text-zinc-600 dark:group-hover:text-zinc-300",
+                isOpen && "rotate-90 text-zinc-600 dark:text-zinc-300"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-[15px] font-medium text-zinc-900 dark:text-zinc-100", children: title })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { style: __spreadProps(__spreadValues({}, EASE), { height }), className: "overflow-hidden transition-[height] duration-300", children: /* @__PURE__ */ jsx("div", { id: panelId, ref: contentRef, className: "flex flex-col", children }) })
+  ] });
+}
+function AccordionLink({ title, level = 0 }) {
+  return /* @__PURE__ */ jsx("div", { className: "border-b border-zinc-100 dark:border-zinc-800 last:border-0", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "cursor-pointer rounded-lg py-3.5 text-[15px] font-medium text-zinc-600 transition-colors duration-200 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-900/40 dark:hover:text-zinc-100",
+      style: { paddingLeft: `${level * 1.5 + 1.5625}rem` },
+      children: title
+    }
+  ) });
+}
+
+// components/ui/alert.tsx
+import React2 from "react";
+import { CheckCircle2, TriangleAlert, Info, XCircle, X } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var Alert = React2.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className = "", variant = "info", title, description, dismissible, onDismiss, action, children } = _b, props = __objRest(_b, ["className", "variant", "title", "description", "dismissible", "onDismiss", "action", "children"]);
+    const configs = {
+      info: {
+        bar: "bg-[#0070BA]",
+        icon: /* @__PURE__ */ jsx2(Info, { className: "h-5 w-5 text-[#0070BA] shrink-0" })
+      },
+      success: {
+        bar: "bg-[#28A745]",
+        icon: /* @__PURE__ */ jsx2(CheckCircle2, { className: "h-5 w-5 text-[#28A745] shrink-0" })
+      },
+      warning: {
+        bar: "bg-[#E58E00]",
+        icon: /* @__PURE__ */ jsx2(TriangleAlert, { className: "h-5 w-5 text-[#E58E00] shrink-0" })
+      },
+      error: {
+        bar: "bg-[#D93025]",
+        icon: /* @__PURE__ */ jsx2(XCircle, { className: "h-5 w-5 text-[#D93025] shrink-0" })
+      }
+    };
+    const current = configs[variant];
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        className: `relative flex w-full min-h-[64px] items-center gap-2.5 rounded-lg border border-gray-200 bg-white px-3 py-2.5 shadow-[0_3px_12px_rgba(0,0,0,0.03)] dark:border-zinc-800 dark:bg-zinc-900 dark:shadow-none ${className}`
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: `absolute left-0 top-0 w-16 h-1 ${current.bar} rounded-tl-lg`,
+              style: {
+                clipPath: "polygon(0 0, 100% 0, 92% 100%, 0 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { className: "shrink-0 flex items-center justify-center", children: current.icon }),
+          /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
+            title && /* @__PURE__ */ jsx2("h5", { className: "text-[13px] font-semibold tracking-tight text-zinc-900 dark:text-white leading-tight", children: title }),
+            description && /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-[11px] font-medium text-zinc-500 dark:text-zinc-300 leading-tight", children: description }),
+            children
+          ] }),
+          action && /* @__PURE__ */ jsx2("div", { className: `shrink-0 ml-auto ${dismissible || onDismiss ? "mr-5" : ""}`, children: action }),
+          (dismissible || onDismiss) && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              onClick: onDismiss,
+              className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-600 dark:text-zinc-500 dark:hover:text-zinc-200 transition-colors",
+              children: /* @__PURE__ */ jsx2(X, { className: "h-3.5 w-3.5 stroke-[3]" })
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Alert.displayName = "Alert";
+
+// components/ui/allinput.tsx
+import { useState as useState2 } from "react";
+import { Search, Eye, EyeOff, Check } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var fieldText = "text-sm text-zinc-900 outline-none transition-all duration-150 placeholder:text-zinc-400 dark:text-zinc-100 dark:placeholder:text-zinc-500";
+var fieldSurface = "border-zinc-200 hover:border-zinc-300 focus:border-zinc-900 focus:ring-4 focus:ring-zinc-900/5 dark:border-zinc-800 dark:hover:border-zinc-700 dark:focus:border-zinc-400 dark:focus:ring-zinc-300/10";
+var InputStandard = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    __spreadProps(__spreadValues({}, props), {
+      className: cn("w-full rounded-xl border bg-white px-4 py-2.5 dark:bg-zinc-900", fieldText, fieldSurface, className)
+    })
+  );
+};
+var InputFilled = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx3(
+    "input",
+    __spreadProps(__spreadValues({}, props), {
+      className: cn(
+        "w-full rounded-xl border border-transparent bg-zinc-100 px-4 py-3 hover:bg-zinc-200/70 focus:border-zinc-900 focus:bg-white focus:ring-4 focus:ring-zinc-900/5 dark:bg-zinc-800 dark:hover:bg-zinc-700/70 dark:focus:border-zinc-400 dark:focus:bg-zinc-900 dark:focus:ring-zinc-300/10",
+        fieldText,
+        className
+      )
+    })
+  );
+};
+var InputUnderline = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxs3("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        className: cn(
+          "w-full border-b border-zinc-200 bg-transparent py-2 focus:border-zinc-900 dark:border-zinc-700 dark:focus:border-white",
+          fieldText,
+          className
+        )
+      })
+    ),
+    /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-[2px] w-0 bg-zinc-900 transition-all duration-300 group-focus-within:w-full dark:bg-white" })
+  ] });
+};
+var InputFloating = (_a) => {
+  var _b = _a, {
+    label,
+    className
+  } = _b, props = __objRest(_b, [
+    "label",
+    "className"
+  ]);
+  const [value, setValue] = useState2("");
+  const filled = Boolean(value || props.defaultValue);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative pt-4", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        onChange: (e) => {
+          var _a2;
+          setValue(e.target.value);
+          (_a2 = props.onChange) == null ? void 0 : _a2.call(props, e);
+        },
+        className: cn(
+          "peer w-full border-b-2 border-zinc-200 bg-transparent py-2 focus:border-zinc-900 dark:border-zinc-700 dark:focus:border-white",
+          fieldText,
+          className
+        )
+      })
+    ),
+    /* @__PURE__ */ jsx3(
+      "label",
+      {
+        className: cn(
+          "absolute left-0 transition-all duration-200",
+          filled ? "-top-1 text-xs font-bold text-zinc-900 dark:text-white" : "top-5 text-sm text-zinc-400 peer-focus:-top-1 peer-focus:text-xs peer-focus:font-bold peer-focus:text-zinc-900 dark:peer-focus:text-white"
+        ),
+        children: label
+      }
+    )
+  ] });
+};
+var InputSearch = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxs3("div", { className: "group relative", children: [
+    /* @__PURE__ */ jsx3(
+      Search,
+      {
+        size: 16,
+        className: "absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors group-focus-within:text-zinc-900 dark:group-focus-within:text-white"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        type: "text",
+        className: cn(
+          "w-full rounded-full border bg-zinc-50 py-2.5 pl-11 pr-4 focus:bg-white dark:bg-zinc-900 dark:focus:bg-zinc-950",
+          fieldText,
+          fieldSurface,
+          className
+        )
+      })
+    )
+  ] });
+};
+var InputPassword = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  const [show, setShow] = useState2(false);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        type: show ? "text" : "password",
+        className: cn("w-full rounded-xl border bg-white px-4 py-2.5 pr-11 dark:bg-zinc-900", fieldText, fieldSurface, className)
+      })
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        onClick: () => setShow(!show),
+        "aria-label": show ? "Hide password" : "Show password",
+        className: "absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors hover:text-zinc-900 dark:hover:text-white",
+        children: show ? /* @__PURE__ */ jsx3(EyeOff, { size: 18 }) : /* @__PURE__ */ jsx3(Eye, { size: 18 })
+      }
+    )
+  ] });
+};
+var InputAddon = (_a) => {
+  var _b = _a, {
+    prefix,
+    suffix,
+    className
+  } = _b, props = __objRest(_b, [
+    "prefix",
+    "suffix",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex w-full overflow-hidden rounded-xl border border-zinc-200 bg-white transition-all focus-within:border-zinc-900 focus-within:ring-4 focus-within:ring-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-400 dark:focus-within:ring-zinc-300/10",
+        className
+      ),
+      children: [
+        prefix && /* @__PURE__ */ jsx3("span", { className: "flex items-center border-r border-zinc-200 bg-zinc-50 px-3 text-sm font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400", children: prefix }),
+        /* @__PURE__ */ jsx3("input", __spreadProps(__spreadValues({}, props), { className: cn("flex-1 bg-transparent px-4 py-2.5", fieldText) })),
+        suffix && /* @__PURE__ */ jsx3("span", { className: "flex items-center border-l border-zinc-200 bg-zinc-50 px-3 text-sm font-medium text-zinc-500 dark:border-zinc-800 dark:bg-zinc-800 dark:text-zinc-400", children: suffix })
+      ]
+    }
+  );
+};
+var InputIcon = (_a) => {
+  var _b = _a, {
+    icon: Icon,
+    position = "left",
+    className
+  } = _b, props = __objRest(_b, [
+    "icon",
+    "position",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cn(
+          "pointer-events-none absolute top-1/2 -translate-y-1/2 text-zinc-400",
+          position === "left" ? "left-3.5" : "right-3.5"
+        ),
+        children: /* @__PURE__ */ jsx3(Icon, { size: 18, strokeWidth: 1.5 })
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        className: cn(
+          "w-full rounded-xl border bg-white py-2.5 shadow-sm dark:bg-zinc-900",
+          position === "left" ? "pl-10 pr-4" : "pl-4 pr-10",
+          fieldText,
+          fieldSurface,
+          className
+        )
+      })
+    )
+  ] });
+};
+var InputOTP = () => /* @__PURE__ */ jsx3("div", { className: "flex gap-2.5", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx3(
+  "input",
+  {
+    maxLength: 1,
+    "aria-label": `Digit ${i}`,
+    className: "h-12 w-12 rounded-xl border-2 border-zinc-200 bg-white text-center text-lg font-bold text-zinc-900 outline-none transition-all focus:border-zinc-900 focus:ring-4 focus:ring-zinc-900/5 dark:border-zinc-800 dark:bg-zinc-900 dark:text-white dark:focus:border-zinc-400 dark:focus:ring-zinc-300/10"
+  },
+  i
+)) });
+var InputAutocomplete = (_a) => {
+  var _b = _a, {
+    suggestions,
+    className
+  } = _b, props = __objRest(_b, [
+    "suggestions",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx3(
+      "input",
+      __spreadProps(__spreadValues({}, props), {
+        className: cn("w-full rounded-xl border bg-white px-4 py-2.5 dark:bg-zinc-900", fieldText, fieldSurface, className)
+      })
+    ),
+    /* @__PURE__ */ jsx3("div", { className: "absolute top-[calc(100%+0.5rem)] z-50 w-full rounded-xl border border-zinc-200 bg-white p-1 shadow-xl dark:border-zinc-800 dark:bg-zinc-900", children: suggestions.map((s) => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "flex cursor-pointer items-center justify-between rounded-lg px-3 py-2 text-sm text-zinc-700 hover:bg-zinc-50 dark:text-zinc-200 dark:hover:bg-zinc-800",
+        children: [
+          s,
+          " ",
+          /* @__PURE__ */ jsx3(Check, { size: 14, className: "text-zinc-400" })
+        ]
+      },
+      s
+    )) })
+  ] });
+};
+
+// components/ui/avatar.tsx
+import * as React4 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var AVATAR_GRADIENTS = [
+  "from-violet-500 to-indigo-600",
+  "from-sky-500 to-blue-600",
+  "from-emerald-500 to-teal-600",
+  "from-amber-500 to-orange-500",
+  "from-rose-500 to-pink-600",
+  "from-fuchsia-500 to-purple-600",
+  "from-cyan-500 to-blue-500",
+  "from-lime-500 to-emerald-600"
+];
+var avatarVariants = cva(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full",
+    "ring-1 ring-zinc-900/5 shadow-sm shadow-zinc-900/10",
+    "dark:ring-white/10 dark:shadow-black/30"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-8 text-[10px]",
+        md: "h-10 w-10 text-xs",
+        lg: "h-12 w-12 text-sm",
+        xl: "h-16 w-16 text-base"
+      },
+      variant: {
+        default: "",
+        outline: "ring-2 ring-white dark:ring-zinc-950"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+var statusVariants = cva(
+  [
+    "absolute rounded-full ring-2 ring-white dark:ring-zinc-950",
+    "shadow-sm"
+  ],
+  {
+    variants: {
+      status: {
+        online: "bg-emerald-500",
+        offline: "bg-zinc-400 dark:bg-zinc-500",
+        busy: "bg-amber-500"
+      },
+      size: {
+        sm: "bottom-0 right-0 h-2 w-2",
+        md: "bottom-0 right-0 h-2.5 w-2.5",
+        lg: "bottom-0.5 right-0.5 h-2.5 w-2.5",
+        xl: "bottom-1 right-1 h-3 w-3"
+      }
+    }
+  }
+);
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+function getGradientFromName(name) {
+  let hash = 0;
+  for (let i = 0; i < name.length; i += 1) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_GRADIENTS[Math.abs(hash) % AVATAR_GRADIENTS.length];
+}
+var Avatar = React4.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, variant, src, alt, name, status, children } = _b, props = __objRest(_b, ["className", "size", "variant", "src", "alt", "name", "status", "children"]);
+    var _a2;
+    const [imageError, setImageError] = React4.useState(false);
+    const showImage = src && !imageError;
+    const fallbackText = name ? getInitials(name) : children;
+    const gradient = name ? getGradientFromName(name) : "from-zinc-400 to-zinc-500";
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(avatarVariants({ size, variant }), className)
+      }, props), {
+        children: [
+          showImage ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            /* @__PURE__ */ jsx4(
+              "img",
+              {
+                src,
+                alt: (_a2 = alt != null ? alt : name) != null ? _a2 : "Avatar",
+                className: "h-full w-full object-cover",
+                onError: () => setImageError(true)
+              }
+            )
+          ) : /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(
+                "flex h-full w-full items-center justify-center bg-gradient-to-br font-semibold uppercase tracking-tight text-white",
+                gradient
+              ),
+              children: fallbackText != null ? fallbackText : "?"
+            }
+          ),
+          status && /* @__PURE__ */ jsx4(
+            "span",
+            {
+              className: cn(statusVariants({ status, size })),
+              "aria-hidden": true
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+function AvatarGroup(_a) {
+  var _b = _a, {
+    className,
+    max = 5,
+    size = "md",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "max",
+    "size",
+    "children"
+  ]);
+  const avatars = React4.Children.toArray(children).filter(React4.isValidElement);
+  const visible = avatars.slice(0, max);
+  const remaining = avatars.length - visible.length;
+  return /* @__PURE__ */ jsxs4("div", __spreadProps(__spreadValues({ className: cn("flex items-center", className) }, props), { children: [
+    visible.map((child, index) => /* @__PURE__ */ jsx4(
+      "div",
+      {
+        className: cn(
+          "relative transition-transform duration-200 hover:z-10 hover:scale-110",
+          index > 0 && "-ml-3"
+        ),
+        children: child
+      },
+      index
+    )),
+    remaining > 0 && /* @__PURE__ */ jsx4(
+      "span",
+      {
+        className: cn(
+          "-ml-3",
+          avatarVariants({ variant: "outline", size }),
+          "bg-zinc-100 text-zinc-600 ring-2 ring-white dark:bg-zinc-800 dark:text-zinc-200 dark:ring-zinc-950"
+        ),
+        children: /* @__PURE__ */ jsxs4("span", { className: "flex h-full w-full items-center justify-center text-[10px] font-semibold", children: [
+          "+",
+          remaining
+        ] })
+      }
+    )
+  ] }));
+}
+
+// components/ui/badge.tsx
+import * as React5 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var badgeVariants = cva2(
+  "inline-flex items-center gap-1 rounded-md font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200",
+        info: "bg-[#0070BA]/10 text-[#0070BA] dark:bg-[#0070BA]/20 dark:text-[#4DA3E0]",
+        success: "bg-[#28A745]/10 text-[#28A745] dark:bg-[#28A745]/20 dark:text-[#5CC975]",
+        warning: "bg-[#E58E00]/10 text-[#E58E00] dark:bg-[#E58E00]/20 dark:text-[#F5B84A]",
+        error: "bg-[#D93025]/10 text-[#D93025] dark:bg-[#D93025]/20 dark:text-[#F06B62]",
+        outline: "border border-zinc-200 bg-transparent text-zinc-700 dark:border-zinc-700 dark:text-zinc-300"
+      },
+      size: {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-0.5 text-[11px]",
+        lg: "px-2.5 py-1 text-xs"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Badge = React5.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
+    return /* @__PURE__ */ jsx5(
+      "span",
+      __spreadValues({
+        ref,
+        className: cn(badgeVariants({ variant, size }), className)
+      }, props)
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// components/ui/button.tsx
+import * as React6 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var buttonVariants = cva3(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-xl",
+    "text-sm font-medium tracking-tight",
+    "transition-[color,background-color,border-color,box-shadow,transform] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900/15 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+    "active:scale-[0.97] active:transition-[transform] active:duration-100",
+    "disabled:pointer-events-none disabled:opacity-40 disabled:shadow-none disabled:active:scale-100",
+    "dark:focus-visible:ring-white/20 dark:focus-visible:ring-offset-zinc-950",
+    "select-none"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-zinc-900 text-white",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.06),0_4px_12px_rgba(0,0,0,0.08)]",
+          "hover:bg-zinc-800 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_4px_rgba(0,0,0,0.06),0_8px_20px_rgba(0,0,0,0.12)]",
+          "dark:bg-zinc-100 dark:text-zinc-900",
+          "dark:shadow-[0_1px_2px_rgba(255,255,255,0.06),0_4px_16px_rgba(0,0,0,0.35)]",
+          "dark:hover:bg-white dark:hover:shadow-[0_2px_8px_rgba(0,0,0,0.25),0_8px_24px_rgba(0,0,0,0.2)]"
+        ],
+        white: [
+          "border border-zinc-200/80 bg-white text-zinc-900",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_rgba(0,0,0,0.06)]",
+          "hover:border-zinc-300 hover:bg-zinc-50 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_4px_rgba(0,0,0,0.04),0_8px_20px_rgba(0,0,0,0.1)]"
+        ],
+        outline: [
+          "border border-zinc-200 bg-white/70 text-zinc-700 backdrop-blur-sm",
+          "shadow-[0_1px_2px_rgba(0,0,0,0.03)]",
+          "hover:border-zinc-300 hover:bg-white hover:text-zinc-900 hover:-translate-y-0.5",
+          "hover:shadow-[0_2px_8px_rgba(0,0,0,0.06)]",
+          "dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-200 dark:shadow-none",
+          "dark:hover:border-zinc-500 dark:hover:bg-zinc-800/80 dark:hover:text-white"
+        ],
+        ghost: [
+          "text-zinc-600",
+          "hover:bg-zinc-100/90 hover:text-zinc-900",
+          "dark:text-zinc-400 dark:hover:bg-zinc-800/70 dark:hover:text-zinc-100"
+        ]
+      },
+      size: {
+        sm: "h-8 gap-1.5 rounded-lg px-3.5 text-xs",
+        md: "h-10 px-4",
+        lg: "h-11 px-5 text-[15px]"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = React6.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size } = _b, props = __objRest(_b, ["className", "variant", "size"]);
+    return /* @__PURE__ */ jsx6(
+      "button",
+      __spreadValues({
+        ref,
+        className: cn(buttonVariants({ variant, size }), className)
+      }, props)
+    );
+  }
+);
+Button.displayName = "Button";
+
+// components/ui/card.tsx
+import * as React7 from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var cardVariants = cva4(
+  "rounded-2xl border bg-white text-zinc-900 transition-all duration-200 dark:bg-zinc-900 dark:text-zinc-100",
+  {
+    variants: {
+      variant: {
+        default: "border-zinc-200/70 shadow-[0_2px_8px_rgba(0,0,0,0.06)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+        outline: "border-zinc-200 shadow-none dark:border-zinc-800",
+        elevated: "border-zinc-200 shadow-[0_8px_30px_rgba(0,0,0,0.08)] dark:border-zinc-800 dark:shadow-[0_8px_30px_rgba(0,0,0,0.35)]",
+        interactive: "cursor-pointer border-zinc-200/70 shadow-[0_2px_8px_rgba(0,0,0,0.06)] hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-[0_8px_24px_rgba(0,0,0,0.1)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)] dark:hover:border-zinc-700 dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Card = React7.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+    return /* @__PURE__ */ jsx7(
+      "div",
+      __spreadValues({
+        ref,
+        className: cn(cardVariants({ variant }), className)
+      }, props)
+    );
+  }
+);
+Card.displayName = "Card";
+var CardHeader = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex flex-col gap-1.5 p-6", className)
+    }, props)
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "h3",
+    __spreadValues({
+      ref,
+      className: cn("text-base font-semibold leading-none tracking-tight text-zinc-900 dark:text-white", className)
+    }, props)
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn("text-sm leading-relaxed text-zinc-500 dark:text-zinc-400", className)
+    }, props)
+  );
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7("div", __spreadValues({ ref, className: cn("px-6 pb-6 pt-0", className) }, props));
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React7.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "flex items-center gap-2 border-t border-zinc-100 bg-zinc-50/60 px-6 py-4 dark:border-zinc-800 dark:bg-zinc-800/30",
+        className
+      )
+    }, props)
+  );
+});
+CardFooter.displayName = "CardFooter";
+
+// components/ui/checkbox.tsx
+import * as React8 from "react";
+import { Check as Check2 } from "lucide-react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var checkboxControlVariants = cva5(
+  [
+    "pointer-events-none relative flex shrink-0 items-center justify-center rounded-[3px] border-2 bg-white transition-all duration-200",
+    "border-zinc-500 group-hover:border-zinc-700",
+    "peer-checked:border-zinc-900 peer-checked:bg-zinc-900",
+    "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-zinc-900/30 peer-focus-visible:ring-offset-2",
+    "peer-disabled:border-zinc-300 peer-disabled:bg-zinc-100",
+    "peer-disabled:peer-checked:border-zinc-300 peer-disabled:peer-checked:bg-zinc-300",
+    "dark:border-zinc-500 dark:bg-zinc-900 dark:group-hover:border-zinc-400",
+    "dark:peer-checked:border-zinc-100 dark:peer-checked:bg-zinc-100",
+    "dark:peer-disabled:border-zinc-700 dark:peer-disabled:bg-zinc-800",
+    "dark:peer-disabled:peer-checked:border-zinc-600 dark:peer-disabled:peer-checked:bg-zinc-600",
+    "peer-checked:[&_svg]:scale-100 peer-checked:[&_svg]:opacity-100"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 [&_svg]:h-2.5 [&_svg]:w-2.5",
+        md: "h-[18px] w-[18px] [&_svg]:h-3 [&_svg]:w-3",
+        lg: "h-5 w-5 [&_svg]:h-3.5 [&_svg]:w-3.5"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var checkboxWrapperVariants = cva5("group flex w-full transition-colors duration-150", {
+  variants: {
+    variant: {
+      inline: "gap-3",
+      card: [
+        "gap-3 rounded-lg border border-zinc-200 bg-white px-3.5 py-3",
+        "hover:border-zinc-300 hover:bg-zinc-50/80",
+        "has-[:checked]:border-zinc-900",
+        "dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-900/50",
+        "dark:has-[:checked]:border-zinc-500"
+      ]
+    }
+  },
+  defaultVariants: { variant: "inline" }
+});
+var Checkbox = React8.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      size,
+      variant = "inline",
+      label,
+      description,
+      disabled,
+      id
+    } = _b, props = __objRest(_b, [
+      "className",
+      "size",
+      "variant",
+      "label",
+      "description",
+      "disabled",
+      "id"
+    ]);
+    const generatedId = React8.useId();
+    const inputId = id != null ? id : generatedId;
+    const resolvedVariant = variant === "card" || description ? "card" : "inline";
+    const alignStart = resolvedVariant === "card" || Boolean(description);
+    return /* @__PURE__ */ jsxs5(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          checkboxWrapperVariants({ variant: resolvedVariant }),
+          alignStart ? "items-start" : "items-center",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs5(
+            "span",
+            {
+              className: cn(
+                "relative flex shrink-0 items-center justify-center p-2.5 -m-2.5",
+                alignStart ? "mt-0.5" : void 0
+              ),
+              children: [
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  __spreadValues({
+                    ref,
+                    id: inputId,
+                    type: "checkbox",
+                    disabled,
+                    className: "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+                  }, props)
+                ),
+                /* @__PURE__ */ jsx8(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 rounded-full bg-zinc-900/0 transition-colors duration-200 group-hover:bg-zinc-900/[0.08] group-active:bg-zinc-900/[0.12] peer-disabled:group-hover:bg-transparent dark:group-hover:bg-white/[0.08] dark:group-active:bg-white/[0.12]"
+                  }
+                ),
+                /* @__PURE__ */ jsx8("span", { className: checkboxControlVariants({ size }), children: /* @__PURE__ */ jsx8(
+                  Check2,
+                  {
+                    className: "text-white opacity-0 transition-all duration-200 dark:text-zinc-900",
+                    strokeWidth: 3
+                  }
+                ) })
+              ]
+            }
+          ),
+          (label || description) && /* @__PURE__ */ jsxs5("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+            label && /* @__PURE__ */ jsx8("span", { className: "text-sm leading-snug text-zinc-800 dark:text-zinc-100", children: label }),
+            description && /* @__PURE__ */ jsx8("span", { className: "text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: description })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// components/ui/code-block.tsx
+import { useState as useState4 } from "react";
+import { Check as Check3, Copy } from "lucide-react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function CodeBlock({
+  code,
+  filename,
+  className
+}) {
+  const [copied, setCopied] = useState4(false);
+  const onCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const copyButton = /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      onClick: onCopy,
+      "aria-label": "Copy code",
+      className: "flex h-7 w-7 items-center justify-center rounded-md text-zinc-500 transition-colors hover:bg-white/10 hover:text-zinc-200",
+      children: copied ? /* @__PURE__ */ jsx9(Check3, { className: "h-3.5 w-3.5 text-white" }) : /* @__PURE__ */ jsx9(Copy, { className: "h-3.5 w-3.5" })
+    }
+  );
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: cn(
+        "group relative overflow-x-auto rounded-xl bg-zinc-900 ring-1 ring-white/10",
+        className
+      ),
+      children: [
+        filename ? /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between border-b border-white/10 px-4 py-2.5", children: [
+          /* @__PURE__ */ jsx9("span", { className: "font-mono text-xs text-zinc-500", children: filename }),
+          copyButton
+        ] }) : null,
+        /* @__PURE__ */ jsx9("pre", { className: cn("max-w-full overflow-x-auto px-4 py-3.5 text-[13px] leading-relaxed text-zinc-100", !filename && "pr-12"), children: /* @__PURE__ */ jsx9("code", { className: "font-mono", children: code }) }),
+        filename ? null : /* @__PURE__ */ jsx9("div", { className: "absolute right-3 top-3", children: copyButton })
+      ]
+    }
+  );
+}
+
+// components/ui/data-table.tsx
+import { useMemo as useMemo2, useState as useState7 } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown as ArrowUpDown2, Filter as Filter2, Search as Search3, X as X3 } from "lucide-react";
+
+// components/ui/input.tsx
+import * as React9 from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var inputVariants = cva6(
+  "flex w-full rounded-xl border bg-white px-3.5 text-sm text-zinc-900 outline-none transition-all duration-150 placeholder:text-zinc-400 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-900 dark:text-zinc-100 dark:placeholder:text-zinc-500",
+  {
+    variants: {
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-10 text-sm",
+        lg: "h-11 text-base"
+      },
+      state: {
+        default: "border-zinc-200 hover:border-zinc-300 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10 dark:border-zinc-800 dark:hover:border-zinc-700 dark:focus:border-zinc-400 dark:focus:ring-zinc-400/15",
+        error: "border-red-400 focus:border-red-500 focus:ring-2 focus:ring-red-500/15 dark:border-red-500/60 dark:focus:border-red-400"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      state: "default"
+    }
+  }
+);
+var Input = React9.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, size, state, type = "text" } = _b, props = __objRest(_b, ["className", "size", "state", "type"]);
+    return /* @__PURE__ */ jsx10(
+      "input",
+      __spreadValues({
+        ref,
+        type,
+        className: cn(inputVariants({ size, state }), className)
+      }, props)
+    );
+  }
+);
+Input.displayName = "Input";
+
+// components/ui/pagination.tsx
+import * as React10 from "react";
+import { ChevronLeft, ChevronRight as ChevronRight2, MoreHorizontal } from "lucide-react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function getPageList(current, total, siblingCount) {
+  const totalSlots = siblingCount * 2 + 5;
+  if (total <= totalSlots) return Array.from({ length: total }, (_, i) => i + 1);
+  const left = Math.max(current - siblingCount, 1);
+  const right = Math.min(current + siblingCount, total);
+  const pages = [1];
+  if (left > 2) pages.push("...");
+  for (let p = Math.max(left, 2); p <= Math.min(right, total - 1); p++) pages.push(p);
+  if (right < total - 1) pages.push("...");
+  if (total > 1) pages.push(total);
+  return pages;
+}
+var navTransition = "transition-[color,background-color,border-color,box-shadow,transform,opacity,width] duration-200 ease-[cubic-bezier(0.16,1,0.3,1)]";
+var popIn = "animate-[pagination-pop_220ms_cubic-bezier(0.16,1,0.3,1)]";
+var focusRing = "focus-visible:ring-offset-white dark:focus-visible:ring-offset-zinc-900";
+var WIDTH_CLASSES = {
+  small: "w-max max-w-full",
+  half: "w-full min-w-0 sm:w-1/2 sm:min-w-max sm:max-w-full",
+  full: "w-full min-w-0"
+};
+var BUTTON_SIZE = 32;
+var GAP = 4;
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  variant = "default",
+  size = "small",
+  className
+}) {
+  const clampedTotal = Math.max(1, totalPages);
+  const current = Math.min(Math.max(page, 1), clampedTotal);
+  const goTo = (p) => onPageChange(Math.min(Math.max(p, 1), clampedTotal));
+  const pages = React10.useMemo(
+    () => getPageList(current, clampedTotal, siblingCount),
+    [current, clampedTotal, siblingCount]
+  );
+  const maxSlots = Math.min(clampedTotal, siblingCount * 2 + 5);
+  const trackMinWidth = maxSlots * BUTTON_SIZE + (maxSlots - 1) * GAP;
+  const trackRef = React10.useRef(null);
+  const prevRectsRef = React10.useRef(/* @__PURE__ */ new Map());
+  React10.useLayoutEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    const prevRects = prevRectsRef.current;
+    const nextRects = /* @__PURE__ */ new Map();
+    track.querySelectorAll("[data-flip-key]").forEach((el) => {
+      const key = el.dataset.flipKey;
+      const rect = el.getBoundingClientRect();
+      nextRects.set(key, rect);
+      const prev = prevRects.get(key);
+      if (!prev) return;
+      const dx = prev.left - rect.left;
+      if (Math.abs(dx) < 0.5) return;
+      el.style.transition = "none";
+      el.style.transform = `translateX(${dx}px)`;
+      el.getBoundingClientRect();
+      requestAnimationFrame(() => {
+        el.style.transition = "transform 220ms cubic-bezier(0.16,1,0.3,1)";
+        el.style.transform = "";
+      });
+    });
+    prevRectsRef.current = nextRects;
+  }, [pages]);
+  if (variant === "simple") {
+    return /* @__PURE__ */ jsxs7(
+      "nav",
+      {
+        "aria-label": "Pagination",
+        className: cn(
+          "flex items-center justify-between gap-2 overflow-x-auto rounded-full border border-zinc-200/70 bg-white p-1.5 shadow-[0_2px_8px_rgba(0,0,0,0.06)] transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] dark:border-zinc-800/80 dark:bg-zinc-900 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+          WIDTH_CLASSES[size],
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs7(Button, { variant: "ghost", size: "sm", className: cn("rounded-full", navTransition, focusRing), disabled: current <= 1, onClick: () => goTo(current - 1), children: [
+            /* @__PURE__ */ jsx11(ChevronLeft, { size: 15 }),
+            "Previous"
+          ] }),
+          /* @__PURE__ */ jsxs7("p", { className: "min-w-[6.5rem] text-center text-xs tabular-nums text-zinc-500 dark:text-zinc-400", children: [
+            "Page ",
+            current,
+            " of ",
+            clampedTotal
+          ] }),
+          /* @__PURE__ */ jsxs7(Button, { variant: "ghost", size: "sm", className: cn("rounded-full", navTransition, focusRing), disabled: current >= clampedTotal, onClick: () => goTo(current + 1), children: [
+            "Next",
+            /* @__PURE__ */ jsx11(ChevronRight2, { size: 15 })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs7(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: cn(
+        "flex items-center gap-1 overflow-x-auto rounded-full border border-zinc-200/70 bg-white p-1 shadow-[0_2px_8px_rgba(0,0,0,0.06)] transition-[width] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] dark:border-zinc-800/80 dark:bg-zinc-900 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)]",
+        WIDTH_CLASSES[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx11(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn("h-8 w-8 shrink-0 rounded-full p-0", navTransition, focusRing),
+            disabled: current <= 1,
+            onClick: () => goTo(current - 1),
+            "aria-label": "Previous page",
+            children: /* @__PURE__ */ jsx11(ChevronLeft, { size: 15 })
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            ref: trackRef,
+            className: "flex min-w-0 flex-1 items-center justify-center gap-1",
+            style: size === "small" ? { minWidth: trackMinWidth } : void 0,
+            children: pages.map(
+              (p, i) => p === "..." ? /* @__PURE__ */ jsx11(
+                "span",
+                {
+                  "data-flip-key": `e-${i}`,
+                  className: cn("flex h-8 w-8 shrink-0 items-center justify-center text-zinc-400", popIn),
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ jsx11(MoreHorizontal, { size: 15 })
+                },
+                `ellipsis-${i}`
+              ) : /* @__PURE__ */ jsx11(
+                "button",
+                {
+                  type: "button",
+                  "data-flip-key": `p-${p}`,
+                  onClick: () => goTo(p),
+                  "aria-current": current === p ? "page" : void 0,
+                  "aria-label": `Page ${p}`,
+                  className: cn(
+                    "h-8 w-8 shrink-0 cursor-pointer rounded-full text-sm font-medium tabular-nums outline-none",
+                    "focus-visible:ring-2 focus-visible:ring-zinc-900/15 focus-visible:ring-offset-2 dark:focus-visible:ring-white/20",
+                    "active:scale-90 active:transition-transform active:duration-100",
+                    navTransition,
+                    popIn,
+                    focusRing,
+                    current === p ? "bg-zinc-900 text-white shadow-[0_2px_6px_rgba(0,0,0,0.3)] dark:bg-white dark:text-zinc-900 dark:shadow-[0_2px_6px_rgba(0,0,0,0.5)]" : "text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
+                  ),
+                  children: p
+                },
+                p
+              )
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: cn("h-8 w-8 shrink-0 rounded-full p-0", navTransition, focusRing),
+            disabled: current >= clampedTotal,
+            onClick: () => goTo(current + 1),
+            "aria-label": "Next page",
+            children: /* @__PURE__ */ jsx11(ChevronRight2, { size: 15 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// components/ui/table.tsx
+import { useState as useState5 } from "react";
+import { ChevronDown as ChevronDown2, ChevronUp } from "lucide-react";
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function Table(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx12("table", __spreadProps(__spreadValues({ className: `w-full caption-bottom text-sm ${className}` }, props), { children })) });
+}
+function TableHeader(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("thead", __spreadProps(__spreadValues({ className: `border-b border-zinc-200 bg-zinc-50/50 dark:border-zinc-800 dark:bg-zinc-900/50 ${className}` }, props), { children }));
+}
+function TableBody(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("tbody", __spreadProps(__spreadValues({ className: `divide-y divide-zinc-200 dark:divide-zinc-800 ${className}` }, props), { children }));
+}
+function TableRow(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("tr", __spreadProps(__spreadValues({ className: `transition-colors hover:bg-zinc-50/50 dark:hover:bg-zinc-900/50 ${className}` }, props), { children }));
+}
+function TableHead(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("th", __spreadProps(__spreadValues({ className: `h-12 px-4 text-left align-middle font-semibold text-zinc-500 dark:text-zinc-400 uppercase text-[11px] tracking-wider ${className}` }, props), { children }));
+}
+function TableCell(_a) {
+  var _b = _a, { children, className = "" } = _b, props = __objRest(_b, ["children", "className"]);
+  return /* @__PURE__ */ jsx12("td", __spreadProps(__spreadValues({ className: `p-4 align-middle text-zinc-700 dark:text-zinc-300 ${className}` }, props), { children }));
+}
+function ExpandableRow({ title, details, children, colSpan = 10 }) {
+  const [isExpanded, setIsExpanded] = useState5(false);
+  return /* @__PURE__ */ jsxs8(Fragment, { children: [
+    /* @__PURE__ */ jsxs8(TableRow, { className: "cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ jsx12(TableCell, { className: "w-10 text-zinc-400", children: isExpanded ? /* @__PURE__ */ jsx12(ChevronUp, { size: 16 }) : /* @__PURE__ */ jsx12(ChevronDown2, { size: 16 }) }),
+      children
+    ] }),
+    isExpanded && /* @__PURE__ */ jsx12("tr", { className: "bg-zinc-50/30 dark:bg-zinc-900/30", children: /* @__PURE__ */ jsx12(TableCell, { colSpan, className: "p-6 border-l-2 border-zinc-900 dark:border-white", children: details }) })
+  ] });
+}
+
+// components/ui/dropdown.tsx
+import React12, { useState as useState6, useRef as useRef3, useEffect } from "react";
+import { Check as Check4 } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function Dropdown({ children }) {
+  const [isOpen, setIsOpen] = useState6(false);
+  const containerRef = useRef3(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx13("div", { className: "relative inline-block text-left", ref: containerRef, children: React12.Children.map(children, (child) => {
+    if (React12.isValidElement(child)) {
+      return React12.cloneElement(child, { isOpen, setIsOpen });
+    }
+    return child;
+  }) });
+}
+function DropdownTrigger({ children, isOpen, setIsOpen }) {
+  return React12.cloneElement(children, {
+    onClick: () => setIsOpen(!isOpen),
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    className: `${children.props.className} ${isOpen ? "ring-2 ring-zinc-200 dark:ring-zinc-800" : ""}`
+  });
+}
+function DropdownContent({ children, isOpen, className = "", align = "left" }) {
+  if (!isOpen) return null;
+  const alignClass = align === "right" ? "right-0" : "left-0";
+  return /* @__PURE__ */ jsx13("div", { role: "menu", className: `absolute ${alignClass} z-50 mt-2 w-56 origin-top-right rounded-lg border border-zinc-200 bg-white p-1 shadow-xl outline-none dark:border-zinc-800 dark:bg-zinc-950 ${className} animate-in fade-in zoom-in-95 duration-200`, children });
+}
+function DropdownItem({ label, icon: Icon, selected, onClick, className = "", variant = "default" }) {
+  const baseClass = "flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition-colors outline-none cursor-pointer";
+  const variantClass = variant === "destructive" ? "text-red-600 hover:bg-red-50 dark:hover:bg-red-950/30" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900";
+  return /* @__PURE__ */ jsxs9("button", { type: "button", role: "menuitem", className: `${baseClass} ${variantClass} ${className}`, onClick, children: [
+    Icon && /* @__PURE__ */ jsx13(Icon, { size: 16, className: "opacity-70" }),
+    /* @__PURE__ */ jsx13("span", { className: "flex-1", children: label }),
+    selected && /* @__PURE__ */ jsx13(Check4, { size: 14, className: "text-zinc-900 dark:text-white" })
+  ] });
+}
+function DropdownLabel({ children }) {
+  return /* @__PURE__ */ jsx13("div", { className: "px-3 py-2 text-[11px] font-bold uppercase tracking-wider text-zinc-400", children });
+}
+function DropdownDivider() {
+  return /* @__PURE__ */ jsx13("div", { role: "separator", className: "my-1 h-px bg-zinc-100 dark:bg-zinc-800" });
+}
+
+// components/ui/data-table.tsx
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  searchPlaceholder = "Search...",
+  pageSize = 5,
+  className
+}) {
+  const [search, setSearch] = useState7("");
+  const [sortKey, setSortKey] = useState7(null);
+  const [sortDir, setSortDir] = useState7(null);
+  const [activeFilters, setActiveFilters] = useState7({});
+  const [page, setPage] = useState7(1);
+  const getValue = (row, col) => col.accessor ? col.accessor(row) : row[col.key];
+  const filterableColumns = columns.filter((c) => {
+    var _a;
+    return (_a = c.filterOptions) == null ? void 0 : _a.length;
+  });
+  const activeFilterCount = Object.values(activeFilters).filter(Boolean).length;
+  const filtered = useMemo2(() => {
+    let rows = data;
+    if (search.trim()) {
+      const q = search.trim().toLowerCase();
+      rows = rows.filter((row) => columns.some((col) => {
+        var _a;
+        return String((_a = getValue(row, col)) != null ? _a : "").toLowerCase().includes(q);
+      }));
+    }
+    Object.entries(activeFilters).forEach(([key, value]) => {
+      if (!value) return;
+      const col = columns.find((c) => c.key === key);
+      if (!col) return;
+      rows = rows.filter((row) => String(getValue(row, col)) === value);
+    });
+    return rows;
+  }, [data, search, activeFilters]);
+  const sorted = useMemo2(() => {
+    if (!sortKey || !sortDir) return filtered;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col) return filtered;
+    return [...filtered].sort((a, b) => {
+      const av = getValue(a, col);
+      const bv = getValue(b, col);
+      if (typeof av === "number" && typeof bv === "number") return sortDir === "asc" ? av - bv : bv - av;
+      return sortDir === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+    });
+  }, [filtered, sortKey, sortDir]);
+  const totalPages = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const currentPage = Math.min(page, totalPages);
+  const paged = sorted.slice((currentPage - 1) * pageSize, currentPage * pageSize);
+  const handleSort = (col) => {
+    if (!col.sortable) return;
+    if (sortKey !== col.key) {
+      setSortKey(col.key);
+      setSortDir("asc");
+    } else if (sortDir === "asc") {
+      setSortDir("desc");
+    } else {
+      setSortKey(null);
+      setSortDir(null);
+    }
+    setPage(1);
+  };
+  const clearAll = () => {
+    setSearch("");
+    setActiveFilters({});
+    setPage(1);
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 pb-4 sm:flex-row sm:items-center sm:justify-between", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "relative w-full sm:max-w-xs", children: [
+        /* @__PURE__ */ jsx14(Search3, { size: 15, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" }),
+        /* @__PURE__ */ jsx14(
+          Input,
+          {
+            value: search,
+            onChange: (e) => {
+              setSearch(e.target.value);
+              setPage(1);
+            },
+            placeholder: searchPlaceholder,
+            className: "pl-9"
+          }
+        )
+      ] }),
+      (filterableColumns.length > 0 || activeFilterCount > 0) && /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2", children: [
+        filterableColumns.map((col) => /* @__PURE__ */ jsxs10(Dropdown, { children: [
+          /* @__PURE__ */ jsx14(DropdownTrigger, { children: /* @__PURE__ */ jsxs10(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: cn(activeFilters[col.key] && "border-zinc-900 text-zinc-900 dark:border-zinc-100 dark:text-white"),
+              children: [
+                /* @__PURE__ */ jsx14(Filter2, { size: 13 }),
+                activeFilters[col.key] || col.header
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs10(DropdownContent, { align: "right", children: [
+            /* @__PURE__ */ jsxs10(DropdownLabel, { children: [
+              "Filter by ",
+              col.header
+            ] }),
+            /* @__PURE__ */ jsx14(DropdownItem, { label: "All", selected: !activeFilters[col.key], onClick: () => setActiveFilters((f) => __spreadProps(__spreadValues({}, f), { [col.key]: "" })) }),
+            /* @__PURE__ */ jsx14(DropdownDivider, {}),
+            col.filterOptions.map((opt) => /* @__PURE__ */ jsx14(
+              DropdownItem,
+              {
+                label: opt,
+                selected: activeFilters[col.key] === opt,
+                onClick: () => {
+                  setActiveFilters((f) => __spreadProps(__spreadValues({}, f), { [col.key]: opt }));
+                  setPage(1);
+                }
+              },
+              opt
+            ))
+          ] })
+        ] }, col.key)),
+        (activeFilterCount > 0 || search) && /* @__PURE__ */ jsxs10(Button, { variant: "ghost", size: "sm", onClick: clearAll, children: [
+          /* @__PURE__ */ jsx14(X3, { size: 13 }),
+          "Clear"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx14("div", { className: "overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800", children: /* @__PURE__ */ jsxs10(Table, { children: [
+      /* @__PURE__ */ jsx14(TableHeader, { children: /* @__PURE__ */ jsx14(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx14(
+        TableHead,
+        {
+          onClick: () => handleSort(col),
+          className: cn(
+            col.align === "right" && "text-right",
+            col.align === "center" && "text-center",
+            col.sortable && "cursor-pointer select-none hover:text-zinc-700 dark:hover:text-zinc-200",
+            col.className
+          ),
+          children: /* @__PURE__ */ jsxs10(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1",
+                col.align === "right" && "flex-row-reverse",
+                col.align === "center" && "justify-center"
+              ),
+              children: [
+                col.header,
+                col.sortable && (sortKey === col.key ? sortDir === "asc" ? /* @__PURE__ */ jsx14(ArrowUp, { size: 12 }) : /* @__PURE__ */ jsx14(ArrowDown, { size: 12 }) : /* @__PURE__ */ jsx14(ArrowUpDown2, { size: 12, className: "opacity-30" }))
+              ]
+            }
+          )
+        },
+        col.key
+      )) }) }),
+      /* @__PURE__ */ jsx14(TableBody, { children: paged.length === 0 ? /* @__PURE__ */ jsx14(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx14(TableCell, { colSpan: columns.length, className: "py-10 text-center text-zinc-400", children: "No results found." }) }) : paged.map((row, i) => /* @__PURE__ */ jsx14(TableRow, { children: columns.map((col) => {
+        var _a;
+        return /* @__PURE__ */ jsx14(TableCell, { className: cn(col.align === "right" && "text-right", col.align === "center" && "text-center", col.className), children: col.render ? col.render(row) : String((_a = getValue(row, col)) != null ? _a : "") }, col.key);
+      }) }, i)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col-reverse items-center justify-between gap-3 pt-4 sm:flex-row", children: [
+      /* @__PURE__ */ jsx14("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: sorted.length === 0 ? "0 results" : `Showing ${(currentPage - 1) * pageSize + 1}\u2013${Math.min(currentPage * pageSize, sorted.length)} of ${sorted.length}` }),
+      /* @__PURE__ */ jsx14(Pagination, { page: currentPage, totalPages, onPageChange: setPage })
+    ] })
+  ] });
+}
+
+// components/ui/dialog.tsx
+import React14, { createContext as createContext2, useContext as useContext2, useState as useState8, useEffect as useEffect2 } from "react";
+import { createPortal } from "react-dom";
+import { User as User2, Plus as Plus2 } from "lucide-react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+var DialogContext = createContext2(null);
+function Dialog({ children, open, onOpenChange }) {
+  const [isOpenState, setIsOpenState] = useState8(false);
+  const isOpen = open !== void 0 ? open : isOpenState;
+  const setIsOpen = onOpenChange || setIsOpenState;
+  useEffect2(() => {
+    if (isOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "unset";
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+  return /* @__PURE__ */ jsx15(DialogContext.Provider, { value: { isOpen, setIsOpen }, children });
+}
+function DialogTrigger({ children }) {
+  const { setIsOpen } = useContext2(DialogContext);
+  return React14.cloneElement(children, {
+    onClick: (e) => {
+      var _a;
+      if ((_a = children.props) == null ? void 0 : _a.onClick) children.props.onClick(e);
+      setIsOpen(true);
+    }
+  });
+}
+function DialogContent({ children, className = "" }) {
+  const { isOpen, setIsOpen } = useContext2(DialogContext);
+  const [visible, setVisible] = useState8(false);
+  useEffect2(() => {
+    if (!isOpen) {
+      setVisible(false);
+      return;
+    }
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => cancelAnimationFrame(frame);
+  }, [isOpen]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, setIsOpen]);
+  if (!isOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsxs11("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: [
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          className: cn(
+            "fixed inset-0 bg-zinc-900/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out dark:bg-black/65",
+            visible ? "opacity-100" : "opacity-0"
+          ),
+          onClick: () => setIsOpen(false),
+          "aria-hidden": true
+        }
+      ),
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: cn(
+            "relative z-10 w-full max-w-md rounded-2xl border border-zinc-200/90 bg-white p-6 text-zinc-900",
+            "shadow-[0_20px_60px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.04)]",
+            "dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+            "dark:shadow-[0_20px_60px_rgba(0,0,0,0.5),0_0_0_1px_rgba(255,255,255,0.06)]",
+            "transition-[opacity,transform] duration-200 ease-out",
+            visible ? "translate-y-0 scale-100 opacity-100" : "translate-y-1 scale-[0.97] opacity-0",
+            className
+          ),
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+function DialogHeader({ title, description }) {
+  return /* @__PURE__ */ jsxs11("div", { className: "mb-5", children: [
+    title && /* @__PURE__ */ jsx15("h2", { className: "text-[17px] font-semibold leading-snug tracking-tight text-zinc-900 dark:text-white", children: title }),
+    description && /* @__PURE__ */ jsx15("p", { className: "mt-2 text-[14px] leading-relaxed text-zinc-500 dark:text-zinc-400", children: description })
+  ] });
+}
+function DialogFooter({ children }) {
+  return /* @__PURE__ */ jsx15("div", { className: "mt-6 flex items-center justify-end gap-1", children });
+}
+function DialogAction({ label, onClick, variant = "primary" }) {
+  const { setIsOpen } = useContext2(DialogContext);
+  const handleClick = () => {
+    if (onClick) onClick();
+    setIsOpen(false);
+  };
+  const colorClass = variant === "destructive" ? "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10" : "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800";
+  return /* @__PURE__ */ jsx15(
+    "button",
+    {
+      onClick: handleClick,
+      className: cn(
+        "rounded-lg px-3.5 py-2 text-[13px] font-semibold tracking-tight outline-none transition-colors duration-150",
+        "focus-visible:ring-2 focus-visible:ring-zinc-900/15 dark:focus-visible:ring-white/20",
+        colorClass
+      ),
+      children: label
+    }
+  );
+}
+function DialogItem({
+  label,
+  icon,
+  onClick,
+  variant = "account"
+}) {
+  const { setIsOpen } = useContext2(DialogContext);
+  const handleClick = () => {
+    if (onClick) onClick();
+    setIsOpen(false);
+  };
+  const iconBg = variant === "account" ? "bg-[#0070BA]/10 dark:bg-[#0070BA]/20" : "bg-zinc-100 dark:bg-zinc-800";
+  const iconColor = variant === "account" ? "text-[#0070BA] dark:text-[#4DA3E0]" : "text-zinc-500 dark:text-zinc-400";
+  return /* @__PURE__ */ jsxs11(
+    "button",
+    {
+      onClick: handleClick,
+      className: "flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left outline-none transition-colors duration-150 hover:bg-zinc-50 dark:hover:bg-zinc-900/60",
+      children: [
+        /* @__PURE__ */ jsx15("div", { className: cn("flex h-9 w-9 shrink-0 items-center justify-center rounded-full", iconBg, iconColor), children: icon || (variant === "account" ? /* @__PURE__ */ jsx15(User2, { size: 18 }) : /* @__PURE__ */ jsx15(Plus2, { size: 18 })) }),
+        /* @__PURE__ */ jsx15("span", { className: "text-[14px] font-medium text-zinc-900 dark:text-white", children: label })
+      ]
+    }
+  );
+}
+
+// components/ui/feature-card.tsx
+import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  variant = "plain"
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn(
+        variant === "bordered" && "rounded-xl border border-zinc-200 p-5 dark:border-zinc-800"
+      ),
+      children: [
+        /* @__PURE__ */ jsx16(
+          "div",
+          {
+            className: cn(
+              "mb-4 flex h-11 w-11 items-center justify-center rounded-2xl border",
+              variant === "bordered" ? "border-zinc-200 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/[0.06] dark:text-zinc-100" : "border-zinc-800 bg-zinc-900 text-white dark:border-zinc-200 dark:bg-white dark:text-zinc-900"
+            ),
+            children: /* @__PURE__ */ jsx16(Icon, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx16("h3", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-50", children: title }),
+        /* @__PURE__ */ jsx16("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: description })
+      ]
+    }
+  );
+}
+
+// components/ui/label.tsx
+import * as React15 from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var labelVariants = cva7(
+  "inline-flex items-center gap-1 font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "text-zinc-800 dark:text-zinc-100",
+        muted: "text-zinc-500 dark:text-zinc-400"
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-[15px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Label = React15.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, size, required, optional, hint, error, children } = _b, props = __objRest(_b, ["className", "variant", "size", "required", "optional", "hint", "error", "children"]);
+    return /* @__PURE__ */ jsxs13("div", { className: "flex w-full flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs13(
+          "label",
+          __spreadProps(__spreadValues({
+            ref,
+            className: cn(labelVariants({ variant, size }), className)
+          }, props), {
+            children: [
+              children,
+              required && /* @__PURE__ */ jsx17("span", { className: "text-red-500", "aria-label": "required", children: "*" })
+            ]
+          })
+        ),
+        optional && /* @__PURE__ */ jsx17("span", { className: "text-xs text-zinc-400 dark:text-zinc-500", children: "Optional" })
+      ] }),
+      hint && !error && /* @__PURE__ */ jsx17("p", { className: "text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: hint }),
+      error && /* @__PURE__ */ jsx17("p", { className: "text-xs leading-relaxed text-red-500 dark:text-red-400", role: "alert", children: error })
+    ] });
+  }
+);
+Label.displayName = "Label";
+function Field(_a) {
+  var _b = _a, {
+    className,
+    label,
+    htmlFor,
+    required,
+    optional,
+    hint,
+    error,
+    labelSize = "md",
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "label",
+    "htmlFor",
+    "required",
+    "optional",
+    "hint",
+    "error",
+    "labelSize",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs13("div", __spreadProps(__spreadValues({ className: cn("flex w-full flex-col gap-2", className) }, props), { children: [
+    /* @__PURE__ */ jsx17(
+      Label,
+      {
+        htmlFor,
+        required,
+        optional,
+        hint,
+        error,
+        size: labelSize,
+        children: label
+      }
+    ),
+    children
+  ] }));
+}
+
+// components/ui/loaders.tsx
+import { Sparkles } from "lucide-react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var LoaderStyles = () => /* @__PURE__ */ jsx18("style", { dangerouslySetInnerHTML: { __html: `
+    @keyframes shimmer { 100% { transform: translateX(100%); } }
+    @keyframes progressLoad { 0% { transform: scaleX(0); } 50% { transform: scaleX(0.5); } 100% { transform: scaleX(1); } }
+    @keyframes morphShape { 0%, 100% { border-radius: 8px; transform: rotate(0deg); } 50% { border-radius: 50%; transform: rotate(180deg); } }
+    @keyframes blurReveal { 0% { filter: blur(10px); opacity: 0; transform: translateY(10px); } 100% { filter: blur(0); opacity: 1; transform: translateY(0); } }
+    @keyframes spinDots { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
+    @keyframes squareMove { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.4; } }
+    @keyframes loadBarMove { 0% { left: -100%; } 100% { left: 100%; } }
+  ` } });
+var SkeletonShimmer = ({ className }) => /* @__PURE__ */ jsxs14("div", { className: cn("relative overflow-hidden rounded-md bg-zinc-100 dark:bg-zinc-800", className), children: [
+  /* @__PURE__ */ jsx18(LoaderStyles, {}),
+  /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/40 to-transparent dark:via-white/5", style: { animation: "shimmer 2s infinite" } })
+] });
+var ProgressRing = () => /* @__PURE__ */ jsxs14("svg", { className: "h-10 w-10 animate-spin text-zinc-900 dark:text-white", viewBox: "0 0 32 32", children: [
+  /* @__PURE__ */ jsx18("circle", { className: "opacity-10", cx: "16", cy: "16", r: "14", stroke: "currentColor", strokeWidth: "3", fill: "none" }),
+  /* @__PURE__ */ jsx18("path", { className: "opacity-100", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", d: "M16 2 A14 14 0 0 1 30 16" })
+] });
+var SpinnerGradient = () => /* @__PURE__ */ jsx18("div", { className: "h-10 w-10 rounded-full border-4 border-zinc-100 dark:border-zinc-800 border-t-zinc-900 dark:border-t-white animate-spin" });
+var SpinnerDots = () => /* @__PURE__ */ jsx18("div", { className: "relative h-10 w-10", children: [...Array(8)].map((_, i) => /* @__PURE__ */ jsx18("div", { className: "absolute top-0 left-0 w-full h-full", style: { transform: `rotate(${i * 45}deg)` }, children: /* @__PURE__ */ jsx18("div", { className: "h-2 w-2 rounded-full bg-zinc-900 dark:bg-white", style: { animation: "spinDots 1s linear infinite", animationDelay: `${i * 0.12}s` } }) }, i)) });
+var HalfCircles = () => /* @__PURE__ */ jsx18("div", { className: "relative h-10 w-10 border-4 border-transparent border-t-zinc-900 dark:border-t-white rounded-full animate-spin", children: /* @__PURE__ */ jsx18("div", { className: "absolute inset-0 border-4 border-transparent border-b-zinc-400 rounded-full opacity-50" }) });
+var SquaresLoader = () => /* @__PURE__ */ jsxs14("div", { className: "flex gap-1.5", children: [
+  /* @__PURE__ */ jsx18("div", { className: "h-4 w-4 bg-zinc-900 dark:bg-white", style: { animation: "squareMove 1s ease-in-out infinite" } }),
+  /* @__PURE__ */ jsx18("div", { className: "h-4 w-4 bg-zinc-300 dark:bg-zinc-700", style: { animation: "squareMove 1s ease-in-out infinite", animationDelay: "0.2s" } })
+] });
+var LoadBar = () => /* @__PURE__ */ jsx18("div", { className: "relative h-4 w-12 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800", children: /* @__PURE__ */ jsx18("div", { className: "absolute top-0 h-full w-6 rounded-full bg-zinc-900 dark:bg-white", style: { animation: "loadBarMove 1.5s linear infinite" } }) });
+var PulseLoader = () => /* @__PURE__ */ jsxs14("div", { className: "relative h-10 w-10 flex items-center justify-center", children: [
+  /* @__PURE__ */ jsx18("div", { className: "absolute h-full w-full animate-ping rounded-full bg-zinc-900/20 dark:bg-white/20" }),
+  /* @__PURE__ */ jsx18("div", { className: "h-4 w-4 rounded-full bg-zinc-900 dark:bg-white" })
+] });
+var DotWave = () => /* @__PURE__ */ jsx18("div", { className: "flex gap-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx18("div", { className: "h-2 w-2 animate-bounce rounded-full bg-zinc-900 dark:bg-white", style: { animationDelay: `${i * 0.15}s` } }, i)) });
+var ThreeDots = () => /* @__PURE__ */ jsx18("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx18("div", { className: "h-1.5 w-1.5 rounded-full bg-zinc-400 animate-pulse", style: { animationDelay: `${i * 0.2}s` } }, i)) });
+var TypingIndicator = () => /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1.5 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-2xl w-fit", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx18("div", { className: "h-1.5 w-1.5 animate-pulse rounded-full bg-zinc-400", style: { animationDelay: `${i * 0.2}s` } }, i)) });
+var ProgressBar = () => /* @__PURE__ */ jsxs14("div", { className: "h-1.5 w-full max-w-[200px] overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800", children: [
+  /* @__PURE__ */ jsx18(LoaderStyles, {}),
+  /* @__PURE__ */ jsx18("div", { className: "h-full w-full origin-left bg-zinc-900 dark:bg-white", style: { animation: "progressLoad 1.5s ease-in-out infinite" } })
+] });
+var MorphingLoader = () => /* @__PURE__ */ jsx18("div", { className: "h-10 w-10 bg-zinc-900 dark:bg-white", style: { animation: "morphShape 3s linear infinite" } });
+var OrbitLoader = () => /* @__PURE__ */ jsxs14("div", { className: "relative flex h-12 w-12 items-center justify-center", children: [
+  /* @__PURE__ */ jsx18("div", { className: "h-2 w-2 rounded-full bg-zinc-900 dark:bg-white" }),
+  /* @__PURE__ */ jsx18("div", { className: "absolute h-full w-full animate-spin", children: /* @__PURE__ */ jsx18("div", { className: "h-2 w-2 rounded-full bg-zinc-400" }) })
+] });
+var BlurReveal = ({ children }) => /* @__PURE__ */ jsx18("div", { style: { animation: "blurReveal 1s ease-out forwards" }, children });
+var AILoader = ({ text = "Thinking..." }) => /* @__PURE__ */ jsxs14("div", { className: "flex flex-col items-center gap-4", children: [
+  /* @__PURE__ */ jsxs14("div", { className: "relative flex h-12 w-12 items-center justify-center", children: [
+    /* @__PURE__ */ jsx18("div", { className: "absolute h-full w-full animate-spin rounded-full border-2 border-zinc-200 border-t-zinc-900 dark:border-zinc-800 dark:border-t-white" }),
+    /* @__PURE__ */ jsx18(Sparkles, { className: "h-5 w-5 animate-pulse text-zinc-900 dark:text-white" })
+  ] }),
+  /* @__PURE__ */ jsx18("span", { className: "text-[10px] font-bold uppercase tracking-widest text-zinc-400 animate-pulse", children: text })
+] });
+
+// components/ui/menu.tsx
+import * as React16 from "react";
+import { Check as Check5 } from "lucide-react";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var menuVariants = cva8(
+  "w-56 rounded-lg p-1 outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border border-zinc-200 bg-white shadow-xl dark:border-zinc-800 dark:bg-zinc-950",
+        ghost: "bg-transparent"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var Menu = React16.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant } = _b, props = __objRest(_b, ["className", "variant"]);
+    return /* @__PURE__ */ jsx19(
+      "div",
+      __spreadValues({
+        ref,
+        role: "menu",
+        className: cn(menuVariants({ variant }), className)
+      }, props)
+    );
+  }
+);
+Menu.displayName = "Menu";
+var menuItemVariants = cva8(
+  [
+    "flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-left text-sm outline-none transition-colors",
+    "focus-visible:bg-zinc-100 dark:focus-visible:bg-zinc-900",
+    "disabled:pointer-events-none disabled:opacity-40"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900",
+        destructive: "text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/30"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var MenuItem = React16.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, variant, label, icon: Icon, shortcut, selected, disabled } = _b, props = __objRest(_b, ["className", "variant", "label", "icon", "shortcut", "selected", "disabled"]);
+    return /* @__PURE__ */ jsxs15(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        type: "button",
+        role: "menuitem",
+        disabled,
+        className: cn(menuItemVariants({ variant }), className)
+      }, props), {
+        children: [
+          Icon && /* @__PURE__ */ jsx19(Icon, { className: "h-4 w-4 shrink-0 opacity-70" }),
+          /* @__PURE__ */ jsx19("span", { className: "flex-1 truncate", children: label }),
+          shortcut && /* @__PURE__ */ jsx19("span", { className: "shrink-0 text-xs tracking-wide text-zinc-400 dark:text-zinc-500", children: shortcut }),
+          selected && /* @__PURE__ */ jsx19(Check5, { className: "h-3.5 w-3.5 shrink-0 text-zinc-900 dark:text-white" })
+        ]
+      })
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+var MenuLabel = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "px-3 py-2 text-[11px] font-bold uppercase tracking-wider text-zinc-400 dark:text-zinc-500",
+        className
+      )
+    }, props)
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+var MenuDivider = React16.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx19(
+    "div",
+    __spreadValues({
+      ref,
+      role: "separator",
+      className: cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)
+    }, props)
+  );
+});
+MenuDivider.displayName = "MenuDivider";
+
+// components/ui/modal.tsx
+import * as React17 from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { cva as cva9 } from "class-variance-authority";
+import { X as X4 } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+var modalContentVariants = cva9(
+  [
+    "relative z-10 flex w-full flex-col overflow-hidden rounded-2xl",
+    "border border-zinc-200/90 bg-white text-zinc-900",
+    "shadow-[0_20px_60px_rgba(0,0,0,0.12),0_0_0_1px_rgba(0,0,0,0.04)]",
+    "dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100",
+    "dark:shadow-[0_20px_60px_rgba(0,0,0,0.45),0_0_0_1px_rgba(255,255,255,0.06)]",
+    "transition-[opacity,transform] duration-200 ease-out"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-w-[400px]",
+        md: "max-w-[440px]",
+        lg: "max-w-lg",
+        xl: "max-w-xl"
+      },
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-[0.97]"
+      }
+    },
+    defaultVariants: { size: "md", visible: false }
+  }
+);
+var overlayVariants = cva9(
+  [
+    "absolute inset-0 bg-zinc-900/45",
+    "transition-opacity duration-200 ease-out",
+    "dark:bg-black/65"
+  ],
+  {
+    variants: {
+      visible: {
+        true: "opacity-100",
+        false: "opacity-0"
+      }
+    },
+    defaultVariants: { visible: false }
+  }
+);
+var ModalContext = React17.createContext(null);
+var ModalContentContext = React17.createContext(null);
+function useModalContext() {
+  const context = React17.useContext(ModalContext);
+  if (!context) {
+    throw new Error("Modal components must be used within Modal");
+  }
+  return context;
+}
+function useModalContentContext() {
+  const context = React17.useContext(ModalContentContext);
+  if (!context) {
+    throw new Error("Modal subcomponents must be used within ModalContent");
+  }
+  return context;
+}
+function Modal({
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React17.useState(defaultOpen);
+  const open = controlledOpen != null ? controlledOpen : uncontrolledOpen;
+  const handleOpenChange = React17.useCallback(
+    (next) => {
+      if (controlledOpen === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx20(ModalContext.Provider, { value: { open, onOpenChange: handleOpenChange }, children });
+}
+function ModalTrigger(_a) {
+  var _b = _a, { asChild, children, onClick } = _b, props = __objRest(_b, ["asChild", "children", "onClick"]);
+  const { onOpenChange } = useModalContext();
+  const handleOpen = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (!event.defaultPrevented) {
+      onOpenChange(true);
+    }
+  };
+  if (asChild && React17.isValidElement(children)) {
+    const child = children;
+    return React17.cloneElement(child, {
+      onClick: (event) => {
+        var _a2, _b2;
+        (_b2 = (_a2 = child.props).onClick) == null ? void 0 : _b2.call(_a2, event);
+        if (!event.defaultPrevented) {
+          onOpenChange(true);
+        }
+      }
+    });
+  }
+  return /* @__PURE__ */ jsx20("button", __spreadProps(__spreadValues({ type: "button", onClick: handleOpen }, props), { children }));
+}
+function ModalContent(_a) {
+  var _b = _a, {
+    className,
+    size,
+    showCloseButton = true,
+    onClose,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "size",
+    "showCloseButton",
+    "onClose",
+    "children"
+  ]);
+  const { open, onOpenChange } = useModalContext();
+  const [mounted, setMounted] = React17.useState(false);
+  const [visible, setVisible] = React17.useState(false);
+  const contentRef = React17.useRef(null);
+  const titleId = React17.useId();
+  const descriptionId = React17.useId();
+  React17.useEffect(() => setMounted(true), []);
+  React17.useEffect(() => {
+    if (!open) {
+      setVisible(false);
+      document.body.style.overflow = "";
+      return;
+    }
+    document.body.style.overflow = "hidden";
+    const frame = requestAnimationFrame(() => setVisible(true));
+    return () => {
+      cancelAnimationFrame(frame);
+      document.body.style.overflow = "";
+    };
+  }, [open]);
+  const close = React17.useCallback(() => {
+    onClose == null ? void 0 : onClose();
+    onOpenChange(false);
+  }, [onClose, onOpenChange]);
+  React17.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") close();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [open, close]);
+  React17.useEffect(() => {
+    if (!open || !contentRef.current) return;
+    const focusable = contentRef.current.querySelector(
+      "button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])"
+    );
+    focusable == null ? void 0 : focusable.focus();
+  }, [open, visible]);
+  if (!mounted || !open) return null;
+  const node = /* @__PURE__ */ jsxs16("div", { className: "fixed inset-0 z-[100] isolate flex items-center justify-center p-4 sm:p-6", children: [
+    /* @__PURE__ */ jsx20(
+      "div",
+      {
+        className: overlayVariants({ visible }),
+        onClick: close,
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ jsxs16(
+      "div",
+      __spreadProps(__spreadValues({
+        ref: contentRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        className: cn(modalContentVariants({ size, visible }), className),
+        onClick: (e) => e.stopPropagation()
+      }, props), {
+        children: [
+          showCloseButton && /* @__PURE__ */ jsx20(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              className: "absolute right-4 top-4 z-10 inline-flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx20(X4, { className: "h-4 w-4", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsx20(ModalContentContext.Provider, { value: { titleId, descriptionId, close }, children })
+        ]
+      })
+    )
+  ] });
+  return createPortal2(node, document.body);
+}
+function ModalHeader(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    __spreadValues({
+      className: cn("space-y-1 px-6 pt-6 pr-12", className)
+    }, props)
+  );
+}
+function ModalTitle(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  const { titleId } = useModalContentContext();
+  return /* @__PURE__ */ jsx20(
+    "h2",
+    __spreadValues({
+      id: titleId,
+      className: cn(
+        "text-[15px] font-semibold leading-snug tracking-tight text-zinc-900 dark:text-white",
+        className
+      )
+    }, props)
+  );
+}
+function ModalDescription(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  const { descriptionId } = useModalContentContext();
+  return /* @__PURE__ */ jsx20(
+    "p",
+    __spreadValues({
+      id: descriptionId,
+      className: cn(
+        "text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400",
+        className
+      )
+    }, props)
+  );
+}
+function ModalBody(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    __spreadValues({
+      className: cn("space-y-4 px-6 pt-5 pb-6", className)
+    }, props)
+  );
+}
+function ModalFooter(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx20(
+    "div",
+    __spreadValues({
+      className: cn(
+        "flex items-center justify-end gap-2 border-t border-zinc-200/90 px-6 py-4 dark:border-zinc-800",
+        className
+      )
+    }, props)
+  );
+}
+function ModalOption(_a) {
+  var _b = _a, {
+    className,
+    icon,
+    title,
+    description
+  } = _b, props = __objRest(_b, [
+    "className",
+    "icon",
+    "title",
+    "description"
+  ]);
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    __spreadProps(__spreadValues({
+      className: cn(
+        "flex gap-3 rounded-xl border border-zinc-200 bg-zinc-50/70 p-3.5",
+        "dark:border-zinc-800 dark:bg-zinc-900/60",
+        className
+      )
+    }, props), {
+      children: [
+        icon && /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-white text-zinc-500 shadow-sm ring-1 ring-zinc-200/80 dark:bg-zinc-950 dark:text-zinc-400 dark:ring-zinc-700",
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs16("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx20("p", { className: "text-sm font-medium text-zinc-900 dark:text-white", children: title }),
+          description && /* @__PURE__ */ jsx20("p", { className: "mt-0.5 text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: description })
+        ] })
+      ]
+    })
+  );
+}
+function ModalClose(_a) {
+  var _b = _a, { asChild, children, onClick } = _b, props = __objRest(_b, ["asChild", "children", "onClick"]);
+  const { close } = useModalContentContext();
+  if (asChild && React17.isValidElement(children)) {
+    return React17.cloneElement(
+      children,
+      {
+        onClick: (event) => {
+          var _a2, _b2;
+          (_b2 = (_a2 = children.props).onClick) == null ? void 0 : _b2.call(
+            _a2,
+            event
+          );
+          close();
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx20(
+    "button",
+    __spreadProps(__spreadValues({
+      type: "button",
+      onClick: (e) => {
+        onClick == null ? void 0 : onClick(e);
+        close();
+      }
+    }, props), {
+      children
+    })
+  );
+}
+
 // components/ui/progress.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var progressTrackVariants = cva(
+import * as React18 from "react";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+var progressTrackVariants = cva10(
   "relative w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800/70",
   {
     variants: {
@@ -55,7 +2265,7 @@ var progressTrackVariants = cva(
     defaultVariants: { size: "md" }
   }
 );
-var progressIndicatorVariants = cva(
+var progressIndicatorVariants = cva10(
   "h-full rounded-full transition-[width] duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]",
   {
     variants: {
@@ -69,7 +2279,7 @@ var progressIndicatorVariants = cva(
     defaultVariants: { variant: "default" }
   }
 );
-var valuePillVariants = cva(
+var valuePillVariants = cva10(
   "inline-flex min-w-[2.25rem] items-center justify-end text-[11px] font-medium tabular-nums text-zinc-400 dark:text-zinc-500",
   {
     variants: {
@@ -83,7 +2293,7 @@ var valuePillVariants = cva(
     defaultVariants: { variant: "default" }
   }
 );
-var Progress = React.forwardRef(
+var Progress = React18.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -108,7 +2318,7 @@ var Progress = React.forwardRef(
     ]);
     const clamped = Math.min(max, Math.max(0, value));
     const percentage = max > 0 ? Math.round(clamped / max * 100) : 0;
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         className: cn(
@@ -117,14 +2327,14 @@ var Progress = React.forwardRef(
           className
         ),
         children: [
-          (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            label && /* @__PURE__ */ jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-300", children: label }),
-            showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: cn(valuePillVariants({ variant })), children: [
+          (label || showValue) && /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between gap-3", children: [
+            label && /* @__PURE__ */ jsx21("span", { className: "text-sm text-zinc-600 dark:text-zinc-300", children: label }),
+            showValue && !indeterminate && /* @__PURE__ */ jsxs17("span", { className: cn(valuePillVariants({ variant })), children: [
               percentage,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx21(
             "div",
             __spreadProps(__spreadValues({
               ref,
@@ -137,7 +2347,7 @@ var Progress = React.forwardRef(
               "aria-disabled": disabled || void 0,
               className: cn(progressTrackVariants({ size }))
             }, props), {
-              children: indeterminate ? /* @__PURE__ */ jsx(
+              children: indeterminate ? /* @__PURE__ */ jsx21(
                 "div",
                 {
                   className: cn(
@@ -145,7 +2355,7 @@ var Progress = React.forwardRef(
                     "w-[40%] animate-[progress-indeterminate_1.5s_ease-in-out_infinite]"
                   )
                 }
-              ) : /* @__PURE__ */ jsx(
+              ) : /* @__PURE__ */ jsx21(
                 "div",
                 {
                   className: cn(progressIndicatorVariants({ variant })),
@@ -161,11 +2371,526 @@ var Progress = React.forwardRef(
 );
 Progress.displayName = "Progress";
 
+// components/ui/radio.tsx
+import * as React19 from "react";
+import { cva as cva11 } from "class-variance-authority";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+var radioControlVariants = cva11(
+  [
+    "pointer-events-none relative flex shrink-0 items-center justify-center rounded-full border-2 bg-transparent transition-all duration-200",
+    "border-zinc-500 group-hover:border-zinc-700",
+    "peer-checked:border-zinc-900",
+    "peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-zinc-900/30 peer-focus-visible:ring-offset-2",
+    "peer-disabled:border-zinc-300",
+    "peer-disabled:peer-checked:border-zinc-300",
+    "dark:border-zinc-500 dark:group-hover:border-zinc-400",
+    "dark:peer-checked:border-zinc-100",
+    "dark:peer-disabled:border-zinc-600 dark:peer-disabled:peer-checked:border-zinc-600",
+    "peer-checked:[&_.radio-dot]:scale-100 peer-checked:[&_.radio-dot]:opacity-100",
+    "peer-disabled:peer-checked:[&_.radio-dot]:bg-zinc-300",
+    "dark:peer-disabled:peer-checked:[&_.radio-dot]:bg-zinc-600"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 [&_.radio-dot]:h-1.5 [&_.radio-dot]:w-1.5",
+        md: "h-5 w-5 [&_.radio-dot]:h-2.5 [&_.radio-dot]:w-2.5",
+        lg: "h-6 w-6 [&_.radio-dot]:h-3 [&_.radio-dot]:w-3"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var radioWrapperVariants = cva11("group relative flex w-full transition-colors duration-150", {
+  variants: {
+    variant: {
+      inline: "gap-3",
+      card: [
+        "gap-3.5 rounded-lg border border-zinc-200 bg-white px-4 py-3.5",
+        "hover:border-zinc-300 hover:bg-zinc-50/80",
+        "has-[:checked]:border-zinc-900",
+        "dark:border-zinc-800 dark:bg-zinc-900 dark:hover:border-zinc-700",
+        "dark:has-[:checked]:border-zinc-500"
+      ]
+    }
+  },
+  defaultVariants: { variant: "inline" }
+});
+var RadioGroupContext = React19.createContext(
+  null
+);
+var RadioGroup = React19.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      name,
+      value: controlledValue,
+      defaultValue,
+      onValueChange,
+      size = "md",
+      variant = "inline",
+      appearance = "default",
+      disabled,
+      orientation = "vertical",
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "name",
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "size",
+      "variant",
+      "appearance",
+      "disabled",
+      "orientation",
+      "children"
+    ]);
+    const [uncontrolledValue, setUncontrolledValue] = React19.useState(
+      defaultValue != null ? defaultValue : ""
+    );
+    const value = controlledValue != null ? controlledValue : uncontrolledValue;
+    const handleValueChange = (next) => {
+      if (controlledValue === void 0) {
+        setUncontrolledValue(next);
+      }
+      onValueChange == null ? void 0 : onValueChange(next);
+    };
+    return /* @__PURE__ */ jsx22(
+      RadioGroupContext.Provider,
+      {
+        value: { name, value, onValueChange: handleValueChange, size, variant, appearance, disabled },
+        children: /* @__PURE__ */ jsx22(
+          "div",
+          __spreadProps(__spreadValues({
+            ref,
+            role: "radiogroup",
+            className: cn(
+              "flex",
+              appearance === "segmented" ? "inline-flex w-fit gap-0.5 rounded-lg border border-zinc-200 p-0.5 dark:border-zinc-800" : variant === "card" ? "gap-2.5" : "gap-2.5",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+              className
+            )
+          }, props), {
+            children
+          })
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var Radio = React19.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      size: sizeProp,
+      variant: variantProp,
+      value,
+      label,
+      description,
+      disabled: disabledProp,
+      id,
+      onChange,
+      checked: checkedProp
+    } = _b, inputProps = __objRest(_b, [
+      "className",
+      "size",
+      "variant",
+      "value",
+      "label",
+      "description",
+      "disabled",
+      "id",
+      "onChange",
+      "checked"
+    ]);
+    var _a2, _b2, _c;
+    const context = React19.useContext(RadioGroupContext);
+    const generatedId = React19.useId();
+    const inputId = id != null ? id : generatedId;
+    const size = (_a2 = sizeProp != null ? sizeProp : context == null ? void 0 : context.size) != null ? _a2 : "md";
+    const groupVariant = (_b2 = variantProp != null ? variantProp : context == null ? void 0 : context.variant) != null ? _b2 : "inline";
+    const appearance = (_c = context == null ? void 0 : context.appearance) != null ? _c : "default";
+    const resolvedVariant = appearance === "segmented" ? "inline" : groupVariant === "card" || description ? "card" : "inline";
+    const disabled = disabledProp != null ? disabledProp : context == null ? void 0 : context.disabled;
+    const isControlled = context !== null || checkedProp !== void 0;
+    const checked = context ? context.value === value : checkedProp;
+    const alignStart = resolvedVariant === "card" || Boolean(description);
+    const input = /* @__PURE__ */ jsx22(
+      "input",
+      __spreadProps(__spreadValues({}, inputProps), {
+        ref,
+        id: inputId,
+        type: "radio",
+        name: context == null ? void 0 : context.name,
+        value,
+        disabled,
+        checked: isControlled ? checked : void 0,
+        defaultChecked: !isControlled ? checkedProp : void 0,
+        onChange: (event) => {
+          var _a3;
+          onChange == null ? void 0 : onChange(event);
+          if (event.target.checked) {
+            (_a3 = context == null ? void 0 : context.onValueChange) == null ? void 0 : _a3.call(context, value);
+          }
+        },
+        className: "peer absolute inset-0 z-10 cursor-pointer opacity-0 disabled:cursor-not-allowed"
+      })
+    );
+    return /* @__PURE__ */ jsxs18(
+      "label",
+      {
+        htmlFor: inputId,
+        className: cn(
+          appearance === "segmented" ? "relative inline-flex items-center rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600 transition-colors duration-150 has-[:checked]:bg-zinc-900 has-[:checked]:text-white dark:text-zinc-400 dark:has-[:checked]:bg-zinc-100 dark:has-[:checked]:text-zinc-900" : radioWrapperVariants({ variant: resolvedVariant }),
+          appearance === "segmented" ? "items-center" : alignStart ? "items-start" : "items-center",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className
+        ),
+        children: [
+          appearance === "segmented" ? input : /* @__PURE__ */ jsxs18(
+            "span",
+            {
+              className: cn(
+                "relative flex shrink-0 items-center justify-center p-2.5 -m-2.5",
+                alignStart ? "-mt-[3px]" : void 0
+              ),
+              children: [
+                input,
+                /* @__PURE__ */ jsx22(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "pointer-events-none absolute inset-0 rounded-full bg-zinc-900/0 transition-colors duration-200 group-hover:bg-zinc-900/[0.08] group-active:bg-zinc-900/[0.12] peer-disabled:group-hover:bg-transparent dark:group-hover:bg-white/[0.08] dark:group-active:bg-white/[0.12]"
+                  }
+                ),
+                /* @__PURE__ */ jsx22("span", { className: radioControlVariants({ size }), children: /* @__PURE__ */ jsx22("span", { className: "radio-dot scale-0 rounded-full bg-zinc-900 opacity-0 transition-all duration-200 dark:bg-zinc-100" }) })
+              ]
+            }
+          ),
+          (label || description) && /* @__PURE__ */ jsxs18(
+            "span",
+            {
+              className: cn(
+                "flex min-w-0 flex-col",
+                appearance === "segmented" ? "gap-0" : "flex-1 gap-0.5"
+              ),
+              children: [
+                label && /* @__PURE__ */ jsx22(
+                  "span",
+                  {
+                    className: cn(
+                      appearance === "segmented" ? "leading-none" : cn(
+                        "text-sm leading-snug text-zinc-800 dark:text-zinc-100",
+                        size === "sm" && "text-xs",
+                        size === "md" && "text-sm",
+                        size === "lg" && "text-base"
+                      )
+                    ),
+                    children: label
+                  }
+                ),
+                description && /* @__PURE__ */ jsx22("span", { className: "text-xs leading-relaxed text-zinc-500 dark:text-zinc-400", children: description })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+
+// components/ui/skeleton.tsx
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+var SkeletonBar = ({ className }) => /* @__PURE__ */ jsx23("div", { className: `animate-pulse rounded bg-zinc-200 dark:bg-zinc-800 ${className}` });
+function AccordionSkeletonPlus({ count = 3 }) {
+  return /* @__PURE__ */ jsx23("div", { className: "w-full", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 py-4 border-b border-zinc-100 dark:border-zinc-800 last:border-0", children: [
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-5 w-5 rounded-full shrink-0" }),
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-2/3" })
+  ] }, i)) });
+}
+function AccordionSkeletonChevron({ count = 3 }) {
+  return /* @__PURE__ */ jsx23("div", { className: "w-full", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between py-5 border-b border-zinc-100 dark:border-zinc-800 last:border-0", children: [
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-1/2" }),
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-4 rounded-sm shrink-0" })
+  ] }, i)) });
+}
+function CardSkeletonGrid({ count = 3 }) {
+  return /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "aspect-video w-full rounded-md" }),
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-full" }),
+    /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-[60%]" })
+  ] }, i)) });
+}
+function ListSkeleton({ count = 3 }) {
+  return /* @__PURE__ */ jsx23("div", { className: "w-full space-y-4", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 p-4 border border-zinc-100 dark:border-zinc-800 rounded-lg bg-white dark:bg-zinc-900/50", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-10 w-10 rounded-full shrink-0" }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-3 w-24" }),
+        /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-3 w-40" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2 mt-1", children: [
+      /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-3 w-full" }),
+      /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-3 w-[92%]" })
+    ] })
+  ] }, i)) });
+}
+function TableSkeleton({ count = 5 }) {
+  return /* @__PURE__ */ jsx23("div", { className: "w-full overflow-hidden rounded-lg border border-zinc-100 dark:border-zinc-800", children: /* @__PURE__ */ jsx23("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs19("table", { className: "w-full text-sm text-left", children: [
+    /* @__PURE__ */ jsx23("thead", { className: "bg-zinc-50/50 dark:bg-zinc-900/50 border-b border-zinc-100 dark:border-zinc-800 text-zinc-500", children: /* @__PURE__ */ jsxs19("tr", { children: [
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Id" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Image" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Name" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Category" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Price" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Stock" }),
+      /* @__PURE__ */ jsx23("th", { className: "px-4 py-3 font-medium", children: "Description" })
+    ] }) }),
+    /* @__PURE__ */ jsx23("tbody", { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxs19("tr", { children: [
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-8" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-8 w-12 rounded" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-24" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-20" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-12" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-12" }) }),
+      /* @__PURE__ */ jsx23("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx23(SkeletonBar, { className: "h-4 w-48" }) })
+    ] }, i)) })
+  ] }) }) });
+}
+
+// components/ui/steppers.tsx
+import React20 from "react";
+import { motion } from "framer-motion";
+import { Check as Check6 } from "lucide-react";
+import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+function getTone(i, currentStep) {
+  if (i < currentStep) return "done";
+  if (i === currentStep) return "current";
+  return "upcoming";
+}
+var NODE_TONE = {
+  done: "border-zinc-900 bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 dark:border-white",
+  current: "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900",
+  upcoming: "border-zinc-200 bg-white text-zinc-400 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-600"
+};
+var TEXT_TONE = {
+  done: "text-zinc-900 dark:text-zinc-100",
+  current: "text-zinc-900 dark:text-white",
+  upcoming: "text-zinc-400 dark:text-zinc-600"
+};
+function HorizontalStepper({ steps, currentStep, className }) {
+  return /* @__PURE__ */ jsx24("nav", { "aria-label": "Progress", className: cn("flex w-full items-start pb-8", className), children: steps.map((step, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsxs20(React20.Fragment, { children: [
+      /* @__PURE__ */ jsxs20("div", { className: "relative flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx24(
+          "div",
+          {
+            "aria-current": tone === "current" ? "step" : void 0,
+            className: cn(
+              "z-10 flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-bold shadow-sm transition-all duration-300",
+              NODE_TONE[tone]
+            ),
+            children: tone === "done" ? /* @__PURE__ */ jsx24(Check6, { size: 18, strokeWidth: 3 }) : /* @__PURE__ */ jsx24("span", { children: i + 1 })
+          }
+        ),
+        /* @__PURE__ */ jsx24("div", { className: "absolute top-12 w-24 text-center", children: /* @__PURE__ */ jsx24("span", { className: cn("text-[10px] font-black uppercase tracking-tighter transition-colors duration-300", TEXT_TONE[tone]), children: step.title }) })
+      ] }),
+      i < steps.length - 1 && /* @__PURE__ */ jsx24("div", { className: "relative mx-2 mt-5 h-0.5 flex-1 shrink-0 rounded-full bg-zinc-100 dark:bg-zinc-800", children: /* @__PURE__ */ jsx24(
+        motion.div,
+        {
+          initial: false,
+          animate: { width: i < currentStep ? "100%" : "0%" },
+          className: "absolute h-full rounded-full bg-zinc-900 dark:bg-white",
+          transition: { duration: 0.5, ease: "easeInOut" }
+        }
+      ) })
+    ] }, i);
+  }) });
+}
+function VerticalStepper({ steps, currentStep, className }) {
+  return /* @__PURE__ */ jsx24("nav", { "aria-label": "Progress", className: cn("space-y-0", className), children: steps.map((step, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsxs20("div", { className: "relative pl-10 pb-10 last:pb-0", children: [
+      i < steps.length - 1 && /* @__PURE__ */ jsx24("div", { className: "absolute left-[15px] top-8 bottom-0 w-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800", children: /* @__PURE__ */ jsx24(
+        motion.div,
+        {
+          initial: false,
+          animate: { height: i < currentStep ? "100%" : "0%" },
+          className: "w-full rounded-full bg-zinc-900 dark:bg-white",
+          transition: { duration: 0.4 }
+        }
+      ) }),
+      /* @__PURE__ */ jsx24(
+        motion.div,
+        {
+          "aria-current": tone === "current" ? "step" : void 0,
+          animate: { scale: tone === "current" ? 1.15 : 1 },
+          className: cn(
+            "absolute left-0 top-0 z-10 flex h-8 w-8 items-center justify-center rounded-full border-2 transition-all duration-300",
+            tone === "done" || tone === "current" ? "border-zinc-900 bg-zinc-900 dark:border-white dark:bg-white" : "border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950"
+          ),
+          children: tone === "done" ? /* @__PURE__ */ jsx24(Check6, { size: 14, strokeWidth: 3, className: "text-white dark:text-zinc-900" }) : /* @__PURE__ */ jsx24("div", { className: cn("h-1.5 w-1.5 rounded-full", tone === "current" ? "bg-white dark:bg-zinc-900" : "bg-zinc-300 dark:bg-zinc-700") })
+        }
+      ),
+      /* @__PURE__ */ jsxs20("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx24("h6", { className: cn("text-sm font-bold tracking-tight transition-colors duration-300", TEXT_TONE[tone]), children: step.title }),
+        /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs leading-tight text-zinc-500 dark:text-zinc-400", children: step.description })
+      ] })
+    ] }, i);
+  }) });
+}
+function ProgressStepper({ steps, currentStep }) {
+  const progress = (currentStep + 1) / steps.length * 100;
+  return /* @__PURE__ */ jsxs20("div", { className: "w-full space-y-4", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-end justify-between", children: [
+      /* @__PURE__ */ jsx24("div", { className: "flex items-baseline gap-2", children: /* @__PURE__ */ jsxs20("span", { className: "text-lg font-black tracking-tighter text-zinc-900 dark:text-white", children: [
+        Math.round(progress),
+        "%"
+      ] }) }),
+      /* @__PURE__ */ jsx24("div", { className: "flex gap-1", children: steps.map((_, i) => /* @__PURE__ */ jsx24(
+        motion.div,
+        {
+          animate: { opacity: i <= currentStep ? 1 : 0.2 },
+          className: "h-1 w-4 rounded-full bg-zinc-900 dark:bg-white"
+        },
+        i
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx24("div", { className: "h-3 w-full overflow-hidden rounded-full bg-zinc-100 p-1 dark:bg-zinc-800", children: /* @__PURE__ */ jsx24(
+      motion.div,
+      {
+        initial: false,
+        animate: { width: `${progress}%` },
+        className: "h-full rounded-full bg-zinc-900 dark:bg-white",
+        transition: { type: "spring", bounce: 0, duration: 0.8 }
+      }
+    ) })
+  ] });
+}
+function DotStepper({ steps, currentStep }) {
+  return /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-3 rounded-full border border-zinc-200 bg-white p-4 dark:border-zinc-800 dark:bg-zinc-950", children: steps.map((_, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsx24(
+      motion.div,
+      {
+        animate: { width: tone === "current" ? 40 : 12 },
+        className: cn(
+          "h-3 rounded-full transition-colors duration-300",
+          tone === "done" || tone === "current" ? "bg-zinc-900 dark:bg-white" : "bg-zinc-200 dark:bg-zinc-800"
+        ),
+        transition: { type: "spring", stiffness: 300, damping: 20 }
+      },
+      i
+    );
+  }) });
+}
+function SegmentedStepper({ steps, currentStep }) {
+  return /* @__PURE__ */ jsx24("div", { className: "flex w-full gap-1", children: steps.map((_, i) => /* @__PURE__ */ jsx24("div", { className: "h-2 flex-1 overflow-hidden rounded-sm bg-zinc-100 dark:bg-zinc-800", children: /* @__PURE__ */ jsx24(
+    motion.div,
+    {
+      initial: false,
+      animate: { x: i <= currentStep ? "0%" : "-100%" },
+      className: "h-full bg-zinc-900 dark:bg-white",
+      transition: { duration: 0.6 }
+    }
+  ) }, i)) });
+}
+function BreadcrumbStepper({ steps, currentStep }) {
+  return /* @__PURE__ */ jsx24("nav", { "aria-label": "Progress", className: "w-full", children: /* @__PURE__ */ jsx24("div", { className: "flex w-full items-center gap-2", children: steps.map((step, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsxs20(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 items-center gap-2",
+        children: [
+          /* @__PURE__ */ jsx24(
+            motion.div,
+            {
+              animate: {
+                opacity: tone === "upcoming" ? 0.45 : 1,
+                scale: tone === "current" ? 1 : 0.98
+              },
+              transition: { duration: 0.25 },
+              className: cn(
+                "flex min-w-0 flex-1 items-center justify-center rounded-full px-2 py-2 text-[9px] font-bold uppercase tracking-wide transition-all duration-300",
+                tone === "current" && "bg-zinc-900 text-white shadow-sm dark:bg-white dark:text-zinc-900",
+                tone === "done" && "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white",
+                tone === "upcoming" && "text-zinc-400 dark:text-zinc-600"
+              ),
+              children: /* @__PURE__ */ jsx24("span", { className: "whitespace-nowrap", children: step.title })
+            }
+          ),
+          i < steps.length - 1 && /* @__PURE__ */ jsx24(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "h-px w-4 shrink-0 bg-zinc-200 dark:bg-zinc-800"
+            }
+          )
+        ]
+      },
+      i
+    );
+  }) }) });
+}
+function TimelineStepper({ steps, currentStep }) {
+  return /* @__PURE__ */ jsx24("nav", { "aria-label": "Progress", className: "space-y-12", children: steps.map((step, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsxs20("div", { className: "relative flex gap-8", children: [
+      i < steps.length - 1 && /* @__PURE__ */ jsx24("div", { className: cn("absolute left-5 top-10 -bottom-12 w-0.5 transition-colors duration-1000", i < currentStep ? "bg-zinc-900 dark:bg-white" : "bg-zinc-100 dark:bg-zinc-800") }),
+      /* @__PURE__ */ jsx24(
+        motion.div,
+        {
+          animate: { scale: tone === "current" ? 1.2 : 1 },
+          className: cn(
+            "z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-4 border-white shadow-xl ring-2 transition-all duration-300 dark:border-zinc-950",
+            tone === "done" || tone === "current" ? "bg-zinc-900 ring-zinc-900 dark:bg-white dark:ring-white" : "bg-white ring-zinc-200 dark:bg-zinc-950 dark:ring-zinc-800"
+          ),
+          children: tone === "done" ? /* @__PURE__ */ jsx24(Check6, { size: 16, strokeWidth: 3, className: "text-white dark:text-zinc-900" }) : /* @__PURE__ */ jsx24("span", { className: cn("text-xs font-bold", tone === "current" ? "text-white dark:text-zinc-900" : "text-zinc-400"), children: i + 1 })
+        }
+      ),
+      /* @__PURE__ */ jsxs20("div", { className: cn("transition-all duration-500", tone === "upcoming" ? "translate-x-4 opacity-20" : "translate-x-0 opacity-100"), children: [
+        /* @__PURE__ */ jsx24("h3", { className: "text-sm font-black uppercase tracking-tighter text-zinc-900 dark:text-white", children: step.title }),
+        /* @__PURE__ */ jsx24("p", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: step.description })
+      ] })
+    ] }, i);
+  }) });
+}
+function InteractiveStepper({ steps, currentStep, onStepClick }) {
+  return /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-4", children: steps.map((step, i) => {
+    const tone = getTone(i, currentStep);
+    return /* @__PURE__ */ jsxs20(
+      "button",
+      {
+        onClick: () => onStepClick == null ? void 0 : onStepClick(i),
+        className: cn(
+          "group relative flex min-w-44 flex-1 flex-col gap-2 rounded-2xl border-2 p-6 text-left transition-all duration-300",
+          tone === "current" ? "border-zinc-900 bg-zinc-900 text-white dark:border-white dark:bg-white dark:text-zinc-900" : "border-zinc-100 hover:border-zinc-900 dark:border-zinc-800 dark:hover:border-white"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs20("span", { className: cn("text-[10px] font-bold uppercase tracking-widest", tone === "current" ? "text-zinc-400" : "text-zinc-400 group-hover:text-zinc-900 dark:group-hover:text-zinc-200"), children: [
+            "Phase 0",
+            i + 1
+          ] }),
+          /* @__PURE__ */ jsx24("span", { className: "text-sm font-black", children: step.title }),
+          tone === "done" && /* @__PURE__ */ jsx24(motion.div, { layoutId: "inter-check", className: "absolute -right-2 -top-2 rounded-full bg-zinc-900 p-1 text-white shadow-lg dark:bg-white dark:text-zinc-900", children: /* @__PURE__ */ jsx24(Check6, { size: 14, strokeWidth: 3 }) })
+        ]
+      },
+      i
+    );
+  }) });
+}
+
 // components/ui/switch.tsx
-import * as React2 from "react";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var switchTrackVariants = cva2(
+import * as React21 from "react";
+import { cva as cva12 } from "class-variance-authority";
+import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+var switchTrackVariants = cva12(
   [
     "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors duration-200",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900/20 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
@@ -187,7 +2912,7 @@ var switchTrackVariants = cva2(
     defaultVariants: { size: "md" }
   }
 );
-var switchThumbVariants = cva2(
+var switchThumbVariants = cva12(
   "pointer-events-none absolute left-0.5 top-1/2 block -translate-y-1/2 rounded-full bg-white shadow-sm transition-transform duration-200 dark:bg-zinc-950",
   {
     variants: {
@@ -200,7 +2925,7 @@ var switchThumbVariants = cva2(
     defaultVariants: { size: "md" }
   }
 );
-var Switch = React2.forwardRef(
+var Switch = React21.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       className,
@@ -225,10 +2950,10 @@ var Switch = React2.forwardRef(
       "id",
       "onClick"
     ]);
-    const generatedId = React2.useId();
+    const generatedId = React21.useId();
     const switchId = id != null ? id : generatedId;
     const isControlled = checked !== void 0;
-    const [uncontrolledChecked, setUncontrolledChecked] = React2.useState(defaultChecked);
+    const [uncontrolledChecked, setUncontrolledChecked] = React21.useState(defaultChecked);
     const isChecked = isControlled ? checked : uncontrolledChecked;
     const state = isChecked ? "checked" : "unchecked";
     const toggle = () => {
@@ -237,7 +2962,7 @@ var Switch = React2.forwardRef(
       if (!isControlled) setUncontrolledChecked(next);
       onCheckedChange == null ? void 0 : onCheckedChange(next);
     };
-    const switchControl = /* @__PURE__ */ jsx2(
+    const switchControl = /* @__PURE__ */ jsx25(
       "button",
       __spreadProps(__spreadValues({
         ref,
@@ -261,13 +2986,13 @@ var Switch = React2.forwardRef(
           }
         }
       }, props), {
-        children: /* @__PURE__ */ jsx2("span", { "data-state": state, className: switchThumbVariants({ size }) })
+        children: /* @__PURE__ */ jsx25("span", { "data-state": state, className: switchThumbVariants({ size }) })
       })
     );
     if (!label && !description) {
       return switchControl;
     }
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs21(
       "div",
       {
         className: cn(
@@ -275,8 +3000,8 @@ var Switch = React2.forwardRef(
           disabled && "opacity-60"
         ),
         children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-            label && /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            label && /* @__PURE__ */ jsx25(
               "label",
               {
                 id: `${switchId}-label`,
@@ -288,7 +3013,7 @@ var Switch = React2.forwardRef(
                 children: label
               }
             ),
-            description && /* @__PURE__ */ jsx2(
+            description && /* @__PURE__ */ jsx25(
               "p",
               {
                 id: `${switchId}-description`,
@@ -305,12 +3030,141 @@ var Switch = React2.forwardRef(
 );
 Switch.displayName = "Switch";
 
+// components/ui/tabs.tsx
+import React22, { createContext as createContext5, useContext as useContext5, useState as useState12 } from "react";
+import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+var TabsContext = createContext5(null);
+function useTabs() {
+  const context = useContext5(TabsContext);
+  if (!context) return { activeTab: "", setActiveTab: () => {
+  }, variant: "", uid: "" };
+  return context;
+}
+function Tabs({
+  children,
+  defaultValue,
+  variant = "underline",
+  className
+}) {
+  const [activeTab, setActiveTab] = useState12(defaultValue);
+  const uid = React22.useId();
+  return /* @__PURE__ */ jsx26(TabsContext.Provider, { value: { activeTab, setActiveTab, variant, uid }, children: /* @__PURE__ */ jsx26("div", { className: cn(variant === "vertical" ? "flex gap-8" : "flex flex-col gap-4", className), children }) });
+}
+function TabsList({ children, className }) {
+  const { variant } = useTabs();
+  const variantStyles = {
+    underline: "flex min-w-0 gap-4 overflow-x-auto border-b border-zinc-200 dark:border-zinc-800 sm:gap-8 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+    pill: "flex min-w-0 flex-wrap gap-2",
+    segmented: "inline-flex max-w-full flex-wrap p-1 bg-zinc-100 dark:bg-zinc-900 rounded-xl gap-1",
+    bordered: "flex min-w-0 flex-wrap gap-3",
+    filled: "flex min-w-0 flex-wrap gap-1 bg-zinc-50 dark:bg-zinc-900/50 p-1.5 rounded-lg",
+    icon: "flex min-w-0 flex-wrap gap-6 sm:gap-10",
+    vertical: "flex flex-col border-l border-zinc-100 dark:border-zinc-800",
+    floating: "inline-flex max-w-full flex-wrap bg-white dark:bg-zinc-950 shadow-xl border border-zinc-100 dark:border-zinc-800 p-2 rounded-2xl gap-2",
+    scrollable: "flex min-w-0 gap-6 overflow-x-auto pb-2 docs-scrollbar whitespace-nowrap",
+    card: "flex min-w-0 gap-1 overflow-x-auto border-b border-zinc-100 dark:border-zinc-800 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+  };
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      role: "tablist",
+      "aria-orientation": variant === "vertical" ? "vertical" : "horizontal",
+      className: cn(variantStyles[variant], className),
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  label,
+  icon: Icon,
+  badge,
+  className
+}) {
+  const { activeTab, setActiveTab, variant, uid } = useTabs();
+  const isActive = activeTab === value;
+  const triggerStyles = {
+    underline: cn(
+      "relative pb-3 text-sm font-medium transition-all",
+      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100"
+    ),
+    pill: cn(
+      "px-4 py-2 rounded-full text-sm font-semibold transition-all",
+      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900 shadow-lg" : "bg-white dark:bg-zinc-900 text-zinc-600 border border-zinc-100 dark:border-zinc-800 hover:bg-zinc-50"
+    ),
+    segmented: cn(
+      "px-6 py-1.5 rounded-lg text-xs font-bold transition-all",
+      isActive ? "bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-sm" : "text-zinc-500 hover:text-zinc-700"
+    ),
+    bordered: cn(
+      "px-4 py-2 rounded-lg border-2 text-sm font-bold transition-all",
+      isActive ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-white" : "border-transparent text-zinc-400 hover:border-zinc-200"
+    ),
+    filled: cn(
+      "px-4 py-2 rounded-md text-sm font-medium transition-all",
+      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900" : "text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
+    ),
+    card: cn(
+      "relative shrink-0 px-4 py-2.5 text-sm font-medium transition-all",
+      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200"
+    ),
+    icon: cn(
+      "flex flex-col items-center gap-1.5 transition-all",
+      isActive ? "text-zinc-900 dark:text-white" : "text-zinc-400 hover:text-zinc-700"
+    ),
+    vertical: cn(
+      "pl-6 pr-12 py-2 text-sm font-medium border-l-2 -ml-[2px] transition-all",
+      isActive ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-white bg-zinc-50 dark:bg-zinc-900" : "border-transparent text-zinc-500 hover:text-zinc-800"
+    ),
+    floating: cn(
+      "px-4 py-2 rounded-xl text-sm font-medium transition-all",
+      isActive ? "bg-zinc-900 text-white dark:bg-white dark:text-zinc-900" : "text-zinc-500 hover:bg-zinc-50"
+    )
+  };
+  return /* @__PURE__ */ jsxs22(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      id: `${uid}-tab-${value}`,
+      "aria-selected": isActive,
+      "aria-controls": `${uid}-panel-${value}`,
+      tabIndex: isActive ? 0 : -1,
+      onClick: () => setActiveTab(value),
+      className: cn("shrink-0 outline-none", triggerStyles[variant] || triggerStyles["underline"], className),
+      children: [
+        /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+          Icon && /* @__PURE__ */ jsx26(Icon, { size: variant === "icon" ? 20 : 16 }),
+          /* @__PURE__ */ jsx26("span", { children: label }),
+          badge && /* @__PURE__ */ jsx26("span", { className: cn("flex h-4 w-4 items-center justify-center rounded-full text-[10px] text-white", isActive ? "bg-zinc-800 dark:bg-zinc-700" : "bg-red-500"), children: badge })
+        ] }),
+        variant === "underline" && isActive && /* @__PURE__ */ jsx26("div", { className: "absolute bottom-0 left-0 h-[2.5px] w-full bg-zinc-900 dark:bg-white rounded-full animate-in fade-in" })
+      ]
+    }
+  );
+}
+function TabsContent({ value, children, className }) {
+  const { activeTab, uid } = useTabs();
+  if (activeTab !== value) return null;
+  return /* @__PURE__ */ jsx26(
+    "div",
+    {
+      role: "tabpanel",
+      id: `${uid}-panel-${value}`,
+      "aria-labelledby": `${uid}-tab-${value}`,
+      tabIndex: 0,
+      className: cn("outline-none animate-in fade-in slide-in-from-bottom-2 duration-300", className),
+      children
+    }
+  );
+}
+
 // components/ui/tooltip.tsx
-import * as React3 from "react";
-import { createPortal } from "react-dom";
-import { cva as cva3 } from "class-variance-authority";
-import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var tooltipVariants = cva3(
+import * as React23 from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { cva as cva13 } from "class-variance-authority";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs23 } from "react/jsx-runtime";
+var tooltipVariants = cva13(
   [
     "pointer-events-none fixed z-50 max-w-[260px] rounded-lg px-3 py-2",
     "text-[13px] font-medium leading-normal tracking-tight",
@@ -380,7 +3234,7 @@ function TooltipArrow({ side }) {
     left: "right-0 top-1/2 -translate-y-1/2 translate-x-[calc(100%-1px)] -rotate-90",
     right: "left-0 top-1/2 -translate-y-1/2 -translate-x-[calc(100%-1px)] rotate-90"
   }[side];
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx27(
     "svg",
     {
       "aria-hidden": true,
@@ -391,7 +3245,7 @@ function TooltipArrow({ side }) {
         "absolute text-zinc-900 dark:text-zinc-100",
         position
       ),
-      children: /* @__PURE__ */ jsx3("path", { fill: "currentColor", d: "M0 0h10L5 5 0 0z" })
+      children: /* @__PURE__ */ jsx27("path", { fill: "currentColor", d: "M0 0h10L5 5 0 0z" })
     }
   );
 }
@@ -405,22 +3259,22 @@ function Tooltip({
   disabled = false,
   className
 }) {
-  const [open, setOpen] = React3.useState(false);
-  const [visible, setVisible] = React3.useState(false);
-  const [mounted, setMounted] = React3.useState(false);
-  const [position, setPosition] = React3.useState({ top: -9999, left: -9999 });
-  const timeoutRef = React3.useRef(null);
-  const triggerRef = React3.useRef(null);
-  const tooltipRef = React3.useRef(null);
-  const id = React3.useId();
-  React3.useEffect(() => setMounted(true), []);
+  const [open, setOpen] = React23.useState(false);
+  const [visible, setVisible] = React23.useState(false);
+  const [mounted, setMounted] = React23.useState(false);
+  const [position, setPosition] = React23.useState({ top: -9999, left: -9999 });
+  const timeoutRef = React23.useRef(null);
+  const triggerRef = React23.useRef(null);
+  const tooltipRef = React23.useRef(null);
+  const id = React23.useId();
+  React23.useEffect(() => setMounted(true), []);
   const clearTimer = () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
   };
-  const updatePosition = React3.useCallback(() => {
+  const updatePosition = React23.useCallback(() => {
     const trigger2 = triggerRef.current;
     const tooltip = tooltipRef.current;
     if (!trigger2 || !tooltip) return;
@@ -442,8 +3296,8 @@ function Tooltip({
     setVisible(false);
     setOpen(false);
   };
-  React3.useEffect(() => clearTimer, []);
-  React3.useLayoutEffect(() => {
+  React23.useEffect(() => clearTimer, []);
+  React23.useLayoutEffect(() => {
     if (!open) return;
     updatePosition();
     const handleUpdate = () => updatePosition();
@@ -454,12 +3308,12 @@ function Tooltip({
       window.removeEventListener("resize", handleUpdate);
     };
   }, [open, updatePosition, content]);
-  const child = React3.Children.only(children);
-  const trigger = React3.isValidElement(child) ? React3.cloneElement(
+  const child = React23.Children.only(children);
+  const trigger = React23.isValidElement(child) ? React23.cloneElement(
     child,
     { "aria-describedby": open && visible ? id : void 0 }
   ) : children;
-  const tooltipNode = open ? /* @__PURE__ */ jsxs3(
+  const tooltipNode = open ? /* @__PURE__ */ jsxs23(
     "div",
     {
       ref: tooltipRef,
@@ -470,12 +3324,12 @@ function Tooltip({
       className: cn(tooltipVariants({ visible, side }), className),
       children: [
         content,
-        /* @__PURE__ */ jsx3(TooltipArrow, { side })
+        /* @__PURE__ */ jsx27(TooltipArrow, { side })
       ]
     }
   ) : null;
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs23(Fragment2, { children: [
+    /* @__PURE__ */ jsx27(
       "span",
       {
         ref: triggerRef,
@@ -487,12 +3341,127 @@ function Tooltip({
         children: trigger
       }
     ),
-    mounted && tooltipNode ? createPortal(tooltipNode, document.body) : null
+    mounted && tooltipNode ? createPortal3(tooltipNode, document.body) : null
   ] });
 }
 export {
+  AILoader,
+  Accordion,
+  AccordionItem,
+  AccordionLink,
+  AccordionNested,
+  AccordionSkeletonChevron,
+  AccordionSkeletonPlus,
+  Alert,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  BlurReveal,
+  BreadcrumbStepper,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardSkeletonGrid,
+  CardTitle,
+  Checkbox,
+  CodeBlock,
+  DataTable,
+  Dialog,
+  DialogAction,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogItem,
+  DialogTrigger,
+  DotStepper,
+  DotWave,
+  Dropdown,
+  DropdownContent,
+  DropdownDivider,
+  DropdownItem,
+  DropdownLabel,
+  DropdownTrigger,
+  ExpandableRow,
+  FeatureCard,
+  Field,
+  HalfCircles,
+  HorizontalStepper,
+  Input,
+  InputAddon,
+  InputAutocomplete,
+  InputFilled,
+  InputFloating,
+  InputIcon,
+  InputOTP,
+  InputPassword,
+  InputSearch,
+  InputStandard,
+  InputUnderline,
+  InteractiveStepper,
+  Label,
+  ListSkeleton,
+  LoadBar,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  MenuLabel,
+  Modal,
+  ModalBody,
+  ModalClose,
+  ModalContent,
+  ModalDescription,
+  ModalFooter,
+  ModalHeader,
+  ModalOption,
+  ModalTitle,
+  ModalTrigger,
+  MorphingLoader,
+  OrbitLoader,
+  Pagination,
   Progress,
+  ProgressBar,
+  ProgressRing,
+  ProgressStepper,
+  PulseLoader,
+  Radio,
+  RadioGroup,
+  SegmentedStepper,
+  SkeletonShimmer,
+  SpinnerDots,
+  SpinnerGradient,
+  SquaresLoader,
   Switch,
-  Tooltip
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableSkeleton,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ThreeDots,
+  TimelineStepper,
+  Tooltip,
+  TypingIndicator,
+  VerticalStepper,
+  avatarVariants,
+  badgeVariants,
+  buttonVariants,
+  checkboxControlVariants,
+  getGradientFromName,
+  getInitials,
+  inputVariants,
+  labelVariants,
+  menuItemVariants,
+  menuVariants,
+  modalContentVariants,
+  overlayVariants,
+  radioControlVariants
 };
 //# sourceMappingURL=index.mjs.map