@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-4HRQX2IA.js

@@ -0,0 +1,928 @@
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-WBE6VQOO.js';
+import { TextInput } from './chunk-PWCMCMDN.js';
+import { Button } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { XIcon, TrashIcon, PlusIcon } from 'lucide-react';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/advanced/FilterBuilder/FilterBuilder.types.ts
+function isFilterGroup(item) {
+  return "combinator" in item && "rules" in item;
+}
+function isFilterRule(item) {
+  return "field" in item && "operator" in item;
+}
+var ROUNDED_MD = "rounded-md";
+var filterBuilderVariants = cva(
+  [
+    "w-full",
+    "rounded-lg",
+    "border border-border",
+    "bg-background"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-3 text-sm",
+        default: "p-4 text-sm",
+        lg: "p-6 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var filterGroupVariants = cva(
+  [
+    "relative",
+    ROUNDED_MD,
+    "border border-border",
+    "bg-muted/30"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 gap-2",
+        default: "p-4 gap-3",
+        lg: "p-5 gap-4"
+      },
+      isRoot: {
+        true: "border-0 bg-transparent p-0",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isRoot: false
+    }
+  }
+);
+var filterGroupHeaderVariants = cva(
+  [
+    "flex items-center",
+    "font-medium"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5 text-xs mb-2",
+        default: "gap-2 text-sm mb-3",
+        lg: "gap-3 text-base mb-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var combinatorToggleVariants = cva(
+  [
+    "inline-flex items-center justify-center",
+    ROUNDED_MD,
+    "font-semibold uppercase tracking-wide",
+    "transition-colors duration-200",
+    "cursor-pointer",
+    "select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5 text-xs min-w-9",
+        default: "px-2.5 py-1 text-xs min-w-11",
+        lg: "px-3 py-1.5 text-sm min-w-14"
+      },
+      active: {
+        true: "bg-primary text-primary-foreground",
+        false: "bg-muted text-muted-foreground hover:bg-muted/80"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      active: false
+    }
+  }
+);
+var filterRuleVariants = cva(
+  [
+    "flex items-start",
+    ROUNDED_MD,
+    "bg-background",
+    "border border-border",
+    "transition-all duration-200",
+    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 gap-1.5",
+        default: "p-3 gap-2",
+        lg: "p-4 gap-3"
+      },
+      invalid: {
+        true: "border-destructive",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      invalid: false
+    }
+  }
+);
+var ruleFieldVariants = cva(
+  [
+    "flex-shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-32",
+        default: "w-40",
+        lg: "w-52"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ruleOperatorVariants = cva(
+  [
+    "flex-shrink-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "w-24",
+        default: "w-36",
+        lg: "w-44"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var ruleValueVariants = cva(
+  [
+    "flex-1 min-w-0"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var rulesContainerVariants = cva(
+  [
+    "flex flex-col"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "gap-2",
+        default: "gap-3",
+        lg: "gap-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var filterToolbarVariants = cva(
+  [
+    "flex items-center justify-between",
+    "pt-3 mt-3",
+    "border-t border-border"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "gap-2",
+        default: "gap-3",
+        lg: "gap-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var filterPreviewVariants = cva(
+  [
+    ROUNDED_MD,
+    "bg-muted/50",
+    "font-mono",
+    "overflow-x-auto"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "p-2 text-xs mt-3",
+        default: "p-3 text-xs mt-4",
+        lg: "p-4 text-sm mt-5"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var emptyStateVariants = cva(
+  [
+    "flex flex-col items-center justify-center",
+    "text-muted-foreground",
+    "border border-dashed border-border",
+    ROUNDED_MD
+  ],
+  {
+    variants: {
+      size: {
+        sm: "py-4 px-3 text-xs gap-1",
+        default: "py-6 px-4 text-sm gap-2",
+        lg: "py-8 px-6 text-base gap-3"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var DEFAULT_OPERATORS_BY_TYPE = {
+  boolean: ["equals", "not_equals"],
+  date: [
+    "equals",
+    "not_equals",
+    "greater_than",
+    "less_than",
+    "between"
+  ],
+  number: [
+    "equals",
+    "not_equals",
+    "greater_than",
+    "greater_than_or_equal",
+    "less_than",
+    "less_than_or_equal",
+    "between"
+  ],
+  select: ["equals", "not_equals", "in", "not_in"],
+  string: [
+    "equals",
+    "not_equals",
+    "contains",
+    "starts_with",
+    "ends_with",
+    "is_empty",
+    "is_not_empty"
+  ]
+};
+var OPERATOR_LABELS = {
+  between: "between",
+  contains: "contains",
+  ends_with: "ends with",
+  equals: "equals",
+  greater_than: "greater than",
+  greater_than_or_equal: "greater than or equal",
+  in: "is any of",
+  is_empty: "is empty",
+  is_not_empty: "is not empty",
+  less_than: "less than",
+  less_than_or_equal: "less than or equal",
+  not_equals: "does not equal",
+  not_in: "is none of",
+  starts_with: "starts with"
+};
+function generateId() {
+  return Math.random().toString(36).slice(2, 11);
+}
+function createEmptyRule() {
+  return {
+    field: "",
+    id: generateId(),
+    operator: "",
+    value: ""
+  };
+}
+function createEmptyGroup() {
+  return {
+    combinator: "and",
+    id: generateId(),
+    rules: []
+  };
+}
+function getOperatorsForField(field) {
+  if (!field) return [];
+  const operators = field.operators ?? DEFAULT_OPERATORS_BY_TYPE[field.type];
+  return operators.map((op) => ({
+    label: OPERATOR_LABELS[op],
+    value: op
+  }));
+}
+function countRules(group) {
+  return group.rules.reduce((count, item) => {
+    if (isFilterGroup(item)) {
+      return count + countRules(item);
+    }
+    return count + 1;
+  }, 0);
+}
+function getInputSize(size) {
+  if (size === "lg") return "lg";
+  if (size === "sm") return "sm";
+  return "md";
+}
+var FilterBuilderContext = React.createContext({
+  fields: [],
+  size: "default"
+});
+function useFilterBuilderContext() {
+  return React.use(FilterBuilderContext);
+}
+function ValueInput({
+  needsSecondValue,
+  onChange,
+  selectedField,
+  size,
+  value
+}) {
+  const inputSize = getInputSize(size);
+  if (selectedField?.type === "select" && selectedField.options) {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value,
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              "aria-label": "Select value",
+              size: inputSize,
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" })
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectContent, { children: selectedField.options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+        ]
+      }
+    );
+  }
+  if (selectedField?.type === "boolean") {
+    return /* @__PURE__ */ jsxs(
+      Select,
+      {
+        value: String(value),
+        onValueChange: onChange,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              "aria-label": "Select value",
+              size: inputSize,
+              children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select value" })
+            }
+          ),
+          /* @__PURE__ */ jsxs(SelectContent, { children: [
+            /* @__PURE__ */ jsx(SelectItem, { value: "true", children: "True" }),
+            /* @__PURE__ */ jsx(SelectItem, { value: "false", children: "False" })
+          ] })
+        ]
+      }
+    );
+  }
+  if (needsSecondValue) {
+    const rawArray = Array.isArray(value) ? value : ["", ""];
+    const fromValue = String(rawArray[0] ?? "");
+    const toValue = String(rawArray[1] ?? "");
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          "aria-label": "From value",
+          placeholder: "From",
+          size: inputSize,
+          type: selectedField?.type === "number" ? "number" : "text",
+          value: fromValue,
+          onChange: (e) => {
+            onChange(JSON.stringify([e.target.value, toValue]));
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "and" }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          "aria-label": "To value",
+          placeholder: "To",
+          size: inputSize,
+          type: selectedField?.type === "number" ? "number" : "text",
+          value: toValue,
+          onChange: (e) => {
+            onChange(JSON.stringify([fromValue, e.target.value]));
+          }
+        }
+      )
+    ] });
+  }
+  const inputType = selectedField?.type === "number" ? "number" : selectedField?.type === "date" ? "date" : "text";
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      "aria-label": "Filter value",
+      placeholder: "Enter value",
+      size: inputSize,
+      type: inputType,
+      value,
+      onChange: (e) => {
+        onChange(e.target.value);
+      }
+    }
+  );
+}
+function FilterRuleComponent({
+  fields,
+  onChange,
+  onRemove,
+  rule
+}) {
+  const { size } = useFilterBuilderContext();
+  const selectedField = fields.find((f) => f.name === rule.field);
+  const operators = getOperatorsForField(selectedField);
+  const isInvalid = Boolean(rule.field && !rule.operator);
+  const inputSize = getInputSize(size);
+  const handleFieldChange = (fieldName) => {
+    const newField = fields.find((f) => f.name === fieldName);
+    const newOperators = getOperatorsForField(newField);
+    onChange({
+      ...rule,
+      field: fieldName,
+      operator: newOperators[0]?.value ?? "",
+      value: ""
+    });
+  };
+  const handleOperatorChange = (operator) => {
+    onChange({
+      ...rule,
+      operator,
+      value: ["is_empty", "is_not_empty"].includes(operator) ? "" : rule.value
+    });
+  };
+  const handleValueChange = (value) => {
+    onChange({ ...rule, value });
+  };
+  const needsValue = rule.operator && !["is_empty", "is_not_empty"].includes(rule.operator);
+  const needsSecondValue = rule.operator === "between";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `Filter rule: ${selectedField?.label ?? "Select field"}`,
+      className: cn(filterRuleVariants({ invalid: isInvalid, size })),
+      "data-slot": "filter-rule",
+      role: "group",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: cn(ruleFieldVariants({ size })), children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: rule.field,
+            onValueChange: handleFieldChange,
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  "aria-label": "Select field",
+                  size: inputSize,
+                  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select field" })
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { children: fields.map((field) => /* @__PURE__ */ jsx(SelectItem, { value: field.name, children: field.label }, field.name)) })
+            ]
+          }
+        ) }),
+        rule.field && /* @__PURE__ */ jsx("div", { className: cn(ruleOperatorVariants({ size })), children: /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: rule.operator,
+            onValueChange: handleOperatorChange,
+            children: [
+              /* @__PURE__ */ jsx(
+                SelectTrigger,
+                {
+                  "aria-label": "Select operator",
+                  size: inputSize,
+                  children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Operator" })
+                }
+              ),
+              /* @__PURE__ */ jsx(SelectContent, { children: operators.map((op) => /* @__PURE__ */ jsx(SelectItem, { value: op.value, children: op.label }, op.value)) })
+            ]
+          }
+        ) }),
+        needsValue && /* @__PURE__ */ jsx("div", { className: cn(ruleValueVariants({ size })), children: /* @__PURE__ */ jsx(
+          ValueInput,
+          {
+            needsSecondValue,
+            selectedField,
+            size,
+            value: rule.value,
+            onChange: handleValueChange
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "aria-label": "Remove rule",
+            className: "flex-shrink-0 text-muted-foreground hover:text-destructive",
+            size: "icon",
+            type: "button",
+            variant: "ghost",
+            onClick: onRemove,
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function FilterGroupComponent({
+  depth,
+  fields,
+  group,
+  isRoot = false,
+  maxDepth,
+  maxRules,
+  onChange,
+  onRemove,
+  rulesCount
+}) {
+  const { size } = useFilterBuilderContext();
+  const handleCombinatorChange = (combinator) => {
+    onChange({ ...group, combinator });
+  };
+  const handleAddRule = () => {
+    if (rulesCount >= maxRules) return;
+    onChange({ ...group, rules: [...group.rules, createEmptyRule()] });
+  };
+  const handleAddGroup = () => {
+    if (depth >= maxDepth || rulesCount >= maxRules) return;
+    onChange({ ...group, rules: [...group.rules, createEmptyGroup()] });
+  };
+  const handleRuleChange = (index, updatedItem) => {
+    const newRules = [...group.rules];
+    newRules[index] = updatedItem;
+    onChange({ ...group, rules: newRules });
+  };
+  const handleRemoveItem = (index) => {
+    onChange({ ...group, rules: group.rules.filter((_, i) => i !== index) });
+  };
+  const canAddRule = rulesCount < maxRules;
+  const canAddGroup = depth < maxDepth && rulesCount < maxRules;
+  const buttonSize = size === "lg" ? "default" : "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": `Filter group with ${group.combinator.toUpperCase()} combinator`,
+      className: cn(filterGroupVariants({ isRoot, size })),
+      "data-slot": "filter-group",
+      role: "group",
+      children: [
+        !isRoot && /* @__PURE__ */ jsxs("div", { className: cn(filterGroupHeaderVariants({ size })), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  combinatorToggleVariants({
+                    active: group.combinator === "and",
+                    size
+                  })
+                ),
+                "aria-pressed": group.combinator === "and",
+                type: "button",
+                onClick: () => {
+                  handleCombinatorChange("and");
+                },
+                children: "AND"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: cn(
+                  combinatorToggleVariants({
+                    active: group.combinator === "or",
+                    size
+                  })
+                ),
+                "aria-pressed": group.combinator === "or",
+                type: "button",
+                onClick: () => {
+                  handleCombinatorChange("or");
+                },
+                children: "OR"
+              }
+            )
+          ] }),
+          onRemove && /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": "Remove group",
+              className: "ml-auto text-muted-foreground hover:text-destructive",
+              size: "icon",
+              type: "button",
+              variant: "ghost",
+              onClick: onRemove,
+              children: /* @__PURE__ */ jsx(TrashIcon, { className: "size-4" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn(rulesContainerVariants({ size })), children: group.rules.length === 0 ? /* @__PURE__ */ jsxs("div", { className: cn(emptyStateVariants({ size })), children: [
+          /* @__PURE__ */ jsx("span", { children: "No filters added" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs", children: 'Click "Add Rule" to create a filter' })
+        ] }) : group.rules.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase text-muted-foreground", children: group.combinator }),
+            /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-border" })
+          ] }),
+          isFilterGroup(item) ? /* @__PURE__ */ jsx(
+            FilterGroupComponent,
+            {
+              depth: depth + 1,
+              fields,
+              group: item,
+              maxDepth,
+              maxRules,
+              rulesCount,
+              onChange: (updated) => {
+                handleRuleChange(index, updated);
+              },
+              onRemove: () => {
+                handleRemoveItem(index);
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            FilterRuleComponent,
+            {
+              fields,
+              rule: item,
+              onChange: (updated) => {
+                handleRuleChange(index, updated);
+              },
+              onRemove: () => {
+                handleRemoveItem(index);
+              }
+            }
+          )
+        ] }, item.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-1",
+              disabled: !canAddRule,
+              size: buttonSize,
+              type: "button",
+              variant: "outline",
+              onClick: handleAddRule,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+                "Add Rule"
+              ]
+            }
+          ),
+          !isRoot && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-1",
+              disabled: !canAddGroup,
+              size: buttonSize,
+              type: "button",
+              variant: "outline",
+              onClick: handleAddGroup,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+                "Add Group"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FilterToolbar({
+  canAddGroup,
+  canAddRule,
+  hasRules,
+  onAddGroup,
+  onAddRule,
+  onApply,
+  onClear
+}) {
+  const { size } = useFilterBuilderContext();
+  const buttonSize = size === "lg" ? "default" : "sm";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(filterToolbarVariants({ size })),
+      "data-slot": "filter-toolbar",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-1",
+              disabled: !canAddRule,
+              size: buttonSize,
+              type: "button",
+              variant: "outline",
+              onClick: onAddRule,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+                "Add Rule"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              className: "gap-1",
+              disabled: !canAddGroup,
+              size: buttonSize,
+              type: "button",
+              variant: "outline",
+              onClick: onAddGroup,
+              children: [
+                /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+                "Add Group"
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          onClear && hasRules && /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: buttonSize,
+              type: "button",
+              variant: "ghost",
+              onClick: onClear,
+              children: "Clear All"
+            }
+          ),
+          onApply && /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: buttonSize,
+              type: "button",
+              variant: "default",
+              onClick: onApply,
+              children: "Apply Filters"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function FilterPreview({ fields, filter }) {
+  const { size } = useFilterBuilderContext();
+  const getFieldLabel = (fieldName) => {
+    const field = fields.find((f) => f.name === fieldName);
+    return field?.label ?? fieldName;
+  };
+  const formatValue = (value) => {
+    if (Array.isArray(value)) {
+      return value.join(" and ");
+    }
+    return String(value);
+  };
+  const renderRule = (rule) => {
+    if (!rule.field || !rule.operator) return "";
+    const fieldLabel = getFieldLabel(rule.field);
+    const operatorLabel = OPERATOR_LABELS[rule.operator];
+    if (["is_empty", "is_not_empty"].includes(rule.operator)) {
+      return `${fieldLabel} ${operatorLabel}`;
+    }
+    return `${fieldLabel} ${operatorLabel} "${formatValue(rule.value)}"`;
+  };
+  const renderGroup = (group) => {
+    const parts = group.rules.map((item) => {
+      if (isFilterGroup(item)) {
+        return `(${renderGroup(item)})`;
+      }
+      return renderRule(item);
+    }).filter(Boolean);
+    return parts.join(` ${group.combinator.toUpperCase()} `);
+  };
+  const preview = renderGroup(filter);
+  if (!preview) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(filterPreviewVariants({ size }), "italic text-muted-foreground"),
+        "data-slot": "filter-preview",
+        children: "No filters defined"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(filterPreviewVariants({ size })),
+      "data-slot": "filter-preview",
+      children: /* @__PURE__ */ jsx("code", { children: preview })
+    }
+  );
+}
+function FilterBuilder({
+  className,
+  fields,
+  maxDepth = 3,
+  maxRules = 20,
+  onApply,
+  onChange,
+  onClear,
+  showPreview = false,
+  size = "default",
+  value,
+  ...props
+}) {
+  const filter = value ?? createEmptyGroup();
+  const handleChange = (updatedFilter) => {
+    onChange?.(updatedFilter);
+  };
+  const handleAddRule = () => {
+    const rulesCount2 = countRules(filter);
+    if (rulesCount2 >= maxRules) return;
+    handleChange({ ...filter, rules: [...filter.rules, createEmptyRule()] });
+  };
+  const handleAddGroup = () => {
+    const rulesCount2 = countRules(filter);
+    if (rulesCount2 >= maxRules) return;
+    handleChange({ ...filter, rules: [...filter.rules, createEmptyGroup()] });
+  };
+  const handleClear = () => {
+    handleChange(createEmptyGroup());
+    onClear?.();
+  };
+  const handleApply = () => {
+    onApply?.(filter);
+  };
+  const rulesCount = countRules(filter);
+  const hasRules = rulesCount > 0;
+  const canAddRule = rulesCount < maxRules;
+  const canAddGroup = rulesCount < maxRules;
+  return /* @__PURE__ */ jsx(FilterBuilderContext, { value: { fields, size: size ?? "default" }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Filter builder",
+      className: cn(filterBuilderVariants({ size }), className),
+      "data-slot": "filter-builder",
+      role: "region",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          FilterGroupComponent,
+          {
+            isRoot: true,
+            depth: 0,
+            fields,
+            group: filter,
+            maxDepth,
+            maxRules,
+            rulesCount,
+            onChange: handleChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          FilterToolbar,
+          {
+            canAddGroup,
+            canAddRule,
+            hasRules,
+            onAddGroup: handleAddGroup,
+            onAddRule: handleAddRule,
+            onApply: onApply ? handleApply : void 0,
+            onClear: onClear ? handleClear : void 0
+          }
+        ),
+        showPreview && /* @__PURE__ */ jsx(FilterPreview, { fields, filter })
+      ]
+    }
+  ) });
+}
+FilterBuilder.displayName = "FilterBuilder";
+
+export { FilterBuilder, FilterGroupComponent, FilterPreview, FilterRuleComponent, FilterToolbar, combinatorToggleVariants, emptyStateVariants, filterBuilderVariants, filterGroupHeaderVariants, filterGroupVariants, filterPreviewVariants, filterRuleVariants, filterToolbarVariants, isFilterGroup, isFilterRule, ruleFieldVariants, ruleOperatorVariants, ruleValueVariants, rulesContainerVariants };
+//# sourceMappingURL=chunk-4HRQX2IA.js.map
+//# sourceMappingURL=chunk-4HRQX2IA.js.map