defuss-shadcn 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -17,47 +17,6 @@ function clsx() {
   return n;
 }
 
-const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config) => (props) => {
-  var _config_compoundVariants;
-  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-  const { variants, defaultVariants } = config;
-  const getVariantClassNames = Object.keys(variants).map((variant) => {
-    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-    if (variantProp === null) return null;
-    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-    return variants[variant][variantKey];
-  });
-  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
-    let [key, value] = param;
-    if (value === void 0) {
-      return acc;
-    }
-    acc[key] = value;
-    return acc;
-  }, {});
-  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
-    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-    return Object.entries(compoundVariantOptions).every((param2) => {
-      let [key, value] = param2;
-      return Array.isArray(value) ? value.includes({
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key]) : {
-        ...defaultVariants,
-        ...propsWithoutUndefined
-      }[key] === value;
-    }) ? [
-      ...acc,
-      cvClass,
-      cvClassName
-    ] : acc;
-  }, []);
-  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-};
-
 const concatArrays = (array1, array2) => {
   const combinedArray = new Array(array1.length + array2.length);
   for (let i = 0; i < array1.length; i++) {
@@ -3068,55 +3027,100 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 const cn = (...inputs) => twMerge(clsx(inputs)).trim().split(/\s+/).filter((className, index, array) => index === 0 || className !== array[index - 1]).join(" ");
 
-const buttonVariants = cva(
-  "",
-  {
-    variants: {
-      variant: {
-        default: "btn",
-        outline: "btn-outline",
-        secondary: "btn-secondary",
-        ghost: "btn-ghost",
-        destructive: "btn-destructive",
-        link: "btn-link"
-      },
-      size: {
-        default: "",
-        xs: "btn-xs",
-        sm: "btn-sm",
-        lg: "btn-lg",
-        icon: "btn-icon",
-        "icon-xs": "btn-icon-xs",
-        "icon-sm": "btn-icon-sm",
-        "icon-lg": "btn-icon-lg"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
+const initAccordion = (accordion, type, collapsible) => {
+  accordion.addEventListener("click", (event) => {
+    if (type !== "single") {
+      return;
     }
-  }
-);
-const Button = ({ variant, size, className, children, ...props }) => {
+    const summary = event.target.closest("summary");
+    if (!summary) return;
+    const details = summary.closest("details");
+    if (!details) return;
+    const isOpen = details.hasAttribute("open");
+    if (isOpen && !collapsible) {
+      event.preventDefault();
+      return;
+    }
+    accordion.querySelectorAll("details").forEach((detailsEl) => {
+      if (detailsEl !== details) {
+        detailsEl.removeAttribute("open");
+      }
+    });
+  });
+};
+const Accordion = ({
+  className,
+  children,
+  type = "single",
+  collapsible = false,
+  ...props
+}) => {
+  const ref = defuss.createRef();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "section",
     {
-      class: cn(buttonVariants({ variant, size }), className),
+      ref,
+      class: cn("accordion", className),
+      onMount: () => initAccordion(ref.current, type, collapsible),
       ...props,
       children
     }
   );
 };
+const AccordionItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("details", { class: cn("group border-b last:border-b-0", className), ...props, children });
+const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("summary", { class: cn("list-none [&::-webkit-details-marker]:hidden w-full cursor-pointer px-3 py-3 text-left text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md", className), ...props, children });
+const AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn("px-3 pb-3 pt-0 text-sm text-muted-foreground", className), ...props, children });
 
-const badgeVariants = cva(
-  "",
+const falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config) => (props) => {
+  var _config_compoundVariants;
+  if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+  const { variants, defaultVariants } = config;
+  const getVariantClassNames = Object.keys(variants).map((variant) => {
+    const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+    const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+    if (variantProp === null) return null;
+    const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+    return variants[variant][variantKey];
+  });
+  const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+    let [key, value] = param;
+    if (value === void 0) {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
+    let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+    return Object.entries(compoundVariantOptions).every((param2) => {
+      let [key, value] = param2;
+      return Array.isArray(value) ? value.includes({
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key]) : {
+        ...defaultVariants,
+        ...propsWithoutUndefined
+      }[key] === value;
+    }) ? [
+      ...acc,
+      cvClass,
+      cvClassName
+    ] : acc;
+  }, []);
+  return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+
+const alertVariants = cva(
+  "alert w-full relative",
   {
     variants: {
       variant: {
-        default: "badge",
-        secondary: "badge-secondary",
-        destructive: "badge-destructive",
-        outline: "badge-outline"
+        default: "",
+        destructive: "alert-destructive",
+        warning: "alert-warning",
+        info: "alert-info"
       }
     },
     defaultVariants: {
@@ -3124,46 +3128,67 @@ const badgeVariants = cva(
     }
   }
 );
-const Badge = ({ className, variant, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { class: cn(badgeVariants({ variant }), className), ...props, children });
+const Alert = ({ className, variant, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "alert",
+      class: cn(alertVariants({ variant }), className),
+      ...props,
+      children
+    }
+  );
 };
-
-const Card = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("card", className), ...props, children });
-const CardHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
-const CardTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { class: cn(className), ...props, children });
-const CardDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn(className), ...props, children });
-const CardContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn(className), ...props, children });
-const CardFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
-
-const initAccordion = (accordion) => {
-  accordion.addEventListener("click", (event) => {
-    const summary = event.target.closest("summary");
-    if (!summary) return;
-    const details = summary.closest("details");
-    if (!details) return;
-    accordion.querySelectorAll("details").forEach((detailsEl) => {
-      if (detailsEl !== details) {
-        detailsEl.removeAttribute("open");
-      }
-    });
-  });
+const AlertTitle = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "h2",
+    {
+      class: cn(className),
+      ...props,
+      children
+    }
+  );
 };
-const Accordion = ({ className, children, ...props }) => {
-  const ref = defuss.createRef();
+const AlertDescription = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "section",
     {
-      ref,
-      class: cn("accordion", className),
-      onMount: () => initAccordion(ref.current),
+      class: cn(className),
       ...props,
       children
     }
   );
 };
-const AccordionItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("details", { class: cn("group border-b last:border-b-0", className), ...props, children });
-const AccordionTrigger = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("summary", { class: cn("list-none [&::-webkit-details-marker]:hidden w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-all outline-none rounded-md", className), ...props, children });
-const AccordionContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn(className), ...props, children });
+const AlertAction = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "footer",
+    {
+      class: cn("col-start-2 mt-1", className),
+      ...props,
+      children
+    }
+  );
+};
+
+const AlertDialog = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("dialog", { class: cn("dialog", className), ...props, children });
+const AlertDialogTrigger = ({ dialogId, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    class: cn(className),
+    onClick: () => {
+      const dialog = document.getElementById(dialogId);
+      dialog?.showModal();
+    },
+    ...props,
+    children
+  }
+);
+const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
+const AlertDialogHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
+const AlertDialogTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { class: cn(className), ...props, children });
+const AlertDialogDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn(className), ...props, children });
+const AlertDialogFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
 
 const Avatar = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "img",
@@ -3189,6 +3214,26 @@ const AvatarGroup = ({ className, children, ...props }) => /* @__PURE__ */ jsxRu
   }
 );
 
+const badgeVariants = cva(
+  "",
+  {
+    variants: {
+      variant: {
+        default: "badge",
+        secondary: "badge-secondary",
+        destructive: "badge-destructive",
+        outline: "badge-outline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const Badge = ({ className, variant, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { class: cn(badgeVariants({ variant }), className), ...props, children });
+};
+
 const Breadcrumb = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("nav", { class: cn(className), "aria-label": "Breadcrumb", ...props, children });
 const BreadcrumbList = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ol", { class: cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className), ...props, children });
 const BreadcrumbItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { class: cn("inline-flex items-center gap-1.5", className), ...props, children });
@@ -3196,232 +3241,52 @@ const BreadcrumbLink = ({ className, children, ...props }) => /* @__PURE__ */ js
 const BreadcrumbPage = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { class: cn("text-foreground font-normal", className), "aria-current": "page", ...props, children });
 const BreadcrumbSeparator = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { class: cn(className), "aria-hidden": "true", ...props, children: children || "\u203A" });
 
-const Input = ({ className, type, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type,
-      class: cn(
-        "input",
-        className
-      ),
-      ...props
-    }
-  );
-};
-
-const Label = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("label", { class: cn("label", className), ...props, children });
-};
-
-const Textarea = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("textarea", { class: cn("textarea", className), ...props });
-};
-
-const Progress = ({ className, value = 0, max = 100, ...props }) => {
-  const percentage = Math.max(0, Math.min(100, value / max * 100));
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      class: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": max,
-      "aria-valuenow": value,
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bg-primary h-full w-full flex-1 transition-all", style: `width: ${percentage}%` })
-    }
-  );
-};
-
-const Skeleton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("bg-accent animate-pulse rounded-md", className), ...props });
-
-const itemVariants = cva(
-  "group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] gap-4",
+const buttonVariants = cva(
+  "",
   {
     variants: {
       variant: {
-        default: "border-transparent",
-        outline: "border-border",
-        muted: "border-transparent bg-muted/50"
+        default: "btn",
+        outline: "btn-outline",
+        secondary: "btn-secondary",
+        ghost: "btn-ghost",
+        destructive: "btn-destructive",
+        link: "btn-link"
       },
       size: {
-        default: "p-4",
-        compact: "py-3 px-4 gap-2.5"
-      }
-    },
-    defaultVariants: {
-      variant: "outline",
-      size: "default"
-    }
-  }
-);
-const Item = ({ className, variant, size, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("article", { class: cn(itemVariants({ variant, size }), className), ...props, children });
-const ItemLeading = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex shrink-0 items-center justify-center gap-2", className), ...props, children });
-const ItemContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex flex-1 flex-col gap-1", className), ...props, children });
-const ItemTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { class: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className), ...props, children });
-const ItemDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn("text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className), ...props, children });
-const ItemTrailing = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex items-center gap-2", className), ...props, children });
-
-const Kbd = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "kbd",
-    {
-      class: cn(
-        "kbd pointer-events-none inline-flex items-center justify-center select-none",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-};
-const KbdGroup = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      class: cn("kbd-group inline-flex items-center gap-1", className),
-      ...props,
-      children
-    }
-  );
-};
-
-const Spinner = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      role: "status",
-      "aria-label": "Loading",
-      class: cn("animate-spin", className),
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      stroke: "currentColor",
-      "stroke-width": "2",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-    }
-  );
-};
-
-const Separator = ({
-  className,
-  orientation = "horizontal",
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "hr",
-    {
-      role: "separator",
-      "aria-orientation": orientation,
-      class: cn(className),
-      ...props
-    }
-  );
-};
-
-const Tooltip = ({
-  className,
-  tooltip,
-  side,
-  align,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      "data-tooltip": tooltip,
-      "data-side": side,
-      "data-align": align,
-      class: cn(className),
-      ...props,
-      children
-    }
-  );
-};
-
-const Form = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("form", { class: cn("form", className), ...props, children });
-const FormField = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("field", className), ...props, children });
-
-const alertVariants = cva(
-  "alert w-full relative",
-  {
-    variants: {
-      variant: {
         default: "",
-        destructive: "alert-destructive"
+        xs: "btn-xs",
+        sm: "btn-sm",
+        lg: "btn-lg",
+        icon: "btn-icon",
+        "icon-xs": "btn-icon-xs",
+        "icon-sm": "btn-icon-sm",
+        "icon-lg": "btn-icon-lg"
       }
     },
     defaultVariants: {
-      variant: "default"
+      variant: "default",
+      size: "default"
     }
   }
 );
