@stridge/noctis 1.0.0-beta.0

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

@@ -0,0 +1,187 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { MinusIcon, PlusIcon } from "../../icons/glyphs.js";
+import { Button } from "../button/button.js";
+import { NumberField as NumberField$1 } from "../../primitives/number-field/number-field.js";
+import { NumberFieldProvider, useNumberFieldContext } from "./number-field.context.js";
+import { NUMBER_FIELD_SLOTS } from "./number-field.slots.js";
+import { decrementProps, groupProps, incrementProps, inputProps, prefixProps, rootProps, scrubAreaCursorProps, scrubAreaProps, suffixProps } from "./number-field.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/number-field/number-field.tsx
+/** The icon size that pairs with each field size — the stepper glyph scales with the control. */
+const GLYPH_SIZE = {
+	md: "sm",
+	lg: "sm"
+};
+/**
+* Owns the numeric value and shares the control `size` with the field's parts. Works controlled
+* (`value` + `onValueChange`) or uncontrolled (`defaultValue`). The wrapped primitive auto-injects the
+* active locale (so the value formats for the reader — Persian numerals under `fa`, grouping per
+* locale) and the translated assistive labels; pass `locale` or `labels` to override. Compose
+* `NumberField.Group` holding the `NumberField.Input` and the `NumberField.Decrement` /
+* `NumberField.Increment` steppers.
+*/
+function NumberFieldRoot({ size = "md", steppers = "end", className, children, ...props }) {
+	return /* @__PURE__ */ jsx(NumberField$1.Root, {
+		"data-slot": NUMBER_FIELD_SLOTS.root,
+		"data-size": size,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(NumberFieldProvider, {
+			value: {
+				size,
+				steppers
+			},
+			children
+		})
+	});
+}
+/**
+* The bordered field shell wrapping the input, affixes, and steppers — wears the field look and carries
+* the stepper layout (`data-steppers`) the CSS branches off, inherited from the root's `steppers`.
+*/
+function NumberFieldGroup({ className, ...props }) {
+	const { steppers } = useNumberFieldContext("Group");
+	return /* @__PURE__ */ jsx(NumberField$1.Group, {
+		"data-slot": NUMBER_FIELD_SLOTS.group,
+		"data-steppers": steppers,
+		className,
+		...props
+	});
+}
+/** The numeric input — borderless inside the shell, carrying the field type and derived mobile keypad. */
+function NumberFieldInput({ className, ...props }) {
+	useNumberFieldContext("Input");
+	return /* @__PURE__ */ jsx(NumberField$1.Input, {
+		"data-slot": NUMBER_FIELD_SLOTS.input,
+		className,
+		...props
+	});
+}
+/**
+* A leading affix — a quiet, non-interactive unit hint (`$`, `€`) seated inside the shell before the
+* value. Visual chrome only: it never changes the committed value (that is `format`'s job).
+*/
+function NumberFieldPrefix({ className, ...props }) {
+	useNumberFieldContext("Prefix");
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": NUMBER_FIELD_SLOTS.prefix,
+		className,
+		...props
+	});
+}
+/**
+* A trailing affix — a quiet, non-interactive unit hint (`px`, `kg`, `%`) seated inside the shell after
+* the value. Visual chrome only: it never changes the committed value (that is `format`'s job).
+*/
+function NumberFieldSuffix({ className, ...props }) {
+	useNumberFieldContext("Suffix");
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": NUMBER_FIELD_SLOTS.suffix,
+		className,
+		...props
+	});
+}
+/**
+* The up stepper — a ghost icon button whose placement follows the `steppers` layout. Defaults to a plus
+* glyph; pass `children` to replace it. The accessible name comes from the translated `increase` label.
+*/
+function NumberFieldIncrement({ className, children, ...props }) {
+	const { size } = useNumberFieldContext("Increment");
+	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
+		...Button.props({
+			variant: "ghost",
+			iconOnly: true
+		}),
+		"data-slot": NUMBER_FIELD_SLOTS.increment,
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: PlusIcon,
+			size: GLYPH_SIZE[size]
+		})
+	});
+}
+/**
+* The down stepper — a ghost icon button whose placement follows the `steppers` layout. Defaults to a
+* minus glyph; pass `children` to replace it. The accessible name comes from the translated `decrease` label.
+*/
+function NumberFieldDecrement({ className, children, ...props }) {
+	const { size } = useNumberFieldContext("Decrement");
+	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
+		...Button.props({
+			variant: "ghost",
+			iconOnly: true
+		}),
+		"data-slot": NUMBER_FIELD_SLOTS.decrement,
+		className,
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: MinusIcon,
+			size: GLYPH_SIZE[size]
+		})
+	});
+}
+/**
+* A draggable region that scrubs the value by horizontal pointer movement — wrap a label or icon to make
+* it the drag handle. Pointer-precision is opt-in via Base UI's `pixelSensitivity` / `direction`.
+*/
+function NumberFieldScrubArea({ className, ...props }) {
+	useNumberFieldContext("ScrubArea");
+	return /* @__PURE__ */ jsx(NumberField$1.ScrubArea, {
+		"data-slot": NUMBER_FIELD_SLOTS.scrubArea,
+		className,
+		...props
+	});
+}
+/**
+* The virtual cursor that follows the pointer while scrubbing — a small inverse block (the Resolve/Figma
+* feel). Render it inside a `NumberField.ScrubArea`; Base UI shows it only during the drag and tracks the
+* pointer 1:1. Pair with `pixelSensitivity` on the scrub area to tune the drag-to-value ratio.
+*/
+function NumberFieldScrubAreaCursor({ className, ...props }) {
+	useNumberFieldContext("ScrubAreaCursor");
+	return /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
+		"data-slot": NUMBER_FIELD_SLOTS.scrubAreaCursor,
+		className,
+		...props
+	});
+}
+/**
+* A numeric input with stepper buttons, keyboard arrows, and pointer scrubbing, built on Base UI's
+* NumberField. The field shell wears the field look (`bg-field` / `border-field`, focus ring on the
+* shell), the input is borderless inside it, and the steppers are ghost icon buttons that compose the
+* {@link Button} look. The wrapper injects the active locale (so the value formats for the reader) and
+* translates the steppers' and input's assistive text; per-instance `labels` / `aria-label` always win.
+* Two sizes (`md` / `lg`) share the control rhythm. RTL-aware and respects `prefers-reduced-motion`.
+*
+* Compose from parts: `NumberField.Root` owns the value, the shared `size`, and the `steppers` layout
+* (`end` by default — a horizontal −/+ pair at the inline end; `split` flanks the value; `stacked` blocks
+* them in a column; `none` drops them). `NumberField.Group` is the bordered shell holding the optional `NumberField.Prefix` /
+* `NumberField.Suffix` affixes, the `NumberField.Input`, and the `NumberField.Decrement` /
+* `NumberField.Increment` steppers. The runtime compound is a plain object (kept tree-shakeable);
+* per-part prop and state types are exposed through the matching `NumberField` namespace —
+* e.g. `NumberField.Input.Props`.
+*/
+const NumberField = {
+	/** Owns the value, the shared size, and the stepper layout. `NumberField.Root.props({ size })` → its spreadable prop bag. */
+	Root: Object.assign(NumberFieldRoot, { props: rootProps }),
+	/** The bordered field shell. `NumberField.Group.props({ steppers })` → its spreadable prop bag. */
+	Group: Object.assign(NumberFieldGroup, { props: groupProps }),
+	/** The numeric input. `NumberField.Input.props()` → its spreadable prop bag. */
+	Input: Object.assign(NumberFieldInput, { props: inputProps }),
+	/** A leading unit-hint affix. `NumberField.Prefix.props()` → its spreadable prop bag. */
+	Prefix: Object.assign(NumberFieldPrefix, { props: prefixProps }),
+	/** A trailing unit-hint affix. `NumberField.Suffix.props()` → its spreadable prop bag. */
+	Suffix: Object.assign(NumberFieldSuffix, { props: suffixProps }),
+	/** The down stepper. `NumberField.Decrement.props()` → its spreadable prop bag. */
+	Decrement: Object.assign(NumberFieldDecrement, { props: decrementProps }),
+	/** The up stepper. `NumberField.Increment.props()` → its spreadable prop bag. */
+	Increment: Object.assign(NumberFieldIncrement, { props: incrementProps }),
+	/** The pointer-scrub region. `NumberField.ScrubArea.props()` → its spreadable prop bag. */
+	ScrubArea: Object.assign(NumberFieldScrubArea, { props: scrubAreaProps }),
+	/** The virtual scrub cursor. `NumberField.ScrubAreaCursor.props()` → its spreadable prop bag. */
+	ScrubAreaCursor: Object.assign(NumberFieldScrubAreaCursor, { props: scrubAreaCursorProps })
+};
+//#endregion
+export { NumberField };

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

