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

package/dist/components/breadcrumbs/breadcrumbs.module.js

@@ -1,12 +1,12 @@
 import './breadcrumbs.css';// src/components/breadcrumbs/breadcrumbs.module.scss
-var root = "_root_k1utk_3";
-var list = "_list_k1utk_7";
-var item = "_item_k1utk_14";
-var crumb = "_crumb_k1utk_19";
-var separator = "_separator_k1utk_34";
-var gauge = "_gauge_k1utk_39";
-var gaugeList = "_gaugeList_k1utk_46";
-var popup = "_popup_k1utk_52";
+var root = "_root_amqs9_3";
+var list = "_list_amqs9_7";
+var item = "_item_amqs9_14";
+var crumb = "_crumb_amqs9_19";
+var separator = "_separator_amqs9_34";
+var gauge = "_gauge_amqs9_39";
+var gaugeList = "_gaugeList_amqs9_46";
+var popup = "_popup_amqs9_52";
 var breadcrumbs_module_default = {
 	root,
 	list,

package/dist/components/button/button.css

@@ -1,38 +1,40 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._button_wivo8_3 {
+  ._button_1o4i0_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);
+    --_btn-disabled-bg: var(--sys-color-disabled-bg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--btn-gap, var(--sys-unit-4));
     box-sizing: border-box;
-    border: none;
+    border: var(--btn-border-width, 0) var(--btn-border-style, none) var(--btn-border, currentcolor);
     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));
+    padding-block: var(--btn-pad-y, var(--_btn-pad-y));
+    padding-inline: var(--btn-pad-start, var(--btn-pad-x, var(--_btn-pad-x))) var(--btn-pad-end, 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;
+    letter-spacing: var(--btn-letter-spacing, 0.0125em);
     text-align: center;
     white-space: nowrap;
   }
