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

package/dist/components/tabs/tabs.js

@@ -1,194 +1,269 @@
-import { useRequiredContext } from "../../lib/use-required-context.js";
 import { Badge } from "../badge/badge.js";
 import tabs_module_default from "./tabs.module.js";
 import { c } from "react/compiler-runtime";
-import { createContext } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
 import { Tabs } from "@base-ui/react/tabs";
 // src/components/tabs/tabs.tsx
-var TabsContext = createContext(null);
-var useTabs = () => {
-	return useRequiredContext(TabsContext, "Tabs parts must be rendered inside Tabs.Root.");
-};
+var InkCopyContext = createContext(false);
+var ListChildrenContext = createContext(null);
+/** The tabs and the panels they open. */
 var Root = (t0) => {
-	const $ = c(13);
-	const { tabs, value, defaultValue, onValueChange, className, children } = t0;
+	const $ = c(16);
+	let className;
+	let defaultValue;
+	let onValueChange;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({value, defaultValue, onValueChange, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = defaultValue;
+		$[3] = onValueChange;
+		$[4] = props;
+		$[5] = value;
+	} else {
+		className = $[1];
+		defaultValue = $[2];
+		onValueChange = $[3];
+		props = $[4];
+		value = $[5];
+	}
 	let t1;
-	if ($[0] !== onValueChange) {
+	if ($[6] !== onValueChange) {
 		t1 = (next) => {
 			if (typeof next === "string") onValueChange?.(next);
 		};
-		$[0] = onValueChange;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[6] = onValueChange;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[2] !== className) {
+	if ($[8] !== className) {
 		t2 = clsx(tabs_module_default.root, className);
-		$[2] = className;
-		$[3] = t2;
-	} else t2 = $[3];
+		$[8] = className;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[4] !== children || $[5] !== defaultValue || $[6] !== t1 || $[7] !== t2 || $[8] !== value) {
+	if ($[10] !== defaultValue || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== value) {
 		t3 = /* @__PURE__ */ jsx(Tabs.Root, {
+			...props,
 			value,
 			defaultValue,
 			onValueChange: t1,
-			className: t2,
-			children
+			className: t2
 		});
-		$[4] = children;
-		$[5] = defaultValue;
+		$[10] = defaultValue;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = value;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
+};
+/** The row of tabs, scrolling sideways when it outgrows its room. */
+var List = (t0) => {
+	const $ = c(14);
+	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 ($[5] !== className) {
+		t1 = clsx(tabs_module_default.list, className);
+		$[5] = className;
 		$[6] = t1;
-		$[7] = t2;
-		$[8] = value;
-		$[9] = t3;
-	} else t3 = $[9];
-	let t4;
-	if ($[10] !== t3 || $[11] !== tabs) {
-		t4 = /* @__PURE__ */ jsx(TabsContext, {
-			value: tabs,
-			children: t3
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children) {
+		t2 = /* @__PURE__ */ jsx(ListChildrenContext, {
+			value: children,
+			children
+		});
+		$[7] = children;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== label || $[10] !== props || $[11] !== t1 || $[12] !== t2) {
+		t3 = /* @__PURE__ */ jsx("div", {
+			className: tabs_module_default.scroller,
+			children: /* @__PURE__ */ jsx(Tabs.List, {
+				...props,
+				"aria-label": label,
+				className: t1,
+				children: t2
+			})
 		});
-		$[10] = t3;
-		$[11] = tabs;
-		$[12] = t4;
-	} else t4 = $[12];
-	return t4;
+		$[9] = label;
+		$[10] = props;
+		$[11] = t1;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 };
-var TabContent = (t0) => {
+/** One tab: its label, and a `Count` where it has one. */
+var Tab = (t0) => {
 	const $ = c(5);
-	const { tab } = t0;
-	let t1;
-	if ($[0] !== tab.count) {
-		t1 = tab.count === void 0 ? null : /* @__PURE__ */ jsx(Badge, {
-			tone: "neutral",
-			variant: "subtle",
-			children: tab.count
-		});
-		$[0] = tab.count;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== t1 || $[3] !== tab.label) {
-		t2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [tab.label, t1] });
-		$[2] = t1;
-		$[3] = tab.label;
-		$[4] = t2;
-	} else t2 = $[4];
-	return t2;
+	let children;
+	let className;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({value, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = value;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		value = $[4];
+	}
+	return use(InkCopyContext) ? /* @__PURE__ */ jsx("span", {
+		className: clsx(tabs_module_default.tab, className),
+		children
+	}) : /* @__PURE__ */ jsx(Tabs.Tab, {
+		...props,
+		value,
+		className: clsx(tabs_module_default.tab, className),
+		children
+	});
 };
-var Bar = (t0) => {
-	const $ = c(15);
-	const { label, className } = t0;
-	const tabs = useTabs();
+/** A count after a tab's label, as a neutral badge. */
+var Count = (t0) => {
+	const $ = c(8);
+	let props;
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(tabs_module_default.scroller, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
 	let t2;
-	if ($[2] !== tabs) {
-		t2 = tabs.map(_temp);
-		$[2] = tabs;
+	if ($[0] !== t0) {
+		({tone: t1, variant: t2, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = t1;
 		$[3] = t2;
-	} else t2 = $[3];
+	} else {
+		props = $[1];
+		t1 = $[2];
+		t2 = $[3];
+	}
+	const tone = t1 === void 0 ? "neutral" : t1;
+	const variant = t2 === void 0 ? "subtle" : t2;
 	let t3;
-	if ($[4] !== tabs) {
-		t3 = tabs.map(_temp2);
-		$[4] = tabs;
-		$[5] = t3;
-	} else t3 = $[5];
-	let t4;
-	if ($[6] !== t3) {
-		t4 = /* @__PURE__ */ jsx(Tabs.Indicator, {
-			className: tabs_module_default.indicator,
-			children: /* @__PURE__ */ jsx("span", {
-				className: tabs_module_default.indicatorLabels,
-				"aria-hidden": "true",
-				children: t3
-			})
+	if ($[4] !== props || $[5] !== tone || $[6] !== variant) {
+		t3 = /* @__PURE__ */ jsx(Badge, {
+			tone,
+			variant,
+			...props
 		});
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== label || $[9] !== t2 || $[10] !== t4) {
-		t5 = /* @__PURE__ */ jsxs(Tabs.List, {
-			className: tabs_module_default.list,
-			"aria-label": label,
-			children: [t2, t4]
-		});
-		$[8] = label;
-		$[9] = t2;
-		$[10] = t4;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== t1 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ jsx("div", {
-			className: t1,
-			children: t5
-		});
-		$[12] = t1;
-		$[13] = t5;
-		$[14] = t6;
-	} else t6 = $[14];
-	return t6;
+		$[4] = props;
+		$[5] = tone;
+		$[6] = variant;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
 };
+/**
+* The pill that slides to the open tab, inside the `List`. It holds a copy of
+* the list's tabs, so the open tab's label turns over as the pill arrives.
+*/
+var Indicator = (t0) => {
+	const $ = c(3);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const tabs = use(ListChildrenContext);
+	return use(InkCopyContext) ? null : /* @__PURE__ */ jsx(Tabs.Indicator, {
+		...props,
+		className: clsx(tabs_module_default.indicator, className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: tabs_module_default.indicatorLabels,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(InkCopyContext, {
+				value: true,
+				children: tabs
+			})
+		})
+	});
+};
+/** What one tab opens. */
 var Panel = (t0) => {
-	const $ = c(6);
-	const { value, className, children } = t0;
+	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 ($[0] !== className) {
+	if ($[3] !== className) {
 		t1 = clsx(tabs_module_default.panel, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
 	let t2;
-	if ($[2] !== children || $[3] !== t1 || $[4] !== value) {
+	if ($[5] !== props || $[6] !== t1) {
 		t2 = /* @__PURE__ */ jsx(Tabs.Panel, {
-			value,
-			className: t1,
-			children
+			...props,
+			className: t1
 		});
-		$[2] = children;
-		$[3] = t1;
-		$[4] = value;
-		$[5] = t2;
-	} else t2 = $[5];
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
 	return t2;
 };
 /**
-* In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
-* out with a pill that slides to the open one, and each `Panel` holds what its
-* tab opens. Tabs that lead to pages are a horizontal `Nav`.
+* In-page tabs over base-ui's `Tabs`, with a pill that slides to the open tab.
+* Tabs that lead to pages are a horizontal `Nav`.
 *
 * @example
-* <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
-* 	<Tabs.Bar label="Declaration" />
+* <Tabs.Root defaultValue="details">
+* 	<Tabs.List label="Invoice">
+* 		<Tabs.Tab value="details">Details</Tabs.Tab>
+* 		<Tabs.Tab value="history">History<Tabs.Count>3</Tabs.Count></Tabs.Tab>
+* 		<Tabs.Indicator />
+* 	</Tabs.List>
 * 	<Tabs.Panel value="details">…</Tabs.Panel>
 * 	<Tabs.Panel value="history">…</Tabs.Panel>
 * </Tabs.Root>
 */
 var Tabs$1 = {
 	Root,
-	Bar,
+	List,
+	Tab,
+	Count,
+	Indicator,
 	Panel
 };
-function _temp(tab) {
-	return /* @__PURE__ */ jsx(Tabs.Tab, {
-		value: tab.value,
-		disabled: tab.disabled,
-		className: tabs_module_default.tab,
-		children: /* @__PURE__ */ jsx(TabContent, { tab })
-	}, tab.value);
-}
-function _temp2(tab_0) {
-	return /* @__PURE__ */ jsx("span", {
-		className: tabs_module_default.tab,
-		children: /* @__PURE__ */ jsx(TabContent, { tab: tab_0 })
-	}, tab_0.value);
-}
 export { Tabs$1 as Tabs };

package/dist/components/tag/tag.css

@@ -1,89 +1,89 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._root_1lbu9_3[data-variant=subtle] {
+  ._root_10znj_3[data-variant=subtle] {
     --tag-bg: var(--sys-color-neutral-bg);
     --tag-fg: var(--sys-color-neutral-fg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-variant=solid] {
+  ._root_10znj_3[data-variant=solid] {
     --tag-bg: var(--sys-color-neutral-fg);
     --tag-fg: var(--sys-color-neutral-bg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-variant=outline] {
+  ._root_10znj_3[data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-neutral-fg);
     --tag-border: var(--sys-color-neutral-border);
   }
-  ._root_1lbu9_3[data-tone=info][data-variant=subtle] {
+  ._root_10znj_3[data-tone=info][data-variant=subtle] {
     --tag-bg: var(--sys-color-info-bg);
     --tag-fg: var(--sys-color-info-fg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=info][data-variant=solid] {
+  ._root_10znj_3[data-tone=info][data-variant=solid] {
     --tag-bg: var(--sys-color-info-fg);
     --tag-fg: var(--sys-color-info-bg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=info][data-variant=outline] {
+  ._root_10znj_3[data-tone=info][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-info-fg);
     --tag-border: var(
     	--sys-color-info-border
     );
   }
-  ._root_1lbu9_3[data-tone=success][data-variant=subtle] {
+  ._root_10znj_3[data-tone=success][data-variant=subtle] {
     --tag-bg: var(--sys-color-success-bg);
     --tag-fg: var(--sys-color-success-fg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=success][data-variant=solid] {
+  ._root_10znj_3[data-tone=success][data-variant=solid] {
     --tag-bg: var(--sys-color-success-fg);
     --tag-fg: var(--sys-color-success-bg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=success][data-variant=outline] {
+  ._root_10znj_3[data-tone=success][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-success-fg);
     --tag-border: var(
     	--sys-color-success-border
     );
   }
-  ._root_1lbu9_3[data-tone=warning][data-variant=subtle] {
+  ._root_10znj_3[data-tone=warning][data-variant=subtle] {
     --tag-bg: var(--sys-color-warning-bg);
     --tag-fg: var(--sys-color-warning-fg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=warning][data-variant=solid] {
+  ._root_10znj_3[data-tone=warning][data-variant=solid] {
     --tag-bg: var(--sys-color-warning-fg);
     --tag-fg: var(--sys-color-warning-bg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=warning][data-variant=outline] {
+  ._root_10znj_3[data-tone=warning][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-warning-fg);
     --tag-border: var(
     	--sys-color-warning-border
     );
   }
-  ._root_1lbu9_3[data-tone=error][data-variant=subtle] {
+  ._root_10znj_3[data-tone=error][data-variant=subtle] {
     --tag-bg: var(--sys-color-error-bg);
     --tag-fg: var(--sys-color-error-fg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=error][data-variant=solid] {
+  ._root_10znj_3[data-tone=error][data-variant=solid] {
     --tag-bg: var(--sys-color-error-fg);
     --tag-fg: var(--sys-color-error-bg);
     --tag-border: transparent;
   }
-  ._root_1lbu9_3[data-tone=error][data-variant=outline] {
+  ._root_10znj_3[data-tone=error][data-variant=outline] {
     --tag-bg: transparent;
     --tag-fg: var(--sys-color-error-fg);
     --tag-border: var(
     	--sys-color-error-border
     );
   }
-  ._root_1lbu9_3 {
+  ._root_10znj_3 {
     display: inline-flex;
     align-items: center;
     gap: var(--sys-unit-3);
@@ -96,25 +96,27 @@
     color: var(--tag-fg);
     font: var(--sys-font-label-small);
   }
-  ._root_1lbu9_3 {
+  ._root_10znj_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._root_1lbu9_3:focus-visible {
+  ._root_10znj_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._root_1lbu9_3[data-focus-visible] {
+  ._root_10znj_3[data-focus-visible] {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._dot_1lbu9_109 {
+  ._dot_10znj_109 {
     flex-shrink: 0;
     inline-size: var(--sys-unit-3);
     block-size: var(--sys-unit-3);
     border-radius: var(--sys-radius-circle);
     background: currentcolor;
   }
-  ._icon_1lbu9_116 {
+  ._icon_10znj_116 {
+    display: inline-flex;
     flex-shrink: 0;
+    font-size: var(--tag-icon-size, 1em);
     margin-inline-start: calc(-1 * var(--sys-unit-1));
   }
 }

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

@@ -1,22 +1,24 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import type { ReactElement, ReactNode } from "react";
 import type { Tone, ToneVariant } from "../../lib/tone.ts";
-import { type SvgComponent } from "../icon/icon.tsx";
-export type TagRootProps = ComponentPropsWithRef<"span"> & Readonly<{
+export type TagRootProps = useRender.ComponentProps<"span"> & Readonly<{
     /** Status colour. @default "neutral" */
     tone?: Tone;
     /** @default "subtle" */
     variant?: ToneVariant;
     children: ReactNode;
 }>;
-declare const Root: ({ tone, variant, className, children, ...props }: TagRootProps) => ReactNode;
-export type TagDotProps = ComponentPropsWithRef<"span">;
-declare const Dot: ({ className, ...props }: TagDotProps) => ReactNode;
-export type TagIconProps = Readonly<{
-    /** The glyph, from a SVGR `?react` import. */
-    svg: SvgComponent;
-    className?: string;
-}>;
-declare const TagIcon: ({ svg, className, }: TagIconProps) => ReactNode;
+/** The pill: a `<span>` in a status `tone` and `variant`. */
+declare const Root: ({ tone, variant, render, className, ref, ...props }: TagRootProps) => ReactElement;
+export type TagDotProps = useRender.ComponentProps<"span">;
+/** A dot in the tag's tone, leading its label. */
+declare const Dot: ({ render, className, ref, ...props }: TagDotProps) => ReactElement;
+export type TagIconProps = useRender.ComponentProps<"span">;
+/**
+ * The glyph leading the label: its children, sized to the tag's text and drawn
+ * in its ink. Renders nothing without children.
+ */
+declare const TagIcon: ({ render, className, ref, children, ...props }: TagIconProps) => ReactElement | null;
 type TagParts = Readonly<{
     Root: typeof Root;
     Dot: typeof Dot;
@@ -27,9 +29,9 @@ type TagParts = Readonly<{
  * 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>
  */
 export declare const Tag: TagParts;