@@ -0,0 +1,66 @@
+import { NumberFieldSize, NumberFieldSteppers } from "./number-field.context.js";
+
+//#region src/components/number-field/number-field.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `NumberField.*.props()` returns. */
+type NumberFieldPartProps = {
+  /** The slot value the matching `number-field.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `NumberField.Root.props(...)` — the field's shared size, stamped on the root the CSS keys metrics off. */
+interface NumberFieldRootPropsArgs extends BasePropsArgs {
+  /** Control height and type — `md` or `lg`. @default "md" */
+  size?: NumberFieldSize;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own; look flows from the root. */
+type NumberFieldStatelessPropsArgs = BasePropsArgs;
+/** Argument to `NumberField.Group.props(...)` — the shell, carrying the stepper-layout attribute the CSS branches off. */
+interface NumberFieldGroupPropsArgs extends BasePropsArgs {
+  /** The stepper layout stamped as `data-steppers`. Omit to inherit the default (`side`). */
+  steppers?: NumberFieldSteppers;
+}
+/** Root prop bag: `data-slot` plus the `data-size` the descendant metric rules read. */
+declare function rootProps({
+  size,
+  className
+}?: NumberFieldRootPropsArgs): NumberFieldPartProps;
+/** Group prop bag: the field-shell slot anchor (the bordered input box), carrying the stepper layout. */
+declare function groupProps({
+  steppers,
+  className
+}?: NumberFieldGroupPropsArgs): NumberFieldPartProps;
+/** Input prop bag: the numeric-input slot anchor. */
+declare function inputProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** Prefix prop bag: the leading affix slot anchor (a non-interactive unit hint before the value). */
+declare function prefixProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** Suffix prop bag: the trailing affix slot anchor (a non-interactive unit hint after the value). */
+declare function suffixProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** Increment prop bag: the up-stepper slot anchor (the button look flows from the composed `Button`). */
+declare function incrementProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** Decrement prop bag: the down-stepper slot anchor (the button look flows from the composed `Button`). */
+declare function decrementProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** ScrubArea prop bag: the pointer-scrub region slot anchor. */
+declare function scrubAreaProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+/** ScrubAreaCursor prop bag: the virtual cursor shown while scrubbing. */
+declare function scrubAreaCursorProps({
+  className
+}?: NumberFieldStatelessPropsArgs): NumberFieldPartProps;
+//#endregion
+export { NumberFieldPartProps, NumberFieldRootPropsArgs, decrementProps, groupProps, incrementProps, inputProps, prefixProps, rootProps, scrubAreaCursorProps, scrubAreaProps, suffixProps };

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

@@ -0,0 +1,50 @@
+import { NUMBER_FIELD_SLOTS } from "./number-field.slots.js";
+//#region src/components/number-field/number-field.props.ts
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Root prop bag: `data-slot` plus the `data-size` the descendant metric rules read. */
+function rootProps({ size = "md", className } = {}) {
+	return withClassName({
+		"data-slot": NUMBER_FIELD_SLOTS.root,
+		"data-size": size
+	}, className);
+}
+/** Group prop bag: the field-shell slot anchor (the bordered input box), carrying the stepper layout. */
+function groupProps({ steppers, className } = {}) {
+	return withClassName({
+		"data-slot": NUMBER_FIELD_SLOTS.group,
+		...steppers ? { "data-steppers": steppers } : {}
+	}, className);
+}
+/** Input prop bag: the numeric-input slot anchor. */
+function inputProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.input }, className);
+}
+/** Prefix prop bag: the leading affix slot anchor (a non-interactive unit hint before the value). */
+function prefixProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.prefix }, className);
+}
+/** Suffix prop bag: the trailing affix slot anchor (a non-interactive unit hint after the value). */
+function suffixProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.suffix }, className);
+}
+/** Increment prop bag: the up-stepper slot anchor (the button look flows from the composed `Button`). */
+function incrementProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.increment }, className);
+}
+/** Decrement prop bag: the down-stepper slot anchor (the button look flows from the composed `Button`). */
+function decrementProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.decrement }, className);
+}
+/** ScrubArea prop bag: the pointer-scrub region slot anchor. */
+function scrubAreaProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.scrubArea }, className);
+}
+/** ScrubAreaCursor prop bag: the virtual cursor shown while scrubbing. */
+function scrubAreaCursorProps({ className } = {}) {
+	return withClassName({ "data-slot": NUMBER_FIELD_SLOTS.scrubAreaCursor }, className);
+}
+//#endregion
+export { decrementProps, groupProps, incrementProps, inputProps, prefixProps, rootProps, scrubAreaCursorProps, scrubAreaProps, suffixProps };

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

