@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/filterBar/FilterBar.js

@@ -2,8 +2,18 @@ import * as React from "react";
 import classNames from "classnames";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Button } from "../button/Button.js";
+import { Badge } from "../badge/Badge.js";
+import { Icon } from "../icon/Icon.js";
+import { IconButton } from "../iconButton/IconButton.js";
+import { Input } from "../input/Input.js";
+import { NumberInput } from "../numberInput/NumberInput.js";
+import { Pill, Pills } from "../pills/Pills.js";
+import { Popover } from "../popover/Popover.js";
+import { SelectContent, SelectItem, SelectRoot, SelectTrigger, SelectValue } from "../select/Select.js";
+import { Slider } from "../slider/Slider.js";
+import { TagsInput } from "../tagsInput/TagsInput.js";
 import { filterBarPropDefs } from "./filterBar.props.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const FilterBarContext = React.createContext(void 0);
 const FilterBarRoot = React.forwardRef((props, forwardedRef) => {
   const { activeCount, children, className, size = "md", ...rootProps } = extractProps(props, filterBarPropDefs);
@@ -69,22 +79,641 @@ const FilterBarClear = React.forwardRef(
   }
 );
 FilterBarClear.displayName = "FilterBarClear";
+const FilterBarSearch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-filter-bar__search", className) }));
+FilterBarSearch.displayName = "FilterBarSearch";
+const FilterBarRules = React.forwardRef(
+  ({
+    children,
+    className,
+    clearAllLabel = "Clear",
+    defaultExpanded = false,
+    expanded: expandedProp,
+    maxVisible,
+    onClearAll,
+    onExpandedChange,
+    showLessLabel = "Show less",
+    showMoreLabel = (hiddenCount) => `+${hiddenCount} more`,
+    size = "md",
+    ...props
+  }, forwardedRef) => {
+    const items = React.Children.toArray(children);
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState(defaultExpanded);
+    const expanded = expandedProp ?? uncontrolledExpanded;
+    function setExpanded(next) {
+      if (expandedProp === void 0) setUncontrolledExpanded(next);
+      onExpandedChange?.(next);
+    }
+    const collapsible = maxVisible !== void 0 && items.length > maxVisible;
+    const visibleItems = collapsible && !expanded ? items.slice(0, maxVisible) : items;
+    const hiddenCount = items.length - visibleItems.length;
+    return /* @__PURE__ */ jsxs(Pills, { ...props, ref: forwardedRef, size, className: classNames("dsx-filter-bar__rules", className), children: [
+      visibleItems,
+      collapsible || onClearAll !== void 0 ? /* @__PURE__ */ jsxs("li", { className: "dsx-filter-bar__rules-overflow", children: [
+        collapsible && !expanded ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-expanded": false,
+            "aria-label": `Show ${hiddenCount} more filters`,
+            onClick: () => {
+              setExpanded(true);
+            },
+            children: showMoreLabel(hiddenCount)
+          }
+        ) : null,
+        collapsible && expanded ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-expanded": true,
+            onClick: () => {
+              setExpanded(false);
+            },
+            children: showLessLabel
+          }
+        ) : null,
+        onClearAll !== void 0 ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-label": "Clear all filters",
+            onClick: onClearAll,
+            children: clearAllLabel
+          }
+        ) : null
+      ] }) : null
+    ] });
+  }
+);
+FilterBarRules.displayName = "FilterBarRules";
+function describeRulePart(part) {
+  return typeof part === "string" || typeof part === "number" ? String(part) : void 0;
+}
+function describeRuleEditLabel(field, operator, value) {
+  const fieldText = describeRulePart(field);
+  const operatorText = describeRulePart(operator);
+  const valueText = describeRulePart(value);
+  return fieldText !== void 0 && operatorText !== void 0 && valueText !== void 0 ? `Edit filter: ${fieldText} ${operatorText} ${valueText}` : "Edit filter";
+}
+const FilterBarRule = React.forwardRef(
+  ({ active = false, children, className, count, field, onEdit, onRemove, operator, size = "md", value, ...props }, forwardedRef) => {
+    const editLabel = describeRuleEditLabel(field, operator, value);
+    return /* @__PURE__ */ jsxs(
+      Pill,
+      {
+        ...props,
+        ref: forwardedRef,
+        size,
+        removable: onRemove !== void 0,
+        onRemove,
+        className: classNames("dsx-filter-bar__rule", className),
+        "data-active": active ? "true" : void 0,
+        children: [
+          onEdit !== void 0 ? /* @__PURE__ */ jsxs("button", { type: "button", className: "dsx-filter-bar__rule-label", onClick: onEdit, "aria-label": editLabel, children: [
+            /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-field", children: field }),
+            /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-operator", children: operator }),
+            value === "" ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", "data-empty": "true", children: "empty" }) : /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", children: value }),
+            count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-count", children: count }) : null
+          ] }) : /* @__PURE__ */ jsxs("span", { className: "dsx-filter-bar__rule-label", "aria-hidden": false, children: [
+            /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-field", children: field }),
+            /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-operator", children: operator }),
+            value === "" ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", "data-empty": "true", children: "empty" }) : /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", children: value }),
+            count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-count", children: count }) : null
+          ] }),
+          children
+        ]
+      }
+    );
+  }
+);
+FilterBarRule.displayName = "FilterBarRule";
+const FILTER_BAR_BUILDER_DEFAULT_OPERATORS = ["is", "is not", "contains", "does not contain"];
+const FILTER_BAR_BUILDER_EMPTY_RULE = { field: "", operator: "", value: "" };
+function parseRangeValue(raw, min, max) {
+  const [lo, hi] = raw.split("..").map((part) => Number(part));
+  const safeLo = Number.isFinite(lo) ? Math.min(Math.max(lo, min), max) : min;
+  const safeHi = Number.isFinite(hi) ? Math.min(Math.max(hi, safeLo), max) : max;
+  return [safeLo, safeHi];
+}
+function FilterBarDraftFields({
+  compact = false,
+  draft,
+  fields,
+  fieldClassName,
+  labelClassName,
+  onPatch,
+  operators: operatorsProp,
+  operatorLabelId,
+  valueClassName,
+  valueInputId,
+  valueLabelId
+}) {
+  const selectedField = fields.find((field) => field.value === draft.field);
+  const operatorOptions = selectedField?.operators ?? operatorsProp ?? [...FILTER_BAR_BUILDER_DEFAULT_OPERATORS];
+  const valueOptions = selectedField?.options;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: fieldClassName, children: [
+      compact ? null : /* @__PURE__ */ jsx("span", { className: labelClassName, id: operatorLabelId, children: "Operator" }),
+      /* @__PURE__ */ jsxs(SelectRoot, { value: draft.operator, onValueChange: (nextOperator) => {
+        onPatch({ operator: nextOperator });
+      }, children: [
+        compact ? /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Operator", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose operator" }) }) : /* @__PURE__ */ jsx(SelectTrigger, { "aria-labelledby": operatorLabelId, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose operator" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: operatorOptions.map((operator) => /* @__PURE__ */ jsx(SelectItem, { value: operator, children: operator }, operator)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: valueClassName ?? fieldClassName, children: selectedField?.renderValue !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsx("span", { className: labelClassName, id: valueLabelId, children: "Value" }),
+      selectedField.renderValue({
+        value: draft.value,
+        onChange: (nextValue) => {
+          onPatch({ value: nextValue });
+        },
+        id: valueInputId
+      })
+    ] }) : valueOptions !== void 0 || selectedField?.type === "enum" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsx("span", { className: labelClassName, id: valueLabelId, children: "Value" }),
+      /* @__PURE__ */ jsxs(SelectRoot, { value: draft.value, onValueChange: (nextValue) => {
+        onPatch({ value: nextValue });
+      }, children: [
+        compact ? /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Value", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose value" }) }) : /* @__PURE__ */ jsx(SelectTrigger, { "aria-labelledby": valueLabelId, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose value" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: (valueOptions ?? []).map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label ?? option.value }, option.value)) })
+      ] })
+    ] }) : selectedField?.type === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsx("label", { className: labelClassName, htmlFor: valueInputId, children: "Value" }),
+      /* @__PURE__ */ jsx(
+        NumberInput,
+        {
+          id: valueInputId,
+          "aria-label": "Filter value",
+          value: draft.value === "" ? void 0 : Number(draft.value),
+          onChange: (nextValue) => {
+            onPatch({ value: nextValue === void 0 ? "" : String(nextValue) });
+          }
+        }
+      )
+    ] }) : selectedField?.type === "multi" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsx("span", { className: labelClassName, id: valueLabelId, children: "Value" }),
+      compact ? /* @__PURE__ */ jsx(
+        TagsInput,
+        {
+          "aria-label": "Filter value",
+          value: draft.value === "" ? [] : draft.value.split(","),
+          onChange: (nextTags) => {
+            onPatch({ value: nextTags.join(",") });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        TagsInput,
+        {
+          "aria-labelledby": valueLabelId,
+          value: draft.value === "" ? [] : draft.value.split(","),
+          onChange: (nextTags) => {
+            onPatch({ value: nextTags.join(",") });
+          }
+        }
+      )
+    ] }) : selectedField?.type === "range" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsxs("span", { className: labelClassName, id: valueLabelId, children: [
+        "Value",
+        draft.value !== "" ? ` (${draft.value})` : ""
+      ] }),
+      compact ? /* @__PURE__ */ jsx(
+        Slider,
+        {
+          "aria-label": "Filter value",
+          min: selectedField.min ?? 0,
+          max: selectedField.max ?? 100,
+          step: selectedField.step ?? 1,
+          value: parseRangeValue(draft.value, selectedField.min ?? 0, selectedField.max ?? 100),
+          onValueChange: (nextRange) => {
+            const lo = nextRange[0] ?? selectedField.min ?? 0;
+            const hi = nextRange[1] ?? selectedField.max ?? 100;
+            onPatch({ value: `${lo}..${hi}` });
+          }
+        }
+      ) : /* @__PURE__ */ jsx(
+        Slider,
+        {
+          "aria-labelledby": valueLabelId,
+          min: selectedField.min ?? 0,
+          max: selectedField.max ?? 100,
+          step: selectedField.step ?? 1,
+          value: parseRangeValue(draft.value, selectedField.min ?? 0, selectedField.max ?? 100),
+          onValueChange: (nextRange) => {
+            const lo = nextRange[0] ?? selectedField.min ?? 0;
+            const hi = nextRange[1] ?? selectedField.max ?? 100;
+            onPatch({ value: `${lo}..${hi}` });
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      compact ? null : /* @__PURE__ */ jsx("label", { className: labelClassName, htmlFor: valueInputId, children: "Value" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: valueInputId,
+          "aria-label": "Filter value",
+          placeholder: selectedField?.type === "date" ? "YYYY-MM-DD" : selectedField?.type === "person" ? "Enter name" : "Enter value",
+          value: draft.value,
+          onChange: (event) => {
+            const nextValue = event.currentTarget.value;
+            onPatch({ value: nextValue });
+          }
+        }
+      )
+    ] }) })
+  ] });
+}
+function FilterBarBuilder({
+  cancelLabel = "Cancel",
+  className,
+  count,
+  defaultOpen = false,
+  fields,
+  initialRule = null,
+  onApply,
+  onCancel,
+  onOpenChange,
+  open: openProp,
+  operators: operatorsProp,
+  submitLabel = "Apply",
+  title = "Add filter",
+  trigger
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const [draft, setDraft] = React.useState(initialRule ?? FILTER_BAR_BUILDER_EMPTY_RULE);
+  const wasOpenRef = React.useRef(open);
+  React.useEffect(() => {
+    if (open && !wasOpenRef.current) {
+      setDraft(initialRule ?? FILTER_BAR_BUILDER_EMPTY_RULE);
+    }
+    wasOpenRef.current = open;
+  }, [open, initialRule]);
+  const fieldLabelId = React.useId();
+  const operatorLabelId = React.useId();
+  const valueLabelId = React.useId();
+  const valueInputId = React.useId();
+  function handleOpenChange(nextOpen) {
+    if (nextOpen) {
+      setDraft(initialRule ?? FILTER_BAR_BUILDER_EMPTY_RULE);
+    }
+    if (openProp === void 0) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function close(nextOpen) {
+    if (openProp === void 0) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  function handleFieldChange(nextField) {
+    const nextFieldDef = fields.find((field) => field.value === nextField);
+    const nextOperators = nextFieldDef?.operators ?? operatorsProp ?? [...FILTER_BAR_BUILDER_DEFAULT_OPERATORS];
+    const nextValue = nextFieldDef?.type === "range" ? `${nextFieldDef.min ?? 0}..${nextFieldDef.max ?? 100}` : "";
+    setDraft({ field: nextField, operator: nextOperators[0] ?? "", value: nextValue });
+  }
+  const canApply = draft.field !== "" && draft.operator !== "";
+  function handleApply() {
+    if (!canApply) return;
+    onApply?.({ ...draft });
+    close(false);
+  }
+  function handleCancel() {
+    onCancel?.();
+    close(false);
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    trigger !== null ? /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", children: [
+      "+ Add filter",
+      count !== void 0 ? /* @__PURE__ */ jsx(Badge, { size: "sm", variant: "primary", style: { marginLeft: "var(--dsx-space-xs)" }, children: count }) : null
+    ] }) }) : /* @__PURE__ */ jsx(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-filter-bar__builder-anchor" }) }),
+    /* @__PURE__ */ jsxs(Popover.Content, { className: classNames("dsx-filter-bar__builder", className), align: "start", children: [
+      /* @__PURE__ */ jsx(Popover.Title, { children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "dsx-filter-bar__builder-field", children: [
+        /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__builder-label", id: fieldLabelId, children: "Field" }),
+        /* @__PURE__ */ jsxs(SelectRoot, { value: draft.field, onValueChange: handleFieldChange, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { "aria-labelledby": fieldLabelId, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose field" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: fields.map((field) => /* @__PURE__ */ jsx(SelectItem, { value: field.value, children: field.label ?? field.value }, field.value)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        FilterBarDraftFields,
+        {
+          draft,
+          fields,
+          fieldClassName: "dsx-filter-bar__builder-field",
+          labelClassName: "dsx-filter-bar__builder-label",
+          onPatch: (patch) => {
+            setDraft((prev) => ({ ...prev, ...patch }));
+          },
+          operators: operatorsProp,
+          operatorLabelId,
+          valueInputId,
+          valueLabelId
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "dsx-filter-bar__builder-actions", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: handleApply, disabled: !canApply, children: submitLabel })
+      ] })
+    ] })
+  ] });
+}
+FilterBarBuilder.displayName = "FilterBarBuilder";
+function FilterBarConditionEditor({
+  className,
+  draft,
+  fields,
+  newLabel = "New",
+  onApply,
+  onDraftChange,
+  onNew,
+  operators: operatorsProp,
+  submitLabel = "Apply",
+  title = "Condition editor"
+}) {
+  const operatorLabelId = React.useId();
+  const valueInputId = React.useId();
+  const valueLabelId = React.useId();
+  const canApply = draft.field !== "" && draft.operator !== "";
+  function handleRailField(nextField) {
+    const nextFieldDef = fields.find((field) => field.value === nextField);
+    const nextOperators = nextFieldDef?.operators ?? operatorsProp ?? [...FILTER_BAR_BUILDER_DEFAULT_OPERATORS];
+    const nextValue = nextFieldDef?.type === "range" ? `${nextFieldDef.min ?? 0}..${nextFieldDef.max ?? 100}` : "";
+    onDraftChange({ field: nextField, operator: nextOperators[0] ?? "", value: nextValue });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames("dsx-filter-bar__condition-editor", className),
+      role: "group",
+      "aria-label": typeof title === "string" ? title : "Condition editor",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-editor-title", children: title }),
+        /* @__PURE__ */ jsxs("div", { className: "dsx-filter-bar__condition-editor-body", children: [
+          /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-editor-fields", role: "group", "aria-label": "Fields", children: fields.map((field) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: draft.field === field.value ? "primary" : "outline",
+              size: "sm",
+              "aria-pressed": draft.field === field.value,
+              onClick: () => {
+                handleRailField(field.value);
+              },
+              children: field.label ?? field.value
+            },
+            field.value
+          )) }),
+          /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-editor-config", children: /* @__PURE__ */ jsx(
+            FilterBarDraftFields,
+            {
+              draft,
+              fields,
+              fieldClassName: "dsx-filter-bar__condition-editor-field",
+              labelClassName: "dsx-filter-bar__condition-editor-label",
+              onPatch: (patch) => {
+                onDraftChange({ ...draft, ...patch });
+              },
+              operators: operatorsProp,
+              operatorLabelId,
+              valueInputId,
+              valueLabelId
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "dsx-filter-bar__condition-editor-actions", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, disabled: !canApply, children: submitLabel }),
+          onNew !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onNew, children: newLabel }) : null
+        ] })
+      ]
+    }
+  );
+}
+FilterBarConditionEditor.displayName = "FilterBarConditionEditor";
+const FILTER_BAR_COMBINATORS = ["and", "or"];
+const FilterBarConditionGroup = React.forwardRef(
+  ({
+    addConditionLabel = "Add condition",
+    addSubgroupLabel = "Add subgroup",
+    allLabel = null,
+    anyLabel = null,
+    children,
+    className,
+    clearAllLabel = "Clear all",
+    combinator = "and",
+    combinatorLabel = "Match",
+    editor = null,
+    emptyHint = "No conditions yet \u2014 add one below.",
+    rowsLabel = null,
+    gapCombinators,
+    onGapCombinatorChange,
+    onAddCondition,
+    onAddSubgroup,
+    onClearAll,
+    onCombinatorChange,
+    ...props
+  }, forwardedRef) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      ref: forwardedRef,
+      role: props["aria-label"] !== void 0 ? "group" : void 0,
+      className: classNames("dsx-filter-bar__condition-group", className),
+      "data-empty": React.Children.count(children) === 0 ? "true" : void 0,
+      children: [
+        onCombinatorChange !== void 0 && gapCombinators === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          allLabel !== null || anyLabel !== null ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-match-label", children: combinator === "and" ? allLabel ?? "Match all" : anyLabel ?? "Match any" }) : null,
+          /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-combinator", role: "group", "aria-label": combinatorLabel, children: FILTER_BAR_COMBINATORS.map((option) => /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              variant: combinator === option ? "primary" : "ghost",
+              "aria-pressed": combinator === option,
+              onClick: () => {
+                onCombinatorChange(option);
+              },
+              children: option === "and" ? "AND" : "OR"
+            },
+            option
+          )) })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          allLabel !== null || anyLabel !== null ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-match-label", children: combinator === "and" ? allLabel ?? "Match all" : anyLabel ?? "Match any" }) : null,
+          /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-combinator-label", children: combinator === "and" ? "AND" : "OR" })
+        ] }),
+        editor,
+        rowsLabel !== null ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-rows-label", children: rowsLabel }) : null,
+        /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-children", children: React.Children.count(children) === 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__condition-empty", children: emptyHint }) : gapCombinators !== void 0 && onGapCombinatorChange !== void 0 ? React.Children.toArray(children).map((child, index) => {
+          const key = React.isValidElement(child) && child.key !== null ? child.key : index;
+          const gap = gapCombinators[index] ?? "and";
+          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+            index > 0 ? /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-gap", role: "group", "aria-label": `Logic before item ${index + 1}`, children: FILTER_BAR_COMBINATORS.map((option) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: gap === option ? "primary" : "ghost",
+                "aria-pressed": gap === option,
+                onClick: () => {
+                  onGapCombinatorChange(index, option);
+                },
+                children: option === "and" ? "And" : "Or"
+              },
+              option
+            )) }) : null,
+            child
+          ] }, key);
+        }) : children }),
+        onAddCondition !== void 0 || onAddSubgroup !== void 0 || onClearAll !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "dsx-filter-bar__condition-actions", children: [
+          onAddCondition !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onAddCondition, children: addConditionLabel }) : null,
+          onAddSubgroup !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onAddSubgroup, children: addSubgroupLabel }) : null,
+          onClearAll !== void 0 ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearAll, children: clearAllLabel }) : null
+        ] }) : null
+      ]
+    }
+  )
+);
+FilterBarConditionGroup.displayName = "FilterBarConditionGroup";
+function FilterBarEditableRow({
+  field,
+  fields,
+  onFieldChange,
+  onOperatorChange,
+  onValueChange,
+  operator,
+  operators,
+  value
+}) {
+  const operatorLabelId = React.useId();
+  const valueInputId = React.useId();
+  const valueLabelId = React.useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "dsx-filter-bar__condition-field", children: /* @__PURE__ */ jsxs(SelectRoot, { value: field, onValueChange: (nextField) => {
+      onFieldChange?.(nextField);
+    }, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Field", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Choose field" }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: fields.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label ?? option.value }, option.value)) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      FilterBarDraftFields,
+      {
+        compact: true,
+        draft: { field, operator, value },
+        fields,
+        fieldClassName: "dsx-filter-bar__condition-operator",
+        valueClassName: "dsx-filter-bar__condition-value",
+        labelClassName: "dsx-filter-bar__condition-operator",
+        onPatch: (patch) => {
+          if (patch.operator !== void 0) onOperatorChange?.(patch.operator);
+          if (patch.value !== void 0) onValueChange?.(patch.value);
+        },
+        operators,
+        operatorLabelId,
+        valueInputId,
+        valueLabelId
+      }
+    )
+  ] });
+}
+const FilterBarCondition = React.forwardRef(
+  ({
+    children,
+    className,
+    count,
+    dragProps,
+    editLabel,
+    field,
+    fields,
+    onEdit,
+    onFieldChange,
+    onOperatorChange,
+    onRemove,
+    onValueChange,
+    operator,
+    operators,
+    removeLabel = "Remove condition",
+    value,
+    ...props
+  }, forwardedRef) => /* @__PURE__ */ jsxs("div", { ...props, ...dragProps, ref: forwardedRef, className: classNames("dsx-filter-bar__condition", className), children: [
+    dragProps !== void 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-filter-bar__condition-grip", children: /* @__PURE__ */ jsx(Icon, { name: "grip-vertical", size: "sm" }) }) : null,
+    fields !== void 0 ? /* @__PURE__ */ jsx(
+      FilterBarEditableRow,
+      {
+        fields,
+        field: String(field),
+        operator: String(operator),
+        value: typeof value === "string" ? value : "",
+        operators,
+        onFieldChange,
+        onOperatorChange,
+        onValueChange
+      }
+    ) : null,
+    fields === void 0 && onEdit !== void 0 ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "dsx-filter-bar__condition-label",
+        onClick: onEdit,
+        "aria-label": editLabel ?? describeRuleEditLabel(field, operator, value),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-field", children: field }),
+          /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-operator", children: operator }),
+          value === "" ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", "data-empty": "true", children: "empty" }) : /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", children: value }),
+          count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-count", children: count }) : null
+        ]
+      }
+    ) : fields === void 0 ? /* @__PURE__ */ jsxs("span", { className: "dsx-filter-bar__condition-label", "aria-hidden": false, children: [
+      /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-field", children: field }),
+      /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-operator", children: operator }),
+      value === "" ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", "data-empty": "true", children: "empty" }) : /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-value", children: value }),
+      count !== void 0 ? /* @__PURE__ */ jsx("span", { className: "dsx-filter-bar__rule-count", children: count }) : null
+    ] }) : null,
+    onRemove !== void 0 ? /* @__PURE__ */ jsx(IconButton, { type: "button", size: "sm", variant: "ghost", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx(Icon, { name: "trash", size: "sm" }) }) : null,
+    children
+  ] })
+);
+FilterBarCondition.displayName = "FilterBarCondition";
 const FilterBar = Object.assign(FilterBarRoot, {
   Group: FilterBarGroup,
   Summary: FilterBarSummary,
   Actions: FilterBarActions,
   Clear: FilterBarClear,
   Control: FilterBarControl,
-  Count: FilterBarCount
+  Count: FilterBarCount,
+  Search: FilterBarSearch,
+  Rules: FilterBarRules,
+  Rule: FilterBarRule,
+  ConditionGroup: FilterBarConditionGroup,
+  Condition: FilterBarCondition,
+  ConditionEditor: FilterBarConditionEditor,
+  Builder: FilterBarBuilder
 });
 export {
   FilterBar,
   FilterBarActions,
+  FilterBarBuilder,
   FilterBarClear,
+  FilterBarCondition,
+  FilterBarConditionEditor,
+  FilterBarConditionGroup,
   FilterBarControl,
   FilterBarCount,
   FilterBarGroup,
   FilterBarRoot,
+  FilterBarRule,
+  FilterBarRules,
+  FilterBarSearch,
   FilterBarSummary
 };
 //# sourceMappingURL=FilterBar.js.map