@skdx/react 0.27.0 → 0.29.0

package/dist/tag-group/types.d.cts

@@ -1,39 +1,94 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.cjs';
-/** Layout axis of a {@link TagGroup}, deciding which pair of arrow keys moves the roving tab stop. */
+/** Layout axis deciding arrow-key navigation. */
 export type TagGroupOrientation = 'horizontal' | 'vertical';
-/** @internal Shared state distributed from {@link TagGroup} to its `Tag` children via context. Not part of the public API. */
+/** Removal detail passed to `onRemove` handler. */
+export interface TagRemovedDetail {
+    /** Removed tag's label text. */
+    label: string;
+    /** Index the removed tag held. */
+    index: number;
+}
+/** @internal Shared state from TagGroup to Tag children via context. */
 export interface TagGroupContextValue {
-    /**
-     * Index of the tag that currently owns the group's single tab stop. Clamped
-     * to the number of mounted tags, so removing the last tag hands the stop to
-     * the new last one instead of leaving the group unreachable by Tab.
-     */
+    /** Tab stop index; clamped to mounted count. */
     tabStopIndex: number;
-    /** Claims the tab stop for the tag at `index` — called when a tag takes focus, and again after a removal shifts the indices. */
+    /** Claims tab stop for tag at index. */
     setActiveIndex: (index: number) => void;
-    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
-    register: () => () => void;
-    /** Whether the whole group is disabled. */
+    /** Registers mounted tag at index; returns unregister. */
+    register: (index: number) => () => void;
+    /** Reports removal to group as `onRemove` event. */
+    onTagRemoved: (detail: TagRemovedDetail) => void;
+    /** Count of mounted tags. */
+    count: number;
+    /** Id of TagGroupLabel if rendered. */
+    labelId: string | undefined;
+    /** Registers TagGroupLabel id; returns unregister. */
+    registerLabel: (id: string) => () => void;
+    /** True if TagGroupList is rendered. */
+    hasList: boolean;
+    /** Registers TagGroupList; returns unregister. */
+    registerList: () => () => void;
+    /** Root's `aria-label` / `aria-labelledby` forwarded to List. */
+    labelling: {
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+    };
+    /** Layout axis. */
+    orientation: TagGroupOrientation;
+    /** Group disabled state. */
     disabled: boolean;
 }
-/** Props for the {@link TagGroup} root. */
+/** Props for TagGroup root. */
 export interface TagGroupProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Layout axis, exposed as `data-orientation` and used to pick Arrow
-     * Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
+     * Tags to render; ignored if `children` given.
+     * @default undefined
+     */
+    tags?: TagGroupTag[] | undefined;
+    /**
+     * Layout axis for arrow-key navigation, exposed as `data-orientation`.
      * @default 'horizontal'
      */
-    orientation?: TagGroupOrientation;
+    orientation?: TagGroupOrientation | undefined;
     /**
-     * Whether arrow-key navigation wraps from the last tag back to the first
-     * (and vice versa).
+     * Whether arrow-key navigation wraps at group boundaries.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
+    /**
+     * Disables all tags; none can be deleted.
+     * @default false
+     */
+    disabled?: boolean | undefined;
     /**
-     * Disables every {@link Tag} in the group — no tag can be deleted, and each
-     * one mirrors `data-disabled`.
+     * Fired when any tag is removed (single listener for whole collection).
+     * @default undefined
+     */
+    onRemove?: ((detail: TagRemovedDetail) => void) | undefined;
+    /**
+     * Spacing rung the skin packs the tags by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'comfortable' | 'compact' | (string & {}) | undefined;
+}
+/** Single tag entry for TagGroupProps.tags. */
+export interface TagGroupTag {
+    /** Unique identifier; used as element key. */
+    value: string;
+    /** Tag text; rendered and names delete button. */
+    label: string;
+    /**
+     * Disables this tag alone.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+}
+/** Props for {@link TagGroupLabel}, the group's visible heading. */
+export interface TagGroupLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link TagGroupList}, the `<ul>` that holds the tags in the labelled composition. */
+export interface TagGroupListProps extends PrimitivePropsWithRef<'ul'> {
+}
+/** Props for {@link TagGroupEmpty}, rendered only while the group holds no tags. */
+export interface TagGroupEmptyProps extends PrimitivePropsWithRef<'div'> {
 }

package/dist/tag-group/types.d.ts

@@ -1,39 +1,94 @@
 import type { PrimitivePropsWithRef } from '../utils/primitive.js';
-/** Layout axis of a {@link TagGroup}, deciding which pair of arrow keys moves the roving tab stop. */
+/** Layout axis deciding arrow-key navigation. */
 export type TagGroupOrientation = 'horizontal' | 'vertical';
-/** @internal Shared state distributed from {@link TagGroup} to its `Tag` children via context. Not part of the public API. */
+/** Removal detail passed to `onRemove` handler. */
+export interface TagRemovedDetail {
+    /** Removed tag's label text. */
+    label: string;
+    /** Index the removed tag held. */
+    index: number;
+}
+/** @internal Shared state from TagGroup to Tag children via context. */
 export interface TagGroupContextValue {
-    /**
-     * Index of the tag that currently owns the group's single tab stop. Clamped
-     * to the number of mounted tags, so removing the last tag hands the stop to
-     * the new last one instead of leaving the group unreachable by Tab.
-     */
+    /** Tab stop index; clamped to mounted count. */
     tabStopIndex: number;
-    /** Claims the tab stop for the tag at `index` — called when a tag takes focus, and again after a removal shifts the indices. */
+    /** Claims tab stop for tag at index. */
     setActiveIndex: (index: number) => void;
-    /** Registers a mounted tag so the group knows how many exist; returns its unregister. */
-    register: () => () => void;
-    /** Whether the whole group is disabled. */
+    /** Registers mounted tag at index; returns unregister. */
+    register: (index: number) => () => void;
+    /** Reports removal to group as `onRemove` event. */
+    onTagRemoved: (detail: TagRemovedDetail) => void;
+    /** Count of mounted tags. */
+    count: number;
+    /** Id of TagGroupLabel if rendered. */
+    labelId: string | undefined;
+    /** Registers TagGroupLabel id; returns unregister. */
+    registerLabel: (id: string) => () => void;
+    /** True if TagGroupList is rendered. */
+    hasList: boolean;
+    /** Registers TagGroupList; returns unregister. */
+    registerList: () => () => void;
+    /** Root's `aria-label` / `aria-labelledby` forwarded to List. */
+    labelling: {
+        'aria-label'?: string | undefined;
+        'aria-labelledby'?: string | undefined;
+    };
+    /** Layout axis. */
+    orientation: TagGroupOrientation;
+    /** Group disabled state. */
     disabled: boolean;
 }