@@ -0,0 +1,31 @@
+//#region src/components/number-field/number-field.slots.d.ts
+/**
+ * The `data-*` hooks `NumberField` stamps on its parts, for host-side styling and tests. Slot values
+ * mark each rendered element; the state attributes are emitted by Base UI's NumberField — pair a slot
+ * with a state to target, say, the field shell only while it is focused. The state attributes that come
+ * from a wrapping `Field.Root` (validity, touched, dirty, filled) are read off the same elements.
+ */
+declare enum NumberFieldDataAttributes {
+  /** The slot marking a rendered element as a NumberField part. */
+  slot = "data-slot",
+  /** The size scale — `md` | `lg`; the generated layer keys the per-size internals off it. */
+  size = "data-size",
+  /** The stepper layout — `end` (default) | `split` | `stacked` | `none`; stamped on the group, the CSS branches off it. */
+  steppers = "data-steppers",
+  /** Present while the value is being scrubbed by pointer drag. */
+  scrubbing = "data-scrubbing",
+  /** Present when the number field is disabled. */
+  disabled = "data-disabled",
+  /** Present when the number field is read-only. */
+  readonly = "data-readonly",
+  /** Present when the number field is required. */
+  required = "data-required",
+  /** Present when the number field is valid (when wrapped in `Field.Root`). */
+  valid = "data-valid",
+  /** Present when the number field is invalid (when wrapped in `Field.Root`). */
+  invalid = "data-invalid",
+  /** Present when the number field is focused (when wrapped in `Field.Root`). */
+  focused = "data-focused"
+}
+//#endregion
+export { NumberFieldDataAttributes };

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

