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

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

@@ -1,4 +1,6 @@
+import { Field } from "../field/field.js";
 import { OtpInput } from "./otp-input.js";
+import { Spinner } from "../spinner/spinner.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/otp-field/otp-field.tsx
@@ -17,75 +19,89 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var OtpField = (t0) => {
-	const $ = c(20);
+	const $ = c(24);
 	let description;
 	let label;
+	let optionalLabel;
 	let rootProps;
 	let slotLabel;
 	if ($[0] !== t0) {
-		({label, description, slotLabel, ...rootProps} = t0);
+		({label, description, slotLabel, optionalLabel, ...rootProps} = t0);
 		$[0] = t0;
 		$[1] = description;
 		$[2] = label;
-		$[3] = rootProps;
-		$[4] = slotLabel;
+		$[3] = optionalLabel;
+		$[4] = rootProps;
+		$[5] = slotLabel;
 	} else {
 		description = $[1];
 		label = $[2];
-		rootProps = $[3];
-		slotLabel = $[4];
+		optionalLabel = $[3];
+		rootProps = $[4];
+		slotLabel = $[5];
 	}
 	let t1;
-	if ($[5] !== label) {
-		t1 = /* @__PURE__ */ jsx(OtpInput.Label, { children: label });
-		$[5] = label;
-		$[6] = t1;
-	} else t1 = $[6];
+	if ($[6] !== optionalLabel) {
+		t1 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[6] = optionalLabel;
+		$[7] = t1;
+	} else t1 = $[7];
 	let t2;
-	if ($[7] !== slotLabel) {
-		t2 = /* @__PURE__ */ jsx(OtpInput.Slots, { slotLabel });
-		$[7] = slotLabel;
-		$[8] = t2;
-	} else t2 = $[8];
+	if ($[8] !== label || $[9] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(OtpInput.Label, { children: [
+			label,
+			" ",
+			t1
+		] });
+		$[8] = label;
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
 	let t3;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(OtpInput.Pending, {});
-		$[9] = t3;
-	} else t3 = $[9];
+	if ($[11] !== slotLabel) {
+		t3 = /* @__PURE__ */ jsx(OtpInput.Slots, { slotLabel });
+		$[11] = slotLabel;
+		$[12] = t3;
+	} else t3 = $[12];
 	let t4;
-	if ($[10] !== t2) {
-		t4 = /* @__PURE__ */ jsxs(OtpInput.Group, { children: [t2, t3] });
-		$[10] = t2;
-		$[11] = t4;
-	} else t4 = $[11];
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(OtpInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[13] = t4;
+	} else t4 = $[13];
 	let t5;
-	if ($[12] !== description) {
-		t5 = /* @__PURE__ */ jsx(OtpInput.Description, { children: description });
-		$[12] = description;
-		$[13] = t5;
-	} else t5 = $[13];
+	if ($[14] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(OtpInput.Group, { children: [t3, t4] });
+		$[14] = t3;
+		$[15] = t5;
+	} else t5 = $[15];
 	let t6;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(OtpInput.Error, {});
-		$[14] = t6;
-	} else t6 = $[14];
+	if ($[16] !== description) {
+		t6 = /* @__PURE__ */ jsx(OtpInput.Description, { children: description });
+		$[16] = description;
+		$[17] = t6;
+	} else t6 = $[17];
 	let t7;
-	if ($[15] !== rootProps || $[16] !== t1 || $[17] !== t4 || $[18] !== t5) {
-		t7 = /* @__PURE__ */ jsxs(OtpInput.Root, {
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(OtpInput.Error, {});
+		$[18] = t7;
+	} else t7 = $[18];
+	let t8;
+	if ($[19] !== rootProps || $[20] !== t2 || $[21] !== t5 || $[22] !== t6) {
+		t8 = /* @__PURE__ */ jsxs(OtpInput.Root, {
 			...rootProps,
 			children: [
-				t1,
-				t4,
+				t2,
 				t5,
-				t6
+				t6,
+				t7
 			]
 		});
-		$[15] = rootProps;
-		$[16] = t1;
-		$[17] = t4;
-		$[18] = t5;
-		$[19] = t7;
-	} else t7 = $[19];
-	return t7;
+		$[19] = rootProps;
+		$[20] = t2;
+		$[21] = t5;
+		$[22] = t6;
+		$[23] = t8;
+	} else t8 = $[23];
+	return t8;
 };
 export { OtpField };