-const Alert = ({ className, variant, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "alert",
-      class: cn(alertVariants({ variant }), className),
-      ...props,
-      children
-    }
-  );
-};
-const AlertTitle = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "h2",
-    {
-      class: cn(className),
-      ...props,
-      children
-    }
-  );
-};
-const AlertDescription = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "section",
-    {
-      class: cn(className),
-      ...props,
-      children
-    }
-  );
-};
-const AlertAction = ({ className, children, ...props }) => {
+const Button = ({ variant, size, className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "footer",
+    "button",
     {
-      class: cn("col-start-2 mt-1", className),
+      class: cn(buttonVariants({ variant, size }), className),
       ...props,
       children
     }
   );
 };
 
-const AlertDialog = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("dialog", { class: cn("dialog", className), ...props, children });
-const AlertDialogTrigger = ({ dialogId, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "button",
-  {
-    type: "button",
-    class: cn(className),
-    onClick: () => {
-      const dialog = document.getElementById(dialogId);
-      dialog?.showModal();
-    },
-    ...props,
-    children
-  }
-);
-const AlertDialogContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
-const AlertDialogHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
-const AlertDialogTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { class: cn(className), ...props, children });
-const AlertDialogDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn(className), ...props, children });
-const AlertDialogFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
+const Card = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("card", className), ...props, children });
+const CardHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
+const CardTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h2", { class: cn(className), ...props, children });
+const CardDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn(className), ...props, children });
+const CardContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn(className), ...props, children });
+const CardFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
 
 const Checkbox = ({
   className,
@@ -3441,286 +3306,482 @@ const Checkbox = ({
   );
 };
 
-const Switch = ({
-  className,
-  checked,
-  onCheckedChange,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "checkbox",
-      role: "switch",
-      class: cn("input", className),
-      checked,
-      onChange: (e) => onCheckedChange?.(e.target.checked),
-      ...props
-    }
-  );
-};
-
-const RadioGroup = ({
-  className,
-  value,
-  onValueChange,
-  name,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "radiogroup",
-      class: cn(className),
-      ...props,
-      children
-    }
-  );
-};
-const RadioGroupItem = ({
-  className,
-  value,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      type: "radio",
-      value,
-      class: cn("input", className),
-      ...props
+const initCombobox = (component, onValueChange, disabled = false) => {
+  const trigger = component.querySelector(":scope > button");
+  const triggerLabel = trigger?.querySelector(":scope > span");
+  const popover = component.querySelector(":scope > [data-popover]");
+  const filter = popover?.querySelector('header input[role="combobox"]');
+  const listbox = popover?.querySelector('[role="listbox"]');
+  const allOptions = listbox ? Array.from(listbox.querySelectorAll('[role="option"]')) : [];
+  const options = allOptions.filter((option) => option.getAttribute("aria-disabled") !== "true");
+  const hiddenInput = component.querySelector(':scope > input[type="hidden"]');
+  if (!trigger || !triggerLabel || !popover || !filter || !listbox || !hiddenInput) {
+    return;
+  }
+  if (disabled) {
+    trigger.disabled = true;
+    trigger.setAttribute("aria-disabled", "true");
+    trigger.setAttribute("aria-expanded", "false");
+    filter.disabled = true;
+    filter.setAttribute("aria-expanded", "false");
+    popover.setAttribute("aria-hidden", "true");
+    component.dataset.comboboxInitialized = "true";
+    component.dispatchEvent(new CustomEvent("basecoat:initialized"));
+    return;
+  }
+  if (!trigger.id && component.id) {
+    trigger.id = `${component.id}-trigger`;
+  }
+  if (!popover.id && component.id) {
+    popover.id = `${component.id}-popover`;
+  }
+  if (!listbox.id && component.id) {
+    listbox.id = `${component.id}-listbox`;
+  }
+  trigger.setAttribute("aria-controls", listbox.id);
+  listbox.setAttribute("aria-labelledby", trigger.id);
+  const setVisible = (option, visible) => {
+    option.setAttribute("aria-hidden", String(!visible));
+  };
+  const filteredOptions = () => options.filter((o) => o.getAttribute("aria-hidden") !== "true");
+  const getOptionValue = (option) => option.dataset.value ?? option.textContent?.trim() ?? "";
+  options.forEach((option, index) => {
+    if (!option.id) {
+      option.id = `${component.id}-option-${index}`;
     }
-  );
-};
-
-const Slider = ({
-  className,
-  min = 0,
-  max = 100,
-  step = 1,
-  value,
-  onValueChange,
-  ...props
-}) => {
-  const sliderRef = defuss.createRef();
-  const updateSliderValue = () => {
-    if (!sliderRef.current) return;
-    const val = Number(sliderRef.current.value);
-    const percentage = (val - min) / (max - min) * 100;
-    sliderRef.current.style.setProperty("--slider-value", `${percentage}%`);
-    onValueChange?.(val);
+  });
+  let activeIndex = -1;
+  const setActive = (index) => {
+    const visible = filteredOptions();
+    options.forEach((option) => option.classList.remove("active"));
+    activeIndex = index;
+    if (activeIndex >= 0 && visible[activeIndex]) {
+      visible[activeIndex].classList.add("active");
+      trigger.setAttribute("aria-activedescendant", visible[activeIndex].id);
+      visible[activeIndex].scrollIntoView({ block: "nearest" });
+      return;
+    }
+    trigger.removeAttribute("aria-activedescendant");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "input",
-    {
-      ref: sliderRef,
-      type: "range",
-      min,
-      max,
-      step,
-      value,
-      class: cn("input", className),
-      onInput: updateSliderValue,
-      onMount: updateSliderValue,
-      ...props
+  const close = (focusTrigger = true) => {
+    popover.setAttribute("aria-hidden", "true");
+    trigger.setAttribute("aria-expanded", "false");
+    filter.setAttribute("aria-expanded", "false");
+    if (focusTrigger) {
+      trigger.focus();
     }
-  );
-};
-
-const Table = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: "table-container", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
-    {
-      class: cn("table", className),
-      ...props,
-      children
+    filter.value = "";
+    allOptions.forEach((option) => setVisible(option, true));
+    setActive(-1);
+  };
+  const open = () => {
+    document.dispatchEvent(new CustomEvent("basecoat:popover", {
+      detail: { source: component }
+    }));
+    popover.setAttribute("aria-hidden", "false");
+    trigger.setAttribute("aria-expanded", "true");
+    filter.setAttribute("aria-expanded", "true");
+    filter.focus();
+    const selected = options.find((option) => option.getAttribute("aria-selected") === "true");
+    if (selected) {
+      const visible = filteredOptions();
+      setActive(Math.max(visible.indexOf(selected), 0));
+    } else {
+      setActive(0);
     }
-  ) });
-};
-const TableHeader = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "thead",
-    {
-      class: cn("table-header", className),
-      ...props,
-      children
+  };
+  const dispatchChange = (value) => {
+    component.dispatchEvent(new CustomEvent("change", {
+      detail: { value },
+      bubbles: true
+    }));
+  };
+  const selectOption = (option, triggerEvent = true) => {
+    const value = getOptionValue(option);
+    hiddenInput.value = value;
+    triggerLabel.textContent = option.textContent ?? "";
+    allOptions.forEach((candidate) => {
+      if (candidate === option) {
+        candidate.setAttribute("aria-selected", "true");
+      } else {
+        candidate.removeAttribute("aria-selected");
+      }
+    });
+    onValueChange?.(value);
+    if (triggerEvent) {
+      dispatchChange(value);
     }
-  );
-};
-const TableBody = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tbody",
-    {
-      class: cn("table-body", className),
-      ...props,
-      children
+    close();
+  };
+  trigger.addEventListener("click", () => {
+    const expanded = trigger.getAttribute("aria-expanded") === "true";
+    if (expanded) {
+      close();
+    } else {
+      open();
     }
-  );
-};
-const TableFooter = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tfoot",
-    {
-      class: cn("table-footer", className),
-      ...props,
-      children
+  });
+  filter.addEventListener("input", () => {
+    const term = filter.value.trim().toLowerCase();
+    allOptions.forEach((option) => {
+      if (option.hasAttribute("data-force")) {
+        setVisible(option, true);
+        return;
+      }
+      const label = (option.dataset.filter || option.textContent || "").toLowerCase();
+      const keywords = (option.dataset.keywords || "").toLowerCase();
+      const visible = label.includes(term) || keywords.includes(term);
+      setVisible(option, visible);
+    });
+    if (filteredOptions().length > 0) {
+      setActive(0);
+    } else {
+      setActive(-1);
     }
-  );
+  });
+  const onKeyboard = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) return;
+    const isOpen = popover.getAttribute("aria-hidden") !== "true";
+    if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter")) {
+      event.preventDefault();
+      open();
+      return;
+    }
+    if (!isOpen) return;
+    const visible = filteredOptions();
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (visible.length === 0) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setActive(Math.min(activeIndex + 1, visible.length - 1));
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive(Math.max(activeIndex - 1, 0));
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = visible[Math.max(activeIndex, 0)];
+      if (option) {
+        selectOption(option);
+      }
+    }
+  };
+  trigger.addEventListener("keydown", onKeyboard);
+  filter.addEventListener("keydown", onKeyboard);
+  listbox.addEventListener("click", (event) => {
+    const option = event.target.closest('[role="option"]');
+    if (!option || option.getAttribute("aria-disabled") === "true") return;
+    selectOption(option);
+  });
+  document.addEventListener("click", (event) => {
+    if (!component.contains(event.target)) {
+      close(false);
+    }
+  });
+  document.addEventListener("basecoat:popover", ((event) => {
+    if (event.detail.source !== component) {
+      close(false);
+    }
+  }));
+  const initialOption = options.find((option) => getOptionValue(option) === hiddenInput.value) || options[0];
+  if (initialOption) {
+    const value = getOptionValue(initialOption);
+    hiddenInput.value = value;
+    triggerLabel.textContent = initialOption.textContent ?? "";
+    allOptions.forEach((candidate) => {
+      if (candidate === initialOption) {
+        candidate.setAttribute("aria-selected", "true");
+      } else {
+        candidate.removeAttribute("aria-selected");
+      }
+    });
+  }
+  component.selectByValue = (value) => {
+    const option = options.find((candidate) => getOptionValue(candidate) === value);
+    if (option) {
+      selectOption(option);
+    }
+  };
+  popover.setAttribute("aria-hidden", "true");
+  component.dataset.comboboxInitialized = "true";
+  component.dispatchEvent(new CustomEvent("basecoat:initialized"));
 };
