@seekalfred/primitives 0.5.1 → 0.6.0

package/dist/filter-bar/filter-bar.js

@@ -0,0 +1,300 @@
+"use client";
+import { cn, cnAll } from "../lib/cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from "../lib/motion.js";
+import { Button } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { Badge } from "../badge/badge.js";
+import { Popover, PopoverTrigger } from "../popover/popover.js";
+import { useLeavingList } from "../lib/leaving-list.js";
+import { Select, SelectItem } from "../select/select.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/filter-bar/filter-bar.tsx
+/**
+* FilterBar -- a list toolbar that keeps the controls people use every time
+* in the row and puts every other dropdown filter behind ONE "Filters"
+* button.
+*
+* Why it exists: list screens grew a row of four to seven dropdowns beside
+* the search box and the status tabs. At desktop width that row wraps onto a
+* second line; on a phone it scrolls sideways. The bar keeps the row to one
+* line and makes what IS filtered visible as chips instead of as the
+* resting text of a dropdown.
+*
+* Three regions:
+*
+* - `inline`: always in the row, at its start (status tabs, the search box).
+* - the Filters button: a popover with a one-column form, one full-width
+*   Select per filter with its label above. The button carries a count badge
+*   of the filters that are set.
+* - `end`: always in the row, at its end (a count, Export, a view toggle).
+*
+* While any filter is set, a list of chips sits under the row, each reading
+* "Label: option label" with its own remove button, plus "Clear all".
+*
+* The bar holds NO filter state. Every value and every change belongs to the
+* caller: removing a chip hands the filter's `emptyValue` back to its
+* `onChange`; Clear all does that for each set filter, or calls
+* `onClearAll` when the caller resets its filters in one step.
+*
+* Accessibility comes from the parts: the popover is a dialog named by its
+* trigger, the trigger carries `aria-expanded`, focus moves into the popover
+* and is contained there, Escape closes it and focus returns to the trigger.
+*/
+const filterBarVariants = cva(["flex flex-col gap-2 box-border font-sans"]);
+const filterBarRowVariants = cva(["flex flex-wrap items-center gap-2"]);
+const filterBarChipVariants = cva([
+	"inline-flex items-center gap-1 rounded-full",
+	"border-(length:--border-width) border-border bg-muted",
+	"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground",
+	"box-border font-sans"
+]);
+const isCustom = (f) => "render" in f;
+/** The set filters, each with its chip text and how to unset it. */
+function chipsFor(filters) {
+	const chips = [];
+	for (const f of filters) {
+		if (isCustom(f)) {
+			if (f.activeLabel != null) chips.push({
+				id: f.id,
+				text: `${f.label}: ${f.activeLabel}`,
+				clear: f.onClear
+			});
+			continue;
+		}
+		if (f.value == null || f.value === f.emptyValue) continue;
+		const option = f.options.find((o) => o.id === f.value);
+		chips.push({
+			id: f.id,
+			text: `${f.label}: ${option ? option.label : String(f.value)}`,
+			clear: () => f.onChange(f.emptyValue)
+		});
+	}
+	return chips;
+}
+/** A funnel, drawn inline: this package ships no icon dependency. */
+function FunnelGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M2 3h12M4.5 8h7M7 13h2",
+			strokeLinecap: "round"
+		})
+	});
+}
+function CrossGlyph() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4 4l8 8M12 4l-8 8",
+			strokeLinecap: "round"
+		})
+	});
+}
+/**
+* A list toolbar with its dropdown filters behind one Filters button.
+*
+* @example
+* <FilterBar
+*   inline={<SearchField aria-label="Search" />}
+*   end={<Button>Export</Button>}
+*   filters={[{ id: "region", label: "Region", value, emptyValue: "all", onChange: setValue,
+*     options: [{ id: "all", label: "All regions" }, { id: "nsw", label: "NSW" }] }]}
+* />
+*/
+/**
+* One place in the chip row, for a chip or for Clear all. A slot added after the
+* first render opens from nothing while its content fades up and scales in, so the
+* chips beside it glide over; one that is removed stays, shrinking and collapsing,
+* until its exit ends. Nothing animates at first render.
+*/
+function Slot({ leaving, ready, onDone, id, children }) {
+	const [fresh] = useState(ready);
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(leaving, remove, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) remove();
+	}, [leaving, remove]);
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": leaving ? "filter-bar-leaving" : void 0,
+		"aria-hidden": leaving || void 0,
+		ref: (node) => {
+			if (!node) return;
+			if (leaving) node.setAttribute("inert", "");
+			else node.removeAttribute("inert");
+		},
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "chip-slot-out") remove();
+		},
+		className: cnAll("min-w-0 flex-none [interpolate-size:allow-keywords]", leaving ? "pointer-events-none motion-safe:animate-chip-out" : fresh && "motion-safe:animate-chip-in motion-reduce:animate-fade-in"),
+		children
+	});
+}
+/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */
+function ChipText({ text }) {
+	const content = useRef(null);
+	useMorphWidth(content, text);
+	return /* @__PURE__ */ jsx("span", {
+		className: "button-slot",
+		children: /* @__PURE__ */ jsx("span", {
+			ref: content,
+			className: "inline-flex flex-none items-center",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey: text,
+				className: "inline-block",
+				children: text
+			})
+		})
+	});
+}
+const FilterBar = forwardRef(function FilterBar({ inline, end, filters, onClearAll, buttonLabel = "Filters", clearAllLabel = "Clear all", doneLabel = "Done", chipsLabel = "Filters set", removeLabel = (text) => `Remove filter ${text}`, className }, ref) {
+	const [open, setOpen] = useState(false);
+	const chips = chipsFor(filters);
+	const [ready, setReady] = useState(false);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => setReady(true));
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	const places = useLeavingList([...chips.map((chip) => ({
+		id: chip.id,
+		chip
+	})), ...chips.length > 0 ? [{
+		id: "\0clear",
+		chip: null
+	}] : []]);
+	const frame = useRef(null);
+	const row = useRef(null);
+	useHeightFollow(frame, row, chips.map((chip) => chip.id).join());
+	const clearAll = () => {
+		if (onClearAll) onClearAll();
+		else for (const c of chips) c.clear();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-slot": "filter-bar",
+		className: cn(filterBarVariants(), className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "filter-bar-row",
+			className: filterBarRowVariants(),
+			children: [
+				inline,
+				filters.length > 0 ? /* @__PURE__ */ jsxs(PopoverTrigger, {
+					isOpen: open,
+					onOpenChange: setOpen,
+					children: [/* @__PURE__ */ jsxs(Button, {
+						variant: "outlineNeutral",
+						size: "sm",
+						startIcon: /* @__PURE__ */ jsx(FunnelGlyph, {}),
+						"data-slot": "filter-bar-button",
+						children: [buttonLabel, chips.length > 0 ? /* @__PURE__ */ jsx(Badge, {
+							tone: "primary",
+							appearance: "solid",
+							size: "sm",
+							shape: "pill",
+							"data-slot": "filter-bar-count",
+							children: chips.length
+						}) : null]
+					}), /* @__PURE__ */ jsx(Popover, {
+						placement: "bottom start",
+						className: "w-80 max-w-[calc(100vw-2rem)]",
+						children: /* @__PURE__ */ jsxs("div", {
+							"data-slot": "filter-bar-panel",
+							className: "flex flex-col gap-3",
+							children: [
+								/* @__PURE__ */ jsx("p", {
+									className: "m-0 text-sm font-semibold",
+									children: buttonLabel
+								}),
+								filters.map((f) => isCustom(f) ? /* @__PURE__ */ jsx("div", { children: f.render() }, f.id) : /* @__PURE__ */ jsx(Select, {
+									label: f.label,
+									size: "sm",
+									selectedKey: f.value,
+									onSelectionChange: (key) => {
+										if (key != null) f.onChange(key);
+									},
+									children: f.options.map((o) => /* @__PURE__ */ jsx(SelectItem, {
+										id: o.id,
+										textValue: o.label,
+										children: o.label
+									}, o.id))
+								}, f.id)),
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center justify-between gap-2 pt-1",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: "ghost",
+										size: "sm",
+										onPress: clearAll,
+										isDisabled: chips.length === 0,
+										children: clearAllLabel
+									}), /* @__PURE__ */ jsx(Button, {
+										variant: "primary",
+										size: "sm",
+										onPress: () => setOpen(false),
+										children: doneLabel
+									})]
+								})
+							]
+						})
+					})]
+				}) : null,
+				end ? /* @__PURE__ */ jsx("div", {
+					className: "ms-auto flex flex-wrap items-center gap-2",
+					children: end
+				}) : null
+			]
+		}), places.list.length > 0 ? /* @__PURE__ */ jsx("div", {
+			ref: frame,
+			"data-slot": "filter-bar-chips-frame",
+			className: "height-follow",
+			children: /* @__PURE__ */ jsx("ul", {
+				ref: row,
+				"aria-label": chipsLabel,
+				"data-slot": "filter-bar-chips",
+				className: "m-0 flex list-none flex-wrap items-center gap-2 p-0",
+				children: places.list.map(({ item, leaving }) => item.chip ? /* @__PURE__ */ jsx(Slot, {
+					id: item.id,
+					leaving,
+					ready,
+					onDone: places.done,
+					children: /* @__PURE__ */ jsxs("span", {
+						"data-slot": "filter-bar-chip",
+						className: filterBarChipVariants(),
+						children: [/* @__PURE__ */ jsx(ChipText, { text: item.chip.text }), /* @__PURE__ */ jsx(Button, {
+							variant: "ghost",
+							size: "sm",
+							"aria-label": removeLabel(item.chip.text),
+							onPress: item.chip.clear,
+							className: "h-6 px-1",
+							children: /* @__PURE__ */ jsx(CrossGlyph, {})
+						})]
+					})
+				}, item.id) : /* @__PURE__ */ jsx(Slot, {
+					id: item.id,
+					leaving,
+					ready,
+					onDone: places.done,
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "link",
+						size: "sm",
+						onPress: clearAll,
+						children: clearAllLabel
+					})
+				}, item.id))
+			})
+		}) : null]
+	});
+});
+//#endregion
+export { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants };
+
+//# sourceMappingURL=filter-bar.js.map

