@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

package/dist/components/breadcrumbs/index.js

@@ -0,0 +1,3 @@
+import { Breadcrumbs } from "./breadcrumbs.js";
+import { useFold } from "./use-fold.js";
+export { Breadcrumbs, useFold };

package/dist/components/breadcrumbs/use-fold.d.ts

@@ -0,0 +1,34 @@
+/** The widths, in pixels, that decide how far a trail folds. */
+export type TrailGauge = Readonly<{
+    /** The width of each crumb at its full length, outermost first. */
+    crumbs: readonly number[];
+    /** The width of one separator. */
+    separator: number;
+    /** The width of the button that holds the folded crumbs. */
+    overflow: number;
+    /** The width the trail has. */
+    room: number;
+}>;
+/**
+ * Counts the crumbs to fold into the overflow menu so that the trail fits its
+ * room. It folds the crumb next to the first one first, and never folds the
+ * first or the last crumb.
+ *
+ * @example
+ * foldCount({ crumbs: [50, 120, 80, 140], separator: 32, overflow: 40, room: 410 }); // 1
+ */
+export declare const foldCount: ({ crumbs, separator, overflow, room, }: TrailGauge) => number;
+/**
+ * Measures how many crumbs a trail folds. The `root` ref goes on the element
+ * whose width the trail has, the `gauge` ref on a hidden copy of the trail at
+ * its full length (`Breadcrumbs.Gauge`). It measures again when either one
+ * changes size.
+ *
+ * @example
+ * const { root, gauge, folded } = useFold();
+ */
+export declare const useFold: () => Readonly<{
+    root: (element: HTMLElement | null) => void;
+    gauge: (element: HTMLOListElement | null) => void;
+    folded: number;
+}>;

package/dist/components/breadcrumbs/use-fold.js

@@ -0,0 +1,73 @@
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "react";
+// src/components/breadcrumbs/use-fold.ts
+/**
+* Counts the crumbs to fold into the overflow menu so that the trail fits its
+* room. It folds the crumb next to the first one first, and never folds the
+* first or the last crumb.
+*
+* @example
+* foldCount({ crumbs: [50, 120, 80, 140], separator: 32, overflow: 40, room: 410 }); // 1
+*/
+var foldCount = ({ crumbs, separator, overflow, room }) => {
+	const foldable = Math.max(crumbs.length - 2, 0);
+	const full = crumbs.reduce((sum, crumb) => sum + crumb, 0) + separator * Math.max(crumbs.length - 1, 0);
+	const widthAfter = (folded) => folded === 0 ? full : full - crumbs.slice(1, 1 + folded).reduce((sum, crumb) => sum + crumb + separator, 0) + overflow + separator;
+	return Array.from({ length: foldable }, (_, folded) => folded).find((folded) => widthAfter(folded) <= room) ?? foldable;
+};
+var widthOf = (element) => element?.getBoundingClientRect().width ?? 0;
+var gaugeOf = (gauge, root) => ({
+	crumbs: Array.from(gauge.querySelectorAll("[data-gauge=\"crumb\"]"), widthOf),
+	separator: widthOf(gauge.querySelector("[data-gauge=\"separator\"]")),
+	overflow: widthOf(gauge.querySelector("[data-gauge=\"overflow\"]")),
+	room: widthOf(root)
+});
+/**
+* Measures how many crumbs a trail folds. The `root` ref goes on the element
+* whose width the trail has, the `gauge` ref on a hidden copy of the trail at
+* its full length (`Breadcrumbs.Gauge`). It measures again when either one
+* changes size.
+*
+* @example
+* const { root, gauge, folded } = useFold();
+*/
+var useFold = () => {
+	const $ = c(6);
+	const [root, setRoot] = useState(null);
+	const [gauge, setGauge] = useState(null);
+	const [folded, setFolded] = useState(0);
+	let t0;
+	let t1;
+	if ($[0] !== gauge || $[1] !== root) {
+		t0 = () => {
+			if (root === null || gauge === null) return;
+			const measure = () => setFolded(foldCount(gaugeOf(gauge, root)));
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(root);
+			observer.observe(gauge);
+			return () => observer.disconnect();
+		};
+		t1 = [root, gauge];
+		$[0] = gauge;
+		$[1] = root;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useLayoutEffect(t0, t1);
+	let t2;
+	if ($[4] !== folded) {
+		t2 = {
+			root: setRoot,
+			gauge: setGauge,
+			folded
+		};
+		$[4] = folded;
+		$[5] = t2;
+	} else t2 = $[5];
+	return t2;
+};
+export { foldCount, useFold };

package/dist/components/button/button-attributes.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonSize, ButtonTone, ButtonVariant } from "./button.tsx";
+/** How a button looks, before its defaults are filled in. */
+export type ButtonLook = Readonly<{
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    tone?: ButtonTone;
+    className?: string;
+}>;
+/** The attributes the button stylesheet keys off. */
+export type ButtonLookAttributes = Readonly<{
+    "data-variant": ButtonVariant;
+    "data-size": ButtonSize;
+    "data-tone": ButtonTone;
+    className: string;
+}>;
+/**
+ * The button stylesheet's class and `data-*` attributes for a look, with its
+ * defaults filled in.
+ *
+ * @example
+ * <a {...buttonAttributes({ variant: "primary" })} href="/" />
+ */
+export declare const buttonAttributes: ({ variant, size, tone, className, }: ButtonLook) => ButtonLookAttributes;