-const TableRow = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
+const Combobox = ({
+  id,
+  className,
+  placeholder = "Select option",
+  searchPlaceholder = "Search entries...",
+  onValueChange,
+  disabled = false,
+  children,
+  ...props
+}) => {
+  const rootRef = defuss.createRef();
+  const comboboxId = id || `combobox-${Math.random().toString(36).slice(2, 9)}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      class: cn("table-row", className),
+      ref: rootRef,
+      id: comboboxId,
+      class: cn("select", className),
+      onMount: () => initCombobox(rootRef.current, onValueChange, disabled),
       ...props,
-      children
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            id: `${comboboxId}-trigger`,
+            "aria-haspopup": "listbox",
+            "aria-expanded": "false",
+            "aria-controls": `${comboboxId}-listbox`,
+            "aria-disabled": disabled,
+            disabled,
+            class: "btn-outline w-full justify-between",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { class: "truncate", children: placeholder }),
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "text-muted-foreground opacity-50 shrink-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `${comboboxId}-popover`, "data-popover": "", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-search", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: searchPlaceholder,
+                disabled,
+                autocomplete: "off",
+                autocorrect: "off",
+                spellcheck: false,
+                "aria-autocomplete": "list",
+                role: "combobox",
+                "aria-expanded": "false",
+                "aria-controls": `${comboboxId}-listbox`,
+                "aria-labelledby": `${comboboxId}-trigger`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "listbox",
+              id: `${comboboxId}-listbox`,
+              "aria-orientation": "vertical",
+              "aria-labelledby": `${comboboxId}-trigger`,
+              "data-empty": "No results found.",
+              children
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${comboboxId}-value`, value: "" })
+      ]
     }
   );
 };