-  ._button_wivo8_3 {
+  ._button_1o4i0_3 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._button_wivo8_3:focus-visible {
+  ._button_1o4i0_3:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
-  ._button_wivo8_3 {
+  ._button_1o4i0_3 {
     position: relative;
     isolation: isolate;
   }
-  ._button_wivo8_3::after {
+  ._button_1o4i0_3::after {
     content: "";
     position: absolute;
     z-index: -1;
@@ -43,69 +45,65 @@
     pointer-events: none;
   }
   @media not (prefers-reduced-motion) {
-    ._button_wivo8_3::after {
+    ._button_1o4i0_3::after {
       transition: opacity var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._button_wivo8_3:hover:not(:disabled, [data-disabled])::after {
+  ._button_1o4i0_3:hover:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-hover);
   }
-  ._button_wivo8_3:active:not(:disabled, [data-disabled])::after {
+  ._button_1o4i0_3:active:not(:disabled, [data-disabled])::after {
     opacity: var(--sys-state-pressed);
   }
-  a._button_wivo8_3,
-  a._button_wivo8_3:hover {
+  a._button_1o4i0_3,
+  a._button_1o4i0_3:hover {
     color: var(--btn-fg, var(--_btn-fg));
     text-decoration: none;
   }
-  ._button_wivo8_3[data-variant=primary] {
+  ._button_1o4i0_3[data-variant=primary] {
     --_btn-bg: var(--sys-color-primary);
     --_btn-fg: var(--sys-color-on-primary);
   }
-  ._button_wivo8_3[data-variant=secondary] {
+  ._button_1o4i0_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] {
+  ._button_1o4i0_3[data-variant=tertiary] {
     --_btn-bg: transparent;
     --_btn-fg: var(--sys-color-on-primary-container);
     --_btn-pad-x: var(--sys-unit-6);
+    --_btn-disabled-bg: transparent;
   }
-  ._button_wivo8_3[data-tone=danger][data-variant=primary] {
+  ._button_1o4i0_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] {
+  ._button_1o4i0_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] {
+  ._button_1o4i0_3[data-tone=danger][data-variant=tertiary] {
     --_btn-fg: var(--sys-color-error-fg);
   }
-  ._button_wivo8_3[data-size=sm] {
+  ._button_1o4i0_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] {
+  ._button_1o4i0_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] {
+  ._button_1o4i0_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));
+  ._button_1o4i0_3:disabled,
+  ._button_1o4i0_3[data-disabled],
+  ._button_1o4i0_3[aria-disabled=true] {
+    background: var(--btn-disabled-bg, var(--_btn-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

@@ -5,7 +5,8 @@ export type ButtonVariant = "primary" | "secondary" | "tertiary";
 export type ButtonSize = "sm" | "md" | "lg";
 /** A button's colour role. */
 export type ButtonTone = "brand" | "danger";
-type BaseProps = ComponentPropsWithRef<"button"> & Readonly<{
+/** The props every button takes, whatever it shows. */
+export type ButtonBaseProps = ComponentPropsWithRef<"button"> & Readonly<{
     /** Visual tier. @default "secondary" */
     variant?: ButtonVariant;
     /** @default "md" */
@@ -18,29 +19,32 @@ type BaseProps = ComponentPropsWithRef<"button"> & Readonly<{
     /** A library part this button should render as, e.g. `<Menu.Trigger />`. */
     render?: ReactElement;
 }>;
-type TextButtonProps = BaseProps & Readonly<{
-    iconOnly?: false;
+export type ButtonProps = ButtonBaseProps & Readonly<{
     /** Optional leading icon rendered before the label. */
     icon?: ReactNode;
+    /** The button's text, which is also its accessible name. */
     children: ReactNode;
 }>;
-type IconOnlyButtonProps = BaseProps & Readonly<{
-    iconOnly: true;
-    /** Icon to render; required in icon-only mode. */
-    icon: ReactNode;
+/**
+ * Composite button over Material 3's tiers: `primary` is a filled button,
+ * `secondary` a tonal one, and `tertiary` a text button. A button whose only
+ * content is an icon is an `IconButton`.
+ *
+ * @example
+ * <Button variant="primary" size="md" onClick={apply}>Apply</Button>
+ */
+export declare const Button: ({ variant, size, tone, className, icon, children, render, ...nativeProps }: ButtonProps) => ReactNode;
+export type IconButtonProps = ButtonBaseProps & Readonly<{
     /** Accessible name, surfaced as the tooltip hint and set as `aria-label`, since the icon alone conveys no text. */
     label: string;
-    children?: never;
+    /** The icon, drawn in `currentColor` at `1em`. */
+    children: ReactNode;
 }>;
-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`.
+ * A button whose only content is an icon: a circle with its `label` as its
+ * accessible name and as a tooltip, since the icon alone says nothing.
  *
  * @example
- * <Button variant="primary" size="md" onClick={apply}>Apply</Button>
+ * <IconButton label="Export" onClick={exportRows}><DownloadIcon /></IconButton>
  */
-export declare const Button: (props: ButtonProps) => ReactNode;
-export {};
+export declare const IconButton: ({ variant, size, tone, className, label, children, render, ...nativeProps }: IconButtonProps) => ReactNode;

package/dist/components/button/button.js

@@ -32,160 +32,155 @@ var ButtonElement = (t0) => {
 };
 /**
 * 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`.
+* `secondary` a tonal one, and `tertiary` a text button. A button whose only
+* content is an icon is an `IconButton`.
 *
 * @example
 * <Button variant="primary" size="md" onClick={apply}>Apply</Button>
 */
-var Button = (props) => {
-	const $ = c(45);
-	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 || $[16] !== iconOnly || $[17] !== label || $[18] !== nativeProps || $[19] !== render || $[20] !== t0) {
-			t1 = /* @__PURE__ */ jsx(ButtonElement, {
-				render,
-				type: "button",
-				"aria-label": label,
-				...t0,
-				"data-icon-only": iconOnly,
-				...nativeProps,
-				children: icon
-			});
-			$[15] = icon;
-			$[16] = iconOnly;
-			$[17] = label;
-			$[18] = nativeProps;
-			$[19] = render;
-			$[20] = t0;
-			$[21] = t1;
-		} else t1 = $[21];
-		let t2;
-		if ($[22] !== label || $[23] !== t1) {
-			t2 = /* @__PURE__ */ jsx(Tooltip, {
-				content: label,
-				children: t1
-			});
-			$[22] = label;
-			$[23] = t1;
-			$[24] = t2;
-		} else t2 = $[24];
-		return t2;
-	}
+var Button = (t0) => {
+	const $ = c(20);
 	let children;
-	let className_0;
-	let icon_0;
-	let nativeProps_0;
-	let render_0;
-	let size_0;
-	let tone_0;
-	let variant_0;
-	if ($[25] !== 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;
-		$[25] = props;
-		$[26] = children;
-		$[27] = className_0;
-		$[28] = icon_0;
-		$[29] = nativeProps_0;
-		$[30] = render_0;
-		$[31] = size_0;
-		$[32] = tone_0;
-		$[33] = variant_0;
+	let className;
+	let icon;
+	let nativeProps;
+	let render;
+	let size;
+	let tone;
+	let variant;
+	if ($[0] !== t0) {
+		({variant, size, tone, className, icon, children, render, ...nativeProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = icon;
+		$[4] = nativeProps;
+		$[5] = render;
+		$[6] = size;
+		$[7] = tone;
+		$[8] = variant;
 	} else {
-		children = $[26];
-		className_0 = $[27];
-		icon_0 = $[28];
-		nativeProps_0 = $[29];
-		render_0 = $[30];
-		size_0 = $[31];
-		tone_0 = $[32];
-		variant_0 = $[33];
+		children = $[1];
+		className = $[2];
+		icon = $[3];
+		nativeProps = $[4];
+		render = $[5];
+		size = $[6];
+		tone = $[7];
+		variant = $[8];
 	}
-	let t0;
-	if ($[34] !== className_0 || $[35] !== size_0 || $[36] !== tone_0 || $[37] !== variant_0) {
-		t0 = buttonAttributes({
-			variant: variant_0,
-			size: size_0,
-			tone: tone_0,
-			className: className_0
+	let t1;
+	if ($[9] !== className || $[10] !== size || $[11] !== tone || $[12] !== variant) {
+		t1 = buttonAttributes({
+			variant,
+			size,
+			tone,
+			className
 		});
-		$[34] = className_0;
-		$[35] = size_0;
-		$[36] = tone_0;
-		$[37] = variant_0;
-		$[38] = t0;
-	} else t0 = $[38];
+		$[9] = className;
+		$[10] = size;
+		$[11] = tone;
+		$[12] = variant;
+		$[13] = t1;
+	} else t1 = $[13];
+	let t2;
+	if ($[14] !== children || $[15] !== icon || $[16] !== nativeProps || $[17] !== render || $[18] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(ButtonElement, {
+			render,
+			type: "button",
+			...t1,
+			...nativeProps,
+			children: [icon, children]
+		});
+		$[14] = children;
+		$[15] = icon;
+		$[16] = nativeProps;
+		$[17] = render;
+		$[18] = t1;
+		$[19] = t2;
+	} else t2 = $[19];
+	return t2;
+};
+/**
+* A button whose only content is an icon: a circle with its `label` as its
+* accessible name and as a tooltip, since the icon alone says nothing.
+*
+* @example
+* <IconButton label="Export" onClick={exportRows}><DownloadIcon /></IconButton>
+*/
+var IconButton = (t0) => {
+	const $ = c(23);
+	let children;
+	let className;
+	let label;
+	let nativeProps;
+	let render;
+	let size;
+	let tone;
+	let variant;
+	if ($[0] !== t0) {
+		({variant, size, tone, className, label, children, render, ...nativeProps} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = label;
+		$[4] = nativeProps;
+		$[5] = render;
+		$[6] = size;
+		$[7] = tone;
+		$[8] = variant;
+	} else {
+		children = $[1];
+		className = $[2];
+		label = $[3];
+		nativeProps = $[4];
+		render = $[5];
+		size = $[6];
+		tone = $[7];
+		variant = $[8];
+	}
 	let t1;
-	if ($[39] !== children || $[40] !== icon_0 || $[41] !== nativeProps_0 || $[42] !== render_0 || $[43] !== t0) {
-		t1 = /* @__PURE__ */ jsxs(ButtonElement, {
-			render: render_0,
+	if ($[9] !== className || $[10] !== size || $[11] !== tone || $[12] !== variant) {
+		t1 = buttonAttributes({
+			variant,
+			size,
+			tone,
+			className
+		});
+		$[9] = className;
+		$[10] = size;
+		$[11] = tone;
+		$[12] = variant;
+		$[13] = t1;
+	} else t1 = $[13];
+	let t2;
+	if ($[14] !== children || $[15] !== label || $[16] !== nativeProps || $[17] !== render || $[18] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ButtonElement, {
+			render,
 			type: "button",
-			...t0,
-			...nativeProps_0,
-			children: [icon_0, children]
+			"aria-label": label,
+			...t1,
+			"data-icon-only": true,
+			...nativeProps,
+			children
+		});
+		$[14] = children;
+		$[15] = label;
+		$[16] = nativeProps;
+		$[17] = render;
+		$[18] = t1;
+		$[19] = t2;
+	} else t2 = $[19];
+	let t3;
+	if ($[20] !== label || $[21] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tooltip, {
+			content: label,
+			children: t2
 		});
-		$[39] = children;
-		$[40] = icon_0;
-		$[41] = nativeProps_0;
-		$[42] = render_0;
-		$[43] = t0;
-		$[44] = t1;
-	} else t1 = $[44];
-	return t1;
+		$[20] = label;
+		$[21] = t2;
+		$[22] = t3;
+	} else t3 = $[22];
+	return t3;
 };
-export { Button };
+export { Button, IconButton };

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

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

package/dist/components/button/index.js

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

package/dist/components/checkbox-field/checkbox-field.js

@@ -18,7 +18,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var CheckboxField = (t0) => {
-	const $ = c(46);
+	const $ = c(48);
 	let checkIcon;
 	let className;
 	let description;
@@ -89,39 +89,53 @@ var CheckboxField = (t0) => {
 		$[20] = t5;
 	} else t5 = $[20];
 	let t6;
-	if ($[21] !== label || $[22] !== optionalLabel || $[23] !== requiredness) {
-		t6 = /* @__PURE__ */ jsx(Field.InlineLabelText, {
-			label,
-			requiredness,
-			optionalLabel
-		});
-		$[21] = label;
-		$[22] = optionalLabel;
-		$[23] = requiredness;
-		$[24] = t6;
-	} else t6 = $[24];
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(Field.RequiredMark, {});
+		$[21] = t6;
+	} else t6 = $[21];
 	let t7;
-	if ($[25] !== t5 || $[26] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Checkbox.Label, { children: [t5, t6] });
-		$[25] = t5;
-		$[26] = t6;
-		$[27] = t7;
-	} else t7 = $[27];
+	if ($[22] !== label) {
+		t7 = /* @__PURE__ */ jsxs(Field.InlineLabelText, { children: [
+			label,
+			" ",
+			t6
+		] });
+		$[22] = label;
+		$[23] = t7;
+	} else t7 = $[23];
 	let t8;
-	if ($[28] !== description) {
-		t8 = /* @__PURE__ */ jsx(Checkbox.Description, { children: description });
-		$[28] = description;
-		$[29] = t8;
-	} else t8 = $[29];
+	if ($[24] !== optionalLabel) {
+		t8 = /* @__PURE__ */ jsx(Field.InlineOptional, { optionalLabel });
+		$[24] = optionalLabel;
+		$[25] = t8;
+	} else t8 = $[25];
 	let t9;
-	if ($[30] !== errors) {
-		t9 = /* @__PURE__ */ jsx(Checkbox.Error, { children: errors });
-		$[30] = errors;
-		$[31] = t9;
-	} else t9 = $[31];
+	if ($[26] !== t5 || $[27] !== t7 || $[28] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Checkbox.Label, { children: [
+			t5,
+			t7,
+			t8
+		] });
+		$[26] = t5;
+		$[27] = t7;
+		$[28] = t8;
+		$[29] = t9;
+	} else t9 = $[29];
 	let t10;
-	if ($[32] !== className || $[33] !== dirty || $[34] !== errors || $[35] !== name || $[36] !== pending || $[37] !== props.disabled || $[38] !== props.readOnly || $[39] !== requiredness || $[40] !== t1 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9 || $[44] !== touched) {
-		t10 = /* @__PURE__ */ jsxs(Checkbox.Root, {
+	if ($[30] !== description) {
+		t10 = /* @__PURE__ */ jsx(Checkbox.Description, { children: description });
+		$[30] = description;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== errors) {
+		t11 = /* @__PURE__ */ jsx(Checkbox.Error, { children: errors });
+		$[32] = errors;
+		$[33] = t11;
+	} else t11 = $[33];
+	let t12;
+	if ($[34] !== className || $[35] !== dirty || $[36] !== errors || $[37] !== name || $[38] !== pending || $[39] !== props.disabled || $[40] !== props.readOnly || $[41] !== requiredness || $[42] !== t1 || $[43] !== t10 || $[44] !== t11 || $[45] !== t9 || $[46] !== touched) {
+		t12 = /* @__PURE__ */ jsxs(Checkbox.Root, {
 			name,
 			className,
 			disabled: props.disabled,
@@ -133,26 +147,26 @@ var CheckboxField = (t0) => {
 			pending,
 			filled: t1,
 			children: [
-				t7,
-				t8,
-				t9
+				t9,
+				t10,
+				t11
 			]
 		});
-		$[32] = className;
-		$[33] = dirty;
-		$[34] = errors;
-		$[35] = name;
-		$[36] = pending;
-		$[37] = props.disabled;
-		$[38] = props.readOnly;
-		$[39] = requiredness;
-		$[40] = t1;
-		$[41] = t7;
-		$[42] = t8;
-		$[43] = t9;
-		$[44] = touched;
-		$[45] = t10;
-	} else t10 = $[45];
-	return t10;
+		$[34] = className;
+		$[35] = dirty;
+		$[36] = errors;
+		$[37] = name;
+		$[38] = pending;
+		$[39] = props.disabled;
+		$[40] = props.readOnly;
+		$[41] = requiredness;
+		$[42] = t1;
+		$[43] = t10;
+		$[44] = t11;
+		$[45] = t9;
+		$[46] = touched;
+		$[47] = t12;
+	} else t12 = $[47];
+	return t12;
 };
 export { CheckboxField };