@skdx/react 0.28.0 → 0.29.0

package/dist/text/types.d.cts

@@ -2,10 +2,23 @@ import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.c
 /** 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 *is* the
-     * semantics — `<p>` for a paragraph, `<code>` for a code span, `<strong>` for
-     * importance — and this component supplies none of its own.
+     * Element name to render, from the library's tag allowlist; the tag alone supplies the semantics.
      * @default 'span'
      */
-    as?: PolymorphicTag;
+    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

@@ -2,10 +2,23 @@ import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.j
 /** 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 *is* the
-     * semantics — `<p>` for a paragraph, `<code>` for a code span, `<strong>` for
-     * importance — and this component supplies none of its own.
+     * Element name to render, from the library's tag allowlist; the tag alone supplies the semantics.
      * @default 'span'
      */
-    as?: PolymorphicTag;
+    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 j=Object.create;var f=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var te=Object.getOwnPropertyNames;var oe=Object.getPrototypeOf,re=Object.prototype.hasOwnProperty;var le=(e,t)=>{for(var o in t)f(e,o,{get:t[o],enumerable:!0})},g=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of te(t))!re.call(e,l)&&l!==o&&f(e,l,{get:()=>t[l],enumerable:!(r=ee(t,l))||r.enumerable});return e};var u=(e,t,o)=>(o=e!=null?j(oe(e)):{},g(t||!e||!e.__esModule?f(o,"default",{value:e,enumerable:!0}):o,e)),ae=e=>g(f({},"__esModule",{value:!0}),e);var ie={};le(ie,{TextField:()=>y,TextFieldClearButton:()=>c,TextFieldInput:()=>F,TextFieldProvider:()=>z,TextFieldSlot:()=>m,useTextFieldContext:()=>s});module.exports=ae(ie);var n=u(require("react"),1),q=require("../utils/createContext.cjs"),d=require("../utils/formControl.cjs"),O=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),D=require("../utils/useControllableState.cjs");var I=u(require("react"),1),S=require("../utils/part.cjs"),x=require("../utils/primitive.cjs");var h=require("react/jsx-runtime"),c=I.forwardRef(({forceMount:e,label:t="Clear",...o},r)=>{let l=s("TextFieldClearButton"),i=l.value!=="";return e||i?(0,h.jsx)(x.Primitive.button,{type:"button","aria-label":t,...o,...(0,S.skdxPart)("text-field","clear-button",o.className),ref:r,onClick:(0,x.composeEventHandlers)(o.onClick,()=>{l.inputRef.current?.focus(),l.setValue("")})}):null});c.displayName="TextFieldClearButton";var H=u(require("react"),1),N=require("../utils/composeRefs.cjs"),V=require("../utils/part.cjs"),T=require("../utils/primitive.cjs");var k=require("react/jsx-runtime"),F=H.forwardRef(({type:e="text",...t},o)=>{let r=s("TextFieldInput"),l=(0,N.useComposedRefs)(o,r.inputRef);return(0,k.jsx)(T.Primitive.input,{id:r.inputId,type:e,name:r.name,form:r.form,disabled:r.disabled,required:r.required,"aria-invalid":r.invalid||void 0,"data-disabled":r.disabled?"":void 0,"data-invalid":r.invalid?"":void 0,value:r.value,...t,...(0,V.skdxPart)("text-field","input",t.className),ref:l,onChange:(0,T.composeEventHandlers)(t.onChange,i=>{r.setValue(i.target.value)})})});F.displayName="TextFieldInput";var B=u(require("react"),1),E=require("../utils/part.cjs"),L=require("../utils/primitive.cjs"),w=require("react/jsx-runtime"),m=B.forwardRef(({side:e="start",...t},o)=>(0,w.jsx)(L.Primitive.span,{"data-side":e,...t,...(0,E.skdxPart)("text-field","slot",t.className),ref:o}));m.displayName="TextFieldSlot";var a=require("react/jsx-runtime");function M({clearable:e,clearLabel:t,leading:o,trailing:r,placeholder:l,readOnly:i}){return(0,a.jsxs)(a.Fragment,{children:[o?(0,a.jsx)(m,{side:"start",children:o}):null,(0,a.jsx)(F,{placeholder:l,readOnly:i}),e?(0,a.jsx)(c,{label:t}):null,r?(0,a.jsx)(m,{side:"end",children:r}):null]})}var R=require("react/jsx-runtime"),[z,s]=(0,q.createSafeContext)("TextField"),y=n.forwardRef(({disabled:e=!1,invalid:t=!1,required:o=!1,value:r,defaultValue:l,onValueChange:i,name:G,form:P,clearable:J=!1,clearLabel:K,leading:Q,trailing:U,placeholder:W,readOnly:X=!1,children:Y,...v},Z)=>{let _=n.useId(),C=n.useRef(null),p=n.useRef(null),[$="",b]=(0,D.useControllableState)({prop:r,defaultProp:l??"",onChange:i});return(0,d.useFormValidityHandle)(Z,C,p,(0,d.formValidityStateView)(p)),(0,d.useFormReset)(p,()=>b(l??""),P),(0,R.jsx)(z,{inputId:_,disabled:e,invalid:t,required:o,value:$,setValue:b,name:G,form:P,inputRef:p,children:(0,R.jsx)(A.Primitive.div,{"data-disabled":e?"":void 0,"data-invalid":t?"":void 0,...v,...(0,O.skdxPart)("text-field","root",v.className,v["data-skdx-component"]),ref:C,children:Y??(0,R.jsx)(M,{clearable:J,clearLabel:K,leading:Q,trailing:U,placeholder:W,readOnly:X})})})});y.displayName="TextField";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,23 +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 value and disabled/invalid/required state, hands them down via context.
- * Renders a plain `<div>` with `data-disabled`/`data-invalid` attributes. Layout entirely CSS-controlled.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * With `name`, field participates in `<form>`: wrapped `<input>` carries name (value submits),
- * form reset restores `defaultValue`, ref's `checkValidity()`/`reportValidity()` mirror input's `ValidityState`.
- * `<fieldset disabled>` ancestor disables input natively.
- *
- * Given no `children`, draws derived anatomy from `clearable`/`leading`/`trailing`/`placeholder`/`readOnly`.
- * No `label` or `description` (naming and hint text are `Field`'s job). Given children, renders verbatim.
+ * 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
@@ -29,14 +17,10 @@ export declare const TextFieldProvider: {
  *   <TextFieldClearButton />
  * </TextField>
  * ```
- *
- * @example Constraint validation through 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,23 +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 value and disabled/invalid/required state, hands them down via context.
- * Renders a plain `<div>` with `data-disabled`/`data-invalid` attributes. Layout entirely CSS-controlled.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
- *
- * With `name`, field participates in `<form>`: wrapped `<input>` carries name (value submits),
- * form reset restores `defaultValue`, ref's `checkValidity()`/`reportValidity()` mirror input's `ValidityState`.
- * `<fieldset disabled>` ancestor disables input natively.
- *
- * Given no `children`, draws derived anatomy from `clearable`/`leading`/`trailing`/`placeholder`/`readOnly`.
- * No `label` or `description` (naming and hint text are `Field`'s job). Given children, renders verbatim.
+ * 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
@@ -29,14 +17,10 @@ export declare const TextFieldProvider: {
  *   <TextFieldClearButton />
  * </TextField>
  * ```
- *
- * @example Constraint validation through 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 i from"react";import{createSafeContext as X}from"../utils/createContext.js";import{formValidityStateView as Y,useFormReset as Z,useFormValidityHandle as _}from"../utils/formControl.js";import{skdxPart as $}from"../utils/part.js";import{Primitive as j}from"../utils/primitive.js";import{useControllableState as ee}from"../utils/useControllableState.js";import*as R from"react";import{skdxPart as L}from"../utils/part.js";import{composeEventHandlers as w,Primitive as M}from"../utils/primitive.js";import{jsx as q}from"react/jsx-runtime";var f=R.forwardRef(({forceMount:r,label:t="Clear",...o},e)=>{let l=d("TextFieldClearButton"),a=l.value!=="";return r||a?q(M.button,{type:"button","aria-label":t,...o,...L("text-field","clear-button",o.className),ref:e,onClick:w(o.onClick,()=>{l.inputRef.current?.focus(),l.setValue("")})}):null});f.displayName="TextFieldClearButton";import*as v from"react";import{useComposedRefs as O}from"../utils/composeRefs.js";import{skdxPart as A}from"../utils/part.js";import{composeEventHandlers as D,Primitive as z}from"../utils/primitive.js";import{jsx as G}from"react/jsx-runtime";var u=v.forwardRef(({type:r="text",...t},o)=>{let e=d("TextFieldInput"),l=O(o,e.inputRef);return G(z.input,{id:e.inputId,type:r,name:e.name,form:e.form,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,...A("text-field","input",t.className),ref:l,onChange:D(t.onChange,a=>{e.setValue(a.target.value)})})});u.displayName="TextFieldInput";import*as y from"react";import{skdxPart as J}from"../utils/part.js";import{Primitive as K}from"../utils/primitive.js";import{jsx as Q}from"react/jsx-runtime";var s=y.forwardRef(({side:r="start",...t},o)=>Q(K.span,{"data-side":r,...t,...J("text-field","slot",t.className),ref:o}));s.displayName="TextFieldSlot";import{Fragment as U,jsx as m,jsxs as W}from"react/jsx-runtime";function P({clearable:r,clearLabel:t,leading:o,trailing:e,placeholder:l,readOnly:a}){return W(U,{children:[o?m(s,{side:"start",children:o}):null,m(u,{placeholder:l,readOnly:a}),r?m(f,{label:t}):null,e?m(s,{side:"end",children:e}):null]})}import{jsx as x}from"react/jsx-runtime";var[te,d]=X("TextField"),C=i.forwardRef(({disabled:r=!1,invalid:t=!1,required:o=!1,value:e,defaultValue:l,onValueChange:a,name:b,form:c,clearable:g=!1,clearLabel:I,leading:S,trailing:h,placeholder:H,readOnly:N=!1,children:V,...p},k)=>{let B=i.useId(),T=i.useRef(null),n=i.useRef(null),[E="",F]=ee({prop:e,defaultProp:l??"",onChange:a});return _(k,T,n,Y(n)),Z(n,()=>F(l??""),c),x(te,{inputId:B,disabled:r,invalid:t,required:o,value:E,setValue:F,name:b,form:c,inputRef:n,children:x(j.div,{"data-disabled":r?"":void 0,"data-invalid":t?"":void 0,...p,...$("text-field","root",p.className,p["data-skdx-component"]),ref:T,children:V??x(P,{clearable:g,clearLabel:I,leading:S,trailing:h,placeholder:H,readOnly:N})})})});C.displayName="TextField";export{C as TextField,f as TextFieldClearButton,u as TextFieldInput,te as TextFieldProvider,s as TextFieldSlot,d 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

@@ -1,16 +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 ClearButton when `clearable`. {@link PasswordInput} reuses
- * the same shape with a masked field instead.
- *
+ * The anatomy a {@link TextField} draws when given no children: leading/trailing slots, the input, and a clear button.
  * @internal
  */
-export declare function TextFieldAnatomy({ clearable, clearLabel, leading, trailing, placeholder, readOnly, }: {
-    clearable?: boolean;
-    clearLabel?: string;
-    leading?: React.ReactNode;
-    trailing?: React.ReactNode;
-    placeholder?: string;
-    readOnly?: boolean;
+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

@@ -1,16 +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 ClearButton when `clearable`. {@link PasswordInput} reuses
- * the same shape with a masked field instead.
- *
+ * The anatomy a {@link TextField} draws when given no children: leading/trailing slots, the input, and a clear button.
  * @internal
  */
-export declare function TextFieldAnatomy({ clearable, clearLabel, leading, trailing, placeholder, readOnly, }: {
-    clearable?: boolean;
-    clearLabel?: string;
-    leading?: React.ReactNode;
-    trailing?: React.ReactNode;
-    placeholder?: string;
-    readOnly?: boolean;
+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,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldClearButtonProps } from './types.cjs';
 /**
- * Clears TextField's value. Renders only when field has a value (unless `forceMount`). Default label: `"Clear"`.
+ * Clears TextField's value, rendering only when the field has a value unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -13,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,7 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldClearButtonProps } from './types.js';
 /**
- * Clears TextField's value. Renders only when field has a value (unless `forceMount`). Default label: `"Clear"`.
+ * Clears TextField's value, rendering only when the field has a value unless `forceMount` is set.
  *
  * @example
  * ```tsx
@@ -13,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,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldInputProps } from './types.cjs';
 /**
- * Native `<input>` that syncs with TextField context. Must be rendered inside a TextField.
- * Carries the root's `name` for form submission.
+ * Native `<input>` synced with TextField context, carrying the root's `name` for form submission.
  *
  * @example
  * ```tsx
@@ -11,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,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldInputProps } from './types.js';
 /**
- * Native `<input>` that syncs with TextField context. Must be rendered inside a TextField.
- * Carries the root's `name` for form submission.
+ * Native `<input>` synced with TextField context, carrying the root's `name` for form submission.
  *
  * @example
  * ```tsx
@@ -11,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,8 +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 `side`.
+ * 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
@@ -14,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;
+};

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

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { TextFieldSlotProps } from './types.js';
 /**
- * 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 `side`.
+ * 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
@@ -14,4 +13,7 @@ import type { TextFieldSlotProps } from './types.js';
  * </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;
+};

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

@@ -5,22 +5,22 @@ import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
 export interface TextFieldContextValue {
     inputId: string;
     disabled: boolean;
+    readOnly: boolean;
     invalid: boolean;
     required: boolean;
     value: string;
     setValue: (value: string) => void;
     /** Submitted under this key by the wrapped input; `undefined` submits nothing. */
-    name?: string;
+    name?: string | undefined;
     /** Id of the `<form>` the wrapped input submits with; `undefined` uses the enclosing one. */
-    form?: string;
+    form?: string | undefined;
     /** The wrapped `<input>`, so the root can answer `checkValidity()` off it and find the owning form. */
     inputRef: React.RefObject<HTMLInputElement | null>;
+    /** Root `id` and aria attributes that belong on the wrapped input, so `FormControl` and `Field` wiring lands there. */
+    forwarded: Pick<React.ComponentProps<'input'>, 'id' | 'aria-describedby' | 'aria-invalid' | 'aria-labelledby'>;
 }
 /**
- * The forwarded ref's handle: the root `<div>` with constraint-validation
- * methods and validity accessors. `validity` and `validationMessage` are live
- * getters over the wrapped `<input>`, so a consumer can check why the field is
- * invalid (`ref.current.validity.valueMissing`) without accessing the hidden input.
+ * The forwarded ref's handle: the root `<div>` with constraint-validation methods and live `validity`/`validationMessage` getters over the wrapped `<input>`.
  */
 export type TextFieldHandle = HTMLDivElement & FormValidityHandle & FormValidityStateView;
 /** Props for the {@link TextField} root. */
@@ -29,97 +29,107 @@ export interface TextFieldProps extends PrimitivePropsWithRef<'div'> {
      * Disables the field and the input it wraps.
      * @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 the input.
      * @default false
      */
-    invalid?: boolean;
+    invalid?: boolean | undefined;
     /**
      * Marks the wrapped input as required.
      * @default false
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
-     * Current value, for controlled usage. Pair with `onValueChange`.
+     * Current value, for controlled usage; pair with `onValueChange`.
      * @default undefined — uncontrolled, tracks its own value internally.
      */
-    value?: string;
+    value?: string | undefined;
     /**
      * Initial value, for uncontrolled usage — seeds the internally-tracked value.
      * @default undefined — starts empty.
      */
-    defaultValue?: string;
+    defaultValue?: string | undefined;
     /**
      * Fires with the new value whenever the input changes, controlled or not.
      * @default undefined — no-op.
      */
-    onValueChange?: (value: string) => void;
+    onValueChange?: ((value: string) => void) | undefined;
     /**
-     * Form field name, set on the wrapped native `<input>` — so the field
-     * submits its value with the surrounding `<form>`, mirrors that input's own
-     * `ValidityState` through `checkValidity()`/`reportValidity()`, and is
-     * restored to `defaultValue` when the form is reset. Without it the field
-     * submits nothing, exactly like a nameless native input.
+     * Form field name, set on the wrapped native `<input>` so the field submits, validates, and resets with the surrounding `<form>`.
      * @default undefined — submits nothing.
      */
-    name?: string;
+    name?: string | undefined;
     /**
-     * Id of the `<form>` this field submits with, put on the wrapped native
-     * `<input>` as its `form` attribute — so a field rendered outside that form's
-     * subtree (in a portal, a dialog, a sticky footer) still submits with it, and
-     * is still restored by its reset. Without it the field belongs to its nearest
-     * ancestor `<form>`, exactly like a native input.
+     * Id of the `<form>` this field submits with, put on the wrapped native `<input>` as its `form` attribute.
      * @default undefined — the enclosing `<form>`.
      */
-    form?: string;
+    form?: string | undefined;
     /**
-     * Renders a derived `TextFieldClearButton` once the field has a value.
-     * Ignored when `children` is given.
+     * Renders a derived `TextFieldClearButton` once the field has a value; ignored when `children` is given.
      * @default false
      */
-    clearable?: boolean;
+    clearable?: boolean | undefined;
     /**
-     * The derived clear button's accessible name. Hoisted from
-     * {@link TextFieldClearButtonProps.label}. Only meaningful with `clearable`.
+     * The derived clear button's accessible name, meaningful only with `clearable`.
      * @default 'Clear'
      */
-    clearLabel?: string;
+    clearLabel?: string | undefined;
     /**
-     * Renders a leading `TextFieldSlot` holding this content, before the input.
-     * Ignored when `children` is given.
+     * Renders a leading `TextFieldSlot` holding this content, before the input; ignored when `children` is given.
      * @default undefined — no leading slot rendered.
      */
-    leading?: React.ReactNode;
+    leading?: React.ReactNode | undefined;
     /**
-     * Renders a trailing `TextFieldSlot` holding this content, after the input.
-     * Ignored when `children` is given.
+     * Renders a trailing `TextFieldSlot` holding this content, after the input; ignored when `children` is given.
      * @default undefined — no trailing slot rendered.
      */
-    trailing?: React.ReactNode;
+    trailing?: React.ReactNode | undefined;
     /**
-     * Placeholder for the derived input. The root does not forward arbitrary
-     * input attributes, so this is the route to it. Ignored when `children` is
-     * given — set `placeholder` directly on your own `TextFieldInput` instead.
+     * Placeholder for the derived input; ignored when `children` is given, since the root forwards no arbitrary input attributes.
      * @default undefined
      */
-    placeholder?: string;
+    placeholder?: string | undefined;
     /**
-     * Native `readonly` for the derived input. Ignored when `children` is
-     * given — set `readOnly` directly on your own `TextFieldInput` instead.
+     * Native `type` for the derived input, such as `'email'` or `'search'`; ignored when `children` is given.
+     * @default 'text'
+     */
+    type?: string | undefined;
+    /**
+     * Native `readonly` for the derived input; ignored when `children` is given.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | 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;
+    /**
+     * Visual weight rung the skin gives the field, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 }
 /** Props for {@link TextFieldInput}, the native `<input>` driven by `TextField`'s context. */
-export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue'> {
+export interface TextFieldInputProps extends Omit<PrimitivePropsWithRef<'input'>, 'value' | 'defaultValue' | 'size'> {
     /**
      * Native `readonly`: value stays selectable, copyable, focusable and submitted,
      * but editing is blocked — unlike `disabled` on the root.
      * @default false
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
+    /**
+     * Size rung the skin scales the input by, mirrored to `data-size`.
+     * @default undefined — the skin's own default size.
+     */
+    size?: 'md' | 'sm' | 'lg' | (string & {}) | undefined;
+    /**
+     * Visual weight rung the skin gives the input, mirrored to `data-variant`.
+     * @default undefined — the skin's own default weight.
+     */
+    variant?: 'filled' | 'ghost' | (string & {}) | undefined;
 }
 /** Props for {@link TextFieldSlot}, a decorative container for icons/adornments beside the input. */
 export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
@@ -127,7 +137,7 @@ export interface TextFieldSlotProps extends PrimitivePropsWithRef<'span'> {
      * Which end of the field this slot sits at, exposed as `data-side`.
      * @default 'start'
      */
-    side?: 'start' | 'end';
+    side?: 'start' | 'end' | undefined;
 }
 /** Props for {@link TextFieldClearButton}, a button that resets the field's value to empty. */
 export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button'> {
@@ -135,11 +145,10 @@ export interface TextFieldClearButtonProps extends PrimitivePropsWithRef<'button
      * Keep mounted even when the field is empty or uncontrolled (for exit animations).
      * @default false
      */
-    forceMount?: boolean;
+    forceMount?: boolean | undefined;
     /**
-     * Accessible name for the button (icon-only, no text). A directly-written
-     * `aria-label` still wins.
+     * Accessible name for the button (icon-only, no text); a directly-written `aria-label` still wins.
      * @default 'Clear'
      */
-    label?: string;
+    label?: string | undefined;
 }