@undevy-org/tablewright 0.1.0

package/dist/es/components/layout/Sidebar.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronRight, ChevronLeft } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { useAppShell } from "./app-shell-context.js";
+function isItemActive(href, activeKey) {
+  if (href === "" || href === "/") return activeKey === "" || activeKey === "/";
+  return activeKey === href || activeKey.startsWith(href + "/");
+}
+const Sidebar = React.forwardRef(
+  function Sidebar2({
+    groups,
+    activeKey = "",
+    collapsed: collapsedProp,
+    onCollapsedChange: onCollapsedChangeProp,
+    renderLink,
+    header,
+    footer,
+    className
+  }, ref) {
+    const shell = useAppShell();
+    const collapsed = collapsedProp ?? shell?.collapsed ?? false;
+    const hovering = shell?.hovering ?? false;
+    const effectiveCollapsed = shell ? shell.effectiveCollapsed : collapsed;
+    const onCollapsedChange = onCollapsedChangeProp ?? shell?.onCollapsedChange ?? (() => {
+    });
+    const showExpanded = !effectiveCollapsed;
+    const isOverlay = hovering && collapsed;
+    return /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        ref,
+        "aria-label": "Primary navigation",
+        className: cn(
+          "flex h-full shrink-0 flex-col overflow-hidden border-r border-[var(--border-subtle)] bg-[var(--bg-surface)]",
+          "transition-[width] ease-in-out",
+          isOverlay ? "absolute left-0 top-0 z-40 h-full [box-shadow:var(--shadow-sidebar-overlay)]" : "relative",
+          className
+        ),
+        style: {
+          width: showExpanded ? "var(--size-sidebar-expanded)" : "var(--size-sidebar-collapsed)",
+          transitionDuration: "var(--duration-sidebar)"
+        },
+        children: [
+          header && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex shrink-0 items-center border-b border-[var(--border-subtle)]",
+                showExpanded ? "h-[var(--size-topbar-height)] px-2" : "h-[var(--size-topbar-height)] justify-center px-0"
+              ),
+              children: header
+            }
+          ),
+          /* @__PURE__ */ jsx("nav", { className: "scrollbar-auto-hide min-h-0 flex-1 overflow-y-auto py-2", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { children: [
+            groupIndex > 0 && /* @__PURE__ */ jsx("div", { className: "mx-3 my-1.5 border-t border-[var(--border-subtle)]" }),
+            showExpanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-1 pt-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-[var(--text-tertiary)] first:pt-2", children: group.label }),
+            /* @__PURE__ */ jsx("div", { className: cn("px-2", !showExpanded && "py-1"), children: group.items.map((item) => {
+              const active = isItemActive(item.href, activeKey);
+              const Icon = item.icon;
+              const itemClassName = cn(
+                "flex w-full items-center rounded-[var(--radius-md)] transition-colors",
+                showExpanded ? "gap-2.5 px-3 py-2" : "justify-center p-2.5",
+                active ? "bg-[var(--bg-nav-item-active)] font-medium text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
+              );
+              const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    className: cn(
+                      "shrink-0",
+                      showExpanded ? "h-4 w-4" : "h-[18px] w-[18px]"
+                    )
+                  }
+                ),
+                showExpanded && /* @__PURE__ */ jsx("span", { className: "truncate text-[13px]", children: item.label })
+              ] });
+              if (renderLink) {
+                return /* @__PURE__ */ jsx(React.Fragment, { children: renderLink(item.href, {
+                  className: itemClassName,
+                  children
+                }) }, item.key);
+              }
+              return /* @__PURE__ */ jsx(
+                "a",
+                {
+                  href: item.href,
+                  className: itemClassName,
+                  children
+                },
+                item.key
+              );
+            }) })
+          ] }, group.label)) }),
+          footer,
+          /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] p-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": (
+                // Mirrors the visible-text branches below, isOverlay first: when the
+                // collapsed rail is hovered both isOverlay and showExpanded are true,
+                // and the button reads "Expand". Keying on showExpanded alone made the
+                // accessible name contradict the visible label (WCAG 2.5.3).
+                isOverlay ? "Expand sidebar" : showExpanded ? "Collapse sidebar" : "Expand sidebar"
+              ),
+              onClick: () => onCollapsedChange(!collapsed),
+              className: cn(
+                "flex w-full items-center rounded-[var(--radius-md)] p-2 text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                !showExpanded ? "justify-center" : "gap-2"
+              ),
+              children: isOverlay ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[12px]", children: "Expand" })
+              ] }) : showExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[12px]", children: "Collapse" })
+              ] }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+export {
+  Sidebar
+};