package/dist/components/button/button-attributes.js

@@ -0,0 +1,17 @@
+import button_module_default from "./button.module.js";
+import { clsx } from "clsx";
+// src/components/button/button-attributes.ts
+/**
+* The button stylesheet's class and `data-*` attributes for a look, with its
+* defaults filled in.
+*
+* @example
+* <a {...buttonAttributes({ variant: "primary" })} href="/" />
+*/
+var buttonAttributes = ({ variant = "secondary", size = "md", tone = "brand", className }) => ({
+	"data-variant": variant,
+	"data-size": size,
+	"data-tone": tone,
+	className: clsx(button_module_default.button, className)
+});
+export { buttonAttributes };

package/dist/components/button/button.css

@@ -0,0 +1,111 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._button_wivo8_3 {
+    --_btn-bg: transparent;
+    --_btn-fg: var(--sys-color-text);
+    --_btn-pad-y: var(--sys-unit-6);
+    --_btn-pad-x: var(--sys-unit-16);
+    --_btn-font: var(--sys-font-label-medium);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--btn-gap, var(--sys-unit-4));
+    box-sizing: border-box;
+    border: none;
+    border-radius: var(--btn-radius, var(--sys-radius-full));
+    background: var(--btn-bg, var(--_btn-bg));
+    padding: var(--btn-pad-y, var(--_btn-pad-y)) var(--btn-pad-x, var(--_btn-pad-x));
+    color: var(--btn-fg, var(--_btn-fg));
+    font: var(--btn-font, var(--_btn-font));
+    letter-spacing: 0.0125em;
+    text-align: center;
+    white-space: nowrap;
+  }
+  ._button_wivo8_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._button_wivo8_3:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._button_wivo8_3 {
+    position: relative;
+    isolation: isolate;
+  }
+  ._button_wivo8_3::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
+    background: currentcolor;
+    opacity: 0;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._button_wivo8_3::after {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._button_wivo8_3:hover:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-hover);
+  }
+  ._button_wivo8_3:active:not(:disabled, [data-disabled])::after {
+    opacity: var(--sys-state-pressed);
+  }
+  a._button_wivo8_3,
+  a._button_wivo8_3:hover {
+    color: var(--btn-fg, var(--_btn-fg));
+    text-decoration: none;
+  }
+  ._button_wivo8_3[data-variant=primary] {
+    --_btn-bg: var(--sys-color-primary);
+    --_btn-fg: var(--sys-color-on-primary);
+  }
+  ._button_wivo8_3[data-variant=secondary] {
+    --_btn-bg: var(--sys-color-primary-container);
+    --_btn-fg: var(--sys-color-on-primary-container);
+  }
+  ._button_wivo8_3[data-variant=tertiary] {
+    --_btn-bg: transparent;
+    --_btn-fg: var(--sys-color-on-primary-container);
+    --_btn-pad-x: var(--sys-unit-6);
+  }
+  ._button_wivo8_3[data-tone=danger][data-variant=primary] {
+    --_btn-bg: var(--sys-color-error-fg);
+    --_btn-fg: var(--sys-color-error-bg);
+  }
+  ._button_wivo8_3[data-tone=danger][data-variant=secondary] {
+    --_btn-bg: var(--sys-color-error-bg);
+    --_btn-fg: var(--sys-color-error-fg);
+  }
+  ._button_wivo8_3[data-tone=danger][data-variant=tertiary] {
+    --_btn-fg: var(--sys-color-error-fg);
+  }
+  ._button_wivo8_3[data-size=sm] {
+    --_btn-pad-y: var(--sys-unit-4);
+    --_btn-pad-x: var(--sys-unit-6);
+    --_btn-font: var(--sys-font-label-small);
+  }
+  ._button_wivo8_3[data-size=lg] {
+    --_btn-pad-y: var(--sys-unit-8);
+    --_btn-pad-x: var(--sys-unit-20);
+    --_btn-font: var(--sys-font-label-large);
+  }
+  ._button_wivo8_3[data-icon-only=true] {
+    border-radius: var(--btn-radius, var(--sys-radius-circle));
+    padding: var(--btn-pad-y, var(--_btn-pad-y));
+    aspect-ratio: 1;
+  }
+  ._button_wivo8_3:disabled,
+  ._button_wivo8_3[data-disabled],
+  ._button_wivo8_3[aria-disabled=true] {
+    background: var(--btn-disabled-bg, var(--sys-color-disabled-bg));
+    color: var(--btn-disabled-fg, var(--sys-color-disabled-fg));
+  }
+  ._button_wivo8_3:disabled[data-variant=tertiary],
+  ._button_wivo8_3[data-disabled][data-variant=tertiary],
+  ._button_wivo8_3[aria-disabled=true][data-variant=tertiary] {
+    background: transparent;
+  }
+}

