@skdx/react 0.27.0 → 0.29.0

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

@@ -1,5 +1,15 @@
+import type { FormValidityHandle } from '../utils/formControl.js';
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** @internal Shared state distributed from {@link TagsInput} to its parts via context. Not part of the public API. */
+/**
+ * Refusal detail: which validation rule rejected a candidate tag, fired once per refused candidate via `onValueInvalid`.
+ */
+export interface TagsInputInvalidDetail {
+    /** The candidate, already trimmed — the same text that would have been committed. */
+    tag: string;
+    /** The rule that refused it: `'empty'`, `'max'`, `'validator'`, or `'duplicate'`. */
+    reason: 'empty' | 'max' | 'validator' | 'duplicate';
+}
+/** @internal Context state distributed from TagsInput to its parts. */
 export interface TagsInputContextValue {
     value: string[];
     inputValue: string;
@@ -7,90 +17,163 @@ export interface TagsInputContextValue {
     disabled: boolean;
     invalid: boolean;
     readOnly: boolean;
-    max?: number;
-    delimiter: string;
+    /** Default accessible name for the draft field, so a hand-composed `TagsInputInput` is never unnamed. */
+    inputLabel: string;
+    max?: number | undefined;
+    delimiter: string | string[];
     addOnPaste: boolean;
+    /** What an unfocused draft does with text the user typed but never committed. */
+    blurBehavior: 'keep' | 'clear' | 'commit';
+    /** Whether a committed tag may be opened for editing in a `TagsInputItemInput`. */
+    editable: boolean;
+    /** Which tag is currently open for editing, or `null`, clamped against the tag count. */
+    editingIndex: number | null;
+    /** Opens (or, with `null`, closes) the editor over the tag at that index. */
+    setEditingIndex: (index: number | null) => void;
+    /** Writes `tag` back to the tag at `index`, through the same refusal rules a new tag runs, minus `max`. */
+    setTagAtIndex: (index: number, tag: string) => void;
+    /** Empties the whole list in one change, a no-op when it is already empty. */
+    clearTags: () => void;
     addTag: (tag: string) => void;
     addTags: (tags: string[]) => void;
     removeTag: (index: number) => void;
+    /** Index of the tag currently owning the strip's single Tab stop, clamped against the tag count. */
+    tabStopIndex: number;
+    /** Claims the Tab stop for the tag at `index` — called when one takes focus, and after a removal hands focus on. */
+    setActiveIndex: (index: number) => void;
 }
 /** Props for the {@link TagsInput} root. */
 export interface TagsInputProps extends Omit<PrimitivePropsWithRef<'div'>, 'defaultValue' | 'onChange'> {
     /**
-     * Current tags, for controlled usage. Pair with `onValueChange`.
+     * Placeholder for the derived draft field, forwarded onto the `<input>` and ignored when `children` is given.
+     * @default undefined — the draft field has no placeholder.
+     */
+    placeholder?: string | undefined;
+    /**
+     * Accessible name of the derived draft field, emitted as its `aria-label`; ignored when `children` is given.
+     * @default 'Add a tag'
+     */
+    inputLabel?: string | undefined;
+    /**
+     * Renders the derived `TagsInputClear` button, which empties the whole list in one press; ignored with `children`.
+     * @default false
+     */
+    clearable?: boolean | undefined;
+    /**
+     * Current tags, for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own tag list internally.
      */
-    value?: string[];
+    value?: string[] | undefined;
     /**
      * Initial tags, for uncontrolled usage — seeds the internally-tracked list.
      * @default []
      */
-    defaultValue?: string[];
+    defaultValue?: string[] | undefined;
     /**
      * Fires with the new tag list whenever it changes (add or remove), controlled or not.
      * @default undefined — no-op.
      */
-    onValueChange?: (tags: string[]) => void;
+    onValueChange?: ((tags: string[]) => void) | undefined;
     /**
      * Disables adding/removing tags and marks the root and its parts with
      * `data-disabled`.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Marks the field as invalid, exposed as `data-invalid` on the root and
      * `aria-invalid`/`data-invalid` on `TagsInputInput`.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Makes `TagsInputInput` read-only (native `readOnly`, plus
      * `aria-readonly`/`data-readonly` on the root and the input).
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Maximum number of tags; further `addTag` calls are no-ops once reached.
      * @default undefined — unlimited.
      */
-    max?: number;
+    max?: number | undefined;
     /**
-     * Character that commits the draft as a tag while typing, and that pasted
-     * text is split on.
-     * @default ','
+     * Characters that commit the draft while typing and that pasted text is split on; only single-character entries can trigger a typed commit.
+     * @default [',', '\n']
      */
-    delimiter?: string;
+    delimiter?: string | string[] | undefined;
+    /**
+     * What happens to uncommitted draft text when `TagsInputInput` loses focus: `'keep'`, `'clear'`, or `'commit'`.
+     * @default 'keep'
+     */
+    blurBehavior?: 'keep' | 'clear' | 'commit' | undefined;
+    /**
+     * Whether a committed tag can be edited in place via `Enter` on a focused tag, committed by `Enter` and cancelled by `Escape`.
+     * @default false
+     */
+    editable?: boolean | undefined;
     /**
      * Commit pasted text as tags (split on `delimiter`) instead of dropping it
      * into the draft field.
      * @default true
      */
-    addOnPaste?: boolean;
+    addOnPaste?: boolean | undefined;
     /**
-     * Decides whether a tag may be added, given the trimmed candidate and the
-     * tags accepted so far. Return `false` to reject it. Must be pure — it runs
-     * inside the state updater, so React may call it more than once per commit.
+     * Decides whether a tag may be added, given the trimmed candidate and the tags accepted so far; must be pure, since it can run more than once per commit.
      * @default undefined — every non-empty, non-duplicate tag is accepted.
      */
-    validate?: (tag: string, tags: string[]) => boolean;
+    validator?: ((tag: string, tags: string[]) => boolean) | undefined;
+    /**
+     * Whether the same tag, matched by exact trimmed text, may appear more than once.
+     * @default false
+     */
+    allowDuplicates?: boolean | undefined;
     /**
-     * Current draft text in `TagsInputInput`, for controlled usage. Pair with
-     * `onInputValueChange`.
+     * Current draft text in `TagsInputInput`, for controlled usage; pair with `onInputValueChange`.
      * @default undefined — uncontrolled, the root tracks the draft internally.
      */
-    inputValue?: string;
+    inputValue?: string | undefined;
     /**
      * Initial draft text, for uncontrolled usage.
      * @default ''
      */
-    defaultInputValue?: string;
+    defaultInputValue?: string | undefined;
     /**
      * Fires with the new draft text whenever it changes — typing, or the reset
      * to empty after a tag is committed.
      * @default undefined — no-op.
      */
-    onInputValueChange?: (inputValue: string) => void;
+    onInputValueChange?: ((inputValue: string) => void) | undefined;
+    /**
+     * Fires once for every candidate tag the field refuses, carrying the trimmed candidate and the rule that refused it.
+     * @default undefined — no-op.
+     */
+    onValueInvalid?: ((detail: TagsInputInvalidDetail) => void) | undefined;
+    /**
+     * Form field name; every tag submits as its own entry under it, so `formData.getAll(name)` returns them in order.
+     * @default undefined — the field submits nothing.
+     */
+    name?: string | undefined;
+    /**
+     * Marks the field required, reporting `valueMissing` while there are no tags through `checkValidity()`/`reportValidity()`.
+     * @default false
+     */
+    required?: boolean | undefined;
+    /**
+     * Id of the `<form>` this field submits to, set as the native `form` attribute on every mirrored input.
+     * @default undefined — the enclosing `<form>`, if any.
+     */
+    form?: string | undefined;
+    /**
+     * Size rung the skin scales the field by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
 }
+/**
+ * What a `ref` on {@link TagsInput} gives you: the root `<div>` with constraint-validation methods assigned onto it.
+ */
+export type TagsInputHandle = HTMLDivElement & FormValidityHandle;
 /** Props for a single {@link TagsInputItem} — a rendered tag. */
 export interface TagsInputItemProps extends PrimitivePropsWithRef<'span'> {
     /** Position of this tag in the root's `value` array; passed through to `TagsInputItemDelete`. */
@@ -104,3 +187,11 @@ export interface TagsInputItemDeleteProps extends PrimitivePropsWithRef<'button'
 /** Props for {@link TagsInputInput}, the text field used to type and commit new tags. */
 export interface TagsInputInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
 }
+/** Props for {@link TagsInputItemInput}, the field a tag becomes while it is being edited. */
+export interface TagsInputItemInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+    /** Position of the tag this editor edits, in the root's `value` array. */
+    index: number;
+}
+/** Props for {@link TagsInputClear}, the button that empties the whole tag list. */
+export interface TagsInputClearProps extends PrimitivePropsWithRef<'button'> {
+}

package/dist/text/Text.cjs

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var a=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var T=Object.prototype.hasOwnProperty;var d=(e,t)=>{for(var o in t)a(e,o,{get:t[o],enumerable:!0})},l=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of P(t))!T.call(e,r)&&r!==o&&a(e,r,{get:()=>t[r],enumerable:!(p=n(t,r))||p.enumerable});return e};var N=e=>l(a({},"__esModule",{value:!0}),e);var R={};d(R,{Text:()=>s});module.exports=N(R);var i=require("../utils/appearance.cjs"),f=require("../utils/part.cjs"),x=require("../utils/primitive.cjs"),c=require("react/jsx-runtime"),s=({as:e="span",size:t,tone:o,variant:p,ref:r,...m})=>{let y=x.Primitive[e];return(0,c.jsx)(y,{...m,...(0,i.appearanceAttrs)({size:t,tone:o,variant:p},m),...(0,f.skdxPart)("text","root",m.className),ref:r})};s.displayName="Text";0&&(module.exports={Text});