-const TableHead = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "th",
-    {
-      class: cn("table-head", className),
-      ...props,
-      children
-    }
+const ComboboxOption = ({ className, value, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "option", "data-value": value, class: cn(className), ...props, children: Array.isArray(children) ? children.length > 0 ? children : value : children ?? value });
+
+const initCommand = (container) => {
+  const input = container.querySelector("header input");
+  const menu = container.querySelector('[role="menu"]');
+  if (!input || !menu) {
+    const missing = [];
+    if (!input) missing.push("input");
+    if (!menu) missing.push("menu");
+    console.error(`Command component initialization failed. Missing element(s): ${missing.join(", ")}`, container);
+    return;
+  }
+  const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+  const menuItems = allMenuItems.filter(
+    (item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true"
   );
-};
-const TableCell = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
-    {
-      class: cn("table-cell", className),
-      ...props,
-      children
+  let visibleMenuItems = [...menuItems];
+  let activeIndex = -1;
+  const setActiveItem = (index) => {
+    if (activeIndex > -1 && menuItems[activeIndex]) {
+      menuItems[activeIndex].classList.remove("active");
     }
-  );
-};
-const TableCaption = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "caption",
-    {
-      class: cn("table-caption", className),
-      ...props,
-      children
+    activeIndex = index;
+    if (activeIndex > -1) {
+      const activeItem = menuItems[activeIndex];
+      activeItem.classList.add("active");
+      if (activeItem.id) {
+        input.setAttribute("aria-activedescendant", activeItem.id);
+      } else {
+        input.removeAttribute("aria-activedescendant");
+      }
+    } else {
+      input.removeAttribute("aria-activedescendant");
     }
-  );
-};
-
-const initTabs = (tabsComponent) => {
-  const tablist = tabsComponent.querySelector('[role="tablist"]');
-  if (!tablist) return;
-  const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
-  const panels = tabs.map(
-    (tab) => document.getElementById(tab.getAttribute("aria-controls") || "")
-  ).filter(Boolean);
-  const selectTab = (tabToSelect) => {
-    tabs.forEach((tab, index) => {
-      tab.setAttribute("aria-selected", "false");
-      tab.setAttribute("tabindex", "-1");
-      if (panels[index]) panels[index].hidden = true;
+  };
+  const filterMenuItems = () => {
+    const searchTerm = input.value.trim().toLowerCase();
+    setActiveItem(-1);
+    visibleMenuItems = [];
+    allMenuItems.forEach((item) => {
+      if (item.hasAttribute("data-force")) {
+        item.setAttribute("aria-hidden", "false");
+        if (menuItems.includes(item)) {
+          visibleMenuItems.push(item);
+        }
+        return;
+      }
+      const itemText = (item.dataset.filter || item.textContent || "").trim().toLowerCase();
+      const keywordList = (item.dataset.keywords || "").toLowerCase().split(/[\s,]+/).filter(Boolean);
+      const matchesKeyword = keywordList.some((keyword) => keyword.includes(searchTerm));
+      const matches = itemText.includes(searchTerm) || matchesKeyword;
+      item.setAttribute("aria-hidden", String(!matches));
+      if (matches && menuItems.includes(item)) {
+        visibleMenuItems.push(item);
+      }
     });
-    tabToSelect.setAttribute("aria-selected", "true");
-    tabToSelect.setAttribute("tabindex", "0");
-    const activePanel = document.getElementById(tabToSelect.getAttribute("aria-controls") || "");
-    if (activePanel) activePanel.hidden = false;
+    if (visibleMenuItems.length > 0) {
+      setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+      visibleMenuItems[0].scrollIntoView({ block: "nearest" });
+    }
   };
-  tablist.addEventListener("click", (event) => {
-    const clickedTab = event.target.closest('[role="tab"]');
-    if (clickedTab) selectTab(clickedTab);
-  });
-  tablist.addEventListener("keydown", (event) => {
-    const currentTab = event.target;
-    if (!tabs.includes(currentTab)) return;
-    let nextTab;
-    const currentIndex = tabs.indexOf(currentTab);
+  input.addEventListener("input", filterMenuItems);
+  const handleKeyNavigation = (event) => {
+    if (!["ArrowDown", "ArrowUp", "Enter", "Home", "End"].includes(event.key)) {
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (activeIndex > -1) {
+        menuItems[activeIndex]?.click();
+      }
+      return;
+    }
+    if (visibleMenuItems.length === 0) return;
+    event.preventDefault();
+    const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
+    let nextVisibleIndex = currentVisibleIndex;
     switch (event.key) {
-      case "ArrowRight":
-        nextTab = tabs[(currentIndex + 1) % tabs.length];
+      case "ArrowDown":
+        if (currentVisibleIndex < visibleMenuItems.length - 1) {
+          nextVisibleIndex = currentVisibleIndex + 1;
+        }
         break;
-      case "ArrowLeft":
-        nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
+      case "ArrowUp":
+        if (currentVisibleIndex > 0) {
+          nextVisibleIndex = currentVisibleIndex - 1;
+        } else if (currentVisibleIndex === -1) {
+          nextVisibleIndex = 0;
+        }
         break;
       case "Home":
-        nextTab = tabs[0];
+        nextVisibleIndex = 0;
         break;
       case "End":
-        nextTab = tabs[tabs.length - 1];
+        nextVisibleIndex = visibleMenuItems.length - 1;
         break;
-      default:
-        return;
     }
-    event.preventDefault();
-    if (nextTab) {
-      selectTab(nextTab);
-      nextTab.focus();
+    if (nextVisibleIndex !== currentVisibleIndex) {
+      const newActiveItem = visibleMenuItems[nextVisibleIndex];
+      setActiveItem(menuItems.indexOf(newActiveItem));
+      newActiveItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }
-  });
-  tabsComponent.dataset.tabsInitialized = true;
-  tabsComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
-};
-const Tabs = ({ className, defaultValue, children, ...props }) => {
-  const tabsRef = defuss.createRef();
-  const onMount = () => {
-    if (!tabsRef.current) return;
-    initTabs(tabsRef.current);
-    if (defaultValue) {
-      const defaultTab = tabsRef.current.querySelector(`[role="tab"][data-value="${defaultValue}"]`);
-      if (defaultTab) {
-        defaultTab.click();
+  };
+  menu.addEventListener("mousemove", (event) => {
+    const menuItem = event.target.closest('[role="menuitem"]');
+    if (menuItem && visibleMenuItems.includes(menuItem)) {
+      const index = menuItems.indexOf(menuItem);
+      if (index !== activeIndex) {
+        setActiveItem(index);
       }
-    } else {
-      const firstTab = tabsRef.current.querySelector('[role="tab"]');
-      if (firstTab) {
-        firstTab.click();
+    }
+  });
+  menu.addEventListener("click", (event) => {
+    const clickedItem = event.target.closest('[role="menuitem"]');
+    if (clickedItem && visibleMenuItems.includes(clickedItem)) {
+      const dialog = container.closest("dialog.command-dialog");
+      if (dialog && !clickedItem.hasAttribute("data-keep-command-open")) {
+        dialog.close();
       }
     }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tabsRef, class: cn("tabs", className), onMount, ...props, children });
+  });
+  input.addEventListener("keydown", handleKeyNavigation);
+  if (visibleMenuItems.length > 0) {
+    setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+    visibleMenuItems[0].scrollIntoView({ block: "nearest" });
+  }
+  container.dataset.commandInitialized = true;
+  container.dispatchEvent(new CustomEvent("basecoat:initialized"));
 };
-const TabsList = ({ className, children, ...props }) => {
+const Command = ({ className, children, ...props }) => {
+  const commandRef = defuss.createRef();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "nav",
+    "div",
     {
-      role: "tablist",
-      "aria-orientation": "horizontal",
-      class: cn(className),
+      ref: commandRef,
+      class: cn("command", className),
+      onMount: () => initCommand(commandRef.current),
       ...props,
       children
     }
   );
 };
-const TabsTrigger = ({ className, value, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      role: "tab",
-      tabIndex: -1,
-      "aria-selected": "false",
-      "aria-controls": `panel-${value}`,
-      "data-value": value,
-      class: cn(className),
-      ...props,
-      children
-    }
-  );
+const CommandInput = ({ className, placeholder, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-search", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        placeholder,
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": "true",
+        class: cn(className),
+        ...props
+      }
+    )
+  ] });
 };
-const TabsContent = ({ className, value, children, ...props }) => {
+const CommandList = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", class: cn("scrollbar", className), ...props, children });
+};
+const CommandGroup = ({ className, heading, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", class: cn(className), ...props, children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", children: heading }),
+    children
+  ] });
+};
+const CommandItem = ({ className, keywords, disabled, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
-    {
-      role: "tabpanel",
-      id: `panel-${value}`,
-      tabIndex: -1,
-      hidden: true,
+    {
+      role: "menuitem",
+      "data-keywords": keywords,
+      "aria-disabled": disabled,
       class: cn(className),
       ...props,
       children
     }
   );
 };
+const CommandEmpty = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
+};
+const CommandSeparator = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", class: cn(className), ...props });
+};
 
 const Dialog = ({ className, id, open, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3785,783 +3846,927 @@ const DialogClose = ({ className, children, ...props }) => {
   );
 };
 
-const initPopover = (popoverComponent) => {
-  const trigger = popoverComponent.querySelector(":scope > button");
-  const content = popoverComponent.querySelector(":scope > [data-popover]");
-  if (!trigger || !content) {
+const initDropdownMenu = (dropdownMenuComponent) => {
+  const trigger = dropdownMenuComponent.querySelector(":scope > button");
+  const popover = dropdownMenuComponent.querySelector(":scope > [data-popover]");
+  const menu = popover?.querySelector('[role="menu"]');
+  if (!trigger || !menu || !popover) {
     const missing = [];
     if (!trigger) missing.push("trigger");
-    if (!content) missing.push("content");
-    console.error(`Popover initialisation failed. Missing element(s): ${missing.join(", ")}`, popoverComponent);
+    if (!menu) missing.push("menu");
+    if (!popover) missing.push("popover");
+    console.error(`Dropdown menu initialisation failed. Missing element(s): ${missing.join(", ")}`, dropdownMenuComponent);
     return;
   }
-  const rootId = popoverComponent.id || `popover-${Math.random().toString(36).slice(2, 9)}`;
-  if (!popoverComponent.id) {
-    popoverComponent.id = rootId;
+  const rootId = dropdownMenuComponent.id || `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;
+  if (!dropdownMenuComponent.id) {
+    dropdownMenuComponent.id = rootId;
   }
   if (!trigger.id) {
     trigger.id = `${rootId}-trigger`;
   }
-  if (!content.id) {
-    content.id = `${rootId}-popover`;
+  if (!popover.id) {
+    popover.id = `${rootId}-popover`;
   }
-  trigger.setAttribute("aria-controls", content.id);
-  content.setAttribute("aria-labelledby", trigger.id);
+  if (!menu.id) {
+    menu.id = `${rootId}-menu`;
+  }
+  trigger.setAttribute("aria-controls", menu.id);
+  menu.setAttribute("aria-labelledby", trigger.id);
+  let menuItems = [];
+  let activeIndex = -1;
   const closePopover = (focusOnTrigger = true) => {
     if (trigger.getAttribute("aria-expanded") === "false") return;
     trigger.setAttribute("aria-expanded", "false");
-    content.setAttribute("aria-hidden", "true");
+    trigger.removeAttribute("aria-activedescendant");
+    popover.setAttribute("aria-hidden", "true");
     if (focusOnTrigger) {
       trigger.focus();
     }
+    setActiveItem(-1);
   };
-  const openPopover = () => {
+  const openPopover = (initialSelection = false) => {
     document.dispatchEvent(new CustomEvent("basecoat:popover", {
-      detail: { source: popoverComponent }
+      detail: { source: dropdownMenuComponent }
     }));
-    const elementToFocus = content.querySelector("[autofocus]");
-    if (elementToFocus) {
-      content.addEventListener("transitionend", () => {
-        elementToFocus.focus();
-      }, { once: true });
-    }
     trigger.setAttribute("aria-expanded", "true");
-    content.setAttribute("aria-hidden", "false");
-  };
-  trigger.addEventListener("click", () => {
-    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
-    if (isExpanded) {
-      closePopover();
-    } else {
-      openPopover();
-    }
-  });
-  popoverComponent.addEventListener("keydown", (event) => {
-    if (event.key === "Escape") {
-      closePopover();
-    }
-  });
-  document.addEventListener("click", (event) => {
-    if (!popoverComponent.contains(event.target)) {
-      closePopover();
-    }
-  });
-  document.addEventListener("basecoat:popover", ((event) => {
-    if (event.detail.source !== popoverComponent) {
-      closePopover(false);
-    }
-  }));
-  popoverComponent.dataset.popoverInitialized = true;
-  popoverComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
-};
-const Popover = ({ id, className, children, ...props }) => {
-  const popoverRef = defuss.createRef();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: popoverRef,
-      id,
-      class: cn("popover", className),
-      onMount: () => initPopover(popoverRef.current),
-      ...props,
-      children
-    }
-  );
-};
-const PopoverTrigger = ({ id, className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      ...props,
-      id,
-      type: "button",
-      "aria-expanded": "false",
-      class: cn(className),
-      children
-    }
-  );
-};
-const PopoverContent = ({ id, className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...props,
-      id,
-      "data-popover": "",
-      "aria-hidden": "true",
-      "aria-labelledby": id ? id.replace("-popover", "-trigger") : void 0,
-      class: cn(className),
-      children
+    popover.setAttribute("aria-hidden", "false");
+    menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(
+      (item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true"
+    );
+    if (menuItems.length > 0 && initialSelection) {
+      if (initialSelection === "first") {
+        setActiveItem(0);
+      } else if (initialSelection === "last") {
+        setActiveItem(menuItems.length - 1);
+      }
     }
-  );
-};
-
-const initCombobox = (component, onValueChange) => {
-  const trigger = component.querySelector(":scope > button");
-  const triggerLabel = trigger?.querySelector(":scope > span");
-  const popover = component.querySelector(":scope > [data-popover]");
-  const filter = popover?.querySelector('header input[role="combobox"]');
-  const listbox = popover?.querySelector('[role="listbox"]');
-  const allOptions = listbox ? Array.from(listbox.querySelectorAll('[role="option"]')) : [];
-  const options = allOptions.filter((option) => option.getAttribute("aria-disabled") !== "true");
-  const hiddenInput = component.querySelector(':scope > input[type="hidden"]');
-  if (!trigger || !triggerLabel || !popover || !filter || !listbox || !hiddenInput) {
-    return;
-  }
-  if (!trigger.id && component.id) {
-    trigger.id = `${component.id}-trigger`;
-  }
-  if (!popover.id && component.id) {
-    popover.id = `${component.id}-popover`;
-  }
-  if (!listbox.id && component.id) {
-    listbox.id = `${component.id}-listbox`;
-  }
-  trigger.setAttribute("aria-controls", listbox.id);
-  listbox.setAttribute("aria-labelledby", trigger.id);
-  const setVisible = (option, visible) => {
-    option.setAttribute("aria-hidden", String(!visible));
   };
-  const filteredOptions = () => options.filter((o) => o.getAttribute("aria-hidden") !== "true");
-  const getOptionValue = (option) => option.dataset.value ?? option.textContent?.trim() ?? "";
-  options.forEach((option, index) => {
-    if (!option.id) {
-      option.id = `${component.id}-option-${index}`;
+  const setActiveItem = (index) => {
+    if (activeIndex > -1 && menuItems[activeIndex]) {
+      menuItems[activeIndex].classList.remove("active");
     }
-  });
-  let activeIndex = -1;
-  const setActive = (index) => {
-    const visible = filteredOptions();
-    options.forEach((option) => option.classList.remove("active"));
     activeIndex = index;
-    if (activeIndex >= 0 && visible[activeIndex]) {
-      visible[activeIndex].classList.add("active");
-      trigger.setAttribute("aria-activedescendant", visible[activeIndex].id);
-      visible[activeIndex].scrollIntoView({ block: "nearest" });
-      return;
-    }
-    trigger.removeAttribute("aria-activedescendant");
-  };
-  const close = (focusTrigger = true) => {
-    popover.setAttribute("aria-hidden", "true");
-    trigger.setAttribute("aria-expanded", "false");
-    filter.setAttribute("aria-expanded", "false");
-    if (focusTrigger) {
-      trigger.focus();
-    }
-    filter.value = "";
-    allOptions.forEach((option) => setVisible(option, true));
-    setActive(-1);
-  };
-  const open = () => {
-    document.dispatchEvent(new CustomEvent("basecoat:popover", {
-      detail: { source: component }
-    }));
-    popover.setAttribute("aria-hidden", "false");
-    trigger.setAttribute("aria-expanded", "true");
-    filter.setAttribute("aria-expanded", "true");
-    filter.focus();
-    const selected = options.find((option) => option.getAttribute("aria-selected") === "true");
-    if (selected) {
-      const visible = filteredOptions();
-      setActive(Math.max(visible.indexOf(selected), 0));
+    if (activeIndex > -1 && menuItems[activeIndex]) {
+      const activeItem = menuItems[activeIndex];
+      activeItem.classList.add("active");
+      trigger.setAttribute("aria-activedescendant", activeItem.id);
     } else {
-      setActive(0);
-    }
-  };
-  const dispatchChange = (value) => {
-    component.dispatchEvent(new CustomEvent("change", {
-      detail: { value },
-      bubbles: true
-    }));
-  };
-  const selectOption = (option, triggerEvent = true) => {
-    const value = getOptionValue(option);
-    hiddenInput.value = value;
-    triggerLabel.textContent = option.textContent ?? "";
-    allOptions.forEach((candidate) => {
-      if (candidate === option) {
-        candidate.setAttribute("aria-selected", "true");
-      } else {
-        candidate.removeAttribute("aria-selected");
-      }
-    });
-    onValueChange?.(value);
-    if (triggerEvent) {
-      dispatchChange(value);
+      trigger.removeAttribute("aria-activedescendant");
     }
-    close();
   };
   trigger.addEventListener("click", () => {
-    const expanded = trigger.getAttribute("aria-expanded") === "true";
-    if (expanded) {
-      close();
-    } else {
-      open();
-    }
-  });
-  filter.addEventListener("input", () => {
-    const term = filter.value.trim().toLowerCase();
-    allOptions.forEach((option) => {
-      if (option.hasAttribute("data-force")) {
-        setVisible(option, true);
-        return;
-      }
-      const label = (option.dataset.filter || option.textContent || "").toLowerCase();
-      const keywords = (option.dataset.keywords || "").toLowerCase();
-      const visible = label.includes(term) || keywords.includes(term);
-      setVisible(option, visible);
-    });
-    if (filteredOptions().length > 0) {
-      setActive(0);
+    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+    if (isExpanded) {
+      closePopover();
     } else {
-      setActive(-1);
+      openPopover(false);
     }
   });
-  const onKeyboard = (event) => {
-    if (!["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(event.key)) return;
-    const isOpen = popover.getAttribute("aria-hidden") !== "true";
-    if (!isOpen && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter")) {
-      event.preventDefault();
-      open();
+  dropdownMenuComponent.addEventListener("keydown", (event) => {
+    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+    if (event.key === "Escape") {
+      if (isExpanded) closePopover();
       return;
     }
-    if (!isOpen) return;
-    const visible = filteredOptions();
-    if (event.key === "Escape") {
-      event.preventDefault();
-      close();
+    if (!isExpanded) {
+      if (["Enter", " "].includes(event.key)) {
+        event.preventDefault();
+        openPopover(false);
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        openPopover("first");
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        openPopover("last");
+      }
       return;
     }
-    if (visible.length === 0) return;
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      setActive(Math.min(activeIndex + 1, visible.length - 1));
+    if (menuItems.length === 0) return;
+    let nextIndex = activeIndex;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        nextIndex = activeIndex === -1 ? 0 : Math.min(activeIndex + 1, menuItems.length - 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        nextIndex = activeIndex === -1 ? menuItems.length - 1 : Math.max(activeIndex - 1, 0);
+        break;
+      case "Home":
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        event.preventDefault();
+        nextIndex = menuItems.length - 1;
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        menuItems[activeIndex]?.click();
+        closePopover();
+        return;
     }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      setActive(Math.max(activeIndex - 1, 0));
+    if (nextIndex !== activeIndex) {
+      setActiveItem(nextIndex);
     }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const option = visible[Math.max(activeIndex, 0)];
-      if (option) {
-        selectOption(option);
+  });
+  menu.addEventListener("mousemove", (event) => {
+    const menuItem = event.target.closest('[role^="menuitem"]');
+    if (menuItem && menuItems.includes(menuItem)) {
+      const index = menuItems.indexOf(menuItem);
+      if (index !== activeIndex) {
+        setActiveItem(index);
       }
     }
-  };
-  trigger.addEventListener("keydown", onKeyboard);
-  filter.addEventListener("keydown", onKeyboard);
-  listbox.addEventListener("click", (event) => {
-    const option = event.target.closest('[role="option"]');
-    if (!option || option.getAttribute("aria-disabled") === "true") return;
-    selectOption(option);
+  });
+  menu.addEventListener("mouseleave", () => {
+    setActiveItem(-1);
+  });
+  menu.addEventListener("click", (event) => {
+    const menuItem = event.target.closest('[role^="menuitem"]');
+    if (!menuItem) return;
+    const isDisabled = menuItem.hasAttribute("disabled") || menuItem.getAttribute("aria-disabled") === "true";
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    closePopover();
   });
   document.addEventListener("click", (event) => {
-    if (!component.contains(event.target)) {
-      close(false);
+    if (!dropdownMenuComponent.contains(event.target)) {
+      closePopover();
     }
   });
   document.addEventListener("basecoat:popover", ((event) => {
-    if (event.detail.source !== component) {
-      close(false);
+    if (event.detail.source !== dropdownMenuComponent) {
+      closePopover(false);
     }
   }));
-  const initialOption = options.find((option) => getOptionValue(option) === hiddenInput.value) || options[0];
-  if (initialOption) {
-    const value = getOptionValue(initialOption);
-    hiddenInput.value = value;
-    triggerLabel.textContent = initialOption.textContent ?? "";
-    allOptions.forEach((candidate) => {
-      if (candidate === initialOption) {
-        candidate.setAttribute("aria-selected", "true");
-      } else {
-        candidate.removeAttribute("aria-selected");
-      }
-    });
-  }
-  component.selectByValue = (value) => {
-    const option = options.find((candidate) => getOptionValue(candidate) === value);
-    if (option) {
-      selectOption(option);
+  dropdownMenuComponent.dataset.dropdownMenuInitialized = true;
+  dropdownMenuComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+const DropdownMenu = ({ className, children, ...props }) => {
+  const dropdownRef = defuss.createRef();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: dropdownRef,
+      class: cn("dropdown-menu", className),
+      onMount: () => initDropdownMenu(dropdownRef.current),
+      ...props,
+      children
     }
-  };
-  popover.setAttribute("aria-hidden", "true");
-  component.dataset.comboboxInitialized = "true";
-  component.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  );
 };
-const Combobox = ({
-  id,
-  className,
-  placeholder = "Select option",
-  searchPlaceholder = "Search entries...",
-  onValueChange,
-  children,
-  ...props
-}) => {
-  const rootRef = defuss.createRef();
-  const comboboxId = id || `combobox-${Math.random().toString(36).slice(2, 9)}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+const DropdownMenuTrigger = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      type: "button",
+      "aria-expanded": "false",
+      "aria-haspopup": "menu",
+      class: cn(className),
+      children
+    }
+  );
+};
+const DropdownMenuContent = ({ id, className, children, ...props }) => {
+  const menuId = id ? id.replace("-popover", "-menu") : void 0;
+  const triggerId = id ? id.replace("-popover", "-trigger") : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, id, "data-popover": "", "aria-hidden": "true", class: cn(className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", id: menuId, "aria-labelledby": triggerId, "aria-orientation": "vertical", children }) });
+};
+const DropdownMenuItem = ({ className, disabled, children, role = "menuitem", ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      ref: rootRef,
-      id: comboboxId,
-      class: cn("select", className),
-      onMount: () => initCombobox(rootRef.current, onValueChange),
       ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
-          {
-            type: "button",
-            id: `${comboboxId}-trigger`,
-            "aria-haspopup": "listbox",
-            "aria-expanded": "false",
-            "aria-controls": `${comboboxId}-listbox`,
-            class: "btn-outline w-full justify-between",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { class: "truncate", children: placeholder }),
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "text-muted-foreground opacity-50 shrink-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 15 5 5 5-5" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m7 9 5-5 5 5" })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `${comboboxId}-popover`, "data-popover": "", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-search", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                placeholder: searchPlaceholder,
-                autocomplete: "off",
-                autocorrect: "off",
-                spellcheck: false,
-                "aria-autocomplete": "list",
-                role: "combobox",
-                "aria-expanded": "false",
-                "aria-controls": `${comboboxId}-listbox`,
-                "aria-labelledby": `${comboboxId}-trigger`
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              role: "listbox",
-              id: `${comboboxId}-listbox`,
-              "aria-orientation": "vertical",
-              "aria-labelledby": `${comboboxId}-trigger`,
-              "data-empty": "No results found.",
-              children
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: `${comboboxId}-value`, value: "" })
-      ]
+      role,
+      "aria-disabled": disabled,
+      "data-disabled": disabled ? "true" : void 0,
+      tabIndex: disabled ? -1 : 0,
+      class: cn(className),
+      children
+    }
+  );
+};
+const DropdownMenuSeparator = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", class: cn(className), ...props });
+};
+const DropdownMenuLabel = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
+};
+
+const Form = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("form", { class: cn("form", className), ...props, children });
+const FormField = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("field", className), ...props, children });
+
+const Input = ({ className, type, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type,
+      class: cn(
+        "input",
+        className
+      ),
+      ...props
+    }
+  );
+};
+
+const itemVariants = cva(
+  "group/item flex items-center border text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] gap-4",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50"
+      },
+      size: {
+        default: "p-4",
+        compact: "py-3 px-4 gap-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default"
+    }
+  }
+);
+const Item = ({ className, variant, size, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("article", { class: cn(itemVariants({ variant, size }), className), ...props, children });
+const ItemLeading = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex shrink-0 items-center justify-center gap-2", className), ...props, children });
+const ItemContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex flex-1 flex-col gap-1", className), ...props, children });
+const ItemTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { class: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium", className), ...props, children });
+const ItemDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn("text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className), ...props, children });
+const ItemTrailing = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("flex items-center gap-2", className), ...props, children });
+
+const Kbd = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "kbd",
+    {
+      class: cn(
+        "kbd pointer-events-none inline-flex items-center justify-center select-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+};
+const KbdGroup = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      class: cn("kbd-group inline-flex items-center gap-1", className),
+      ...props,
+      children
     }
   );
 };
-const ComboboxOption = ({ className, value, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "option", "data-value": value, class: cn(className), ...props, children: Array.isArray(children) ? children.length > 0 ? children : value : children ?? value });
 
-const initDropdownMenu = (dropdownMenuComponent) => {
-  const trigger = dropdownMenuComponent.querySelector(":scope > button");
-  const popover = dropdownMenuComponent.querySelector(":scope > [data-popover]");
-  const menu = popover?.querySelector('[role="menu"]');
-  if (!trigger || !menu || !popover) {
+const Label = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("label", { class: cn("label", className), ...props, children });
+};
+
+const initPopover = (popoverComponent) => {
+  const trigger = popoverComponent.querySelector(":scope > button");
+  const content = popoverComponent.querySelector(":scope > [data-popover]");
+  if (!trigger || !content) {
     const missing = [];
     if (!trigger) missing.push("trigger");
-    if (!menu) missing.push("menu");
-    if (!popover) missing.push("popover");
-    console.error(`Dropdown menu initialisation failed. Missing element(s): ${missing.join(", ")}`, dropdownMenuComponent);
+    if (!content) missing.push("content");
+    console.error(`Popover initialisation failed. Missing element(s): ${missing.join(", ")}`, popoverComponent);
     return;
   }
-  const rootId = dropdownMenuComponent.id || `dropdown-menu-${Math.random().toString(36).slice(2, 9)}`;
-  if (!dropdownMenuComponent.id) {
-    dropdownMenuComponent.id = rootId;
+  const rootId = popoverComponent.id || `popover-${Math.random().toString(36).slice(2, 9)}`;
+  if (!popoverComponent.id) {
+    popoverComponent.id = rootId;
   }
   if (!trigger.id) {
     trigger.id = `${rootId}-trigger`;
   }
-  if (!popover.id) {
-    popover.id = `${rootId}-popover`;
-  }
-  if (!menu.id) {
-    menu.id = `${rootId}-menu`;
+  if (!content.id) {
+    content.id = `${rootId}-popover`;
   }
-  trigger.setAttribute("aria-controls", menu.id);
-  menu.setAttribute("aria-labelledby", trigger.id);
-  let menuItems = [];
-  let activeIndex = -1;
+  trigger.setAttribute("aria-controls", content.id);
+  content.setAttribute("aria-labelledby", trigger.id);
   const closePopover = (focusOnTrigger = true) => {
     if (trigger.getAttribute("aria-expanded") === "false") return;
     trigger.setAttribute("aria-expanded", "false");
-    trigger.removeAttribute("aria-activedescendant");
-    popover.setAttribute("aria-hidden", "true");
+    content.setAttribute("aria-hidden", "true");
     if (focusOnTrigger) {
       trigger.focus();
     }
-    setActiveItem(-1);
   };
-  const openPopover = (initialSelection = false) => {
+  const openPopover = () => {
     document.dispatchEvent(new CustomEvent("basecoat:popover", {
-      detail: { source: dropdownMenuComponent }
+      detail: { source: popoverComponent }
     }));
+    const elementToFocus = content.querySelector("[autofocus]");
+    if (elementToFocus) {
+      content.addEventListener("transitionend", () => {
+        elementToFocus.focus();
+      }, { once: true });
+    }
     trigger.setAttribute("aria-expanded", "true");
-    popover.setAttribute("aria-hidden", "false");
-    menuItems = Array.from(menu.querySelectorAll('[role^="menuitem"]')).filter(
-      (item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true"
-    );
-    if (menuItems.length > 0 && initialSelection) {
-      if (initialSelection === "first") {
-        setActiveItem(0);
-      } else if (initialSelection === "last") {
-        setActiveItem(menuItems.length - 1);
+    content.setAttribute("aria-hidden", "false");
+  };
+  trigger.addEventListener("click", () => {
+    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
+    if (isExpanded) {
+      closePopover();
+    } else {
+      openPopover();
+    }
+  });
+  popoverComponent.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      closePopover();
+    }
+  });
+  document.addEventListener("click", (event) => {
+    if (!popoverComponent.contains(event.target)) {
+      closePopover();
+    }
+  });
+  document.addEventListener("basecoat:popover", ((event) => {
+    if (event.detail.source !== popoverComponent) {
+      closePopover(false);
+    }
+  }));
+  popoverComponent.dataset.popoverInitialized = true;
+  popoverComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+const Popover = ({ id, className, children, ...props }) => {
+  const popoverRef = defuss.createRef();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: popoverRef,
+      id,
+      class: cn("popover", className),
+      onMount: () => initPopover(popoverRef.current),
+      ...props,
+      children
+    }
+  );
+};
+const PopoverTrigger = ({ id, className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ...props,
+      id,
+      type: "button",
+      "aria-expanded": "false",
+      class: cn(className),
+      children
+    }
+  );
+};
+const PopoverContent = ({ id, className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      id,
+      "data-popover": "",
+      "aria-hidden": "true",
+      "aria-labelledby": id ? id.replace("-popover", "-trigger") : void 0,
+      class: cn(className),
+      children
+    }
+  );
+};
+
+const Progress = ({ className, value = 0, max = 100, ...props }) => {
+  const percentage = Math.max(0, Math.min(100, value / max * 100));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      class: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { class: "bg-primary h-full w-full flex-1 transition-all", style: `width: ${percentage}%` })
+    }
+  );
+};
+
+const RadioGroup = ({
+  className,
+  value,
+  onValueChange,
+  name,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "radiogroup",
+      class: cn(className),
+      ...props,
+      children
+    }
+  );
+};
+const RadioGroupItem = ({
+  className,
+  value,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "radio",
+      value,
+      class: cn("input", className),
+      ...props
+    }
+  );
+};
+
+const Select = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "select",
+    {
+      class: cn("select", className),
+      ...props,
+      children
+    }
+  );
+};
+
+const Separator = ({
+  className,
+  orientation = "horizontal",
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      class: cn(className),
+      ...props
+    }
+  );
+};
+
+if (typeof window !== "undefined" && !window.history.__basecoatPatched) {
+  const originalPushState = window.history.pushState;
+  window.history.pushState = function(...args) {
+    originalPushState.apply(this, args);
+    window.dispatchEvent(new Event("basecoat:locationchange"));
+  };
+  const originalReplaceState = window.history.replaceState;
+  window.history.replaceState = function(...args) {
+    originalReplaceState.apply(this, args);
+    window.dispatchEvent(new Event("basecoat:locationchange"));
+  };
+  window.history.__basecoatPatched = true;
+}
+const initSidebar = (sidebarComponent) => {
+  const initialOpen = sidebarComponent.dataset.initialOpen !== "false";
+  const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === "true";
+  const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
+  let open = breakpoint > 0 ? window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen : initialOpen;
+  const updateCurrentPageLinks = () => {
+    const currentPath = window.location.pathname.replace(/\/$/, "");
+    sidebarComponent.querySelectorAll("a").forEach((link) => {
+      if (link.hasAttribute("data-ignore-current")) return;
+      if (!link.href) return;
+      const rawHref = link.getAttribute("href");
+      if (!rawHref) return;
+      if (rawHref.startsWith("#")) {
+        link.removeAttribute("aria-current");
+        return;
       }
-    }
+      try {
+        const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
+        if (linkPath === currentPath) {
+          link.setAttribute("aria-current", "page");
+        } else {
+          link.removeAttribute("aria-current");
+        }
+      } catch (e) {
+      }
+    });
   };
