@vadimcomanescu/nadicode-design-system 4.0.10 → 5.0.0

package/dist/chunk-W4KI424V.js

@@ -0,0 +1,380 @@
+import { treeNodeSchema } from './chunk-BJVCZI2B.js';
+import { z } from 'zod';
+
+var displayDefinitions = {
+  Accordion: {
+    props: z.object({
+      // Matches Radix AccordionPrimitive.Root: type 'single' enforces one open
+      // item at a time; 'multiple' allows many. items drives the rendered list.
+      type: z.enum(["single", "multiple"]).nullable(),
+      items: z.array(
+        z.object({
+          value: z.string(),
+          title: z.string(),
+          content: z.string()
+        })
+      ).nullable()
+    }),
+    events: ["valueChange"],
+    description: "Radix-based accordion with single or multiple open mode. Each item has a value key, trigger title, and body content string.",
+    example: {
+      type: "single",
+      items: [
+        { value: "shipping", title: "Shipping Policy", content: "Orders ship within 2 business days via USPS Priority Mail." },
+        { value: "returns", title: "Return Policy", content: "Returns accepted within 30 days of delivery with original packaging." }
+      ]
+    }
+  },
+  Alert: {
+    props: z.object({
+      variant: z.enum(["default", "destructive", "success", "warning"]).nullable(),
+      title: z.string().nullable(),
+      description: z.string().nullable()
+    }),
+    slots: ["default"],
+    description: "Alert banner with title, description, and icon slot. Variants: default, destructive, success, warning.",
+    example: { variant: "warning", title: "Rate limit approaching", description: "You have used 85% of your monthly API quota." }
+  },
+  AnnouncementBanner: {
+    props: z.object({
+      variant: z.enum(["info", "warning", "success", "accent"]).nullable(),
+      storageKey: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["dismiss"],
+    slots: ["default"],
+    description: "Dismissable announcement banner strip. Persists dismissal to localStorage via storageKey. Variants: info, warning, success, accent.",
+    example: { variant: "accent", storageKey: "product-launch-2026", className: null }
+  },
+  AudioWaveform: {
+    props: z.object({
+      variant: z.enum(["default", "accent", "success"]).nullable(),
+      size: z.enum(["sm", "default", "lg"]).nullable(),
+      bars: z.number().nullable(),
+      active: z.boolean().nullable(),
+      barWidth: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Animated audio waveform visualization with configurable bar count, size, and color variant.",
+    example: { variant: "accent", size: "default", bars: 5, active: true, barWidth: null, className: null }
+  },
+  Avatar: {
+    props: z.object({
+      src: z.string().nullable(),
+      alt: z.string().nullable(),
+      fallback: z.string().nullable(),
+      size: z.enum(["sm", "md", "lg"]).nullable()
+    }),
+    description: "Circular avatar composed from Avatar + AvatarImage + AvatarFallback. Renders the image when src loads; falls back to the fallback string (typically initials). size controls dimensions: sm (24px), md (40px, default), lg (56px).",
+    example: { src: "https://avatars.githubusercontent.com/u/1234", alt: "Maria Chen", fallback: "MC", size: "md" }
+  },
+  Avatar3D: {
+    props: z.object({
+      src: z.string(),
+      name: z.string(),
+      state: z.enum(["idle", "listening", "speaking"]).nullable(),
+      size: z.enum(["md", "lg", "xl"]).nullable(),
+      enableTilt: z.boolean().nullable(),
+      maxTilt: z.number().nullable(),
+      interactive: z.boolean().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["select"],
+    description: "Interactive 3D avatar with tilt-on-hover, ambient glow, and state-based ring animations (idle/listening/speaking). Renders as a button when interactive. Fires select on click.",
+    example: { src: "https://avatars.githubusercontent.com/u/5678", name: "Aria", state: "listening", size: "lg", enableTilt: true, maxTilt: null, interactive: true, className: null }
+  },
+  AvatarUpload: {
+    props: z.object({
+      value: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["change"],
+    description: "Circular avatar upload zone. Shows the current avatar when value (URL) is set, or a camera icon placeholder. Fires change when a file is selected or cleared.",
+    example: { value: null, className: null }
+  },
+  Badge: {
+    props: z.object({
+      // Badge renders children as content; text drives what json-render passes
+      // as the child string.
+      text: z.string(),
+      variant: z.enum(["primary", "secondary", "destructive", "outline", "accent"]).nullable()
+    }),
+    description: "Small pill label. variant controls color. Defaults to primary.",
+    example: { text: "New", variant: "accent" }
+  },
+  ChartCard: {
+    props: z.object({
+      title: z.string(),
+      description: z.string().nullable(),
+      loading: z.boolean().nullable(),
+      emptyTitle: z.string().nullable(),
+      emptyDescription: z.string().nullable(),
+      hasData: z.boolean().nullable()
+    }),
+    slots: ["chart", "action", "emptyCta"],
+    description: "Card wrapper for charts. Shows a Skeleton while loading, an Empty state when hasData is false, and renders the chart slot otherwise. title is required. hasData defaults to true.",
+    example: { title: "Monthly Revenue", description: "Revenue trends over the last 6 months", loading: false, emptyTitle: null, emptyDescription: null, hasData: true }
+  },
+  CheckStatus: {
+    props: z.object({
+      status: z.enum(["passing", "failing", "pending", "neutral"]).nullable(),
+      count: z.number().nullable(),
+      label: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "CI/build check status indicator with colored dot. Shows count and status label. Defaults to neutral.",
+    example: { status: "passing", count: 42, label: "Unit Tests", className: null }
+  },
+  Carousel: {
+    props: z.object({
+      orientation: z.enum(["horizontal", "vertical"]).nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    events: ["select"],
+    description: "Embla-powered carousel with keyboard navigation. Children should be CarouselContent > CarouselItem wrappers. orientation defaults to horizontal. Compound sub-parts (CarouselContent, CarouselItem, CarouselPrevious, CarouselNext) are internal.",
+    example: { orientation: "horizontal", className: null }
+  },
+  DataTable: {
+    props: z.object({
+      // columns and rows are serialisable shapes suitable for json-render specs.
+      // The underlying DataTable component uses TanStack Table; column.key maps
+      // to the accessorKey, header is the display label.
+      columns: z.array(
+        z.object({
+          key: z.string(),
+          header: z.string(),
+          sortable: z.boolean().nullable()
+        })
+      ).nullable(),
+      rows: z.array(z.record(z.string(), z.unknown())).nullable(),
+      searchKey: z.string().nullable()
+    }),
+    events: ["sort", "filter", "select"],
+    description: "TanStack Table\u2013based data table with sorting, column-visibility toggle, optional search filter, and pagination. Pass columns (key + header) and rows (record objects keyed by column.key).",
+    example: {
+      columns: [
+        { key: "name", header: "Customer", sortable: true },
+        { key: "plan", header: "Plan", sortable: false },
+        { key: "mrr", header: "MRR", sortable: true }
+      ],
+      rows: [
+        { name: "Acme Corp", plan: "Enterprise", mrr: "$12,400" },
+        { name: "Globex Inc", plan: "Growth", mrr: "$3,200" }
+      ],
+      searchKey: "name"
+    }
+  },
+  DataFreshness: {
+    props: z.object({
+      lastUpdated: z.string(),
+      isLive: z.boolean().nullable(),
+      staleThresholdMs: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Shows relative time since last data update with optional live dot indicator. lastUpdated is an ISO date string. Stale threshold defaults to 5 minutes.",
+    example: { lastUpdated: "2026-03-30T14:22:00Z", isLive: true, staleThresholdMs: null, className: null }
+  },
+  DiffStat: {
+    props: z.object({
+      additions: z.number().nullable(),
+      deletions: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Git-style diff stat showing green +additions and red -deletions.",
+    example: { additions: 47, deletions: 12, className: null }
+  },
+  Empty: {
+    props: z.object({
+      title: z.string().nullable(),
+      description: z.string().nullable()
+    }),
+    slots: ["icon", "cta"],
+    description: "Empty state placeholder with dashed border, optional icon slot, title, description, and CTA slot. Use when a list or chart has no data.",
+    example: { title: "No invoices yet", description: "Create your first invoice to start tracking payments." }
+  },
+  Item: {
+    props: z.object({
+      variant: z.enum(["default", "outline", "muted"]).nullable(),
+      size: z.enum(["default", "sm", "xs"]).nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    events: ["press"],
+    description: "Flexible list item container with variant and size. Compound sub-parts (ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemGroup, ItemSeparator) are internal. Use children to compose layout.",
+    example: { variant: "default", size: "default", className: null }
+  },
+  MetricCard: {
+    props: z.object({
+      label: z.string(),
+      value: z.union([z.string(), z.number()]),
+      trend: z.object({
+        value: z.number(),
+        direction: z.enum(["up", "down", "flat"]).nullable()
+      }).nullable(),
+      sparklineData: z.array(z.number()).nullable(),
+      prefix: z.string().nullable(),
+      suffix: z.string().nullable(),
+      loading: z.boolean().nullable()
+    }),
+    description: "KPI card with animated SlidingNumber value, optional trend badge, sparkline, prefix/suffix, and loading skeleton. label and value are required.",
+    example: {
+      label: "Active Subscriptions",
+      value: 8420,
+      trend: { value: 5.3, direction: "up" },
+      sparklineData: [72, 68, 75, 80, 78, 84],
+      prefix: null,
+      suffix: null,
+      loading: false
+    }
+  },
+  Progress: {
+    props: z.object({
+      value: z.number().nullable(),
+      max: z.number().nullable(),
+      label: z.string().nullable()
+    }),
+    description: "Radix-based progress bar. value is 0\u2013100 (or 0\u2013max when max is set). label sets aria-label for accessibility. Animates fill with shimmer overlay.",
+    example: { value: 68, max: null, label: "Upload progress" }
+  },
+  ProgressRing: {
+    props: z.object({
+      value: z.number(),
+      max: z.number().nullable(),
+      size: z.enum(["sm", "md", "lg"]).nullable(),
+      color: z.string().nullable(),
+      trackColor: z.string().nullable(),
+      showValue: z.boolean().nullable(),
+      label: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Circular SVG progress ring with spring animation. value is 0\u2013max (default 100). size controls diameter (sm 32px, md 48px, lg 64px). showValue renders percentage text inside the ring. label sets aria-label.",
+    example: { value: 73, max: null, size: "md", color: null, trackColor: null, showValue: true, label: "Storage used", className: null }
+  },
+  PromoCard: {
+    props: z.object({
+      title: z.string().nullable(),
+      description: z.string().nullable(),
+      actionLabel: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["action"],
+    description: 'Promotional card with title, description, and CTA button. Fires action on button click. Defaults to "Upgrade to Pro" messaging when no props are set.',
+    example: { title: "Unlock Advanced Analytics", description: "Get real-time dashboards, custom reports, and data exports.", actionLabel: "Upgrade Now", className: null }
+  },
+  RoleBadge: {
+    props: z.object({
+      role: z.enum(["owner", "admin", "member", "guest"]),
+      description: z.string().nullable()
+    }),
+    description: "Styled role pill for owner, admin, member, and guest. When description is set a tooltip is shown on hover.",
+    example: { role: "admin", description: "Full access to all workspace settings and billing." }
+  },
+  Skeleton: {
+    props: z.object({
+      className: z.string().nullable(),
+      width: z.string().nullable(),
+      height: z.string().nullable()
+    }),
+    description: "Shimmer placeholder rectangle. width and height set inline dimensions. className can add Tailwind utilities. Use while content is loading.",
+    example: { className: null, width: "200px", height: "20px" }
+  },
+  Spinner: {
+    props: z.object({
+      className: z.string().nullable(),
+      size: z.enum(["sm", "default", "lg"]).nullable(),
+      label: z.string().nullable()
+    }),
+    description: "Spinning loading indicator. size controls dimensions: sm (12px), default (16px), lg (24px). label sets aria-label for accessibility.",
+    example: { className: null, size: "default", label: "Loading results" }
+  },
+  StatusDot: {
+    props: z.object({
+      status: z.enum(["online", "offline", "busy", "dnd"]).nullable(),
+      size: z.enum(["sm", "default", "lg"]).nullable(),
+      className: z.string().nullable()
+    }),
+    description: "Small colored status indicator dot. status controls color (online=green pulse, offline=muted, busy=warning, dnd=destructive). size controls diameter.",
+    example: { status: "online", size: "default", className: null }
+  },
+  SuccessCheck: {
+    props: z.object({
+      size: z.number().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["complete"],
+    description: "Animated SVG checkmark with spring physics. Circle draws first, then checkmark. Fires complete when animation finishes. size controls pixel dimensions (default 48).",
+    example: { size: 48, className: null }
+  },
+  Table: {
+    props: z.object({
+      columns: z.array(z.string()).nullable(),
+      rows: z.array(z.array(z.string())).nullable(),
+      density: z.enum(["default", "compact"]).nullable(),
+      striped: z.boolean().nullable(),
+      caption: z.string().nullable()
+    }),
+    description: "HTML table with optional striped rows and compact density mode. columns is a header label array; rows is a 2-D string array. caption renders a table caption element. For interactive features (sort, filter, select) use DataTable.",
+    example: {
+      columns: ["Region", "Q1 Sales", "Q2 Sales"],
+      rows: [
+        ["North America", "$1.2M", "$1.4M"],
+        ["Europe", "$890K", "$920K"]
+      ],
+      density: "default",
+      striped: true,
+      caption: "Quarterly sales by region"
+    }
+  },
+  Timeline: {
+    props: z.object({
+      items: z.array(
+        z.object({
+          title: z.string(),
+          description: z.string().nullable(),
+          timestamp: z.string().nullable()
+        })
+      ).nullable()
+    }),
+    description: "Vertical timeline. Each item has a title (required), optional description, and optional timestamp. Custom icons are not supported in json-render specs; the default dot is used.",
+    example: {
+      items: [
+        { title: "Order placed", description: "Payment confirmed via Stripe.", timestamp: "2026-03-28T09:15:00Z" },
+        { title: "Shipped", description: null, timestamp: "2026-03-29T14:30:00Z" },
+        { title: "Delivered", description: "Left at front door.", timestamp: null }
+      ]
+    }
+  },
+  TrendIndicator: {
+    props: z.object({
+      value: z.number(),
+      direction: z.enum(["up", "down", "flat"]).nullable(),
+      format: z.enum(["percent", "absolute"]).nullable(),
+      showIcon: z.boolean().nullable()
+    }),
+    description: "Badge-style trend pill with directional arrow icon and formatted value. direction defaults to up when value > 0, down when < 0, flat when 0. format defaults to percent.",
+    example: { value: 12.5, direction: "up", format: "percent", showIcon: true }
+  },
+  TreeView: {
+    props: z.object({
+      data: z.array(
+        z.lazy(() => treeNodeSchema)
+      ),
+      className: z.string().nullable()
+    }),
+    events: ["select"],
+    description: "Collapsible tree view. data is a recursive array of nodes with id, label, and optional children. Fires select on node click.",
+    example: {
+      data: [
+        { id: "src", label: "src", children: [
+          { id: "components", label: "components", children: null },
+          { id: "lib", label: "lib", children: null }
+        ] },
+        { id: "public", label: "public", children: null }
+      ],
+      className: null
+    }
+  }
+};
+
+export { displayDefinitions };

package/dist/chunk-W7ZGCFTB.js

@@ -0,0 +1,23 @@
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function StaggeredEntrance({ children, className, delayMs = 50 }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("contents", className), children: React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) return child;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          "--stagger-index": index,
+          animationDelay: `${index * delayMs}ms`
+        },
+        className: "animate-fade-in-up opacity-0 [animation-fill-mode:backwards]",
+        children: child
+      },
+      child.key ?? index
+    );
+  }) });
+}
+
+export { StaggeredEntrance };

package/dist/chunk-WAIZR4CR.js

@@ -0,0 +1,107 @@
+import { z } from 'zod';
+
+// src/catalog/definitions/blocks-misc.ts
+var blocksMiscDefinitions = {
+  Drawer: {
+    props: z.object({
+      triggerLabel: z.string().nullable(),
+      title: z.string().nullable(),
+      description: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    slots: ["default"],
+    events: ["close"],
+    description: "Bottom-sheet drawer (Vaul) with drag handle, title, and description. triggerLabel controls the open button text. Children render inside the drawer body. Fires close on dismiss.",
+    example: { triggerLabel: "View Details", title: "Order Summary", description: "Review your order before confirming.", className: null }
+  },
+  FloatingDock: {
+    props: z.object({
+      items: z.array(
+        z.object({
+          icon: z.string(),
+          label: z.string()
+        })
+      ),
+      className: z.string().nullable()
+    }),
+    events: ["select"],
+    description: "macOS-style floating dock with spring magnification on hover. Items have string icon keys resolved at render time. Fires select on item click.",
+    example: {
+      items: [
+        { icon: "Home", label: "Home" },
+        { icon: "Search", label: "Search" },
+        { icon: "Bell", label: "Notifications" },
+        { icon: "Settings", label: "Settings" }
+      ],
+      className: null
+    }
+  },
+  Kbd: {
+    props: z.object({
+      text: z.string(),
+      className: z.string().nullable()
+    }),
+    description: "Keyboard shortcut badge. Renders an inline <kbd> element styled as a key cap.",
+    example: { text: "\u2318K", className: null }
+  },
+  Menubar: {
+    props: z.object({
+      menus: z.array(
+        z.object({
+          label: z.string(),
+          items: z.array(
+            z.object({
+              label: z.string(),
+              value: z.string(),
+              shortcut: z.string().nullable()
+            })
+          )
+        })
+      ),
+      className: z.string().nullable()
+    }),
+    events: ["select"],
+    description: "Horizontal menu bar with dropdown menus. Each menu has a trigger label and a list of items. Fires select on item click. Built on Radix Menubar.",
+    example: {
+      menus: [
+        { label: "File", items: [
+          { label: "New Document", value: "new", shortcut: "\u2318N" },
+          { label: "Save", value: "save", shortcut: "\u2318S" }
+        ] },
+        { label: "Edit", items: [
+          { label: "Undo", value: "undo", shortcut: "\u2318Z" },
+          { label: "Redo", value: "redo", shortcut: "\u2318\u21E7Z" }
+        ] }
+      ],
+      className: null
+    }
+  },
+  NotFoundBlock: {
+    props: z.object({
+      title: z.string().nullable(),
+      description: z.string().nullable(),
+      backHref: z.string().nullable(),
+      backLabel: z.string().nullable(),
+      variant: z.enum(["not-found", "server-error", "generic-fallback"]).nullable(),
+      metadata: z.array(z.object({ label: z.string(), value: z.string() })).nullable(),
+      supportContent: z.string().nullable(),
+      secondaryActionLabel: z.string().nullable(),
+      className: z.string().nullable()
+    }),
+    events: ["primaryAction", "secondaryAction"],
+    description: "Error/not-found section with animated gradient title, description, primary action button, optional secondary action, and optional variant display (not-found/server-error/generic-fallback), metadata grid, and support content. Embeds a MeteorShower background effect.",
+    example: {
+      title: "Page Not Found",
+      description: "The page you are looking for does not exist or has been moved.",
+      backHref: "/",
+      backLabel: "Back to Home",
+      variant: "not-found",
+      metadata: null,
+      supportContent: null,
+      secondaryActionLabel: null,
+      className: null
+    }
+  }
+};
+
+export { blocksMiscDefinitions };

package/dist/{chunk-T5LXQNIP.js → chunk-WHYKEOUV.js}

@@ -3,6 +3,7 @@ import { motionSpring, useMotionConfig, m } from './chunk-PD2YEH3H.js';
 import { CheckIcon } from './chunk-CXACRCZ4.js';
 import { cn } from './chunk-QYZT24TS.js';
 import * as React from 'react';
+import { useBoundProp } from '@json-render/react';
 import { useTranslations } from 'next-intl';
 import { AnimatePresence } from 'motion/react';
 import { cva } from 'class-variance-authority';
@@ -47,46 +48,50 @@ var stepIndicatorVariants = cva(
     }
   }
 );
+var DEFAULT_STEPS = [];
 function FormWizard({
-  className,
-  variant,
-  size,
-  steps,
-  activeStep: controlledStep,
-  onStepChange,
+  props,
+  bindings,
+  emit,
+  steps = DEFAULT_STEPS,
   onComplete,
-  nextLabel,
-  backLabel,
-  completeLabel,
-  ref,
-  ...props
+  ref
 }) {
+  const {
+    activeStep: activeStepProp,
+    nextLabel,
+    backLabel,
+    completeLabel,
+    variant,
+    size,
+    className
+  } = props;
+  const [boundStep, setBoundStep] = useBoundProp(
+    activeStepProp,
+    bindings?.activeStep
+  );
+  const [internalStep, setInternalStep] = React.useState(0);
+  const isBound = !!bindings?.activeStep;
+  const currentStep = isBound ? boundStep ?? 0 : activeStepProp ?? internalStep;
+  const setStep = isBound ? setBoundStep : setInternalStep;
   const t = useTranslations("components.formWizard");
   const resolvedNextLabel = nextLabel ?? t("next");
   const resolvedBackLabel = backLabel ?? t("back");
   const resolvedCompleteLabel = completeLabel ?? t("complete");
   const motionConfig = useMotionConfig();
-  const [internalStep, setInternalStep] = React.useState(0);
   const [direction, setDirection] = React.useState(0);
-  const currentStep = controlledStep ?? internalStep;
-  const prevStepRef = React.useRef(currentStep);
-  React.useEffect(() => {
-    prevStepRef.current = currentStep;
-  }, [currentStep]);
   const goTo = (step) => {
-    if (onStepChange) {
-      onStepChange(step);
-    } else {
-      setInternalStep(step);
-    }
+    emit("stepChange");
+    setStep(step);
   };
   const handleNext = () => {
     const step = steps[currentStep];
-    if (step.validate && !step.validate()) return;
+    if (step?.validate && !step.validate()) return;
     if (currentStep < steps.length - 1) {
       setDirection(1);
       goTo(currentStep + 1);
     } else {
+      emit("complete");
       onComplete?.();
     }
   };
@@ -101,10 +106,9 @@ function FormWizard({
     "div",
     {
       ref,
-      className: cn(formWizardVariants({ variant, size }), className),
+      className: cn(formWizardVariants({ variant, size }), className ?? void 0),
       role: "group",
       "aria-label": t("formWizard"),
-      ...props,
       children: [
         /* @__PURE__ */ jsx("nav", { "aria-label": t("wizardSteps"), className: "flex items-center gap-2", children: steps.map((step, index) => {
           const state = index < currentStep ? "complete" : index === currentStep ? "active" : "pending";

package/dist/chunk-WRBPEZFY.js

@@ -0,0 +1,80 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-UYT33NG6.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from './chunk-37LY27CX.js';
+import { Button } from './chunk-7KIDDF3I.js';
+import { ChevronsUpDownIcon } from './chunk-SW6QPJM4.js';
+import { CheckIcon } from './chunk-CXACRCZ4.js';
+import { cn } from './chunk-QYZT24TS.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Combobox({
+  options,
+  placeholder = "Select option...",
+  emptyText = "No option found.",
+  value,
+  disabled,
+  onValueChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [internalValue, setInternalValue] = React.useState(value || "");
+  const selectedValue = value !== void 0 ? value : internalValue;
+  const selectedLabel = React.useMemo(
+    () => options.find((option) => option.value === selectedValue)?.label,
+    [options, selectedValue]
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        "aria-label": selectedLabel || placeholder,
+        disabled,
+        className: "w-full sm:w-[200px] justify-between text-text-primary",
+        children: [
+          selectedLabel || placeholder,
+          /* @__PURE__ */ jsx(ChevronsUpDownIcon, { size: 16, className: "ml-2 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ jsxs(Command, { children: [
+      /* @__PURE__ */ jsx(CommandInput, { placeholder: `Search ${placeholder.toLowerCase()}...` }),
+      /* @__PURE__ */ jsxs(CommandList, { children: [
+        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+          CommandItem,
+          {
+            value: option.value,
+            onSelect: (currentValue) => {
+              const newValue = currentValue === selectedValue ? "" : currentValue;
+              if (onValueChange) {
+                onValueChange(newValue);
+              } else {
+                setInternalValue(newValue);
+              }
+              setOpen(false);
+            },
+            className: "text-text-primary",
+            children: [
+              /* @__PURE__ */ jsx(
+                CheckIcon,
+                {
+                  size: 16,
+                  className: cn(
+                    "mr-2",
+                    selectedValue === option.value ? "opacity-100" : "opacity-0"
+                  )
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { Combobox };