package/dist/filter-bar/filter-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-bar.js","names":[],"sources":["../../src/filter-bar/filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport type { Key } from \"react-aria-components\";\n\nimport { Badge } from \"../badge/badge.js\";\nimport { Button } from \"../button/button.js\";\nimport { cn, cnAll } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { useLeavingList } from \"../lib/leaving-list.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useMorphWidth } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { Popover, PopoverTrigger } from \"../popover/popover.js\";\nimport { Select, SelectItem } from \"../select/select.js\";\n\n/**\n * FilterBar -- a list toolbar that keeps the controls people use every time\n * in the row and puts every other dropdown filter behind ONE \"Filters\"\n * button.\n *\n * Why it exists: list screens grew a row of four to seven dropdowns beside\n * the search box and the status tabs. At desktop width that row wraps onto a\n * second line; on a phone it scrolls sideways. The bar keeps the row to one\n * line and makes what IS filtered visible as chips instead of as the\n * resting text of a dropdown.\n *\n * Three regions:\n *\n * - `inline`: always in the row, at its start (status tabs, the search box).\n * - the Filters button: a popover with a one-column form, one full-width\n *   Select per filter with its label above. The button carries a count badge\n *   of the filters that are set.\n * - `end`: always in the row, at its end (a count, Export, a view toggle).\n *\n * While any filter is set, a list of chips sits under the row, each reading\n * \"Label: option label\" with its own remove button, plus \"Clear all\".\n *\n * The bar holds NO filter state. Every value and every change belongs to the\n * caller: removing a chip hands the filter's `emptyValue` back to its\n * `onChange`; Clear all does that for each set filter, or calls\n * `onClearAll` when the caller resets its filters in one step.\n *\n * Accessibility comes from the parts: the popover is a dialog named by its\n * trigger, the trigger carries `aria-expanded`, focus moves into the popover\n * and is contained there, Escape closes it and focus returns to the trigger.\n */\n\nexport const filterBarVariants = cva([\"flex flex-col gap-2 box-border font-sans\"]);\n\nexport const filterBarRowVariants = cva([\"flex flex-wrap items-center gap-2\"]);\n\nexport const filterBarChipVariants = cva([\n  \"inline-flex items-center gap-1 rounded-full\",\n  \"border-(length:--border-width) border-border bg-muted\",\n  \"ps-3 pe-1 text-xs leading-(--leading-snug) text-foreground\",\n  \"box-border font-sans\",\n]);\n\n/** One option of a dropdown filter. */\nexport interface FilterBarOption {\n  /** The option's value, handed to `onChange`. */\n  id: Key;\n  /** The option's text: in the list, on the trigger and on the chip. */\n  label: string;\n}\n\n/** A dropdown filter, rendered as a Select in the popover. */\nexport interface FilterBarSelectField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The field's name: the label above the dropdown and the start of its chip. */\n  label: string;\n  /** The current value. `null` reads as not set. */\n  value: Key | null;\n  /** The value that means \"not filtered\" (the \"All\" option's id). */\n  emptyValue: Key;\n  /** The options, the \"All\" option included. */\n  options: readonly FilterBarOption[];\n  /** Told the chosen option's id, or `emptyValue` when the chip is removed. */\n  onChange: (value: Key) => void;\n}\n\n/**\n * A filter that is not a plain dropdown (a date range, a searchable picker):\n * the caller renders the control and says what its chip reads.\n */\nexport interface FilterBarCustomField {\n  /** Stable identity, used as the React key. */\n  id: string;\n  /** The start of its chip. The control rendered by `render` names itself. */\n  label: string;\n  /** The control, rendered in the popover. */\n  render: () => ReactNode;\n  /** The chip's value text while the filter is set, or `null` while it is not. */\n  activeLabel: string | null;\n  /** Unsets the filter: the chip's remove button and Clear all call it. */\n  onClear: () => void;\n}\n\nexport type FilterBarField = FilterBarSelectField | FilterBarCustomField;\n\nexport interface FilterBarProps {\n  /** Always in the row, at its start: status tabs and the search box. */\n  inline?: ReactNode;\n  /** Always in the row, at its end: a count, Export, a view toggle. */\n  end?: ReactNode;\n  /** The filters behind the Filters button. With none, no button renders. */\n  filters: readonly FilterBarField[];\n  /** Resets every filter in one step. Without it, each set filter is handed its `emptyValue`. */\n  onClearAll?: () => void;\n  /**\n   * The button's text, and the popover's name.\n   *\n   * @default \"Filters\"\n   */\n  buttonLabel?: string;\n  /**\n   * The text of both Clear all buttons.\n   *\n   * @default \"Clear all\"\n   */\n  clearAllLabel?: string;\n  /**\n   * The text of the button that closes the popover.\n   *\n   * @default \"Done\"\n   */\n  doneLabel?: string;\n  /**\n   * The accessible name of the list of chips.\n   *\n   * @default \"Filters set\"\n   */\n  chipsLabel?: string;\n  /**\n   * The accessible name of a chip's remove button, given the chip's text.\n   *\n   * @default (text) => `Remove filter ${text}`\n   */\n  removeLabel?: (chipText: string) => string;\n  /** Extra classes on the root. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nconst isCustom = (f: FilterBarField): f is FilterBarCustomField => \"render\" in f;\n\ninterface Chip {\n  id: string;\n  text: string;\n  clear: () => void;\n}\n\n/** The set filters, each with its chip text and how to unset it. */\nfunction chipsFor(filters: readonly FilterBarField[]): Chip[] {\n  const chips: Chip[] = [];\n  for (const f of filters) {\n    if (isCustom(f)) {\n      if (f.activeLabel != null) chips.push({ id: f.id, text: `${f.label}: ${f.activeLabel}`, clear: f.onClear });\n      continue;\n    }\n    if (f.value == null || f.value === f.emptyValue) continue;\n    const option = f.options.find((o) => o.id === f.value);\n    chips.push({\n      id: f.id,\n      text: `${f.label}: ${option ? option.label : String(f.value)}`,\n      clear: () => f.onChange(f.emptyValue),\n    });\n  }\n  return chips;\n}\n\n/** A funnel, drawn inline: this package ships no icon dependency. */\nfunction FunnelGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M2 3h12M4.5 8h7M7 13h2\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\nfunction CrossGlyph() {\n  return (\n    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" aria-hidden=\"true\">\n      <path d=\"M4 4l8 8M12 4l-8 8\" strokeLinecap=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * A list toolbar with its dropdown filters behind one Filters button.\n *\n * @example\n * <FilterBar\n *   inline={<SearchField aria-label=\"Search\" />}\n *   end={<Button>Export</Button>}\n *   filters={[{ id: \"region\", label: \"Region\", value, emptyValue: \"all\", onChange: setValue,\n *     options: [{ id: \"all\", label: \"All regions\" }, { id: \"nsw\", label: \"NSW\" }] }]}\n * />\n */\n/**\n * One place in the chip row, for a chip or for Clear all. A slot added after the\n * first render opens from nothing while its content fades up and scales in, so the\n * chips beside it glide over; one that is removed stays, shrinking and collapsing,\n * until its exit ends. Nothing animates at first render.\n */\nfunction Slot({\n  leaving,\n  ready,\n  onDone,\n  id,\n  children,\n}: {\n  leaving: boolean;\n  ready: boolean;\n  onDone: (id: string) => void;\n  id: string;\n  children: ReactNode;\n}) {\n  // Decided once, at this slot's own mount.\n  const [fresh] = useState(ready);\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(leaving, remove, 900);\n  // Reduced motion removes it at once: an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) remove();\n  }, [leaving, remove]);\n  return (\n    <li\n      data-slot={leaving ? \"filter-bar-leaving\" : undefined}\n      aria-hidden={leaving || undefined}\n      ref={(node) => {\n        if (!node) return;\n        if (leaving) node.setAttribute(\"inert\", \"\");\n        else node.removeAttribute(\"inert\");\n      }}\n      onAnimationEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.animationName === \"chip-slot-out\")\n          remove();\n      }}\n      className={cnAll(\n        \"min-w-0 flex-none [interpolate-size:allow-keywords]\",\n        leaving\n          ? \"pointer-events-none motion-safe:animate-chip-out\"\n          : fresh && \"motion-safe:animate-chip-in motion-reduce:animate-fade-in\",\n      )}\n    >\n      {children}\n    </li>\n  );\n}\n\n/** A chip's text: a changed value swaps (the new text rises in) and the chip's width springs to it. */\nfunction ChipText({ text }: { text: string }) {\n  const content = useRef<HTMLSpanElement>(null);\n  useMorphWidth(content, text);\n  return (\n    <span className=\"button-slot\">\n      <span ref={content} className=\"inline-flex flex-none items-center\">\n        <SwapText swapKey={text} className=\"inline-block\">\n          {text}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n\nexport const FilterBar = forwardRef<HTMLDivElement, FilterBarProps>(function FilterBar(\n  {\n    inline,\n    end,\n    filters,\n    onClearAll,\n    buttonLabel = \"Filters\",\n    clearAllLabel = \"Clear all\",\n    doneLabel = \"Done\",\n    chipsLabel = \"Filters set\",\n    removeLabel = (text) => `Remove filter ${text}`,\n    className,\n  },\n  ref,\n) {\n  const [open, setOpen] = useState(false);\n  const chips = chipsFor(filters);\n  const [ready, setReady] = useState(false);\n  useEffect(() => {\n    // A frame after mount: chips added from then on arrive animated, the first ones do not.\n    const frame = requestAnimationFrame(() => setReady(true));\n    return () => cancelAnimationFrame(frame);\n  }, []);\n  // The chips, with Clear all as the row's last place, each kept on screen while it leaves.\n  const places = useLeavingList([\n    ...chips.map((chip) => ({ id: chip.id, chip })),\n    ...(chips.length > 0 ? [{ id: \"\\u0000clear\", chip: null }] : []),\n  ]);\n  const frame = useRef<HTMLDivElement>(null);\n  const row = useRef<HTMLUListElement>(null);\n  // The row follows its height when a chip makes a line wrap or unwrap.\n  useHeightFollow(frame, row, chips.map((chip) => chip.id).join());\n  const clearAll = () => {\n    if (onClearAll) onClearAll();\n    else for (const c of chips) c.clear();\n  };\n\n  return (\n    <div ref={ref} data-slot=\"filter-bar\" className={cn(filterBarVariants(), className)}>\n      <div data-slot=\"filter-bar-row\" className={filterBarRowVariants()}>\n        {inline}\n        {filters.length > 0 ? (\n          <PopoverTrigger isOpen={open} onOpenChange={setOpen}>\n            <Button variant=\"outlineNeutral\" size=\"sm\" startIcon={<FunnelGlyph />} data-slot=\"filter-bar-button\">\n              {buttonLabel}\n              {chips.length > 0 ? (\n                <Badge tone=\"primary\" appearance=\"solid\" size=\"sm\" shape=\"pill\" data-slot=\"filter-bar-count\">\n                  {chips.length}\n                </Badge>\n              ) : null}\n            </Button>\n            <Popover placement=\"bottom start\" className=\"w-80 max-w-[calc(100vw-2rem)]\">\n              <div data-slot=\"filter-bar-panel\" className=\"flex flex-col gap-3\">\n                <p className=\"m-0 text-sm font-semibold\">{buttonLabel}</p>\n                {filters.map((f) =>\n                  isCustom(f) ? (\n                    <div key={f.id}>{f.render()}</div>\n                  ) : (\n                    <Select\n                      key={f.id}\n                      label={f.label}\n                      size=\"sm\"\n                      selectedKey={f.value}\n                      onSelectionChange={(key) => {\n                        if (key != null) f.onChange(key);\n                      }}\n                    >\n                      {f.options.map((o) => (\n                        <SelectItem key={o.id} id={o.id} textValue={o.label}>\n                          {o.label}\n                        </SelectItem>\n                      ))}\n                    </Select>\n                  ),\n                )}\n                <div className=\"flex items-center justify-between gap-2 pt-1\">\n                  <Button variant=\"ghost\" size=\"sm\" onPress={clearAll} isDisabled={chips.length === 0}>\n                    {clearAllLabel}\n                  </Button>\n                  <Button variant=\"primary\" size=\"sm\" onPress={() => setOpen(false)}>\n                    {doneLabel}\n                  </Button>\n                </div>\n              </div>\n            </Popover>\n          </PopoverTrigger>\n        ) : null}\n        {end ? <div className=\"ms-auto flex flex-wrap items-center gap-2\">{end}</div> : null}\n      </div>\n      {places.list.length > 0 ? (\n        <div ref={frame} data-slot=\"filter-bar-chips-frame\" className=\"height-follow\">\n          <ul\n            ref={row}\n            aria-label={chipsLabel}\n            data-slot=\"filter-bar-chips\"\n            className=\"m-0 flex list-none flex-wrap items-center gap-2 p-0\"\n          >\n            {places.list.map(({ item, leaving }) =>\n              item.chip ? (\n                <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                  <span data-slot=\"filter-bar-chip\" className={filterBarChipVariants()}>\n                    <ChipText text={item.chip.text} />\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      aria-label={removeLabel(item.chip.text)}\n                      onPress={item.chip.clear}\n                      className=\"h-6 px-1\"\n                    >\n                      <CrossGlyph />\n                    </Button>\n                  </span>\n                </Slot>\n              ) : (\n                <Slot key={item.id} id={item.id} leaving={leaving} ready={ready} onDone={places.done}>\n                  <Button variant=\"link\" size=\"sm\" onPress={clearAll}>\n                    {clearAllLabel}\n                  </Button>\n                </Slot>\n              ),\n            )}\n          </ul>\n        </div>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/filter-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { FilterBar, FilterBarCustomField, FilterBarField, FilterBarOption, FilterBarProps, FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar.js";
+export { FilterBar, type FilterBarCustomField, type FilterBarField, type FilterBarOption, type FilterBarProps, type FilterBarSelectField, filterBarChipVariants, filterBarRowVariants, filterBarVariants };

