@officina/ui 0.1.0

package/dist/chunk-LMM3LYFT.js

@@ -0,0 +1,2008 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { forwardRef, createContext, useEffect, lazy, useState, useRef, isValidElement, cloneElement, useId, useContext, useMemo, Suspense } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal, FloatingArrow, useClick, FloatingFocusManager } from '@floating-ui/react';
+import { FormProvider, useFormContext } from 'react-hook-form';
+import { Checkbox as Checkbox$1, Field as Field$1, Label, Description, RadioGroup as RadioGroup$1, Radio, Switch as Switch$1 } from '@headlessui/react';
+import { ChevronUp, ChevronDown, Search, X, Minus, Check, CheckCircle2, Loader2, Filter } from 'lucide-react';
+import { matchSorter } from 'match-sorter';
+import { useDebouncedCallback } from 'use-debounce';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 rounded-md font-semibold",
+    "whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform,opacity] duration-[var(--motion-fast)] ease-[var(--ease-standard)]",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2",
+    "active:scale-[0.985] disabled:cursor-not-allowed disabled:opacity-45"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: [
+          "bg-[var(--color-accent)] text-[var(--color-accent-contrast)] border border-[var(--color-accent-hover)]",
+          "hover:bg-[var(--color-accent-hover)]"
+        ],
+        secondary: [
+          "bg-[var(--color-bg-base)] text-[var(--color-fg-base)] border border-[var(--color-border)]",
+          "hover:bg-[var(--color-bg-muted)]"
+        ],
+        outline: [
+          "bg-[var(--color-bg-base)] text-[var(--color-fg-base)] border border-[var(--color-border)]",
+          "hover:bg-[var(--color-bg-muted)]"
+        ],
+        ghost: [
+          "bg-transparent text-[var(--color-fg-base)] border border-transparent",
+          "hover:bg-[var(--color-bg-muted)]"
+        ],
+        soft: [
+          "bg-[var(--color-accent-muted)] text-[var(--color-accent-fg)] border border-transparent",
+          "hover:bg-[var(--color-accent-subtle)]"
+        ],
+        danger: [
+          "bg-[var(--color-danger)] text-[var(--color-danger-contrast)] border border-[var(--color-danger-hover)]",
+          "hover:bg-[var(--color-danger-hover)]"
+        ],
+        success: [
+          "bg-[var(--color-success)] text-[var(--color-success-contrast)] border border-[var(--color-success-hover)]",
+          "hover:bg-[var(--color-success-hover)]"
+        ]
+      },
+      size: {
+        xs: "h-7 px-2.5 text-xs",
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-3.5 text-sm",
+        lg: "h-11 px-5 text-sm",
+        icon: "size-9",
+        "icon-sm": "size-7"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = forwardRef(function Button2({ className, variant, size, isLoading, disabled, children, type = "button", ...rest }, ref) {
+  const resolvedSize = size ?? "md";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading,
+      "data-density-control": "button",
+      "data-density-size": resolvedSize,
+      ...rest,
+      className: cn(buttonVariants({ variant, size: resolvedSize }), className),
+      children: [
+        isLoading ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+});
+function toPlacement(side = "bottom", align = "center") {
+  return `${side}${align === "center" ? "" : `-${align}`}`;
+}
+function assignRef(ref, value) {
+  if (!ref) return;
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  ref.current = value;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    refs.forEach((ref) => assignRef(ref, node));
+  };
+}
+function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  delayMs = 200,
+  sideOffset = 6,
+  disabled
+}) {
+  const [open, setOpen] = useState(false);
+  const arrowRef = useRef(null);
+  const floating = useFloating({
+    open: disabled ? false : open,
+    onOpenChange: setOpen,
+    placement: toPlacement(side, align),
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(sideOffset), flip(), shift({ padding: 8 }), arrow({ element: arrowRef })]
+  });
+  const hover = useHover(floating.context, {
+    delay: { open: delayMs, close: 60 },
+    enabled: !disabled
+  });
+  const focus = useFocus(floating.context, { enabled: !disabled });
+  const dismiss = useDismiss(floating.context);
+  const role = useRole(floating.context, { role: "tooltip" });
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+  const trigger = isValidElement(children) ? (() => {
+    const childProps = children.props;
+    return cloneElement(
+      children,
+      getReferenceProps({
+        ...childProps,
+        ref: composeRefs(childProps.ref, floating.refs.setReference)
+      })
+    );
+  })() : children;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    open && !disabled ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: floating.refs.setFloating,
+        style: floating.floatingStyles,
+        ...getFloatingProps({
+          className: cn(
+            "z-[9999] max-w-xs rounded-[var(--radius-sm)] border border-[var(--color-border-strong)] bg-[var(--color-tooltip-bg)] px-2 py-1",
+            "text-xs font-medium text-[var(--color-tooltip-fg)] shadow-[var(--shadow-lg)]",
+            "transition-opacity duration-[var(--motion-fast)] ease-[var(--ease-standard)]"
+          )
+        }),
+        children: [
+          content,
+          /* @__PURE__ */ jsx(
+            FloatingArrow,
+            {
+              ref: arrowRef,
+              context: floating.context,
+              className: "fill-[var(--color-tooltip-bg)]"
+            }
+          )
+        ]
+      }
+    ) }) : null
+  ] });
+}
+var IconButton = forwardRef(function IconButton2({ icon, size = "md", tooltip, tooltipSide = "top", className, ...props }, ref) {
+  const button = /* @__PURE__ */ jsx(
+    Button,
+    {
+      ref,
+      size: size === "sm" ? "icon-sm" : "icon",
+      className: cn("shrink-0", className),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4", children: icon })
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(Tooltip, { content: tooltip, side: tooltipSide, children: button });
+  }
+  return button;
+});
+function ButtonGroup({
+  children,
+  orientation = "horizontal",
+  attached = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      className: cn(
+        "inline-flex",
+        orientation === "vertical" && "flex-col",
+        attached && orientation === "horizontal" && "[&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px",
+        attached && orientation === "vertical" && "[&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px",
+        className
+      ),
+      children
+    }
+  );
+}
+var badgeVariants = cva("inline-flex items-center gap-1 rounded-full font-semibold", {
+  variants: {
+    variant: {
+      neutral: "bg-[var(--color-bg-muted)] text-[var(--color-fg-base)]",
+      success: "bg-[var(--color-success-subtle)] text-[var(--color-success-fg)] dark:bg-[var(--color-success-subtle)] dark:text-[var(--color-success-fg)]",
+      warning: "bg-[var(--color-warning-subtle)] text-[var(--color-warning-fg)] dark:bg-[var(--color-warning-subtle)] dark:text-[var(--color-warning-fg)]",
+      danger: "bg-[var(--color-danger-subtle)] text-[var(--color-danger-fg)] dark:bg-[var(--color-danger-subtle)] dark:text-[var(--color-danger-fg)]",
+      info: "bg-[var(--color-info-subtle)] text-[var(--color-info-fg)] dark:bg-[var(--color-info-subtle)] dark:text-[var(--color-info-fg)]",
+      accent: "bg-[var(--color-accent-muted)] text-[var(--color-accent-fg)]"
+    },
+    size: {
+      sm: "px-2 py-0.5 text-[10px]",
+      md: "px-2.5 py-0.5 text-xs"
+    }
+  },
+  defaultVariants: { variant: "neutral", size: "md" }
+});
+function Badge({ className, variant, tone, size, dot, children, ...props }) {
+  const requestedVariant = variant ?? tone;
+  const resolvedVariant = requestedVariant === "error" ? "danger" : requestedVariant;
+  return /* @__PURE__ */ jsxs("span", { ...props, className: cn(badgeVariants({ variant: resolvedVariant, size }), className), children: [
+    dot ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }) : null,
+    children
+  ] });
+}
+function Form({
+  form,
+  onSubmit,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(FormProvider, { ...form, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      noValidate: true,
+      ...rest,
+      onSubmit: (e) => {
+        void form.handleSubmit(onSubmit)(e);
+      },
+      className: cn("space-y-4", className),
+      children
+    }
+  ) });
+}
+function Field({
+  id: providedId,
+  name,
+  label,
+  hint,
+  error: manualError,
+  required,
+  className,
+  children
+}) {
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const ctx = useFormContext();
+  const error = name ? ctx?.formState.errors[name] : void 0;
+  const errorMessage = manualError ?? (typeof error?.message === "string" ? error.message : void 0);
+  const describedBy = [hint ? hintId : null, errorMessage ? errorId : null].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-sm font-medium text-[var(--color-fg-base)]", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-danger)]", "aria-hidden": "true", children: "*" }) : null
+    ] }),
+    typeof children === "function" ? children({ id, "aria-invalid": Boolean(errorMessage), "aria-describedby": describedBy }) : isValidElement(children) ? cloneElement(children, {
+      id,
+      "aria-invalid": Boolean(errorMessage),
+      "aria-describedby": describedBy || void 0
+    }) : children,
+    hint && !errorMessage ? /* @__PURE__ */ jsx("p", { id: hintId, className: "text-xs text-[var(--color-fg-muted)]", children: hint }) : null,
+    errorMessage ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-xs text-[var(--color-danger)]", children: errorMessage }) : null
+  ] });
+}
+var Input = forwardRef(function Input2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      "data-density-control": "input",
+      ...props,
+      className: cn(
+        "block h-9 w-full rounded-md border border-[var(--color-border-strong)]",
+        "bg-[var(--color-bg-base)] px-3 text-sm text-[var(--color-fg-base)]",
+        "placeholder:text-[var(--color-fg-subtle)]",
+        "transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
+        "focus:ring-3 focus:ring-[var(--color-accent)]/15 focus:border-[var(--color-accent)] focus:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-[invalid=true]:focus:ring-[var(--color-danger)]/15 aria-[invalid=true]:border-[var(--color-danger)]",
+        className
+      )
+    }
+  );
+});
+var gridColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4"
+};
+var actionAlign = {
+  between: "justify-between",
+  center: "justify-center",
+  end: "justify-end",
+  start: "justify-start"
+};
+function FormGrid({ children, className, columns = 2, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn("grid gap-4", gridColumns[columns], className), children });
+}
+function Fieldset({
+  children,
+  className,
+  columns = 1,
+  description,
+  legend,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      ...props,
+      className: cn(
+        "min-w-0 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-base)] p-4",
+        className
+      ),
+      children: [
+        legend || description ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          legend ? /* @__PURE__ */ jsx("legend", { className: "text-sm font-semibold text-[var(--color-fg-base)]", children: legend }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs leading-5 text-[var(--color-fg-muted)]", children: description }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx(FormGrid, { columns, className: legend || description ? "mt-4" : void 0, children })
+      ]
+    }
+  );
+}
+function FormActions({
+  align = "end",
+  children,
+  className,
+  sticky,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: cn(
+        "flex flex-wrap items-center gap-2 border-t border-[var(--color-border)] pt-4",
+        actionAlign[align],
+        sticky ? "bg-[var(--color-bg-base)]/95 sticky bottom-0 z-10 -mx-4 px-4 pb-4 backdrop-blur" : void 0,
+        className
+      ),
+      children
+    }
+  );
+}
+var FormControlContext = createContext(null);
+function useFormControlContext() {
+  return useContext(FormControlContext);
+}
+function useFormControl() {
+  const ctx = useFormControlContext();
+  if (!ctx) return {};
+  return {
+    id: ctx.id,
+    "aria-describedby": ctx["aria-describedby"],
+    "aria-invalid": ctx["aria-invalid"],
+    "aria-required": ctx["aria-required"],
+    required: ctx.required,
+    disabled: ctx.disabled
+  };
+}
+function FormControl({
+  id,
+  invalid = false,
+  required = false,
+  disabled = false,
+  className,
+  children,
+  ...props
+}) {
+  const generatedId = useId();
+  const controlId = id ?? generatedId;
+  const descriptionId = `${controlId}-description`;
+  const errorId = `${controlId}-error`;
+  const describedBy = [invalid ? errorId : null, descriptionId].filter(Boolean).join(" ") || void 0;
+  const field = {
+    id: controlId,
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid ? true : void 0,
+    "aria-required": required ? true : void 0,
+    required,
+    disabled
+  };
+  const value = { ...field, descriptionId, errorId, invalid };
+  return /* @__PURE__ */ jsx(FormControlContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      "data-invalid": invalid ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      className: cn("flex flex-col gap-1.5", className),
+      children: typeof children === "function" ? children(field) : children
+    }
+  ) });
+}
+function FormLabel({ className, children, required, htmlFor, ...props }) {
+  const ctx = useFormControlContext();
+  const isRequired = required ?? ctx?.required ?? false;
+  const target = htmlFor ?? ctx?.id;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...props,
+      ...target ? { htmlFor: target } : {},
+      className: cn(
+        "flex select-none items-center gap-1 text-sm font-medium text-[var(--color-fg-base)]",
+        ctx?.disabled && "opacity-60",
+        className
+      ),
+      children: [
+        children,
+        isRequired ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[var(--color-danger-fg)]", children: "*" }) : null
+      ]
+    }
+  );
+}
+var helperTone = {
+  muted: "text-[var(--color-fg-muted)]",
+  danger: "text-[var(--color-danger-fg)]",
+  success: "text-[var(--color-success-fg)]"
+};
+function FormHelperText({
+  className,
+  tone = "muted",
+  children,
+  ...props
+}) {
+  const ctx = useFormControlContext();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      ...ctx?.descriptionId ? { id: ctx.descriptionId } : {},
+      className: cn("text-xs leading-5", helperTone[tone], className),
+      children
+    }
+  );
+}
+function FormError({ className, children, ...props }) {
+  const ctx = useFormControlContext();
+  if (ctx && !ctx.invalid) return null;
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ...props,
+      ...ctx?.errorId ? { id: ctx.errorId } : {},
+      role: "alert",
+      className: cn("text-xs leading-5 text-[var(--color-danger-fg)]", className),
+      children
+    }
+  );
+}
+function Checkbox({
+  checked,
+  defaultChecked,
+  onChange,
+  indeterminate,
+  disabled,
+  label,
+  description,
+  className,
+  id
+}) {
+  const checkboxProps = {
+    ...id !== void 0 ? { id } : {},
+    ...checked !== void 0 ? { checked } : {},
+    ...defaultChecked !== void 0 ? { defaultChecked } : {},
+    ...onChange !== void 0 ? { onChange } : {},
+    ...disabled !== void 0 ? { disabled } : {}
+  };
+  const control = /* @__PURE__ */ jsx(
+    Checkbox$1,
+    {
+      ...checkboxProps,
+      className: cn(
+        "group relative flex size-4 shrink-0 items-center justify-center rounded",
+        "border border-[var(--color-border-strong)] bg-[var(--color-bg-base)]",
+        "transition-colors duration-[var(--duration-fast)]",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2",
+        "data-[checked]:border-[var(--color-accent)] data-[checked]:bg-[var(--color-accent)]",
+        "data-[indeterminate]:border-[var(--color-accent)] data-[indeterminate]:bg-[var(--color-accent)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...indeterminate ? { "data-indeterminate": true } : {},
+      children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "size-2.5 text-white", strokeWidth: 3, "aria-hidden": "true" }) : /* @__PURE__ */ jsx(
+        Check,
+        {
+          className: "hidden size-2.5 text-white group-data-[checked]:block",
+          strokeWidth: 3,
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+  if (!label) return control;
+  return /* @__PURE__ */ jsxs(Field$1, { className: "flex items-start gap-2.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: control }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          ...id !== void 0 ? { htmlFor: id } : {},
+          className: "block cursor-pointer select-none text-sm font-medium text-[var(--color-fg-base)]",
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx(Description, { className: "mt-0.5 text-xs text-[var(--color-fg-subtle)]", children: description })
+    ] })
+  ] });
+}
+function RadioGroup({
+  options,
+  value,
+  onChange,
+  orientation = "vertical",
+  variant = "plain",
+  name,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    RadioGroup$1,
+    {
+      value,
+      onChange,
+      ...name ? { name } : {},
+      className: cn(
+        "flex gap-2",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxs(
+        Radio,
+        {
+          value: option.value,
+          ...option.disabled !== void 0 ? { disabled: option.disabled } : {},
+          className: cn(
+            "group flex min-h-16 cursor-pointer items-start gap-2 rounded-[var(--radius-md)] text-sm outline-none transition-[background-color,border-color,box-shadow,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] disabled:cursor-not-allowed disabled:opacity-45",
+            variant === "card" ? "data-[checked]:bg-[var(--color-accent)]/5 data-[checked]:ring-[var(--color-accent)]/20 min-w-48 border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] p-3 hover:border-[var(--color-border)] data-[checked]:border-[var(--color-accent)] data-[checked]:ring-2" : "p-1"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-4 items-center justify-center rounded-full border border-[var(--color-border-strong)] group-data-[checked]:border-[var(--color-accent)] group-data-[checked]:bg-[var(--color-accent)]", children: /* @__PURE__ */ jsx("span", { className: "hidden size-1.5 rounded-full bg-[var(--color-bg-base)] group-data-[checked]:block" }) }),
+            option.icon ? /* @__PURE__ */ jsx("span", { className: "size-4 shrink-0", children: option.icon }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 font-medium text-[var(--color-fg-base)]", children: [
+                option.label,
+                variant === "card" ? /* @__PURE__ */ jsx(CheckCircle2, { className: "hidden size-4 text-[var(--color-accent)] group-data-[checked]:block" }) : null
+              ] }),
+              option.description ? /* @__PURE__ */ jsx("span", { className: "block text-xs text-[var(--color-fg-subtle)]", children: option.description }) : null
+            ] })
+          ]
+        },
+        String(option.value)
+      ))
+    }
+  );
+}
+function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  label,
+  description,
+  className,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const switchProps = {
+    ...id !== void 0 ? { id } : {},
+    ...checked !== void 0 ? { checked } : {},
+    ...defaultChecked !== void 0 ? { defaultChecked } : {},
+    ...onChange !== void 0 ? { onChange } : {},
+    ...disabled !== void 0 ? { disabled } : {},
+    ...ariaLabelledby !== void 0 ? { "aria-labelledby": ariaLabelledby } : ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {}
+  };
+  const control = /* @__PURE__ */ jsx(
+    Switch$1,
+    {
+      ...switchProps,
+      className: cn(
+        "group relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+        "border-2 border-transparent bg-[var(--color-bg-muted)]",
+        "transition-colors duration-[var(--duration-base)] ease-[var(--ease-standard)]",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2",
+        "data-[checked]:bg-[var(--color-accent)]",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none inline-block size-4 rounded-full bg-[var(--color-bg-base)] shadow-sm",
+            "ring-0 transition-transform duration-[var(--duration-base)] ease-[var(--ease-standard)]",
+            "translate-x-0.5 group-data-[checked]:translate-x-5"
+          )
+        }
+      )
+    }
+  );
+  if (!label) return control;
+  return /* @__PURE__ */ jsxs(Field$1, { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5", children: control }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        Label,
+        {
+          ...id !== void 0 ? { htmlFor: id } : {},
+          className: "block cursor-pointer select-none text-sm font-medium text-[var(--color-fg-base)]",
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx(Description, { className: "mt-0.5 text-xs text-[var(--color-fg-subtle)]", children: description })
+    ] })
+  ] });
+}
+function CheckboxGroup({
+  options,
+  value,
+  onChange,
+  orientation = "vertical",
+  disabled,
+  invalid,
+  name,
+  className,
+  ...aria
+}) {
+  const toggle = (optionValue, checked) => {
+    if (checked) {
+      if (!value.includes(optionValue)) onChange([...value, optionValue]);
+    } else {
+      onChange(value.filter((v) => v !== optionValue));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...aria,
+      role: "group",
+      "data-invalid": invalid ? "" : void 0,
+      className: cn(
+        "flex gap-3",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap gap-x-6",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: value.includes(option.value),
+          onChange: (checked) => toggle(option.value, checked),
+          disabled: Boolean(disabled || option.disabled),
+          label: option.label,
+          ...option.description ? { description: option.description } : {},
+          ...name ? { id: `${name}-${option.value}` } : {}
+        },
+        option.value
+      ))
+    }
+  );
+}
+function SwitchGroup({
+  options,
+  value,
+  onChange,
+  disabled,
+  bordered = true,
+  className,
+  ...aria
+}) {
+  const toggle = (optionValue, checked) => {
+    if (checked) {
+      if (!value.includes(optionValue)) onChange([...value, optionValue]);
+    } else {
+      onChange(value.filter((v) => v !== optionValue));
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...aria,
+      role: "group",
+      className: cn(
+        "flex flex-col",
+        bordered ? "divide-y divide-[var(--color-border)] overflow-hidden rounded-lg border border-[var(--color-border)]" : "gap-3",
+        className
+      ),
+      children: options.map((option) => {
+        const id = `switch-${option.value}`;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-start justify-between gap-4",
+              bordered ? "px-3.5 py-3 hover:bg-[var(--color-bg-muted)]" : "",
+              (disabled || option.disabled) && "opacity-60"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "block text-sm font-medium text-[var(--color-fg-base)]", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs text-[var(--color-fg-subtle)]", children: option.description }) : null
+              ] }),
+              /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  id,
+                  "aria-label": option.label,
+                  checked: value.includes(option.value),
+                  onChange: (checked) => toggle(option.value, checked),
+                  disabled: Boolean(disabled || option.disabled)
+                }
+              )
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var cardColumns = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 sm:grid-cols-2",
+  3: "grid-cols-1 sm:grid-cols-3",
+  4: "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4"
+};
+function RadioCardGroup({
+  columns,
+  className,
+  ...props
+}) {
+  const gridClass = columns ? cn("!grid !flex-none", cardColumns[columns]) : void 0;
+  return /* @__PURE__ */ jsx(
+    RadioGroup,
+    {
+      ...props,
+      variant: "card",
+      orientation: props.orientation ?? "horizontal",
+      className: cn(gridClass, className)
+    }
+  );
+}
+var Select = forwardRef(function Select2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "select",
+    {
+      ref,
+      "data-density-control": "input",
+      ...props,
+      className: cn(
+        "block h-9 w-full rounded-md border border-[var(--color-border-strong)]",
+        "bg-[var(--color-bg-base)] text-sm text-[var(--color-fg-base)]",
+        "appearance-none pl-3 pr-8",
+        "transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
+        "focus:ring-3 focus:ring-[var(--color-accent)]/15 focus:border-[var(--color-accent)] focus:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "bg-[length:16px] bg-[right_8px_center] bg-no-repeat",
+        className
+      )
+    }
+  );
+});
+var Textarea = forwardRef(function Textarea2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      "data-density-control": "textarea",
+      ...props,
+      className: cn(
+        "block min-h-[80px] w-full rounded-md border border-[var(--color-border-strong)]",
+        "bg-[var(--color-bg-base)] text-sm text-[var(--color-fg-base)]",
+        "resize-vertical px-3 py-2",
+        "placeholder:text-[var(--color-fg-subtle)]",
+        "transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
+        "focus:ring-3 focus:ring-[var(--color-accent)]/15 focus:border-[var(--color-accent)] focus:outline-none",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "aria-[invalid=true]:focus:ring-[var(--color-danger)]/15 aria-[invalid=true]:border-[var(--color-danger)]",
+        className
+      )
+    }
+  );
+});
+function ToggleGroup(props) {
+  const active = (value) => props.type === "single" ? props.value === value : props.value.includes(value);
+  const toggle = (value) => {
+    if (props.type === "single") props.onChange(value);
+    else
+      props.onChange(
+        active(value) ? props.value.filter((item) => item !== value) : [...props.value, value]
+      );
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: props.type === "single" ? "radiogroup" : "group",
+      "aria-label": props.ariaLabel,
+      className: cn(
+        "inline-flex overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border-strong)] bg-[var(--color-bg-base)]",
+        props.className
+      ),
+      children: props.options.map((option) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: option.disabled,
+          "aria-pressed": props.type === "multiple" ? active(option.value) : void 0,
+          "aria-checked": props.type === "single" ? active(option.value) : void 0,
+          role: props.type === "single" ? "radio" : void 0,
+          onClick: () => toggle(option.value),
+          className: cn(
+            "inline-flex h-9 items-center gap-2 border-r border-[var(--color-border)] px-3 text-sm font-medium text-[var(--color-fg-muted)] last:border-r-0",
+            "transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] disabled:opacity-45",
+            active(option.value) && "bg-[var(--color-accent)] text-[var(--color-accent-contrast)] hover:bg-[var(--color-accent-hover)] hover:text-[var(--color-accent-contrast)]"
+          ),
+          children: [
+            option.icon,
+            option.label
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+function isSameValue(a, b) {
+  return Object.is(a, b);
+}
+function Combobox({
+  options,
+  value,
+  onChange,
+  placeholder,
+  emptyMessage = "No results",
+  loading,
+  onInputChange,
+  renderOption,
+  size = "md",
+  disabled,
+  clearable = true,
+  name,
+  id,
+  className,
+  inputRef
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const selected = options.find((option) => isSameValue(value, option.value));
+  const filtered = useMemo(
+    () => query ? matchSorter(options, query, { keys: ["label", "description"] }) : options,
+    [options, query]
+  );
+  const inputValue = open ? query : selected?.label ?? "";
+  const listboxId = id ? `${id}-listbox` : void 0;
+  const optionId = (index) => id ? `${id}-option-${String(index)}` : void 0;
+  useEffect(() => {
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          name,
+          value: inputValue,
+          disabled,
+          placeholder,
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": listboxId,
+          "aria-autocomplete": "list",
+          "aria-activedescendant": open && activeIndex >= 0 ? optionId(activeIndex) : void 0,
+          onFocus: () => {
+            if (!disabled) setOpen(true);
+          },
+          onChange: (event) => {
+            if (disabled) return;
+            setQuery(event.target.value);
+            onInputChange?.(event.target.value);
+            setOpen(true);
+          },
+          onKeyDown: (event) => {
+            if (disabled) return;
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+              setActiveIndex((index) => Math.min(index + 1, filtered.length - 1));
+            }
+            if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setOpen(true);
+              setActiveIndex((index) => Math.max(index - 1, 0));
+            }
+            if (event.key === "Enter" && open && activeIndex >= 0 && filtered[activeIndex]) {
+              event.preventDefault();
+              onChange(filtered[activeIndex].value);
+              setOpen(false);
+              setQuery("");
+              setActiveIndex(-1);
+            }
+            if (event.key === "Escape") {
+              setOpen(false);
+              setQuery("");
+              setActiveIndex(-1);
+            }
+          },
+          className: cn(
+            "block w-full rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] pr-16 text-[var(--color-fg-base)]",
+            "focus:ring-3 focus:ring-[var(--color-accent)]/15 placeholder:text-[var(--color-fg-subtle)] focus:border-[var(--color-accent)] focus:outline-none",
+            size === "sm" ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-1 flex items-center gap-1", children: [
+        loading ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin text-[var(--color-fg-subtle)]" }) : null,
+        clearable && value !== null ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear",
+            onClick: () => {
+              onChange(null);
+              setQuery("");
+            },
+            className: "rounded p-1 text-[var(--color-fg-subtle)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)]",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Toggle",
+            disabled,
+            onClick: () => {
+              setOpen((next) => !next);
+              setActiveIndex(-1);
+            },
+            className: "rounded p-1 text-[var(--color-fg-subtle)] hover:text-[var(--color-fg-base)]",
+            children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
+          }
+        )
+      ] })
+    ] }),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: listboxId,
+        role: "listbox",
+        className: "absolute z-[9997] mt-1 max-h-64 w-full overflow-auto rounded-[var(--radius-md)] border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] p-1 shadow-[var(--shadow-xl)] transition-opacity duration-[var(--motion-base)] ease-[var(--ease-standard)]",
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-sm text-[var(--color-fg-subtle)]", children: emptyMessage }) : filtered.map((option, index) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: optionId(index),
+            type: "button",
+            role: "option",
+            disabled: option.disabled,
+            "aria-selected": isSameValue(value, option.value),
+            className: cn(
+              "flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm disabled:opacity-45",
+              isSameValue(value, option.value) && "bg-[var(--color-accent)]/10",
+              index === activeIndex ? "bg-[var(--color-bg-muted)]" : "hover:bg-[var(--color-bg-muted)]"
+            ),
+            onMouseDown: (event) => event.preventDefault(),
+            onMouseEnter: () => setActiveIndex(index),
+            onClick: () => {
+              onChange(option.value);
+              setQuery("");
+              setOpen(false);
+              setActiveIndex(-1);
+            },
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                renderOption ? renderOption(option) : /* @__PURE__ */ jsx("span", { className: "block truncate", children: option.label }),
+                option.description ? /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-[var(--color-fg-subtle)]", children: option.description }) : null
+              ] }),
+              isSameValue(value, option.value) ? /* @__PURE__ */ jsx(Check, { className: "size-4 text-[var(--color-accent)]" }) : null
+            ]
+          },
+          String(option.value)
+        ))
+      }
+    ) : null
+  ] });
+}
+function MultiColumnCombobox({
+  items,
+  columns,
+  value,
+  onChange,
+  displayKey,
+  label,
+  placeholder = "Search\u2026",
+  emptyMessage = "No results",
+  disabled = false,
+  clearable = true,
+  className
+}) {
+  const id = useId();
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const rootRef = useRef(null);
+  const display = displayKey ?? columns[0]?.key ?? "id";
+  const selected = items.find((item) => item.id === value) ?? null;
+  const searchKeys = useMemo(() => columns.map((c) => c.key), [columns]);
+  const filtered = useMemo(
+    () => query ? matchSorter(items, query, { keys: searchKeys }) : items,
+    [items, query, searchKeys]
+  );
+  useEffect(() => {
+    const onPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpen(false);
+        setActiveIndex(-1);
+        setQuery("");
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+    };
+  }, []);
+  const commit = (item) => {
+    onChange(item.id);
+    setOpen(false);
+    setQuery("");
+    setActiveIndex(-1);
+  };
+  const inputValue = open ? query : selected?.[display] ?? "";
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("relative flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-[var(--color-fg-base)]", children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "text",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-controls": `${id}-grid`,
+          "aria-autocomplete": "list",
+          value: inputValue,
+          placeholder: selected ? selected[display] ?? placeholder : placeholder,
+          disabled,
+          onFocus: () => {
+            setOpen(true);
+          },
+          onChange: (event) => {
+            setQuery(event.target.value);
+            setOpen(true);
+            setActiveIndex(0);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "ArrowDown") {
+              event.preventDefault();
+              setOpen(true);
+              setActiveIndex((i) => Math.min(i + 1, filtered.length - 1));
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              setActiveIndex((i) => Math.max(i - 1, 0));
+            } else if (event.key === "Enter" && open && activeIndex >= 0) {
+              event.preventDefault();
+              const item = filtered[activeIndex];
+              if (item) commit(item);
+            } else if (event.key === "Escape") {
+              setOpen(false);
+              setQuery("");
+            }
+          },
+          className: "focus-visible:ring-[var(--color-accent)]/20 block h-9 w-full rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] px-3 py-2 pr-14 text-sm text-[var(--color-fg-base)] transition-[border-color,box-shadow] duration-[var(--motion-fast)] placeholder:text-[var(--color-fg-subtle)] focus:outline-none focus-visible:border-[var(--color-accent)] focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-2 flex items-center gap-0.5", children: [
+        clearable && selected && !disabled ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear selection",
+            onClick: () => {
+              onChange(null);
+              setQuery("");
+            },
+            className: "focus-visible:ring-[var(--color-accent)]/40 rounded p-0.5 text-[var(--color-fg-subtle)] hover:text-[var(--color-fg-base)] focus-visible:outline-none focus-visible:ring-2",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-[var(--color-fg-subtle)]", "aria-hidden": "true" })
+      ] })
+    ] }),
+    open ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: `${id}-grid`,
+        role: "grid",
+        "aria-label": label ?? "Options",
+        className: "absolute left-0 right-0 top-full z-30 mt-1 max-h-72 overflow-auto rounded-md border border-[var(--color-border)] bg-[var(--color-bg-base)] shadow-[var(--shadow-md)]",
+        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-[var(--color-bg-subtle)]", children: /* @__PURE__ */ jsx("tr", { children: columns.map((column) => /* @__PURE__ */ jsx(
+            "th",
+            {
+              scope: "col",
+              style: column.width ? { width: column.width } : void 0,
+              className: "border-b border-[var(--color-border)] px-3 py-1.5 text-left text-[11px] font-semibold uppercase tracking-wide text-[var(--color-fg-muted)]",
+              children: column.header
+            },
+            column.key
+          )) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: filtered.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+            "td",
+            {
+              colSpan: columns.length,
+              className: "px-3 py-4 text-center text-[var(--color-fg-subtle)]",
+              children: emptyMessage
+            }
+          ) }) : filtered.map((item, index) => /* @__PURE__ */ jsx(
+            "tr",
+            {
+              "aria-selected": item.id === value,
+              onClick: () => {
+                commit(item);
+              },
+              onMouseEnter: () => {
+                setActiveIndex(index);
+              },
+              className: cn(
+                "cursor-pointer transition-colors duration-[var(--motion-fast)]",
+                index === activeIndex && "bg-[var(--color-bg-subtle)]",
+                item.id === value && "bg-[var(--color-accent)]/8"
+              ),
+              children: columns.map((column) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: "border-b border-[var(--color-border-subtle)] px-3 py-2 text-[var(--color-fg-base)]",
+                  children: item[column.key]
+                },
+                column.key
+              ))
+            },
+            item.id
+          )) })
+        ] })
+      }
+    ) : null
+  ] });
+}
+function TagInput({
+  value,
+  onChange,
+  placeholder,
+  maxTags,
+  delimiter = /[,;\n\t]/,
+  validate,
+  suggestions = [],
+  className
+}) {
+  const [input, setInput] = useState("");
+  const [error, setError] = useState(null);
+  const add = (raw) => {
+    const tag = raw.trim();
+    if (!tag || value.includes(tag) || maxTags && value.length >= maxTags) return;
+    const nextError = validate?.(tag) ?? null;
+    setError(nextError);
+    if (!nextError) {
+      onChange([...value, tag]);
+      setInput("");
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "focus-within:ring-3 focus-within:ring-[var(--color-accent)]/15 flex min-h-9 w-full flex-wrap items-center gap-1 rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] px-2 py-1 focus-within:border-[var(--color-accent)]", children: [
+      value.map((tag) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-flex h-7 items-center gap-1.5 rounded-full bg-[var(--color-bg-muted)] px-2.5 text-sm text-[var(--color-fg-base)]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: tag }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": `Remove ${tag}`,
+                onClick: () => onChange(value.filter((item) => item !== tag)),
+                className: "inline-flex size-5 items-center justify-center rounded-full text-[var(--color-fg-muted)] transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-black/10 hover:text-[var(--color-fg-base)]",
+                children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+              }
+            )
+          ]
+        },
+        tag
+      )),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: input,
+          placeholder: value.length ? void 0 : placeholder,
+          onChange: (event) => {
+            const next = event.target.value;
+            if (delimiter.test(next)) add(next.replace(delimiter, ""));
+            else setInput(next);
+          },
+          onKeyDown: (event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              add(input);
+            }
+            if (event.key === "Backspace" && !input) onChange(value.slice(0, -1));
+          },
+          className: "min-w-24 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--color-fg-subtle)]"
+        }
+      )
+    ] }),
+    suggestions.length > 0 && input ? /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-wrap gap-1", children: suggestions.filter((item) => item.toLowerCase().includes(input.toLowerCase())).slice(0, 5).map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => add(item),
+        className: "inline-flex h-6 cursor-pointer items-center rounded-full bg-[var(--color-bg-muted)] px-2 text-xs font-medium text-[var(--color-fg-base)] transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-accent-subtle)] hover:text-[var(--color-accent)]",
+        children: item
+      },
+      item
+    )) }) : null,
+    error ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-[var(--color-danger-fg)]", children: error }) : null
+  ] });
+}
+function clamp(value, min, max) {
+  return Math.min(
+    max ?? Number.POSITIVE_INFINITY,
+    Math.max(min ?? Number.NEGATIVE_INFINITY, value)
+  );
+}
+var NumberInput = forwardRef(function NumberInput2({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  precision,
+  placeholder,
+  suffix,
+  prefix,
+  showSteppers = true,
+  size = "md",
+  disabled,
+  className,
+  ariaLabel
+}, ref) {
+  const commit = (next) => onChange(next === null ? null : Number(clamp(next, min, max).toFixed(precision ?? 10)));
+  const bump = (factor) => commit((value ?? 0) + step * factor);
+  const keyDown = (event) => {
+    if (event.key === "ArrowUp") bump(1);
+    if (event.key === "ArrowDown") bump(-1);
+    if (event.key === "PageUp") bump(10);
+    if (event.key === "PageDown") bump(-10);
+    if (event.key === "Home" && min !== void 0) commit(min);
+    if (event.key === "End" && max !== void 0) commit(max);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    prefix ? /* @__PURE__ */ jsx("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-sm text-[var(--color-fg-subtle)]", children: prefix }) : null,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "number",
+        role: "spinbutton",
+        "aria-label": ariaLabel,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value ?? void 0,
+        value: value ?? "",
+        min,
+        max,
+        step,
+        disabled,
+        placeholder,
+        "data-density-control": "input",
+        "data-density-size": size,
+        onKeyDown: keyDown,
+        onChange: (event) => commit(event.target.value === "" ? null : Number(event.target.value)),
+        className: cn(
+          "number-input block w-full appearance-none rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] text-[var(--color-fg-base)] outline-none",
+          "focus:ring-3 focus:ring-[var(--color-accent)]/15 focus:border-[var(--color-accent)] disabled:opacity-50",
+          size === "sm" ? "h-8 px-2 text-xs" : "h-9 px-3 text-sm",
+          prefix && "pl-7",
+          showSteppers ? "pr-14" : suffix ? "pr-10" : void 0
+        )
+      }
+    ),
+    suffix ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute top-1/2 -translate-y-1/2 text-sm text-[var(--color-fg-subtle)]",
+          showSteppers ? "right-10" : "right-3"
+        ),
+        children: suffix
+      }
+    ) : null,
+    showSteppers ? /* @__PURE__ */ jsxs("span", { className: "absolute bottom-1 right-1 top-1 flex w-7 flex-col overflow-hidden rounded-[var(--radius-sm)] border border-[var(--color-border)] bg-[var(--color-bg-subtle)]", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Increment",
+          disabled,
+          onClick: () => bump(1),
+          className: "flex flex-1 cursor-pointer items-center justify-center text-[var(--color-fg-muted)] transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)] disabled:cursor-not-allowed disabled:opacity-50",
+          children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-3" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Decrement",
+          disabled,
+          onClick: () => bump(-1),
+          className: "flex flex-1 cursor-pointer items-center justify-center border-t border-[var(--color-border)] text-[var(--color-fg-muted)] transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)] disabled:cursor-not-allowed disabled:opacity-50",
+          children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-3" })
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsx("style", { children: `
+        .number-input::-webkit-outer-spin-button,
+        .number-input::-webkit-inner-spin-button {
+          -webkit-appearance: none;
+          margin: 0;
+        }
+        .number-input[type='number'] {
+          -moz-appearance: textfield;
+        }
+      ` })
+  ] });
+});
+var SearchInput = forwardRef(function SearchInput2({
+  value,
+  onChange,
+  onDebouncedChange,
+  debounceMs = 200,
+  showClear = true,
+  clearLabel = "Clear",
+  className,
+  ...props
+}, ref) {
+  const debounced = useDebouncedCallback((next) => onDebouncedChange?.(next), debounceMs);
+  useEffect(() => {
+    debounced(value);
+  }, [debounced, value]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(Search, { className: "pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--color-fg-subtle)]" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        "data-density-control": "input",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        className: "focus:ring-[var(--color-accent)]/20 block h-9 w-full rounded-md border border-[var(--color-border-strong)] bg-[var(--color-bg-base)] pl-9 pr-9 text-sm text-[var(--color-fg-base)] outline-none transition-[border-color,box-shadow] duration-[var(--motion-fast)] ease-[var(--ease-standard)] placeholder:text-[var(--color-fg-subtle)] focus:border-[var(--color-accent)] focus:ring-2",
+        ...props
+      }
+    ),
+    showClear && value ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": clearLabel,
+        onClick: () => onChange(""),
+        className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--color-fg-subtle)] transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)]",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    ) : null
+  ] });
+});
+function Popover({
+  trigger,
+  children,
+  side = "bottom",
+  align = "start",
+  sideOffset = 8,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  modal = false,
+  className
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const actualOpen = open ?? uncontrolledOpen;
+  const setOpen = (next) => {
+    setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  useEffect(() => {
+    if (!actualOpen) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") {
+        setUncontrolledOpen(false);
+        onOpenChange?.(false);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [actualOpen, onOpenChange]);
+  const floating = useFloating({
+    open: actualOpen,
+    onOpenChange: setOpen,
+    strategy: "fixed",
+    placement: toPlacement(side, align),
+    whileElementsMounted: autoUpdate,
+    middleware: [offset(sideOffset), flip(), shift({ padding: 8 })]
+  });
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    useClick(floating.context),
+    useDismiss(floating.context),
+    useRole(floating.context, { role: modal ? "dialog" : "menu" })
+  ]);
+  const renderedTrigger = isValidElement(trigger) ? (() => {
+    const triggerProps = trigger.props;
+    return cloneElement(
+      trigger,
+      getReferenceProps({
+        ...triggerProps,
+        ref: composeRefs(triggerProps.ref, floating.refs.setReference)
+      })
+    );
+  })() : trigger;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderedTrigger,
+    actualOpen ? /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context: floating.context, modal, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: floating.refs.setFloating,
+        style: floating.floatingStyles,
+        ...getFloatingProps({
+          className: cn(
+            "z-[9998] min-w-52 max-w-[min(24rem,calc(100vw-1rem))] rounded-[var(--radius-md)] border border-[var(--color-border-strong)]",
+            "bg-[var(--color-bg-base)] p-3.5 text-sm text-[var(--color-fg-base)] shadow-[var(--shadow-xl)] outline-none focus:outline-none focus-visible:outline-none",
+            "transition-opacity duration-[var(--motion-fast)] ease-[var(--ease-standard)]",
+            className
+          )
+        }),
+        children: typeof children === "function" ? children({ close: () => setOpen(false) }) : children
+      }
+    ) }) }) : null
+  ] });
+}
+
+// src/lib/filters/types.ts
+var isGroup = (node) => typeof node.combinator === "string" && Array.isArray(node.conditions);
+
+// src/lib/filters/operators.ts
+var OPERATORS_BY_TYPE = {
+  string: [
+    "contains",
+    "notContains",
+    "eq",
+    "neq",
+    "startsWith",
+    "endsWith",
+    "in",
+    "isEmpty",
+    "isNotEmpty"
+  ],
+  number: ["eq", "neq", "gt", "gte", "lt", "lte", "between", "isEmpty", "isNotEmpty"],
+  date: ["before", "after", "between", "relative", "isEmpty", "isNotEmpty"],
+  enum: ["in", "notIn", "eq", "neq", "isEmpty", "isNotEmpty"],
+  boolean: ["is", "isEmpty", "isNotEmpty"]
+};
+var DEFAULT_OPERATOR = {
+  string: "contains",
+  number: "eq",
+  date: "after",
+  enum: "in",
+  boolean: "is"
+};
+var NULLARY = /* @__PURE__ */ new Set(["isEmpty", "isNotEmpty"]);
+var BINARY_RANGE = /* @__PURE__ */ new Set(["between"]);
+var MULTI = /* @__PURE__ */ new Set(["in", "notIn"]);
+var isNullaryOp = (op) => NULLARY.has(op);
+var isRangeOp = (op) => BINARY_RANGE.has(op);
+var isMultiValueOp = (op) => MULTI.has(op);
+var operatorsFor = (type, override) => {
+  if (override && override.length > 0) {
+    const valid = new Set(OPERATORS_BY_TYPE[type]);
+    return override.filter((op) => valid.has(op));
+  }
+  return OPERATORS_BY_TYPE[type];
+};
+var FiltersContext = createContext(null);
+function FiltersProvider({ value, children }) {
+  return /* @__PURE__ */ jsx(FiltersContext.Provider, { value, children });
+}
+function useFiltersContext() {
+  const ctx = useContext(FiltersContext);
+  if (!ctx) {
+    throw new Error("useFiltersContext must be used within FiltersProvider");
+  }
+  return ctx;
+}
+function useOptionalFiltersContext() {
+  return useContext(FiltersContext);
+}
+function FilterPopover({
+  label,
+  activeCount = 0,
+  onApply,
+  onClear,
+  children,
+  icon,
+  applyLabel = "Apply",
+  clearLabel = "Clear"
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      trigger: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", className: "max-w-60 justify-start", children: [
+        icon ?? /* @__PURE__ */ jsx(Filter, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+        activeCount > 0 ? /* @__PURE__ */ jsx(Badge, { tone: "info", children: activeCount }) : null
+      ] }),
+      className: "w-[min(28rem,94vw)]",
+      children: ({ close }) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        children,
+        onApply || onClear ? /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 border-t border-[var(--color-border-subtle)] pt-3", children: [
+          onClear ? /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }) : null,
+          onApply ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              onClick: () => {
+                onApply();
+                close();
+              },
+              children: applyLabel
+            }
+          ) : null
+        ] }) : null
+      ] })
+    }
+  );
+}
+var LazyDateRangeFilterCalendar = lazy(
+  () => import('./DateRangeFilterCalendar-D3ZM42SZ.js').then((module) => ({
+    default: module.DateRangeFilterCalendar
+  }))
+);
+function DateRangeFilter({
+  label,
+  value,
+  onChange,
+  inline = false,
+  onClear,
+  placeholder
+}) {
+  const dateFormatter = new Intl.DateTimeFormat(void 0, { day: "numeric", month: "short" });
+  const text = value.from ? `${dateFormatter.format(value.from)} - ${value.to ? dateFormatter.format(value.to) : ""}` : label;
+  const picker = /* @__PURE__ */ jsx(
+    Suspense,
+    {
+      fallback: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-busy": "true",
+          className: "h-80 rounded-md border border-dashed border-[var(--color-border)] bg-[var(--color-bg-subtle)]"
+        }
+      ),
+      children: /* @__PURE__ */ jsx(LazyDateRangeFilterCalendar, { value, onChange })
+    }
+  );
+  if (inline) return picker;
+  return /* @__PURE__ */ jsx(
+    FilterPopover,
+    {
+      label: text || placeholder || label,
+      activeCount: value.from ? 1 : 0,
+      ...onClear ? { onClear } : {},
+      children: picker
+    }
+  );
+}
+function FacetedFilter({
+  label,
+  options,
+  value,
+  onChange,
+  inline = false,
+  showSearch,
+  searchPlaceholder
+}) {
+  const [query, setQuery] = useState("");
+  const filtered = useMemo(
+    () => options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())),
+    [options, query]
+  );
+  const toggle = (option) => onChange(
+    value.some((item) => Object.is(item, option.value)) ? value.filter((item) => !Object.is(item, option.value)) : [...value, option.value]
+  );
+  const inlineContent = /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+    showSearch ? /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "flex max-h-24 min-w-0 flex-wrap gap-1.5 overflow-auto pr-1", children: [
+      filtered.map((option) => {
+        const active = value.some((item) => Object.is(item, option.value));
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => toggle(option),
+            "aria-pressed": active,
+            className: cn(
+              "inline-flex max-w-full items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium",
+              "transition-[background-color,border-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)]",
+              active ? "border-[var(--color-accent)] bg-[var(--color-accent-muted)] text-[var(--color-accent-fg)]" : "border-[var(--color-border)] bg-[var(--color-bg-base)] text-[var(--color-fg-muted)] hover:bg-[var(--color-bg-muted)] hover:text-[var(--color-fg-base)]"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }),
+              option.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-[var(--color-fg-subtle)]", children: option.count }) : null
+            ]
+          },
+          String(option.value)
+        );
+      }),
+      filtered.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-fg-subtle)]", children: "No options" }) : null
+    ] })
+  ] });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    showSearch ? /* @__PURE__ */ jsx(SearchInput, { value: query, onChange: setQuery, placeholder: searchPlaceholder }) : null,
+    /* @__PURE__ */ jsx("div", { className: "max-h-60 space-y-0.5 overflow-auto", children: filtered.map((option) => {
+      const active = value.some((item) => Object.is(item, option.value));
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(option),
+          className: "flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-[background-color,color] duration-[var(--motion-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-bg-muted)]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "flex size-4 items-center justify-center rounded border border-[var(--color-border)] bg-[var(--color-bg-base)]", children: active ? /* @__PURE__ */ jsx(Check, { className: "size-3 text-[var(--color-accent)]" }) : null }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: active ? "flex-1 text-[var(--color-fg-base)]" : "flex-1 text-[var(--color-fg-muted)]",
+                children: option.label
+              }
+            ),
+            option.count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--color-fg-subtle)]", children: option.count }) : null
+          ]
+        },
+        String(option.value)
+      );
+    }) })
+  ] });
+  if (inline) return inlineContent;
+  return /* @__PURE__ */ jsx(FilterPopover, { label, activeCount: value.length, children: content });
+}
+var OPERATOR_LABEL = {
+  eq: "is",
+  neq: "is not",
+  contains: "contains",
+  notContains: "does not contain",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  in: "is any of",
+  notIn: "is none of",
+  gt: "greater than",
+  gte: "greater or equal",
+  lt: "less than",
+  lte: "less or equal",
+  between: "between",
+  before: "before",
+  after: "after",
+  relative: "within",
+  is: "is",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty"
+};
+var RELATIVE_OPTIONS = [
+  { label: "Today", value: "today" },
+  { label: "7 days", value: "7d" },
+  { label: "30 days", value: "30d" },
+  { label: "90 days", value: "90d" },
+  { label: "1 year", value: "1y" }
+];
+var toInputDate = (value) => {
+  if (value instanceof Date) return value.toISOString().slice(0, 10);
+  if (typeof value === "string") return value.slice(0, 10);
+  if (typeof value === "number") return new Date(value).toISOString().slice(0, 10);
+  return "";
+};
+var dateFromInput = (value) => {
+  const input = toInputDate(value);
+  if (!input) return void 0;
+  const date = /* @__PURE__ */ new Date(`${input}T00:00:00`);
+  return Number.isNaN(date.getTime()) ? void 0 : date;
+};
+var asArray = (value) => Array.isArray(value) ? value : [];
+var asStringArray = (value) => asArray(value).filter((item) => typeof item === "string");
+var asNumber = (value) => {
+  if (typeof value === "number") return value;
+  if (typeof value === "string" && value !== "") {
+    const n = Number(value);
+    return Number.isNaN(n) ? null : n;
+  }
+  return null;
+};
+var valuesEqual = (a, b) => Object.is(a, b);
+var defaultValueForOperator = (op, field) => {
+  if (isNullaryOp(op)) return void 0;
+  if (isRangeOp(op)) return [];
+  if (isMultiValueOp(op)) return [];
+  if (field?.type === "boolean") return "";
+  if (field?.type === "date" && op === "relative") return "7d";
+  return "";
+};
+var optionsForField = (field) => field.options ?? [];
+function EnumValueEditor({
+  condition,
+  field,
+  onChange
+}) {
+  const options = optionsForField(field);
+  if (isMultiValueOp(condition.op)) {
+    return /* @__PURE__ */ jsx(
+      FacetedFilter,
+      {
+        label: field.label,
+        options,
+        value: asArray(condition.value),
+        onChange: (value) => onChange({ value }),
+        inline: true,
+        showSearch: options.length > 8
+      }
+    );
+  }
+  const comboOptions = options.map((option) => ({
+    value: option.value,
+    label: option.label
+  }));
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      options: comboOptions,
+      value: comboOptions.find((option) => valuesEqual(option.value, condition.value))?.value ?? null,
+      onChange: (value) => onChange({ value: value ?? "" }),
+      placeholder: "Value",
+      size: "sm"
+    }
+  );
+}
+function DateValueEditor({
+  condition,
+  field,
+  onChange
+}) {
+  if (condition.op === "relative") {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: RELATIVE_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: condition.value === option.value ? "soft" : "ghost",
+        size: "xs",
+        onClick: () => onChange({ value: option.value }),
+        children: option.label
+      },
+      option.value
+    )) });
+  }
+  if (condition.op === "between") {
+    const [from, to] = asArray(condition.value);
+    const range = {
+      from: dateFromInput(from),
+      to: dateFromInput(to)
+    };
+    return /* @__PURE__ */ jsx(
+      DateRangeFilter,
+      {
+        label: field.label,
+        value: range,
+        onChange: (next) => onChange({
+          value: [toInputDate(next.from), toInputDate(next.to)]
+        }),
+        inline: true
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      type: "date",
+      value: toInputDate(condition.value),
+      onChange: (event) => onChange({ value: event.target.value }),
+      "aria-label": `${field.label} value`,
+      className: "h-8 text-xs"
+    }
+  );
+}
+function NumberValueEditor({
+  condition,
+  field,
+  onChange
+}) {
+  if (condition.op === "between") {
+    const [from, to] = asArray(condition.value);
+    return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          value: asNumber(from),
+          onChange: (value) => onChange({ value: [value, to ?? ""] }),
+          size: "sm",
+          showSteppers: false,
+          ariaLabel: `${field.label} from`
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          value: asNumber(to),
+          onChange: (value) => onChange({ value: [from ?? "", value] }),
+          size: "sm",
+          showSteppers: false,
+          ariaLabel: `${field.label} to`
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      value: asNumber(condition.value),
+      onChange: (value) => onChange({ value: value ?? "" }),
+      size: "sm",
+      showSteppers: false,
+      ariaLabel: `${field.label} value`
+    }
+  );
+}
+function ValueEditor({
+  condition,
+  field,
+  onChange
+}) {
+  if (isNullaryOp(condition.op)) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-8 items-center rounded-md border border-[var(--color-border)] bg-[var(--color-bg-subtle)] px-3 text-xs text-[var(--color-fg-subtle)]", children: "No value" });
+  }
+  if (field.type === "enum") {
+    return /* @__PURE__ */ jsx(EnumValueEditor, { condition, field, onChange });
+  }
+  if (field.type === "boolean") {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: typeof condition.value === "boolean" ? String(condition.value) : typeof condition.value === "string" ? condition.value : "",
+        onChange: (event) => {
+          const { value } = event.target;
+          onChange({ value: value === "" ? "" : value === "true" });
+        },
+        "aria-label": `${field.label} value`,
+        className: "h-8 text-xs",
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Any" }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: "Yes" }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: "No" })
+        ]
+      }
+    );
+  }
+  if (field.type === "number") {
+    return /* @__PURE__ */ jsx(NumberValueEditor, { condition, field, onChange });
+  }
+  if (field.type === "date") {
+    return /* @__PURE__ */ jsx(DateValueEditor, { condition, field, onChange });
+  }
+  if (isMultiValueOp(condition.op)) {
+    return /* @__PURE__ */ jsx(
+      TagInput,
+      {
+        value: asStringArray(condition.value),
+        onChange: (value) => onChange({ value }),
+        placeholder: "Add values"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      value: typeof condition.value === "string" ? condition.value : "",
+      onChange: (event) => onChange({ value: event.target.value }),
+      placeholder: "Value",
+      "aria-label": `${field.label} value`,
+      className: "h-8 text-xs"
+    }
+  );
+}
+function FilterBuilder({
+  condition,
+  fields,
+  onChange,
+  onRemove
+}) {
+  const field = fields.find((item) => item.id === condition.field) ?? fields[0];
+  const fieldOptions = useMemo(
+    () => fields.map((item) => ({ value: item.id, label: item.label })),
+    [fields]
+  );
+  const operatorOptions = useMemo(() => {
+    if (!field) return [];
+    return operatorsFor(field.type, field.operators).map((op) => ({
+      value: op,
+      label: OPERATOR_LABEL[op]
+    }));
+  }, [field]);
+  if (!field) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-bg-subtle)] p-2 md:grid-cols-[minmax(9rem,1fr)_minmax(10rem,1fr)_minmax(12rem,1.4fr)_auto]", children: [
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        className: "min-w-0",
+        options: fieldOptions,
+        value: condition.field,
+        onChange: (fieldId) => {
+          const nextField = fields.find((item) => item.id === fieldId);
+          if (!nextField) return;
+          const op = nextField.operators?.[0] ?? DEFAULT_OPERATOR[nextField.type];
+          onChange(condition.id, {
+            field: nextField.id,
+            op,
+            value: defaultValueForOperator(op, nextField)
+          });
+        },
+        placeholder: "Field",
+        size: "sm",
+        clearable: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        className: "min-w-0",
+        options: operatorOptions,
+        value: operatorOptions.some((option) => option.value === condition.op) ? condition.op : field.operators?.[0] ?? DEFAULT_OPERATOR[field.type],
+        onChange: (op) => {
+          if (!op) return;
+          onChange(condition.id, { op, value: defaultValueForOperator(op, field) });
+        },
+        placeholder: "Operator",
+        size: "sm",
+        clearable: false
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+      ValueEditor,
+      {
+        condition,
+        field,
+        onChange: (patch) => onChange(condition.id, patch)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon-sm",
+        "aria-label": `Remove filter: ${field.label}`,
+        onClick: () => onRemove(condition.id),
+        className: "self-start",
+        children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+      }
+    )
+  ] });
+}
+
+export { Badge, Button, ButtonGroup, Checkbox, CheckboxGroup, Combobox, DEFAULT_OPERATOR, DateRangeFilter, FacetedFilter, Field, Fieldset, FilterBuilder, FilterPopover, FiltersProvider, Form, FormActions, FormControl, FormError, FormGrid, FormHelperText, FormLabel, IconButton, Input, MultiColumnCombobox, NumberInput, Popover, RadioCardGroup, RadioGroup, SearchInput, Select, Switch, SwitchGroup, TagInput, Textarea, ToggleGroup, Tooltip, cn, defaultValueForOperator, isGroup, isMultiValueOp, isNullaryOp, isRangeOp, operatorsFor, useFiltersContext, useFormControl, useFormControlContext, useOptionalFiltersContext };