package/dist/components/button/button.d.ts

@@ -0,0 +1,47 @@
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
+import { type SvgComponent } from "../icon/icon.tsx";
+/** A button's visual tier. */
+export type ButtonVariant = "primary" | "secondary" | "tertiary";
+/** A button's size. */
+export type ButtonSize = "sm" | "md" | "lg";
+/** A button's colour role. */
+export type ButtonTone = "brand" | "danger";
+type BaseProps = ComponentPropsWithRef<"button"> & Readonly<{
+    /** Visual tier. @default "secondary" */
+    variant?: ButtonVariant;
+    /** @default "md" */
+    size?: ButtonSize;
+    /**
+     * Colour role. `danger` re-points every tier to the error role, for
+     * irreversible actions. @default "brand"
+     */
+    tone?: ButtonTone;
+    /** A library part this button should render as, e.g. `<Menu.Trigger />`. */
+    render?: ReactElement;
+}>;
+type TextButtonProps = BaseProps & Readonly<{
+    iconOnly?: false;
+    /** Optional leading icon rendered before the label. */
+    icon?: SvgComponent;
+    children: ReactNode;
+}>;
+type IconOnlyButtonProps = BaseProps & Readonly<{
+    iconOnly: true;
+    /** Icon to render; required in icon-only mode. */
+    icon: SvgComponent;
+    /** Accessible name, surfaced as the tooltip hint and set as `aria-label`, since the icon alone conveys no text. */
+    label: string;
+    children?: never;
+}>;
+export type ButtonProps = TextButtonProps | IconOnlyButtonProps;
+/**
+ * Composite button over Material 3's tiers: `primary` is a filled button,
+ * `secondary` a tonal one, and `tertiary` a text button. In icon-only mode an
+ * accessible `label` is required and surfaced as both a tooltip and an
+ * `aria-label`.
+ *
+ * @example
+ * <Button variant="primary" size="md" onClick={apply}>Apply</Button>
+ */
+export declare const Button: (props: ButtonProps) => ReactNode;
+export {};

package/dist/components/button/button.js

