@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/types/number-field/number-field.types.d.ts

@@ -0,0 +1,174 @@
+import type { NumberFieldMessages, PartialMessages } from '@slotted/core/i18n';
+import type { ChangeRequest } from '@slotted/core/state';
+import type { ComponentPropsWithRef, HTMLAttributes, ReactNode, Ref } from 'react';
+/** The type step the control sits at, matching the field around it. */
+export type NumberFieldSize = 'sm' | 'md' | 'lg';
+/**
+ * How much frame the control shows. The three `text-field` ships, unchanged:
+ * `outline` takes the ground it is placed on, `subtle` sinks into the page, and
+ * `plain` shows nothing at rest, which is what a dense table needs.
+ */
+export type NumberFieldVariant = 'outline' | 'subtle' | 'plain';
+/**
+ * Where the two steppers sit.
+ *
+ * `stacked` is one column at the inline end, which is what a form expects.
+ * `split` puts decrement at the inline start and increment at the inline end —
+ * the quantity picker's arrangement, and the only one whose targets clear the
+ * WCAG 2.2 minimum in both axes at every step. `none` withdraws them, for a
+ * dense table where an amount is typed and never spun.
+ */
+export type NumberFieldStepper = 'stacked' | 'split' | 'none';
+/**
+ * What happens to a value outside `min`…`max`.
+ *
+ * `blur` lets the reader type anything and returns the value to the range at
+ * the commit. `strict` refuses the keystroke that would leave it. `none` keeps
+ * the value where the reader put it and reports `aria-invalid`, which is what
+ * the APG asks for when invalid input cannot be blocked.
+ */
+export type NumberFieldClamp = 'blur' | 'strict' | 'none';
+/**
+ * When the text takes the locale's shape.
+ *
+ * `change` regroups on every keystroke, so `1234567` reads as `1.234.567` while
+ * it is being typed. Grouping exists to make a long number scannable, and the
+ * moment a reader most needs to check a magnitude is the moment they are
+ * getting it wrong. `commit` holds the reader's own text until blur, `Enter`, a
+ * stepper press or a key step — the model React Aria, Base UI, Zag, Carbon and
+ * Fluent ship, and the one to reach for when a value is pasted and audited
+ * rather than typed.
+ *
+ * Neither decides when the *number* moves. It moves on every keystroke that
+ * parses, under both.
+ */
+export type NumberFieldFormatOn = 'change' | 'commit';
+/** Why the value moved. */
+export type NumberFieldValueReason = Extract<ChangeRequest<number | null>['reason'], 'keyboard' | 'pointer' | 'blur' | 'programmatic'>;
+/**
+ * The two actions a consumer cannot express by passing a value: a keyboard
+ * shortcut elsewhere on the page that steps this field. Both report reason
+ * `programmatic`.
+ */
+export interface NumberFieldHandle {
+    increment(): void;
+    decrement(): void;
+}
+/** What an application sets once for every number field under it. */
+export interface NumberFieldDefaults {
+    clamp: NumberFieldClamp;
+    formatOn: NumberFieldFormatOn;
+    size: NumberFieldSize;
+    stepper: NumberFieldStepper;
+    variant: NumberFieldVariant;
+}
+export interface NumberFieldDefaultsProviderProps extends Partial<NumberFieldDefaults> {
+    children?: ReactNode | undefined;
+}
+/**
+ * What `render` receives for the frame. Written against
+ * `HTMLAttributes<HTMLElement>` so it can be spread onto any element, which is
+ * what makes the substitution real.
+ */
+export interface NumberFieldRootProps extends HTMLAttributes<HTMLElement> {
+    'data-disabled'?: '' | undefined;
+    'data-invalid'?: '' | undefined;
+    'data-part': string;
+    'data-readonly'?: '' | undefined;
+    'data-size': NumberFieldSize;
+    'data-stepper': NumberFieldStepper;
+    'data-ui': string;
+    'data-variant': NumberFieldVariant;
+}
+/**
+ * `size` is omitted and redeclared: on an `input` it is the visible character
+ * count, and this family's axis is a type step. `value`, `defaultValue`, `min`,
+ * `max` and `step` are omitted and redeclared as numbers, because the contract's
+ * value is a number and the element's own types admit strings.
+ *
+ * Everything else is the element's and reaches the element: `autoComplete`,
+ * `inputMode`, `enterKeyHint`, `placeholder`, `aria-*` and every handler.
+ * `className` and `style` are the exception, and they reach the frame, because
+ * the frame is what a consumer sees. `name` and `form` reach the hidden input
+ * that carries the raw number.
+ */
+export interface NumberFieldProps extends Omit<ComponentPropsWithRef<'input'>, 'defaultValue' | 'max' | 'min' | 'size' | 'step' | 'type' | 'value'> {
+    /** Where a value outside the range goes, and when. Defaults to the provider, then `blur`. */
+    clamp?: NumberFieldClamp | undefined;
+    /** The value an uncontrolled control starts from, read once. `null` is empty. */
+    defaultValue?: number | null | undefined;
+    /**
+     * Unstated rather than `false`, so the control defers to the field around it.
+     * Stated, it wins, and it is the native attribute.
+     */
+    disabled?: boolean | undefined;
+    /** An adornment after the value in the reading direction. */
+    end?: ReactNode | undefined;
+    /**
+     * How the value is written and read back, through `Intl.NumberFormat`.
+     * Currency and percent are formattings of one numeric type, not types of
+     * their own, and `maximumFractionDigits` is where precision is stated.
+     */
+    format?: Intl.NumberFormatOptions | undefined;
+    /** When the text takes that shape. Defaults to the provider, then `change`. */
+    formatOn?: NumberFieldFormatOn | undefined;
+    /** Reaches `increment()` and `decrement()`. `ref` reaches the input itself. */
+    handle?: Ref<NumberFieldHandle> | undefined;
+    /**
+     * Unstated rather than `false`. Writes `aria-invalid` on the control and
+     * `data-invalid` on the frame.
+     */
+    invalid?: boolean | undefined;
+    /** The amount `Shift` and the page keys move by. Defaults to `step * 10`. */
+    largeStep?: number | undefined;
+    /** BCP 47. Defaults to the language in force (`SlottedProvider`). */
+    locale?: string | undefined;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * `increment` and `decrement` buttons' accessible names.
+     */
+    messages?: PartialMessages<NumberFieldMessages> | undefined;
+    /** The largest value the control holds. `End` goes here. */
+    max?: number | undefined;
+    /** The smallest value the control holds. `Home` goes here. */
+    min?: number | undefined;
+    /** Called before the value moves, with the request that carries the reason. */
+    onValueChange?: ((value: number | null, request: ChangeRequest<number | null>) => void) | undefined;
+    /** Unstated rather than `false`. Writes the native `readonly`. */
+    readOnly?: boolean | undefined;
+    /** Renders the frame into another element. */
+    render?: ((props: NumberFieldRootProps) => ReactNode) | undefined;
+    /** Defaults to the field, then to the provider, then to `md`. */
+    size?: NumberFieldSize | undefined;
+    /** The amount `Alt` moves by. Defaults to `step / 10`. */
+    smallStep?: number | undefined;
+    /** Rounds a stepped value to a multiple of `step`, measured from `min`. */
+    snapToStep?: boolean | undefined;
+    /** An adornment before the value in the reading direction. */
+    start?: ReactNode | undefined;
+    /** The amount the arrows and the buttons move by. */
+    step?: number | undefined;
+    /** Where an empty control starts stepping from. Defaults to `min`, then to nought. */
+    stepFrom?: number | undefined;
+    /** Where the two steppers sit. Defaults to the provider, then `stacked`. */
+    stepper?: NumberFieldStepper | undefined;
+    /** Present means controlled, for the life of the component. `null` is empty. */
+    value?: number | null | undefined;
+    /** Defaults to the provider, then to `outline`. */
+    variant?: NumberFieldVariant | undefined;
+    /**
+     * Lets the wheel move the value while the control has focus and the pointer
+     * is over it. Off by default: a reader scrolling a form must not change an
+     * amount by passing over it.
+     */
+    wheel?: boolean | undefined;
+}
+/**
+ * A mark in `start` or `end` that moves the number when it is dragged
+ * sideways. A native `span`: every prop reaches it.
+ */
+export interface NumberFieldScrubProps extends ComponentPropsWithRef<'span'> {
+    /** Pixels of horizontal travel per step. Defaults to 2. */
+    sensitivity?: number | undefined;
+}
+//# sourceMappingURL=number-field.types.d.ts.map

