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

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

@@ -1,5 +1,3 @@
-import SvgAdd from "../../vendor/@material-design-icons/svg/outlined/add.js";
-import SvgRemove from "../../vendor/@material-design-icons/svg/outlined/remove.js";
 import { Button } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { fieldStateAttributes } from "../field/field-state.js";
@@ -11,10 +9,17 @@ import { InputError, InputLabel, InputPartsContext, InputPending, useInputPartsC
 import { useLocale } from "../locale-provider/locale-provider.js";
 import number_field_module_default from "./number-field.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 { NumberField } from "@base-ui/react/number-field";
 // src/components/number-field/number-input.tsx
+/**
+* The field frame around a number input, holding its value, format and bounds
+* and projecting its state onto every part.
+*
+* @example
+* <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">…</NumberInput.Root>
+*/
 var NumberInputRoot = (t0) => {
 	const $ = c(44);
 	const { value, onValueChange, format, min, max, step, disabled, readOnly, requiredness, optionalLabel, errors, dirty, touched, pending: t1, state, name, id, className, children } = t0;
@@ -143,6 +148,12 @@ var NumberInputRoot = (t0) => {
 	} else t13 = $[43];
 	return t13;
 };
+/**
+* The bordered box holding the control, its stepper buttons and its inlays.
+*
+* @example
+* <NumberInput.Group><NumberInput.Input /></NumberInput.Group>
+*/
 var NumberInputGroup = (t0) => {
 	const $ = c(15);
 	let children;
@@ -193,6 +204,12 @@ var NumberInputGroup = (t0) => {
 	} else t3 = $[14];
 	return t3;
 };
+/**
+* A slot beside the control inside the group, such as an icon.
+*
+* @example
+* <NumberInput.Inlay aria-hidden="true"><EuroIcon /></NumberInput.Inlay>
+*/
 var NumberInputInlay = (t0) => {
 	const $ = c(8);
 	let className;
@@ -224,6 +241,12 @@ var NumberInputInlay = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* Static text beside the control, such as a unit. Decoration only.
+*
+* @example
+* <NumberInput.Affix>kg</NumberInput.Affix>
+*/
 var NumberInputAffix = (t0) => {
 	const $ = c(8);
 	let className;
@@ -256,6 +279,12 @@ var NumberInputAffix = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* The bare control, formatting and parsing `Root`'s value.
+*
+* @example
+* <NumberInput.Input aria-roledescription="Number field" />
+*/
 var NumberInputInput = (t0) => {
 	const $ = c(8);
 	let className;
@@ -287,9 +316,15 @@ var NumberInputInput = (t0) => {
 	} else t2 = $[7];
 	return t2;
 };
+/**
+* The icon-only button that steps the value down.
+*
+* @example
+* <NumberInput.Decrement label="Decrease"><RemoveIcon /></NumberInput.Decrement>
+*/
 var NumberInputDecrement = (t0) => {
-	const $ = c(6);
-	const { label, className } = t0;
+	const $ = c(7);
+	const { label, className, children } = t0;
 	let t1;
 	if ($[0] !== className) {
 		t1 = clsx(number_field_module_default.action, className);
@@ -302,25 +337,32 @@ var NumberInputDecrement = (t0) => {
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== label || $[4] !== t1) {
+	if ($[3] !== children || $[4] !== label || $[5] !== t1) {
 		t3 = /* @__PURE__ */ jsx(Button, {
 			iconOnly: true,
-			icon: SvgRemove,
+			icon: children,
 			label,
 			variant: "tertiary",
 			size: "sm",
 			className: t1,
 			render: t2
 		});
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[3] = children;
+		$[4] = label;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
 	return t3;
 };
+/**
+* The icon-only button that steps the value up.
+*
+* @example
+* <NumberInput.Increment label="Increase"><AddIcon /></NumberInput.Increment>
+*/
 var NumberInputIncrement = (t0) => {
-	const $ = c(6);
-	const { label, className } = t0;
+	const $ = c(7);
+	const { label, className, children } = t0;
 	let t1;
 	if ($[0] !== className) {
 		t1 = clsx(number_field_module_default.action, className);
@@ -333,20 +375,21 @@ var NumberInputIncrement = (t0) => {
 		$[2] = t2;
 	} else t2 = $[2];
 	let t3;
-	if ($[3] !== label || $[4] !== t1) {
+	if ($[3] !== children || $[4] !== label || $[5] !== t1) {
 		t3 = /* @__PURE__ */ jsx(Button, {
 			iconOnly: true,
-			icon: SvgAdd,
+			icon: children,
 			label,
 			variant: "tertiary",
 			size: "sm",
 			className: t1,
 			render: t2
 		});
-		$[3] = label;
-		$[4] = t1;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[3] = children;
+		$[4] = label;
+		$[5] = t1;
+		$[6] = t3;
+	} else t3 = $[6];
 	return t3;
 };
 /**
@@ -360,9 +403,13 @@ var NumberInputIncrement = (t0) => {
 * <NumberInput.Root value={hours} onValueChange={setHours} optionalLabel="optional">
 * 	<NumberInput.Label>Hours</NumberInput.Label>
 * 	<NumberInput.Group>
-* 		<NumberInput.Decrement label="Decrease" />
+* 		<NumberInput.Decrement label="Decrease">
+* 			<RemoveIcon />
+* 		</NumberInput.Decrement>
 * 		<NumberInput.Input aria-roledescription="Number field" />
-* 		<NumberInput.Increment label="Increase" />
+* 		<NumberInput.Increment label="Increase">
+* 			<AddIcon />
+* 		</NumberInput.Increment>
 * 	</NumberInput.Group>
 * 	<NumberInput.Error />
 * </NumberInput.Root>

package/dist/components/number-field/tsf-number-field.d.ts

@@ -8,7 +8,7 @@ export type TSFNumberFieldProps = Omit<NumberFieldProps, keyof ConnectedFieldPro
  *
  * @example
  * <form.AppField name="hours">
- * 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" roleDescription="Number field" />}
+ * 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" decrementIcon={<RemoveIcon />} incrementIcon={<AddIcon />} roleDescription="Number field" />}
  * </form.AppField>
  */
 export declare const TSFNumberField: (props: TSFNumberFieldProps) => ReactNode;

package/dist/components/number-field/tsf-number-field.js

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <form.AppField name="hours">
-* 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" roleDescription="Number field" />}
+* 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" decrementIcon={<RemoveIcon />} incrementIcon={<AddIcon />} roleDescription="Number field" />}
 * </form.AppField>
 */
 var TSFNumberField = (props) => {

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

@@ -14,19 +14,44 @@ export type OtpInputRootProps = Omit<FieldProps, "label" | "description"> & OtpI
     className?: string;
     children?: ReactNode;
 }>;
+/**
+ * The field frame around an OTP input, holding its value and length and
+ * projecting its state onto every part.
+ *
+ * @example
+ * <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">…</OtpInput.Root>
+ */
 declare const OtpInputRoot: ({ length, requiredness, optionalLabel, 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;
 }>;
+/**
+ * The row of character slots, bound to `Root`'s value.
+ *
+ * @example
+ * <OtpInput.Group><OtpInput.Slots slotLabel={slotLabel} /></OtpInput.Group>
+ */
 declare const OtpInputGroup: ({ className, ...props }: OtpInputGroupProps) => ReactNode;
 export type OtpInputInputProps = Omit<BaseOTPField.Input.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/**
+ * One character slot.
+ *
+ * @example
+ * <OtpInput.Input aria-label="character 2 of 6" />
+ */
 declare const OtpInputInput: ({ className, ...props }: OtpInputInputProps) => ReactNode;
 export type OtpInputSeparatorProps = Omit<BaseOTPField.Separator.Props, "className"> & Readonly<{
     className?: string;
 }>;
+/**
+ * A divider between groups of slots.
+ *
+ * @example
+ * <OtpInput.Separator />
+ */
 declare const OtpInputSeparator: ({ className, ...props }: OtpInputSeparatorProps) => ReactNode;
 /** Names a slot past the first by its 1-based position, such as "character 2 of 6". */
 export type OtpSlotLabel = (index: number, total: number) => string;

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

@@ -6,11 +6,18 @@ import { InputError, InputLabel, InputPartsContext, InputPending } from "../fiel
 import { OtpInputContext, useOtpInputContext } from "./otp-input-context.js";
 import otp_field_module_default from "./otp-field.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 { OTPField } from "@base-ui/react/otp-field";
 // src/components/otp-field/otp-input.tsx
 var DEFAULT_LENGTH = 6;
+/**
+* The field frame around an OTP input, holding its value and length and
+* projecting its state onto every part.
+*
+* @example
+* <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">…</OtpInput.Root>
+*/
 var OtpInputRoot = (t0) => {
 	const $ = c(53);
 	let base;
@@ -173,6 +180,12 @@ var OtpInputRoot = (t0) => {
 	} else t14 = $[52];
 	return t14;
 };
+/**
+* The row of character slots, bound to `Root`'s value.
+*
+* @example
+* <OtpInput.Group><OtpInput.Slots slotLabel={slotLabel} /></OtpInput.Group>
+*/
 var OtpInputGroup = (t0) => {
 	const $ = c(12);
 	let className;
@@ -215,6 +228,12 @@ var OtpInputGroup = (t0) => {
 	} else t3 = $[11];
 	return t3;
 };
+/**
+* One character slot.
+*
+* @example
+* <OtpInput.Input aria-label="character 2 of 6" />
+*/
 var OtpInputInput = (t0) => {
 	const $ = c(13);
 	let className;
@@ -259,6 +278,12 @@ var OtpInputInput = (t0) => {
 	} else t3 = $[12];
 	return t3;
 };
+/**
+* A divider between groups of slots.
+*
+* @example
+* <OtpInput.Separator />
+*/
 var OtpInputSeparator = (t0) => {
 	const $ = c(8);
 	let className;

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

@@ -1,7 +1,8 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
 import { type PaginationPage } from "./pagination-context.ts";
 export type { PaginationPage };
-export type PaginationRootProps = ComponentPropsWithRef<"div"> & PaginationPage & Readonly<{
+export type PaginationRootProps = useRender.ComponentProps<"div"> & PaginationPage & Readonly<{
     /** The page sizes on offer. The current `pageSize` is offered alongside them when it is not one of them. */
     pageSizes: readonly number[];
     /** Called with the page to show, counted from 0. */
@@ -9,18 +10,39 @@ export type PaginationRootProps = ComponentPropsWithRef<"div"> & PaginationPage
     /** Called with the page size picked. */
     onPageSizeChange: (pageSize: number) => void;
 }>;
-declare const PaginationRoot: ({ pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, className, ...props }: PaginationRootProps) => ReactNode;
-export type PaginationPageSizeProps = Readonly<{
-    /** The field's label, such as "Rows per page". */
-    label: string;
+/** Where the list stands, for the parts inside it, laid out in a row. */
+declare const PaginationRoot: ({ pageIndex, pageCount, pageSize, pageSizes, onPageIndexChange, onPageSizeChange, render, className, ref, ...props }: PaginationRootProps) => ReactNode;
+export type PaginationPageSizeProps = useRender.ComponentProps<"div"> & Readonly<{
+    /** The `Select` parts that pick the size, such as `Select.Label`, `Select.Trigger` and the portalled list of `Select.Items`. */
+    children: ReactNode;
 }>;
-declare const PaginationPageSize: ({ label, }: PaginationPageSizeProps) => ReactNode;
-export type PaginationIndexProps = Readonly<{
+/**
+ * A `Select.Root` over the page sizes, holding the `Select` parts it is given
+ * in a row. The size in effect is always on offer.
+ */
+declare const PaginationPageSize: ({ render, className, ref, ...props }: PaginationPageSizeProps) => ReactNode;
+export type PaginationIndexProps = Omit<useRender.ComponentProps<"span">, "children"> & Readonly<{
     /** What the index says, such as `Page 3 of 12`, from where the list stands. */
     label: (page: PaginationPage) => string;
 }>;
-declare const PaginationIndex: ({ label, }: PaginationIndexProps) => ReactNode;
-export type PaginationControlsProps = Readonly<{
+/** 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;
+}>;
+/** Goes to the first page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+declare const PaginationFirst: (props: PaginationStepProps) => ReactNode;
+/** Goes back a page; marked `aria-disabled`, and kept in the tab order, on the first page. */
+declare const PaginationPrevious: (props: PaginationStepProps) => ReactNode;
+/** Goes on a page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+declare const PaginationNext: (props: PaginationStepProps) => ReactNode;
+/** Goes to the last page; marked `aria-disabled`, and kept in the tab order, on the last page. */
+declare const PaginationLast: (props: PaginationStepProps) => ReactNode;
+/** The step buttons' names and glyphs. */
+export type PaginationStepLabels = Readonly<{
     /** The first-page button's name, such as "First page". */
     firstLabel: string;
     /** The previous-page button's name, such as "Previous page". */
@@ -29,32 +51,69 @@ export type PaginationControlsProps = Readonly<{
     nextLabel: string;
     /** The last-page button's name, such as "Last page". */
     lastLabel: string;
+    /** The first-page button's glyph. */
+    firstIcon: ReactNode;
+    /** The previous-page button's glyph. */
+    previousIcon: ReactNode;
+    /** The next-page button's glyph. */
+    nextIcon: ReactNode;
+    /** 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;
+/** 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". */
+    pageSizeLabel: string;
+    /** What the index says, such as `Page 3 of 12`, from where the list stands. */
+    indexLabel: (page: PaginationPage) => string;
+    /** The mark beside the page size in effect, in the open list. */
+    checkIcon: ReactNode;
+    /** The chevron after the page size. Left out, none shows. */
+    expandIcon?: ReactNode;
 }>;
-declare const PaginationControls: ({ firstLabel, previousLabel, nextLabel, lastLabel, }: PaginationControlsProps) => ReactNode;
-/** The parts of a pagination. */
-export type PaginationParts = Readonly<{
+export type PaginationProps = Omit<PaginationRootProps, "children"> & PaginationContentProps;
+/** The page size, the index and the four step buttons, in a `Root`. */
+declare const Prefab: ({ pageSizeLabel, indexLabel, checkIcon, expandIcon, firstLabel, previousLabel, nextLabel, lastLabel, firstIcon, previousIcon, nextIcon, lastIcon, ...props }: PaginationProps) => ReactNode;
+/** The parts of a pagination, hanging off its prefab. */
+export type PaginationParts = typeof Prefab & Readonly<{
     Root: typeof PaginationRoot;
     PageSize: typeof PaginationPageSize;
     Index: typeof PaginationIndex;
     Controls: typeof PaginationControls;
+    First: typeof PaginationFirst;
+    Previous: typeof PaginationPrevious;
+    Next: typeof PaginationNext;
+    Last: typeof PaginationLast;
 }>;
 /**
- * The pager for a paged list, over any source: `Root` holds where the list
- * stands, `PageSize` picks rows per page, `Index` says which page is on screen
- * and `Controls` go to the first, previous, next and last page. Leave out the
- * parts a list has no room for.
+ * 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.
  *
  * @example
- * <Pagination.Root
+ * <Pagination
  * 	pageIndex={pageIndex}
  * 	pageCount={pageCount}
  * 	pageSize={pageSize}
  * 	pageSizes={[10, 20, 50]}
  * 	onPageIndexChange={setPageIndex}
- * 	onPageSizeChange={setPageSize}>
- * 	<Pagination.PageSize label="Rows per page" />
- * 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
- * 	<Pagination.Controls firstLabel="First page" previousLabel="Previous page" nextLabel="Next page" lastLabel="Last page" />
- * </Pagination.Root>
+ * 	onPageSizeChange={setPageSize}
+ * 	pageSizeLabel="Rows per page"
+ * 	indexLabel={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`}
+ * 	firstLabel="First page"
+ * 	previousLabel="Previous page"
+ * 	nextLabel="Next page"
+ * 	lastLabel="Last page"
+ * 	firstIcon={<FirstPageIcon />}
+ * 	previousIcon={<ChevronLeftIcon />}
+ * 	nextIcon={<ChevronRightIcon />}
+ * 	lastIcon={<LastPageIcon />}
+ * 	checkIcon={<CheckIcon />}
+ * />
  */
 export declare const Pagination: PaginationParts;