package/dist/text/Text.d.cts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { TextProps } from './types.cjs';
+/**
+ * A typographic primitive rendering one element with `.skdx-text`, tag chosen via `as` and tone/weight/scale set as `data-*` attributes.
+ *
+ * @example
+ * ```tsx
+ * <Text as="p" data-tone="muted">Last synced 3 minutes ago</Text>
+ * <Text data-variant="numeric">1,284</Text>
+ * <Text as="code" data-variant="mono">--skdx-color-text-muted</Text>
+ * ```
+ */
+export declare const Text: {
+    ({ as, size, tone, variant, ref: forwardedRef, ...props }: TextProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text/Text.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { TextProps } from './types.js';
+/**
+ * A typographic primitive rendering one element with `.skdx-text`, tag chosen via `as` and tone/weight/scale set as `data-*` attributes.
+ *
+ * @example
+ * ```tsx
+ * <Text as="p" data-tone="muted">Last synced 3 minutes ago</Text>
+ * <Text data-variant="numeric">1,284</Text>
+ * <Text as="code" data-variant="mono">--skdx-color-text-muted</Text>
+ * ```
+ */
+export declare const Text: {
+    ({ as, size, tone, variant, ref: forwardedRef, ...props }: TextProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text/Text.js

@@ -0,0 +1,2 @@
+'use client';
+import{appearanceAttrs as i}from"../utils/appearance.js";import{skdxPart as f}from"../utils/part.js";import{Primitive as x}from"../utils/primitive.js";import{jsx as c}from"react/jsx-runtime";var e=({as:r="span",size:o,tone:p,variant:m,ref:a,...t})=>{let s=x[r];return c(s,{...t,...i({size:o,tone:p,variant:m},t),...f("text","root",t.className),ref:a})};e.displayName="Text";export{e as Text};

package/dist/text/index.d.cts

@@ -0,0 +1,2 @@
+export { Text } from './Text.cjs';
+export type { TextProps } from './types.cjs';

package/dist/text/index.d.ts

@@ -0,0 +1,2 @@
+export { Text } from './Text.js';
+export type { TextProps } from './types.js';

package/dist/text/types.d.cts

@@ -0,0 +1,24 @@
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.cjs';
+/** Props for {@link Text}, the typographic primitive. */
+export interface TextProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render, from the library's tag allowlist; the tag alone supplies the semantics.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
+    /**
+     * Size rung the skin scales the text by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Colour role the skin gives the text, mirrored to `data-tone`.
+     * @default undefined — the skin's own default colour.
+     */
+    tone?: 'default' | 'muted' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | (string & {}) | undefined;
+    /**
+     * Visual weight rung the skin gives the text, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'body' | 'numeric' | 'mono' | (string & {}) | undefined;
+}

package/dist/text/types.d.ts

@@ -0,0 +1,24 @@
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
+/** Props for {@link Text}, the typographic primitive. */
+export interface TextProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render, from the library's tag allowlist; the tag alone supplies the semantics.
+     * @default 'span'
+     */
+    as?: PolymorphicTag | undefined;
+    /**
+     * Size rung the skin scales the text by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Colour role the skin gives the text, mirrored to `data-tone`.
+     * @default undefined — the skin's own default colour.
+     */
+    tone?: 'default' | 'muted' | 'accent' | 'danger' | 'success' | 'warning' | 'info' | (string & {}) | undefined;
+    /**
+     * Visual weight rung the skin gives the text, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'body' | 'numeric' | 'mono' | (string & {}) | undefined;
+}

package/dist/text-field/TextField.cjs

@@ -1 +1,2 @@
-"use strict";var K=Object.create;var d=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,W=Object.prototype.hasOwnProperty;var X=(t,e)=>{for(var i in e)d(t,i,{get:e[i],enumerable:!0})},C=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of Q(e))!W.call(t,r)&&r!==i&&d(t,r,{get:()=>e[r],enumerable:!(o=O(e,r))||o.enumerable});return t};var n=(t,e,i)=>(i=t!=null?K(U(t)):{},C(e||!t||!t.__esModule?d(i,"default",{value:t,enumerable:!0}):i,t)),Y=t=>C(d({},"__esModule",{value:!0}),t);var Z={};X(Z,{TextField:()=>k,TextFieldClearButton:()=>v,TextFieldInput:()=>c,TextFieldProvider:()=>S,TextFieldSlot:()=>F,useTextFieldContext:()=>a});module.exports=Y(Z);var l=n(require("react"),1),y=require("../utils/createContext.cjs"),s=require("../utils/formControl.cjs"),I=require("../utils/part.cjs"),b=require("../utils/primitive.cjs"),H=require("../utils/useControllableState.cjs"),T=require("react/jsx-runtime"),[S,a]=(0,y.createSafeContext)("TextField"),k=l.forwardRef(({disabled:t=!1,invalid:e=!1,required:i=!1,value:o,defaultValue:r,onValueChange:u,name:z,...f},A)=>{let G=l.useId(),R=l.useRef(null),x=l.useRef(null),[J="",P]=(0,H.useControllableState)({prop:o,defaultProp:r??"",onChange:u});return(0,s.useFormValidityHandle)(A,R,x),(0,s.useFormReset)(x,()=>P(r??"")),(0,T.jsx)(S,{inputId:G,disabled:t,invalid:e,required:i,value:J,setValue:P,name:z,inputRef:x,children:(0,T.jsx)(b.Primitive.div,{"data-disabled":t?"":void 0,"data-invalid":e?"":void 0,...f,...(0,I.skdxPart)("text-field","root",f.className,f["data-skdx-component"]),ref:R})})});k.displayName="TextField";var B=n(require("react"),1),E=require("../utils/composeRefs.cjs"),N=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var g=require("react/jsx-runtime"),c=B.forwardRef(({type:t="text",...e},i)=>{let o=a("TextFieldInput"),r=(0,E.useComposedRefs)(i,o.inputRef);return(0,g.jsx)(p.Primitive.input,{id:o.inputId,type:t,name:o.name,disabled:o.disabled,required:o.required,"aria-invalid":o.invalid||void 0,"data-disabled":o.disabled?"":void 0,"data-invalid":o.invalid?"":void 0,value:o.value,...e,...(0,N.skdxPart)("text-field","input",e.className),ref:r,onChange:(0,p.composeEventHandlers)(e.onChange,u=>{o.setValue(u.target.value)})})});c.displayName="TextFieldInput";var V=n(require("react"),1),L=require("../utils/part.cjs"),M=require("../utils/primitive.cjs"),h=require("react/jsx-runtime"),F=V.forwardRef(({side:t="start",...e},i)=>(0,h.jsx)(M.Primitive.span,{"data-side":t,...e,...(0,L.skdxPart)("text-field","slot",e.className),ref:i}));F.displayName="TextFieldSlot";var w=n(require("react"),1),q=require("../utils/part.cjs"),m=require("../utils/primitive.cjs");var D=require("react/jsx-runtime"),v=w.forwardRef(({forceMount:t,...e},i)=>{let o=a("TextFieldClearButton"),r=o.value!=="";return t||r?(0,D.jsx)(m.Primitive.button,{type:"button","aria-label":"Clear",...e,...(0,q.skdxPart)("text-field","clear-button",e.className),ref:i,onClick:(0,m.composeEventHandlers)(e.onClick,()=>{o.inputRef.current?.focus(),o.setValue("")})}):null});v.displayName="TextFieldClearButton";0&&(module.exports={TextField,TextFieldClearButton,TextFieldInput,TextFieldProvider,TextFieldSlot,useTextFieldContext});
+'use client';
+"use strict";var de=Object.create;var x=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ne=Object.getPrototypeOf,se=Object.prototype.hasOwnProperty;var me=(e,t)=>{for(var r in t)x(e,r,{get:t[r],enumerable:!0})},w=(e,t,r,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of le(t))!se.call(e,a)&&a!==r&&x(e,a,{get:()=>t[a],enumerable:!(d=oe(t,a))||d.enumerable});return e};var pe=(e,t,r)=>(r=e!=null?de(ne(e)):{},w(t||!e||!e.__esModule?x(r,"default",{value:e,enumerable:!0}):r,e)),fe=e=>w(x({},"__esModule",{value:!0}),e);var ue={};me(ue,{TextField:()=>C,TextFieldClearButton:()=>F,TextFieldInput:()=>b,TextFieldProvider:()=>K,TextFieldSlot:()=>f,useTextFieldContext:()=>p});module.exports=fe(ue);var u=pe(require("react"),1),M=require("../utils/appearance.cjs"),D=require("../utils/createContext.cjs"),m=require("../utils/formControl.cjs"),J=require("../utils/part.cjs"),X=require("../utils/primitive.cjs"),P=require("../utils/recipeAxis.cjs"),G=require("../utils/useControllableState.cjs");var H=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),F=({forceMount:e,label:t="Clear",ref:r,...d})=>{let a=p("TextFieldClearButton"),i=a.value!=="",o=a.disabled||a.readOnly;return e||i?(0,h.jsx)(y.Primitive.button,{type:"button","aria-label":t,disabled:o,"data-disabled":o?"":void 0,...d,...(0,H.skdxPart)("text-field","clear-button",d.className),ref:r,onClick:(0,y.composeEventHandlers)(d.onClick,()=>{o||(a.inputRef.current?.focus(),a.setValue(""))})}):null};F.displayName="TextFieldClearButton";var k=require("../utils/appearance.cjs"),B=require("../utils/composeRefs.cjs"),E=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),b=({type:e="text",ref:t,size:r,variant:d,...a})=>{let i=p("TextFieldInput"),o=(0,B.useComposedRefs)(t,i.inputRef);return(0,A.jsx)(T.Primitive.input,{id:i.forwarded.id??i.inputId,type:e,name:i.name,form:i.form,disabled:i.disabled,required:i.required,"aria-invalid":i.invalid||i.forwarded["aria-invalid"]||void 0,"aria-describedby":i.forwarded["aria-describedby"],"aria-labelledby":i.forwarded["aria-labelledby"],"data-disabled":i.disabled?"":void 0,"data-invalid":i.invalid?"":void 0,value:i.value,...a,...(0,k.appearanceAttrs)({size:r,variant:d},a),...(0,E.skdxPart)("text-field","input",a.className),ref:o,onChange:(0,T.composeEventHandlers)(a.onChange,n=>{i.setValue(n.target.value)})})};b.displayName="TextFieldInput";var L=require("../utils/part.cjs"),O=require("../utils/primitive.cjs"),z=require("react/jsx-runtime"),f=({side:e="start",ref:t,...r})=>(0,z.jsx)(O.Primitive.span,{"data-side":e,...r,...(0,L.skdxPart)("text-field","slot",r.className),ref:t});f.displayName="TextFieldSlot";var l=require("react/jsx-runtime");function q({size:e,variant:t,clearable:r,clearLabel:d,leading:a,trailing:i,placeholder:o,type:n,readOnly:v}){return(0,l.jsxs)(l.Fragment,{children:[a?(0,l.jsx)(f,{side:"start",children:a}):null,(0,l.jsx)(b,{size:e,variant:t,placeholder:o,type:n,readOnly:v}),r?(0,l.jsx)(F,{label:d}):null,i?(0,l.jsx)(f,{side:"end",children:i}):null]})}var R=require("react/jsx-runtime"),[K,p]=(0,D.createSafeContext)("TextField"),C=({disabled:e=!1,invalid:t=!1,required:r=!1,value:d,defaultValue:a,onValueChange:i,name:o,form:n,clearable:v=!1,clearLabel:Q,leading:U,trailing:W,placeholder:Y,type:Z,readOnly:V=!1,children:_,id:$,"aria-describedby":j,"aria-invalid":ee,"aria-labelledby":te,ref:ae,size:I,variant:N,...s})=>{let ie=u.useId(),S=u.useRef(null),c=u.useRef(null),[re="",g]=(0,G.useControllableState)({prop:d,defaultProp:a??"",onChange:i});return(0,m.useFormValidityHandle)(ae,S,c,(0,m.useFormValidityStateView)(c)),(0,m.useFormReset)(c,()=>g(a??""),n),(0,R.jsx)(K,{inputId:ie,disabled:e,readOnly:V,invalid:t,required:r,value:re,setValue:g,name:o,form:n,inputRef:c,forwarded:{id:$,"aria-describedby":j,"aria-invalid":ee,"aria-labelledby":te},children:(0,R.jsx)(X.Primitive.div,{"data-disabled":e?"":void 0,"data-invalid":t?"":void 0,...s,...(0,M.appearanceAttrs)({size:I,variant:N},s),...(0,J.skdxPart)("text-field","root",s.className,s["data-skdx-component"]),ref:S,children:_??(0,R.jsx)(q,{size:(0,P.recipeAxis)(I,s,"data-size"),variant:(0,P.recipeAxis)(N,s,"data-variant"),clearable:v,clearLabel:Q,leading:U,trailing:W,placeholder:Y,type:Z,readOnly:V})})})};C.displayName="TextField";0&&(module.exports={TextField,TextFieldClearButton,TextFieldInput,TextFieldProvider,TextFieldSlot,useTextFieldContext});

package/dist/text-field/TextField.d.cts

@@ -1,26 +1,11 @@
 import * as React from 'react';
+import { type FormValidityHandle, type FormValidityStateView } from '../utils/formControl.cjs';
 import type { TextFieldContextValue, TextFieldProps } from './types.cjs';
-export declare const TextFieldProvider: {
-    (props: TextFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTextFieldContext: (consumerName: string) => TextFieldContextValue;
+export declare const TextFieldProvider: React.FC<TextFieldContextValue & {
+    children: React.ReactNode;
+}>, useTextFieldContext: (consumerName: string) => TextFieldContextValue;
 /**
- * Root of a text field: owns the value and disabled/invalid/required state,
- * and hands them down to `TextFieldInput`, `TextFieldSlot`, and
- * `TextFieldClearButton` via context. Renders a plain `<div>` with
- * `data-disabled`/`data-invalid` attributes — layout of the input vs. slots
- * is entirely up to your CSS. Full form validation lives in a separate Form
- * component; this primitive just manages the text value.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * With a `name` the field participates in its `<form>` for real: the wrapped
- * `<input>` carries the name, so the value submits, a form reset restores
- * `defaultValue`, and the ref's `checkValidity()`/`reportValidity()` mirror
- * that input's own `ValidityState` — `required` included. A `<fieldset
- * disabled>` ancestor disables the input natively, no wiring needed.
+ * Root of a text field: owns value/disabled/invalid/required state and hands it down via context, participating in `<form>` when given `name`.
  *
  * @example
  * ```tsx
@@ -32,14 +17,10 @@ export declare const TextFieldProvider: {
  *   <TextFieldClearButton />
  * </TextField>
  * ```
- *
- * @example Constraint validation, through a ref typed as `TextFieldHandle`:
- * ```tsx
- * const ref = React.useRef<TextFieldHandle>(null);
- * <TextField ref={ref} name="email" required>
- *   <TextFieldInput type="email" />
- * </TextField>;
- * ref.current?.reportValidity();
- * ```
  */
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TextField: {
+    ({ disabled, invalid, required, value: valueProp, defaultValue, onValueChange, name, form, clearable, clearLabel, leading, trailing, placeholder, type, readOnly, children, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ref: forwardedRef, size, variant, ...props }: Omit<TextFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle & FormValidityStateView> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextField.d.ts

@@ -1,26 +1,11 @@
 import * as React from 'react';
+import { type FormValidityHandle, type FormValidityStateView } from '../utils/formControl.js';
 import type { TextFieldContextValue, TextFieldProps } from './types.js';
-export declare const TextFieldProvider: {
-    (props: TextFieldContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTextFieldContext: (consumerName: string) => TextFieldContextValue;
+export declare const TextFieldProvider: React.FC<TextFieldContextValue & {
+    children: React.ReactNode;
+}>, useTextFieldContext: (consumerName: string) => TextFieldContextValue;
 /**
- * Root of a text field: owns the value and disabled/invalid/required state,
- * and hands them down to `TextFieldInput`, `TextFieldSlot`, and
- * `TextFieldClearButton` via context. Renders a plain `<div>` with
- * `data-disabled`/`data-invalid` attributes — layout of the input vs. slots
- * is entirely up to your CSS. Full form validation lives in a separate Form
- * component; this primitive just manages the text value.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * With a `name` the field participates in its `<form>` for real: the wrapped
- * `<input>` carries the name, so the value submits, a form reset restores
- * `defaultValue`, and the ref's `checkValidity()`/`reportValidity()` mirror
- * that input's own `ValidityState` — `required` included. A `<fieldset
- * disabled>` ancestor disables the input natively, no wiring needed.
+ * Root of a text field: owns value/disabled/invalid/required state and hands it down via context, participating in `<form>` when given `name`.
  *
  * @example
  * ```tsx
@@ -32,14 +17,10 @@ export declare const TextFieldProvider: {
  *   <TextFieldClearButton />
  * </TextField>
  * ```
- *
- * @example Constraint validation, through a ref typed as `TextFieldHandle`:
- * ```tsx
- * const ref = React.useRef<TextFieldHandle>(null);
- * <TextField ref={ref} name="email" required>
- *   <TextFieldInput type="email" />
- * </TextField>;
- * ref.current?.reportValidity();
- * ```
  */
-export declare const TextField: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TextField: {
+    ({ disabled, invalid, required, value: valueProp, defaultValue, onValueChange, name, form, clearable, clearLabel, leading, trailing, placeholder, type, readOnly, children, id, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ref: forwardedRef, size, variant, ...props }: Omit<TextFieldProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle & FormValidityStateView> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextField.js

@@ -1 +1,2 @@
-import*as r from"react";import{createSafeContext as I}from"../utils/createContext.js";import{useFormReset as b,useFormValidityHandle as H}from"../utils/formControl.js";import{skdxPart as S}from"../utils/part.js";import{Primitive as k}from"../utils/primitive.js";import{useControllableState as B}from"../utils/useControllableState.js";import{jsx as u}from"react/jsx-runtime";var[E,a]=I("TextField"),N=r.forwardRef(({disabled:o=!1,invalid:t=!1,required:i=!1,value:e,defaultValue:l,onValueChange:d,name:R,...n},P)=>{let C=r.useId(),p=r.useRef(null),s=r.useRef(null),[y="",m]=B({prop:e,defaultProp:l??"",onChange:d});return H(P,p,s),b(s,()=>m(l??"")),u(E,{inputId:C,disabled:o,invalid:t,required:i,value:y,setValue:m,name:R,inputRef:s,children:u(k.div,{"data-disabled":o?"":void 0,"data-invalid":t?"":void 0,...n,...S("text-field","root",n.className,n["data-skdx-component"]),ref:p})})});N.displayName="TextField";import*as f from"react";import{useComposedRefs as g}from"../utils/composeRefs.js";import{skdxPart as V}from"../utils/part.js";import{composeEventHandlers as L,Primitive as M}from"../utils/primitive.js";import{jsx as h}from"react/jsx-runtime";var x=f.forwardRef(({type:o="text",...t},i)=>{let e=a("TextFieldInput"),l=g(i,e.inputRef);return h(M.input,{id:e.inputId,type:o,name:e.name,disabled:e.disabled,required:e.required,"aria-invalid":e.invalid||void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,value:e.value,...t,...V("text-field","input",t.className),ref:l,onChange:L(t.onChange,d=>{e.setValue(d.target.value)})})});x.displayName="TextFieldInput";import*as T from"react";import{skdxPart as w}from"../utils/part.js";import{Primitive as q}from"../utils/primitive.js";import{jsx as D}from"react/jsx-runtime";var c=T.forwardRef(({side:o="start",...t},i)=>D(q.span,{"data-side":o,...t,...w("text-field","slot",t.className),ref:i}));c.displayName="TextFieldSlot";import*as F from"react";import{skdxPart as z}from"../utils/part.js";import{composeEventHandlers as A,Primitive as G}from"../utils/primitive.js";import{jsx as J}from"react/jsx-runtime";var v=F.forwardRef(({forceMount:o,...t},i)=>{let e=a("TextFieldClearButton"),l=e.value!=="";return o||l?J(G.button,{type:"button","aria-label":"Clear",...t,...z("text-field","clear-button",t.className),ref:i,onClick:A(t.onClick,()=>{e.inputRef.current?.focus(),e.setValue("")})}):null});v.displayName="TextFieldClearButton";export{N as TextField,v as TextFieldClearButton,x as TextFieldInput,E as TextFieldProvider,c as TextFieldSlot,a as useTextFieldContext};
+'use client';
+import*as s from"react";import{appearanceAttrs as ee}from"../utils/appearance.js";import{createSafeContext as te}from"../utils/createContext.js";import{useFormReset as ae,useFormValidityHandle as ie,useFormValidityStateView as re}from"../utils/formControl.js";import{skdxPart as de}from"../utils/part.js";import{Primitive as oe}from"../utils/primitive.js";import{recipeAxis as V}from"../utils/recipeAxis.js";import{useControllableState as le}from"../utils/useControllableState.js";import{skdxPart as q}from"../utils/part.js";import{composeEventHandlers as M,Primitive as D}from"../utils/primitive.js";import{jsx as J}from"react/jsx-runtime";var x=({forceMount:a,label:i="Clear",ref:r,...d})=>{let t=p("TextFieldClearButton"),e=t.value!=="",o=t.disabled||t.readOnly;return a||e?J(D.button,{type:"button","aria-label":i,disabled:o,"data-disabled":o?"":void 0,...d,...q("text-field","clear-button",d.className),ref:r,onClick:M(d.onClick,()=>{o||(t.inputRef.current?.focus(),t.setValue(""))})}):null};x.displayName="TextFieldClearButton";import{appearanceAttrs as X}from"../utils/appearance.js";import{useComposedRefs as G}from"../utils/composeRefs.js";import{skdxPart as K}from"../utils/part.js";import{composeEventHandlers as Q,Primitive as U}from"../utils/primitive.js";import{jsx as W}from"react/jsx-runtime";var y=({type:a="text",ref:i,size:r,variant:d,...t})=>{let e=p("TextFieldInput"),o=G(i,e.inputRef);return W(U.input,{id:e.forwarded.id??e.inputId,type:a,name:e.name,form:e.form,disabled:e.disabled,required:e.required,"aria-invalid":e.invalid||e.forwarded["aria-invalid"]||void 0,"aria-describedby":e.forwarded["aria-describedby"],"aria-labelledby":e.forwarded["aria-labelledby"],"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,value:e.value,...t,...X({size:r,variant:d},t),...K("text-field","input",t.className),ref:o,onChange:Q(t.onChange,l=>{e.setValue(l.target.value)})})};y.displayName="TextFieldInput";import{skdxPart as Y}from"../utils/part.js";import{Primitive as Z}from"../utils/primitive.js";import{jsx as _}from"react/jsx-runtime";var f=({side:a="start",ref:i,...r})=>_(Z.span,{"data-side":a,...r,...Y("text-field","slot",r.className),ref:i});f.displayName="TextFieldSlot";import{Fragment as $,jsx as u,jsxs as j}from"react/jsx-runtime";function C({size:a,variant:i,clearable:r,clearLabel:d,leading:t,trailing:e,placeholder:o,type:l,readOnly:c}){return j($,{children:[t?u(f,{side:"start",children:t}):null,u(y,{size:a,variant:i,placeholder:o,type:l,readOnly:c}),r?u(x,{label:d}):null,e?u(f,{side:"end",children:e}):null]})}import{jsx as F}from"react/jsx-runtime";var[ne,p]=te("TextField"),I=({disabled:a=!1,invalid:i=!1,required:r=!1,value:d,defaultValue:t,onValueChange:e,name:o,form:l,clearable:c=!1,clearLabel:N,leading:S,trailing:g,placeholder:w,type:H,readOnly:T=!1,children:h,id:k,"aria-describedby":B,"aria-invalid":E,"aria-labelledby":A,ref:L,size:b,variant:R,...n})=>{let O=s.useId(),v=s.useRef(null),m=s.useRef(null),[z="",P]=le({prop:d,defaultProp:t??"",onChange:e});return ie(L,v,m,re(m)),ae(m,()=>P(t??""),l),F(ne,{inputId:O,disabled:a,readOnly:T,invalid:i,required:r,value:z,setValue:P,name:o,form:l,inputRef:m,forwarded:{id:k,"aria-describedby":B,"aria-invalid":E,"aria-labelledby":A},children:F(oe.div,{"data-disabled":a?"":void 0,"data-invalid":i?"":void 0,...n,...ee({size:b,variant:R},n),...de("text-field","root",n.className,n["data-skdx-component"]),ref:v,children:h??F(C,{size:V(b,n,"data-size"),variant:V(R,n,"data-variant"),clearable:c,clearLabel:N,leading:S,trailing:g,placeholder:w,type:H,readOnly:T})})})};I.displayName="TextField";export{I as TextField,x as TextFieldClearButton,y as TextFieldInput,ne as TextFieldProvider,f as TextFieldSlot,p as useTextFieldContext};

package/dist/text-field/TextFieldAnatomy.d.cts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { TextFieldInputProps } from './types.cjs';
+/**
+ * The anatomy a {@link TextField} draws when given no children: leading/trailing slots, the input, and a clear button.
+ * @internal
+ */
+export declare function TextFieldAnatomy({ size, variant, clearable, clearLabel, leading, trailing, placeholder, type, readOnly, }: {
+    size?: TextFieldInputProps['size'] | undefined;
+    variant?: TextFieldInputProps['variant'] | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    leading?: React.ReactNode | undefined;
+    trailing?: React.ReactNode | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+    readOnly?: boolean | undefined;
+}): React.JSX.Element;

package/dist/text-field/TextFieldAnatomy.d.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+import type { TextFieldInputProps } from './types.js';
+/**
+ * The anatomy a {@link TextField} draws when given no children: leading/trailing slots, the input, and a clear button.
+ * @internal
+ */
+export declare function TextFieldAnatomy({ size, variant, clearable, clearLabel, leading, trailing, placeholder, type, readOnly, }: {
+    size?: TextFieldInputProps['size'] | undefined;
+    variant?: TextFieldInputProps['variant'] | undefined;
+    clearable?: boolean | undefined;
+    clearLabel?: string | undefined;
+    leading?: React.ReactNode | undefined;
+    trailing?: React.ReactNode | undefined;
+    placeholder?: string | undefined;
+    type?: string | undefined;
+    readOnly?: boolean | undefined;
+}): React.JSX.Element;

package/dist/text-field/TextFieldClearButton.d.cts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldClearButtonProps } from './types.cjs';
 /**
- * A button that resets a {@link TextField}'s value to the empty string.
- * Renders only once the field has a non-empty value, unless `forceMount` is
- * set. Renders a `<button type="button" aria-label="Clear">`; provide your
- * own `aria-label` to override the default.
+ * Clears TextField's value, rendering only when the field has a value unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -16,4 +13,7 @@ import type { TextFieldClearButtonProps } from './types.cjs';
  * </TextField>
  * ```
  */
-export declare const TextFieldClearButton: React.ForwardRefExoticComponent<Omit<TextFieldClearButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TextFieldClearButton: {
+    ({ forceMount, label, ref: forwardedRef, ...props }: TextFieldClearButtonProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextFieldClearButton.d.ts

@@ -1,10 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldClearButtonProps } from './types.js';
 /**
- * A button that resets a {@link TextField}'s value to the empty string.
- * Renders only once the field has a non-empty value, unless `forceMount` is
- * set. Renders a `<button type="button" aria-label="Clear">`; provide your
- * own `aria-label` to override the default.
+ * Clears TextField's value, rendering only when the field has a value unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -16,4 +13,7 @@ import type { TextFieldClearButtonProps } from './types.js';
  * </TextField>
  * ```
  */
-export declare const TextFieldClearButton: React.ForwardRefExoticComponent<Omit<TextFieldClearButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TextFieldClearButton: {
+    ({ forceMount, label, ref: forwardedRef, ...props }: TextFieldClearButtonProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextFieldInput.d.cts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldInputProps } from './types.cjs';
 /**
- * The native `<input>` for a {@link TextField}. Reads value/disabled/required
- * from `TextField` context and writes back to it on change, so it must be
- * rendered inside a `TextField`. Sets `id` (matching a `Label`'s `htmlFor`),
- * `aria-invalid`, and `data-disabled`/`data-invalid` from context.
- *
- * Also carries the root's `name`, so this is the element that actually submits
- * with the form and the one whose `ValidityState` the root's
- * `checkValidity()`/`reportValidity()` report.
+ * Native `<input>` synced with TextField context, carrying the root's `name` for form submission.
  *
  * @example
  * ```tsx
@@ -17,4 +10,7 @@ import type { TextFieldInputProps } from './types.cjs';
  * </TextField>
  * ```
  */
-export declare const TextFieldInput: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextFieldInput: {
+    ({ type, ref: forwardedRef, size, variant, ...props }: TextFieldInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextFieldInput.d.ts

@@ -1,14 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldInputProps } from './types.js';
 /**
- * The native `<input>` for a {@link TextField}. Reads value/disabled/required
- * from `TextField` context and writes back to it on change, so it must be
- * rendered inside a `TextField`. Sets `id` (matching a `Label`'s `htmlFor`),
- * `aria-invalid`, and `data-disabled`/`data-invalid` from context.
- *
- * Also carries the root's `name`, so this is the element that actually submits
- * with the form and the one whose `ValidityState` the root's
- * `checkValidity()`/`reportValidity()` report.
+ * Native `<input>` synced with TextField context, carrying the root's `name` for form submission.
  *
  * @example
  * ```tsx
@@ -17,4 +10,7 @@ import type { TextFieldInputProps } from './types.js';
  * </TextField>
  * ```
  */
-export declare const TextFieldInput: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const TextFieldInput: {
+    ({ type, ref: forwardedRef, size, variant, ...props }: TextFieldInputProps): React.ReactNode;
+    displayName: string;
+};

package/dist/text-field/TextFieldSlot.d.cts

@@ -1,9 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldSlotProps } from './types.cjs';
 /**
- * A decorative container for an icon or adornment placed at the start or end
- * of a {@link TextField}. Renders a plain `<span>` with `data-side` set from
- * the `side` prop — purely presentational, no context reads.
+ * A decorative container for an icon or adornment at the start or end of a {@link TextField}, rendered as a `<span>` with `data-side`.
  *
  * @example
  * ```tsx
@@ -15,4 +13,7 @@ import type { TextFieldSlotProps } from './types.cjs';
  * </TextField>
  * ```
  */
-export declare const TextFieldSlot: React.ForwardRefExoticComponent<Omit<TextFieldSlotProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const TextFieldSlot: {
+    ({ side, ref: forwardedRef, ...props }: TextFieldSlotProps): React.ReactNode;
+    displayName: string;
+};