@json-render/shadcn 0.0.1

package/dist/index.js

@@ -0,0 +1,2946 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  shadcnComponentDefinitions: () => shadcnComponentDefinitions,
+  shadcnComponents: () => shadcnComponents
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components.tsx
+var import_react = require("react");
+var import_react2 = require("@json-render/react");
+
+// src/ui/button.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/ui/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui.Slot.Root : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/ui/card.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("px-6", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/input.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/label.tsx
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_radix_ui2.Label.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/textarea.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/checkbox.tsx
+var import_lucide_react = require("lucide-react");
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    import_radix_ui3.Checkbox.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_radix_ui3.Checkbox.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/ui/switch.tsx
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Switch({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    import_radix_ui4.Switch.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      className: cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_radix_ui4.Switch.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+
+// src/ui/progress.tsx
+var import_radix_ui5 = require("radix-ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Progress({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    import_radix_ui5.Progress.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        import_radix_ui5.Progress.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: "bg-primary h-full w-full flex-1 transition-all",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+// src/ui/separator.tsx
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    import_radix_ui6.Separator.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/alert.tsx
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var alertVariants = (0, import_class_variance_authority2.cva)(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/dialog.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui7.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui7.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui7.Dialog.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_radix_ui7.Dialog.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            import_radix_ui7.Dialog.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react2.XIcon, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui7.Dialog.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_radix_ui7.Dialog.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/accordion.tsx
+var import_lucide_react3 = require("lucide-react");
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Accordion.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui8.Accordion.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_radix_ui8.Accordion.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_radix_ui8.Accordion.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react3.ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui8.Accordion.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+
+// src/ui/avatar.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Avatar({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui9.Avatar.Root,
+    {
+      "data-slot": "avatar",
+      className: cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui9.Avatar.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn("aspect-square size-full", className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui9.Avatar.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/badge.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_radix_ui10 = require("radix-ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_radix_ui10.Slot.Root : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/radio-group.tsx
+var import_lucide_react4 = require("lucide-react");
+var import_radix_ui11 = require("radix-ui");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function RadioGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_radix_ui11.RadioGroup.Root,
+    {
+      "data-slot": "radio-group",
+      className: cn("grid gap-3", className),
+      ...props
+    }
+  );
+}
+function RadioGroupItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_radix_ui11.RadioGroup.Item,
+    {
+      "data-slot": "radio-group-item",
+      className: cn(
+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        import_radix_ui11.RadioGroup.Indicator,
+        {
+          "data-slot": "radio-group-indicator",
+          className: "relative flex items-center justify-center",
+          children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react4.CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" })
+        }
+      )
+    }
+  );
+}
+
+// src/ui/select.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_radix_ui12 = require("radix-ui");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_radix_ui12.Select.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_radix_ui12.Select.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      align,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollUpButton, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          import_radix_ui12.Select.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+    import_radix_ui12.Select.Item,
+    {
+      "data-slot": "select-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "span",
+          {
+            "data-slot": "select-item-indicator",
+            className: "absolute right-2 flex size-3.5 items-center justify-center",
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.CheckIcon, { className: "size-4" }) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_radix_ui12.Select.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_radix_ui12.Select.ScrollUpButton,
+    {
+      "data-slot": "select-scroll-up-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ChevronUpIcon, { className: "size-4" })
+    }
+  );
+}
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_radix_ui12.Select.ScrollDownButton,
+    {
+      "data-slot": "select-scroll-down-button",
+      className: cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ChevronDownIcon, { className: "size-4" })
+    }
+  );
+}
+
+// src/ui/carousel.tsx
+var React = __toESM(require("react"));
+var import_embla_carousel_react = __toESM(require("embla-carousel-react"));
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var CarouselContext = React.createContext(null);
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = (0, import_embla_carousel_react.default)(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+  const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const onSelect = React.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Button,
+    {
+      "data-slot": "carousel-previous",
+      variant,
+      size,
+      className: cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.ArrowLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    Button,
+    {
+      "data-slot": "carousel-next",
+      variant,
+      size,
+      className: cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react6.ArrowRight, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
+
+// src/ui/collapsible.tsx
+var import_radix_ui13 = require("radix-ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui13.Collapsible.Root, { "data-slot": "collapsible", ...props });
+}
+function CollapsibleTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui13.Collapsible.CollapsibleTrigger,
+    {
+      "data-slot": "collapsible-trigger",
+      ...props
+    }
+  );
+}
+function CollapsibleContent({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui13.Collapsible.CollapsibleContent,
+    {
+      "data-slot": "collapsible-content",
+      ...props
+    }
+  );
+}
+
+// src/ui/table.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function Table({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "div",
+    {
+      "data-slot": "table-container",
+      className: "relative w-full overflow-x-auto",
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "table",
+        {
+          "data-slot": "table",
+          className: cn("w-full caption-bottom text-sm", className),
+          ...props
+        }
+      )
+    }
+  );
+}
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCaption({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "caption",
+    {
+      "data-slot": "table-caption",
+      className: cn("text-muted-foreground mt-4 text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/drawer.tsx
+var import_vaul = require("vaul");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_vaul.Drawer.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_vaul.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_vaul.Drawer.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DrawerOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_vaul.Drawer.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_vaul.Drawer.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_vaul.Drawer.Description,
+    {
+      "data-slot": "drawer-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/dropdown-menu.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_radix_ui14 = require("radix-ui");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui14.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_radix_ui14.DropdownMenu.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_radix_ui14.DropdownMenu.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_radix_ui14.DropdownMenu.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_radix_ui14.DropdownMenu.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/pagination.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Pagination({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "nav",
+    {
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className),
+      ...props
+    }
+  );
+}
+function PaginationContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "ul",
+    {
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className),
+      ...props
+    }
+  );
+}
+function PaginationItem({ ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    "a",
+    {
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size
+        }),
+        className
+      ),
+      ...props
+    }
+  );
+}
+function PaginationPrevious({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    PaginationLink,
+    {
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react8.ChevronLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    }
+  );
+}
+function PaginationNext({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    PaginationLink,
+    {
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react8.ChevronRightIcon, {})
+      ]
+    }
+  );
+}
+function PaginationEllipsis({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react8.MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sr-only", children: "More pages" })
+      ]
+    }
+  );
+}
+
+// src/ui/popover.tsx
+var import_radix_ui15 = require("radix-ui");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_radix_ui15.Popover.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_radix_ui15.Popover.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_radix_ui15.Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_radix_ui15.Popover.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+
+// src/ui/skeleton.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("bg-accent animate-pulse rounded-md", className),
+      ...props
+    }
+  );
+}
+
+// src/ui/slider.tsx
+var React2 = __toESM(require("react"));
+var import_radix_ui16 = require("radix-ui");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React2.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    import_radix_ui16.Slider.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_radix_ui16.Slider.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              import_radix_ui16.Slider.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          import_radix_ui16.Slider.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+
+// src/ui/tabs.tsx
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_radix_ui17 = require("radix-ui");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_radix_ui17.Tabs.Root,
+    {
+      "data-slot": "tabs",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var tabsListVariants = (0, import_class_variance_authority4.cva)(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_radix_ui17.Tabs.List,
+    {
+      "data-slot": "tabs-list",
+      "data-variant": variant,
+      className: cn(tabsListVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_radix_ui17.Tabs.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/toggle.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_radix_ui18 = require("radix-ui");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var toggleVariants = (0, import_class_variance_authority5.cva)(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_radix_ui18.Toggle.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/ui/toggle-group.tsx
+var React3 = __toESM(require("react"));
+var import_radix_ui19 = require("radix-ui");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ToggleGroupContext = React3.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_radix_ui19.ToggleGroup.Root,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ToggleGroupContext.Provider, { value: { variant, size, spacing }, children })
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) {
+  const context = React3.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_radix_ui19.ToggleGroup.Item,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/ui/tooltip.tsx
+var import_radix_ui20 = require("radix-ui");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    import_radix_ui20.Tooltip.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui20.Tooltip.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui20.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui20.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    import_radix_ui20.Tooltip.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_radix_ui20.Tooltip.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function getPaginationRange(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  pages.push(1);
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+  pages.push(total);
+  return pages;
+}
+var shadcnComponents = {
+  // ── Layout ────────────────────────────────────────────────────────────
+  Card: ({ props, children }) => {
+    const maxWidthClass = props.maxWidth === "sm" ? "max-w-xs sm:min-w-[280px]" : props.maxWidth === "md" ? "max-w-sm sm:min-w-[320px]" : props.maxWidth === "lg" ? "max-w-md sm:min-w-[360px]" : "w-full";
+    const centeredClass = props.centered ? "mx-auto" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Card, { className: cn(maxWidthClass, centeredClass), children: [
+      (props.title || props.description) && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CardHeader, { children: [
+        props.title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardTitle, { children: props.title }),
+        props.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardDescription, { children: props.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CardContent, { className: "flex flex-col gap-3", children })
+    ] });
+  },
+  Stack: ({ props, children }) => {
+    const isHorizontal = props.direction === "horizontal";
+    const gapMap = {
+      none: "gap-0",
+      sm: "gap-2",
+      md: "gap-3",
+      lg: "gap-4"
+    };
+    const alignMap = {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      stretch: "items-stretch"
+    };
+    const justifyMap = {
+      start: "",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around"
+    };
+    const gapClass = gapMap[props.gap ?? "md"] ?? "gap-3";
+    const alignClass = alignMap[props.align ?? "start"] ?? "items-start";
+    const justifyClass = justifyMap[props.justify ?? ""] ?? "";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "div",
+      {
+        className: `flex ${isHorizontal ? "flex-row flex-wrap" : "flex-col"} ${gapClass} ${alignClass} ${justifyClass}`,
+        children
+      }
+    );
+  },
+  Grid: ({ props, children }) => {
+    const colsMap = {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6"
+    };
+    const gridGapMap = {
+      sm: "gap-2",
+      md: "gap-3",
+      lg: "gap-4"
+    };
+    const n = Math.max(1, Math.min(6, props.columns ?? 1));
+    const cols = colsMap[n] ?? "grid-cols-1";
+    const gridGap = gridGapMap[props.gap ?? "md"] ?? "gap-3";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: `grid ${cols} ${gridGap}`, children });
+  },
+  Separator: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Separator,
+      {
+        orientation: props.orientation ?? "horizontal",
+        className: props.orientation === "vertical" ? "h-full mx-2" : "my-3"
+      }
+    );
+  },
+  Tabs: ({
+    props,
+    children,
+    bindings,
+    emit
+  }) => {
+    const tabs = props.tabs ?? [];
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)(
+      props.defaultValue ?? tabs[0]?.value ?? ""
+    );
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? tabs[0]?.value ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+      Tabs,
+      {
+        value,
+        onValueChange: (v) => {
+          setValue(v);
+          emit("change");
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TabsTrigger, { value: tab.value, children: tab.label }, tab.value)) }),
+          children
+        ]
+      }
+    );
+  },
+  Accordion: ({ props }) => {
+    const items = props.items ?? [];
+    const isMultiple = props.type === "multiple";
+    const itemElements = items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(AccordionItem, { value: `item-${i}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccordionTrigger, { children: item.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AccordionContent, { children: item.content })
+    ] }, i));
+    if (isMultiple) {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion, { type: "multiple", className: "w-full", children: itemElements });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Accordion, { type: "single", collapsible: true, className: "w-full", children: itemElements });
+  },
+  Collapsible: ({
+    props,
+    children
+  }) => {
+    const [open, setOpen] = (0, import_react.useState)(props.defaultOpen ?? false);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Collapsible, { open, onOpenChange: setOpen, className: "w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("button", { className: "flex w-full items-center justify-between rounded-md border border-border px-4 py-2 text-sm font-medium hover:bg-muted transition-colors", children: [
+        props.title,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          "svg",
+          {
+            className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CollapsibleContent, { className: "pt-2", children })
+    ] });
+  },
+  Dialog: ({ props, children }) => {
+    const [open, setOpen] = (0, import_react2.useStateBinding)(props.openPath ?? "");
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Dialog, { open: open ?? false, onOpenChange: (v) => setOpen(v), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DialogHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogTitle, { children: props.title }),
+        props.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DialogDescription, { children: props.description })
+      ] }),
+      children
+    ] }) });
+  },
+  Drawer: ({ props, children }) => {
+    const [open, setOpen] = (0, import_react2.useStateBinding)(props.openPath ?? "");
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Drawer, { open: open ?? false, onOpenChange: (v) => setOpen(v), children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DrawerContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DrawerHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerTitle, { children: props.title }),
+        props.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DrawerDescription, { children: props.description })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "p-4", children })
+    ] }) });
+  },
+  Carousel: ({ props }) => {
+    const items = props.items ?? [];
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Carousel, { className: "w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CarouselContent, { children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        CarouselItem,
+        {
+          className: "basis-3/4 md:basis-1/2 lg:basis-1/3",
+          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "border border-border rounded-lg p-4 bg-card h-full", children: [
+            item.title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h4", { className: "font-semibold text-sm mb-1", children: item.title }),
+            item.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-muted-foreground", children: item.description })
+          ] })
+        },
+        i
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CarouselPrevious, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CarouselNext, {})
+    ] });
+  },
+  // ── Data Display ──────────────────────────────────────────────────────
+  Table: ({ props }) => {
+    const columns = props.columns ?? [];
+    const rows = (props.rows ?? []).map((row) => row.map(String));
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "rounded-md border border-border overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Table, { children: [
+      props.caption && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableCaption, { children: props.caption }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableRow, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableHead, { children: col }, col)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableBody, { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableRow, { children: row.map((cell, j) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TableCell, { children: cell }, j)) }, i)) })
+    ] }) });
+  },
+  Heading: ({ props }) => {
+    const level = props.level ?? "h2";
+    const headingClass = level === "h1" ? "text-2xl font-bold" : level === "h3" ? "text-base font-semibold" : level === "h4" ? "text-sm font-semibold" : "text-lg font-semibold";
+    if (level === "h1")
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h1", { className: `${headingClass} text-left`, children: props.text });
+    if (level === "h3")
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h3", { className: `${headingClass} text-left`, children: props.text });
+    if (level === "h4")
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h4", { className: `${headingClass} text-left`, children: props.text });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("h2", { className: `${headingClass} text-left`, children: props.text });
+  },
+  Text: ({ props }) => {
+    const textClass = props.variant === "caption" ? "text-xs" : props.variant === "muted" ? "text-sm text-muted-foreground" : props.variant === "lead" ? "text-xl text-muted-foreground" : props.variant === "code" ? "font-mono text-sm bg-muted px-1.5 py-0.5 rounded" : "text-sm";
+    if (props.variant === "code") {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("code", { className: `${textClass} text-left`, children: props.text });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: `${textClass} text-left`, children: props.text });
+  },
+  Image: ({ props }) => {
+    if (props.src) {
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        "img",
+        {
+          src: props.src,
+          alt: props.alt ?? "",
+          width: props.width ?? void 0,
+          height: props.height ?? void 0,
+          className: "rounded max-w-full"
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "div",
+      {
+        className: "bg-muted border border-border rounded flex items-center justify-center text-xs text-muted-foreground",
+        style: { width: props.width ?? 80, height: props.height ?? 60 },
+        children: props.alt || "img"
+      }
+    );
+  },
+  Avatar: ({ props }) => {
+    const name = props.name || "?";
+    const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+    const sizeClass = props.size === "lg" ? "h-12 w-12" : props.size === "sm" ? "h-8 w-8" : "h-10 w-10";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Avatar, { className: sizeClass, children: [
+      props.src && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AvatarImage, { src: props.src, alt: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AvatarFallback, { children: initials })
+    ] });
+  },
+  Badge: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Badge, { variant: props.variant ?? "default", children: props.text });
+  },
+  Alert: ({ props }) => {
+    const variant = props.type === "error" ? "destructive" : "default";
+    const customClass = props.type === "success" ? "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100" : props.type === "warning" ? "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100" : props.type === "info" ? "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Alert, { variant, className: customClass, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AlertTitle, { children: props.title }),
+      props.message && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AlertDescription, { children: props.message })
+    ] });
+  },
+  Progress: ({ props }) => {
+    const value = Math.min(100, Math.max(0, props.value || 0));
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "text-sm text-muted-foreground", children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Progress, { value })
+    ] });
+  },
+  Skeleton: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Skeleton,
+      {
+        className: props.rounded ? "rounded-full" : "rounded-md",
+        style: {
+          width: props.width ?? "100%",
+          height: props.height ?? "1.25rem"
+        }
+      }
+    );
+  },
+  Spinner: ({ props }) => {
+    const sizeClass = props.size === "lg" ? "h-8 w-8" : props.size === "sm" ? "h-4 w-4" : "h-6 w-6";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        "svg",
+        {
+          className: `${sizeClass} animate-spin text-muted-foreground`,
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              }
+            )
+          ]
+        }
+      ),
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm text-muted-foreground", children: props.label })
+    ] });
+  },
+  Tooltip: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm underline decoration-dotted cursor-help", children: props.text }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TooltipContent, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { children: props.content }) })
+    ] }) });
+  },
+  Popover: ({ props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Popover, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { variant: "outline", className: "text-sm", children: props.trigger }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PopoverContent, { className: "w-64", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm", children: props.content }) })
+    ] });
+  },
+  // ── Form Inputs ───────────────────────────────────────────────────────
+  Input: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [] } : void 0
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Input,
+        {
+          id: props.name ?? void 0,
+          name: props.name ?? void 0,
+          type: props.type ?? "text",
+          placeholder: props.placeholder ?? "",
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Enter") emit("submit");
+          },
+          onFocus: () => emit("focus"),
+          onBlur: () => {
+            if (hasValidation) validate();
+            emit("blur");
+          }
+        }
+      ),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
+    ] });
+  },
+  Textarea: ({
+    props,
+    bindings
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [] } : void 0
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Textarea,
+        {
+          id: props.name ?? void 0,
+          name: props.name ?? void 0,
+          placeholder: props.placeholder ?? "",
+          rows: props.rows ?? 3,
+          value,
+          onChange: (e) => setValue(e.target.value),
+          onBlur: () => {
+            if (hasValidation) validate();
+          }
+        }
+      ),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
+    ] });
+  },
+  Select: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)("");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    const rawOptions = props.options ?? [];
+    const options = rawOptions.map(
+      (opt) => typeof opt === "string" ? opt : String(opt ?? "")
+    );
+    const hasValidation = !!(bindings?.value && props.checks?.length);
+    const { errors, validate } = (0, import_react2.useFieldValidation)(
+      bindings?.value ?? "",
+      hasValidation ? { checks: props.checks ?? [] } : void 0
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+        Select,
+        {
+          value,
+          onValueChange: (v) => {
+            setValue(v);
+            if (hasValidation) validate();
+            emit("change");
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectValue, { placeholder: props.placeholder ?? "Select..." }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectContent, { children: options.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SelectItem, { value: opt || `option-${idx}`, children: opt }, `${idx}-${opt}`)) })
+          ]
+        }
+      ),
+      errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-destructive", children: errors[0] })
+    ] });
+  },
+  Checkbox: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundChecked, setBoundChecked] = (0, import_react2.useBoundProp)(
+      props.checked,
+      bindings?.checked
+    );
+    const [localChecked, setLocalChecked] = (0, import_react.useState)(!!props.checked);
+    const isBound = !!bindings?.checked;
+    const checked = isBound ? boundChecked ?? false : localChecked;
+    const setChecked = isBound ? setBoundChecked : setLocalChecked;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Checkbox,
+        {
+          id: props.name ?? void 0,
+          checked,
+          onCheckedChange: (c) => {
+            setChecked(c === true);
+            emit("change");
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label })
+    ] });
+  },
+  Radio: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const rawOptions = props.options ?? [];
+    const options = rawOptions.map(
+      (opt) => typeof opt === "string" ? opt : String(opt ?? "")
+    );
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)(options[0] ?? "");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        RadioGroup,
+        {
+          value,
+          onValueChange: (v) => {
+            setValue(v);
+            emit("change");
+          },
+          children: options.map((opt, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              RadioGroupItem,
+              {
+                value: opt || `option-${idx}`,
+                id: `${props.name}-${idx}-${opt}`
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+              Label,
+              {
+                htmlFor: `${props.name}-${idx}-${opt}`,
+                className: "cursor-pointer",
+                children: opt
+              }
+            )
+          ] }, `${idx}-${opt}`))
+        }
+      )
+    ] });
+  },
+  Switch: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundChecked, setBoundChecked] = (0, import_react2.useBoundProp)(
+      props.checked,
+      bindings?.checked
+    );
+    const [localChecked, setLocalChecked] = (0, import_react.useState)(!!props.checked);
+    const isBound = !!bindings?.checked;
+    const checked = isBound ? boundChecked ?? false : localChecked;
+    const setChecked = isBound ? setBoundChecked : setLocalChecked;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between space-x-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { htmlFor: props.name ?? void 0, className: "cursor-pointer", children: props.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Switch,
+        {
+          id: props.name ?? void 0,
+          checked,
+          onCheckedChange: (c) => {
+            setChecked(c);
+            emit("change");
+          }
+        }
+      )
+    ] });
+  },
+  Slider: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)(props.min ?? 0);
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? props.min ?? 0 : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "space-y-2", children: [
+      props.label && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Label, { className: "text-sm", children: props.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-sm text-muted-foreground", children: value })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        Slider,
+        {
+          value: [value],
+          min: props.min ?? 0,
+          max: props.max ?? 100,
+          step: props.step ?? 1,
+          onValueChange: (v) => {
+            setValue(v[0] ?? 0);
+            emit("change");
+          }
+        }
+      )
+    ] });
+  },
+  // ── Actions ───────────────────────────────────────────────────────────
+  Button: ({ props, emit }) => {
+    const variant = props.variant === "danger" ? "destructive" : props.variant === "secondary" ? "secondary" : "default";
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Button,
+      {
+        variant,
+        disabled: props.disabled ?? false,
+        onClick: () => emit("press"),
+        children: props.label
+      }
+    );
+  },
+  Link: ({ props, on }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "a",
+      {
+        href: props.href ?? "#",
+        className: "text-primary underline-offset-4 hover:underline text-sm font-medium",
+        onClick: (e) => {
+          const press = on("press");
+          if (press.shouldPreventDefault) e.preventDefault();
+          press.emit();
+        },
+        children: props.label
+      }
+    );
+  },
+  DropdownMenu: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const items = props.items ?? [];
+    const [, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Button, { variant: "outline", children: props.label }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DropdownMenuContent, { children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        DropdownMenuItem,
+        {
+          onClick: () => {
+            setBoundValue(item.value);
+            emit("select");
+          },
+          children: item.label
+        },
+        item.value
+      )) })
+    ] });
+  },
+  Toggle: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPressed, setBoundPressed] = (0, import_react2.useBoundProp)(
+      props.pressed,
+      bindings?.pressed
+    );
+    const [localPressed, setLocalPressed] = (0, import_react.useState)(props.pressed ?? false);
+    const isBound = !!bindings?.pressed;
+    const pressed = isBound ? boundPressed ?? false : localPressed;
+    const setPressed = isBound ? setBoundPressed : setLocalPressed;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      Toggle,
+      {
+        variant: props.variant ?? "default",
+        pressed,
+        onPressedChange: (v) => {
+          setPressed(v);
+          emit("change");
+        },
+        children: props.label
+      }
+    );
+  },
+  ToggleGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const type = props.type ?? "single";
+    const items = props.items ?? [];
+    const [boundValue, setBoundValue] = (0, import_react2.useBoundProp)(
+      props.value,
+      bindings?.value
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)(items[0]?.value ?? "");
+    const isBound = !!bindings?.value;
+    const value = isBound ? boundValue ?? "" : localValue;
+    const setValue = isBound ? setBoundValue : setLocalValue;
+    if (type === "multiple") {
+      const selected = value ? value.split(",").filter(Boolean) : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        ToggleGroup,
+        {
+          type: "multiple",
+          value: selected,
+          onValueChange: (v) => {
+            setValue(v.join(","));
+            emit("change");
+          },
+          children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ToggleGroupItem, { value: item.value, children: item.label }, item.value))
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      ToggleGroup,
+      {
+        type: "single",
+        value,
+        onValueChange: (v) => {
+          if (v) {
+            setValue(v);
+            emit("change");
+          }
+        },
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ToggleGroupItem, { value: item.value, children: item.label }, item.value))
+      }
+    );
+  },
+  ButtonGroup: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const buttons = props.buttons ?? [];
+    const [boundSelected, setBoundSelected] = (0, import_react2.useBoundProp)(
+      props.selected,
+      bindings?.selected
+    );
+    const [localValue, setLocalValue] = (0, import_react.useState)(buttons[0]?.value ?? "");
+    const isBound = !!bindings?.selected;
+    const value = isBound ? boundSelected ?? "" : localValue;
+    const setValue = isBound ? setBoundSelected : setLocalValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "inline-flex rounded-md border border-border", children: buttons.map((btn, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      "button",
+      {
+        className: `px-3 py-1.5 text-sm transition-colors ${value === btn.value ? "bg-primary text-primary-foreground" : "bg-background hover:bg-muted"} ${i > 0 ? "border-l border-border" : ""} ${i === 0 ? "rounded-l-md" : ""} ${i === buttons.length - 1 ? "rounded-r-md" : ""}`,
+        onClick: () => {
+          setValue(btn.value);
+          emit("change");
+        },
+        children: btn.label
+      },
+      btn.value
+    )) });
+  },
+  Pagination: ({
+    props,
+    bindings,
+    emit
+  }) => {
+    const [boundPage, setBoundPage] = (0, import_react2.useBoundProp)(
+      props.page,
+      bindings?.page
+    );
+    const currentPage = boundPage ?? 1;
+    const totalPages = props.totalPages ?? 1;
+    const pages = getPaginationRange(currentPage, totalPages);
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Pagination, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(PaginationContent, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        PaginationPrevious,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            if (currentPage > 1) {
+              setBoundPage(currentPage - 1);
+              emit("change");
+            }
+          }
+        }
+      ) }),
+      pages.map(
+        (page, idx) => page === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationEllipsis, {}) }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          PaginationLink,
+          {
+            href: "#",
+            isActive: page === currentPage,
+            onClick: (e) => {
+              e.preventDefault();
+              setBoundPage(page);
+              emit("change");
+            },
+            children: page
+          }
+        ) }, page)
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PaginationItem, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        PaginationNext,
+        {
+          href: "#",
+          onClick: (e) => {
+            e.preventDefault();
+            if (currentPage < totalPages) {
+              setBoundPage(currentPage + 1);
+              emit("change");
+            }
+          }
+        }
+      ) })
+    ] }) });
+  }
+};
+
+// src/catalog.ts
+var import_zod = require("zod");
+var shadcnComponentDefinitions = {
+  // ==========================================================================
+  // Layout Components
+  // ==========================================================================
+  Card: {
+    props: import_zod.z.object({
+      title: import_zod.z.string().nullable(),
+      description: import_zod.z.string().nullable(),
+      maxWidth: import_zod.z.enum(["sm", "md", "lg", "full"]).nullable(),
+      centered: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "Container card for content sections. Use for forms/content boxes, NOT for page headers.",
+    example: { title: "Overview", description: "Your account summary" }
+  },
+  Stack: {
+    props: import_zod.z.object({
+      direction: import_zod.z.enum(["horizontal", "vertical"]).nullable(),
+      gap: import_zod.z.enum(["none", "sm", "md", "lg"]).nullable(),
+      align: import_zod.z.enum(["start", "center", "end", "stretch"]).nullable(),
+      justify: import_zod.z.enum(["start", "center", "end", "between", "around"]).nullable()
+    }),
+    slots: ["default"],
+    description: "Flex container for layouts",
+    example: { direction: "vertical", gap: "md" }
+  },
+  Grid: {
+    props: import_zod.z.object({
+      columns: import_zod.z.number().nullable(),
+      gap: import_zod.z.enum(["sm", "md", "lg"]).nullable()
+    }),
+    slots: ["default"],
+    description: "Grid layout (1-6 columns)",
+    example: { columns: 3, gap: "md" }
+  },
+  Separator: {
+    props: import_zod.z.object({
+      orientation: import_zod.z.enum(["horizontal", "vertical"]).nullable()
+    }),
+    description: "Visual separator line"
+  },
+  Tabs: {
+    props: import_zod.z.object({
+      tabs: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string()
+        })
+      ),
+      defaultValue: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable()
+    }),
+    slots: ["default"],
+    events: ["change"],
+    description: "Tab navigation. Use { $bindState } on value for active tab binding."
+  },
+  Accordion: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string(),
+          content: import_zod.z.string()
+        })
+      ),
+      type: import_zod.z.enum(["single", "multiple"]).nullable()
+    }),
+    description: "Collapsible sections. Items as [{title, content}]. Type 'single' (default) or 'multiple'."
+  },
+  Collapsible: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      defaultOpen: import_zod.z.boolean().nullable()
+    }),
+    slots: ["default"],
+    description: "Collapsible section with trigger. Children render inside."
+  },
+  Dialog: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      description: import_zod.z.string().nullable(),
+      openPath: import_zod.z.string()
+    }),
+    slots: ["default"],
+    description: "Modal dialog. Set openPath to a boolean state path. Use setState to toggle."
+  },
+  Drawer: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      description: import_zod.z.string().nullable(),
+      openPath: import_zod.z.string()
+    }),
+    slots: ["default"],
+    description: "Bottom sheet drawer. Set openPath to a boolean state path. Use setState to toggle."
+  },
+  Carousel: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          title: import_zod.z.string().nullable(),
+          description: import_zod.z.string().nullable()
+        })
+      )
+    }),
+    description: "Horizontally scrollable carousel of cards."
+  },
+  // ==========================================================================
+  // Data Display Components
+  // ==========================================================================
+  Table: {
+    props: import_zod.z.object({
+      columns: import_zod.z.array(import_zod.z.string()),
+      rows: import_zod.z.array(import_zod.z.array(import_zod.z.string())),
+      caption: import_zod.z.string().nullable()
+    }),
+    description: 'Data table. columns: header labels. rows: 2D array of cell strings, e.g. [["Alice","admin"],["Bob","user"]].',
+    example: {
+      columns: ["Name", "Role"],
+      rows: [
+        ["Alice", "Admin"],
+        ["Bob", "User"]
+      ]
+    }
+  },
+  Heading: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      level: import_zod.z.enum(["h1", "h2", "h3", "h4"]).nullable()
+    }),
+    description: "Heading text (h1-h4)",
+    example: { text: "Welcome", level: "h1" }
+  },
+  Text: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      variant: import_zod.z.enum(["body", "caption", "muted", "lead", "code"]).nullable()
+    }),
+    description: "Paragraph text",
+    example: { text: "Hello, world!" }
+  },
+  Image: {
+    props: import_zod.z.object({
+      src: import_zod.z.string().nullable(),
+      alt: import_zod.z.string(),
+      width: import_zod.z.number().nullable(),
+      height: import_zod.z.number().nullable()
+    }),
+    description: "Image component. Renders an img tag when src is provided, otherwise a placeholder."
+  },
+  Avatar: {
+    props: import_zod.z.object({
+      src: import_zod.z.string().nullable(),
+      name: import_zod.z.string(),
+      size: import_zod.z.enum(["sm", "md", "lg"]).nullable()
+    }),
+    description: "User avatar with fallback initials",
+    example: { name: "Jane Doe", size: "md" }
+  },
+  Badge: {
+    props: import_zod.z.object({
+      text: import_zod.z.string(),
+      variant: import_zod.z.enum(["default", "secondary", "destructive", "outline"]).nullable()
+    }),
+    description: "Status badge",
+    example: { text: "Active", variant: "default" }
+  },
+  Alert: {
+    props: import_zod.z.object({
+      title: import_zod.z.string(),
+      message: import_zod.z.string().nullable(),
+      type: import_zod.z.enum(["info", "success", "warning", "error"]).nullable()
+    }),
+    description: "Alert banner",
+    example: {
+      title: "Note",
+      message: "Your changes have been saved.",
+      type: "success"
+    }
+  },
+  Progress: {
+    props: import_zod.z.object({
+      value: import_zod.z.number(),
+      max: import_zod.z.number().nullable(),
+      label: import_zod.z.string().nullable()
+    }),
+    description: "Progress bar (value 0-100)",
+    example: { value: 65, max: 100, label: "Upload progress" }
+  },
+  Skeleton: {
+    props: import_zod.z.object({
+      width: import_zod.z.string().nullable(),
+      height: import_zod.z.string().nullable(),
+      rounded: import_zod.z.boolean().nullable()
+    }),
+    description: "Loading placeholder skeleton"
+  },
+  Spinner: {
+    props: import_zod.z.object({
+      size: import_zod.z.enum(["sm", "md", "lg"]).nullable(),
+      label: import_zod.z.string().nullable()
+    }),
+    description: "Loading spinner indicator"
+  },
+  Tooltip: {
+    props: import_zod.z.object({
+      content: import_zod.z.string(),
+      text: import_zod.z.string()
+    }),
+    description: "Hover tooltip. Shows content on hover over text."
+  },
+  Popover: {
+    props: import_zod.z.object({
+      trigger: import_zod.z.string(),
+      content: import_zod.z.string()
+    }),
+    description: "Popover that appears on click of trigger."
+  },
+  // ==========================================================================
+  // Form Input Components
+  // ==========================================================================
+  Input: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      type: import_zod.z.enum(["text", "email", "password", "number"]).nullable(),
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      checks: import_zod.z.array(
+        import_zod.z.object({
+          type: import_zod.z.string(),
+          message: import_zod.z.string(),
+          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+        })
+      ).nullable()
+    }),
+    events: ["submit", "focus", "blur"],
+    description: "Text input field. Use { $bindState } on value for two-way binding. Use checks for validation (e.g. required, email, minLength).",
+    example: {
+      label: "Email",
+      name: "email",
+      type: "email",
+      placeholder: "you@example.com"
+    }
+  },
+  Textarea: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      placeholder: import_zod.z.string().nullable(),
+      rows: import_zod.z.number().nullable(),
+      value: import_zod.z.string().nullable(),
+      checks: import_zod.z.array(
+        import_zod.z.object({
+          type: import_zod.z.string(),
+          message: import_zod.z.string(),
+          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+        })
+      ).nullable()
+    }),
+    description: "Multi-line text input. Use { $bindState } on value for binding. Use checks for validation."
+  },
+  Select: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(import_zod.z.string()),
+      placeholder: import_zod.z.string().nullable(),
+      value: import_zod.z.string().nullable(),
+      checks: import_zod.z.array(
+        import_zod.z.object({
+          type: import_zod.z.string(),
+          message: import_zod.z.string(),
+          args: import_zod.z.record(import_zod.z.string(), import_zod.z.unknown()).optional()
+        })
+      ).nullable()
+    }),
+    events: ["change"],
+    description: "Dropdown select input. Use { $bindState } on value for binding. Use checks for validation."
+  },
+  Checkbox: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      checked: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "Checkbox input. Use { $bindState } on checked for binding."
+  },
+  Radio: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      options: import_zod.z.array(import_zod.z.string()),
+      value: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "Radio button group. Use { $bindState } on value for binding."
+  },
+  Switch: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      name: import_zod.z.string(),
+      checked: import_zod.z.boolean().nullable()
+    }),
+    events: ["change"],
+    description: "Toggle switch. Use { $bindState } on checked for binding."
+  },
+  Slider: {
+    props: import_zod.z.object({
+      label: import_zod.z.string().nullable(),
+      min: import_zod.z.number().nullable(),
+      max: import_zod.z.number().nullable(),
+      step: import_zod.z.number().nullable(),
+      value: import_zod.z.number().nullable()
+    }),
+    events: ["change"],
+    description: "Range slider input. Use { $bindState } on value for binding."
+  },
+  // ==========================================================================
+  // Action Components
+  // ==========================================================================
+  Button: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      variant: import_zod.z.enum(["primary", "secondary", "danger"]).nullable(),
+      disabled: import_zod.z.boolean().nullable()
+    }),
+    events: ["press"],
+    description: "Clickable button. Bind on.press for handler.",
+    example: { label: "Submit", variant: "primary" }
+  },
+  Link: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      href: import_zod.z.string()
+    }),
+    events: ["press"],
+    description: "Anchor link. Bind on.press for click handler."
+  },
+  DropdownMenu: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string()
+        })
+      ),
+      value: import_zod.z.string().nullable()
+    }),
+    events: ["select"],
+    description: "Dropdown menu with trigger button and selectable items. Use { $bindState } on value for selected item binding."
+  },
+  Toggle: {
+    props: import_zod.z.object({
+      label: import_zod.z.string(),
+      pressed: import_zod.z.boolean().nullable(),
+      variant: import_zod.z.enum(["default", "outline"]).nullable()
+    }),
+    events: ["change"],
+    description: "Toggle button. Use { $bindState } on pressed for state binding."
+  },
+  ToggleGroup: {
+    props: import_zod.z.object({
+      items: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string()
+        })
+      ),
+      type: import_zod.z.enum(["single", "multiple"]).nullable(),
+      value: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "Group of toggle buttons. Type 'single' (default) or 'multiple'. Use { $bindState } on value."
+  },
+  ButtonGroup: {
+    props: import_zod.z.object({
+      buttons: import_zod.z.array(
+        import_zod.z.object({
+          label: import_zod.z.string(),
+          value: import_zod.z.string()
+        })
+      ),
+      selected: import_zod.z.string().nullable()
+    }),
+    events: ["change"],
+    description: "Segmented button group. Use { $bindState } on selected for selected value."
+  },
+  Pagination: {
+    props: import_zod.z.object({
+      totalPages: import_zod.z.number(),
+      page: import_zod.z.number().nullable()
+    }),
+    events: ["change"],
+    description: "Page navigation. Use { $bindState } on page for current page number."
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  shadcnComponentDefinitions,
+  shadcnComponents
+});
+//# sourceMappingURL=index.js.map