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

package/dist/components/tag/tag.js

@@ -1,119 +1,194 @@
-import { Icon } from "../icon/icon.js";
 import tag_module_default from "./tag.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 // src/components/tag/tag.tsx
+/** The pill: a `<span>` in a status `tone` and `variant`. */
 var Root = (t0) => {
-	const $ = c(14);
-	let children;
+	const $ = c(18);
 	let className;
 	let props;
+	let ref;
+	let render;
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		({tone: t1, variant: t2, className, children, ...props} = t0);
+		({tone: t1, variant: t2, render, className, ref, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = t1;
-		$[5] = t2;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+		$[5] = t1;
+		$[6] = t2;
 	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		t1 = $[4];
-		t2 = $[5];
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+		t1 = $[5];
+		t2 = $[6];
 	}
 	const tone = t1 === void 0 ? "neutral" : t1;
 	const variant = t2 === void 0 ? "subtle" : t2;
 	let t3;
-	if ($[6] !== className) {
+	if ($[7] !== className) {
 		t3 = clsx(tag_module_default.root, className);
-		$[6] = className;
-		$[7] = t3;
-	} else t3 = $[7];
+		$[7] = className;
+		$[8] = t3;
+	} else t3 = $[8];
 	let t4;
-	if ($[8] !== children || $[9] !== props || $[10] !== t3 || $[11] !== tone || $[12] !== variant) {
-		t4 = /* @__PURE__ */ jsx("span", {
+	if ($[9] !== props || $[10] !== t3 || $[11] !== tone || $[12] !== variant) {
+		t4 = {
 			"data-tone": tone,
 			"data-variant": variant,
-			className: t3,
 			...props,
-			children
-		});
-		$[8] = children;
+			className: t3
+		};
 		$[9] = props;
 		$[10] = t3;
 		$[11] = tone;
 		$[12] = variant;
 		$[13] = t4;
 	} else t4 = $[13];
-	return t4;
+	let t5;
+	if ($[14] !== ref || $[15] !== render || $[16] !== t4) {
+		t5 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t4
+		};
+		$[14] = ref;
+		$[15] = render;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	return useRender(t5);
 };
+/** A dot in the tag's tone, leading its label. */
 var Dot = (t0) => {
-	const $ = c(8);
+	const $ = c(14);
 	let className;
 	let props;
+	let ref;
+	let render;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({render, className, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
 	} else {
 		className = $[1];
 		props = $[2];
+		ref = $[3];
+		render = $[4];
 	}
 	let t1;
-	if ($[3] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(tag_module_default.dot, className);
-		$[3] = className;
-		$[4] = t1;
-	} else t1 = $[4];
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			className: t1,
-			...props
-		});
-		$[5] = props;
+		$[5] = className;
 		$[6] = t1;
-		$[7] = t2;
-	} else t2 = $[7];
-	return t2;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			"aria-hidden": true,
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
 };
+/**
+* The glyph leading the label: its children, sized to the tag's text and drawn
+* in its ink. Renders nothing without children.
+*/
 var TagIcon = (t0) => {
-	const $ = c(5);
-	const { svg, className } = t0;
-	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(tag_module_default.icon, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	const $ = c(17);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, children, ...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];
+	}
+	const t1 = children !== void 0 && children !== null;
 	let t2;