-  const setActiveItem = (index) => {
-    if (activeIndex > -1 && menuItems[activeIndex]) {
-      menuItems[activeIndex].classList.remove("active");
-    }
-    activeIndex = index;
-    if (activeIndex > -1 && menuItems[activeIndex]) {
-      const activeItem = menuItems[activeIndex];
-      activeItem.classList.add("active");
-      trigger.setAttribute("aria-activedescendant", activeItem.id);
+  const updateState = () => {
+    sidebarComponent.setAttribute("aria-hidden", String(!open));
+    if (open) {
+      sidebarComponent.removeAttribute("inert");
     } else {
-      trigger.removeAttribute("aria-activedescendant");
+      sidebarComponent.setAttribute("inert", "");
     }
   };
-  trigger.addEventListener("click", () => {
-    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
-    if (isExpanded) {
-      closePopover();
-    } else {
-      openPopover(false);
-    }
-  });
-  dropdownMenuComponent.addEventListener("keydown", (event) => {
-    const isExpanded = trigger.getAttribute("aria-expanded") === "true";
-    if (event.key === "Escape") {
-      if (isExpanded) closePopover();
-      return;
-    }
-    if (!isExpanded) {
-      if (["Enter", " "].includes(event.key)) {
-        event.preventDefault();
-        openPopover(false);
-      } else if (event.key === "ArrowDown") {
-        event.preventDefault();
-        openPopover("first");
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        openPopover("last");
-      }
-      return;
-    }
-    if (menuItems.length === 0) return;
-    let nextIndex = activeIndex;
-    switch (event.key) {
-      case "ArrowDown":
-        event.preventDefault();
-        nextIndex = activeIndex === -1 ? 0 : Math.min(activeIndex + 1, menuItems.length - 1);
-        break;
-      case "ArrowUp":
-        event.preventDefault();
-        nextIndex = activeIndex === -1 ? menuItems.length - 1 : Math.max(activeIndex - 1, 0);
+  const setState = (state) => {
+    open = state;
+    updateState();
+  };
+  const sidebarId = sidebarComponent.id;
+  document.addEventListener("basecoat:sidebar", ((event) => {
+    if (event.detail?.id && event.detail.id !== sidebarId) return;
+    switch (event.detail?.action) {
+      case "open":
+        setState(true);
         break;
-      case "Home":
-        event.preventDefault();
-        nextIndex = 0;
+      case "close":
+        setState(false);
         break;
-      case "End":
-        event.preventDefault();
-        nextIndex = menuItems.length - 1;
+      default:
+        setState(!open);
         break;
-      case "Enter":
-      case " ":
-        event.preventDefault();
-        menuItems[activeIndex]?.click();
-        closePopover();
-        return;
     }
-    if (nextIndex !== activeIndex) {
-      setActiveItem(nextIndex);
+  }));
+  sidebarComponent.addEventListener("click", (event) => {
+    const target = event.target;
+    const nav = sidebarComponent.querySelector("nav");
+    const isMobile = window.innerWidth < breakpoint;
+    if (isMobile && (target.closest("a, button") && !target.closest("[data-keep-mobile-sidebar-open]"))) {
+      if (document.activeElement) document.activeElement.blur();
+      setState(false);
+      return;
+    }
+    if (target === sidebarComponent || nav && !nav.contains(target)) {
+      if (document.activeElement) document.activeElement.blur();
+      setState(false);
     }
   });
-  menu.addEventListener("mousemove", (event) => {
-    const menuItem = event.target.closest('[role^="menuitem"]');
-    if (menuItem && menuItems.includes(menuItem)) {
-      const index = menuItems.indexOf(menuItem);
-      if (index !== activeIndex) {
-        setActiveItem(index);
-      }
+  window.addEventListener("popstate", updateCurrentPageLinks);
+  window.addEventListener("basecoat:locationchange", updateCurrentPageLinks);
+  updateState();
+  updateCurrentPageLinks();
+  sidebarComponent.dataset.sidebarInitialized = true;
+  sidebarComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+const Sidebar = ({
+  id,
+  className,
+  initialOpen = true,
+  initialMobileOpen = false,
+  breakpoint = 768,
+  children,
+  ...props
+}) => {
+  const sidebarRef = defuss.createRef();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      ref: sidebarRef,
+      id,
+      class: cn("sidebar", className),
+      "data-initial-open": String(initialOpen),
+      "data-initial-mobile-open": String(initialMobileOpen),
+      "data-breakpoint": breakpoint,
+      onMount: () => initSidebar(sidebarRef.current),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Sidebar navigation", children })
+    }
+  );
+};
+const SidebarTrigger = ({
+  className,
+  sidebarId,
+  action = "toggle",
+  children,
+  ...props
+}) => {
+  const handleClick = () => {
+    document.dispatchEvent(new CustomEvent("basecoat:sidebar", {
+      detail: { id: sidebarId, action }
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      class: cn(className),
+      onClick: handleClick,
+      ...props,
+      children
+    }
+  );
+};
+const SidebarContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn(className), ...props, children });
+const SidebarHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
+const SidebarFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
+const SidebarGroup = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", class: cn(className), ...props, children });
+const SidebarGroupLabel = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { class: cn(className), ...props, children });
+const SidebarMenu = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { class: cn(className), ...props, children });
+const SidebarMenuItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { class: cn(className), ...props, children });
+const SidebarMenuButton = ({ className, isActive, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "a",
+  {
+    role: "button",
+    class: cn(className),
+    "aria-current": isActive ? "page" : void 0,
+    ...props,
+    children
+  }
+);
+
+const Skeleton = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn("bg-accent animate-pulse rounded-md", className), ...props });
+
+const Slider = ({
+  className,
+  min = 0,
+  max = 100,
+  step = 1,
+  value,
+  onValueChange,
+  ...props
+}) => {
+  const sliderRef = defuss.createRef();
+  const updateSliderValue = () => {
+    if (!sliderRef.current) return;
+    const val = Number(sliderRef.current.value);
+    const percentage = (val - min) / (max - min) * 100;
+    sliderRef.current.style.setProperty("--slider-value", `${percentage}%`);
+    onValueChange?.(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: sliderRef,
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      class: cn("input", className),
+      onInput: updateSliderValue,
+      onMount: updateSliderValue,
+      ...props
+    }
+  );
+};
+
+const Spinner = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      class: cn("animate-spin", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      stroke: "currentColor",
+      "stroke-width": "2",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
-  });
-  menu.addEventListener("mouseleave", () => {
-    setActiveItem(-1);
-  });
-  menu.addEventListener("click", (event) => {
-    if (event.target.closest('[role^="menuitem"]')) {
-      closePopover();
+  );
+};
+
+const Switch = ({
+  className,
+  checked,
+  onCheckedChange,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "checkbox",
+      role: "switch",
+      class: cn("input", className),
+      checked,
+      onChange: (e) => onCheckedChange?.(e.target.checked),
+      ...props
     }
-  });
-  document.addEventListener("click", (event) => {
-    if (!dropdownMenuComponent.contains(event.target)) {
-      closePopover();
+  );
+};
+
+const Table = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: "table-container", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      class: cn("table", className),
+      ...props,
+      children
     }
-  });
-  document.addEventListener("basecoat:popover", ((event) => {
-    if (event.detail.source !== dropdownMenuComponent) {
-      closePopover(false);
+  ) });
+};
+const TableHeader = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "thead",
+    {
+      class: cn("table-header", className),
+      ...props,
+      children
     }