@@ -0,0 +1,48 @@
+//#region src/components/number-field/number-field.slots.ts
+/**
+* The slot vocabulary every `NumberField` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, kebab-cased `{component}[-{part}]` under the `noctis-` prefix; SLOTS.md
+* still generates from the token-graph declarations.
+*/
+const NUMBER_FIELD_SLOTS = {
+	root: "noctis-number-field",
+	group: "noctis-number-field-group",
+	input: "noctis-number-field-input",
+	prefix: "noctis-number-field-prefix",
+	suffix: "noctis-number-field-suffix",
+	increment: "noctis-number-field-increment",
+	decrement: "noctis-number-field-decrement",
+	scrubArea: "noctis-number-field-scrub-area",
+	scrubAreaCursor: "noctis-number-field-scrub-area-cursor"
+};
+/**
+* The `data-*` hooks `NumberField` stamps on its parts, for host-side styling and tests. Slot values
+* mark each rendered element; the state attributes are emitted by Base UI's NumberField — pair a slot
+* with a state to target, say, the field shell only while it is focused. The state attributes that come
+* from a wrapping `Field.Root` (validity, touched, dirty, filled) are read off the same elements.
+*/
+let NumberFieldDataAttributes = /* @__PURE__ */ function(NumberFieldDataAttributes) {
+	/** The slot marking a rendered element as a NumberField part. */
+	NumberFieldDataAttributes["slot"] = "data-slot";
+	/** The size scale — `md` | `lg`; the generated layer keys the per-size internals off it. */
+	NumberFieldDataAttributes["size"] = "data-size";
+	/** The stepper layout — `end` (default) | `split` | `stacked` | `none`; stamped on the group, the CSS branches off it. */
+	NumberFieldDataAttributes["steppers"] = "data-steppers";
+	/** Present while the value is being scrubbed by pointer drag. */
+	NumberFieldDataAttributes["scrubbing"] = "data-scrubbing";
+	/** Present when the number field is disabled. */
+	NumberFieldDataAttributes["disabled"] = "data-disabled";
+	/** Present when the number field is read-only. */
+	NumberFieldDataAttributes["readonly"] = "data-readonly";
+	/** Present when the number field is required. */
+	NumberFieldDataAttributes["required"] = "data-required";
+	/** Present when the number field is valid (when wrapped in `Field.Root`). */
+	NumberFieldDataAttributes["valid"] = "data-valid";
+	/** Present when the number field is invalid (when wrapped in `Field.Root`). */
+	NumberFieldDataAttributes["invalid"] = "data-invalid";
+	/** Present when the number field is focused (when wrapped in `Field.Root`). */
+	NumberFieldDataAttributes["focused"] = "data-focused";
+	return NumberFieldDataAttributes;
+}({});
+//#endregion
+export { NUMBER_FIELD_SLOTS, NumberFieldDataAttributes };

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

