@skdx/react 0.26.0 → 0.28.0

package/dist/field/types.d.ts

@@ -1,8 +1,38 @@
-import type { PrimitivePropsWithRef } from '../utils/primitive.js';
+import type * as React from 'react';
+import type { PolymorphicTag, PrimitivePropsWithRef } from '../utils/primitive.js';
 import type { FieldCharacterCountOptions, FieldMode, FieldSnapshot, FieldValidator } from './fieldCore.js';
 export type { FieldCharacterCountOptions, FieldMode, FieldValidationResult, FieldValidator, } from './fieldCore.js';
 /** The state a `Field` reports through {@link FieldOwnProps.onValidityChange}. */
 export type FieldValidityDetail = Omit<FieldSnapshot, 'controlId'>;
+/**
+ * Imperative Field contract (shared across all five framework packages).
+ */
+export interface FieldValidateHandle {
+    /**
+     * Run validation now (server errors, custom, native constraint, character count).
+     * Named for the platform method; allows all five frameworks to use `validate` prop name.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * Clear messages and `touched`/`dirty` flags, re-derive `filled`/`count` from control.
+     * Clear `errors` prop too (it's declarative, re-applied next render).
+     */
+    reset(): void;
+}
+/**
+ * What {@link Field}'s forwarded ref carries: the root `<div>` plus
+ * `validate()`. Type your ref as this to call it —
+ * `React.useRef<FieldHandle>(null)`.
+ */
+export type FieldHandle = HTMLDivElement & FieldValidateHandle;
+/**
+ * What {@link Fieldset}'s forwarded ref carries: the `<fieldset>` plus
+ * `validate()`. `FieldValidateHandle` comes first because `<fieldset>` has a
+ * synchronous `checkValidity()` of its own: a call against the intersection
+ * resolves to whichever side is named first, and the async one is what the
+ * node actually carries at runtime.
+ */
+export type FieldsetHandle = FieldValidateHandle & HTMLFieldSetElement;
 /** The validation-model props shared by {@link FieldProps} and {@link FieldsetProps}. */
 export interface FieldOwnProps {
     /**
@@ -37,20 +67,36 @@ export interface FieldOwnProps {
      * @default undefined
      */
     name?: string;
+    /**
+     * Whether an answer is mandatory. Reflected onto the wrapped control as the
+     * native `required` attribute when it is an `<input>`/`<select>`/
+     * `<textarea>`, and as `aria-required="true"` when it is a group or a
+     * widget-role element, which has no native `required` to set.
+     *
+     * Render a `FieldRequiredIndicator` inside the `FieldLabel` to say so
+     * visibly; its text joins the control's accessible name, so the requirement
+     * is announced rather than only drawn.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is unavailable. Applied to the wrapped control — the
+     * native `disabled` attribute where there is one, `aria-disabled="true"`
+     * otherwise, because a disabled *widget* stays focusable and stays
+     * announced — and mirrored as `data-disabled` on the Field root and the
+     * control for styling.
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Fires whenever the field's validity or interaction state changes.
      * @default undefined
      */
     onValidityChange?: (detail: FieldValidityDetail) => void;
     /**
-     * Words every piece of character-count copy this Field produces: the text
-     * `FieldCharacterCount` renders, the message announced a typing pause after
-     * the last keystroke, and the error raised once the value passes the soft
-     * limit. A negative `remaining` means over the limit.
-     *
-     * One prop for all three deliberately — the announced count and the rendered
-     * count saying different things is worse than either being in English.
-     * @default undefined — the built-in GOV.UK wording ("You have 12 characters remaining").
+     * Words all character-count copy: rendered text, announced message, and over-limit error.
+     * Negative `remaining` means over the limit. One callback for all three for consistency.
+     * @default undefined
      */
     getCharacterCountMessage?: (remaining: number) => string;
     /**
@@ -61,21 +107,75 @@ export interface FieldOwnProps {
      * @default undefined — 'This field is invalid.'
      */
     invalidMessage?: string;
+    /**
+     * How long, in milliseconds, `mode="change"` waits after the last keystroke
+     * before running `validate`. Only `change` mode is debounced, and a blur
+     * cancels the pending run and validates immediately — the delay exists to
+     * keep a validator quiet *while* the user types, and a blur means they have
+     * stopped.
+     * @default 0 — no debounce.
+     */
+    validationDebounceTime?: number;
 }
-/** Props for {@link Field}, which wires one control to its label, description, and error text. */
-export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value'>, FieldOwnProps {
+/** Props for {@link FieldRoot}: {@link FieldProps} minus the derived-anatomy-only props. */
+export type FieldRootProps = Omit<FieldProps, 'label' | 'description'> & Pick<PrimitivePropsWithRef<'div'>, 'asChild'>;
+/**
+ * Props for {@link Field}, which wires one control to its label, description,
+ * and error text. No `asChild`: the recipe always wraps its children in the
+ * derived anatomy, so `Slot` would never receive the single element it needs.
+ * Reach for `primitives/field`'s headless `FieldRoot` for that.
+ */
+export interface FieldProps extends Omit<PrimitivePropsWithRef<'div'>, 'value' | 'asChild'>, FieldOwnProps {
+    /**
+     * The control's label, rendered into a derived `FieldLabel` whose `htmlFor`
+     * points at the control the Field found. The required marker is derived
+     * *inside* it, so the requirement joins the control's accessible name
+     * rather than sitting beside it.
+     * @default undefined — no label is rendered, and the control is unnamed.
+     */
+    label?: React.ReactNode;
+    /**
+     * Help text, rendered into a derived `FieldDescription` whose id joins the
+     * control's `aria-describedby`, so it is announced with the control.
+     * @default undefined — no description is rendered.
+     */
+    description?: React.ReactNode;
 }
-/** Props for {@link Fieldset}, a {@link Field} that groups several controls under a `<legend>`. */
+/** Props for {@link Fieldset}, a {@link FieldRoot} that groups several controls under a `<legend>`. */
 export interface FieldsetProps extends Omit<PrimitivePropsWithRef<'fieldset'>, 'value' | 'name'>, FieldOwnProps {
 }
 /** Props for {@link FieldLabel}, which renders a `<label>` — or a `<legend>` inside a {@link Fieldset}. */
 export interface FieldLabelProps extends PrimitivePropsWithRef<'label'> {
 }
+/** Props for {@link FieldRequiredIndicator}, the "this one is mandatory" marker inside a {@link FieldLabel}. */
+export interface FieldRequiredIndicatorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Overrides the default `*`. Prefer words — the indicator sits inside the
+     * `FieldLabel`, so whatever it renders is read out as part of the control's
+     * accessible name, and "Email (required)" says more than "Email star".
+     * @default undefined — renders `*`.
+     */
+    children?: React.ReactNode;
+}
 /** Props for {@link FieldDescription}, help text announced with the control. */
 export interface FieldDescriptionProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render instead of the default tag, from the library's