package/dist/components/otp-field/otp-field.module.js

@@ -1,8 +1,8 @@
 import './otp-field.css';// src/components/otp-field/otp-field.module.scss
-var root = "_root_8k2z3_3";
-var group = "_group_8k2z3_6";
-var slot = "_slot_8k2z3_12";
-var separator = "_separator_8k2z3_92";
+var root = "_root_1dlq9_3";
+var group = "_group_1dlq9_6";
+var slot = "_slot_1dlq9_12";
+var separator = "_separator_1dlq9_185";
 var otp_field_module_default = {
 	root,
 	group,

package/dist/components/otp-field/otp-input.d.ts

@@ -4,7 +4,7 @@ import { Field, type FieldProps, type FieldState } from "../field/index.ts";
 import { InputError, type InputErrorProps, InputLabel, type InputLabelProps, InputPending, type InputPendingProps } from "../field/input-parts.tsx";
 import { type OtpInputBaseProps } from "./otp-input-context.ts";
 export type { OtpInputBaseProps };
-export type OtpInputRootProps = Omit<FieldProps, "label" | "description"> & OtpInputBaseProps & Readonly<{
+export type OtpInputRootProps = Omit<FieldProps, "label" | "description" | "optionalLabel"> & OtpInputBaseProps & Readonly<{
     value: string;
     onValueChange: (value: string) => void;
     /** Number of character slots. @default 6 */
@@ -19,9 +19,9 @@ export type OtpInputRootProps = Omit<FieldProps, "label" | "description"> & OtpI
  * projecting its state onto every part.
  *
  * @example
- * <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">…</OtpInput.Root>
+ * <OtpInput.Root value={code} onValueChange={setCode}>…</OtpInput.Root>
  */
-declare const OtpInputRoot: ({ length, requiredness, optionalLabel, errors, dirty, touched, pending, state, className, children, ...base }: OtpInputRootProps) => ReactNode;
+declare const OtpInputRoot: ({ length, requiredness, errors, dirty, touched, pending, state, className, children, ...base }: OtpInputRootProps) => ReactNode;
 export type OtpInputLabelProps = InputLabelProps;
 export type OtpInputGroupProps = Omit<BaseOTPField.Root.Props, keyof OtpInputBaseProps | "className" | "value" | "defaultValue" | "onValueChange" | "length"> & Readonly<{
     className?: string;
@@ -89,11 +89,13 @@ export type OtpInputParts = Readonly<{
  * given.
  *
  * @example
- * <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">
- * 	<OtpInput.Label>Verification code</OtpInput.Label>
+ * <OtpInput.Root value={code} onValueChange={setCode} requiredness="optional">
+ * 	<OtpInput.Label>Verification code <Field.Requiredness optionalLabel="optional" /></OtpInput.Label>
  * 	<OtpInput.Group>
  * 		<OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
- * 		<OtpInput.Pending />
+ * 		<OtpInput.Pending>
+ * 			<Spinner size={1} />
+ * 		</OtpInput.Pending>
  * 	</OtpInput.Group>
  * 	<OtpInput.Error />
  * </OtpInput.Root>

package/dist/components/otp-field/otp-input.js

@@ -16,53 +16,50 @@ var DEFAULT_LENGTH = 6;
 * projecting its state onto every part.
 *
 * @example
-* <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">…</OtpInput.Root>
+* <OtpInput.Root value={code} onValueChange={setCode}>…</OtpInput.Root>
 */
 var OtpInputRoot = (t0) => {
-	const $ = c(53);
+	const $ = c(52);
 	let base;
 	let children;
 	let className;
 	let dirty;
 	let errors;
-	let optionalLabel;
 	let requiredness;
 	let state;
 	let t1;
 	let t2;
 	let touched;
 	if ($[0] !== t0) {
-		({length: t1, requiredness, optionalLabel, errors, dirty, touched, pending: t2, state, className, children, ...base} = t0);
+		({length: t1, requiredness, errors, dirty, touched, pending: t2, state, className, children, ...base} = t0);
 		$[0] = t0;
 		$[1] = base;
 		$[2] = children;
 		$[3] = className;
 		$[4] = dirty;
 		$[5] = errors;
-		$[6] = optionalLabel;
-		$[7] = requiredness;
-		$[8] = state;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = touched;
+		$[6] = requiredness;
+		$[7] = state;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = touched;
 	} else {
 		base = $[1];
 		children = $[2];
 		className = $[3];
 		dirty = $[4];
 		errors = $[5];
-		optionalLabel = $[6];
-		requiredness = $[7];
-		state = $[8];
-		t1 = $[9];
-		t2 = $[10];
-		touched = $[11];
+		requiredness = $[6];
+		state = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		touched = $[10];
 	}
 	const length = t1 === void 0 ? DEFAULT_LENGTH : t1;
 	const pending = t2 === void 0 ? false : t2;
 	const t3 = base.value !== "";
 	let t4;
-	if ($[12] !== base.disabled || $[13] !== base.readOnly || $[14] !== dirty || $[15] !== errors || $[16] !== pending || $[17] !== requiredness || $[18] !== state || $[19] !== t3 || $[20] !== touched) {
+	if ($[11] !== base.disabled || $[12] !== base.readOnly || $[13] !== dirty || $[14] !== errors || $[15] !== pending || $[16] !== requiredness || $[17] !== state || $[18] !== t3 || $[19] !== touched) {
 		t4 = {
 			errors,
 			requiredness,
@@ -74,111 +71,112 @@ var OtpInputRoot = (t0) => {
 			filled: t3,
 			state
 		};
-		$[12] = base.disabled;
-		$[13] = base.readOnly;
-		$[14] = dirty;
-		$[15] = errors;
-		$[16] = pending;
-		$[17] = requiredness;
-		$[18] = state;
-		$[19] = t3;
-		$[20] = touched;
-		$[21] = t4;
-	} else t4 = $[21];
+		$[11] = base.disabled;
+		$[12] = base.readOnly;
+		$[13] = dirty;
+		$[14] = errors;
+		$[15] = pending;
+		$[16] = requiredness;
+		$[17] = state;
+		$[18] = t3;
+		$[19] = touched;
+		$[20] = t4;
+	} else t4 = $[20];
 	const field = useFieldState(t4);
 	let t5;
-	if ($[22] !== errors || $[23] !== field.phase || $[24] !== field.state || $[25] !== optionalLabel) {
+	if ($[21] !== errors || $[22] !== field.phase || $[23] !== field.state) {
 		t5 = {
 			state: field.state,
 			errors,
-			optionalLabel,
 			phase: field.phase
 		};
-		$[22] = errors;
-		$[23] = field.phase;
-		$[24] = field.state;
-		$[25] = optionalLabel;
-		$[26] = t5;
-	} else t5 = $[26];
+		$[21] = errors;
+		$[22] = field.phase;
+		$[23] = field.state;
+		$[24] = t5;
+	} else t5 = $[24];
 	let t6;
-	if ($[27] !== base || $[28] !== field.disabled || $[29] !== length) {
+	if ($[25] !== base || $[26] !== field.disabled || $[27] !== length) {
 		t6 = {
 			...base,
 			disabled: field.disabled,
 			length
 		};
-		$[27] = base;
-		$[28] = field.disabled;
-		$[29] = length;
-		$[30] = t6;
-	} else t6 = $[30];
+		$[25] = base;
+		$[26] = field.disabled;
+		$[27] = length;
+		$[28] = t6;
+	} else t6 = $[28];
 	let t7;
-	if ($[31] !== field.state || $[32] !== length || $[33] !== t6) {
+	if ($[29] !== field.state || $[30] !== length || $[31] !== t6) {
 		t7 = {
 			state: field.state,
 			length,
 			base: t6
 		};
-		$[31] = field.state;
-		$[32] = length;
-		$[33] = t6;
-		$[34] = t7;
-	} else t7 = $[34];
+		$[29] = field.state;
+		$[30] = length;
+		$[31] = t6;
+		$[32] = t7;
+	} else t7 = $[32];
 	const t8 = field.disabled;
 	const t9 = field.invalid;
-	let t10;
-	if ($[35] !== className) {
-		t10 = clsx(otp_field_module_default.root, className);
-		$[35] = className;
-		$[36] = t10;
-	} else t10 = $[36];
+	const t10 = field.state.requiredness;
 	let t11;
-	if ($[37] !== field.state) {
-		t11 = fieldStateAttributes(field.state);
-		$[37] = field.state;
-		$[38] = t11;
-	} else t11 = $[38];
+	if ($[33] !== className) {
+		t11 = clsx(otp_field_module_default.root, className);
+		$[33] = className;
+		$[34] = t11;
+	} else t11 = $[34];
 	let t12;
-	if ($[39] !== children || $[40] !== dirty || $[41] !== field.disabled || $[42] !== field.invalid || $[43] !== t10 || $[44] !== t11 || $[45] !== touched) {
-		t12 = /* @__PURE__ */ jsx(Field.Root, {
+	if ($[35] !== field.state) {
+		t12 = fieldStateAttributes(field.state);
+		$[35] = field.state;
+		$[36] = t12;
+	} else t12 = $[36];
+	let t13;
+	if ($[37] !== children || $[38] !== dirty || $[39] !== field.disabled || $[40] !== field.invalid || $[41] !== field.state.requiredness || $[42] !== t11 || $[43] !== t12 || $[44] !== touched) {
+		t13 = /* @__PURE__ */ jsx(Field.Root, {
 			disabled: t8,
 			invalid: t9,
+			requiredness: t10,
 			dirty,
 			touched,
-			className: t10,
-			...t11,
+			className: t11,
+			...t12,
 			children
 		});
-		$[39] = children;
-		$[40] = dirty;
-		$[41] = field.disabled;
-		$[42] = field.invalid;
-		$[43] = t10;
-		$[44] = t11;
-		$[45] = touched;
-		$[46] = t12;
-	} else t12 = $[46];
-	let t13;
-	if ($[47] !== t12 || $[48] !== t7) {
-		t13 = /* @__PURE__ */ jsx(OtpInputContext, {
+		$[37] = children;
+		$[38] = dirty;
+		$[39] = field.disabled;
+		$[40] = field.invalid;
+		$[41] = field.state.requiredness;
+		$[42] = t11;
+		$[43] = t12;
+		$[44] = touched;
+		$[45] = t13;
+	} else t13 = $[45];
+	let t14;
+	if ($[46] !== t13 || $[47] !== t7) {
+		t14 = /* @__PURE__ */ jsx(OtpInputContext, {
 			value: t7,
-			children: t12
+			children: t13
 		});
-		$[47] = t12;
-		$[48] = t7;
-		$[49] = t13;
-	} else t13 = $[49];
-	let t14;
-	if ($[50] !== t13 || $[51] !== t5) {
-		t14 = /* @__PURE__ */ jsx(InputPartsContext, {
+		$[46] = t13;
+		$[47] = t7;
+		$[48] = t14;
+	} else t14 = $[48];
+	let t15;
+	if ($[49] !== t14 || $[50] !== t5) {
+		t15 = /* @__PURE__ */ jsx(InputPartsContext, {
 			value: t5,
-			children: t13
+			children: t14
 		});
-		$[50] = t13;
-		$[51] = t5;
-		$[52] = t14;
-	} else t14 = $[52];
-	return t14;
+		$[49] = t14;
+		$[50] = t5;
+		$[51] = t15;
+	} else t15 = $[51];
+	return t15;
 };
 /**
 * The row of character slots, bound to `Root`'s value.
@@ -343,11 +341,13 @@ var OtpInputSlots = (t0) => {
 * given.
 *
 * @example
-* <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">
-* 	<OtpInput.Label>Verification code</OtpInput.Label>
+* <OtpInput.Root value={code} onValueChange={setCode} requiredness="optional">
+* 	<OtpInput.Label>Verification code <Field.Requiredness optionalLabel="optional" /></OtpInput.Label>
 * 	<OtpInput.Group>
 * 		<OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
-* 		<OtpInput.Pending />
+* 		<OtpInput.Pending>
+* 			<Spinner size={1} />
+* 		</OtpInput.Pending>
 * 	</OtpInput.Group>
 * 	<OtpInput.Error />
 * </OtpInput.Root>

package/dist/components/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
 import { useRender } from "@base-ui/react/use-render";
-import type { ComponentProps, ReactElement, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 import { type PaginationPage } from "./pagination-context.ts";
 export type { PaginationPage };
 export type PaginationRootProps = useRender.ComponentProps<"div"> & PaginationPage & Readonly<{
@@ -27,19 +27,41 @@ export type PaginationIndexProps = Omit<useRender.ComponentProps<"span">, "child
 }>;
 /** Which page is on screen, as a polite live region. */
 declare const PaginationIndex: ({ label, render, className, ref, ...props }: PaginationIndexProps) => ReactElement;
-export type PaginationStepProps = Omit<ComponentProps<"button">, "ref" | "children"> & Readonly<{
-    /** The button's name and tooltip, such as "Next page". */
-    label: string;
-    /** The glyph, such as a chevron. */
-    children: ReactNode;
+export type PaginationStepProps = Omit<ComponentPropsWithRef<"button">, "children"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Next page" variant="tertiary"><ChevronRightIcon /></IconButton>`. */
+    render: useRender.RenderProp;
 }>;
-/** Goes to the first page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+/**
+ * Goes to the first page; marked `aria-disabled`, and kept in the tab order, on
+ * the first page. It renders whichever button it is given.
+ *
+ * @example
+ * <Pagination.First render={<IconButton label="First page" variant="tertiary"><FirstPageIcon /></IconButton>} />
+ */
 declare const PaginationFirst: (props: PaginationStepProps) => ReactNode;
-/** Goes back a page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+/**
+ * Goes back a page; marked `aria-disabled`, and kept in the tab order, on the
+ * first page. It renders whichever button it is given.
+ *
+ * @example
+ * <Pagination.Previous render={<IconButton label="Previous page" variant="tertiary"><ChevronLeftIcon /></IconButton>} />
+ */
 declare const PaginationPrevious: (props: PaginationStepProps) => ReactNode;
-/** Goes on a page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+/**
+ * Goes on a page; marked `aria-disabled`, and kept in the tab order, on the
+ * last page. It renders whichever button it is given.
+ *
+ * @example
+ * <Pagination.Next render={<IconButton label="Next page" variant="tertiary"><ChevronRightIcon /></IconButton>} />
+ */
 declare const PaginationNext: (props: PaginationStepProps) => ReactNode;
-/** Goes to the last page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+/**
+ * Goes to the last page; marked `aria-disabled`, and kept in the tab order, on
+ * the last page. It renders whichever button it is given.
+ *
+ * @example
+ * <Pagination.Last render={<IconButton label="Last page" variant="tertiary"><LastPageIcon /></IconButton>} />
+ */
 declare const PaginationLast: (props: PaginationStepProps) => ReactNode;
 /** The step buttons' names and glyphs. */
 export type PaginationStepLabels = Readonly<{
@@ -60,9 +82,17 @@ export type PaginationStepLabels = Readonly<{
     /** The last-page button's glyph. */
     lastIcon: ReactNode;
 }>;
-export type PaginationControlsProps = Omit<useRender.ComponentProps<"div">, "children"> & PaginationStepLabels;
-/** `First`, `Previous`, `Next` and `Last` in a row. */
-declare const PaginationControls: ({ firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon, render, className, ref, ...props }: PaginationControlsProps) => ReactElement;
+export type PaginationControlsProps = useRender.ComponentProps<"div">;
+/**
+ * The step buttons it is given, `First`, `Previous`, `Next` and `Last`, in a row.
+ *
+ * @example
+ * <Pagination.Controls>
+ * 	<Pagination.Previous render={previousButton} />
+ * 	<Pagination.Next render={nextButton} />
+ * </Pagination.Controls>
+ */
+declare const PaginationControls: ({ render, className, ref, ...props }: PaginationControlsProps) => ReactElement;
 /** What the ready-made pager says and shows, besides where the list stands. */
 export type PaginationContentProps = PaginationStepLabels & Readonly<{
     /** The page-size field's label, such as "Rows per page". */
@@ -92,8 +122,9 @@ export type PaginationParts = typeof Prefab & Readonly<{
  * The pager for a paged list, over any source: the page size, which page is on
  * screen, and buttons to the first, previous, next and last page. Its parts
  * compose another pager: `Root` holds where the list stands, `PageSize` picks
- * rows per page, `Index` says which page is on screen, and `Controls`, or
- * `First`, `Previous`, `Next` and `Last` on their own, step through the pages.
+ * rows per page, `Index` says which page is on screen, and `First`, `Previous`,
+ * `Next` and `Last`, each rendering the button it is given, step through the
+ * pages, in a `Controls` row or on their own.
  *
  * @example
  * <Pagination