@@ -0,0 +1,3 @@
+import { OtpFieldSize } from "./otp-field.props.js";
+import { OtpField } from "./otp-field.js";
+import { OtpFieldDataAttributes } from "./otp-field.slots.js";

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

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/components/otp-field/otp-field.context.ts
+const OtpFieldContext = createContext(null);
+const OtpFieldProvider = OtpFieldContext.Provider;
+/** Read the field context, throwing a named error when a part renders outside `OtpField.Root`. */
+function useOtpFieldContext(part) {
+	const context = use(OtpFieldContext);
+	if (context === null) throw new Error(`OtpField.${part} must be rendered inside <OtpField.Root>.`);
+	return context;
+}
+//#endregion
+export { OtpFieldProvider, useOtpFieldContext };

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

@@ -0,0 +1,99 @@
+import { separator_d_exports } from "../../primitives/separator.js";
+import { otp_field_d_exports } from "../../primitives/otp-field.js";
+import { OtpFieldInputPropsArgs, OtpFieldRootPropsArgs, OtpFieldSeparatorPropsArgs, OtpFieldSize, inputProps, rootProps, separatorProps } from "./otp-field.props.js";
+import { ReactElement, ReactNode } from "react";
+
+//#region src/components/otp-field/otp-field.d.ts
+/**
+ * Owns the OTP value and shares the `size` with the cells. Works controlled (`value` +
+ * `onValueChange`) or uncontrolled (`defaultValue`). The required `length` sets the cell count;
+ * render that many `OtpField.Input` parts inside. Paste-to-fill, arrow navigation, and completion
+ * detection come from Base UI.
+ */
+declare function OtpFieldRoot({
+  size,
+  length,
+  className,
+  children,
+  ...props
+}: OtpField.Root.Props): ReactElement;
+/**
+ * One character cell. Render `length` of them inside `OtpField.Root`. Base UI stamps the live
+ * `data-filled`/`data-disabled`/`data-invalid`/`data-index` from the cell's own state, so the render
+ * contributes only the slot anchor. `className` is a consumer passthrough.
+ */
+declare function OtpFieldInput({
+  className,
+  ...props
+}: OtpField.Input.Props): ReactElement;
+/**
+ * The divider between OTP cell groups — render it between two runs of `OtpField.Input` to teach the
+ * canonical `123-456` grouping (the layout most one-time codes are pasted in). A thin neutral hairline,
+ * never accent. Built on Base UI's Separator, so it carries the `separator` role and a `data-orientation`
+ * (passed through) without extra wiring.
+ */
+declare function OtpFieldSeparator({
+  className,
+  ...props
+}: OtpField.Separator.Props): ReactElement;
+/**
+ * A one-time-passcode field: a row of single-character cells that behave as one input. Each cell wears
+ * the field surface; the focused cell takes the accent ring. Built on Base UI's OTP Field, so typing
+ * advances to the next cell, Backspace and arrow keys navigate the row (RTL-aware), and a pasted code
+ * fills the whole field at once. Wrap it in a `Field.Root` for label, validation, and the invalid
+ * border.
+ *
+ * Compose from parts: `OtpField.Root` owns the value, the `length`, and the shared `size`; render that
+ * many `OtpField.Input` cells inside.
+ *
+ * The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+ * exposed through the matching `OtpField` namespace — e.g. `OtpField.Input.Props`.
+ */
+declare const OtpField: {
+  /** Owns the value, the `length`, and the shared `size`. `OtpField.Root.props({ size })` → its spreadable prop bag. */Root: typeof OtpFieldRoot & {
+    props: typeof rootProps;
+  }; /** One character cell. `OtpField.Input.props({ filled, disabled, invalid })` → its spreadable prop bag for a foreign element. */
+  Input: typeof OtpFieldInput & {
+    props: typeof inputProps;
+  }; /** The divider between cell groups. `OtpField.Separator.props()` → its spreadable prop bag for a foreign element. */
+  Separator: typeof OtpFieldSeparator & {
+    props: typeof separatorProps;
+  };
+};
+/**
+ * Per-part prop and state types, mirroring Base UI's `Component.Part.Props` convention. Types-only —
+ * it emits no runtime code and merges with the `OtpField` object above, so `OtpField.Input` is the
+ * component value while `OtpField.Input.Props` is its prop type.
+ */
+declare namespace OtpField {
+  /** Control height of the cells — `sm`, `md`, or `lg`. */
+  type Size = OtpFieldSize;
+  namespace Root {
+    type Props = Omit<otp_field_d_exports.OTPFieldRoot.Props, "className" | "children"> & {
+      /**
+       * Control height of the cells.
+       * @default "md"
+       */
+      size?: OtpFieldSize; /** The `OtpField.Input` cells — render `length` of them. */
+      children?: ReactNode; /** Classes merged onto the root. */
+      className?: string;
+    };
+    type State = otp_field_d_exports.OTPFieldRoot.State;
+    /** Argument to the `OtpField.Root.props(...)` escape-hatch helper. */
+    type PropsArgs = OtpFieldRootPropsArgs;
+  }
+  namespace Input {
+    type Props = otp_field_d_exports.OTPFieldInput.Props;
+    type State = otp_field_d_exports.OTPFieldInput.State;
+    /** Argument to the `OtpField.Input.props(...)` escape-hatch helper. */
+    type PropsArgs = OtpFieldInputPropsArgs;
+  }
+  namespace Separator {
+    type Props = separator_d_exports.Separator.Props;
+    type State = separator_d_exports.Separator.State;
+    /** Argument to the `OtpField.Separator.props(...)` escape-hatch helper. */
+    type PropsArgs = OtpFieldSeparatorPropsArgs;
+  }
+}
+//#endregion
+export { OtpField };

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

