@igne-agency/react-web-ui 0.3.1 → 0.5.0

package/README.md

@@ -100,10 +100,39 @@ export default defineConfig({
 });
 ```
 
-The resolver needs a `theme` modifier with `light` and `dark` contexts. Like the kit's own `tokens.css`, the file the preset writes opens with the kit's layer order and keeps every rule in `kit.base`, so an unlayered override in the app still wins. The preset names every token by its path with dots as hyphens (`sys.color.primary` becomes `--sys-color-primary`), and writes a shadow tagged `$extensions["nl.igne.css"].property: "filter"` as `drop-shadow()` filters.
+The resolver needs a `theme` modifier with `light` and `dark` contexts. Like the kit's own `tokens.css`, the file the preset writes opens with the kit's layer order and keeps every rule in `kit.base`, so an unlayered override in the app still wins. The preset names every token by its path with dots as hyphens (`sys.color.primary` becomes `--sys-color-primary`), and writes a shadow tagged `$extensions["nl.igne.css"].property: "filter"` as `drop-shadow()` filters. Typography tokens name no family, so the preset narrows Terrazzo's `core/valid-typography` rule to `fontSize`, `fontWeight` and `lineHeight`.
+
+### Typeface
+
+The kit names no typeface and loads no font. Every type role reads its family from one of two custom properties: `--sys-font-family-heading` for headings and `--sys-font-family-body` for everything else. The body family defaults to `system-ui, sans-serif`, and the heading family follows the body family. To use a typeface, load it the way the app loads any font, then name it on `:root` in unlayered CSS:
+
+```css
+:root {
+	--sys-font-family-body: "Inter", system-ui, sans-serif;
+	--sys-font-family-heading:
+		"Satoshi", system-ui, sans-serif;
+}
+```
+
+This works the same over the kit's `tokens.css` and over a theme the preset builds.
 
 The kit owns no breakpoints and no gutters; those are the app's layout.
 
+## Icons
+
+The kit renders no icons and depends on no icon set. Wherever a component shows one, it leaves a slot the app fills from its own set: a part's children, or, on a ready-made component, a prop named for the icon's job (`icon`, `closeIcon`, `expandIcon`). The slot sizes the glyph to its text and colours it, so an SVG drawn at `1em` in `currentColor` fits as is. A slot is required only where the icon is all the control shows, such as a close button's cross; anywhere else, left out, nothing renders.
+
+```tsx
+import ExpandMoreIcon from "@material-design-icons/svg/outlined/expand_more.svg?react";
+import { Select } from "@igne-agency/react-web-ui/select-field";
+
+<Select.Icon>
+	<ExpandMoreIcon />
+</Select.Icon>;
+```
+
+`Icon`, from `./icon`, sizes and labels any SVG component: `label=""` hides a glyph that stands beside its word, and a label names one that stands alone.
+
 ## Providers
 
 The kit has no catch-all provider. Wrap the app in the ones it uses:
@@ -113,6 +142,7 @@ import { LocaleProvider } from "@igne-agency/react-web-ui/locale-provider";
 import { TimeZoneProvider } from "@igne-agency/react-web-ui/time-zone-provider";
 import { ToastProvider } from "@igne-agency/react-web-ui/toast";
 import { Tooltip } from "@igne-agency/react-web-ui/tooltip";
+import CloseIcon from "./icons/close.svg?react";
 
 export const Providers = ({
 	children,
@@ -122,6 +152,7 @@ export const Providers = ({
 			<Tooltip.Provider>
 				<ToastProvider
 					closeLabel="Close"
+					closeIcon={<CloseIcon />}
 					viewportLabel="Notifications">
 					{children}
 				</ToastProvider>

package/dist/base.css

@@ -112,6 +112,9 @@
       transition: background-color var(--sys-motion-medium) var(--sys-motion-standard), color var(--sys-motion-medium) var(--sys-motion-standard);
     }
   }
+  [data-theme] {
+    color: var(--sys-color-text);
+  }
   button,
   select,
   summary,

package/dist/components/accordion/accordion.css

@@ -1,15 +1,15 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1u0up_3 {
+  ._root_1qlrq_3 {
     display: flex;
     flex-direction: column;
     gap: var(--accordion-gap, var(--sys-unit-2));
   }
-  ._item_1u0up_8 {
+  ._item_1qlrq_8 {
     display: flex;
     flex-direction: column;
   }
-  ._trigger_1u0up_12 {
+  ._trigger_1qlrq_12 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -25,18 +25,18 @@
     text-align: start;
     cursor: pointer;
   }
-  ._trigger_1u0up_12 {
+  ._trigger_1qlrq_12 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._trigger_1u0up_12:focus-visible {
+  ._trigger_1qlrq_12:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._trigger_1u0up_12 {
+  ._trigger_1qlrq_12 {
     position: relative;
     isolation: isolate;
   }
-  ._trigger_1u0up_12::after {
+  ._trigger_1qlrq_12::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -47,47 +47,52 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._trigger_1u0up_12::after {
+    ._trigger_1qlrq_12::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._trigger_1u0up_12:hover:not(:disabled, [data-disabled])::after {
+  ._trigger_1qlrq_12:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._trigger_1u0up_12:active:not(:disabled, [data-disabled])::after {
+  ._trigger_1qlrq_12:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  ._trigger_1u0up_12[data-disabled] {
+  ._trigger_1qlrq_12[data-disabled] {
     color: var(--sys-color-disabled-fg);
     cursor: not-allowed;
   }
-  ._chevron_1u0up_64 {
+  ._indicator_1qlrq_64 {
     flex-shrink: 0;
   }
   @media not (prefers-reduced-motion) {
-    ._chevron_1u0up_64 {
+    ._indicator_1qlrq_64 {
       transition: rotate var(--sys-motion-short) var(--sys-motion-standard);
     }
   }
-  [data-panel-open] > ._chevron_1u0up_64 {
+  [data-panel-open] > ._indicator_1qlrq_64 {
     rotate: 180deg;
   }
-  ._panel_1u0up_75 {
+  ._indicator_1qlrq_64 {
+    display: inline-flex;
+    color: var(--accordion-indicator-fg, currentcolor);
+    font-size: var(--accordion-indicator-size, 1.5em);
+  }
+  ._panel_1qlrq_80 {
     overflow: hidden;
   }
-  ._panel_1u0up_75[hidden]:not([hidden=until-found]) {
+  ._panel_1qlrq_80[hidden]:not([hidden=until-found]) {
     display: none;
   }
   @media not (prefers-reduced-motion) {
-    ._panel_1u0up_75 {
+    ._panel_1qlrq_80 {
       block-size: var(--accordion-panel-height);
       transition: block-size var(--sys-motion-short) var(--sys-motion-standard);
     }
-    ._panel_1u0up_75[data-starting-style], ._panel_1u0up_75[data-ending-style] {
+    ._panel_1qlrq_80[data-starting-style], ._panel_1qlrq_80[data-ending-style] {
       block-size: 0;
     }
   }
-  ._content_1u0up_90 {
+  ._content_1qlrq_95 {
     padding: var(--accordion-pad-y, var(--sys-unit-4)) var(--accordion-pad-x, var(--sys-unit-6));
   }
 }

package/dist/components/accordion/accordion.d.ts

@@ -1,4 +1,5 @@
 import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+import { useRender } from "@base-ui/react/use-render";
 import type { ReactNode } from "react";
 export type AccordionRootProps = Omit<BaseAccordion.Root.Props<string>, "className"> & Readonly<{
     className?: string;
@@ -10,21 +11,33 @@ export type AccordionItemProps = Omit<BaseAccordion.Item.Props, "className" | "v
 }>;
 export type AccordionTriggerProps = Omit<BaseAccordion.Trigger.Props, "className" | "children"> & Readonly<{
     className?: string;
-    /** What the item's panel holds, as the trigger's label. */
+    /** The label naming what the item's panel holds, then an `Accordion.Indicator`. */
     children: ReactNode;
 }>;
+export type AccordionIndicatorProps = useRender.ComponentProps<"span">;
 export type AccordionPanelProps = Omit<BaseAccordion.Panel.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/** The stack of items. */
 declare const Root: ({ className, ...props }: AccordionRootProps) => ReactNode;
+/** One item: its header and its panel. */
 declare const Item: ({ className, ...props }: AccordionItemProps) => ReactNode;
-declare const Trigger: ({ className, children, ...props }: AccordionTriggerProps) => ReactNode;
+/** The button that folds the item's panel open and shut, inside its `Header`. */
+declare const Trigger: ({ className, ...props }: AccordionTriggerProps) => ReactNode;
+/**
+ * The trigger's open-state glyph, such as the app's chevron, turned over while
+ * the panel is open. Put it last in the `Trigger`; without children it renders
+ * nothing.
+ */
+declare const Indicator: ({ render, className, children, ref, ...props }: AccordionIndicatorProps) => ReactNode;
+/** What the item holds, folding along its height. */
 declare const Panel: ({ className, children, ...props }: AccordionPanelProps) => ReactNode;
 type AccordionNamespace = Readonly<{
     Root: typeof Root;
     Item: typeof Item;
     Header: typeof BaseAccordion.Header;
     Trigger: typeof Trigger;
+    Indicator: typeof Indicator;
     Panel: typeof Panel;
 }>;
 /**
@@ -36,7 +49,10 @@ type AccordionNamespace = Readonly<{
  * <Accordion.Root>
  * 	<Accordion.Item value="fees">
  * 		<Accordion.Header>
- * 			<Accordion.Trigger>Fees</Accordion.Trigger>
+ * 			<Accordion.Trigger>
+ * 				Fees
+ * 				<Accordion.Indicator><ChevronIcon /></Accordion.Indicator>
+ * 			</Accordion.Trigger>
  * 		</Accordion.Header>
  * 		<Accordion.Panel>{fees}</Accordion.Panel>
  * 	</Accordion.Item>

package/dist/components/accordion/accordion.js

@@ -1,11 +1,11 @@
-import SvgExpandMore from "../../vendor/@material-design-icons/svg/outlined/expand_more.js";
-import { Icon } from "../icon/icon.js";
 import accordion_module_default from "./accordion.module.js";
 import { c } from "react/compiler-runtime";
 import { Accordion } from "@base-ui/react/accordion";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 // src/components/accordion/accordion.tsx
+/** The stack of items. */
 var Root = (t0) => {
 	const $ = c(8);
 	let className;
@@ -37,6 +37,7 @@ var Root = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** One item: its header and its panel. */
 var Item = (t0) => {
 	const $ = c(8);
 	let className;
@@ -68,52 +69,101 @@ var Item = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The button that folds the item's panel open and shut, inside its `Header`. */
 var Trigger = (t0) => {
-	const $ = c(11);
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(accordion_module_default.trigger, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Accordion.Trigger, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The trigger's open-state glyph, such as the app's chevron, turned over while
+* the panel is open. Put it last in the `Trigger`; without children it renders
+* nothing.
+*/
+var Indicator = (t0) => {
+	const $ = c(16);
 	let children;
 	let className;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({className, children, ...props} = t0);
+		({render, className, children, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
 		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
 	} else {
 		children = $[1];
 		className = $[2];
 		props = $[3];
+		ref = $[4];
+		render = $[5];
 	}
 	let t1;
-	if ($[4] !== className) {
-		t1 = clsx(accordion_module_default.trigger, className);
-		$[4] = className;
-		$[5] = t1;
-	} else t1 = $[5];
+	if ($[6] !== className) {
+		t1 = clsx(accordion_module_default.indicator, className);
+		$[6] = className;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg: SvgExpandMore,
-			label: "",
-			size: 1.5,
-			className: accordion_module_default.chevron
-		});
-		$[6] = t2;
-	} else t2 = $[6];
-	let t3;
-	if ($[7] !== children || $[8] !== props || $[9] !== t1) {
-		t3 = /* @__PURE__ */ jsxs(Accordion.Trigger, {
-			className: t1,
+	if ($[8] !== children || $[9] !== props || $[10] !== t1) {
+		t2 = {
+			"aria-hidden": true,
 			...props,
-			children: [children, t2]
-		});
-		$[7] = children;
-		$[8] = props;
-		$[9] = t1;
-		$[10] = t3;
-	} else t3 = $[10];
-	return t3;
+			className: t1,
+			children
+		};
+		$[8] = children;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	const element = useRender(t3);
+	return children === void 0 || children === null ? null : element;
 };
+/** What the item holds, folding along its height. */
 var Panel = (t0) => {
 	const $ = c(12);
 	let children;
@@ -168,7 +218,10 @@ var Panel = (t0) => {
 * <Accordion.Root>
 * 	<Accordion.Item value="fees">
 * 		<Accordion.Header>
-* 			<Accordion.Trigger>Fees</Accordion.Trigger>
+* 			<Accordion.Trigger>
+* 				Fees
+* 				<Accordion.Indicator><ChevronIcon /></Accordion.Indicator>
+* 			</Accordion.Trigger>
 * 		</Accordion.Header>
 * 		<Accordion.Panel>{fees}</Accordion.Panel>
 * 	</Accordion.Item>
@@ -179,6 +232,7 @@ var Accordion$1 = {
 	Item,
 	Header: Accordion.Header,
 	Trigger,
+	Indicator,
 	Panel
 };
 export { Accordion$1 as Accordion };

package/dist/components/accordion/accordion.module.js

@@ -1,16 +1,16 @@
 import './accordion.css';// src/components/accordion/accordion.module.scss
-var root = "_root_1u0up_3";
-var item = "_item_1u0up_8";
-var trigger = "_trigger_1u0up_12";
-var chevron = "_chevron_1u0up_64";
-var panel = "_panel_1u0up_75";
-var content = "_content_1u0up_90";
+var root = "_root_1qlrq_3";
+var item = "_item_1qlrq_8";
+var trigger = "_trigger_1qlrq_12";
+var indicator = "_indicator_1qlrq_64";
+var panel = "_panel_1qlrq_80";
+var content = "_content_1qlrq_95";
 var accordion_module_default = {
 	root,
 	item,
 	trigger,
-	chevron,
+	indicator,
 	panel,
 	content
 };
-export { chevron, content, accordion_module_default as default, item, panel, root, trigger };
+export { content, accordion_module_default as default, indicator, item, panel, root, trigger };

package/dist/components/active-filters/active-filter-describers.d.ts

@@ -29,7 +29,7 @@ export type ActiveFilterDescribers<TFilters> = Readonly<{
  * multi-value filter. `render` maps one value to its display text.
  *
  * @example
- * // statuses?: DeclarationStatus[]
+ * // statuses?: InvoiceStatus[]
  * describeList({
  * 	label: "Status",
  * 	render: (status) => statusLabels[status](),

package/dist/components/active-filters/active-filter-describers.js

@@ -4,7 +4,7 @@
 * multi-value filter. `render` maps one value to its display text.
 *
 * @example
-* // statuses?: DeclarationStatus[]
+* // statuses?: InvoiceStatus[]
 * describeList({
 * 	label: "Status",
 * 	render: (status) => statusLabels[status](),

package/dist/components/active-filters/active-filters.d.ts

@@ -1,6 +1,35 @@
 import type { ReactNode } from "react";
+import type { Key } from "react-aria-components";
+import type { Tone, ToneVariant } from "../../lib/tone.ts";
 import { type FilterView } from "../filter-bar/use-filter-view.ts";
 import type { ActiveFilterDescribers } from "./active-filter-describers.ts";
+/** One chip for a committed filter, ready for a `TagGroup.Tag`. */
+export type ActiveFilterChip = Readonly<{
+    /** The chip's key in the `TagGroup`. */
+    id: string;
+    content: ReactNode;
+    textValue?: string;
+    tone?: Tone;
+    variant: ToneVariant;
+    /** Clears what the chip stands for. */
+    onRemove: () => void;
+}>;
+/** The chips for the committed filters, and the `TagGroup.Root` `onRemove` that clears them. */
+export type ActiveFilterChips = Readonly<{
+    chips: readonly ActiveFilterChip[];
+    /** Clears the filters behind the removed keys; pass it to `TagGroup.Root`. */
+    onRemove: (keys: Set<Key>) => void;
+}>;
+/**
+ * Builds one or more chips per described, non-empty committed filter, for a
+ * caller that renders its own `TagGroup`.
+ *
+ * @example
+ * const { chips, onRemove } = useActiveFilterChips(filters, {
+ * 	status: describeValue({ label: "Status" }),
+ * });
+ */
+export declare const useActiveFilterChips: <TFilters extends object>(filters: FilterView<TFilters>, describe: ActiveFilterDescribers<TFilters>) => ActiveFilterChips;
 export type ActiveFiltersProps<TFilters extends object> = Readonly<{
     filters: FilterView<TFilters>;
     /** Maps a filter key + value to one or more chip descriptors. */
@@ -9,12 +38,15 @@ export type ActiveFiltersProps<TFilters extends object> = Readonly<{
     label: string;
     /** Each chip's remove button's name and tooltip, such as "Remove". */
     removeLabel: string;
+    /** The glyph on each chip's remove button, such as a cross. */
+    removeIcon: ReactNode;
     className?: string;
 }>;
 /**
  * A roving-focus row of removable chips for the committed filters, on the
  * kit's `TagGroup`. Renders one or more chips per described, non-empty
- * committed field, and nothing when none are active.
+ * committed field, and nothing when none are active. Compose `TagGroup` over
+ * `useActiveFilterChips` where a chip needs more than this.
  *
  * @example
  * <ActiveFilters
@@ -22,6 +54,7 @@ export type ActiveFiltersProps<TFilters extends object> = Readonly<{
  * 	describe={{ status: describeValue({ label: "Status" }) }}
  * 	label="Active filters"
  * 	removeLabel="Remove"
+ * 	removeIcon={<CloseIcon />}
  * />
  */
-export declare const ActiveFilters: <TFilters extends object>({ filters, describe, label, removeLabel, className, }: ActiveFiltersProps<TFilters>) => ReactNode;
+export declare const ActiveFilters: <TFilters extends object>({ filters, describe, label, removeLabel, removeIcon, className, }: ActiveFiltersProps<TFilters>) => ReactNode;

package/dist/components/active-filters/active-filters.js

@@ -3,8 +3,17 @@ import { TagGroup } from "../tag-group/tag-group.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/active-filters/active-filters.tsx
-var buildChips = (filters, describe) => {
-	return Object.keys(describe).filter((key) => key in describe).flatMap((key) => {
+/**
+* Builds one or more chips per described, non-empty committed filter, for a
+* caller that renders its own `TagGroup`.
+*
+* @example
+* const { chips, onRemove } = useActiveFilterChips(filters, {
+* 	status: describeValue({ label: "Status" }),
+* });
+*/
+var useActiveFilterChips = (filters, describe) => {
+	const chips = Object.keys(describe).filter((key) => key in describe).flatMap((key) => {
 		const value = filters.committed[key];
 		if (!isActiveFilterValue(value)) return [];
 		const described = describe[key]?.(value);
@@ -20,11 +29,18 @@ var buildChips = (filters, describe) => {
 			})
 		}));
 	});
+	return {
+		chips,
+		onRemove: (removed) => {
+			for (const chip of chips) if (removed.has(chip.id)) chip.onRemove();
+		}
+	};
 };
 /**
 * A roving-focus row of removable chips for the committed filters, on the
 * kit's `TagGroup`. Renders one or more chips per described, non-empty
-* committed field, and nothing when none are active.
+* committed field, and nothing when none are active. Compose `TagGroup` over
+* `useActiveFilterChips` where a chip needs more than this.
 *
 * @example
 * <ActiveFilters
@@ -32,65 +48,54 @@ var buildChips = (filters, describe) => {
 * 	describe={{ status: describeValue({ label: "Status" }) }}
 * 	label="Active filters"
 * 	removeLabel="Remove"
+* 	removeIcon={<CloseIcon />}
 * />
 */
 var ActiveFilters = (t0) => {
-	const $ = c(15);
-	const { filters, describe, label, removeLabel, className } = t0;
+	const $ = c(11);
+	const { filters, describe, label, removeLabel, removeIcon, className } = t0;
+	const { chips, onRemove } = useActiveFilterChips(filters, describe);
+	if (chips.length === 0) return null;
 	let t1;
-	if ($[0] !== describe || $[1] !== filters) {
-		t1 = buildChips(filters, describe);
-		$[0] = describe;
-		$[1] = filters;
+	if ($[0] !== removeIcon || $[1] !== removeLabel) {
+		t1 = (chip) => /* @__PURE__ */ jsxs(TagGroup.Tag, {
+			id: chip.id,
+			textValue: chip.textValue,
+			tone: chip.tone,
+			variant: chip.variant,
+			children: [chip.content, /* @__PURE__ */ jsx(TagGroup.Remove, {
+				label: removeLabel,
+				children: removeIcon
+			})]
+		});
+		$[0] = removeIcon;
+		$[1] = removeLabel;
 		$[2] = t1;
 	} else t1 = $[2];
-	const chips = t1;
-	if (chips.length === 0) return null;
 	let t2;
-	if ($[3] !== chips) {
-		t2 = (keys) => {
-			for (const chip of chips) if (keys.has(chip.id)) chip.onRemove();
-		};
-		$[3] = chips;
-		$[4] = t2;
-	} else t2 = $[4];
-	const handleRemove = t2;
-	let t3;
-	if ($[5] !== removeLabel) {
-		t3 = (chip_0) => /* @__PURE__ */ jsxs(TagGroup.Tag, {
-			id: chip_0.id,
-			textValue: chip_0.textValue,
-			tone: chip_0.tone,
-			variant: chip_0.variant,
-			children: [chip_0.content, /* @__PURE__ */ jsx(TagGroup.Remove, { label: removeLabel })]
-		});
-		$[5] = removeLabel;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== chips || $[8] !== t3) {
-		t4 = /* @__PURE__ */ jsx(TagGroup.List, {
+	if ($[3] !== chips || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(TagGroup.List, {
 			items: chips,
-			children: t3
+			children: t1
 		});
-		$[7] = chips;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== className || $[11] !== handleRemove || $[12] !== label || $[13] !== t4) {
-		t5 = /* @__PURE__ */ jsx(TagGroup.Root, {
+		$[3] = chips;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== className || $[7] !== label || $[8] !== onRemove || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TagGroup.Root, {
 			"aria-label": label,
-			onRemove: handleRemove,
+			onRemove,
 			className,
-			children: t4
+			children: t2
 		});
-		$[10] = className;
-		$[11] = handleRemove;
-		$[12] = label;
-		$[13] = t4;
-		$[14] = t5;
-	} else t5 = $[14];
-	return t5;
+		$[6] = className;
+		$[7] = label;
+		$[8] = onRemove;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 };
-export { ActiveFilters };
+export { ActiveFilters, useActiveFilterChips };

package/dist/components/active-filters/index.js

@@ -1,3 +1,3 @@
 import { describeFlag, describeList, describeValue } from "./active-filter-describers.js";
-import { ActiveFilters } from "./active-filters.js";
-export { ActiveFilters, describeFlag, describeList, describeValue };
+import { ActiveFilters, useActiveFilterChips } from "./active-filters.js";
+export { ActiveFilters, describeFlag, describeList, describeValue, useActiveFilterChips };