+     * allowlist of tags. Takes a tag name only, never a component — `asChild`
+     * is React's escape hatch for that, and wins when both are set.
+     * @default 'span'
+     */
+    as?: PolymorphicTag;
 }
 /** Props for {@link FieldError}, rendered only while the field is invalid. */
 export interface FieldErrorProps extends PrimitivePropsWithRef<'span'> {
+    /**
+     * Element name to render instead of the default tag, from the library's
+     * allowlist of tags. Takes a tag name only, never a component — `asChild`
+     * is React's escape hatch for that, and wins when both are set.
+     * @default 'span'
+     */
+    as?: PolymorphicTag;
 }
 /** Props for {@link FieldCharacterCount}, the running "N characters remaining" count. */
 export interface FieldCharacterCountProps extends PrimitivePropsWithRef<'span'> {
@@ -100,6 +200,8 @@ export interface FieldContextValue {
     controlId?: string;
     errors: string[];
     grouped: boolean;
+    /** Whether the Field is required, so `FieldRequiredIndicator` knows whether to render at all. */
+    required: boolean;
     count: number;
     setCharacterCount: (options: FieldCharacterCountOptions | null) => void;
     /** The root's `getCharacterCountMessage`, so the rendered count uses the same wording as the announced one. */

package/dist/file-upload/FileUpload.cjs

@@ -1 +1 @@
-"use strict";var de=Object.create;var c=Object.defineProperty;var se=Object.getOwnPropertyDescriptor;var me=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(e,t)=>{for(var o in t)c(e,o,{get:t[o],enumerable:!0})},M=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of me(t))!ce.call(e,i)&&i!==o&&c(e,i,{get:()=>t[i],enumerable:!(r=se(t,i))||r.enumerable});return e};var s=(e,t,o)=>(o=e!=null?de(fe(e)):{},M(t||!e||!e.__esModule?c(o,"default",{value:e,enumerable:!0}):o,e)),Fe=e=>M(c({},"__esModule",{value:!0}),e);var Pe={};ue(Pe,{FileUpload:()=>x,FileUploadDropzone:()=>R,FileUploadInput:()=>D,FileUploadItem:()=>v,FileUploadItemDelete:()=>C,FileUploadTrigger:()=>I});module.exports=Fe(Pe);var a=s(require("react"),1),S=require("../utils/createContext.cjs"),O=require("../utils/part.cjs"),V=require("../utils/primitive.cjs"),W=require("../utils/useControllableState.cjs"),b=require("react/jsx-runtime"),[Ue,n]=(0,S.createSafeContext)("FileUpload");function ge(e,t){if(!t)return!0;let o=t.split(",").map(l=>l.trim().toLowerCase()).filter(Boolean);if(o.length===0)return!0;let r=e.name.toLowerCase(),i=e.type.toLowerCase();return o.some(l=>l.startsWith(".")?r.endsWith(l):l.endsWith("/*")?i.startsWith(l.slice(0,-1)):i===l)}function ye(e,t){let o=[];return ge(e,t.accept)||o.push("file-invalid-type"),t.maxFileSize!==void 0&&e.size>t.maxFileSize&&o.push("file-too-large"),t.minFileSize!==void 0&&e.size<t.minFileSize&&o.push("file-too-small"),o.push(...t.validate?.(e)??[]),o}var x=a.forwardRef(({value:e,defaultValue:t=[],onValueChange:o,accept:r,multiple:i=!1,disabled:l=!1,maxFiles:k,maxFileSize:w,minFileSize:T,validate:E,onFileReject:L,...z},re)=>{let H=a.useRef(null),[g=[],m]=(0,W.useControllableState)({prop:e,defaultProp:t,onChange:o}),ae=a.useCallback(y=>{if(l)return;let f=i?g:[],N=(i?k??1/0:1)-f.length,d=[];for(let P of Array.from(y)){let h=ye(P,{accept:r,maxFileSize:w,minFileSize:T,validate:E});if(d.length>=N&&h.push("too-many-files"),h.length>0){L?.({file:P,errors:h});continue}d.push(P)}d.length!==0&&m([...f,...d])},[l,i,g,k,m,r,w,T,E,L]),ne=a.useCallback(y=>{m((f=[])=>f.filter((N,d)=>d!==y))},[m]),pe=a.useCallback(()=>{l||H.current?.click()},[l]);return(0,b.jsx)(Ue,{inputRef:H,files:g,disabled:l,accept:r,multiple:i,addFiles:ae,removeFile:ne,openPicker:pe,children:(0,b.jsx)(V.Primitive.div,{"data-disabled":l?"":void 0,...z,...(0,O.skdxPart)("file-upload","root",z.className),ref:re})})});x.displayName="FileUpload";var u=s(require("react"),1),B=require("../utils/part.cjs"),p=require("../utils/primitive.cjs");var A=require("react/jsx-runtime"),R=u.forwardRef((e,t)=>{let o=n("FileUploadDropzone"),[r,i]=u.useState(!1);return(0,A.jsx)(p.Primitive.div,{role:"button",tabIndex:o.disabled?-1:0,"aria-disabled":o.disabled||void 0,"data-disabled":o.disabled?"":void 0,"data-dragging":r?"":void 0,...e,...(0,B.skdxPart)("file-upload","dropzone",e.className),ref:t,onClick:(0,p.composeEventHandlers)(e.onClick,()=>o.openPicker()),onKeyDown:(0,p.composeEventHandlers)(e.onKeyDown,l=>{(l.key==="Enter"||l.key===" ")&&!o.disabled&&(l.preventDefault(),o.openPicker())}),onDragOver:(0,p.composeEventHandlers)(e.onDragOver,l=>{l.preventDefault(),o.disabled||i(!0)}),onDragLeave:(0,p.composeEventHandlers)(e.onDragLeave,()=>i(!1)),onDrop:(0,p.composeEventHandlers)(e.onDrop,l=>{l.preventDefault(),i(!1),o.disabled||o.addFiles(l.dataTransfer.files)})})});R.displayName="FileUploadDropzone";var K=s(require("react"),1),_=require("../utils/composeRefs.cjs"),q=require("../utils/hiddenInput.cjs"),G=require("../utils/part.cjs"),J=require("../utils/primitive.cjs");var Q=require("react/jsx-runtime"),D=K.forwardRef((e,t)=>{let o=n("FileUploadInput"),r=(0,_.useComposedRefs)(t,o.inputRef);return(0,Q.jsx)(q.HiddenInput,{type:"file",accept:o.accept,multiple:o.multiple,disabled:o.disabled,...e,...(0,G.skdxPart)("file-upload","input",e.className),ref:r,onChange:(0,J.composeEventHandlers)(e.onChange,i=>{i.target.files&&o.addFiles(i.target.files),i.target.value=""})})});D.displayName="FileUploadInput";var X=s(require("react"),1),Y=require("../utils/part.cjs"),Z=require("../utils/primitive.cjs"),$=require("react/jsx-runtime"),v=X.forwardRef(({index:e,status:t="idle",progress:o,...r},i)=>(0,$.jsx)(Z.Primitive.div,{"data-status":t,"data-progress":o,...r,...(0,Y.skdxPart)("file-upload","item",r.className),ref:i}));v.displayName="FileUploadItem";var j=s(require("react"),1),ee=require("../utils/part.cjs"),F=require("../utils/primitive.cjs");var oe=require("react/jsx-runtime"),C=j.forwardRef(({index:e,...t},o)=>{let r=n("FileUploadItemDelete");return(0,oe.jsx)(F.Primitive.button,{type:"button","aria-label":"Remove file",disabled:r.disabled,"data-disabled":r.disabled?"":void 0,...t,...(0,ee.skdxPart)("file-upload","item-delete",t.className),ref:o,onClick:(0,F.composeEventHandlers)(t.onClick,()=>{r.disabled||r.removeFile(e)})})});C.displayName="FileUploadItemDelete";var te=s(require("react"),1),ie=require("../utils/part.cjs"),U=require("../utils/primitive.cjs");var le=require("react/jsx-runtime"),I=te.forwardRef((e,t)=>{let o=n("FileUploadTrigger");return(0,le.jsx)(U.Primitive.button,{type:"button",disabled:o.disabled,"data-disabled":o.disabled?"":void 0,...e,...(0,ie.skdxPart)("file-upload","trigger",e.className),ref:t,onClick:(0,U.composeEventHandlers)(e.onClick,()=>o.openPicker())})});I.displayName="FileUploadTrigger";0&&(module.exports={FileUpload,FileUploadDropzone,FileUploadInput,FileUploadItem,FileUploadItemDelete,FileUploadTrigger});
+"use strict";var wt=Object.create;var w=Object.defineProperty;var Lt=Object.getOwnPropertyDescriptor;var Dt=Object.getOwnPropertyNames;var Et=Object.getPrototypeOf,Tt=Object.prototype.hasOwnProperty;var Ht=(e,t)=>{for(var o in t)w(e,o,{get:t[o],enumerable:!0})},de=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Dt(t))!Tt.call(e,a)&&a!==o&&w(e,a,{get:()=>t[a],enumerable:!(r=Lt(t,a))||r.enumerable});return e};var f=(e,t,o)=>(o=e!=null?wt(Et(e)):{},de(t||!e||!e.__esModule?w(o,"default",{value:e,enumerable:!0}):o,e)),Nt=e=>de(w({},"__esModule",{value:!0}),e);var $t={};Ht($t,{FileUpload:()=>Q,FileUploadClear:()=>dt,FileUploadDropzone:()=>D,FileUploadInput:()=>E,FileUploadItem:()=>T,FileUploadItemDelete:()=>N,FileUploadItemGroup:()=>z,FileUploadItemName:()=>S,FileUploadItemPreview:()=>M,FileUploadItemProvider:()=>Pe,FileUploadItemSizeText:()=>O,FileUploadLabel:()=>at,FileUploadProvider:()=>ot,FileUploadTrigger:()=>B,useFileUploadContext:()=>m,useFileUploadItemContext:()=>F});module.exports=Nt($t);var l=f(require("react"),1),Xe=require("../utils/createContext.cjs"),Ye=require("../utils/formControl.cjs"),J=require("../utils/hiddenInput.cjs"),A=require("../utils/liveAnnouncer.cjs"),Ze=require("../utils/part.cjs"),_e=require("../utils/primitive.cjs"),je=require("../utils/useCallbackRef.cjs"),et=require("../utils/useControllableState.cjs"),tt=require("../utils/visuallyHidden.cjs");var L=f(require("react"),1),pe=require("../utils/part.cjs"),y=require("../utils/primitive.cjs");var me=require("react/jsx-runtime"),D=L.forwardRef(({disableClick:e=!1,...t},o)=>{let r=m("FileUploadDropzone"),[a,i]=L.useState(!1),b=[t["aria-describedby"],r.required?r.descriptionId:void 0].filter(Boolean).join(" ")||void 0;return(0,me.jsx)(y.Primitive.div,{role:"button","aria-labelledby":r.labelPresent?r.labelId:void 0,tabIndex:r.disabled?-1:0,"aria-disabled":r.disabled||r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-dragging":a?"":void 0,"data-invalid":r.invalid?"":void 0,...t,...(0,pe.skdxPart)("file-upload","dropzone",t.className),"aria-describedby":b,ref:o,onClick:(0,y.composeEventHandlers)(t.onClick,()=>{e||r.openPicker()}),onKeyDown:(0,y.composeEventHandlers)(t.onKeyDown,c=>{(c.key==="Enter"||c.key===" ")&&!r.disabled&&!r.readOnly&&(c.preventDefault(),r.openPicker())}),onDragOver:(0,y.composeEventHandlers)(t.onDragOver,c=>{c.preventDefault(),!r.disabled&&!r.readOnly&&i(!0)}),onDragLeave:(0,y.composeEventHandlers)(t.onDragLeave,()=>i(!1)),onDrop:(0,y.composeEventHandlers)(t.onDrop,c=>{c.preventDefault(),i(!1),!r.disabled&&!r.readOnly&&r.addFiles(c.dataTransfer.files)})})});D.displayName="FileUploadDropzone";var fe=f(require("react"),1),ce=require("../utils/composeRefs.cjs"),ue=require("../utils/hiddenInput.cjs"),Fe=require("../utils/part.cjs"),ye=require("../utils/primitive.cjs");var Ue=require("react/jsx-runtime"),E=fe.forwardRef((e,t)=>{let o=m("FileUploadInput"),r=(0,ce.useComposedRefs)(t,o.inputRef);return(0,Ue.jsx)(ue.HiddenInput,{type:"file",accept:o.accept,multiple:o.multiple,...o.directory?{webkitdirectory:""}:{},capture:o.capture,disabled:o.disabled||o.readOnly,...e,...(0,Fe.skdxPart)("file-upload","input",e.className),ref:r,onChange:(0,ye.composeEventHandlers)(e.onChange,a=>{a.target.files&&o.addFiles(a.target.files),a.target.value=""})})});E.displayName="FileUploadInput";var ge=f(require("react"),1),be=require("../utils/createContext.cjs"),ve=require("../utils/part.cjs"),Re=require("../utils/primitive.cjs"),K=require("react/jsx-runtime"),[Pe,F]=(0,be.createSafeContext)("FileUploadItem"),T=ge.forwardRef(({file:e,status:t="idle",progress:o,...r},a)=>(0,K.jsx)(Pe,{file:e,children:(0,K.jsx)(Re.Primitive.div,{"data-state":t,"data-progress":o,...r,...(0,ve.skdxPart)("file-upload","item",r.className),ref:a})}));T.displayName="FileUploadItem";var xe=f(require("react"),1),he=require("../utils/part.cjs"),H=require("../utils/primitive.cjs");function Ie(e){let t=e.closest('[data-part="root"]');if(!t)return;let o=[...t.querySelectorAll('[data-part="item-delete"]')],r=o.indexOf(e);(o[r+1]??o[r-1]??t.querySelector('[data-part="dropzone"], [data-part="trigger"]'))?.focus()}var Ce=require("react/jsx-runtime"),N=xe.forwardRef(({file:e,...t},o)=>{let r=m("FileUploadItemDelete"),a=F("FileUploadItemDelete"),i=e??a.file;return(0,Ce.jsx)(H.Primitive.button,{type:"button","aria-label":r.removeLabel(i.name),disabled:r.disabled||r.readOnly,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,...t,...(0,he.skdxPart)("file-upload","item-delete",t.className),ref:o,onClick:(0,H.composeEventHandlers)(t.onClick,b=>{r.disabled||r.readOnly||(Ie(b.currentTarget),r.removeFile(i))})})});N.displayName="FileUploadItemDelete";var ke=f(require("react"),1),we=require("../utils/part.cjs"),Le=require("../utils/primitive.cjs"),De=require("react/jsx-runtime"),z=ke.forwardRef((e,t)=>(0,De.jsx)(Le.Primitive.div,{...e,...(0,we.skdxPart)("file-upload","item-group",e.className),ref:t}));z.displayName="FileUploadItemGroup";var Ee=f(require("react"),1),Te=require("../utils/part.cjs"),He=require("../utils/primitive.cjs");var Ne=require("react/jsx-runtime"),S=Ee.forwardRef(({children:e,...t},o)=>{let r=F("FileUploadItemName");return(0,Ne.jsx)(He.Primitive.span,{...t,...(0,Te.skdxPart)("file-upload","item-name",t.className),ref:o,children:e??r.file.name})});S.displayName="FileUploadItemName";var ze=f(require("react"),1),Se=require("../utils/part.cjs"),Me=require("../utils/primitive.cjs");var Oe=require("react/jsx-runtime"),M=ze.forwardRef((e,t)=>(F("FileUploadItemPreview"),(0,Oe.jsx)(Me.Primitive.div,{...e,...(0,Se.skdxPart)("file-upload","item-preview",e.className),ref:t})));M.displayName="FileUploadItemPreview";var Be=f(require("react"),1),Ae=require("../utils/part.cjs"),$e=require("../utils/primitive.cjs");var Ge=require("react/jsx-runtime"),Ve=["byte","kilobyte","megabyte","gigabyte","terabyte"];function zt(e){let t=e,o=0;for(;t>=1e3&&o<Ve.length-1;)t/=1e3,o+=1;return new Intl.NumberFormat(void 0,{style:"unit",unit:Ve[o],unitDisplay:"narrow",maximumFractionDigits:1}).format(t)}var O=Be.forwardRef(({children:e,...t},o)=>{let r=F("FileUploadItemSizeText");return(0,Ge.jsx)($e.Primitive.span,{...t,...(0,Ae.skdxPart)("file-upload","item-size",t.className),ref:o,children:e??zt(r.file.size)})});O.displayName="FileUploadItemSizeText";var We=f(require("react"),1),qe=require("../utils/part.cjs"),V=require("../utils/primitive.cjs");var Ke=require("react/jsx-runtime"),B=We.forwardRef((e,t)=>{let o=m("FileUploadTrigger");return(0,Ke.jsx)(V.Primitive.button,{type:"button",disabled:o.disabled||o.readOnly,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...(0,qe.skdxPart)("file-upload","trigger",e.className),ref:t,onClick:(0,V.composeEventHandlers)(e.onClick,r=>{r.stopPropagation(),o.openPicker()})})});B.displayName="FileUploadTrigger";var p=require("react/jsx-runtime"),Je=({showList:e,showPreview:t,renderFile:o,fileStatus:r})=>{let a=m("FileUpload");return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(D,{children:"Drag files here"}),(0,p.jsx)(B,{children:"Browse"}),(0,p.jsx)(E,{}),e?(0,p.jsx)(z,{children:a.files.map(i=>(0,p.jsx)(T,{file:i,...r?.(i),children:o?o(i):(0,p.jsxs)(p.Fragment,{children:[t?(0,p.jsx)(M,{}):null,(0,p.jsx)(S,{}),(0,p.jsx)(O,{}),(0,p.jsx)(N,{})]})},i.name))}):null]})};var U=require("react/jsx-runtime"),[ot,m]=(0,Xe.createSafeContext)("FileUpload");function St(e,t){if(!t)return!0;let o=t.split(",").map(i=>i.trim().toLowerCase()).filter(Boolean);if(o.length===0)return!0;let r=e.name.toLowerCase(),a=e.type.toLowerCase();return o.some(i=>i.startsWith(".")?r.endsWith(i):i.endsWith("/*")?a.startsWith(i.slice(0,-1)):a===i)}function Mt(e){if(typeof DataTransfer>"u")return null;let t=new DataTransfer;for(let o of e)t.items.add(o);return t.files}var Ot=e=>`Remove ${e}`;function Qe(e){return e.length===0?"":e.length===1?`${e[0]} removed`:`${e.length} files removed`}function Vt(e){return e?"Required. No file selected":"Required"}function Bt(e,t){let o=[];if(e>0&&o.push(`${e} ${e===1?"file":"files"} added`),t.length>0){let r=[...new Set(t)].join(", "),a=t.length;o.push(`${a} ${a===1?"file":"files"} refused: ${r}`)}return o.join(". ")}function At(e,t){let o=[];return St(e,t.accept)||o.push("file-invalid-type"),t.maxFileSize!==void 0&&e.size>t.maxFileSize&&o.push("file-too-large"),t.minFileSize!==void 0&&e.size<t.minFileSize&&o.push("file-too-small"),o.push(...t.validate?.(e)??[]),o}var Q=l.forwardRef(({value:e,defaultValue:t=[],onValueChange:o,accept:r,multiple:a=!1,disabled:i=!1,maxFiles:b,maxFileSize:c,minFileSize:X,validate:Y,onFileReject:Z,removeLabel:mt=Ot,name:_,form:j,required:v=!1,requiredMessage:W,readOnly:u=!1,invalid:ft=!1,directory:ct=!1,capture:ut,preventDocumentDrop:ee=!0,showList:Ft=!0,showPreview:yt=!1,fileStatus:Ut,renderFile:gt,children:bt,...te},vt)=>{let oe=l.useRef(null),Rt=l.useId(),re=l.useId(),[Pt,It]=l.useState(!1),[s=[],g]=(0,et.useControllableState)({prop:e,defaultProp:t,onChange:o}),P=l.useCallback(n=>{if(i||u)return;let d=a?s:[],C=(a?b??1/0:1)-d.length,R=[],se=[];for(let q of Array.from(n)){let k=At(q,{accept:r,maxFileSize:c,minFileSize:X,validate:Y});if(R.length>=C&&k.push("too-many-files"),k.length>0){se.push(k[0]),Z?.({file:q,errors:k});continue}R.push(q)}(0,A.announce)(Bt(R.length,se)),R.length!==0&&g([...d,...R])},[i,u,a,s,b,g,r,c,X,Y,Z]),ie=l.useRef(P);l.useEffect(()=>{ie.current=P},[P]);let xt=l.useCallback(n=>{if(i||u)return;let d=s.indexOf(n);d!==-1&&((0,A.announce)(Qe([n.name])),g([...s.slice(0,d),...s.slice(d+1)]))},[i,u,s,g]),ht=l.useCallback(()=>{i||u||s.length===0||((0,A.announce)(Qe(s.map(n=>n.name))),g([]))},[i,u,s,g]),Ct=l.useCallback(()=>{!i&&!u&&oe.current?.click()},[i,u]),I=l.useRef(null),x=l.useRef(null),ae=l.useRef(""),h=(0,je.useCallbackRef)(()=>{let n=x.current;if(!n)return;let d=W&&v&&s.length===0?W:"";n.setCustomValidity(ae.current||d)}),kt=l.useCallback(n=>{ae.current=n,h()},[h]);l.useImperativeHandle(vt,()=>{let n={checkValidity:()=>x.current?.checkValidity()??!0,reportValidity:()=>x.current?.reportValidity()??!0,setCustomValidity:kt,addFiles:d=>ie.current(d)};return I.current?Object.assign(I.current,n):n}),(0,Ye.useFormReset)(I,()=>g(t));let le=l.useRef(null);l.useEffect(()=>{let n=le.current;if(!n)return;let d=Mt(s);d&&(n.files=d)},[s]);let ne=ft||v&&s.length===0;return l.useEffect(()=>{h()},[h,W,v,s]),l.useEffect(()=>{if(!ee)return;let n=d=>{let C=d.target;C instanceof Element&&C.closest('[data-part="dropzone"]')||d.preventDefault()};return document.addEventListener("dragover",n),document.addEventListener("drop",n),()=>{document.removeEventListener("dragover",n),document.removeEventListener("drop",n)}},[ee]),(0,U.jsxs)(ot,{inputRef:oe,files:s,disabled:i,accept:r,multiple:a,addFiles:P,removeFile:xt,clearFiles:ht,openPicker:Ct,removeLabel:mt,readOnly:u,directory:ct,capture:ut,labelId:Rt,labelPresent:Pt,setLabelPresent:It,descriptionId:re,required:v,invalid:ne,children:[(0,U.jsx)(_e.Primitive.div,{"data-disabled":i?"":void 0,...te,...(0,Ze.skdxPart)("file-upload","root",te.className),ref:I,children:bt??(0,U.jsx)(Je,{showList:Ft,showPreview:yt,renderFile:gt,fileStatus:Ut})}),_&&(0,U.jsx)(J.HiddenInput,{ref:le,type:"file",name:_,multiple:a,accept:r,disabled:i,form:j}),(0,U.jsx)(J.HiddenInput,{ref:x,type:"text",required:v,disabled:i,form:j,value:s.map(n=>n.name).join(", ")}),v&&(0,U.jsx)(tt.VisuallyHidden,{id:re,children:Vt(ne)})]})});Q.displayName="FileUpload";var $=f(require("react"),1),rt=require("../utils/part.cjs"),it=require("../utils/primitive.cjs");var lt=require("react/jsx-runtime"),at=$.forwardRef((e,t)=>{let o=m("FileUploadLabel"),{setLabelPresent:r}=o;return $.useEffect(()=>(r(!0),()=>r(!1)),[r]),(0,lt.jsx)(it.Primitive.span,{id:o.labelId,...e,...(0,rt.skdxPart)("file-upload","label",e.className),ref:t})});at.displayName="FileUploadLabel";var nt=f(require("react"),1),st=require("../utils/part.cjs"),G=require("../utils/primitive.cjs");var pt=require("react/jsx-runtime"),dt=nt.forwardRef((e,t)=>{let o=m("FileUploadClear"),r=o.files.length===0;return(0,pt.jsx)(G.Primitive.button,{type:"button",disabled:o.disabled||o.readOnly||r,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...(0,st.skdxPart)("file-upload","clear",e.className),ref:t,onClick:(0,G.composeEventHandlers)(e.onClick,()=>{o.clearFiles()})})});dt.displayName="FileUploadClear";0&&(module.exports={FileUpload,FileUploadClear,FileUploadDropzone,FileUploadInput,FileUploadItem,FileUploadItemDelete,FileUploadItemGroup,FileUploadItemName,FileUploadItemPreview,FileUploadItemProvider,FileUploadItemSizeText,FileUploadLabel,FileUploadProvider,FileUploadTrigger,useFileUploadContext,useFileUploadItemContext});

package/dist/file-upload/FileUpload.d.cts

@@ -1,22 +1,14 @@
 import * as React from 'react';
-import type { FileUploadContextValue, FileUploadProps } from './types.cjs';
+import type { FileUploadContextValue, FileUploadHandle, FileUploadProps } from './types.cjs';
 /**
- * Controllable `File[]` list. `FileUploadDropzone`/`FileUploadTrigger` both
- * just proxy a click to a visually-hidden native `<input type="file">`
- * (`FileUploadInput`) — the OS file dialog and drag/drop are the platform's
- * job, this component only tracks the resulting file list.
+ * Controllable `File[]` list. Parts proxy to a visually-hidden native
+ * `<input type="file">` for the OS picker and drag/drop; this component
+ * tracks the resulting files, filtering through `accept` and `multiple`.
  */
 /**
- * Reads the state a {@link FileUpload} root publishes to its parts:
- * the current `files`, the `accept`/`multiple`/`disabled` settings, the ref to
- * the visually-hidden native `<input type="file">`, and
- * `addFiles`/`removeFile`/`openPicker`.
- *
- * `FileUploadDropzone`, `FileUploadTrigger`, `FileUploadInput` and
- * `FileUploadItemDelete` each read it under their own name, which is the name
- * the hook puts in the error it throws when one of them is rendered outside a
- * `FileUpload` — every one of those parts is a proxy to the root's input, and a
- * proxy with no target silently does nothing. Not part of the public API.
+ * Publishes the state a {@link FileUpload} root owns to its parts: `files`,
+ * `accept`, `multiple`, `disabled`, refs, and imperative methods. Each part
+ * reads it under its own name for error context. Not part of the public API.
  *
  * @internal
  */
@@ -27,33 +19,39 @@ export declare const FileUploadProvider: {
     displayName: string;
 }, useFileUploadContext: (consumerName: string) => FileUploadContextValue;
 /**
- * Root of a file-selection widget: owns a controllable `File[]` list and
- * hands it down to `FileUploadDropzone` / `FileUploadTrigger` /
- * `FileUploadInput` / `FileUploadItem` / `FileUploadItemDelete` via context.
- * Sets `data-disabled` when `disabled`. Renders a plain `<div>`.
+ * Controllable file-selection root: owns a `File[]` list, hands it to parts
+ * via context, sets `data-disabled`. Parts proxy to a visually-hidden native
+ * `<input type="file">` for OS picker/drag-drop; this component filters
+ * through `accept` (native attribute only filters the picker, not drag-drop)
+ * and handles `multiple`. Works controlled or uncontrolled.
  *
- * The OS file dialog and drag-and-drop are the platform's job —
- * `FileUploadDropzone`/`FileUploadTrigger` both just proxy to a
- * visually-hidden native `<input type="file">` (`FileUploadInput`); this
- * component only tracks the resulting files, filtering both entry points
- * through `accept` (the native attribute alone only filters the picker, not
- * drag-and-drop) and applying `multiple`. Works controlled (`value` +
- * `onValueChange`) or uncontrolled (`defaultValue`).
+ * Given no children, derives its own dropzone, trigger, and file list. Given
+ * children, renders them verbatim for full manual composition.
  *
  * @example
  * ```tsx
+ * <FileUpload accept="image/*" multiple onValueChange={setFiles} />
+ * ```
+ *
+ * @example Full manual composition — `@skdx/react/primitives/file-upload`.
+ * ```tsx
+ * import { FileUpload, FileUploadDropzone, FileUploadInput, FileUploadItem, FileUploadItemDelete, FileUploadItemGroup, FileUploadItemName, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger } from '@skdx/react/primitives/file-upload';
+ *
  * <FileUpload accept="image/*" multiple onValueChange={setFiles}>
- *   <FileUploadDropzone>
- *     Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
- *     <FileUploadInput />
- *   </FileUploadDropzone>
- *   {files.map((file, index) => (
- *     <FileUploadItem key={file.name} index={index}>
- *       {file.name}
- *       <FileUploadItemDelete index={index} />
- *     </FileUploadItem>
- *   ))}
+ *   <FileUploadLabel>Attachments</FileUploadLabel>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ *   <FileUploadItemGroup>
+ *     {files.map((file) => (
+ *       <FileUploadItem key={file.name} file={file}>
+ *         <FileUploadItemName />
+ *         <FileUploadItemSizeText />
+ *         <FileUploadItemDelete />
+ *       </FileUploadItem>
+ *     ))}
+ *   </FileUploadItemGroup>
  * </FileUpload>
  * ```
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: React.ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & React.RefAttributes<FileUploadHandle>>;

package/dist/file-upload/FileUpload.d.ts

@@ -1,22 +1,14 @@
 import * as React from 'react';
-import type { FileUploadContextValue, FileUploadProps } from './types.js';
+import type { FileUploadContextValue, FileUploadHandle, FileUploadProps } from './types.js';
 /**
- * Controllable `File[]` list. `FileUploadDropzone`/`FileUploadTrigger` both
- * just proxy a click to a visually-hidden native `<input type="file">`
- * (`FileUploadInput`) — the OS file dialog and drag/drop are the platform's
- * job, this component only tracks the resulting file list.
+ * Controllable `File[]` list. Parts proxy to a visually-hidden native
+ * `<input type="file">` for the OS picker and drag/drop; this component
+ * tracks the resulting files, filtering through `accept` and `multiple`.
  */
 /**
- * Reads the state a {@link FileUpload} root publishes to its parts:
- * the current `files`, the `accept`/`multiple`/`disabled` settings, the ref to
- * the visually-hidden native `<input type="file">`, and
- * `addFiles`/`removeFile`/`openPicker`.
- *
- * `FileUploadDropzone`, `FileUploadTrigger`, `FileUploadInput` and
- * `FileUploadItemDelete` each read it under their own name, which is the name
- * the hook puts in the error it throws when one of them is rendered outside a
- * `FileUpload` — every one of those parts is a proxy to the root's input, and a
- * proxy with no target silently does nothing. Not part of the public API.
+ * Publishes the state a {@link FileUpload} root owns to its parts: `files`,
+ * `accept`, `multiple`, `disabled`, refs, and imperative methods. Each part
+ * reads it under its own name for error context. Not part of the public API.
  *
  * @internal
  */
@@ -27,33 +19,39 @@ export declare const FileUploadProvider: {
     displayName: string;
 }, useFileUploadContext: (consumerName: string) => FileUploadContextValue;
 /**
- * Root of a file-selection widget: owns a controllable `File[]` list and
- * hands it down to `FileUploadDropzone` / `FileUploadTrigger` /
- * `FileUploadInput` / `FileUploadItem` / `FileUploadItemDelete` via context.
- * Sets `data-disabled` when `disabled`. Renders a plain `<div>`.
+ * Controllable file-selection root: owns a `File[]` list, hands it to parts
+ * via context, sets `data-disabled`. Parts proxy to a visually-hidden native
+ * `<input type="file">` for OS picker/drag-drop; this component filters
+ * through `accept` (native attribute only filters the picker, not drag-drop)
+ * and handles `multiple`. Works controlled or uncontrolled.
  *
- * The OS file dialog and drag-and-drop are the platform's job —
- * `FileUploadDropzone`/`FileUploadTrigger` both just proxy to a
- * visually-hidden native `<input type="file">` (`FileUploadInput`); this
- * component only tracks the resulting files, filtering both entry points
- * through `accept` (the native attribute alone only filters the picker, not
- * drag-and-drop) and applying `multiple`. Works controlled (`value` +
- * `onValueChange`) or uncontrolled (`defaultValue`).
+ * Given no children, derives its own dropzone, trigger, and file list. Given
+ * children, renders them verbatim for full manual composition.
  *
  * @example
  * ```tsx
+ * <FileUpload accept="image/*" multiple onValueChange={setFiles} />
+ * ```
+ *
+ * @example Full manual composition — `@skdx/react/primitives/file-upload`.
+ * ```tsx
+ * import { FileUpload, FileUploadDropzone, FileUploadInput, FileUploadItem, FileUploadItemDelete, FileUploadItemGroup, FileUploadItemName, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger } from '@skdx/react/primitives/file-upload';
+ *
  * <FileUpload accept="image/*" multiple onValueChange={setFiles}>
- *   <FileUploadDropzone>
- *     Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
- *     <FileUploadInput />
- *   </FileUploadDropzone>
- *   {files.map((file, index) => (
- *     <FileUploadItem key={file.name} index={index}>
- *       {file.name}
- *       <FileUploadItemDelete index={index} />
- *     </FileUploadItem>
- *   ))}
+ *   <FileUploadLabel>Attachments</FileUploadLabel>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadTrigger>browse</FileUploadTrigger>
+ *   <FileUploadInput />
+ *   <FileUploadItemGroup>
+ *     {files.map((file) => (
+ *       <FileUploadItem key={file.name} file={file}>
+ *         <FileUploadItemName />
+ *         <FileUploadItemSizeText />
+ *         <FileUploadItemDelete />
+ *       </FileUploadItem>
+ *     ))}
+ *   </FileUploadItemGroup>
  * </FileUpload>
  * ```
  */
-export declare const FileUpload: React.ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const FileUpload: React.ForwardRefExoticComponent<Omit<FileUploadProps, "ref"> & React.RefAttributes<FileUploadHandle>>;

package/dist/file-upload/FileUpload.js

@@ -1 +1 @@
-import*as a from"react";import{createSafeContext as W}from"../utils/createContext.js";import{skdxPart as B}from"../utils/part.js";import{Primitive as A}from"../utils/primitive.js";import{useControllableState as K}from"../utils/useControllableState.js";import{jsx as v}from"react/jsx-runtime";var[_,n]=W("FileUpload");function q(o,t){if(!t)return!0;let e=t.split(",").map(i=>i.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let l=o.name.toLowerCase(),r=o.type.toLowerCase();return e.some(i=>i.startsWith(".")?l.endsWith(i):i.endsWith("/*")?r.startsWith(i.slice(0,-1)):r===i)}function G(o,t){let e=[];return q(o,t.accept)||e.push("file-invalid-type"),t.maxFileSize!==void 0&&o.size>t.maxFileSize&&e.push("file-too-large"),t.minFileSize!==void 0&&o.size<t.minFileSize&&e.push("file-too-small"),e.push(...t.validate?.(o)??[]),e}var C=a.forwardRef(({value:o,defaultValue:t=[],onValueChange:e,accept:l,multiple:r=!1,disabled:i=!1,maxFiles:g,maxFileSize:y,minFileSize:P,validate:h,onFileReject:b,...x},M)=>{let R=a.useRef(null),[c=[],s]=K({prop:o,defaultProp:t,onChange:e}),S=a.useCallback(u=>{if(i)return;let m=r?c:[],D=(r?g??1/0:1)-m.length,p=[];for(let F of Array.from(u)){let U=G(F,{accept:l,maxFileSize:y,minFileSize:P,validate:h});if(p.length>=D&&U.push("too-many-files"),U.length>0){b?.({file:F,errors:U});continue}p.push(F)}p.length!==0&&s([...m,...p])},[i,r,c,g,s,l,y,P,h,b]),O=a.useCallback(u=>{s((m=[])=>m.filter((D,p)=>p!==u))},[s]),V=a.useCallback(()=>{i||R.current?.click()},[i]);return v(_,{inputRef:R,files:c,disabled:i,accept:l,multiple:r,addFiles:S,removeFile:O,openPicker:V,children:v(A.div,{"data-disabled":i?"":void 0,...x,...B("file-upload","root",x.className),ref:M})})});C.displayName="FileUpload";import*as f from"react";import{skdxPart as J}from"../utils/part.js";import{composeEventHandlers as d,Primitive as Q}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var I=f.forwardRef((o,t)=>{let e=n("FileUploadDropzone"),[l,r]=f.useState(!1);return X(Q.div,{role:"button",tabIndex:e.disabled?-1:0,"aria-disabled":e.disabled||void 0,"data-disabled":e.disabled?"":void 0,"data-dragging":l?"":void 0,...o,...J("file-upload","dropzone",o.className),ref:t,onClick:d(o.onClick,()=>e.openPicker()),onKeyDown:d(o.onKeyDown,i=>{(i.key==="Enter"||i.key===" ")&&!e.disabled&&(i.preventDefault(),e.openPicker())}),onDragOver:d(o.onDragOver,i=>{i.preventDefault(),e.disabled||r(!0)}),onDragLeave:d(o.onDragLeave,()=>r(!1)),onDrop:d(o.onDrop,i=>{i.preventDefault(),r(!1),e.disabled||e.addFiles(i.dataTransfer.files)})})});I.displayName="FileUploadDropzone";import*as k from"react";import{useComposedRefs as Y}from"../utils/composeRefs.js";import{HiddenInput as Z}from"../utils/hiddenInput.js";import{skdxPart as $}from"../utils/part.js";import{composeEventHandlers as j}from"../utils/primitive.js";import{jsx as ee}from"react/jsx-runtime";var w=k.forwardRef((o,t)=>{let e=n("FileUploadInput"),l=Y(t,e.inputRef);return ee(Z,{type:"file",accept:e.accept,multiple:e.multiple,disabled:e.disabled,...o,...$("file-upload","input",o.className),ref:l,onChange:j(o.onChange,r=>{r.target.files&&e.addFiles(r.target.files),r.target.value=""})})});w.displayName="FileUploadInput";import*as T from"react";import{skdxPart as oe}from"../utils/part.js";import{Primitive as te}from"../utils/primitive.js";import{jsx as ie}from"react/jsx-runtime";var E=T.forwardRef(({index:o,status:t="idle",progress:e,...l},r)=>ie(te.div,{"data-status":t,"data-progress":e,...l,...oe("file-upload","item",l.className),ref:r}));E.displayName="FileUploadItem";import*as L from"react";import{skdxPart as le}from"../utils/part.js";import{composeEventHandlers as re,Primitive as ae}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var z=L.forwardRef(({index:o,...t},e)=>{let l=n("FileUploadItemDelete");return ne(ae.button,{type:"button","aria-label":"Remove file",disabled:l.disabled,"data-disabled":l.disabled?"":void 0,...t,...le("file-upload","item-delete",t.className),ref:e,onClick:re(t.onClick,()=>{l.disabled||l.removeFile(o)})})});z.displayName="FileUploadItemDelete";import*as H from"react";import{skdxPart as pe}from"../utils/part.js";import{composeEventHandlers as de,Primitive as se}from"../utils/primitive.js";import{jsx as me}from"react/jsx-runtime";var N=H.forwardRef((o,t)=>{let e=n("FileUploadTrigger");return me(se.button,{type:"button",disabled:e.disabled,"data-disabled":e.disabled?"":void 0,...o,...pe("file-upload","trigger",o.className),ref:t,onClick:de(o.onClick,()=>e.openPicker())})});N.displayName="FileUploadTrigger";export{C as FileUpload,I as FileUploadDropzone,w as FileUploadInput,E as FileUploadItem,z as FileUploadItemDelete,N as FileUploadTrigger};
+import*as a from"react";import{createSafeContext as Ft}from"../utils/createContext.js";import{useFormReset as yt}from"../utils/formControl.js";import{HiddenInput as Fe}from"../utils/hiddenInput.js";import{announce as B}from"../utils/liveAnnouncer.js";import{skdxPart as Ut}from"../utils/part.js";import{Primitive as gt}from"../utils/primitive.js";import{useCallbackRef as bt}from"../utils/useCallbackRef.js";import{useControllableState as vt}from"../utils/useControllableState.js";import{VisuallyHidden as Rt}from"../utils/visuallyHidden.js";import*as k from"react";import{skdxPart as Se}from"../utils/part.js";import{composeEventHandlers as b,Primitive as Me}from"../utils/primitive.js";import{jsx as Oe}from"react/jsx-runtime";var E=k.forwardRef(({disableClick:e=!1,...t},o)=>{let r=p("FileUploadDropzone"),[l,i]=k.useState(!1),y=[t["aria-describedby"],r.required?r.descriptionId:void 0].filter(Boolean).join(" ")||void 0;return Oe(Me.div,{role:"button","aria-labelledby":r.labelPresent?r.labelId:void 0,tabIndex:r.disabled?-1:0,"aria-disabled":r.disabled||r.readOnly||void 0,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,"data-dragging":l?"":void 0,"data-invalid":r.invalid?"":void 0,...t,...Se("file-upload","dropzone",t.className),"aria-describedby":y,ref:o,onClick:b(t.onClick,()=>{e||r.openPicker()}),onKeyDown:b(t.onKeyDown,m=>{(m.key==="Enter"||m.key===" ")&&!r.disabled&&!r.readOnly&&(m.preventDefault(),r.openPicker())}),onDragOver:b(t.onDragOver,m=>{m.preventDefault(),!r.disabled&&!r.readOnly&&i(!0)}),onDragLeave:b(t.onDragLeave,()=>i(!1)),onDrop:b(t.onDrop,m=>{m.preventDefault(),i(!1),!r.disabled&&!r.readOnly&&r.addFiles(m.dataTransfer.files)})})});E.displayName="FileUploadDropzone";import*as te from"react";import{useComposedRefs as Ve}from"../utils/composeRefs.js";import{HiddenInput as Be}from"../utils/hiddenInput.js";import{skdxPart as Ae}from"../utils/part.js";import{composeEventHandlers as $e}from"../utils/primitive.js";import{jsx as Ge}from"react/jsx-runtime";var T=te.forwardRef((e,t)=>{let o=p("FileUploadInput"),r=Ve(t,o.inputRef);return Ge(Be,{type:"file",accept:o.accept,multiple:o.multiple,...o.directory?{webkitdirectory:""}:{},capture:o.capture,disabled:o.disabled||o.readOnly,...e,...Ae("file-upload","input",e.className),ref:r,onChange:$e(e.onChange,l=>{l.target.files&&o.addFiles(l.target.files),l.target.value=""})})});T.displayName="FileUploadInput";import*as re from"react";import{createSafeContext as We}from"../utils/createContext.js";import{skdxPart as qe}from"../utils/part.js";import{Primitive as Ke}from"../utils/primitive.js";import{jsx as oe}from"react/jsx-runtime";var[Je,u]=We("FileUploadItem"),H=re.forwardRef(({file:e,status:t="idle",progress:o,...r},l)=>oe(Je,{file:e,children:oe(Ke.div,{"data-state":t,"data-progress":o,...r,...qe("file-upload","item",r.className),ref:l})}));H.displayName="FileUploadItem";import*as ae from"react";import{skdxPart as Qe}from"../utils/part.js";import{composeEventHandlers as Xe,Primitive as Ye}from"../utils/primitive.js";function ie(e){let t=e.closest('[data-part="root"]');if(!t)return;let o=[...t.querySelectorAll('[data-part="item-delete"]')],r=o.indexOf(e);(o[r+1]??o[r-1]??t.querySelector('[data-part="dropzone"], [data-part="trigger"]'))?.focus()}import{jsx as Ze}from"react/jsx-runtime";var N=ae.forwardRef(({file:e,...t},o)=>{let r=p("FileUploadItemDelete"),l=u("FileUploadItemDelete"),i=e??l.file;return Ze(Ye.button,{type:"button","aria-label":r.removeLabel(i.name),disabled:r.disabled||r.readOnly,"data-disabled":r.disabled?"":void 0,"data-readonly":r.readOnly?"":void 0,...t,...Qe("file-upload","item-delete",t.className),ref:o,onClick:Xe(t.onClick,y=>{r.disabled||r.readOnly||(ie(y.currentTarget),r.removeFile(i))})})});N.displayName="FileUploadItemDelete";import*as le from"react";import{skdxPart as _e}from"../utils/part.js";import{Primitive as je}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";var z=le.forwardRef((e,t)=>et(je.div,{...e,..._e("file-upload","item-group",e.className),ref:t}));z.displayName="FileUploadItemGroup";import*as ne from"react";import{skdxPart as tt}from"../utils/part.js";import{Primitive as ot}from"../utils/primitive.js";import{jsx as rt}from"react/jsx-runtime";var S=ne.forwardRef(({children:e,...t},o)=>{let r=u("FileUploadItemName");return rt(ot.span,{...t,...tt("file-upload","item-name",t.className),ref:o,children:e??r.file.name})});S.displayName="FileUploadItemName";import*as se from"react";import{skdxPart as it}from"../utils/part.js";import{Primitive as at}from"../utils/primitive.js";import{jsx as lt}from"react/jsx-runtime";var M=se.forwardRef((e,t)=>(u("FileUploadItemPreview"),lt(at.div,{...e,...it("file-upload","item-preview",e.className),ref:t})));M.displayName="FileUploadItemPreview";import*as pe from"react";import{skdxPart as nt}from"../utils/part.js";import{Primitive as st}from"../utils/primitive.js";import{jsx as pt}from"react/jsx-runtime";var de=["byte","kilobyte","megabyte","gigabyte","terabyte"];function dt(e){let t=e,o=0;for(;t>=1e3&&o<de.length-1;)t/=1e3,o+=1;return new Intl.NumberFormat(void 0,{style:"unit",unit:de[o],unitDisplay:"narrow",maximumFractionDigits:1}).format(t)}var O=pe.forwardRef(({children:e,...t},o)=>{let r=u("FileUploadItemSizeText");return pt(st.span,{...t,...nt("file-upload","item-size",t.className),ref:o,children:e??dt(r.file.size)})});O.displayName="FileUploadItemSizeText";import*as me from"react";import{skdxPart as mt}from"../utils/part.js";import{composeEventHandlers as ft,Primitive as ct}from"../utils/primitive.js";import{jsx as ut}from"react/jsx-runtime";var V=me.forwardRef((e,t)=>{let o=p("FileUploadTrigger");return ut(ct.button,{type:"button",disabled:o.disabled||o.readOnly,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...mt("file-upload","trigger",e.className),ref:t,onClick:ft(e.onClick,r=>{r.stopPropagation(),o.openPicker()})})});V.displayName="FileUploadTrigger";import{Fragment as fe,jsx as c,jsxs as ce}from"react/jsx-runtime";var ue=({showList:e,showPreview:t,renderFile:o,fileStatus:r})=>{let l=p("FileUpload");return ce(fe,{children:[c(E,{children:"Drag files here"}),c(V,{children:"Browse"}),c(T,{}),e?c(z,{children:l.files.map(i=>c(H,{file:i,...r?.(i),children:o?o(i):ce(fe,{children:[t?c(M,{}):null,c(S,{}),c(O,{}),c(N,{})]})},i.name))}):null]})};import{jsx as v,jsxs as Lt}from"react/jsx-runtime";var[Pt,p]=Ft("FileUpload");function It(e,t){if(!t)return!0;let o=t.split(",").map(i=>i.trim().toLowerCase()).filter(Boolean);if(o.length===0)return!0;let r=e.name.toLowerCase(),l=e.type.toLowerCase();return o.some(i=>i.startsWith(".")?r.endsWith(i):i.endsWith("/*")?l.startsWith(i.slice(0,-1)):l===i)}function xt(e){if(typeof DataTransfer>"u")return null;let t=new DataTransfer;for(let o of e)t.items.add(o);return t.files}var ht=e=>`Remove ${e}`;function ye(e){return e.length===0?"":e.length===1?`${e[0]} removed`:`${e.length} files removed`}function Ct(e){return e?"Required. No file selected":"Required"}function kt(e,t){let o=[];if(e>0&&o.push(`${e} ${e===1?"file":"files"} added`),t.length>0){let r=[...new Set(t)].join(", "),l=t.length;o.push(`${l} ${l===1?"file":"files"} refused: ${r}`)}return o.join(". ")}function wt(e,t){let o=[];return It(e,t.accept)||o.push("file-invalid-type"),t.maxFileSize!==void 0&&e.size>t.maxFileSize&&o.push("file-too-large"),t.minFileSize!==void 0&&e.size<t.minFileSize&&o.push("file-too-small"),o.push(...t.validate?.(e)??[]),o}var Ue=a.forwardRef(({value:e,defaultValue:t=[],onValueChange:o,accept:r,multiple:l=!1,disabled:i=!1,maxFiles:y,maxFileSize:m,minFileSize:A,validate:$,onFileReject:G,removeLabel:be=ht,name:W,form:q,required:U=!1,requiredMessage:L,readOnly:f=!1,invalid:ve=!1,directory:Re=!1,capture:Pe,preventDocumentDrop:K=!0,showList:Ie=!0,showPreview:xe=!1,fileStatus:he,renderFile:Ce,children:ke,...J},we)=>{let Q=a.useRef(null),Le=a.useId(),X=a.useId(),[De,Ee]=a.useState(!1),[s=[],F]=vt({prop:e,defaultProp:t,onChange:o}),R=a.useCallback(n=>{if(i||f)return;let d=l?s:[],h=(l?y??1/0:1)-d.length,g=[],ee=[];for(let D of Array.from(n)){let C=wt(D,{accept:r,maxFileSize:m,minFileSize:A,validate:$});if(g.length>=h&&C.push("too-many-files"),C.length>0){ee.push(C[0]),G?.({file:D,errors:C});continue}g.push(D)}B(kt(g.length,ee)),g.length!==0&&F([...d,...g])},[i,f,l,s,y,F,r,m,A,$,G]),Y=a.useRef(R);a.useEffect(()=>{Y.current=R},[R]);let Te=a.useCallback(n=>{if(i||f)return;let d=s.indexOf(n);d!==-1&&(B(ye([n.name])),F([...s.slice(0,d),...s.slice(d+1)]))},[i,f,s,F]),He=a.useCallback(()=>{i||f||s.length===0||(B(ye(s.map(n=>n.name))),F([]))},[i,f,s,F]),Ne=a.useCallback(()=>{!i&&!f&&Q.current?.click()},[i,f]),P=a.useRef(null),I=a.useRef(null),Z=a.useRef(""),x=bt(()=>{let n=I.current;if(!n)return;let d=L&&U&&s.length===0?L:"";n.setCustomValidity(Z.current||d)}),ze=a.useCallback(n=>{Z.current=n,x()},[x]);a.useImperativeHandle(we,()=>{let n={checkValidity:()=>I.current?.checkValidity()??!0,reportValidity:()=>I.current?.reportValidity()??!0,setCustomValidity:ze,addFiles:d=>Y.current(d)};return P.current?Object.assign(P.current,n):n}),yt(P,()=>F(t));let _=a.useRef(null);a.useEffect(()=>{let n=_.current;if(!n)return;let d=xt(s);d&&(n.files=d)},[s]);let j=ve||U&&s.length===0;return a.useEffect(()=>{x()},[x,L,U,s]),a.useEffect(()=>{if(!K)return;let n=d=>{let h=d.target;h instanceof Element&&h.closest('[data-part="dropzone"]')||d.preventDefault()};return document.addEventListener("dragover",n),document.addEventListener("drop",n),()=>{document.removeEventListener("dragover",n),document.removeEventListener("drop",n)}},[K]),Lt(Pt,{inputRef:Q,files:s,disabled:i,accept:r,multiple:l,addFiles:R,removeFile:Te,clearFiles:He,openPicker:Ne,removeLabel:be,readOnly:f,directory:Re,capture:Pe,labelId:Le,labelPresent:De,setLabelPresent:Ee,descriptionId:X,required:U,invalid:j,children:[v(gt.div,{"data-disabled":i?"":void 0,...J,...Ut("file-upload","root",J.className),ref:P,children:ke??v(ue,{showList:Ie,showPreview:xe,renderFile:Ce,fileStatus:he})}),W&&v(Fe,{ref:_,type:"file",name:W,multiple:l,accept:r,disabled:i,form:q}),v(Fe,{ref:I,type:"text",required:U,disabled:i,form:q,value:s.map(n=>n.name).join(", ")}),U&&v(Rt,{id:X,children:Ct(j)})]})});Ue.displayName="FileUpload";import*as w from"react";import{skdxPart as Dt}from"../utils/part.js";import{Primitive as Et}from"../utils/primitive.js";import{jsx as Ht}from"react/jsx-runtime";var Tt=w.forwardRef((e,t)=>{let o=p("FileUploadLabel"),{setLabelPresent:r}=o;return w.useEffect(()=>(r(!0),()=>r(!1)),[r]),Ht(Et.span,{id:o.labelId,...e,...Dt("file-upload","label",e.className),ref:t})});Tt.displayName="FileUploadLabel";import*as ge from"react";import{skdxPart as Nt}from"../utils/part.js";import{composeEventHandlers as zt,Primitive as St}from"../utils/primitive.js";import{jsx as Ot}from"react/jsx-runtime";var Mt=ge.forwardRef((e,t)=>{let o=p("FileUploadClear"),r=o.files.length===0;return Ot(St.button,{type:"button",disabled:o.disabled||o.readOnly||r,"data-disabled":o.disabled?"":void 0,"data-readonly":o.readOnly?"":void 0,...e,...Nt("file-upload","clear",e.className),ref:t,onClick:zt(e.onClick,()=>{o.clearFiles()})})});Mt.displayName="FileUploadClear";export{Ue as FileUpload,Mt as FileUploadClear,E as FileUploadDropzone,T as FileUploadInput,H as FileUploadItem,N as FileUploadItemDelete,z as FileUploadItemGroup,S as FileUploadItemName,M as FileUploadItemPreview,Je as FileUploadItemProvider,O as FileUploadItemSizeText,Tt as FileUploadLabel,Pt as FileUploadProvider,V as FileUploadTrigger,p as useFileUploadContext,u as useFileUploadItemContext};

package/dist/file-upload/FileUploadAnatomy.d.cts

@@ -0,0 +1,9 @@
+import type { FileUploadProps } from './types.cjs';
+/**
+ * The anatomy a {@link FileUpload} draws given no manually-composed children:
+ * a dropzone plus browse trigger and the hidden input, and — while
+ * `showList` — one derived row per selected file.
+ *
+ * @internal
+ */
+export declare const FileUploadAnatomy: ({ showList, showPreview, renderFile, fileStatus, }: Pick<FileUploadProps, "showList" | "showPreview" | "renderFile" | "fileStatus">) => import("react").JSX.Element;

package/dist/file-upload/FileUploadAnatomy.d.ts

@@ -0,0 +1,9 @@
+import type { FileUploadProps } from './types.js';
+/**
+ * The anatomy a {@link FileUpload} draws given no manually-composed children:
+ * a dropzone plus browse trigger and the hidden input, and — while
+ * `showList` — one derived row per selected file.
+ *
+ * @internal
+ */
+export declare const FileUploadAnatomy: ({ showList, showPreview, renderFile, fileStatus, }: Pick<FileUploadProps, "showList" | "showPreview" | "renderFile" | "fileStatus">) => import("react").JSX.Element;

package/dist/file-upload/FileUploadClear.d.cts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { FileUploadClearProps } from './types.cjs';
+/**
+ * Button that empties file list, firing single `onValueChange([])`. Disabled when list is empty, root is disabled/readOnly, or list is already empty (to prevent "broken control" appearance for screen reader users).
+ *
+ * @example
+ * ```tsx
+ * <FileUpload multiple>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadInput />
+ *   <FileUploadClear>Remove all</FileUploadClear>
+ * </FileUpload>
+ * ```
+ */
+export declare const FileUploadClear: React.ForwardRefExoticComponent<Omit<FileUploadClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/FileUploadClear.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { FileUploadClearProps } from './types.js';
+/**
+ * Button that empties file list, firing single `onValueChange([])`. Disabled when list is empty, root is disabled/readOnly, or list is already empty (to prevent "broken control" appearance for screen reader users).
+ *
+ * @example
+ * ```tsx
+ * <FileUpload multiple>
+ *   <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ *   <FileUploadInput />
+ *   <FileUploadClear>Remove all</FileUploadClear>
+ * </FileUpload>
+ * ```
+ */
+export declare const FileUploadClear: React.ForwardRefExoticComponent<Omit<FileUploadClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/file-upload/FileUploadDropzone.d.cts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import type { FileUploadDropzoneProps } from './types.cjs';
 /**
- * Drag-and-drop / click-to-browse target: `role="button"`, keyboard
- * activatable (Enter/Space), with `aria-disabled`/`data-disabled` and
- * `data-dragging` (set while a drag is over it) reflecting state. Clicking
- * or activating it, or dropping files onto it, opens the native picker or
- * adds the dropped files respectively.
+ * Drag-drop / click-to-browse target: `role="button"`, keyboard activatable
+ * (Enter/Space), with `aria-disabled` and `data-dragging` reflecting state.
+ * Siblings (not children): `FileUploadTrigger` and `FileUploadInput`.
+ *
+ * Must be named: it's the only accessible part (input is `aria-hidden`).
+ * Content text is the name; use `FileUploadLabel` with `aria-labelledby` for external labels.
+ * Pass `disableClick` to disable only clicking, not drag-drop or keyboard.
  *
  * @example
  * ```tsx
- * <FileUploadDropzone>
- *   Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
- *   <FileUploadInput />
- * </FileUploadDropzone>
+ * <FileUploadLabel>Attachments</FileUploadLabel>
+ * <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ * <FileUploadTrigger>browse</FileUploadTrigger>
+ * <FileUploadInput />
  * ```
  */
 export declare const FileUploadDropzone: React.ForwardRefExoticComponent<Omit<FileUploadDropzoneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadDropzone.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import type { FileUploadDropzoneProps } from './types.js';
 /**
- * Drag-and-drop / click-to-browse target: `role="button"`, keyboard
- * activatable (Enter/Space), with `aria-disabled`/`data-disabled` and
- * `data-dragging` (set while a drag is over it) reflecting state. Clicking
- * or activating it, or dropping files onto it, opens the native picker or
- * adds the dropped files respectively.
+ * Drag-drop / click-to-browse target: `role="button"`, keyboard activatable
+ * (Enter/Space), with `aria-disabled` and `data-dragging` reflecting state.
+ * Siblings (not children): `FileUploadTrigger` and `FileUploadInput`.
+ *
+ * Must be named: it's the only accessible part (input is `aria-hidden`).
+ * Content text is the name; use `FileUploadLabel` with `aria-labelledby` for external labels.
+ * Pass `disableClick` to disable only clicking, not drag-drop or keyboard.
  *
  * @example
  * ```tsx
- * <FileUploadDropzone>
- *   Drag files here or <FileUploadTrigger>browse</FileUploadTrigger>
- *   <FileUploadInput />
- * </FileUploadDropzone>
+ * <FileUploadLabel>Attachments</FileUploadLabel>
+ * <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ * <FileUploadTrigger>browse</FileUploadTrigger>
+ * <FileUploadInput />
  * ```
  */
 export declare const FileUploadDropzone: React.ForwardRefExoticComponent<Omit<FileUploadDropzoneProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/file-upload/FileUploadInput.d.cts

@@ -9,10 +9,8 @@ import type { FileUploadInputProps } from './types.cjs';
  *
  * @example
  * ```tsx
- * <FileUploadDropzone>
- *   Drag files here
- *   <FileUploadInput />
- * </FileUploadDropzone>
+ * <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ * <FileUploadInput />
  * ```
  */
 export declare const FileUploadInput: React.ForwardRefExoticComponent<FileUploadInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/file-upload/FileUploadInput.d.ts

@@ -9,10 +9,8 @@ import type { FileUploadInputProps } from './types.js';
  *
  * @example
  * ```tsx
- * <FileUploadDropzone>
- *   Drag files here
- *   <FileUploadInput />
- * </FileUploadDropzone>
+ * <FileUploadDropzone>Drag files here</FileUploadDropzone>
+ * <FileUploadInput />
  * ```
  */
 export declare const FileUploadInput: React.ForwardRefExoticComponent<FileUploadInputProps & React.RefAttributes<HTMLInputElement>>;