@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,80 @@
+import { OtpInput } from "./otp-input.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/otp-field/otp-field.tsx
+/**
+* A labelled one-time-code field: label, a row of character slots, then the
+* description and error. Assembled from `OtpInput`'s parts.
+*
+* @example
+* <OtpField
+* 	label="Verification code"
+* 	optionalLabel="optional"
+* 	slotLabel={(index, total) => `character ${index} of ${total}`}
+* 	value={code}
+* 	onValueChange={setCode}
+* 	length={6}
+* />
+*/
+var OtpField = (t0) => {
+	const $ = c(17);
+	let description;
+	let label;
+	let rootProps;
+	let slotLabel;
+	if ($[0] !== t0) {
+		({label, description, slotLabel, ...rootProps} = t0);
+		$[0] = t0;
+		$[1] = description;
+		$[2] = label;
+		$[3] = rootProps;
+		$[4] = slotLabel;
+	} else {
+		description = $[1];
+		label = $[2];
+		rootProps = $[3];
+		slotLabel = $[4];
+	}
+	let t1;
+	if ($[5] !== label) {
+		t1 = /* @__PURE__ */ jsx(OtpInput.Label, { children: label });
+		$[5] = label;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== slotLabel) {
+		t2 = /* @__PURE__ */ jsx(OtpInput.Group, { children: /* @__PURE__ */ jsx(OtpInput.Slots, { slotLabel }) });
+		$[7] = slotLabel;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== description) {
+		t3 = /* @__PURE__ */ jsx(OtpInput.Description, { children: description });
+		$[9] = description;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(OtpInput.Error, {});
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== rootProps || $[13] !== t1 || $[14] !== t2 || $[15] !== t3) {
+		t5 = /* @__PURE__ */ jsxs(OtpInput.Root, {
+			...rootProps,
+			children: [
+				t1,
+				t2,
+				t3,
+				t4
+			]
+		});
+		$[12] = rootProps;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+};
+export { OtpField };

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

@@ -0,0 +1,12 @@
+import './otp-field.css';// src/components/otp-field/otp-field.module.scss
+var root = "_root_2oqhv_3";
+var group = "_group_2oqhv_6";
+var slot = "_slot_2oqhv_12";
+var separator = "_separator_2oqhv_86";
+var otp_field_module_default = {
+	root,
+	group,
+	slot,
+	separator
+};
+export { otp_field_module_default as default, group, root, separator, slot };

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

@@ -0,0 +1,30 @@
+import type { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { type Context } from "react";
+import type { FieldState } from "../field/index.ts";
+/** The behavioural props a caller hands `Root`, which `Group` passes on to base-ui. */
+export type OtpInputBaseProps = Pick<BaseOTPField.Root.Props, "onValueComplete" | "validationType" | "mask" | "autoSubmit" | "disabled" | "readOnly" | "name" | "id" | "onBlur">;
+/** What an OTP input's `Root` hands its parts. */
+export type OtpInputContextValue = Readonly<{
+    /** Projected by `Root`; every part reads it, none of them own it. */
+    state: FieldState;
+    /** The errors `Root` was given, which `Error` renders. */
+    errors: unknown;
+    /** The word an optional field's label trails. */
+    optionalLabel: string;
+    length: number;
+    base: OtpInputBaseProps & Readonly<{
+        value: string;
+        onValueChange: (value: string) => void;
+        length: number;
+    }>;
+}>;
+/** The context an OTP input's `Root` provides. */
+export declare const OtpInputContext: Context<OtpInputContextValue | null>;
+/**
+ * The surrounding OTP input's projected state and slot count.
+ *
+ * @example
+ * const { length } = useOtpInputContext();
+ */
+export declare const useOtpInputContext: () => OtpInputContextValue;
+//# sourceMappingURL=otp-input-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-context.d.ts","sourceRoot":"","sources":["../../../src/components/otp-field/otp-input-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,IAAI,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,uFAAuF;AACvF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CACnC,YAAY,CAAC,IAAI,CAAC,KAAK,EACrB,iBAAiB,GACjB,gBAAgB,GAChB,MAAM,GACN,YAAY,GACZ,UAAU,GACV,UAAU,GACV,MAAM,GACN,IAAI,GACJ,QAAQ,CACV,CAAC;AAEF,kDAAkD;AAClD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,qEAAqE;IACrE,KAAK,EAAE,UAAU,CAAC;IAClB,0DAA0D;IAC1D,MAAM,EAAE,OAAO,CAAC;IAChB,iDAAiD;IACjD,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,GACtB,QAAQ,CAAC;QACR,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QACvC,MAAM,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;CACJ,CAAC,CAAC;AAEH,kDAAkD;AAClD,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,oBAAoB,GAAG,IAAI,CAChB,CAAC;AAElD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,QAC1B,oBAIF,CAAC"}

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

@@ -0,0 +1,15 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/otp-field/otp-input-context.ts
+/** The context an OTP input's `Root` provides. */
+var OtpInputContext = createContext(null);
+/**
+* The surrounding OTP input's projected state and slot count.
+*
+* @example
+* const { length } = useOtpInputContext();
+*/
+var useOtpInputContext = () => {
+	return useRequiredContext(OtpInputContext, "OTP input parts must be rendered within <OtpInput.Root>.");
+};
+export { OtpInputContext, useOtpInputContext };

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

@@ -0,0 +1,74 @@
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import type { ReactNode } from "react";
+import { Field, type FieldErrorProps, type FieldLabelProps, type FieldProps, type FieldState } from "../field/index.ts";
+import { type OtpInputBaseProps } from "./otp-input-context.ts";
+export type { OtpInputBaseProps };
+export type OtpInputRootProps = Omit<FieldProps, "label" | "description"> & OtpInputBaseProps & Readonly<{
+    value: string;
+    onValueChange: (value: string) => void;
+    /** Number of character slots. @default 6 */
+    length?: number;
+    /** States no prop here owns, projected over the ones that do. */
+    state?: FieldState;
+    className?: string;
+    children?: ReactNode;
+}>;
+declare const OtpInputRoot: ({ length, requiredness, optionalLabel, errors, dirty, touched, pending, state, className, children, ...base }: OtpInputRootProps) => ReactNode;
+export type OtpInputLabelProps = Omit<FieldLabelProps, "requiredness" | "optionalLabel">;
+declare const OtpInputLabel: ({ children, ...props }: OtpInputLabelProps) => ReactNode;
+export type OtpInputGroupProps = Omit<BaseOTPField.Root.Props, keyof OtpInputBaseProps | "className" | "value" | "defaultValue" | "onValueChange" | "length"> & Readonly<{
+    className?: string;
+}>;
+declare const OtpInputGroup: ({ className, ...props }: OtpInputGroupProps) => ReactNode;
+export type OtpInputInputProps = Omit<BaseOTPField.Input.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+declare const OtpInputInput: ({ className, ...props }: OtpInputInputProps) => ReactNode;
+export type OtpInputSeparatorProps = Omit<BaseOTPField.Separator.Props, "className"> & Readonly<{
+    className?: string;
+}>;
+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;
+export type OtpInputSlotsProps = Readonly<{
+    /** Names a slot past the first by its 1-based position, such as "character 2 of 6". */
+    slotLabel: OtpSlotLabel;
+}>;
+/**
+ * Every slot of the input: the first takes its name from the field's label, the
+ * rest are named by `slotLabel`.
+ *
+ * @example
+ * <OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
+ */
+declare const OtpInputSlots: ({ slotLabel, }: OtpInputSlotsProps) => ReactNode;
+export type OtpInputErrorProps = Omit<FieldErrorProps, "children">;
+declare const OtpInputError: (props: OtpInputErrorProps) => ReactNode;
+/** The parts of an OTP input. */
+export type OtpInputParts = Readonly<{
+    Root: typeof OtpInputRoot;
+    Label: typeof OtpInputLabel;
+    Group: typeof OtpInputGroup;
+    Slots: typeof OtpInputSlots;
+    Input: typeof OtpInputInput;
+    Separator: typeof OtpInputSeparator;
+    Description: typeof Field.Description;
+    Error: typeof OtpInputError;
+}>;
+/**
+ * The parts of a one-time-code input: the field frame, a group of character
+ * slots, and the slots themselves. For the ordinary case, use the `OtpField`
+ * shorthand, which is assembled from exactly these parts. `Error` renders the
+ * errors `Root` was given.
+ *
+ * @example
+ * <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">
+ * 	<OtpInput.Label>Verification code</OtpInput.Label>
+ * 	<OtpInput.Group>
+ * 		<OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
+ * 	</OtpInput.Group>
+ * 	<OtpInput.Error />
+ * </OtpInput.Root>
+ */
+export declare const OtpInput: OtpInputParts;
+//# sourceMappingURL=otp-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/components/otp-field/otp-input.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,297 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { useBusyPhase } from "../../lib/hooks/use-busy-phase.js";
+import { Field } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus, withFieldFocus } from "../field/use-field-focus.js";
+import { useFormDisabled } from "../form/form-context.js";
+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 { OTPField } from "@base-ui/react/otp-field";
+// src/components/otp-field/otp-input.tsx
+var DEFAULT_LENGTH = 6;
+var OtpInputRoot = (t0) => {
+	const $ = c(15);
+	const { length: t1, requiredness, optionalLabel, errors, dirty, touched, pending: t2, state, className, children, ...base } = t0;
+	const length = t1 === void 0 ? DEFAULT_LENGTH : t1;
+	const pending = t2 === void 0 ? false : t2;
+	const formDisabled = useFormDisabled();
+	let t3;
+	if ($[0] !== pending) {
+		t3 = { busy: pending };
+		$[0] = pending;
+		$[1] = t3;
+	} else t3 = $[1];
+	const phase = useBusyPhase(t3);
+	let t4;
+	if ($[2] !== errors) {
+		t4 = normalizeFieldErrors(errors);
+		$[2] = errors;
+		$[3] = t4;
+	} else t4 = $[3];
+	const invalid = t4.length > 0;
+	const fieldState = {
+		disabled: base.disabled === true || formDisabled,
+		readonly: base.readOnly,
+		requiredness,
+		invalid,
+		dirty,
+		touched,
+		filled: base.value !== "",
+		pending: phase !== "fresh",
+		...state
+	};
+	const t5 = Field;
+	const t6 = base.disabled;
+	let t7;
+	if ($[4] !== className) {
+		t7 = clsx(otp_field_module_default.root, className);
+		$[4] = className;
+		$[5] = t7;
+	} else t7 = $[5];
+	const t8 = fieldStateAttributes(fieldState);
+	let t9;
+	if ($[6] !== base || $[7] !== children || $[8] !== dirty || $[9] !== invalid || $[10] !== t5.Root || $[11] !== t7 || $[12] !== t8 || $[13] !== touched) {
+		t9 = /* @__PURE__ */ jsx(t5.Root, {
+			disabled: t6,
+			invalid,
+			dirty,
+			touched,
+			className: t7,
+			...t8,
+			children
+		});
+		$[6] = base;
+		$[7] = children;
+		$[8] = dirty;
+		$[9] = invalid;
+		$[10] = t5.Root;
+		$[11] = t7;
+		$[12] = t8;
+		$[13] = touched;
+		$[14] = t9;
+	} else t9 = $[14];
+	return /* @__PURE__ */ jsx(OtpInputContext, {
+		value: {
+			state: fieldState,
+			errors,
+			optionalLabel,
+			length,
+			base: {
+				...base,
+				length
+			}
+		},
+		children: t9
+	});
+};
+var OtpInputLabel = (t0) => {
+	const $ = c(8);
+	let children;
+	let props;
+	if ($[0] !== t0) {
+		({children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+	} else {
+		children = $[1];
+		props = $[2];
+	}
+	const { state, optionalLabel } = useOtpInputContext();
+	let t1;
+	if ($[3] !== children || $[4] !== optionalLabel || $[5] !== props || $[6] !== state.requiredness) {
+		t1 = /* @__PURE__ */ jsx(Field.Label, {
+			requiredness: state.requiredness,
+			optionalLabel,
+			...props,
+			children
+		});
+		$[3] = children;
+		$[4] = optionalLabel;
+		$[5] = props;
+		$[6] = state.requiredness;
+		$[7] = t1;
+	} else t1 = $[7];
+	return t1;
+};
+var OtpInputGroup = (t0) => {
+	const $ = c(12);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { state, base } = useOtpInputContext();
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(otp_field_module_default.group, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== state) {
+		t2 = fieldStateAttributes(state);
+		$[5] = state;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== base || $[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ jsx(OTPField.Root, {
+			...base,
+			className: t1,
+			...t2,
+			...props
+		});
+		$[7] = base;
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
+};
+var OtpInputInput = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const { state } = useOtpInputContext();
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(otp_field_module_default.slot, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== focus || $[6] !== state) {
+		t2 = fieldStateAttributes(withFieldFocus(state, focus));
+		$[5] = focus;
+		$[6] = state;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(OTPField.Input, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props
+		});
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+};
+var OtpInputSeparator = (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 ($[3] !== className) {
+		t1 = clsx(otp_field_module_default.separator, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(OTPField.Separator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* Every slot of the input: the first takes its name from the field's label, the
+* rest are named by `slotLabel`.
+*
+* @example
+* <OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
+*/
+var OtpInputSlots = (t0) => {
+	const $ = c(3);
+	const { slotLabel } = t0;
+	const { length } = useOtpInputContext();
+	let t1;
+	if ($[0] !== length || $[1] !== slotLabel) {
+		t1 = Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(OtpInputInput, { "aria-label": index === 0 ? void 0 : slotLabel(index + 1, length) }, index));
+		$[0] = length;
+		$[1] = slotLabel;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+var OtpInputError = (props) => {
+	const $ = c(3);
+	const { errors } = useOtpInputContext();
+	let t0;
+	if ($[0] !== errors || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(Field.Error, {
+			...props,
+			children: errors
+		});
+		$[0] = errors;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+};
+/**
+* The parts of a one-time-code input: the field frame, a group of character
+* slots, and the slots themselves. For the ordinary case, use the `OtpField`
+* shorthand, which is assembled from exactly these parts. `Error` renders the
+* errors `Root` was given.
+*
+* @example
+* <OtpInput.Root value={code} onValueChange={setCode} optionalLabel="optional">
+* 	<OtpInput.Label>Verification code</OtpInput.Label>
+* 	<OtpInput.Group>
+* 		<OtpInput.Slots slotLabel={(index, total) => `character ${index} of ${total}`} />
+* 	</OtpInput.Group>
+* 	<OtpInput.Error />
+* </OtpInput.Root>
+*/
+var OtpInput = {
+	Root: OtpInputRoot,
+	Label: OtpInputLabel,
+	Group: OtpInputGroup,
+	Slots: OtpInputSlots,
+	Input: OtpInputInput,
+	Separator: OtpInputSeparator,
+	Description: Field.Description,
+	Error: OtpInputError
+};
+export { OtpInput };

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

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type OtpFieldProps } from "./otp-field.tsx";
+export type TSFOtpFieldProps = Omit<OtpFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange">;
+/**
+ * `OtpField` bound to the TanStack Form field it renders in. Registered as
+ * `field.OtpField`.
+ *
+ * @example
+ * <form.AppField name="code">
+ * 	{field => <field.OtpField label="Verification code" optionalLabel="optional" slotLabel={(index, total) => `character ${index} of ${total}`} />}
+ * </form.AppField>
+ */
+export declare const TSFOtpField: (props: TSFOtpFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-otp-field.d.ts.map

package/dist/components/otp-field/tsf-otp-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-otp-field.d.ts","sourceRoot":"","sources":["../../../src/components/otp-field/tsf-otp-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,aAAa,EAClB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAClC,aAAa,EACb,MAAM,mBAAmB,GAAG,OAAO,GAAG,eAAe,CACrD,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,UAChB,gBAAgB,KACrB,SAWF,CAAC"}

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

@@ -0,0 +1,34 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { OtpField } from "./otp-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/otp-field/tsf-otp-field.tsx
+/**
+* `OtpField` bound to the TanStack Form field it renders in. Registered as
+* `field.OtpField`.
+*
+* @example
+* <form.AppField name="code">
+* 	{field => <field.OtpField label="Verification code" optionalLabel="optional" slotLabel={(index, total) => `character ${index} of ${total}`} />}
+* </form.AppField>
+*/
+var TSFOtpField = (props) => {
+	const $ = c(5);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== connected || $[1] !== field.handleChange || $[2] !== field.state.value || $[3] !== props) {
+		t0 = /* @__PURE__ */ jsx(OtpField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: field.handleChange
+		});
+		$[0] = connected;
+		$[1] = field.handleChange;
+		$[2] = field.state.value;
+		$[3] = props;
+		$[4] = t0;
+	} else t0 = $[4];
+	return t0;
+};
+export { TSFOtpField };

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

@@ -0,0 +1,2 @@
+export * from "./pagination.tsx";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/pagination/index.js

@@ -0,0 +1 @@
+export { Pagination } from "./pagination.js";

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

@@ -0,0 +1,24 @@
+import { type Context } from "react";
+/** Where a paged list stands: the page on screen, how many there are, and how many rows each holds. */
+export type PaginationPage = Readonly<{
+    /** The page on screen, counted from 0. */
+    pageIndex: number;
+    /** How many pages there are. */
+    pageCount: number;
+    /** How many rows a page holds. */
+    pageSize: number;
+}>;
+export type PaginationContextValue = PaginationPage & Readonly<{
+    pageSizes: readonly number[];
+    onPageIndexChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}>;
+export declare const PaginationContext: Context<PaginationContextValue | null>;
+/**
+ * Where the enclosing `Pagination.Root` stands, and its change handlers.
+ *
+ * @example
+ * const { pageIndex, pageCount } = usePagination();
+ */
+export declare const usePagination: () => PaginationContextValue;
+//# sourceMappingURL=pagination-context.d.ts.map

package/dist/components/pagination/pagination-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-context.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,OAAO,EAAiB,MAAM,OAAO,CAAC;AAGpD,uGAAuG;AACvG,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,gCAAgC;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;CACjB,CAAC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,cAAc,GAClD,QAAQ,CAAC;IACR,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,iBAAiB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C,CAAC,CAAC;AAEJ,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,GAAG,IAAI,CAClB,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,aAAa,QAAO,sBAI/B,CAAC"}

package/dist/components/pagination/pagination-context.js

@@ -0,0 +1,14 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/pagination/pagination-context.ts
+var PaginationContext = createContext(null);
+/**
+* Where the enclosing `Pagination.Root` stands, and its change handlers.
+*
+* @example
+* const { pageIndex, pageCount } = usePagination();
+*/
+var usePagination = () => {
+	return useRequiredContext(PaginationContext, "The Pagination parts must be used within a <Pagination.Root>.");
+};
+export { PaginationContext, usePagination };

package/dist/components/pagination/pagination.css

@@ -0,0 +1,24 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_ovje6_3 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--pagination-gap, var(--sys-unit-8));
+  }
+  ._pageSize_ovje6_9 {
+    display: flex;
+    align-items: center;
+    gap: var(--pagination-page-size-gap, var(--sys-unit-4));
+  }
+  ._index_ovje6_14 {
+    color: var(--pagination-index-fg, var(--sys-color-text));
+    font: var(--pagination-index-font, var(--sys-font-body-medium));
+    font-variant-numeric: tabular-nums;
+  }
+  ._controls_ovje6_19 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--pagination-controls-gap, var(--sys-unit-2));
+  }
+}