-/** Props for the {@link TagGroup} root. */
+/** Props for TagGroup root. */
 export interface TagGroupProps extends PrimitivePropsWithRef<'div'> {
     /**
-     * Layout axis, exposed as `data-orientation` and used to pick Arrow
-     * Left/Right vs. Arrow Up/Down for roving-tabindex navigation.
+     * Tags to render; ignored if `children` given.
+     * @default undefined
+     */
+    tags?: TagGroupTag[] | undefined;
+    /**
+     * Layout axis for arrow-key navigation, exposed as `data-orientation`.
      * @default 'horizontal'
      */
-    orientation?: TagGroupOrientation;
+    orientation?: TagGroupOrientation | undefined;
     /**
-     * Whether arrow-key navigation wraps from the last tag back to the first
-     * (and vice versa).
+     * Whether arrow-key navigation wraps at group boundaries.
      * @default true
      */
-    loop?: boolean;
+    loop?: boolean | undefined;
+    /**
+     * Disables all tags; none can be deleted.
+     * @default false
+     */
+    disabled?: boolean | undefined;
     /**
-     * Disables every {@link Tag} in the group — no tag can be deleted, and each
-     * one mirrors `data-disabled`.
+     * Fired when any tag is removed (single listener for whole collection).
+     * @default undefined
+     */
+    onRemove?: ((detail: TagRemovedDetail) => void) | undefined;
+    /**
+     * Spacing rung the skin packs the tags by, mirrored to `data-density`.
+     * @default undefined — the skin's own default spacing.
+     */
+    density?: 'comfortable' | 'compact' | (string & {}) | undefined;
+}
+/** Single tag entry for TagGroupProps.tags. */
+export interface TagGroupTag {
+    /** Unique identifier; used as element key. */
+    value: string;
+    /** Tag text; rendered and names delete button. */
+    label: string;
+    /**
+     * Disables this tag alone.
      * @default false
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
+}
+/** Props for {@link TagGroupLabel}, the group's visible heading. */
+export interface TagGroupLabelProps extends PrimitivePropsWithRef<'span'> {
+}
+/** Props for {@link TagGroupList}, the `<ul>` that holds the tags in the labelled composition. */
+export interface TagGroupListProps extends PrimitivePropsWithRef<'ul'> {
+}
+/** Props for {@link TagGroupEmpty}, rendered only while the group holds no tags. */
+export interface TagGroupEmptyProps extends PrimitivePropsWithRef<'div'> {
 }

package/dist/tags-input/TagsInput.cjs

@@ -1 +1,3 @@
-"use strict";var se=Object.create;var g=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var re=Object.getOwnPropertyNames;var de=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var ue=(t,a)=>{for(var e in a)g(t,e,{get:a[e],enumerable:!0})},h=(t,a,e,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of re(a))!ie.call(t,s)&&s!==e&&g(t,s,{get:()=>a[s],enumerable:!(n=oe(a,s))||n.enumerable});return t};var T=(t,a,e)=>(e=t!=null?se(de(t)):{},h(a||!t||!t.__esModule?g(e,"default",{value:t,enumerable:!0}):e,t)),pe=t=>h(g({},"__esModule",{value:!0}),t);var me={};ue(me,{TAGS_INPUT_DELETE_SELECTOR:()=>v,TAGS_INPUT_FIELD_SELECTOR:()=>R,TAGS_INPUT_SELECTOR:()=>b,TagsInput:()=>C,TagsInputInput:()=>D,TagsInputItem:()=>k,TagsInputItemDelete:()=>L,focusDeleteNeighbor:()=>I});module.exports=pe(me);var o=T(require("react"),1),V=require("../utils/createContext.cjs"),H=require("../utils/part.cjs"),A=require("../utils/primitive.cjs"),P=require("../utils/useControllableState.cjs"),E=require("react/jsx-runtime"),[le,d]=(0,V.createSafeContext)("TagsInput"),b="[data-skdx-tags-input]",v="[data-skdx-tags-input-delete]",R="[data-skdx-tags-input-field]";function I(t){let a=t.closest(b),e=a?Array.from(a.querySelectorAll(v)):[],n=e.indexOf(t);((n===-1?void 0:e[n+1])??e[n-1]??a?.querySelector(R))?.focus()}var C=o.forwardRef(({value:t,defaultValue:a=[],onValueChange:e,disabled:n=!1,invalid:s=!1,readOnly:_=!1,max:l,delimiter:J=",",addOnPaste:Q=!0,validate:N,inputValue:W,defaultInputValue:X="",onInputValueChange:Y,...S},Z)=>{let[j=[],m]=(0,P.useControllableState)({prop:t,defaultProp:a,onChange:e}),[ee="",te]=(0,P.useControllableState)({prop:W,defaultProp:X,onChange:Y}),O=o.useRef(N);O.current=N;let x=o.useCallback(u=>{m((p=[])=>{let r=[...p];for(let y of u){let f=y.trim();if(!(!f||r.includes(f))){if(l!==void 0&&r.length>=l)break;O.current?.(f,r)!==!1&&r.push(f)}}return r.length===p.length?p:r})},[m,l]),ae=o.useCallback(u=>x([u]),[x]),ne=o.useCallback(u=>{m((p=[])=>p.filter((r,y)=>y!==u))},[m]);return(0,E.jsx)(le,{value:j,inputValue:ee,setInputValue:te,disabled:n,invalid:s,readOnly:_,max:l,delimiter:J,addOnPaste:Q,addTag:ae,addTags:x,removeTag:ne,children:(0,E.jsx)(A.Primitive.div,{"data-skdx-tags-input":"","data-disabled":n?"":void 0,"data-invalid":s?"":void 0,"data-readonly":_?"":void 0,...S,...(0,H.skdxPart)("tags-input","root",S.className),ref:Z})})});C.displayName="TagsInput";var M=T(require("react"),1),w=require("../utils/part.cjs"),i=require("../utils/primitive.cjs");var G=require("react/jsx-runtime"),D=M.forwardRef((t,a)=>{let e=d("TagsInputInput"),n=e.inputValue;return(0,G.jsx)(i.Primitive.input,{type:"text","data-skdx-tags-input-field":"",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...t,...(0,w.skdxPart)("tags-input","input",t.className),ref:a,value:n,onChange:(0,i.composeEventHandlers)(t.onChange,s=>e.setInputValue(s.target.value)),onKeyDown:(0,i.composeEventHandlers)(t.onKeyDown,s=>{e.disabled||e.readOnly||(s.key==="Enter"||s.key===e.delimiter?(s.preventDefault(),e.addTag(n),e.setInputValue("")):s.key==="Backspace"&&n===""&&e.value.length>0&&e.removeTag(e.value.length-1))}),onPaste:(0,i.composeEventHandlers)(t.onPaste,s=>{e.disabled||e.readOnly||!e.addOnPaste||(s.preventDefault(),e.addTags(s.clipboardData.getData("text").split(e.delimiter)),e.setInputValue(""))})})});D.displayName="TagsInputInput";var U=T(require("react"),1),q=require("../utils/part.cjs"),B=require("../utils/primitive.cjs");var F=require("react/jsx-runtime"),k=U.forwardRef(({index:t,...a},e)=>{let n=d("TagsInputItem");return(0,F.jsx)(B.Primitive.span,{"data-disabled":n.disabled?"":void 0,...a,...(0,q.skdxPart)("tags-input","item",a.className),ref:e})});k.displayName="TagsInputItem";var K=T(require("react"),1),$=require("../utils/part.cjs"),c=require("../utils/primitive.cjs");var z=require("react/jsx-runtime"),L=K.forwardRef(({index:t,...a},e)=>{let n=d("TagsInputItemDelete");return(0,z.jsx)(c.Primitive.button,{type:"button","aria-label":`Remove ${n.value[t]??""}`.trim(),disabled:n.disabled,"data-skdx-tags-input-delete":"","data-disabled":n.disabled?"":void 0,...a,...(0,$.skdxPart)("tags-input","item-delete",a.className),ref:e,onClick:(0,c.composeEventHandlers)(a.onClick,s=>{n.disabled||(I(s.currentTarget),n.removeTag(t))})})});L.displayName="TagsInputItemDelete";0&&(module.exports={TAGS_INPUT_DELETE_SELECTOR,TAGS_INPUT_FIELD_SELECTOR,TAGS_INPUT_SELECTOR,TagsInput,TagsInputInput,TagsInputItem,TagsInputItemDelete,focusDeleteNeighbor});
+'use client';
+"use strict";var ot=Object.create;var G=Object.defineProperty;var st=Object.getOwnPropertyDescriptor;var lt=Object.getOwnPropertyNames;var it=Object.getPrototypeOf,ut=Object.prototype.hasOwnProperty;var dt=(t,n)=>{for(var e in n)G(t,e,{get:n[e],enumerable:!0})},Re=(t,n,e,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of lt(n))!ut.call(t,r)&&r!==e&&G(t,r,{get:()=>n[r],enumerable:!(a=st(n,r))||a.enumerable});return t};var fe=(t,n,e)=>(e=t!=null?ot(it(t)):{},Re(n||!t||!t.__esModule?G(e,"default",{value:t,enumerable:!0}):e,t)),pt=t=>Re(G({},"__esModule",{value:!0}),t);var It={};dt(It,{DEFAULT_DELIMITER:()=>qe,TAGS_INPUT_DELETE_SELECTOR:()=>ft,TAGS_INPUT_FIELD_SELECTOR:()=>S,TAGS_INPUT_ITEM_SELECTOR:()=>A,TAGS_INPUT_SELECTOR:()=>J,TagsInput:()=>xe,TagsInputClear:()=>q,TagsInputInput:()=>X,TagsInputItem:()=>z,TagsInputItemDelete:()=>W,TagsInputItemInput:()=>Y,TagsInputProvider:()=>Ue,commitsOnKey:()=>Ie,delimiterList:()=>be,focusDeleteNeighbor:()=>H,focusTagStep:()=>Te,splitOnDelimiters:()=>ge,useTagsInputContext:()=>u});module.exports=pt(It);var i=fe(require("react"),1),we=require("../utils/appearance.cjs"),Be=require("../utils/createContext.cjs"),Z=require("../utils/formControl.cjs"),Fe=require("../utils/hiddenInput.cjs"),Ke=require("../utils/part.cjs"),Ge=require("../utils/primitive.cjs"),ye=require("../utils/useControllableState.cjs");var Ne=require("../utils/Glyph.cjs");var Ee=require("../utils/part.cjs"),U=require("../utils/primitive.cjs");var he=require("react/jsx-runtime"),q=({ref:t,...n})=>{let e=u("TagsInputClear"),a=e.disabled||e.readOnly;return(0,he.jsx)(U.Primitive.button,{type:"button","aria-label":"Clear tags",disabled:a,"data-skdx-tags-input-clear":"","data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-empty":e.value.length===0?"":void 0,...n,...(0,Ee.skdxPart)("tags-input","clear",n.className),ref:t,onClick:(0,U.composeEventHandlers)(n.onClick,r=>{a||(r.currentTarget.closest(J)?.querySelector(S)?.focus(),e.clearTags())})})};q.displayName="TagsInputClear";var Pe=require("../utils/part.cjs"),R=require("../utils/primitive.cjs");var Ce=require("react/jsx-runtime"),X=({ref:t,...n})=>{let e=u("TagsInputInput"),a=e.inputValue;return(0,Ce.jsx)(R.Primitive.input,{type:"text","aria-label":e.inputLabel,"data-skdx-tags-input-field":"",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...n,...(0,Pe.skdxPart)("tags-input","input",n.className),ref:t,value:a,onChange:(0,R.composeEventHandlers)(n.onChange,r=>e.setInputValue(r.target.value)),onKeyDown:(0,R.composeEventHandlers)(n.onKeyDown,r=>{e.disabled||e.readOnly||(r.key==="Enter"||Ie(r.key,e.delimiter)?(r.preventDefault(),e.addTag(a),e.setInputValue("")):r.key==="Backspace"&&a===""&&e.value.length>0&&e.removeTag(e.value.length-1))}),onBlur:(0,R.composeEventHandlers)(n.onBlur,()=>{e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(a),e.setInputValue(""))}),onPaste:(0,R.composeEventHandlers)(n.onPaste,r=>{e.disabled||e.readOnly||!e.addOnPaste||(r.preventDefault(),e.addTags(ge(r.clipboardData.getData("text"),e.delimiter)),e.setInputValue(""))})})};X.displayName="TagsInputInput";var De=fe(require("react"),1),ke=require("../utils/composeRefs.cjs"),$=require("../utils/direction.cjs"),Le=require("../utils/part.cjs"),V=require("../utils/primitive.cjs");var Oe=require("react/jsx-runtime"),z=({index:t,ref:n,...e})=>{let a=u("TagsInputItem"),r=De.useRef(null),l=(0,ke.useComposedRefs)(n,r),d=(0,$.useDirection)();return(0,Oe.jsx)(V.Primitive.span,{"data-skdx-tags-input-item":"","data-disabled":a.disabled?"":void 0,"data-editing":a.editingIndex===t?"":void 0,tabIndex:!a.disabled&&a.tabStopIndex===t?0:-1,...e,...(0,Le.skdxPart)("tags-input","item",e.className),ref:l,onFocus:(0,V.composeEventHandlers)(e.onFocus,()=>a.setActiveIndex(t)),onKeyDown:(0,V.composeEventHandlers)(e.onKeyDown,o=>{if(o.target!==o.currentTarget)return;let f=(0,$.directionalKey)(o.key,o.currentTarget,d);if(f==="ArrowRight"||f==="ArrowLeft"){o.preventDefault(),Te(o.currentTarget,f==="ArrowRight"?1:-1);return}if(o.key==="Enter"){if(!a.editable||a.disabled||a.readOnly)return;o.preventDefault(),a.setEditingIndex(t);return}o.key!=="Delete"&&o.key!=="Backspace"||a.disabled||a.readOnly||(o.preventDefault(),a.setActiveIndex(H(o.currentTarget,t)),a.removeTag(t))})})};z.displayName="TagsInputItem";var Se=require("../utils/part.cjs"),Q=require("../utils/primitive.cjs");var Ve=require("react/jsx-runtime"),W=({index:t,ref:n,...e})=>{let a=u("TagsInputItemDelete");return(0,Ve.jsx)(Q.Primitive.button,{type:"button","aria-label":`Remove ${a.value[t]??""}`.trim(),disabled:a.disabled||a.readOnly,"data-skdx-tags-input-delete":"","data-disabled":a.disabled||a.readOnly?"":void 0,tabIndex:-1,...e,...(0,Se.skdxPart)("tags-input","item-delete",e.className),ref:n,onClick:(0,Q.composeEventHandlers)(e.onClick,r=>{a.disabled||a.readOnly||(a.setActiveIndex(H(r.currentTarget,t)),a.removeTag(t))})})};W.displayName="TagsInputItemDelete";var y=fe(require("react"),1),He=require("../utils/composeRefs.cjs"),Ae=require("../utils/part.cjs"),D=require("../utils/primitive.cjs");var Me=require("react/jsx-runtime");function mt(t){t.closest(A)?.focus()}var Y=({index:t,ref:n,...e})=>{let a=u("TagsInputItemInput"),r=a.editingIndex===t,l=a.value[t]??"",[d,o]=y.useState(l),f=y.useRef(null),b=(0,He.useComposedRefs)(n,f),E=y.useRef(l);if(y.useInsertionEffect(()=>{E.current=l}),y.useEffect(()=>{if(!r)return;o(E.current);let s=f.current;s?.focus(),s?.select()},[r]),!r)return null;let h=s=>{mt(s),a.setEditingIndex(null)};return(0,Me.jsx)(D.Primitive.input,{type:"text","aria-label":`Edit ${l}`.trim(),"data-skdx-tags-input-item-input":"","data-disabled":a.disabled?"":void 0,...e,...(0,Ae.skdxPart)("tags-input","item-input",e.className),ref:b,value:d,onChange:(0,D.composeEventHandlers)(e.onChange,s=>o(s.target.value)),onBlur:(0,D.composeEventHandlers)(e.onBlur,()=>a.setEditingIndex(null)),onKeyDown:(0,D.composeEventHandlers)(e.onKeyDown,s=>{s.key==="Enter"?(s.preventDefault(),a.setTagAtIndex(t,s.currentTarget.value),h(s.currentTarget)):s.key==="Escape"&&(s.preventDefault(),h(s.currentTarget))})})};Y.displayName="TagsInputItemInput";var c=require("react/jsx-runtime"),ct=()=>(0,c.jsx)(Ne.Glyph,{name:"close"}),_e=({placeholder:t,clearable:n})=>{let e=u("TagsInputAnatomy");return(0,c.jsxs)(c.Fragment,{children:[e.value.map((a,r)=>(0,c.jsxs)(z,{index:r,children:[a,(0,c.jsx)(W,{index:r,children:(0,c.jsx)(ct,{})}),(0,c.jsx)(Y,{index:r})]},r)),(0,c.jsx)(X,{placeholder:t}),n?(0,c.jsx)(q,{}):null]})};var k=require("react/jsx-runtime"),[Ue,u]=(0,Be.createSafeContext)("TagsInput"),J="[data-skdx-tags-input]",A="[data-skdx-tags-input-item]",ft="[data-skdx-tags-input-delete]",S="[data-skdx-tags-input-field]",qe=[",",`
+`];function be(t){return(Array.isArray(t)?t:[t]).filter(Boolean)}function ge(t,n){return be(n).reduce((e,a)=>e.flatMap(r=>r.split(a)),[t])}function Ie(t,n){return be(n).includes(t)}function Je(t){let n=t?.closest(J)??null;return{root:n,items:n?Array.from(n.querySelectorAll(A)):[]}}function H(t,n){let{root:e,items:a}=Je(t),r=t?.closest(A)??null,l=r?a.indexOf(r):-1,d=l===-1?void 0:a[l+1];return(d??a[l-1]??e?.querySelector(S))?.focus(),d?n:Math.max(n-1,0)}function Te(t,n){let{root:e,items:a}=Je(t),r=a.indexOf(t);if(r===-1)return;let l=n===1?e?.querySelector(S):null;(a[r+n]??l)?.focus()}function gt(t){let{value:n,defaultValue:e=[],onValueChange:a,disabled:r=!1,invalid:l=!1,readOnly:d=!1,max:o,delimiter:f=qe,addOnPaste:b=!0,blurBehavior:E="keep",editable:h=!1,validator:s,allowDuplicates:M=!1,inputValue:N,defaultInputValue:_="",onInputValueChange:j,onValueInvalid:ee,name:te,required:w=!1,form:ae,placeholder:ne,inputLabel:B="Add a tag",clearable:re=!1,children:oe,...se}=t;return{valueProp:n,defaultValue:e,onValueChange:a,disabled:r,invalid:l,readOnly:d,max:o,delimiter:f,addOnPaste:b,blurBehavior:E,editable:h,validator:s,allowDuplicates:M,inputValueProp:N,defaultInputValue:_,onInputValueChange:j,onValueInvalid:ee,name:te,required:w,form:ae,placeholder:ne,inputLabel:B,clearable:re,children:oe,rest:se}}var xe=({ref:t,size:n,...e})=>{let{valueProp:a,defaultValue:r,onValueChange:l,disabled:d,invalid:o,readOnly:f,max:b,delimiter:E,addOnPaste:h,blurBehavior:s,editable:M,validator:N,allowDuplicates:_,inputValueProp:j,defaultInputValue:ee,onInputValueChange:te,onValueInvalid:w,name:ae,required:ne,form:B,placeholder:re,inputLabel:oe,clearable:se,children:Xe,rest:le}=gt(e),[x=[],g]=(0,ye.useControllableState)({prop:a,defaultProp:r,onChange:l}),[$e="",ze]=(0,ye.useControllableState)({prop:j,defaultProp:ee,onChange:te}),F=i.useRef({value:x,max:b,allowDuplicates:_,validator:N,onValueInvalid:w});i.useInsertionEffect(()=>{F.current={value:x,max:b,allowDuplicates:_,validator:N,onValueInvalid:w}});let ie=i.useCallback(I=>{let{value:P,max:v,allowDuplicates:L,validator:pe,onValueInvalid:me}=F.current,T=[...P],p=[];for(let C of I){let m=C.trim();if(!m)p.push({tag:m,reason:"empty"});else if(v!==void 0&&T.length>=v)p.push({tag:m,reason:"max"});else{let O=pe?.(m,T);O===!1?p.push({tag:m,reason:"validator"}):O!==!0&&!L&&T.includes(m)?p.push({tag:m,reason:"duplicate"}):T.push(m)}}for(let C of p)me?.(C);T.length!==P.length&&g(T)},[g]),Qe=i.useCallback(I=>ie([I]),[ie]),We=i.useCallback(I=>{g((P=[])=>P.filter((v,L)=>L!==I))},[g]),Ye=i.useCallback(()=>{F.current.value.length>0&&g([])},[g]),Ze=i.useCallback((I,P)=>{let{value:v,allowDuplicates:L,validator:pe,onValueInvalid:me}=F.current,T=v[I];if(T===void 0)return;let p=P.trim(),C=v.filter((K,ce)=>ce!==I),m=K=>me?.({tag:p,reason:K});if(!p)return m("empty");let O=pe?.(p,C);if(O===!1)return m("validator");if(O!==!0&&!L&&C.includes(p))return m("duplicate");p!==T&&g(v.map((K,ce)=>ce===I?p:K))},[g]),[je,et]=i.useState(0),tt=Math.min(je,Math.max(x.length-1,0)),[ue,at]=i.useState(null),nt=M&&ue!==null&&ue<x.length?ue:null,de=i.useRef(null),ve=i.useRef(null);(0,Z.useFormValidityHandle)(t,de,ve);let rt=i.useRef(x);return(0,Z.useFormReset)(de,()=>g(r.length>0?r:rt.current),B),(0,k.jsxs)(Ue,{value:x,inputValue:$e,setInputValue:ze,disabled:d,invalid:o,readOnly:f,inputLabel:oe,max:b,delimiter:E,addOnPaste:h,blurBehavior:s,editable:M,editingIndex:nt,setEditingIndex:at,setTagAtIndex:Ze,clearTags:Ye,addTag:Qe,addTags:ie,removeTag:We,tabStopIndex:tt,setActiveIndex:et,children:[(0,k.jsx)(Ge.Primitive.div,{"data-skdx-tags-input":"","data-disabled":d?"":void 0,"data-invalid":o?"":void 0,"data-readonly":f?"":void 0,...le,...(0,we.appearanceAttrs)({size:n},le),...(0,Ke.skdxPart)("tags-input","root",le.className),ref:de,children:Xe??(0,k.jsx)(_e,{placeholder:re,clearable:se})}),(0,k.jsx)(Fe.MirroredValues,{name:ae,values:x,required:ne,disabled:d,form:B,controlRef:ve})]})};xe.displayName="TagsInput";0&&(module.exports={DEFAULT_DELIMITER,TAGS_INPUT_DELETE_SELECTOR,TAGS_INPUT_FIELD_SELECTOR,TAGS_INPUT_ITEM_SELECTOR,TAGS_INPUT_SELECTOR,TagsInput,TagsInputClear,TagsInputInput,TagsInputItem,TagsInputItemDelete,TagsInputItemInput,TagsInputProvider,commitsOnKey,delimiterList,focusDeleteNeighbor,focusTagStep,splitOnDelimiters,useTagsInputContext});