package/dist/es/components/layout/SidebarAccountMenu.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ChevronDown, SunMoon, LogOut } from "lucide-react";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { ThemeSwitch } from "../ui/theme-switch.js";
+import { cn } from "../../lib/utils.js";
+import { useAppShell } from "./app-shell-context.js";
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+function SidebarAccountMenu({
+  name,
+  role,
+  avatarUrl,
+  theme,
+  onThemeChange,
+  menuItems,
+  onSignOut,
+  collapsed: collapsedProp,
+  className
+}) {
+  const shell = useAppShell();
+  const effectiveCollapsed = collapsedProp ?? shell?.effectiveCollapsed ?? false;
+  const showTheme = theme !== void 0 && onThemeChange !== void 0;
+  const hasItemsBelow = menuItems && menuItems.length > 0 || Boolean(onSignOut);
+  const avatar = avatarUrl ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: avatarUrl,
+      alt: name,
+      className: "h-7 w-7 shrink-0 rounded-full object-cover"
+    }
+  ) : /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) });
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: cn(
+          "group flex w-full items-center rounded-[var(--radius-md)] transition-colors hover:bg-[var(--bg-hover)]",
+          effectiveCollapsed ? "justify-center p-1.5" : "gap-2.5 px-3 py-2",
+          className
+        ),
+        children: [
+          avatar,
+          !effectiveCollapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-left text-[13px] font-medium text-[var(--text-primary)]", children: name }),
+            /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-[var(--text-tertiary)] transition-transform group-data-[state=open]:rotate-180" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        side: "bottom",
+        align: "start",
+        sideOffset: 6,
+        className: "min-w-[220px]",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-2 py-2", children: [
+            avatarUrl ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatarUrl,
+                alt: name,
+                className: "h-8 w-8 shrink-0 rounded-full object-cover"
+              }
+            ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name }),
+              role && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] text-[var(--text-secondary)]", children: role })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+          showTheme && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx(SunMoon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[13px]", children: "Theme" })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ThemeSwitch,
+                {
+                  variant: "icon",
+                  value: theme,
+                  onValueChange: onThemeChange
+                }
+              )
+            ] }),
+            hasItemsBelow && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" })
+          ] }),
+          menuItems && menuItems.map((item) => {
+            const Icon = item.icon;
+            return /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: item.onClick,
+                className: cn(
+                  "gap-2 px-3 py-2",
+                  item.variant === "destructive" && "text-red-600"
+                ),
+                children: [
+                  Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
+                  item.label
+                ]
+              },
+              item.key
+            );
+          }),
+          menuItems && menuItems.length > 0 && onSignOut && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+          onSignOut && /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: onSignOut,
+              className: "gap-2 px-3 py-2 text-red-600",
+              children: [
+                /* @__PURE__ */ jsx(LogOut, { className: "h-4 w-4" }),
+                "Sign Out"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SidebarAccountMenu
+};

