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

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

@@ -0,0 +1,34 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { NumberField } from "./number-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/number-field/tsf-number-field.tsx
+/**
+* `NumberField` bound to the TanStack Form field it renders in, whose value is
+* a `number | null`. Registered as `field.NumberField`.
+*
+* @example
+* <form.AppField name="hours">
+* 	{field => <field.NumberField label="Hours" optionalLabel="optional" decrementLabel="Decrease" incrementLabel="Increase" roleDescription="Number field" />}
+* </form.AppField>
+*/
+var TSFNumberField = (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(NumberField, {
+			...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 { TSFNumberField };

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

@@ -0,0 +1,3 @@
+export * from "./otp-field.tsx";
+export * from "./otp-input.tsx";
+export * from "./tsf-otp-field.tsx";

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

@@ -0,0 +1,4 @@
+import { OtpField } from "./otp-field.js";
+import { OtpInput } from "./otp-input.js";
+import { TSFOtpField } from "./tsf-otp-field.js";
+export { OtpField, OtpInput, TSFOtpField };

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

@@ -0,0 +1,97 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_8k2z3_3 {
+    min-inline-size: 0;
+  }
+  ._group_8k2z3_6 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--otp-field-gap, var(--sys-unit-4));
+    align-items: center;
+  }
+  ._slot_8k2z3_12 {
+    --field-fg: var(--sys-color-text);
+    --field-muted-fg: var(--sys-color-text-muted);
+    --field-placeholder-fg: var(--sys-color-text-placeholder);
+    align-items: center;
+    box-sizing: border-box;
+    min-block-size: calc(1lh + 2 * var(--sys-unit-6) + 2 * 1px);
+    border: 1px solid var(--sys-color-border);
+    border-radius: var(--sys-radius-sm);
+    background: var(--sys-color-surface);
+    padding: var(--sys-unit-6);
+    color: var(--field-fg);
+    font: var(--sys-font-body-medium);
+  }
+  ._slot_8k2z3_12 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._slot_8k2z3_12[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._slot_8k2z3_12 {
+      transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._slot_8k2z3_12:hover:not([data-disabled], [data-readonly]), ._slot_8k2z3_12[data-focused], ._slot_8k2z3_12[data-popup-open] {
+    border-color: var(--sys-color-primary);
+  }
+  ._slot_8k2z3_12[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._slot_8k2z3_12[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._slot_8k2z3_12[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    --field-placeholder-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+  }
+  ._slot_8k2z3_12[data-disabled] {
+    --field-fg: var(--sys-color-disabled-fg);
+    --field-muted-fg: var(--sys-color-disabled-fg);
+    --field-placeholder-fg: var(--sys-color-disabled-fg);
+    color: var(--sys-color-disabled-fg);
+    cursor: not-allowed;
+    background: var(--sys-color-disabled-bg);
+  }
+  ._slot_8k2z3_12::-webkit-search-cancel-button {
+    display: none;
+    appearance: none;
+  }
+  ._slot_8k2z3_12::-webkit-search-decoration {
+    display: none;
+    appearance: none;
+  }
+  ._slot_8k2z3_12 {
+    display: inline-flex;
+  }
+  ._slot_8k2z3_12::placeholder {
+    color: var(--field-placeholder-fg);
+  }
+  ._slot_8k2z3_12 {
+    justify-content: center;
+    inline-size: var(--otp-field-slot-size, var(--sys-unit-24));
+    min-block-size: var(--otp-field-slot-size, var(--sys-unit-24));
+    padding-inline: 0;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    cursor: text;
+    line-height: normal;
+  }
+  ._separator_8k2z3_92 {
+    inline-size: var(--sys-unit-8);
+    block-size: 1px;
+    background: var(--otp-field-separator-bg, var(--sys-color-border));
+  }
+}

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import type { FieldProps } from "../field/index.ts";
+import { type OtpInputRootProps, type OtpSlotLabel } from "./otp-input.tsx";
+export type OtpFieldProps = FieldProps & Omit<OtpInputRootProps, keyof FieldProps | "children"> & Readonly<{
+    /** Names a slot past the first by its 1-based position, such as "character 2 of 6". */
+    slotLabel: OtpSlotLabel;
+}>;
+/**
+ * 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}
+ * />
+ */
+export declare const OtpField: ({ label, description, slotLabel, ...rootProps }: OtpFieldProps) => ReactNode;

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

@@ -0,0 +1,91 @@
+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(20);
+	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.Slots, { slotLabel });
+		$[7] = slotLabel;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(OtpInput.Pending, {});
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== t2) {
+		t4 = /* @__PURE__ */ jsxs(OtpInput.Group, { children: [t2, t3] });
+		$[10] = t2;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== description) {
+		t5 = /* @__PURE__ */ jsx(OtpInput.Description, { children: description });
+		$[12] = description;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(OtpInput.Error, {});
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== rootProps || $[16] !== t1 || $[17] !== t4 || $[18] !== t5) {
+		t7 = /* @__PURE__ */ jsxs(OtpInput.Root, {
+			...rootProps,
+			children: [
+				t1,
+				t4,
+				t5,
+				t6
+			]
+		});
+		$[15] = rootProps;
+		$[16] = t1;
+		$[17] = t4;
+		$[18] = t5;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+};
+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_8k2z3_3";
+var group = "_group_8k2z3_6";
+var slot = "_slot_8k2z3_12";
+var separator = "_separator_8k2z3_92";
+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,27 @@
+import type { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import { type Context } from "react";
+import type { FieldBlurHandler, 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"> & Readonly<{
+    onBlur?: FieldBlurHandler;
+}>;
+/** 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;
+    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;

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,76 @@
+import { OTPField as BaseOTPField } from "@base-ui/react/otp-field";
+import type { ReactNode } from "react";
+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<{
+    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 = InputLabelProps;
+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 OtpInputPendingProps = InputPendingProps;
+export type OtpInputErrorProps = InputErrorProps;
+/** The parts of an OTP input. */
+export type OtpInputParts = Readonly<{
+    Root: typeof OtpInputRoot;
+    Label: typeof InputLabel;
+    Group: typeof OtpInputGroup;
+    Slots: typeof OtpInputSlots;
+    Input: typeof OtpInputInput;
+    Separator: typeof OtpInputSeparator;
+    Pending: typeof InputPending;
+    Description: typeof Field.Description;
+    Error: typeof InputError;
+}>;
+/**
+ * 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. `Pending` shows once
+ * the `Root`'s wait is worth showing, and `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.Pending />
+ * 	</OtpInput.Group>
+ * 	<OtpInput.Error />
+ * </OtpInput.Root>
+ */
+export declare const OtpInput: OtpInputParts;