@@ -0,0 +1,76 @@
+"use client";
+import { otp_field_exports } from "../../primitives/otp-field.js";
+import { OtpFieldProvider, useOtpFieldContext } from "./otp-field.context.js";
+import { OTP_FIELD_SLOTS } from "./otp-field.slots.js";
+import { inputProps, rootProps, separatorProps } from "./otp-field.props.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/otp-field/otp-field.tsx
+/**
+* Owns the OTP value and shares the `size` with the cells. Works controlled (`value` +
+* `onValueChange`) or uncontrolled (`defaultValue`). The required `length` sets the cell count;
+* render that many `OtpField.Input` parts inside. Paste-to-fill, arrow navigation, and completion
+* detection come from Base UI.
+*/
+function OtpFieldRoot({ size = "md", length, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(otp_field_exports.OTPFieldPreview.Root, {
+		"data-slot": OTP_FIELD_SLOTS.root,
+		"data-size": size,
+		length,
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(OtpFieldProvider, {
+			value: { size },
+			children
+		})
+	});
+}
+/**
+* One character cell. Render `length` of them inside `OtpField.Root`. Base UI stamps the live
+* `data-filled`/`data-disabled`/`data-invalid`/`data-index` from the cell's own state, so the render
+* contributes only the slot anchor. `className` is a consumer passthrough.
+*/
+function OtpFieldInput({ className, ...props }) {
+	useOtpFieldContext("Input");
+	return /* @__PURE__ */ jsx(otp_field_exports.OTPFieldPreview.Input, {
+		"data-slot": OTP_FIELD_SLOTS.input,
+		className,
+		...props
+	});
+}
+/**
+* The divider between OTP cell groups — render it between two runs of `OtpField.Input` to teach the
+* canonical `123-456` grouping (the layout most one-time codes are pasted in). A thin neutral hairline,
+* never accent. Built on Base UI's Separator, so it carries the `separator` role and a `data-orientation`
+* (passed through) without extra wiring.
+*/
+function OtpFieldSeparator({ className, ...props }) {
+	useOtpFieldContext("Separator");
+	return /* @__PURE__ */ jsx(otp_field_exports.OTPFieldPreview.Separator, {
+		"data-slot": OTP_FIELD_SLOTS.separator,
+		className,
+		...props
+	});
+}
+/**
+* A one-time-passcode field: a row of single-character cells that behave as one input. Each cell wears
+* the field surface; the focused cell takes the accent ring. Built on Base UI's OTP Field, so typing
+* advances to the next cell, Backspace and arrow keys navigate the row (RTL-aware), and a pasted code
+* fills the whole field at once. Wrap it in a `Field.Root` for label, validation, and the invalid
+* border.
+*
+* Compose from parts: `OtpField.Root` owns the value, the `length`, and the shared `size`; render that
+* many `OtpField.Input` cells inside.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `OtpField` namespace — e.g. `OtpField.Input.Props`.
+*/
+const OtpField = {
+	/** Owns the value, the `length`, and the shared `size`. `OtpField.Root.props({ size })` → its spreadable prop bag. */
+	Root: Object.assign(OtpFieldRoot, { props: rootProps }),
+	/** One character cell. `OtpField.Input.props({ filled, disabled, invalid })` → its spreadable prop bag for a foreign element. */
+	Input: Object.assign(OtpFieldInput, { props: inputProps }),
+	/** The divider between cell groups. `OtpField.Separator.props()` → its spreadable prop bag for a foreign element. */
+	Separator: Object.assign(OtpFieldSeparator, { props: separatorProps })
+};
+//#endregion
+export { OtpField };

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

@@ -0,0 +1,48 @@
+//#region src/components/otp-field/otp-field.props.d.ts
+/** Control height of the cells — the shared control-height ladder, stamped as `data-size`. */
+type OtpFieldSize = "md" | "lg";
+/** A spreadable data-attribute prop bag — the shape every `OtpField.*.props()` returns. */
+type OtpFieldPartProps = {
+  /** The slot value the matching `otp-field.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `OtpField.Root.props(...)` — the field's control size, stamped on the root the CSS keys cell metrics off. */
+interface OtpFieldRootPropsArgs extends BasePropsArgs {
+  /** Control height of the cells — `md` or `lg`. @default "md" */
+  size?: OtpFieldSize;
+}
+/** Argument to `OtpField.Separator.props(...)` — the divider drawn between OTP cell groups carries no state, only the slot anchor. */
+type OtpFieldSeparatorPropsArgs = BasePropsArgs;
+/** Argument to `OtpField.Input.props(...)` — the per-cell state the CSS keys its border/affordance off. */
+interface OtpFieldInputPropsArgs extends BasePropsArgs {
+  /** Whether this cell contains a character (drives `data-filled`). */
+  filled?: boolean;
+  /** Whether the field is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+  /** Whether the field is invalid (drives the danger border via `data-invalid`). */
+  invalid?: boolean;
+}
+/** Root prop bag: `data-slot` plus the `data-size` the descendant cell rules read. */
+declare function rootProps({
+  size,
+  className
+}?: OtpFieldRootPropsArgs): OtpFieldPartProps;
+/** Cell prop bag: slot anchor plus the `data-filled`/`data-disabled`/`data-invalid` state. */
+declare function inputProps({
+  filled,
+  disabled,
+  invalid,
+  className
+}?: OtpFieldInputPropsArgs): OtpFieldPartProps;
+/** Separator prop bag: just the slot anchor the divider rule keys off (Base UI stamps `data-orientation` itself). */
+declare function separatorProps({
+  className
+}?: OtpFieldSeparatorPropsArgs): OtpFieldPartProps;
+//#endregion
+export { OtpFieldInputPropsArgs, OtpFieldRootPropsArgs, OtpFieldSeparatorPropsArgs, OtpFieldSize, inputProps, rootProps, separatorProps };