package/dist/filter-bar/index.js

@@ -0,0 +1,2 @@
+import { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants } from "./filter-bar.js";
+export { FilterBar, filterBarChipVariants, filterBarRowVariants, filterBarVariants };

package/dist/floating-button-group/floating-button-group.d.ts

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+//#region src/floating-button-group/floating-button-group.d.ts
+export type FloatingButtonGroupVariant = "muted" | "floating";
+export type FloatingButtonGroupSize = "sm" | "md";
+export type FloatingButtonGroupOrientation = "horizontal" | "vertical";
+export interface FloatingButtonGroupAction {
+  type?: "action";
+  /** Stable key, also passed to onAction. */
+  id: string;
+  /** Visible label, and the accessible name when the item shows only its icon. */
+  label: string;
+  /** An icon before the label. Mark it `aria-hidden`. */
+  icon?: ReactNode;
+  /** Shows only the icon. The label moves into a tooltip and the accessible name. Overrides the group's iconOnly. */
+  iconOnly?: boolean;
+  onSelect?: () => void;
+  isDisabled?: boolean;
+  /** Marks an action that switches a mode on, such as Present. Sets aria-pressed and keeps a quiet tint while on. */
+  isPressed?: boolean;
+  /** A shortcut hint shown in the tooltip, such as "⌘Z". The component does not bind the key. */
+  shortcut?: string;
+  /** Other labels this item can switch to, such as ["Copied"] for Share. The button keeps the width of the widest, so a label change never moves anything. */
+  reserveLabels?: readonly string[];
+}
+export interface FloatingButtonGroupSeparator {
+  type: "separator";
+  id?: string;
+}
+export type FloatingButtonGroupItem = FloatingButtonGroupAction | FloatingButtonGroupSeparator;
+export interface FloatingButtonGroupProps {
+  items: readonly FloatingButtonGroupItem[];
+  /** Accessible name of the toolbar, such as "Board actions". */
+  label: string;
+  /** `muted` sits quietly on a page; `floating` raises the tray with the floating shadow for overlays such as a selection toolbar. @default "muted" */
+  variant?: FloatingButtonGroupVariant;
+  /** @default "md" */
+  size?: FloatingButtonGroupSize;
+  /** @default "horizontal" */
+  orientation?: FloatingButtonGroupOrientation;
+  /** Shows every item as an icon only, with its label in a tooltip. Items with their own iconOnly win. */
+  iconOnly?: boolean;
+  /** Side of the item tooltips. Defaults to top for a row and right for a column. */
+  tooltipSide?: "top" | "bottom" | "left" | "right";
+  /** Called with the item id after the item's own onSelect. */
+  onAction?: (id: string) => void;
+  /** Extra classes. Merged last, so they win conflicts with ours. */
+  className?: string;
+}
+/**
+ * Separate soft buttons in a quiet tray. One shared highlight morphs, in
+ * position and size, to whichever button the pointer or keyboard focus is on,
+ * fades when the pointer leaves the tray, and settles darker in place while a
+ * button is pressed. It is the toolbar's main hover and focus indicator. Arrow
+ * keys move focus, Home and End jump to the ends, Enter and Space act.
+ *
+ * @example
+ * <FloatingButtonGroup label="Board actions" items={[{ id: "undo", label: "Undo", icon: <UndoIcon aria-hidden />, iconOnly: true, shortcut: "⌘Z" }]} />
+ */
+export declare function FloatingButtonGroup({ items, label, variant, size, orientation, iconOnly: groupIconOnly, tooltipSide, onAction, className }: FloatingButtonGroupProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=floating-button-group.d.ts.map