@mastra/playground-ui 55.0.0 → 56.0.0-alpha.5

package/dist/components/EmptyState.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const EmptyState = require('../EmptyState--bOUm8JU.cjs');
+const EmptyState = require('../EmptyState-CbHg7j-K.cjs');
 
 
 

package/dist/components/EmptyState.es.js

@@ -1,2 +1,2 @@
-export { E as EmptyState } from '../EmptyState-CLoSRKxC.js';
+export { E as EmptyState } from '../EmptyState-BpwEnZ55.js';
 //# sourceMappingURL=EmptyState.es.js.map

package/dist/components/Entity.cjs.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-i-sXSs2m.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
 
 const Entity = ({ children, className, onClick }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/Entity.es.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-Dxjsbr9n.js';
 
 const Entity = ({ children, className, onClick }) => {
   return /* @__PURE__ */ jsx(

package/dist/components/EntityHeader.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const skeleton = require('../skeleton-DYq_5Fad.cjs');
-const Txt = require('../Txt-i-sXSs2m.cjs');
+const skeleton = require('../skeleton-B3O2CoYQ.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
 const icons_Icon = require('../icons/Icon.cjs.js');
 require('lucide-react');
 

package/dist/components/EntityHeader.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { S as Skeleton } from '../skeleton-KJCC29GI.js';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
+import { S as Skeleton } from '../skeleton-D-kHfsjd.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
 import { Icon } from '../icons/Icon.es.js';
 import 'lucide-react';
 

package/dist/components/Entry.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const Txt = require('../Txt-i-sXSs2m.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
 
 const Entry = ({ label, children }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [

package/dist/components/Entry.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
 
 const Entry = ({ label, children }) => {
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [

package/dist/components/EnvironmentVariablesEditor.cjs.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../Button-BJOVwaxp.cjs');
-const Notice = require('../Notice-D0Mvqvr0.cjs');
+const Button = require('../Button-B1TWWXCy.cjs');
+const Notice = require('../Notice-CoaE5a2D.cjs');
 const envFile = require('../env-file-BU2hStkm.cjs');
-const Txt = require('../Txt-i-sXSs2m.cjs');
-const dataList = require('../data-list-4_cVlINT.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
+const dataList = require('../data-list-DjSl3F2g.cjs');
 const hooks_useCopyToClipboard = require('../hooks/use-copy-to-clipboard.cjs.js');
-const fieldBlock = require('../field-block-DosykAiQ.cjs');
-const inputGroup = require('../input-group-CBuqhxnJ.cjs');
+const fieldBlock = require('../field-block-CygzGxNe.cjs');
+const inputGroup = require('../input-group-BU0Y5c26.cjs');
 
 function EnvironmentVariablesEditorActions({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("flex flex-wrap items-center gap-2", className), ...props });

package/dist/components/EnvironmentVariablesEditor.es.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { c as cn } from '../cn-Dxjsbr9n.js';
 import { PlusIcon, EyeOffIcon, EyeIcon, CheckIcon, CopyIcon, Code2Icon, TrashIcon, UploadIcon } from 'lucide-react';
 import { createContext, use, useState, useMemo } from 'react';
-import { B as Button } from '../Button-BVGwYwHT.js';
-import { N as Notice } from '../Notice-CMZ86f1g.js';
+import { B as Button } from '../Button-XSiL3zvL.js';
+import { N as Notice } from '../Notice-BkL7EPmo.js';
 import { D as DUPLICATE_ENVIRONMENT_VARIABLE_MESSAGE } from '../env-file-BITYowCx.js';
-import { T as Txt } from '../Txt-CfPhlZOu.js';
-import { D as DataList } from '../data-list-Bm70XKg_.js';
+import { T as Txt } from '../Txt-23XtxAlc.js';
+import { D as DataList } from '../data-list-CIUOCtR5.js';
 import { useCopyToClipboard } from '../hooks/use-copy-to-clipboard.es.js';
-import { F as FieldBlock } from '../field-block-CVOfRWvX.js';
-import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-Dv1YsFDZ.js';
+import { F as FieldBlock } from '../field-block-DtG78nn_.js';
+import { I as InputGroup, c as InputGroupInput, a as InputGroupAddon, b as InputGroupButton } from '../input-group-DoaB_TKp.js';
 
 function EnvironmentVariablesEditorActions({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), ...props });

package/dist/components/ErrorBoundary.cjs.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const lucideReact = require('lucide-react');
 const React = require('react');
-const Button = require('../Button-BJOVwaxp.cjs');
-const utils_cn = require('../cn-DnbTIGXa.cjs');
+const Button = require('../Button-B1TWWXCy.cjs');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });

package/dist/components/ErrorBoundary.es.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { AlertTriangle, RotateCcw, RefreshCw, Bug } from 'lucide-react';
 import * as React from 'react';
-import { B as Button } from '../Button-BVGwYwHT.js';
-import { c as cn } from '../cn-ByEbywDh.js';
+import { B as Button } from '../Button-XSiL3zvL.js';
+import { c as cn } from '../cn-Dxjsbr9n.js';
 
 const INITIAL_STATE = { error: null, errorInfo: null };
 function keysChanged(prev, next) {

package/dist/components/FilterBar.cjs.js

@@ -0,0 +1,415 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const filterBarChip = require('../filter-bar-chip-CR_L2kMF.cjs');
+const Button = require('../Button-B1TWWXCy.cjs');
+const React = require('react');
+const utils_cn = require('../cn-DPfV6E6L.cjs');
+const comboboxStyles = require('../combobox-styles-BjTWZmnO.cjs');
+const combobox = require('@base-ui/react/combobox');
+const kbd = require('../kbd-D5WtLU30.cjs');
+const Txt = require('../Txt-BZXvaPLR.cjs');
+const primitives_floating = require('../primitives/floating.cjs.js');
+const primitives_formElement = require('../primitives/form-element.cjs.js');
+const primitives_menuItem = require('../primitives/menu-item.cjs.js');
+const primitives_portalContainer = require('../primitives/portal-container.cjs.js');
+const hooks_useKeyboardShortcutLabel = require('../hooks/use-keyboard-shortcut-label.cjs.js');
+const reactVisuallyHidden = require('@radix-ui/react-visually-hidden');
+
+function FilterBarClear({ label }) {
+  const ctx = filterBarChip.useFilterBarContext();
+  if (!ctx.hasRemovableItems) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      variant: "ghost",
+      size: "icon-xs",
+      "aria-label": label,
+      tooltip: label,
+      onClick: (event) => {
+        event.stopPropagation();
+        ctx.clear();
+        ctx.focusInput();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, {})
+    }
+  );
+}
+
+function FilterBarDraftChip({ field, operator }) {
+  if (!field) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-hidden": true,
+      "data-slot": "filter-bar-draft-chip",
+      className: utils_cn.cn(
+        "flex max-w-full items-stretch divide-x divide-border1 rounded-lg border border-border1 bg-surface5 text-neutral5",
+        "rounded-r-none"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(filterBarChip.segmentClass, "text-neutral6 last:rounded-r-none"), style: filterBarChip.fieldSegmentAccentStyle(field), children: /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field }) }),
+        operator && /* @__PURE__ */ jsxRuntime.jsx("span", { className: utils_cn.cn(filterBarChip.segmentClass, "last:rounded-r-none"), children: operator.label })
+      ]
+    }
+  );
+}
+
+const INITIAL_DRAFT = { step: "field" };
+const getItemLabel = (item) => "label" in item && item.label ? item.label : "value" in item ? item.value : "";
+function FilterBarInput({
+  placeholder = "Filter…",
+  className,
+  "aria-label": ariaLabel = "Add filter"
+}) {
+  const ctx = filterBarChip.useFilterBarContext();
+  const container = primitives_portalContainer.usePortalContainer();
+  const inputRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+  const [draft, setDraft] = React.useState(INITIAL_DRAFT);
+  const [highlighted, setHighlighted] = React.useState(null);
+  const modEnterLabel = hooks_useKeyboardShortcutLabel.useIsApplePlatform() ? "⌘↵" : "Ctrl ↵";
+  const field = draft.fieldId ? ctx.getField(draft.fieldId) : void 0;
+  const operator = draft.operatorId ? ctx.getOperator(draft.operatorId) : void 0;
+  const fieldOperators = React.useMemo(() => field ? ctx.getFieldOperators(field) : [], [ctx, field]);
+  const visibleFields = React.useMemo(() => ctx.fields.filter((f) => !f.hidden), [ctx.fields]);
+  const reset = React.useCallback(() => {
+    setDraft(INITIAL_DRAFT);
+    setQuery("");
+  }, []);
+  const close = React.useCallback(() => {
+    setOpen(false);
+    reset();
+  }, [reset]);
+  const commit = React.useCallback(
+    (fieldId, operatorId, value) => {
+      ctx.addItem({ fieldId, operatorId, value });
+      reset();
+      inputRef.current?.focus();
+    },
+    [ctx, reset]
+  );
+  const selectOperator = React.useCallback(
+    (fieldId, next) => {
+      if (next.arity === "none") {
+        commit(fieldId, next.id, "");
+        return;
+      }
+      setDraft({ step: "value", fieldId, operatorId: next.id });
+      setQuery("");
+    },
+    [commit]
+  );
+  const selectField = React.useCallback(
+    (next) => {
+      const [only, ...rest] = ctx.getFieldOperators(next);
+      if (only && rest.length === 0) {
+        selectOperator(next.id, only);
+        return;
+      }
+      setDraft({ step: "operator", fieldId: next.id });
+      setQuery("");
+    },
+    [ctx, selectOperator]
+  );
+  const valueStep = filterBarChip.useValueStep({
+    field,
+    operator,
+    query,
+    enabled: open && draft.step === "value",
+    onCommit: (value) => {
+      if (draft.fieldId && draft.operatorId) commit(draft.fieldId, draft.operatorId, value);
+    }
+  });
+  const stepBack = React.useCallback(() => {
+    if (draft.step === "value") {
+      const skipOperator = field ? fieldOperators.length === 1 : false;
+      setDraft(skipOperator ? INITIAL_DRAFT : { step: "operator", fieldId: draft.fieldId });
+    } else if (draft.step === "operator") setDraft(INITIAL_DRAFT);
+    else setOpen(false);
+    setQuery("");
+  }, [draft, field, fieldOperators]);
+  const handleSelect = (item) => {
+    if (draft.step === "field") selectField(item);
+    else if (draft.step === "operator" && draft.fieldId) selectOperator(draft.fieldId, item);
+    else valueStep.handleSelect(item);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.preventBaseUIHandler();
+      stepBack();
+      return;
+    }
+    if (!open && (event.key === "ArrowDown" || event.key === "Enter")) {
+      event.preventDefault();
+      event.preventBaseUIHandler();
+      setOpen(true);
+      return;
+    }
+    if (query === "") {
+      if (event.key === "Backspace") {
+        event.preventDefault();
+        event.preventBaseUIHandler();
+        if (draft.step !== "field") stepBack();
+        else {
+          const last = ctx.items[ctx.items.length - 1];
+          if (last) ctx.removeItem(last.id);
+        }
+        return;
+      }
+      if (event.key === "ArrowLeft" && draft.step === "field") {
+        if (ctx.focusChip(ctx.items.length - 1, -1, "remove")) event.preventDefault();
+        return;
+      }
+    }
+    if (!open) return;
+    if (event.key === "Tab" && highlighted && draft.step !== "value" && (draft.step === "operator" || query !== "")) {
+      event.preventDefault();
+      event.preventBaseUIHandler();
+      handleSelect(highlighted);
+      return;
+    }
+    if (draft.step === "value") {
+      const highlightedOption = valueStep.hasSuggestions ? highlighted : null;
+      const handled = valueStep.handleKeyDown(event, highlightedOption);
+      if (handled || event.key === "Enter" && highlightedOption === null) event.preventBaseUIHandler();
+    }
+  };
+  const items = draft.step === "field" ? visibleFields : draft.step === "operator" ? fieldOperators : valueStep.options;
+  const inputPlaceholder = draft.step === "field" ? placeholder : draft.step === "operator" ? "Operator…" : valueStep.hasSuggestions && valueStep.allowFreeText ? "Search or type a value…" : field?.type === "number" ? "Number…" : "Value…";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FilterBarDraftChip, { field, operator: fieldOperators.length === 1 ? void 0 : operator }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      combobox.Combobox.Root,
+      {
+        items,
+        itemToStringLabel: getItemLabel,
+        filter: draft.step === "value" ? null : filterBarChip.matchesQueryFilter,
+        value: null,
+        onValueChange: (item, details) => {
+          details.cancel();
+          if (item) handleSelect(item);
+        },
+        inputValue: query,
+        onInputValueChange: (next, details) => {
+          if (details.reason !== "input-change") return;
+          setQuery(next);
+          if (!open) setOpen(true);
+        },
+        onItemHighlighted: (item) => setHighlighted(item ?? null),
+        open,
+        onOpenChange: (next, details) => {
+          if (!next && details.reason === "escape-key") return;
+          if (!next && details.reason === "outside-press" && details.event.target instanceof Node && inputRef.current?.contains(details.event.target)) {
+            return;
+          }
+          if (next) setOpen(true);
+          else close();
+        },
+        autoHighlight: "always",
+        modal: false,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            combobox.Combobox.Input,
+            {
+              ref: (el) => {
+                inputRef.current = el;
+                ctx.registerInput(el);
+              },
+              "aria-label": ariaLabel,
+              spellCheck: false,
+              "data-slot": "filter-bar-input",
+              "data-step": draft.step,
+              inputMode: draft.step === "value" && field?.type === "number" ? "decimal" : void 0,
+              placeholder: inputPlaceholder,
+              className: utils_cn.cn(
+                // Naked control inside the styled FilterBar surface — same baseline as the DS Input `unstyled` variant.
+                primitives_formElement.unstyledFormElementStyle,
+                "flex-1 px-1 text-ui-smd leading-ui-sm text-neutral6",
+                "placeholder:text-neutral2 placeholder:transition-opacity placeholder:duration-normal focus:placeholder:opacity-70",
+                draft.step === "field" ? "min-w-32" : "min-w-24 pl-0",
+                className
+              ),
+              onFocus: () => setOpen(true),
+              onKeyDown: handleKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(
+            combobox.Combobox.Positioner,
+            {
+              align: "start",
+              sideOffset: primitives_menuItem.MENU_SIDE_OFFSET,
+              positionMethod: primitives_floating.FLOATING_POSITION_METHOD,
+              className: comboboxStyles.comboboxStyles.positioner,
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                combobox.Combobox.Popup,
+                {
+                  className: utils_cn.cn(comboboxStyles.comboboxStyles.popup, "min-w-44"),
+                  "data-slot": "filter-bar-editor",
+                  children: [
+                    draft.step === "field" && /* @__PURE__ */ jsxRuntime.jsx(
+                      filterBarChip.FilterBarOptionList,
+                      {
+                        "aria-label": "Fields",
+                        getKey: (f) => f.id,
+                        renderOption: (f) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarFieldLabel, { field: f }),
+                        emptyText: "No matching field."
+                      }
+                    ),
+                    draft.step === "operator" && /* @__PURE__ */ jsxRuntime.jsx(
+                      filterBarChip.FilterBarOptionList,
+                      {
+                        "aria-label": "Operators",
+                        getKey: (o) => o.id,
+                        renderOption: (o) => o.label,
+                        emptyText: "No matching operator."
+                      }
+                    ),
+                    draft.step === "value" && valueStep.hasSuggestions && /* @__PURE__ */ jsxRuntime.jsx(
+                      filterBarChip.FilterBarOptionList,
+                      {
+                        "aria-label": "Values",
+                        "aria-multiselectable": valueStep.isMany || void 0,
+                        getKey: (o) => o.value,
+                        renderOption: (o) => o.label ?? o.value,
+                        isSelected: (o) => valueStep.isMany && valueStep.selected.includes(o.value),
+                        isLoading: valueStep.isLoading,
+                        error: valueStep.error,
+                        emptyText: valueStep.allowFreeText ? "No suggestions — press Enter to use your text." : "No matching value."
+                      }
+                    ),
+                    draft.step === "value" && !valueStep.hasSuggestions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 py-1 pr-1 pl-[.9em]", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { variant: "ui-sm", className: "text-neutral3", children: "Type a value" }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        Button.Button,
+                        {
+                          size: "xs",
+                          variant: "default",
+                          disabled: !valueStep.canCommitQuery,
+                          onMouseDown: (e) => e.preventDefault(),
+                          onClick: () => valueStep.commitFreeText(),
+                          children: [
+                            "Apply",
+                            /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: "↵" })
+                          ]
+                        }
+                      )
+                    ] }),
+                    draft.step === "value" && valueStep.isMany && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-border1 flex items-center justify-end gap-1 border-t p-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      Button.Button,
+                      {
+                        size: "xs",
+                        variant: "default",
+                        onMouseDown: (e) => e.preventDefault(),
+                        onClick: () => valueStep.commitSelection() || valueStep.commitFreeText(),
+                        children: [
+                          "Done",
+                          /* @__PURE__ */ jsxRuntime.jsx(kbd.Kbd, { size: "xs", children: modEnterLabel })
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+
+function FilterBarSurface({
+  className,
+  clearLabel,
+  children
+}) {
+  const ctx = filterBarChip.useFilterBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "group",
+      "aria-label": ctx.ariaLabel,
+      "data-slot": "filter-bar",
+      className: utils_cn.cn(
+        // Same surface/hover/focus recipe as InputGroup (wrapper whose focus lives on the nested input).
+        // Layout: leading icon | wrapping chip list | Clear. Icon and Clear stay pinned to the
+        // first line; only the list wraps.
+        "flex w-full items-start gap-0.5 rounded-2xl border border-border1 bg-surface-overlay-soft p-0.5",
+        "cursor-text transition-all duration-normal ease-out-custom",
+        "hover:bg-surface-overlay-strong",
+        primitives_formElement.inputHoverBorderWithin,
+        "outline-hidden focus-within:bg-surface-overlay-strong focus-within:outline-hidden",
+        primitives_formElement.inputFocusBorderWithin,
+        className
+      ),
+      onClick: ctx.focusInput,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center py-1 pr-1 pl-1.5", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilterIcon, { "aria-hidden": true, className: "text-neutral3 size-3" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "filter-bar-list", className: "flex min-w-0 flex-1 flex-wrap items-center gap-0.5", children }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex shrink-0 items-center empty:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarClear, { label: clearLabel }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactVisuallyHidden.VisuallyHidden, { "aria-live": "polite", children: ctx.announcement })
+      ]
+    }
+  );
+}
+function FilterBar({
+  fields,
+  operators,
+  value,
+  onValueChange,
+  "aria-label": ariaLabel = "Filters",
+  clearLabel = "Clear filters",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    filterBarChip.FilterBarProvider,
+    {
+      fields,
+      operators,
+      value,
+      onValueChange,
+      ariaLabel,
+      children: /* @__PURE__ */ jsxRuntime.jsx(FilterBarSurface, { className, clearLabel, children })
+    }
+  );
+}
+function FilterBarChips() {
+  const ctx = filterBarChip.useFilterBarContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: ctx.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(filterBarChip.FilterBarChip, { item }, item.id)) });
+}
+FilterBar.Chips = FilterBarChips;
+FilterBar.Chip = filterBarChip.FilterBarChip;
+FilterBar.Input = FilterBarInput;
+
+const DEFAULT_FILTER_OPERATORS = [
+  { id: "is", label: "is" },
+  { id: "is-not", label: "is not" },
+  { id: "contains", label: "contains" },
+  { id: "not-contains", label: "does not contain" },
+  { id: "starts-with", label: "starts with" },
+  { id: "gt", label: ">" },
+  { id: "lt", label: "<" },
+  { id: "gte", label: ">=" },
+  { id: "lte", label: "<=" },
+  { id: "is-empty", label: "is empty", arity: "none" },
+  { id: "is-not-empty", label: "is not empty", arity: "none" },
+  { id: "in", label: "in", arity: "many" }
+];
+
+exports.FilterBarChip = filterBarChip.FilterBarChip;
+exports.FilterBarChipField = filterBarChip.FilterBarChipField;
+exports.FilterBarChipOperator = filterBarChip.FilterBarChipOperator;
+exports.FilterBarChipRemove = filterBarChip.FilterBarChipRemove;
+exports.FilterBarChipValue = filterBarChip.FilterBarChipValue;
+exports.DEFAULT_FILTER_OPERATORS = DEFAULT_FILTER_OPERATORS;
+exports.FilterBar = FilterBar;
+exports.FilterBarChips = FilterBarChips;
+exports.FilterBarInput = FilterBarInput;
+//# sourceMappingURL=FilterBar.cjs.js.map