@@ -0,0 +1,210 @@
+import { Icon } from "../icon/icon.js";
+import { Tooltip } from "../tooltip/tooltip.js";
+import { buttonAttributes } from "./button-attributes.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+// src/components/button/button.tsx
+var ButtonElement = (t0) => {
+	const $ = c(6);
+	let props;
+	let render;
+	if ($[0] !== t0) {
+		({render, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = render;
+	} else {
+		props = $[1];
+		render = $[2];
+	}
+	let t1;
+	if ($[3] !== props || $[4] !== render) {
+		t1 = {
+			defaultTagName: "button",
+			render,
+			props
+		};
+		$[3] = props;
+		$[4] = render;
+		$[5] = t1;
+	} else t1 = $[5];
+	return useRender(t1);
+};
+/**
+* Composite button over Material 3's tiers: `primary` is a filled button,
+* `secondary` a tonal one, and `tertiary` a text button. In icon-only mode an
+* accessible `label` is required and surfaced as both a tooltip and an
+* `aria-label`.
+*
+* @example
+* <Button variant="primary" size="md" onClick={apply}>Apply</Button>
+*/
+var Button = (props) => {
+	const $ = c(49);
+	if (props.iconOnly) {
+		let className;
+		let icon;
+		let iconOnly;
+		let label;
+		let nativeProps;
+		let render;
+		let size;
+		let tone;
+		let variant;
+		if ($[0] !== props) {
+			({variant, size, tone, className, iconOnly, icon, label, render, ...nativeProps} = props);
+			$[0] = props;
+			$[1] = className;
+			$[2] = icon;
+			$[3] = iconOnly;
+			$[4] = label;
+			$[5] = nativeProps;
+			$[6] = render;
+			$[7] = size;
+			$[8] = tone;
+			$[9] = variant;
+		} else {
+			className = $[1];
+			icon = $[2];
+			iconOnly = $[3];
+			label = $[4];
+			nativeProps = $[5];
+			render = $[6];
+			size = $[7];
+			tone = $[8];
+			variant = $[9];
+		}
+		let t0;
+		if ($[10] !== className || $[11] !== size || $[12] !== tone || $[13] !== variant) {
+			t0 = buttonAttributes({
+				variant,
+				size,
+				tone,
+				className
+			});
+			$[10] = className;
+			$[11] = size;
+			$[12] = tone;
+			$[13] = variant;
+			$[14] = t0;
+		} else t0 = $[14];
+		let t1;
+		if ($[15] !== icon) {
+			t1 = /* @__PURE__ */ jsx(Icon, {
+				svg: icon,
+				label: ""
+			});
+			$[15] = icon;
+			$[16] = t1;
+		} else t1 = $[16];
+		let t2;
+		if ($[17] !== iconOnly || $[18] !== label || $[19] !== nativeProps || $[20] !== render || $[21] !== t0 || $[22] !== t1) {
+			t2 = /* @__PURE__ */ jsx(ButtonElement, {
+				render,
+				type: "button",
+				"aria-label": label,
+				...t0,
+				"data-icon-only": iconOnly,
+				...nativeProps,
+				children: t1
+			});
+			$[17] = iconOnly;
+			$[18] = label;
+			$[19] = nativeProps;
+			$[20] = render;
+			$[21] = t0;
+			$[22] = t1;
+			$[23] = t2;
+		} else t2 = $[23];
+		let t3;
+		if ($[24] !== label || $[25] !== t2) {
+			t3 = /* @__PURE__ */ jsx(Tooltip, {
+				content: label,
+				children: t2
+			});
+			$[24] = label;
+			$[25] = t2;
+			$[26] = t3;
+		} else t3 = $[26];
+		return t3;
+	}
+	let children;
+	let className_0;
+	let icon_0;
+	let nativeProps_0;
+	let render_0;
+	let size_0;
+	let tone_0;
+	let variant_0;
+	if ($[27] !== props) {
+		const { variant: t0, size: t1, tone: t2, className: t3, iconOnly: _iconOnly, icon: t4, children: t5, render: t6, ...t7 } = props;
+		variant_0 = t0;
+		size_0 = t1;
+		tone_0 = t2;
+		className_0 = t3;
+		icon_0 = t4;
+		children = t5;
+		render_0 = t6;
+		nativeProps_0 = t7;
+		$[27] = props;
+		$[28] = children;
+		$[29] = className_0;
+		$[30] = icon_0;
+		$[31] = nativeProps_0;
+		$[32] = render_0;
+		$[33] = size_0;
+		$[34] = tone_0;
+		$[35] = variant_0;
+	} else {
+		children = $[28];
+		className_0 = $[29];
+		icon_0 = $[30];
+		nativeProps_0 = $[31];
+		render_0 = $[32];
+		size_0 = $[33];
+		tone_0 = $[34];
+		variant_0 = $[35];
+	}
+	let t0;
+	if ($[36] !== className_0 || $[37] !== size_0 || $[38] !== tone_0 || $[39] !== variant_0) {
+		t0 = buttonAttributes({
+			variant: variant_0,
+			size: size_0,
+			tone: tone_0,
+			className: className_0
+		});
+		$[36] = className_0;
+		$[37] = size_0;
+		$[38] = tone_0;
+		$[39] = variant_0;
+		$[40] = t0;
+	} else t0 = $[40];
+	let t1;
+	if ($[41] !== icon_0) {
+		t1 = icon_0 ? /* @__PURE__ */ jsx(Icon, {
+			svg: icon_0,
+			label: ""
+		}) : null;
+		$[41] = icon_0;
+		$[42] = t1;
+	} else t1 = $[42];
+	let t2;
+	if ($[43] !== children || $[44] !== nativeProps_0 || $[45] !== render_0 || $[46] !== t0 || $[47] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(ButtonElement, {
+			render: render_0,
+			type: "button",
+			...t0,
+			...nativeProps_0,
+			children: [t1, children]
+		});
+		$[43] = children;
+		$[44] = nativeProps_0;
+		$[45] = render_0;
+		$[46] = t0;
+		$[47] = t1;
+		$[48] = t2;
+	} else t2 = $[48];
+	return t2;
+};
+export { Button };

package/dist/components/button/button.module.js

@@ -0,0 +1,4 @@
+import './button.css';// src/components/button/button.module.scss
+var button = "_button_wivo8_3";
+var button_module_default = { button };
+export { button, button_module_default as default };

package/dist/components/button/close-button.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement, ReactNode } from "react";
+export type CloseButtonProps = Readonly<{
+    /** Accessible name, surfaced as the tooltip hint and the `aria-label`. */
+    closeLabel: string;
+    /** The library part that closes, such as `<BaseDialog.Close />`. */
+    render: ReactElement;
+}>;
+/**
+ * The icon-only way out of an overlay, rendered as the overlay's own close part.
+ *
+ * @example
+ * <CloseButton closeLabel="Close" render={<BaseDialog.Close />} />
+ */
+export declare const CloseButton: ({ closeLabel, render, }: CloseButtonProps) => ReactNode;

package/dist/components/button/close-button.js

@@ -0,0 +1,30 @@
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button } from "./button.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/button/close-button.tsx
+/**
+* The icon-only way out of an overlay, rendered as the overlay's own close part.
+*
+* @example
+* <CloseButton closeLabel="Close" render={<BaseDialog.Close />} />
+*/
+var CloseButton = (t0) => {
+	const $ = c(3);
+	const { closeLabel, render } = t0;
+	let t1;
+	if ($[0] !== closeLabel || $[1] !== render) {
+		t1 = /* @__PURE__ */ jsx(Button, {
+			variant: "tertiary",
+			iconOnly: true,
+			icon: SvgClose,
+			label: closeLabel,
+			render
+		});
+		$[0] = closeLabel;
+		$[1] = render;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+export { CloseButton };

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from "./button.tsx";

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { Button } from "./button.js";

package/dist/components/checkbox-field/checkbox-field.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type FieldBlurHandler, type FieldProps } from "../field/index.ts";
+import { type CheckboxProps } from "./checkbox.tsx";
+export type CheckboxFieldProps = FieldProps & Omit<CheckboxProps, "className" | "onBlur"> & Readonly<{
+    onBlur?: FieldBlurHandler;
+    /** Applied to the field wrapper, so callers can place the row. */
+    className?: string;
+}>;
+/**
+ * The assembled checkbox: the label beside the box, which also toggles it, then
+ * the description and the error.
+ *
+ * @example
+ * <CheckboxField
+ * 	label="I agree to the terms"
+ * 	optionalLabel="optional"
+ * 	checked={agreed}
+ * 	onCheckedChange={setAgreed}
+ * />
+ */
+export declare const CheckboxField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, name, className, ...props }: CheckboxFieldProps) => ReactNode;