-  }));
-  dropdownMenuComponent.dataset.dropdownMenuInitialized = true;
-  dropdownMenuComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  );
 };
-const DropdownMenu = ({ className, children, ...props }) => {
-  const dropdownRef = defuss.createRef();
+const TableBody = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "tbody",
     {
-      ref: dropdownRef,
-      class: cn("dropdown-menu", className),
-      onMount: () => initDropdownMenu(dropdownRef.current),
+      class: cn("table-body", className),
       ...props,
       children
     }
   );
 };
-const DropdownMenuTrigger = ({ className, children, ...props }) => {
+const TableFooter = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "tfoot",
     {
+      class: cn("table-footer", className),
       ...props,
-      type: "button",
-      "aria-expanded": "false",
-      "aria-haspopup": "menu",
-      class: cn(className),
       children
     }
   );
 };
-const DropdownMenuContent = ({ id, className, children, ...props }) => {
-  const menuId = id ? id.replace("-popover", "-menu") : void 0;
-  const triggerId = id ? id.replace("-popover", "-trigger") : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, id, "data-popover": "", "aria-hidden": "true", class: cn(className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", id: menuId, "aria-labelledby": triggerId, "aria-orientation": "vertical", children }) });
+const TableRow = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      class: cn("table-row", className),
+      ...props,
+      children
+    }
+  );
 };