package/dist/es/components/layout/SidebarUser.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { useAppShell } from "./app-shell-context.js";
+function getInitials(name) {
+  return name.split(" ").map((w) => w[0]).slice(0, 2).join("").toUpperCase();
+}
+const SidebarUser = React.forwardRef(
+  function SidebarUser2({ name, avatarUrl, collapsed: collapsedProp, className }, ref) {
+    const shell = useAppShell();
+    const effectiveCollapsed = collapsedProp ?? shell?.effectiveCollapsed ?? false;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex shrink-0 items-center border-t border-[var(--border-subtle)] p-2",
+          effectiveCollapsed ? "justify-center" : "gap-2.5 px-3",
+          className
+        ),
+        children: [
+          avatarUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: avatarUrl,
+              alt: name,
+              className: "h-8 w-8 shrink-0 rounded-full object-cover"
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
+          !effectiveCollapsed && /* @__PURE__ */ jsx("span", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name })
+        ]
+      }
+    );
+  }
+);
+export {
+  SidebarUser
+};

package/dist/es/components/layout/TopBar.js

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const TopBar = React.forwardRef(
+  function TopBar2({ children, actions, className }, ref) {
+    return /* @__PURE__ */ jsxs(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex shrink-0 items-center justify-between border-b border-[var(--border-subtle)] bg-[var(--bg-body)] px-6",
+          className
+        ),
+        style: { height: "var(--size-topbar-height)" },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+        ]
+      }
+    );
+  }
+);
+export {
+  TopBar
+};

package/dist/es/components/layout/app-shell-context.js

@@ -0,0 +1,9 @@
+import { useContext, createContext } from "react";
+const AppShellContext = createContext(null);
+function useAppShell() {
+  return useContext(AppShellContext);
+}
+export {
+  AppShellContext,
+  useAppShell
+};

package/dist/es/components/ui/badge.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium leading-[1.4]",
+  {
+    variants: {
+      variant: {
+        success: "bg-[var(--tag-green-bg)] text-[var(--tag-green-text)]",
+        warning: "bg-[var(--tag-orange-bg)] text-[var(--tag-orange-text)]",
+        danger: "bg-[var(--tag-pink-bg)] text-[var(--tag-pink-text)]",
+        info: "bg-[var(--tag-blue-bg)] text-[var(--tag-blue-text)]",
+        neutral: "bg-[var(--tag-gray-bg)] text-[var(--tag-gray-text)]",
+        purple: "bg-[var(--tag-purple-bg)] text-[var(--tag-purple-text)]",
+        sky: "bg-[var(--tag-sky-bg)] text-[var(--tag-sky-text)]",
+        indigo: "bg-[var(--tag-indigo-bg)] text-[var(--tag-indigo-text)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export {
+  Badge,
+  badgeVariants
+};

package/dist/es/components/ui/button-footer.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { cn } from "../../lib/utils.js";
+function ButtonFooter({
+  children,
+  className,
+  align = "stretch",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex gap-2 border-t border-[var(--border-subtle)] pt-4",
+        align === "stretch" ? "[&>*]:flex-1" : "justify-end",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  ButtonFooter
+};

package/dist/es/components/ui/button.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils.js";
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-[13px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--accent-primary)] text-[var(--text-on-accent)] hover:opacity-90",
+        secondary: "border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-secondary)] hover:border-[var(--border-focus)] hover:text-[var(--text-primary)]",
+        ghost: "bg-transparent text-[var(--text-secondary)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]"
+      },
+      size: {
+        default: "h-[var(--size-control-md)] px-4",
+        sm: "h-[var(--size-control-sm)] rounded-md px-3 text-[12px]",
+        icon: "h-[var(--size-control-md)] w-[var(--size-control-md)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  buttonVariants
+};

package/dist/es/components/ui/checkbox.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Minus, Check } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-surface)] text-[var(--text-primary)] outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)] data-[state=checked]:border-[var(--accent-primary)] data-[state=checked]:bg-[var(--accent-primary)] data-[state=indeterminate]:border-[var(--accent-primary)] data-[state=indeterminate]:bg-[var(--accent-primary)]",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, { className: "group flex items-center justify-center text-[var(--text-on-accent)]", children: [
+      /* @__PURE__ */ jsx(Minus, { className: "hidden h-3 w-3 group-data-[state=indeterminate]:block" }),
+      /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 group-data-[state=indeterminate]:hidden" })
+    ] })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+export {
+  Checkbox
+};