-	if ($[2] !== svg || $[3] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg,
-			label: "",
-			className: t1
-		});
-		$[2] = svg;
-		$[3] = t1;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+	if ($[6] !== className) {
+		t2 = clsx(tag_module_default.icon, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== props || $[10] !== t2) {
+		t3 = {
+			"aria-hidden": true,
+			...props,
+			className: t2,
+			children
+		};
+		$[8] = children;
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t1 || $[15] !== t3) {
+		t4 = {
+			defaultTagName: "span",
+			render,
+			ref,
+			enabled: t1,
+			props: t3
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	return useRender(t4);
 };
 /**
 * A static fact as a pill in a status `tone` and `variant`, leading with at
 * most one indicator: `Dot` or `Icon`. A removable tag is a `TagGroup.Tag`.
 *
 * @example
-* <Tag.Root tone="info">
-* 	<Tag.Dot />
-* 	Outstanding
+* <Tag.Root tone="error">
+* 	<Tag.Icon><ErrorIcon /></Tag.Icon>
+* 	Returned
 * </Tag.Root>
 */
 var Tag = {

package/dist/components/tag/tag.module.js

@@ -1,7 +1,7 @@
 import './tag.css';// src/components/tag/tag.module.scss
-var root = "_root_1lbu9_3";
-var dot = "_dot_1lbu9_109";
-var icon = "_icon_1lbu9_116";
+var root = "_root_10znj_3";
+var dot = "_dot_10znj_109";
+var icon = "_icon_10znj_116";
 var tag_module_default = {
 	root,
 	dot,

package/dist/components/tag-group/tag-group.css

@@ -1,101 +1,101 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_siv3m_3 {
+  ._root_1xxnx_3 {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--tag-group-gap, var(--sys-unit-4));
   }
-  ._list_siv3m_9 {
+  ._list_1xxnx_9 {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--tag-group-gap, var(--sys-unit-4));
   }
-  ._tag_siv3m_15[data-variant=subtle] {
+  ._tag_1xxnx_15[data-variant=subtle] {
     --tag-bg: var(--sys-color-neutral-bg);
     --tag-fg: var(--sys-color-neutral-fg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-variant=solid] {
+  ._tag_1xxnx_15[data-variant=solid] {
     --tag-bg: var(--sys-color-neutral-fg);
     --tag-fg: var(--sys-color-neutral-bg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-variant=outline] {
+  ._tag_1xxnx_15[data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-neutral-fg);
     --tag-border: var(--sys-color-neutral-border);
   }
-  ._tag_siv3m_15[data-tone=info][data-variant=subtle] {
+  ._tag_1xxnx_15[data-tone=info][data-variant=subtle] {
     --tag-bg: var(--sys-color-info-bg);
     --tag-fg: var(--sys-color-info-fg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=info][data-variant=solid] {
+  ._tag_1xxnx_15[data-tone=info][data-variant=solid] {
     --tag-bg: var(--sys-color-info-fg);
     --tag-fg: var(--sys-color-info-bg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=info][data-variant=outline] {
+  ._tag_1xxnx_15[data-tone=info][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-info-fg);
     --tag-border: var(
     	--sys-color-info-border
     );
   }
-  ._tag_siv3m_15[data-tone=success][data-variant=subtle] {
+  ._tag_1xxnx_15[data-tone=success][data-variant=subtle] {
     --tag-bg: var(--sys-color-success-bg);
     --tag-fg: var(--sys-color-success-fg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=success][data-variant=solid] {
+  ._tag_1xxnx_15[data-tone=success][data-variant=solid] {
     --tag-bg: var(--sys-color-success-fg);
     --tag-fg: var(--sys-color-success-bg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=success][data-variant=outline] {
+  ._tag_1xxnx_15[data-tone=success][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-success-fg);
     --tag-border: var(
     	--sys-color-success-border
     );
   }
-  ._tag_siv3m_15[data-tone=warning][data-variant=subtle] {
+  ._tag_1xxnx_15[data-tone=warning][data-variant=subtle] {
     --tag-bg: var(--sys-color-warning-bg);
     --tag-fg: var(--sys-color-warning-fg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=warning][data-variant=solid] {
+  ._tag_1xxnx_15[data-tone=warning][data-variant=solid] {
     --tag-bg: var(--sys-color-warning-fg);
     --tag-fg: var(--sys-color-warning-bg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=warning][data-variant=outline] {
+  ._tag_1xxnx_15[data-tone=warning][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-warning-fg);
     --tag-border: var(
     	--sys-color-warning-border
     );
   }
-  ._tag_siv3m_15[data-tone=error][data-variant=subtle] {
+  ._tag_1xxnx_15[data-tone=error][data-variant=subtle] {
     --tag-bg: var(--sys-color-error-bg);
     --tag-fg: var(--sys-color-error-fg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=error][data-variant=solid] {
+  ._tag_1xxnx_15[data-tone=error][data-variant=solid] {
     --tag-bg: var(--sys-color-error-fg);
     --tag-fg: var(--sys-color-error-bg);
     --tag-border: transparent;
   }
-  ._tag_siv3m_15[data-tone=error][data-variant=outline] {
+  ._tag_1xxnx_15[data-tone=error][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-error-fg);
     --tag-border: var(
     	--sys-color-error-border
     );
   }
-  ._tag_siv3m_15 {
+  ._tag_1xxnx_15 {
     display: inline-flex;
     align-items: center;
     gap: var(--sys-unit-3);
@@ -108,17 +108,17 @@
     color: var(--tag-fg);
     font: var(--sys-font-label-small);
   }
-  ._tag_siv3m_15 {
+  ._tag_1xxnx_15 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._tag_siv3m_15:focus-visible {
+  ._tag_1xxnx_15:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._tag_siv3m_15[data-focus-visible] {
+  ._tag_1xxnx_15[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._remove_siv3m_121 {
+  ._remove_1xxnx_121 {
     display: inline-flex;
     flex-shrink: 0;
     align-items: center;
@@ -134,22 +134,25 @@
     padding: 0;
     color: inherit;
   }
-  ._remove_siv3m_121 {
+  ._remove_1xxnx_121 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._remove_siv3m_121:focus-visible {
+  ._remove_1xxnx_121:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._remove_siv3m_121 {
+    ._remove_1xxnx_121 {
       transition: background var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._remove_siv3m_121:hover {
+  ._remove_1xxnx_121:hover {
     background: color-mix(in oklch, currentcolor calc(var(--sys-state-hover) * 100%), transparent);
   }
-  ._remove_siv3m_121:active {
+  ._remove_1xxnx_121:active {
     background: color-mix(in oklch, currentcolor calc(var(--sys-state-pressed) * 100%), transparent);
   }
+  ._remove_1xxnx_121 {
+    font-size: var(--tag-group-remove-icon-size, 0.875em);
+  }
 }

package/dist/components/tag-group/tag-group.d.ts

@@ -1,15 +1,17 @@
 import type { ReactNode } from "react";
-import { type TagGroupProps as AriaTagGroupProps, type TagListProps as AriaTagListProps, type TagProps as AriaTagProps } from "react-aria-components";
+import { type ButtonProps as AriaButtonProps, type TagGroupProps as AriaTagGroupProps, type TagListProps as AriaTagListProps, type TagProps as AriaTagProps } from "react-aria-components";
 import type { Tone, ToneVariant } from "../../lib/tone.ts";
 export type TagGroupRootProps = Omit<AriaTagGroupProps, "aria-label" | "className"> & Readonly<{
     /** What the tags are, such as "Active filters". */
     "aria-label": string;
     className?: string;
 }>;
+/** The group: named by `aria-label`, and calling `onRemove` with the keys removed. */
 declare const Root: ({ className, ...props }: TagGroupRootProps) => ReactNode;
 export type TagGroupListProps<T extends object> = Omit<AriaTagListProps<T>, "className"> & Readonly<{
     className?: string;
 }>;
+/** The row of tags, from `items` or from its children. */
 declare const List: <T extends object>({ className, ...props }: TagGroupListProps<T>) => ReactNode;
 export type TagGroupTagProps = Omit<AriaTagProps, "className"> & Readonly<{
     /** Status colour. @default "neutral" */
@@ -18,13 +20,17 @@ export type TagGroupTagProps = Omit<AriaTagProps, "className"> & Readonly<{
     variant?: ToneVariant;
     className?: string;
 }>;
+/** One tag, in a status `tone` and `variant`. */
 declare const GroupTag: ({ tone, variant, className, ...props }: TagGroupTagProps) => ReactNode;
-export type TagGroupRemoveProps = Readonly<{
+export type TagGroupRemoveProps = Omit<AriaButtonProps, "slot" | "children" | "className"> & Readonly<{
     /** The action's name, such as "Remove", surfaced as the tooltip hint; the button is named by it followed by its tag. */
     label: string;
+    /** The glyph, such as a cross. */
+    children: ReactNode;
     className?: string;
 }>;
-declare const Remove: ({ label, className, }: TagGroupRemoveProps) => ReactNode;
+/** The tag's icon-only remove button, named by `label` and its tag, and left out of the tab order. */
+declare const Remove: ({ label, className, children, ...props }: TagGroupRemoveProps) => ReactNode;
 type TagGroupParts = Readonly<{
     Root: typeof Root;
     List: typeof List;
@@ -43,7 +49,7 @@ type TagGroupParts = Readonly<{
  * 		{filter => (
  * 			<TagGroup.Tag id={filter.id} textValue={filter.label}>
  * 				{filter.label}
- * 				<TagGroup.Remove label="Remove" />
+ * 				<TagGroup.Remove label="Remove"><CloseIcon /></TagGroup.Remove>
  * 			</TagGroup.Tag>
  * 		)}
  * 	</TagGroup.List>

package/dist/components/tag-group/tag-group.js

@@ -1,12 +1,11 @@
-import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
-import { Icon } from "../icon/icon.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import tag_group_module_default from "./tag-group.module.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
 import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 // src/components/tag-group/tag-group.tsx
+/** The group: named by `aria-label`, and calling `onRemove` with the keys removed. */
 var Root = (t0) => {
 	const $ = c(8);
 	let className;
@@ -38,6 +37,7 @@ var Root = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** The row of tags, from `items` or from its children. */
 var List = (t0) => {
 	const $ = c(8);
 	let className;
@@ -69,6 +69,7 @@ var List = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/** One tag, in a status `tone` and `variant`. */
 var GroupTag = (t0) => {
 	const $ = c(12);
 	let className;
@@ -112,48 +113,59 @@ var GroupTag = (t0) => {
 	} else t4 = $[11];
 	return t4;
 };
+/** The tag's icon-only remove button, named by `label` and its tag, and left out of the tab order. */
 var Remove = (t0) => {
-	const $ = c(9);
-	const { label, className } = t0;
+	const $ = c(15);
+	let children;
+	let className;
+	let label;
+	let props;
+	if ($[0] !== t0) {
+		({label, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = label;
+		$[4] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		label = $[3];
+		props = $[4];
+	}
 	let t1;
-	if ($[0] !== className) {
+	if ($[5] !== className) {
 		t1 = clsx(tag_group_module_default.remove, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Icon, {
-			svg: SvgClose,
-			label: "",
-			size: .875
-		});
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== label || $[4] !== t1) {
-		t3 = /* @__PURE__ */ jsx(Button, {
+	if ($[7] !== children || $[8] !== label || $[9] !== props || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Button, {
 			slot: "remove",
 			excludeFromTabOrder: true,
 			"aria-label": label,
 			className: t1,
-			children: t2
+			...props,
+			children
 		});
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== label || $[7] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Tooltip, {
+		$[7] = children;
+		$[8] = label;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	let t3;
+	if ($[12] !== label || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tooltip, {
 			content: label,
-			children: t3
+			children: t2
 		});
-		$[6] = label;
-		$[7] = t3;
-		$[8] = t4;
-	} else t4 = $[8];
-	return t4;
+		$[12] = label;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
 };
 /**
 * A row of tags the reader moves through with the arrow keys and removes,
@@ -167,7 +179,7 @@ var Remove = (t0) => {
 * 		{filter => (
 * 			<TagGroup.Tag id={filter.id} textValue={filter.label}>
 * 				{filter.label}
-* 				<TagGroup.Remove label="Remove" />
+* 				<TagGroup.Remove label="Remove"><CloseIcon /></TagGroup.Remove>
 * 			</TagGroup.Tag>
 * 		)}
 * 	</TagGroup.List>

package/dist/components/tag-group/tag-group.module.js

@@ -1,8 +1,8 @@
 import './tag-group.css';// src/components/tag-group/tag-group.module.scss
-var root = "_root_siv3m_3";
-var list = "_list_siv3m_9";
-var tag = "_tag_siv3m_15";
-var remove = "_remove_siv3m_121";
+var root = "_root_1xxnx_3";
+var list = "_list_1xxnx_9";
+var tag = "_tag_1xxnx_15";
+var remove = "_remove_1xxnx_121";
 var tag_group_module_default = {
 	root,
 	list,