-const DropdownMenuItem = ({ className, disabled, children, ...props }) => {
+const TableHead = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "th",
     {
+      class: cn("table-head", className),
       ...props,
-      role: "menuitem",
-      "aria-disabled": disabled,
-      class: cn(className),
       children
     }
   );
 };
-const DropdownMenuSeparator = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", class: cn(className), ...props });
+const TableCell = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      class: cn("table-cell", className),
+      ...props,
+      children
+    }
+  );
 };
-const DropdownMenuLabel = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
+const TableCaption = ({ className, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "caption",
+    {
+      class: cn("table-caption", className),
+      ...props,
+      children
+    }
+  );
 };
 
-const initCommand = (container) => {
-  const input = container.querySelector("header input");
-  const menu = container.querySelector('[role="menu"]');
-  if (!input || !menu) {
-    const missing = [];
-    if (!input) missing.push("input");
-    if (!menu) missing.push("menu");
-    console.error(`Command component initialization failed. Missing element(s): ${missing.join(", ")}`, container);
-    return;
-  }
-  const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
-  const menuItems = allMenuItems.filter(
-    (item) => !item.hasAttribute("disabled") && item.getAttribute("aria-disabled") !== "true"
-  );
-  let visibleMenuItems = [...menuItems];
-  let activeIndex = -1;
-  const setActiveItem = (index) => {
-    if (activeIndex > -1 && menuItems[activeIndex]) {
-      menuItems[activeIndex].classList.remove("active");
-    }
-    activeIndex = index;
-    if (activeIndex > -1) {
-      const activeItem = menuItems[activeIndex];
-      activeItem.classList.add("active");
-      if (activeItem.id) {
-        input.setAttribute("aria-activedescendant", activeItem.id);
-      } else {
-        input.removeAttribute("aria-activedescendant");
-      }
-    } else {
-      input.removeAttribute("aria-activedescendant");
-    }
+const initTabs = (tabsComponent) => {
+  const tablist = tabsComponent.querySelector('[role="tablist"]');
+  if (!tablist) return;
+  const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));
+  const getPanelForTab = (tab) => {
+    const value = tab.dataset.value;
+    if (!value) return null;
+    return tabsComponent.querySelector(`[role="tabpanel"][data-value="${value}"]`);
   };
-  const filterMenuItems = () => {
-    const searchTerm = input.value.trim().toLowerCase();
-    setActiveItem(-1);
-    visibleMenuItems = [];
-    allMenuItems.forEach((item) => {
-      if (item.hasAttribute("data-force")) {
-        item.setAttribute("aria-hidden", "false");
-        if (menuItems.includes(item)) {
-          visibleMenuItems.push(item);
-        }
-        return;
-      }
-      const itemText = (item.dataset.filter || item.textContent || "").trim().toLowerCase();
-      const keywordList = (item.dataset.keywords || "").toLowerCase().split(/[\s,]+/).filter(Boolean);
-      const matchesKeyword = keywordList.some((keyword) => keyword.includes(searchTerm));
-      const matches = itemText.includes(searchTerm) || matchesKeyword;
-      item.setAttribute("aria-hidden", String(!matches));
-      if (matches && menuItems.includes(item)) {
-        visibleMenuItems.push(item);
-      }
+  const selectTab = (tabToSelect) => {
+    tabs.forEach((tab) => {
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      const panel = getPanelForTab(tab);
+      if (panel) panel.hidden = true;
     });
-    if (visibleMenuItems.length > 0) {
-      setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
-      visibleMenuItems[0].scrollIntoView({ block: "nearest" });
-    }
+    tabToSelect.setAttribute("aria-selected", "true");
+    tabToSelect.setAttribute("tabindex", "0");
+    const activePanel = getPanelForTab(tabToSelect);
+    if (activePanel) activePanel.hidden = false;
   };
-  input.addEventListener("input", filterMenuItems);
-  const handleKeyNavigation = (event) => {
-    if (!["ArrowDown", "ArrowUp", "Enter", "Home", "End"].includes(event.key)) {
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      if (activeIndex > -1) {
-        menuItems[activeIndex]?.click();
-      }
-      return;
-    }
-    if (visibleMenuItems.length === 0) return;
-    event.preventDefault();
-    const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
-    let nextVisibleIndex = currentVisibleIndex;
+  tablist.addEventListener("click", (event) => {
+    const clickedTab = event.target.closest('[role="tab"]');
+    if (clickedTab) selectTab(clickedTab);
+  });
+  tablist.addEventListener("keydown", (event) => {
+    const currentTab = event.target;
+    if (!tabs.includes(currentTab)) return;
+    let nextTab;
+    const currentIndex = tabs.indexOf(currentTab);
     switch (event.key) {
-      case "ArrowDown":
-        if (currentVisibleIndex < visibleMenuItems.length - 1) {
-          nextVisibleIndex = currentVisibleIndex + 1;
-        }
+      case "ArrowRight":
+        nextTab = tabs[(currentIndex + 1) % tabs.length];
         break;
-      case "ArrowUp":
-        if (currentVisibleIndex > 0) {
-          nextVisibleIndex = currentVisibleIndex - 1;
-        } else if (currentVisibleIndex === -1) {
-          nextVisibleIndex = 0;
-        }
+      case "ArrowLeft":
+        nextTab = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
         break;
       case "Home":
-        nextVisibleIndex = 0;
+        nextTab = tabs[0];
         break;
       case "End":
-        nextVisibleIndex = visibleMenuItems.length - 1;
+        nextTab = tabs[tabs.length - 1];
         break;
+      default:
+        return;
     }
-    if (nextVisibleIndex !== currentVisibleIndex) {
-      const newActiveItem = visibleMenuItems[nextVisibleIndex];
-      setActiveItem(menuItems.indexOf(newActiveItem));
-      newActiveItem.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    event.preventDefault();
+    if (nextTab) {
+      selectTab(nextTab);
+      nextTab.focus();
     }
-  };
-  menu.addEventListener("mousemove", (event) => {
-    const menuItem = event.target.closest('[role="menuitem"]');
-    if (menuItem && visibleMenuItems.includes(menuItem)) {
-      const index = menuItems.indexOf(menuItem);
-      if (index !== activeIndex) {
-        setActiveItem(index);
+  });
+  tabsComponent.dataset.tabsInitialized = true;
+  tabsComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+const Tabs = ({ className, defaultValue, children, ...props }) => {
+  const tabsRef = defuss.createRef();
+  const onMount = () => {
+    if (!tabsRef.current) return;
+    const tabsRoot = tabsRef.current;
+    const instanceId = tabsRoot.id || `tabs-${Math.random().toString(36).slice(2, 9)}`;
+    if (!tabsRoot.id) {
+      tabsRoot.id = instanceId;
+    }
+    const tablist = tabsRoot.querySelector('[role="tablist"]');
+    const tabs = tablist ? Array.from(tablist.querySelectorAll('[role="tab"]')) : [];
+    tabs.forEach((tab, index) => {
+      const value = tab.dataset.value;
+      if (!value) return;
+      const panel = tabsRoot.querySelector(`[role="tabpanel"][data-value="${value}"]`);
+      const tabId = `${instanceId}-tab-${index}`;
+      const panelId = `${instanceId}-panel-${index}`;
+      tab.id = tabId;
+      if (panel) {
+        panel.id = panelId;
+        tab.setAttribute("aria-controls", panelId);
+        panel.setAttribute("aria-labelledby", tabId);
+      }
+    });
+    initTabs(tabsRef.current);
+    if (defaultValue) {
+      const defaultTab = tabsRef.current.querySelector(`[role="tab"][data-value="${defaultValue}"]`);
+      if (defaultTab) {
+        defaultTab.click();
       }
-    }
-  });
-  menu.addEventListener("click", (event) => {
-    const clickedItem = event.target.closest('[role="menuitem"]');
-    if (clickedItem && visibleMenuItems.includes(clickedItem)) {
-      const dialog = container.closest("dialog.command-dialog");
-      if (dialog && !clickedItem.hasAttribute("data-keep-command-open")) {
-        dialog.close();
+    } else {
+      const firstTab = tabsRef.current.querySelector('[role="tab"]');
+      if (firstTab) {
+        firstTab.click();
       }
     }
-  });
-  input.addEventListener("keydown", handleKeyNavigation);
-  if (visibleMenuItems.length > 0) {
-    setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
-    visibleMenuItems[0].scrollIntoView({ block: "nearest" });
-  }
-  container.dataset.commandInitialized = true;
-  container.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: tabsRef, class: cn("tabs", className), onMount, ...props, children });
 };
-const Command = ({ className, children, ...props }) => {
-  const commandRef = defuss.createRef();
+const TabsList = ({ className, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    "nav",
     {
-      ref: commandRef,
-      class: cn("command", className),
-      onMount: () => initCommand(commandRef.current),
+      role: "tablist",
+      "aria-orientation": "horizontal",
+      class: cn(className),
       ...props,
       children
     }
   );
 };
-const CommandInput = ({ className, placeholder, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", class: "lucide lucide-search", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "text",
-        placeholder,
-        role: "combobox",
-        "aria-autocomplete": "list",
-        "aria-expanded": "true",
-        class: cn(className),
-        ...props
-      }
-    )
-  ] });
-};
-const CommandList = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "menu", class: cn("scrollbar", className), ...props, children });
-};
-const CommandGroup = ({ className, heading, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", class: cn(className), ...props, children: [
-    heading && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "presentation", children: heading }),
-    children
-  ] });
+const TabsTrigger = ({ className, value, children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      role: "tab",
+      tabIndex: -1,
+      "aria-selected": "false",
+      "data-value": value,
+      class: cn(className),
+      ...props,
+      children
+    }
+  );
 };