package/dist/types/number-field/number-field.types.d.ts.map

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

package/dist/types/otp-input/index.d.ts

@@ -0,0 +1,4 @@
+export { OtpInput } from './otp-input';
+export { OtpInputDefaultsProvider, useOtpInputDefaults } from './otp-input-defaults';
+export type { OtpInputDefaults, OtpInputDefaultsProviderProps, OtpInputProps, OtpInputRootProps, OtpInputSize, OtpInputType, OtpInputValueReason, OtpInputVariant, } from './otp-input.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/otp-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACrF,YAAY,EACV,gBAAgB,EAChB,6BAA6B,EAC7B,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,mBAAmB,EACnB,eAAe,GAChB,MAAM,mBAAmB,CAAC"}

package/dist/types/otp-input/otp-input-defaults.d.ts

@@ -0,0 +1,15 @@
+import type { OtpInputDefaults, OtpInputDefaultsProviderProps } from './otp-input.types';
+/** What a code field renders as here, before it states anything of its own. */
+export declare function useOtpInputDefaults(): OtpInputDefaults;
+/**
+ * An application decides once what its code fields look like — and how long
+ * its codes are — rather than repeating the same props on every verification
+ * screen. A control that states any of them itself still wins.
+ *
+ * `size` is the one the field outranks: a `size="sm"` field holding an `md`
+ * control is a field and a control disagreeing about one row, so a control
+ * inside a field takes the field's step and this provider answers only outside
+ * one.
+ */
+export declare function OtpInputDefaultsProvider({ children, ...defaults }: OtpInputDefaultsProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=otp-input-defaults.d.ts.map

package/dist/types/otp-input/otp-input-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-defaults.d.ts","sourceRoot":"","sources":["../../../src/otp-input/otp-input-defaults.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAazF,+EAA+E;AAC/E,wBAAgB,mBAAmB,IAAI,gBAAgB,CAEtD;AAED;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE,6BAA6B,+BAiBhG"}

package/dist/types/otp-input/otp-input-demo.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+/**
+ * One demonstration: what it is called, what to look at, and the stage that
+ * owns the distance between the examples on it. Every story composes this
+ * rather than laying itself out, so no two examples can end up against each
+ * other and no story reaches for an inline style.
+ */
+export declare function Scene({ children, label, layout, note, }: {
+    children: ReactNode;
+    label: string;
+    layout?: 'block' | 'row' | 'stack' | 'prose';
+    note: ReactNode;
+}): import("react").JSX.Element;
+export declare function Grid({ children, columns }: {
+    children: ReactNode;
+    columns: 1 | 2 | 3;
+}): import("react").JSX.Element;
+/** A narrow column, for showing what a control does below 320 pixels. */
+export declare function Measure({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** A room of a stated width, for a screen whose picture depends on its width. */
+export declare function Room({ children, room, }: {
+    children: ReactNode;
+    room: 'desktop' | 'laptop' | 'tablet' | 'phone';
+}): import("react").JSX.Element;
+/** Two digits, the way a countdown is written. */
+export declare const pad: (seconds: number) => string;
+//# sourceMappingURL=otp-input-demo.d.ts.map

package/dist/types/otp-input/otp-input-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input-demo.d.ts","sourceRoot":"","sources":["../../../src/otp-input/otp-input-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,KAAK,EACL,MAAgB,EAChB,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;IAC7C,IAAI,EAAE,SAAS,CAAC;CACjB,+BAYA;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,OAAO,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAAE,+BAMtF;AAED,yEAAyE;AACzE,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAE5D;AAED,iFAAiF;AACjF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjD,+BAQA;AAED,kDAAkD;AAClD,eAAO,MAAM,GAAG,GAAI,SAAS,MAAM,WAAqC,CAAC"}

package/dist/types/otp-input/otp-input.d.ts

@@ -0,0 +1,29 @@
+
+import type { ReactNode } from 'react';
+import type { OtpInputProps } from './otp-input.types';
+/**
+ * One real input and N painted boxes.
+ *
+ * **The input is the control.** It holds the value, the `name`, the `form`,
+ * `autocomplete="one-time-code"`, the identifier the field's label points at,
+ * and it is the one tab stop. It lies over the boxes, transparent, so the
+ * click, the long press with "Paste" on iOS and the keyboard's autofill bar
+ * all reach it. The boxes are paint, hidden from assistive technology, each
+ * showing one character of what the input holds.
+ *
+ * **The family owns the characters — even uncontrolled.** Unlike `text-field`,
+ * which mirrors only the length, this one paints every character, so it keeps
+ * a copy of the value the element holds. The element stays the source:
+ * `defaultValue` reaches it as the native attribute, `form.reset()` restores
+ * it, and the copy follows.
+ *
+ * **The selection is normalised, not the keys.** Every key is the browser's.
+ * After each change the family makes sure a cursor inside the value has one
+ * character selected, so typing replaces it instead of being refused by
+ * `maxlength` — the rule `@slotted/core/otp` holds and input-otp wrote.
+ *
+ * **Unset means ask the field.** `disabled`, `readOnly` and `invalid` default
+ * to `undefined` rather than `false`.
+ */
+export declare function OtpInput({ 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, attached, autoComplete, autoSubmit, className, defaultValue, disabled, groups, id, inputMode, invalid, length: lengthProp, mask, onBlur, onChange, onComplete, onDragStart, onFocus, onRejected, onValueChange, pattern, placeholder, readOnly, ref, render, size, spellCheck, style, transform, type: typeProp, value, variant, webOtp, ...nativeProps }: OtpInputProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=otp-input.d.ts.map

package/dist/types/otp-input/otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.d.ts","sourceRoot":"","sources":["../../../src/otp-input/otp-input.tsx"],"names":[],"mappings":"AAAA,OAAO,yCAAyC,CAAC;AAOjD,OAAO,KAAK,EAAyC,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,KAAK,EAAE,aAAa,EAAqB,MAAM,mBAAmB,CAAC;AAgB1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,kBAAkB,EAAE,WAAW,EAC/B,cAAc,EAAE,WAAW,EAC3B,eAAe,EAAE,YAAY,EAC7B,QAAQ,EACR,YAA8B,EAC9B,UAAkB,EAClB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,EAAE,EACF,SAAS,EACT,OAAO,EACP,MAAM,EAAE,UAAU,EAClB,IAAY,EACZ,MAAM,EACN,QAAQ,EACR,UAAU,EACV,WAAW,EACX,OAAO,EACP,UAAU,EACV,aAAa,EACb,OAAO,EACP,WAAW,EACX,QAAQ,EACR,GAAG,EACH,MAAM,EACN,IAAI,EACJ,UAAkB,EAClB,KAAK,EACL,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,KAAK,EACL,OAAO,EACP,MAAc,EACd,GAAG,WAAW,EACf,EAAE,aAAa,+TAqSf"}

package/dist/types/otp-input/otp-input.types.d.ts

@@ -0,0 +1,130 @@
+import type { OtpType } from '@slotted/core/otp';
+import type { ChangeRequest } from '@slotted/core/state';
+import type { ComponentPropsWithRef, HTMLAttributes, ReactNode, SyntheticEvent } from 'react';
+/** The type step the control sits at, matching the field around it. */
+export type OtpInputSize = 'sm' | 'md' | 'lg';
+/**
+ * How much frame each box shows. `outline` takes the ground it is placed on
+ * and `subtle` sinks into the page — the two steps `text-field` draws, so a
+ * code under a text field in one form is one form. There is no `plain`: a
+ * code is never a cell.
+ */
+export type OtpInputVariant = 'outline' | 'subtle';
+export type { OtpType as OtpInputType };
+/**
+ * Why the value moved. `keyboard` is the control's editing surface — typing,
+ * pasting, the keyboard's own autofill, an IME commit — and `programmatic` is
+ * the WebOTP API filling the code from an SMS.
+ */
+export type OtpInputValueReason = Extract<ChangeRequest<string>['reason'], 'keyboard' | 'programmatic'>;
+/** What an application sets once for every code field under it. */
+export interface OtpInputDefaults {
+    attached: boolean;
+    length: number;
+    placeholder: string;
+    size: OtpInputSize;
+    type: OtpType;
+    variant: OtpInputVariant;
+}
+export interface OtpInputDefaultsProviderProps extends Partial<OtpInputDefaults> {
+    children?: ReactNode | undefined;
+}
+/**
+ * What `render` receives for the root. Written against
+ * `HTMLAttributes<HTMLElement>` so it can be spread onto any element, which is
+ * what makes the substitution real.
+ */
+export interface OtpInputRootProps extends HTMLAttributes<HTMLElement> {
+    'data-attached'?: '' | undefined;
+    'data-complete'?: '' | undefined;
+    'data-disabled'?: '' | undefined;
+    'data-invalid'?: '' | undefined;
+    'data-mask'?: '' | undefined;
+    'data-part': string;
+    'data-readonly'?: '' | undefined;
+    'data-size': OtpInputSize;
+    'data-ui': string;
+    'data-variant': OtpInputVariant;
+}
+/**
+ * `size` is omitted and redeclared: on an `input` it is the visible character
+ * count, and this family's axis is a type step. `type` is the family's own
+ * axis — numeric or alphanumeric — and the element's `type` is decided by
+ * `mask`. `maxLength` is `length`, and `pattern` is a `RegExp` tested per
+ * character rather than the element's whole-value attribute. `value` and
+ * `defaultValue` are strings.
+ *
+ * Everything else is the element's, and it reaches the element:
+ * `autoComplete` (defaulting to `one-time-code`), `inputMode` (defaulting from
+ * `type`), `name`, `form`, `autoFocus`, every `aria-*` and every handler.
+ * `className` and `style` are the exception, and they reach the root, because
+ * the root is what a consumer sees.
+ */
+export interface OtpInputProps extends Omit<ComponentPropsWithRef<'input'>, 'defaultValue' | 'maxLength' | 'pattern' | 'size' | 'type' | 'value'> {
+    /** Joins the boxes of a group along one seam. Defaults to the provider's. */
+    attached?: boolean | undefined;
+    /** Submits the owning form when the code is complete. */
+    autoSubmit?: boolean | undefined;
+    /** The value an uncontrolled control starts from, read once. */
+    defaultValue?: string | undefined;
+    /**
+     * Unstated rather than `false`, so the control defers to the field around it.
+     * Stated, it wins, and it is the native attribute.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * How the boxes are partitioned: `[3, 3]` draws two groups of three with a
+     * separator between them. The sum has to be `length`; a partition that does
+     * not add up draws one group.
+     */
+    groups?: readonly number[] | undefined;
+    /**
+     * Unstated rather than `false`. Writes `aria-invalid` on the control and
+     * `data-invalid` on the root.
+     */
+    invalid?: boolean | undefined;
+    /** How many characters the code has. Defaults to the provider's, then 6. */
+    length?: number | undefined;
+    /**
+     * Hides the characters: the control becomes `type="password"`, so the
+     * platform treats the value as a secret, and each filled box shows a bullet.
+     */
+    mask?: boolean | undefined;
+    /** Called with the value the moment it reaches `length` characters. */
+    onComplete?: ((value: string) => void) | undefined;
+    /** Called with what an edit lost to the filter, before the value moves. */
+    onRejected?: ((text: string, event: SyntheticEvent<HTMLInputElement>) => void) | undefined;
+    /** Called before the value moves, with the request that carries the reason. */
+    onValueChange?: ((value: string, request: ChangeRequest<string>) => void) | undefined;
+    /** Tested against each character; outranks `type` in what is accepted. */
+    pattern?: RegExp | undefined;
+    /**
+     * What an empty box shows: one character repeats over every box, and a
+     * string as long as the code distributes. Defaults to the provider's.
+     */
+    placeholder?: string | undefined;
+    /** Unstated rather than `false`. Writes the native `readonly`. */
+    readOnly?: boolean | undefined;
+    /** Renders the root into another element. */
+    render?: ((props: OtpInputRootProps) => ReactNode) | undefined;
+    /** Defaults to the field, then to the provider, then to `md`. */
+    size?: OtpInputSize | undefined;
+    /**
+     * Run over every edit before the filter: strip a `G-` prefix, uppercase a
+     * code the reader typed in lowercase.
+     */
+    transform?: ((text: string) => string) | undefined;
+    /** Which characters the code takes. Defaults to the provider's, then `numeric`. */
+    type?: OtpType | undefined;
+    /** Present means controlled, for the life of the component. */
+    value?: string | undefined;
+    /** Defaults to the provider, then to `outline`. */
+    variant?: OtpInputVariant | undefined;
+    /**
+     * Asks the platform for the code the moment an SMS arrives, where the
+     * WebOTP API exists. The request is abandoned when the form submits or the
+     * control unmounts.
+     */
+    webOtp?: boolean | undefined;
+}
+//# sourceMappingURL=otp-input.types.d.ts.map

package/dist/types/otp-input/otp-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.types.d.ts","sourceRoot":"","sources":["../../../src/otp-input/otp-input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9F,uEAAuE;AACvE,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,CAAC;AAEnD,YAAY,EAAE,OAAO,IAAI,YAAY,EAAE,CAAC;AAExC;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG,OAAO,CACvC,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,cAAc,CAC5B,CAAC;AAEF,mEAAmE;AACnE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,eAAe,CAAC;CAC1B;AAED,MAAM,WAAW,6BAA8B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC9E,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAClC;AAED;;;;GAIG;AACH,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACpE,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,cAAc,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACjC,WAAW,EAAE,YAAY,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,eAAe,CAAC;CACjC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,aAAc,SAAQ,IAAI,CACzC,qBAAqB,CAAC,OAAO,CAAC,EAC9B,cAAc,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CACrE;IACC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,yDAAyD;IACzD,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACnD,2EAA2E;IAC3E,UAAU,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3F,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACtF,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,kEAAkE;IAClE,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IAC/D,iEAAiE;IACjE,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,eAAe,GAAG,SAAS,CAAC;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B"}

package/dist/types/page/index.d.ts

@@ -0,0 +1,4 @@
+export { Page, PageBody, PageFooter, STICKY_BOTTOM_PROPERTY, usePage } from './page';
+export { PageDefaultsProvider, usePageDefaults } from './page-defaults';
+export type { PageBodyProps, PageContextValue, PageDefaults, PageDefaultsProviderProps, PageFooterProps, PageGround, PageInset, PageLandmark, PageMeasure, PageProps, PageRootProps, PageScroll, PageWidth, } from './page.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/page/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,sBAAsB,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACxE,YAAY,EACV,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,yBAAyB,EACzB,eAAe,EACf,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,SAAS,GACV,MAAM,cAAc,CAAC"}

package/dist/types/page/page-defaults.d.ts

@@ -0,0 +1,11 @@
+import type { PageDefaults, PageDefaultsProviderProps } from './page.types';
+/** What a page renders as here, before it states anything of its own. */
+export declare function usePageDefaults(): PageDefaults;
+/**
+ * An application decides once how its pages are laid out — the measure, the
+ * inset, who scrolls, the ground — rather than repeating the same props on
+ * every route. A page that states any of them itself still wins. Its words
+ * come from the language in force (`SlottedProvider`).
+ */
+export declare function PageDefaultsProvider({ children, ...defaults }: PageDefaultsProviderProps): import("react").JSX.Element;
+//# sourceMappingURL=page-defaults.d.ts.map

package/dist/types/page/page-defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-defaults.d.ts","sourceRoot":"","sources":["../../../src/page/page-defaults.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAY5E,yEAAyE;AACzE,wBAAgB,eAAe,IAAI,YAAY,CAE9C;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE,yBAAyB,+BAgBxF"}

package/dist/types/page/page-demo.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+import type { PageHeaderProps } from '../page-header';
+import type { PageProps } from './page.types';
+/**
+ * A box the size of a screen, that scrolls, read as a page. The demonstrations
+ * of this family are about what happens while the reader scrolls past the
+ * header, and a stage the height of a card would be a picture of a different
+ * component.
+ */
+export declare function Viewport({ children, size, }: {
+    children: ReactNode;
+    size?: 'screen' | 'tall' | undefined;
+}): import("react").JSX.Element;
+/** The supplier's mark, as an application would have it: an image the avatar shows whole. */
+export declare const LOGO = "data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%231d4ed8%27/%3E%3Ccircle cx=%2724%27 cy=%2736%27 r=%2714%27 fill=%27%2360a5fa%27/%3E%3Ccircle cx=%2742%27 cy=%2728%27 r=%2714%27 fill=%27%23bfdbfe%27 fill-opacity=%27.9%27/%3E%3C/svg%3E";
+export declare const MONEY: Intl.NumberFormat;
+export interface OrderLine {
+    code: string;
+    description: string;
+    /** The description a narrow column can afford. */
+    short: string;
+    quantity: number;
+    unit: number;
+}
+export declare const ORDER: {
+    id: string;
+    supplier: string;
+    document: string;
+    buyer: string;
+    costCentre: string;
+    delivery: string;
+    terms: string;
+    status: string;
+    total: number;
+    description: string;
+};
+export declare const LINES: OrderLine[];
+export declare const HISTORY: readonly [readonly ["02/09/2026 09:14", "Marina Duarte", "Solicitou aprovação com três cotações anexadas."], readonly ["03/09/2026 11:02", "Carlos Prado", "Aprovou o orçamento dentro da alçada da gerência."], readonly ["04/09/2026 16:40", "Jurídico", "Devolveu com ressalvas sobre a cláusula de reajuste."], readonly ["05/09/2026 10:21", "Marina Duarte", "Reenviou com a cláusula corrigida pelo fornecedor."], readonly ["08/09/2026 08:55", "Carlos Prado", "Aprovou a versão corrigida."], readonly ["09/09/2026 14:30", "Financeiro", "Reservou o valor no orçamento do centro de custo."], readonly ["10/09/2026 09:00", "Sistema", "Aguardando emissão da ordem de compra."]];
+export declare const RECORDS: string[];
+/** The header of the order, with every part written, in the state the story asks for. */
+export declare function OrderHeader({ actions, breadcrumbs, controls, figure, marks, navigation, pin, progress, record, tabs, visual, ...props }: Partial<PageHeaderProps> & {
+    actions?: 'full' | 'two' | 'none';
+    breadcrumbs?: boolean;
+    controls?: boolean;
+    figure?: boolean;
+    marks?: boolean;
+    navigation?: boolean;
+    pin?: boolean;
+    /** A refresh of the order, on the chrome's edge: written after the controls, before the tabs. */
+    progress?: ReactNode;
+    record?: string;
+    tabs?: boolean;
+    /** What stands before the title: the kind of record as an icon, the supplier's mark as an image, or initials. */
+    visual?: 'icon' | 'image' | 'initials' | false;
+}): import("react").JSX.Element;
+/** The short facts of the order, as a row of terms. */
+export declare function OrderFacts(): import("react").JSX.Element;
+/** The order's lines, as a table whose header sticks under the page chrome. */
+/**
+ * The order's lines, in three column sets. `compact` keeps a short description
+ * and the quantity, for a column too narrow for more. `sticky` holds the
+ * column header under the page chrome — and a table held that way is as wide
+ * as its content, so it shows the code, the short description and the
+ * quantity, which fit a 420-pixel page. Otherwise all four columns, and the
+ * table scrolls inside its own box when they do not fit.
+ */
+export declare function OrderLines({ compact, rows, sticky, }: {
+    compact?: boolean;
+    rows?: OrderLine[];
+    sticky?: boolean;
+}): import("react").JSX.Element;
+/** The sections a purchase order screen has, in order. */
+export declare function OrderSections({ compact, ground, sticky, }: {
+    compact?: boolean;
+    ground?: 'none' | 'surface';
+    sticky?: boolean;
+}): import("react").JSX.Element;
+/** The footer of the order: the actions that finish the task. */
+export declare function OrderFooter(): import("react").JSX.Element;
+/** The whole screen: a page, its header, its sections and its footer, inside a scrolling viewport. */
+export declare function OrderScreen({ footer, header, page, sections, sticky, }: {
+    footer?: boolean;
+    header?: Parameters<typeof OrderHeader>[0];
+    page?: Partial<PageProps>;
+    sections?: Omit<Parameters<typeof OrderSections>[0], 'sticky'>;
+    sticky?: boolean;
+}): import("react").JSX.Element;
+/** The tabs of the order, with the panels they switch between. */
+export declare function OrderTabs(): import("react").JSX.Element;
+//# sourceMappingURL=page-demo.d.ts.map

package/dist/types/page/page-demo.d.ts.map

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

package/dist/types/page/page.d.ts

@@ -0,0 +1,39 @@
+
+import type { PageBodyProps, PageContextValue, PageFooterProps, PageProps } from './page.types';
+/** The custom property the scroller carries for what sticks above the footer. */
+export declare const STICKY_BOTTOM_PROPERTY = "--slotted-page-sticky-bottom";
+/** What the page around this part says, or nothing: a header standing alone is complete. */
+export declare function usePage(): PageContextValue | undefined;
+/**
+ * The column of a screen: who scrolls, how wide the content is, where the
+ * footer stays, how much air the body has.
+ *
+ * **The header is a direct child of what scrolls.** There is no header part: a
+ * `sticky` element never leaves the box that contains it, so a wrapper exactly
+ * the header's height would pin nothing. A `PageHeader` written as the first
+ * child of the page lands in the scroll part beside the body.
+ *
+ * **The footer is a prop.** It has to sit outside the scroll part — below the
+ * scroller under `self`, stuck to the bottom of the root under `ancestor` —
+ * and a child would be inside it. It is mounted while it is passed and held
+ * through its exit by `@slotted/core/presence`, so the bar slides out rather
+ * than vanishing.
+ *
+ * **The page steps the outline.** Its body is one `HeadingLevel` deeper, so a
+ * section written directly in it takes `h2` under the header's `h1` without
+ * either family reading the other.
+ */
+export declare function Page({ children, className, fill, footer, ground, inset, landmark, loading, messages, ref, render, scroll, style, width, ...nativeProps }: PageProps): import("react").JSX.Element;
+/**
+ * The padded column: one container at the page's width and inset, and one
+ * outline step deeper than the header.
+ */
+export declare function PageBody({ children, className, ref, render, style, ...nativeProps }: PageBodyProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+/**
+ * The bar for the actions that finish the task. In the flow and never fixed:
+ * it takes its own height, so the last line of content scrolls up to it
+ * rather than under it. Its actions sit in one wrapping row aligned to the
+ * end, inside a container at the page's measure.
+ */
+export declare function PageFooter({ 'aria-label': ariaLabel, children, className, ref, render, style, ...nativeProps }: PageFooterProps): string | number | bigint | boolean | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+//# sourceMappingURL=page.d.ts.map

package/dist/types/page/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../src/page/page.tsx"],"names":[],"mappings":"AAAA,OAAO,+BAA+B,CAAC;AAWvC,OAAO,KAAK,EACV,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,SAAS,EAEV,MAAM,cAAc,CAAC;AAEtB,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAIrE,4FAA4F;AAC5F,wBAAgB,OAAO,IAAI,gBAAgB,GAAG,SAAS,CAEtD;AAID;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,EACH,MAAM,EACN,MAAM,EACN,KAAK,EACL,KAAK,EACL,GAAG,WAAW,EACf,EAAE,SAAS,+BA0EX;AAoDD;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACf,EAAE,aAAa,+VAiBf;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,KAAK,EACL,GAAG,WAAW,EACf,EAAE,eAAe,+VA+BjB"}