package/dist/es/components/ui/combobox.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as Command$1 } from "cmdk";
+import { ChevronsUpDown, Check, Search } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover.js";
+const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-[var(--bg-surface)] text-[var(--text-primary)]",
+      className
+    ),
+    ...props
+  }
+));
+Command.displayName = "Command";
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-[var(--border-subtle)] px-2.5", children: [
+  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-3.5 w-3.5 shrink-0 text-[var(--text-tertiary)]" }),
+  /* @__PURE__ */ jsx(
+    Command$1.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-9 w-full bg-transparent py-2 text-[13px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-tertiary)]",
+        className
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = Command$1.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.List,
+  {
+    ref,
+    className: cn("max-h-[280px] overflow-y-auto overflow-x-hidden p-1", className),
+    ...props
+  }
+));
+CommandList.displayName = Command$1.List.displayName;
+const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+  Command$1.Empty,
+  {
+    ref,
+    className: "py-6 text-center text-[12px] text-[var(--text-tertiary)]",
+    ...props
+  }
+));
+CommandEmpty.displayName = Command$1.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-[var(--text-primary)] [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-[10px] [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider [&_[cmdk-group-heading]]:text-[var(--text-tertiary)]",
+      className
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = Command$1.Group.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command$1.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-[12px] outline-none",
+      "data-[selected=true]:bg-[var(--bg-hover)] data-[selected=true]:text-[var(--text-primary)]",
+      "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+      className
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = Command$1.Item.displayName;
+function Combobox({
+  value,
+  onChange,
+  options,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results.",
+  disabled,
+  clearable = true,
+  className,
+  triggerClassName,
+  contentClassName,
+  renderSelected,
+  triggerAriaLabel
+}) {
+  const [open, setOpen] = React.useState(false);
+  const selected = React.useMemo(
+    () => options.find((o) => o.value === value) ?? null,
+    [options, value]
+  );
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        "aria-label": triggerAriaLabel,
+        className: cn(
+          "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface)] px-2.5 text-left text-[13px] text-[var(--text-primary)] outline-none transition-colors",
+          "hover:border-[var(--border-focus)] focus-visible:border-[var(--border-focus)] focus-visible:ring-2 focus-visible:ring-[var(--border-focus)]",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          triggerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: cn("truncate", !selected && "text-[var(--text-tertiary)]"), children: selected ? renderSelected ? renderSelected(selected) : selected.label : placeholder }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-tertiary)]" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        align: "start",
+        className: cn("w-[var(--radix-popover-trigger-width)] p-0", contentClassName),
+        children: /* @__PURE__ */ jsxs(
+          Command,
+          {
+            filter: (itemValue, search) => itemValue.toLowerCase().includes(search.toLowerCase()) ? 1 : 0,
+            children: [
+              /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }),
+              /* @__PURE__ */ jsxs(CommandList, { children: [
+                /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+                /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => {
+                  const isSelected = option.value === value;
+                  return /* @__PURE__ */ jsxs(
+                    CommandItem,
+                    {
+                      value: `${option.label} ${option.value}`,
+                      disabled: option.disabled,
+                      onSelect: () => {
+                        if (isSelected && clearable) onChange(null);
+                        else onChange(option.value);
+                        setOpen(false);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "h-3.5 w-3.5 shrink-0",
+                              isSelected ? "text-[var(--accent-primary)]" : "text-transparent"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+                          /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+                          option.description && /* @__PURE__ */ jsx("span", { className: "truncate text-[11px] text-[var(--text-tertiary)]", children: option.description })
+                        ] })
+                      ]
+                    },
+                    option.value
+                  );
+                }) })
+              ] })
+            ]
+          }
+        )
+      }
+    )
+  ] }) });
+}
+export {
+  Combobox,
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+};