-const CommandItem = ({ className, keywords, disabled, children, ...props }) => {
+const TabsContent = ({ className, value, children, ...props }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      role: "menuitem",
-      "data-keywords": keywords,
-      "aria-disabled": disabled,
+      role: "tabpanel",
+      "data-value": value,
+      tabIndex: -1,
+      hidden: true,
       class: cn(className),
       ...props,
       children
     }
   );
 };
-const CommandEmpty = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { class: cn(className), ...props, children });
-};
-const CommandSeparator = ({ className, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator", class: cn(className), ...props });
+
+const Textarea = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("textarea", { class: cn("textarea", className), ...props });
 };
 
 const ICONS = {
@@ -4737,165 +4942,62 @@ const ToastTitle = ({ className, children, ...props }) => /* @__PURE__ */ jsxRun
 const ToastDescription = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("p", { class: cn(className), ...props, children });
 const ToastAction = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", class: cn("btn", className), "data-toast-action": true, ...props, children }) });
 
-if (typeof window !== "undefined" && !window.history.__basecoatPatched) {
-  const originalPushState = window.history.pushState;
-  window.history.pushState = function(...args) {
-    originalPushState.apply(this, args);
-    window.dispatchEvent(new Event("basecoat:locationchange"));
-  };
-  const originalReplaceState = window.history.replaceState;
-  window.history.replaceState = function(...args) {
-    originalReplaceState.apply(this, args);
-    window.dispatchEvent(new Event("basecoat:locationchange"));
-  };
-  window.history.__basecoatPatched = true;
-}
-const initSidebar = (sidebarComponent) => {
-  const initialOpen = sidebarComponent.dataset.initialOpen !== "false";
-  const initialMobileOpen = sidebarComponent.dataset.initialMobileOpen === "true";
-  const breakpoint = parseInt(sidebarComponent.dataset.breakpoint) || 768;
-  let open = breakpoint > 0 ? window.innerWidth >= breakpoint ? initialOpen : initialMobileOpen : initialOpen;
-  const updateCurrentPageLinks = () => {
-    const currentPath = window.location.pathname.replace(/\/$/, "");
-    sidebarComponent.querySelectorAll("a").forEach((link) => {
-      if (link.hasAttribute("data-ignore-current")) return;
-      if (!link.href) return;
-      const rawHref = link.getAttribute("href");
-      if (!rawHref) return;
-      if (rawHref.startsWith("#")) {
-        link.removeAttribute("aria-current");
-        return;
-      }
-      try {
-        const linkPath = new URL(link.href).pathname.replace(/\/$/, "");
-        if (linkPath === currentPath) {
-          link.setAttribute("aria-current", "page");
-        } else {
-          link.removeAttribute("aria-current");
-        }
-      } catch (e) {
-      }
-    });
-  };
-  const updateState = () => {
-    sidebarComponent.setAttribute("aria-hidden", String(!open));
-    if (open) {
-      sidebarComponent.removeAttribute("inert");
-    } else {
-      sidebarComponent.setAttribute("inert", "");
-    }
-  };
-  const setState = (state) => {
-    open = state;
-    updateState();
-  };
-  const sidebarId = sidebarComponent.id;
-  document.addEventListener("basecoat:sidebar", ((event) => {
-    if (event.detail?.id && event.detail.id !== sidebarId) return;
-    switch (event.detail?.action) {
-      case "open":
-        setState(true);
-        break;
-      case "close":
-        setState(false);
-        break;
-      default:
-        setState(!open);
-        break;
-    }
-  }));
-  sidebarComponent.addEventListener("click", (event) => {
-    const target = event.target;
-    const nav = sidebarComponent.querySelector("nav");
-    const isMobile = window.innerWidth < breakpoint;
-    if (isMobile && (target.closest("a, button") && !target.closest("[data-keep-mobile-sidebar-open]"))) {
-      if (document.activeElement) document.activeElement.blur();
-      setState(false);
-      return;
-    }
-    if (target === sidebarComponent || nav && !nav.contains(target)) {
-      if (document.activeElement) document.activeElement.blur();
-      setState(false);
-    }
-  });
-  window.addEventListener("popstate", updateCurrentPageLinks);
-  window.addEventListener("basecoat:locationchange", updateCurrentPageLinks);
-  updateState();
-  updateCurrentPageLinks();
-  sidebarComponent.dataset.sidebarInitialized = true;
-  sidebarComponent.dispatchEvent(new CustomEvent("basecoat:initialized"));
-};
-const Sidebar = ({
-  id,
+const ToggleButton = ({
+  class: classProp,
   className,
-  initialOpen = true,
-  initialMobileOpen = false,
-  breakpoint = 768,
+  pressed,
   children,
+  onClick,
   ...props
 }) => {
-  const sidebarRef = defuss.createRef();
+  const isPressed = pressed === true;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "aside",
+    "button",
     {
-      ref: sidebarRef,
-      id,
-      class: cn("sidebar", className),
-      "data-initial-open": String(initialOpen),
-      "data-initial-mobile-open": String(initialMobileOpen),
-      "data-breakpoint": breakpoint,
-      onMount: () => initSidebar(sidebarRef.current),
+      class: cn(
+        buttonVariants({ variant: isPressed ? "default" : "outline", size: "sm" }),
+        classProp,
+        className
+      ),
+      "aria-pressed": isPressed,
+      "data-pressed": isPressed,
+      onClick: (event) => {
+        if (pressed === void 0) {
+          const button = event.target.closest("button");
+          if (!button) {
+            onClick?.(event);
+            return;
+          }
+          const nextPressed = button.getAttribute("aria-pressed") !== "true";
+          button.setAttribute("aria-pressed", String(nextPressed));
+          button.dataset.pressed = String(nextPressed);
+          button.classList.toggle("btn-primary", nextPressed);
+          button.classList.toggle("btn-outline", !nextPressed);
+        }
+        onClick?.(event);
+      },
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Sidebar navigation", children })
+      children
     }
   );
 };
-const SidebarTrigger = ({
+const Toggle = ToggleButton;
+
+const Tooltip = ({
   className,
-  sidebarId,
-  action = "toggle",
+  tooltip,
+  side,
+  align,
   children,
   ...props
 }) => {
-  const handleClick = () => {
-    document.dispatchEvent(new CustomEvent("basecoat:sidebar", {
-      detail: { id: sidebarId, action }
-    }));
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    "div",
     {
-      type: "button",
+      "data-tooltip": tooltip,
+      "data-side": side,
+      "data-align": align,
       class: cn(className),
-      onClick: handleClick,
-      ...props,
-      children
-    }
-  );
-};
-const SidebarContent = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("section", { class: cn(className), ...props, children });
-const SidebarHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("header", { class: cn(className), ...props, children });
-const SidebarFooter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("footer", { class: cn(className), ...props, children });
-const SidebarGroup = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", class: cn(className), ...props, children });
-const SidebarGroupLabel = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { class: cn(className), ...props, children });
-const SidebarMenu = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("ul", { class: cn(className), ...props, children });
-const SidebarMenuItem = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("li", { class: cn(className), ...props, children });
-const SidebarMenuButton = ({ className, isActive, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "a",
-  {
-    role: "button",
-    class: cn(className),
-    "aria-current": isActive ? "page" : void 0,
-    ...props,
-    children
-  }
-);
-
-const Select = ({ className, children, ...props }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "select",
-    {
-      class: cn("select", className),
       ...props,
       children
     }
@@ -5010,6 +5112,8 @@ exports.ToastAction = ToastAction;
 exports.ToastDescription = ToastDescription;
 exports.ToastTitle = ToastTitle;
 exports.Toaster = Toaster;
+exports.Toggle = Toggle;
+exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.alertVariants = alertVariants;
 exports.badgeVariants = badgeVariants;