package/dist/tags-input/TagsInput.d.cts

@@ -1,77 +1,62 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.cjs';
 import type { TagsInputContextValue, TagsInputProps } from './types.cjs';
 /**
- * Controllable `string[]` of tags. Delimiter/backspace handling lives on
- * `TagsInputInput`; tag identity is by array index (not value), so duplicate
- * labels are fine as long as `addTag` still dedupes on commit.
- */
-/**
- * Reads the state a {@link TagsInput} root publishes to its parts: the
- * committed `value` array, the uncommitted `inputValue`, the
- * `delimiter`/`max`/`addOnPaste`/`disabled`/`readOnly`/`invalid` settings, and
- * `addTag`/`addTags`/`removeTag`. Tag identity is positional, which is why
- * `removeTag` takes an index rather than a value — duplicate labels are legal.
- *
- * `TagsInputInput`, `TagsInputItem` and `TagsInputItemDelete` 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 `TagsInput`. Not part of the public API.
- *
+ * Distributes TagsInput root state and actions to its parts.
  * @internal
  */
-export declare const TagsInputProvider: {
-    (props: TagsInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTagsInputContext: (consumerName: string) => TagsInputContextValue;
-/** @internal Marks the {@link TagsInput} root, so a delete button being removed can find its siblings and the draft field. */
+export declare const TagsInputProvider: React.FC<TagsInputContextValue & {
+    children: React.ReactNode;
+}>, useTagsInputContext: (consumerName: string) => TagsInputContextValue;
+/** @internal Marks the {@link TagsInput} root, so removal can find sibling tags and the draft field. */
 export declare const TAGS_INPUT_SELECTOR = "[data-skdx-tags-input]";
-/** @internal Marks a `TagsInputItemDelete` button — each one is its own tab stop, so removal has to hand focus on. */
+/** @internal Marks a `TagsInputItem` for the roving order and delete handoff to find its siblings. */
+export declare const TAGS_INPUT_ITEM_SELECTOR = "[data-skdx-tags-input-item]";
+/** @internal Marks a `TagsInputItemDelete` button as a styling hook; it carries `tabindex="-1"` and is not a focus target. */
 export declare const TAGS_INPUT_DELETE_SELECTOR = "[data-skdx-tags-input-delete]";
 /** @internal Marks the `TagsInputInput` draft field, the last place focus can go when the removed tag was the only one. */
 export declare const TAGS_INPUT_FIELD_SELECTOR = "[data-skdx-tags-input-field]";
 /**
- * Moves focus off `button` *before* the tag it deletes is removed.
- *
- * Focus goes to the next tag's delete button, to the previous one when the
- * removed tag was last, or to the draft input when it was the only one —
- * never to `<body>`, which is where focus lands by default once the button
- * holding it unmounts, and which makes clearing several tags in a row
- * unusable from the keyboard.
- *
- * This can't reuse `TagGroup`'s `focusTagNeighbor`: there the tag is the
- * single tab stop and its delete button is `tabindex="-1"`, whereas here every
- * delete button is its own tab stop and the draft input — not the root — is
- * the natural landing spot, since deleting a tag usually precedes typing
- * another.
- *
+ * Default delimiters: comma and newline, so a pasted spreadsheet list splits into tags.
  * @internal
  */
-export declare function focusDeleteNeighbor(button: HTMLElement): void;
+export declare const DEFAULT_DELIMITER: string[];
 /**
- * Root of a tags input: owns the `string[]` of committed tags and hands it
- * down to `TagsInputItem` / `TagsInputItemDelete` / `TagsInputInput` via
- * context. Renders a plain `<div>` with `data-disabled`, `data-invalid`, and
- * `data-readonly` — layout of tags vs. the text field is entirely up to
- * your CSS.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`),
- * and the draft text in `TagsInputInput` is separately controllable with
- * `inputValue` + `onInputValueChange`. A `validate` predicate can reject a
- * candidate tag, and `delimiter`/`addOnPaste` decide how typed and pasted text
- * is split into tags.
+ * Normalize delimiters to array form, dropping empty entries.
+ * @internal
+ */
+export declare function delimiterList(delimiter: string | string[]): string[];
+/**
+ * Splits text on every delimiter without building a regex.
+ * @internal
+ */
+export declare function splitOnDelimiters(text: string, delimiter: string | string[]): string[];
+/**
+ * Whether pressing `key` commits the draft (only single-char delimiters match KeyboardEvent.key).
+ * @internal
+ */
+export declare function commitsOnKey(key: string, delimiter: string | string[]): boolean;
+/**
+ * Moves focus from a deleted tag to the next tag, previous tag, or draft field, and returns the Tab-stop index to hold.
+ * @internal
+ */
+export declare function focusDeleteNeighbor(origin: HTMLElement | null, index: number): number;
+/**
+ * Moves focus along the tags by `delta`, landing on the draft field past the last tag and never wrapping.
+ * @internal
+ */
+export declare function focusTagStep(item: HTMLElement, delta: 1 | -1): void;
+/**
+ * Controlled or uncontrolled tag list with a shared draft input, roving keyboard navigation, and optional in-place editing.
  *
  * @example
  * ```tsx
- * <TagsInput defaultValue={['react', 'typescript']}>
- *   {tags.map((tag, index) => (
- *     <TagsInputItem key={tag} index={index}>
- *       {tag}
- *       <TagsInputItemDelete index={index}>×</TagsInputItemDelete>
- *     </TagsInputItem>
- *   ))}
- *   <TagsInputInput placeholder="Add a tag…" />
- * </TagsInput>
+ * <TagsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
  * ```
  */
-export declare const TagsInput: React.ForwardRefExoticComponent<Omit<TagsInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TagsInput: {
+    ({ ref: forwardedRef, size, ...rootProps }: Omit<TagsInputProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

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

@@ -1,77 +1,62 @@
 import * as React from 'react';
+import { type FormValidityHandle } from '../utils/formControl.js';
 import type { TagsInputContextValue, TagsInputProps } from './types.js';
 /**
- * Controllable `string[]` of tags. Delimiter/backspace handling lives on
- * `TagsInputInput`; tag identity is by array index (not value), so duplicate
- * labels are fine as long as `addTag` still dedupes on commit.
- */
-/**
- * Reads the state a {@link TagsInput} root publishes to its parts: the
- * committed `value` array, the uncommitted `inputValue`, the
- * `delimiter`/`max`/`addOnPaste`/`disabled`/`readOnly`/`invalid` settings, and
- * `addTag`/`addTags`/`removeTag`. Tag identity is positional, which is why
- * `removeTag` takes an index rather than a value — duplicate labels are legal.
- *
- * `TagsInputInput`, `TagsInputItem` and `TagsInputItemDelete` 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 `TagsInput`. Not part of the public API.
- *
+ * Distributes TagsInput root state and actions to its parts.
  * @internal
  */
-export declare const TagsInputProvider: {
-    (props: TagsInputContextValue & {
-        children: React.ReactNode;
-    }): React.JSX.Element;
-    displayName: string;
-}, useTagsInputContext: (consumerName: string) => TagsInputContextValue;
-/** @internal Marks the {@link TagsInput} root, so a delete button being removed can find its siblings and the draft field. */
+export declare const TagsInputProvider: React.FC<TagsInputContextValue & {
+    children: React.ReactNode;
+}>, useTagsInputContext: (consumerName: string) => TagsInputContextValue;
+/** @internal Marks the {@link TagsInput} root, so removal can find sibling tags and the draft field. */
 export declare const TAGS_INPUT_SELECTOR = "[data-skdx-tags-input]";
-/** @internal Marks a `TagsInputItemDelete` button — each one is its own tab stop, so removal has to hand focus on. */
+/** @internal Marks a `TagsInputItem` for the roving order and delete handoff to find its siblings. */
+export declare const TAGS_INPUT_ITEM_SELECTOR = "[data-skdx-tags-input-item]";
+/** @internal Marks a `TagsInputItemDelete` button as a styling hook; it carries `tabindex="-1"` and is not a focus target. */
 export declare const TAGS_INPUT_DELETE_SELECTOR = "[data-skdx-tags-input-delete]";
 /** @internal Marks the `TagsInputInput` draft field, the last place focus can go when the removed tag was the only one. */
 export declare const TAGS_INPUT_FIELD_SELECTOR = "[data-skdx-tags-input-field]";
 /**
- * Moves focus off `button` *before* the tag it deletes is removed.
- *
- * Focus goes to the next tag's delete button, to the previous one when the
- * removed tag was last, or to the draft input when it was the only one —
- * never to `<body>`, which is where focus lands by default once the button
- * holding it unmounts, and which makes clearing several tags in a row
- * unusable from the keyboard.
- *
- * This can't reuse `TagGroup`'s `focusTagNeighbor`: there the tag is the
- * single tab stop and its delete button is `tabindex="-1"`, whereas here every
- * delete button is its own tab stop and the draft input — not the root — is
- * the natural landing spot, since deleting a tag usually precedes typing
- * another.
- *
+ * Default delimiters: comma and newline, so a pasted spreadsheet list splits into tags.
  * @internal
  */
-export declare function focusDeleteNeighbor(button: HTMLElement): void;
+export declare const DEFAULT_DELIMITER: string[];
 /**
- * Root of a tags input: owns the `string[]` of committed tags and hands it
- * down to `TagsInputItem` / `TagsInputItemDelete` / `TagsInputInput` via
- * context. Renders a plain `<div>` with `data-disabled`, `data-invalid`, and
- * `data-readonly` — layout of tags vs. the text field is entirely up to
- * your CSS.
- *
- * Works controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`),
- * and the draft text in `TagsInputInput` is separately controllable with
- * `inputValue` + `onInputValueChange`. A `validate` predicate can reject a
- * candidate tag, and `delimiter`/`addOnPaste` decide how typed and pasted text
- * is split into tags.
+ * Normalize delimiters to array form, dropping empty entries.
+ * @internal
+ */
+export declare function delimiterList(delimiter: string | string[]): string[];
+/**
+ * Splits text on every delimiter without building a regex.
+ * @internal
+ */
+export declare function splitOnDelimiters(text: string, delimiter: string | string[]): string[];
+/**
+ * Whether pressing `key` commits the draft (only single-char delimiters match KeyboardEvent.key).
+ * @internal
+ */
+export declare function commitsOnKey(key: string, delimiter: string | string[]): boolean;
+/**
+ * Moves focus from a deleted tag to the next tag, previous tag, or draft field, and returns the Tab-stop index to hold.
+ * @internal
+ */
+export declare function focusDeleteNeighbor(origin: HTMLElement | null, index: number): number;
+/**
+ * Moves focus along the tags by `delta`, landing on the draft field past the last tag and never wrapping.
+ * @internal
+ */
+export declare function focusTagStep(item: HTMLElement, delta: 1 | -1): void;
+/**
+ * Controlled or uncontrolled tag list with a shared draft input, roving keyboard navigation, and optional in-place editing.
  *
  * @example
  * ```tsx
- * <TagsInput defaultValue={['react', 'typescript']}>
- *   {tags.map((tag, index) => (
- *     <TagsInputItem key={tag} index={index}>
- *       {tag}
- *       <TagsInputItemDelete index={index}>×</TagsInputItemDelete>
- *     </TagsInputItem>
- *   ))}
- *   <TagsInputInput placeholder="Add a tag…" />
- * </TagsInput>
+ * <TagsInput value={tags} onValueChange={setTags} placeholder="Add a tag…" />
  * ```
  */
-export declare const TagsInput: React.ForwardRefExoticComponent<Omit<TagsInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TagsInput: {
+    ({ ref: forwardedRef, size, ...rootProps }: Omit<TagsInputProps, "ref"> & {
+        ref?: React.Ref<HTMLDivElement & FormValidityHandle> | undefined;
+    }): React.ReactNode;
+    displayName: string;
+};

package/dist/tags-input/TagsInput.js

@@ -1 +1,3 @@
-import*as o from"react";import{createSafeContext as K}from"../utils/createContext.js";import{skdxPart as $}from"../utils/part.js";import{Primitive as z}from"../utils/primitive.js";import{useControllableState as E}from"../utils/useControllableState.js";import{jsx as b}from"react/jsx-runtime";var[J,d]=K("TagsInput"),v="[data-skdx-tags-input]",R="[data-skdx-tags-input-delete]",C="[data-skdx-tags-input-field]";function T(n){let s=n.closest(v),e=s?Array.from(s.querySelectorAll(R)):[],t=e.indexOf(n);((t===-1?void 0:e[t+1])??e[t-1]??s?.querySelector(C))?.focus()}var D=o.forwardRef(({value:n,defaultValue:s=[],onValueChange:e,disabled:t=!1,invalid:a=!1,readOnly:c=!1,max:p,delimiter:h=",",addOnPaste:V=!0,validate:x,inputValue:H,defaultInputValue:A="",onInputValueChange:M,...y},w)=>{let[G=[],l]=E({prop:n,defaultProp:s,onChange:e}),[U="",q]=E({prop:H,defaultProp:A,onChange:M}),P=o.useRef(x);P.current=x;let f=o.useCallback(i=>{l((u=[])=>{let r=[...u];for(let g of i){let m=g.trim();if(!(!m||r.includes(m))){if(p!==void 0&&r.length>=p)break;P.current?.(m,r)!==!1&&r.push(m)}}return r.length===u.length?u:r})},[l,p]),B=o.useCallback(i=>f([i]),[f]),F=o.useCallback(i=>{l((u=[])=>u.filter((r,g)=>g!==i))},[l]);return b(J,{value:G,inputValue:U,setInputValue:q,disabled:t,invalid:a,readOnly:c,max:p,delimiter:h,addOnPaste:V,addTag:B,addTags:f,removeTag:F,children:b(z.div,{"data-skdx-tags-input":"","data-disabled":t?"":void 0,"data-invalid":a?"":void 0,"data-readonly":c?"":void 0,...y,...$("tags-input","root",y.className),ref:w})})});D.displayName="TagsInput";import*as k from"react";import{skdxPart as Q}from"../utils/part.js";import{composeEventHandlers as I,Primitive as W}from"../utils/primitive.js";import{jsx as X}from"react/jsx-runtime";var L=k.forwardRef((n,s)=>{let e=d("TagsInputInput"),t=e.inputValue;return X(W.input,{type:"text","data-skdx-tags-input-field":"",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...n,...Q("tags-input","input",n.className),ref:s,value:t,onChange:I(n.onChange,a=>e.setInputValue(a.target.value)),onKeyDown:I(n.onKeyDown,a=>{e.disabled||e.readOnly||(a.key==="Enter"||a.key===e.delimiter?(a.preventDefault(),e.addTag(t),e.setInputValue("")):a.key==="Backspace"&&t===""&&e.value.length>0&&e.removeTag(e.value.length-1))}),onPaste:I(n.onPaste,a=>{e.disabled||e.readOnly||!e.addOnPaste||(a.preventDefault(),e.addTags(a.clipboardData.getData("text").split(e.delimiter)),e.setInputValue(""))})})});L.displayName="TagsInputInput";import*as _ from"react";import{skdxPart as Y}from"../utils/part.js";import{Primitive as Z}from"../utils/primitive.js";import{jsx as j}from"react/jsx-runtime";var N=_.forwardRef(({index:n,...s},e)=>{let t=d("TagsInputItem");return j(Z.span,{"data-disabled":t.disabled?"":void 0,...s,...Y("tags-input","item",s.className),ref:e})});N.displayName="TagsInputItem";import*as S from"react";import{skdxPart as ee}from"../utils/part.js";import{composeEventHandlers as te,Primitive as ae}from"../utils/primitive.js";import{jsx as ne}from"react/jsx-runtime";var O=S.forwardRef(({index:n,...s},e)=>{let t=d("TagsInputItemDelete");return ne(ae.button,{type:"button","aria-label":`Remove ${t.value[n]??""}`.trim(),disabled:t.disabled,"data-skdx-tags-input-delete":"","data-disabled":t.disabled?"":void 0,...s,...ee("tags-input","item-delete",s.className),ref:e,onClick:te(s.onClick,a=>{t.disabled||(T(a.currentTarget),t.removeTag(n))})})});O.displayName="TagsInputItemDelete";export{R as TAGS_INPUT_DELETE_SELECTOR,C as TAGS_INPUT_FIELD_SELECTOR,v as TAGS_INPUT_SELECTOR,D as TagsInput,L as TagsInputInput,N as TagsInputItem,O as TagsInputItemDelete,T as focusDeleteNeighbor};
+'use client';
+import*as i from"react";import{appearanceAttrs as rt}from"../utils/appearance.js";import{createSafeContext as ot}from"../utils/createContext.js";import{useFormReset as st,useFormValidityHandle as lt}from"../utils/formControl.js";import{MirroredValues as it}from"../utils/hiddenInput.js";import{skdxPart as ut}from"../utils/part.js";import{Primitive as dt}from"../utils/primitive.js";import{useControllableState as Ie}from"../utils/useControllableState.js";import{Glyph as tt}from"../utils/Glyph.js";import{skdxPart as He}from"../utils/part.js";import{composeEventHandlers as Ae,Primitive as Me}from"../utils/primitive.js";import{jsx as Ne}from"react/jsx-runtime";var ee=({ref:a,...r})=>{let e=m("TagsInputClear"),t=e.disabled||e.readOnly;return Ne(Me.button,{type:"button","aria-label":"Clear tags",disabled:t,"data-skdx-tags-input-clear":"","data-disabled":e.disabled?"":void 0,"data-readonly":e.readOnly?"":void 0,"data-empty":e.value.length===0?"":void 0,...r,...He("tags-input","clear",r.className),ref:a,onClick:Ae(r.onClick,n=>{t||(n.currentTarget.closest(te)?.querySelector(M)?.focus(),e.clearTags())})})};ee.displayName="TagsInputClear";import{skdxPart as _e}from"../utils/part.js";import{composeEventHandlers as N,Primitive as we}from"../utils/primitive.js";import{jsx as Be}from"react/jsx-runtime";var ae=({ref:a,...r})=>{let e=m("TagsInputInput"),t=e.inputValue;return Be(we.input,{type:"text","aria-label":e.inputLabel,"data-skdx-tags-input-field":"",disabled:e.disabled,readOnly:e.readOnly,"aria-invalid":e.invalid?!0:void 0,"aria-readonly":e.readOnly?!0:void 0,"data-disabled":e.disabled?"":void 0,"data-invalid":e.invalid?"":void 0,"data-readonly":e.readOnly?"":void 0,...r,..._e("tags-input","input",r.className),ref:a,value:t,onChange:N(r.onChange,n=>e.setInputValue(n.target.value)),onKeyDown:N(r.onKeyDown,n=>{e.disabled||e.readOnly||(n.key==="Enter"||de(n.key,e.delimiter)?(n.preventDefault(),e.addTag(t),e.setInputValue("")):n.key==="Backspace"&&t===""&&e.value.length>0&&e.removeTag(e.value.length-1))}),onBlur:N(r.onBlur,()=>{e.disabled||e.readOnly||e.blurBehavior==="keep"||(e.blurBehavior==="commit"&&e.addTag(t),e.setInputValue(""))}),onPaste:N(r.onPaste,n=>{e.disabled||e.readOnly||!e.addOnPaste||(n.preventDefault(),e.addTags(ue(n.clipboardData.getData("text"),e.delimiter)),e.setInputValue(""))})})};ae.displayName="TagsInputInput";import*as me from"react";import{useComposedRefs as Fe}from"../utils/composeRefs.js";import{directionalKey as Ke,useDirection as Ge}from"../utils/direction.js";import{skdxPart as Ue}from"../utils/part.js";import{composeEventHandlers as pe,Primitive as qe}from"../utils/primitive.js";import{jsx as Je}from"react/jsx-runtime";var ne=({index:a,ref:r,...e})=>{let t=m("TagsInputItem"),n=me.useRef(null),l=Fe(r,n),u=Ge();return Je(qe.span,{"data-skdx-tags-input-item":"","data-disabled":t.disabled?"":void 0,"data-editing":t.editingIndex===a?"":void 0,tabIndex:!t.disabled&&t.tabStopIndex===a?0:-1,...e,...Ue("tags-input","item",e.className),ref:l,onFocus:pe(e.onFocus,()=>t.setActiveIndex(a)),onKeyDown:pe(e.onKeyDown,o=>{if(o.target!==o.currentTarget)return;let c=Ke(o.key,o.currentTarget,u);if(c==="ArrowRight"||c==="ArrowLeft"){o.preventDefault(),ce(o.currentTarget,c==="ArrowRight"?1:-1);return}if(o.key==="Enter"){if(!t.editable||t.disabled||t.readOnly)return;o.preventDefault(),t.setEditingIndex(a);return}o.key!=="Delete"&&o.key!=="Backspace"||t.disabled||t.readOnly||(o.preventDefault(),t.setActiveIndex(_(o.currentTarget,a)),t.removeTag(a))})})};ne.displayName="TagsInputItem";import{skdxPart as Xe}from"../utils/part.js";import{composeEventHandlers as $e,Primitive as ze}from"../utils/primitive.js";import{jsx as Qe}from"react/jsx-runtime";var re=({index:a,ref:r,...e})=>{let t=m("TagsInputItemDelete");return Qe(ze.button,{type:"button","aria-label":`Remove ${t.value[a]??""}`.trim(),disabled:t.disabled||t.readOnly,"data-skdx-tags-input-delete":"","data-disabled":t.disabled||t.readOnly?"":void 0,tabIndex:-1,...e,...Xe("tags-input","item-delete",e.className),ref:r,onClick:$e(e.onClick,n=>{t.disabled||t.readOnly||(t.setActiveIndex(_(n.currentTarget,a)),t.removeTag(a))})})};re.displayName="TagsInputItemDelete";import*as T from"react";import{useComposedRefs as We}from"../utils/composeRefs.js";import{skdxPart as Ye}from"../utils/part.js";import{composeEventHandlers as oe,Primitive as Ze}from"../utils/primitive.js";import{jsx as et}from"react/jsx-runtime";function je(a){a.closest(w)?.focus()}var se=({index:a,ref:r,...e})=>{let t=m("TagsInputItemInput"),n=t.editingIndex===a,l=t.value[a]??"",[u,o]=T.useState(l),c=T.useRef(null),y=We(r,c),v=T.useRef(l);if(T.useInsertionEffect(()=>{v.current=l}),T.useEffect(()=>{if(!n)return;o(v.current);let s=c.current;s?.focus(),s?.select()},[n]),!n)return null;let R=s=>{je(s),t.setEditingIndex(null)};return et(Ze.input,{type:"text","aria-label":`Edit ${l}`.trim(),"data-skdx-tags-input-item-input":"","data-disabled":t.disabled?"":void 0,...e,...Ye("tags-input","item-input",e.className),ref:y,value:u,onChange:oe(e.onChange,s=>o(s.target.value)),onBlur:oe(e.onBlur,()=>t.setEditingIndex(null)),onKeyDown:oe(e.onKeyDown,s=>{s.key==="Enter"?(s.preventDefault(),t.setTagAtIndex(a,s.currentTarget.value),R(s.currentTarget)):s.key==="Escape"&&(s.preventDefault(),R(s.currentTarget))})})};se.displayName="TagsInputItemInput";import{Fragment as nt,jsx as P,jsxs as fe}from"react/jsx-runtime";var at=()=>P(tt,{name:"close"}),ge=({placeholder:a,clearable:r})=>{let e=m("TagsInputAnatomy");return fe(nt,{children:[e.value.map((t,n)=>fe(ne,{index:n,children:[t,P(re,{index:n,children:P(at,{})}),P(se,{index:n})]},n)),P(ae,{placeholder:a}),r?P(ee,{}):null]})};import{jsx as le,jsxs as ft}from"react/jsx-runtime";var[pt,m]=ot("TagsInput"),te="[data-skdx-tags-input]",w="[data-skdx-tags-input-item]",sa="[data-skdx-tags-input-delete]",M="[data-skdx-tags-input-field]",mt=[",",`
+`];function Te(a){return(Array.isArray(a)?a:[a]).filter(Boolean)}function ue(a,r){return Te(r).reduce((e,t)=>e.flatMap(n=>n.split(t)),[a])}function de(a,r){return Te(r).includes(a)}function ye(a){let r=a?.closest(te)??null;return{root:r,items:r?Array.from(r.querySelectorAll(w)):[]}}function _(a,r){let{root:e,items:t}=ye(a),n=a?.closest(w)??null,l=n?t.indexOf(n):-1,u=l===-1?void 0:t[l+1];return(u??t[l-1]??e?.querySelector(M))?.focus(),u?r:Math.max(r-1,0)}function ce(a,r){let{root:e,items:t}=ye(a),n=t.indexOf(a);if(n===-1)return;let l=r===1?e?.querySelector(M):null;(t[n+r]??l)?.focus()}function ct(a){let{value:r,defaultValue:e=[],onValueChange:t,disabled:n=!1,invalid:l=!1,readOnly:u=!1,max:o,delimiter:c=mt,addOnPaste:y=!0,blurBehavior:v="keep",editable:R=!1,validator:s,allowDuplicates:k=!1,inputValue:L,defaultInputValue:O="",onInputValueChange:B,onValueInvalid:F,name:K,required:S=!1,form:G,placeholder:U,inputLabel:V="Add a tag",clearable:q=!1,children:J,...X}=a;return{valueProp:r,defaultValue:e,onValueChange:t,disabled:n,invalid:l,readOnly:u,max:o,delimiter:c,addOnPaste:y,blurBehavior:v,editable:R,validator:s,allowDuplicates:k,inputValueProp:L,defaultInputValue:O,onInputValueChange:B,onValueInvalid:F,name:K,required:S,form:G,placeholder:U,inputLabel:V,clearable:q,children:J,rest:X}}var be=({ref:a,size:r,...e})=>{let{valueProp:t,defaultValue:n,onValueChange:l,disabled:u,invalid:o,readOnly:c,max:y,delimiter:v,addOnPaste:R,blurBehavior:s,editable:k,validator:L,allowDuplicates:O,inputValueProp:B,defaultInputValue:F,onInputValueChange:K,onValueInvalid:S,name:G,required:U,form:V,placeholder:q,inputLabel:J,clearable:X,children:xe,rest:$}=ct(e),[b=[],f]=Ie({prop:t,defaultProp:n,onChange:l}),[ve="",Re]=Ie({prop:B,defaultProp:F,onChange:K}),H=i.useRef({value:b,max:y,allowDuplicates:O,validator:L,onValueInvalid:S});i.useInsertionEffect(()=>{H.current={value:b,max:y,allowDuplicates:O,validator:L,onValueInvalid:S}});let z=i.useCallback(g=>{let{value:E,max:x,allowDuplicates:C,validator:Y,onValueInvalid:Z}=H.current,I=[...E],d=[];for(let h of g){let p=h.trim();if(!p)d.push({tag:p,reason:"empty"});else if(x!==void 0&&I.length>=x)d.push({tag:p,reason:"max"});else{let D=Y?.(p,I);D===!1?d.push({tag:p,reason:"validator"}):D!==!0&&!C&&I.includes(p)?d.push({tag:p,reason:"duplicate"}):I.push(p)}}for(let h of d)Z?.(h);I.length!==E.length&&f(I)},[f]),Ee=i.useCallback(g=>z([g]),[z]),he=i.useCallback(g=>{f((E=[])=>E.filter((x,C)=>C!==g))},[f]),Pe=i.useCallback(()=>{H.current.value.length>0&&f([])},[f]),Ce=i.useCallback((g,E)=>{let{value:x,allowDuplicates:C,validator:Y,onValueInvalid:Z}=H.current,I=x[g];if(I===void 0)return;let d=E.trim(),h=x.filter((A,j)=>j!==g),p=A=>Z?.({tag:d,reason:A});if(!d)return p("empty");let D=Y?.(d,h);if(D===!1)return p("validator");if(D!==!0&&!C&&h.includes(d))return p("duplicate");d!==I&&f(x.map((A,j)=>j===g?d:A))},[f]),[De,ke]=i.useState(0),Le=Math.min(De,Math.max(b.length-1,0)),[Q,Oe]=i.useState(null),Se=k&&Q!==null&&Q<b.length?Q:null,W=i.useRef(null),ie=i.useRef(null);lt(a,W,ie);let Ve=i.useRef(b);return st(W,()=>f(n.length>0?n:Ve.current),V),ft(pt,{value:b,inputValue:ve,setInputValue:Re,disabled:u,invalid:o,readOnly:c,inputLabel:J,max:y,delimiter:v,addOnPaste:R,blurBehavior:s,editable:k,editingIndex:Se,setEditingIndex:Oe,setTagAtIndex:Ce,clearTags:Pe,addTag:Ee,addTags:z,removeTag:he,tabStopIndex:Le,setActiveIndex:ke,children:[le(dt.div,{"data-skdx-tags-input":"","data-disabled":u?"":void 0,"data-invalid":o?"":void 0,"data-readonly":c?"":void 0,...$,...rt({size:r},$),...ut("tags-input","root",$.className),ref:W,children:xe??le(ge,{placeholder:q,clearable:X})}),le(it,{name:G,values:b,required:U,disabled:u,form:V,controlRef:ie})]})};be.displayName="TagsInput";export{mt as DEFAULT_DELIMITER,sa as TAGS_INPUT_DELETE_SELECTOR,M as TAGS_INPUT_FIELD_SELECTOR,w as TAGS_INPUT_ITEM_SELECTOR,te as TAGS_INPUT_SELECTOR,be as TagsInput,ee as TagsInputClear,ae as TagsInputInput,ne as TagsInputItem,re as TagsInputItemDelete,se as TagsInputItemInput,pt as TagsInputProvider,de as commitsOnKey,Te as delimiterList,_ as focusDeleteNeighbor,ce as focusTagStep,ue as splitOnDelimiters,m as useTagsInputContext};

package/dist/tags-input/TagsInputAnatomy.d.cts

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+/**
+ * Renders TagsInput anatomy from `value`: items with delete and input editors, draft input, optional clear button.
+ * @internal
+ */
+export declare const TagsInputAnatomy: ({ placeholder, clearable, }: {
+    placeholder?: string | undefined;
+    clearable: boolean;
+}) => JSX.Element;

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

@@ -0,0 +1,9 @@
+import type { JSX } from 'react';
+/**
+ * Renders TagsInput anatomy from `value`: items with delete and input editors, draft input, optional clear button.
+ * @internal
+ */
+export declare const TagsInputAnatomy: ({ placeholder, clearable, }: {
+    placeholder?: string | undefined;
+    clearable: boolean;
+}) => JSX.Element;

package/dist/tags-input/TagsInputClear.d.cts

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { TagsInputClearProps } from './types.cjs';
+/**
+ * Clears all tags at once and moves focus to the draft field, staying mounted with `data-empty` when the list is empty.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput defaultValue={['react', 'vue']}>
+ *   {tags.map((tag, index) => (
+ *     <TagsInputItem key={tag} index={index}>{tag}</TagsInputItem>
+ *   ))}
+ *   <TagsInputInput placeholder="Add a tag…" />
+ *   <TagsInputClear>Clear</TagsInputClear>
+ * </TagsInput>
+ * ```
+ */
+export declare const TagsInputClear: {
+    ({ ref: forwardedRef, ...props }: TagsInputClearProps): React.ReactNode;
+    displayName: string;
+};

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

@@ -0,0 +1,20 @@
+import type * as React from 'react';
+import type { TagsInputClearProps } from './types.js';
+/**
+ * Clears all tags at once and moves focus to the draft field, staying mounted with `data-empty` when the list is empty.
+ *
+ * @example
+ * ```tsx
+ * <TagsInput defaultValue={['react', 'vue']}>
+ *   {tags.map((tag, index) => (
+ *     <TagsInputItem key={tag} index={index}>{tag}</TagsInputItem>
+ *   ))}
+ *   <TagsInputInput placeholder="Add a tag…" />
+ *   <TagsInputClear>Clear</TagsInputClear>
+ * </TagsInput>
+ * ```
+ */
+export declare const TagsInputClear: {
+    ({ ref: forwardedRef, ...props }: TagsInputClearProps): React.ReactNode;
+    displayName: string;
+};