@skdx/react 0.26.0 → 0.28.0

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

@@ -1,39 +1,89 @@
 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;
+        'aria-labelledby'?: string;
+    };
+    /** 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[];
+    /**
+     * Layout axis for arrow-key navigation, exposed as `data-orientation`.
      * @default 'horizontal'
      */
     orientation?: TagGroupOrientation;
     /**
-     * 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;
     /**
-     * Disables every {@link Tag} in the group — no tag can be deleted, and each
-     * one mirrors `data-disabled`.
+     * Disables all tags; none can be deleted.
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Fired when any tag is removed (single listener for whole collection).
+     * @default undefined
+     */
+    onRemove?: (detail: TagRemovedDetail) => void;
+}
+/** 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;
+}
+/** 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,2 @@
-"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 strict";var at=Object.create;var w=Object.defineProperty;var rt=Object.getOwnPropertyDescriptor;var ot=Object.getOwnPropertyNames;var st=Object.getPrototypeOf,lt=Object.prototype.hasOwnProperty;var it=(e,a)=>{for(var t in a)w(e,t,{get:a[t],enumerable:!0})},me=(e,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of ot(a))!lt.call(e,r)&&r!==t&&w(e,r,{get:()=>a[r],enumerable:!(n=rt(a,r))||n.enumerable});return e};var h=(e,a,t)=>(t=e!=null?at(st(e)):{},me(a||!e||!e.__esModule?w(t,"default",{value:e,enumerable:!0}):t,e)),ut=e=>me(w({},"__esModule",{value:!0}),e);var ct={};it(ct,{DEFAULT_DELIMITER:()=>Ae,TAGS_INPUT_DELETE_SELECTOR:()=>mt,TAGS_INPUT_FIELD_SELECTOR:()=>H,TAGS_INPUT_ITEM_SELECTOR:()=>A,TAGS_INPUT_SELECTOR:()=>K,TagsInput:()=>le,TagsInputClear:()=>B,TagsInputInput:()=>F,TagsInputItem:()=>q,TagsInputItemDelete:()=>W,TagsInputItemInput:()=>z,TagsInputProvider:()=>Oe,commitsOnKey:()=>ae,delimiterList:()=>se,focusDeleteNeighbor:()=>O,focusTagStep:()=>re,splitOnDelimiters:()=>ne,useTagsInputContext:()=>u});module.exports=ut(ct);var i=h(require("react"),1),Pe=require("../utils/createContext.cjs"),J=require("../utils/formControl.cjs"),Me=require("../utils/hiddenInput.cjs"),He=require("../utils/part.cjs"),Se=require("../utils/primitive.cjs"),oe=require("../utils/useControllableState.cjs");var ce=h(require("react"),1),fe=require("../utils/part.cjs"),V=require("../utils/primitive.cjs");var ge=require("react/jsx-runtime"),B=ce.forwardRef((e,a)=>{let t=u("TagsInputClear"),n=t.disabled||t.readOnly;return(0,ge.jsx)(V.Primitive.button,{type:"button","aria-label":"Clear tags",disabled:n,"data-skdx-tags-input-clear":"","data-disabled":t.disabled?"":void 0,"data-readonly":t.readOnly?"":void 0,"data-empty":t.value.length===0?"":void 0,...e,...(0,fe.skdxPart)("tags-input","clear",e.className),ref:a,onClick:(0,V.composeEventHandlers)(e.onClick,r=>{n||(r.currentTarget.closest(K)?.querySelector(H)?.focus(),t.clearTags())})})});B.displayName="TagsInputClear";var Ie=h(require("react"),1),Te=require("../utils/part.cjs"),b=require("../utils/primitive.cjs");var xe=require("react/jsx-runtime"),F=Ie.forwardRef((e,a)=>{let t=u("TagsInputInput"),n=t.inputValue;return(0,xe.jsx)(b.Primitive.input,{type:"text","data-skdx-tags-input-field":"",disabled:t.disabled,readOnly:t.readOnly,"aria-invalid":t.invalid?!0:void 0,"aria-readonly":t.readOnly?!0:void 0,"data-disabled":t.disabled?"":void 0,"data-invalid":t.invalid?"":void 0,"data-readonly":t.readOnly?"":void 0,...e,...(0,Te.skdxPart)("tags-input","input",e.className),ref:a,value:n,onChange:(0,b.composeEventHandlers)(e.onChange,r=>t.setInputValue(r.target.value)),onKeyDown:(0,b.composeEventHandlers)(e.onKeyDown,r=>{t.disabled||t.readOnly||(r.key==="Enter"||ae(r.key,t.delimiter)?(r.preventDefault(),t.addTag(n),t.setInputValue("")):r.key==="Backspace"&&n===""&&t.value.length>0&&t.removeTag(t.value.length-1))}),onBlur:(0,b.composeEventHandlers)(e.onBlur,()=>{t.disabled||t.readOnly||t.blurBehavior==="keep"||(t.blurBehavior==="commit"&&t.addTag(n),t.setInputValue(""))}),onPaste:(0,b.composeEventHandlers)(e.onPaste,r=>{t.disabled||t.readOnly||!t.addOnPaste||(r.preventDefault(),t.addTags(ne(r.clipboardData.getData("text"),t.delimiter)),t.setInputValue(""))})})});F.displayName="TagsInputInput";var U=h(require("react"),1),ye=require("../utils/composeRefs.cjs"),G=require("../utils/direction.cjs"),be=require("../utils/part.cjs"),S=require("../utils/primitive.cjs");var ve=require("react/jsx-runtime"),q=U.forwardRef(({index:e,...a},t)=>{let n=u("TagsInputItem"),r=U.useRef(null),o=(0,ye.useComposedRefs)(t,r),c=(0,G.useDirection)();return(0,ve.jsx)(S.Primitive.span,{"data-skdx-tags-input-item":"","data-disabled":n.disabled?"":void 0,"data-editing":n.editingIndex===e?"":void 0,tabIndex:!n.disabled&&n.tabStopIndex===e?0:-1,...a,...(0,be.skdxPart)("tags-input","item",a.className),ref:o,onFocus:(0,S.composeEventHandlers)(a.onFocus,()=>n.setActiveIndex(e)),onKeyDown:(0,S.composeEventHandlers)(a.onKeyDown,l=>{let x=(0,G.directionalKey)(l.key,l.currentTarget,c);if(x==="ArrowRight"||x==="ArrowLeft"){l.preventDefault(),re(l.currentTarget,x==="ArrowRight"?1:-1);return}if(l.key==="Enter"){if(!n.editable||n.disabled||n.readOnly)return;l.preventDefault(),n.setEditingIndex(e);return}l.key!=="Delete"&&l.key!=="Backspace"||n.disabled||n.readOnly||(l.preventDefault(),n.setActiveIndex(O(l.currentTarget,e)),n.removeTag(e))})})});q.displayName="TagsInputItem";var Ee=h(require("react"),1),Re=require("../utils/part.cjs"),$=require("../utils/primitive.cjs");var he=require("react/jsx-runtime"),W=Ee.forwardRef(({index:e,...a},t)=>{let n=u("TagsInputItemDelete");return(0,he.jsx)($.Primitive.button,{type:"button","aria-label":`Remove ${n.value[e]??""}`.trim(),disabled:n.disabled,"data-skdx-tags-input-delete":"","data-disabled":n.disabled?"":void 0,tabIndex:-1,...a,...(0,Re.skdxPart)("tags-input","item-delete",a.className),ref:t,onClick:(0,$.composeEventHandlers)(a.onClick,r=>{n.disabled||(n.setActiveIndex(O(r.currentTarget,e)),n.removeTag(e))})})});W.displayName="TagsInputItemDelete";var T=h(require("react"),1),ke=require("../utils/composeRefs.cjs"),Ce=require("../utils/part.cjs"),k=require("../utils/primitive.cjs");var De=require("react/jsx-runtime");function dt(e){e.closest(A)?.focus()}var z=T.forwardRef(({index:e,...a},t)=>{let n=u("TagsInputItemInput"),r=n.editingIndex===e,o=n.value[e]??"",[c,l]=T.useState(o),x=T.useRef(null),Q=(0,ke.useComposedRefs)(t,x),D=T.useRef(o);if(D.current=o,T.useEffect(()=>{if(!r)return;l(D.current);let s=x.current;s?.focus(),s?.select()},[r]),!r)return null;let L=s=>{dt(s),n.setEditingIndex(null)};return(0,De.jsx)(k.Primitive.input,{type:"text","aria-label":`Edit ${o}`.trim(),"data-skdx-tags-input-item-input":"","data-disabled":n.disabled?"":void 0,...a,...(0,Ce.skdxPart)("tags-input","item-input",a.className),ref:Q,value:c,onChange:(0,k.composeEventHandlers)(a.onChange,s=>l(s.target.value)),onBlur:(0,k.composeEventHandlers)(a.onBlur,()=>n.setEditingIndex(null)),onKeyDown:(0,k.composeEventHandlers)(a.onKeyDown,s=>{s.key==="Enter"?(s.preventDefault(),n.setTagAtIndex(e,s.currentTarget.value),L(s.currentTarget)):s.key==="Escape"&&(s.preventDefault(),L(s.currentTarget))})})});z.displayName="TagsInputItemInput";var d=require("react/jsx-runtime"),pt=()=>(0,d.jsx)("svg",{viewBox:"0 0 16 16",width:"1em",height:"1em",fill:"none","aria-hidden":"true",focusable:"false",children:(0,d.jsx)("path",{d:"M4 4l8 8M12 4l-8 8",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})}),Le=({placeholder:e,inputLabel:a,clearable:t})=>{let n=u("TagsInputAnatomy");return(0,d.jsxs)(d.Fragment,{children:[n.value.map((r,o)=>(0,d.jsxs)(q,{index:o,children:[r,(0,d.jsx)(W,{index:o,children:(0,d.jsx)(pt,{})}),(0,d.jsx)(z,{index:o})]},o)),(0,d.jsx)(F,{placeholder:e,"aria-label":a}),t?(0,d.jsx)(B,{}):null]})};var C=require("react/jsx-runtime"),[Oe,u]=(0,Pe.createSafeContext)("TagsInput"),K="[data-skdx-tags-input]",A="[data-skdx-tags-input-item]",mt="[data-skdx-tags-input-delete]",H="[data-skdx-tags-input-field]",Ae=[",",`
+`];function se(e){return(Array.isArray(e)?e:[e]).filter(Boolean)}function ne(e,a){return se(a).reduce((t,n)=>t.flatMap(r=>r.split(n)),[e])}function ae(e,a){return se(a).includes(e)}function Ne(e){let a=e?.closest(K)??null;return{root:a,items:a?Array.from(a.querySelectorAll(A)):[]}}function O(e,a){let{root:t,items:n}=Ne(e),r=e?.closest(A)??null,o=r?n.indexOf(r):-1,c=o===-1?void 0:n[o+1];return(c??n[o-1]??t?.querySelector(H))?.focus(),c?a:Math.max(a-1,0)}function re(e,a){let{root:t,items:n}=Ne(e),r=n.indexOf(e);if(r===-1)return;let o=a===1?t?.querySelector(H):null;(n[r+a]??o)?.focus()}var le=i.forwardRef(({value:e,defaultValue:a=[],onValueChange:t,disabled:n=!1,invalid:r=!1,readOnly:o=!1,max:c,delimiter:l=Ae,addOnPaste:x=!0,blurBehavior:Q="keep",editable:D=!1,validate:L,allowDuplicates:s=!1,inputValue:_e,defaultInputValue:we="",onInputValueChange:Ve,onValueInvalid:ie,name:Be,required:Ke=!1,form:ue,placeholder:Fe,inputLabel:Ue="Add a tag",clearable:Ge=!1,children:qe,...de},$e)=>{let[v=[],f]=(0,oe.useControllableState)({prop:e,defaultProp:a,onChange:t}),[We="",ze]=(0,oe.useControllableState)({prop:_e,defaultProp:we,onChange:Ve}),N=i.useRef({value:v,max:c,allowDuplicates:s,validate:L,onValueInvalid:ie});N.current={value:v,max:c,allowDuplicates:s,validate:L,onValueInvalid:ie};let X=i.useCallback(g=>{let{value:E,max:y,allowDuplicates:P,validate:j,onValueInvalid:ee}=N.current,I=[...E],p=[];for(let R of g){let m=R.trim();if(!m)p.push({tag:m,reason:"empty"});else if(y!==void 0&&I.length>=y)p.push({tag:m,reason:"max"});else{let M=j?.(m,I);M===!1?p.push({tag:m,reason:"validate"}):M!==!0&&!P&&I.includes(m)?p.push({tag:m,reason:"duplicate"}):I.push(m)}}for(let R of p)ee?.(R);I.length!==E.length&&f(I)},[f]),Je=i.useCallback(g=>X([g]),[X]),Qe=i.useCallback(g=>{f((E=[])=>E.filter((y,P)=>P!==g))},[f]),Xe=i.useCallback(()=>{N.current.value.length>0&&f([])},[f]),Ye=i.useCallback((g,E)=>{let{value:y,allowDuplicates:P,validate:j,onValueInvalid:ee}=N.current,I=y[g];if(I===void 0)return;let p=E.trim(),R=y.filter((_,te)=>te!==g),m=_=>ee?.({tag:p,reason:_});if(!p)return m("empty");let M=j?.(p,R);if(M===!1)return m("validate");if(M!==!0&&!P&&R.includes(p))return m("duplicate");p!==I&&f(y.map((_,te)=>te===g?p:_))},[f]),[Ze,je]=i.useState(0),et=Math.min(Ze,Math.max(v.length-1,0)),[Y,tt]=i.useState(null),nt=D&&Y!==null&&Y<v.length?Y:null,Z=i.useRef(null),pe=i.useRef(null);return(0,J.useFormValidityHandle)($e,Z,pe),(0,J.useFormReset)(Z,()=>f(a),ue),(0,C.jsxs)(Oe,{value:v,inputValue:We,setInputValue:ze,disabled:n,invalid:r,readOnly:o,max:c,delimiter:l,addOnPaste:x,blurBehavior:Q,editable:D,editingIndex:nt,setEditingIndex:tt,setTagAtIndex:Ye,clearTags:Xe,addTag:Je,addTags:X,removeTag:Qe,tabStopIndex:et,setActiveIndex:je,children:[(0,C.jsx)(Se.Primitive.div,{"data-skdx-tags-input":"","data-disabled":n?"":void 0,"data-invalid":r?"":void 0,"data-readonly":o?"":void 0,...de,...(0,He.skdxPart)("tags-input","root",de.className),ref:Z,children:qe??(0,C.jsx)(Le,{placeholder:Fe,inputLabel:Ue,clearable:Ge})}),(0,C.jsx)(Me.MirroredValues,{name:Be,values:v,required:Ke,disabled:n,form:ue,controlRef:pe})]})});le.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,21 +1,8 @@
 import * as React from 'react';
 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.
- *
+ * Reads the state a {@link TagsInput} root publishes to its parts: `value` array,
+ * `inputValue`, and settings/methods. Tag identity is by index, not value.
  * @internal
  */
 export declare const TagsInputProvider: {
@@ -26,52 +13,55 @@ export declare const TagsInputProvider: {
 }, 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 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`, so the roving order and the delete handoff can find a tag's siblings without a registration round-trip. */
+export declare const TAGS_INPUT_ITEM_SELECTOR = "[data-skdx-tags-input-item]";
+/** @internal Marks a `TagsInputItemDelete` button. Kept as a styling/structural hook: it is `tabindex="-1"` and no longer 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. Newline lets pasted spreadsheet/textarea lists arrive as multiple tags.
+ * @internal
+ */
+export declare const DEFAULT_DELIMITER: string[];
+/**
+ * Normalize delimiters to array form, dropping empty entries.
+ * @internal
+ */
+export declare function delimiterList(delimiter: string | string[]): string[];
+/**
+ * Split text on all delimiters without regex (avoids escaping complexity).
+ * @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;
+/**
+ * Move focus from deleted tag to next, previous, or draft field (not `<body>`).
+ * Returns the index the Tab stop should hold. Walks tags (not delete buttons)
+ * since tags are the roving Tab stop.
+ * @internal
+ */
+export declare function focusDeleteNeighbor(origin: HTMLElement | null, index: number): number;
+/**
+ * Move focus along tags by `delta` (in document direction). Forward past last tag
+ * lands on draft field; backward from first stays put (no wrapping).
  * @internal
  */
-export declare function focusDeleteNeighbor(button: HTMLElement): void;
+export declare function focusTagStep(item: HTMLElement, delta: 1 | -1): void;
 /**
- * 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.
+ * Controlled or uncontrolled array of tags with shared draft input and optional editing.
+ * Tags form a single roving Tab stop; Arrow keys navigate (dir-aware), Delete/Backspace removes.
+ * With `name`, mirrors native hidden inputs per tag for form submission.
  *
- * 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.
+ * Uses default anatomy from `value` or render with children for full composition.
  *
  * @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>>;

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

@@ -1,21 +1,8 @@
 import * as React from 'react';
 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.
- *
+ * Reads the state a {@link TagsInput} root publishes to its parts: `value` array,
+ * `inputValue`, and settings/methods. Tag identity is by index, not value.
  * @internal
  */
 export declare const TagsInputProvider: {
@@ -26,52 +13,55 @@ export declare const TagsInputProvider: {
 }, 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 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`, so the roving order and the delete handoff can find a tag's siblings without a registration round-trip. */
+export declare const TAGS_INPUT_ITEM_SELECTOR = "[data-skdx-tags-input-item]";
+/** @internal Marks a `TagsInputItemDelete` button. Kept as a styling/structural hook: it is `tabindex="-1"` and no longer 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. Newline lets pasted spreadsheet/textarea lists arrive as multiple tags.
+ * @internal
+ */
+export declare const DEFAULT_DELIMITER: string[];
+/**
+ * Normalize delimiters to array form, dropping empty entries.
+ * @internal
+ */
+export declare function delimiterList(delimiter: string | string[]): string[];
+/**
+ * Split text on all delimiters without regex (avoids escaping complexity).
+ * @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;
+/**
+ * Move focus from deleted tag to next, previous, or draft field (not `<body>`).
+ * Returns the index the Tab stop should hold. Walks tags (not delete buttons)
+ * since tags are the roving Tab stop.
+ * @internal
+ */
+export declare function focusDeleteNeighbor(origin: HTMLElement | null, index: number): number;
+/**
+ * Move focus along tags by `delta` (in document direction). Forward past last tag
+ * lands on draft field; backward from first stays put (no wrapping).
  * @internal
  */
-export declare function focusDeleteNeighbor(button: HTMLElement): void;
+export declare function focusTagStep(item: HTMLElement, delta: 1 | -1): void;
 /**
- * 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.
+ * Controlled or uncontrolled array of tags with shared draft input and optional editing.
+ * Tags form a single roving Tab stop; Arrow keys navigate (dir-aware), Delete/Backspace removes.
+ * With `name`, mirrors native hidden inputs per tag for form submission.
  *
- * 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.
+ * Uses default anatomy from `value` or render with children for full composition.
  *
  * @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>>;

package/dist/tags-input/TagsInput.js

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TagsInputClearProps } from './types.cjs';
+/**
+ * Clears all tags at once. Stays mounted with `data-empty` when empty,
+ * moving focus to the draft field when cleared.
+ *
+ * @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: React.ForwardRefExoticComponent<Omit<TagsInputClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { TagsInputClearProps } from './types.js';
+/**
+ * Clears all tags at once. Stays mounted with `data-empty` when empty,
+ * moving focus to the draft field when cleared.
+ *
+ * @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: React.ForwardRefExoticComponent<Omit<TagsInputClearProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { TagsInputInputProps } from './types.cjs';
 /**
- * Text field for typing and committing new tags within a {@link TagsInput}.
- * Renders a plain `<input type="text">` whose draft text lives on the root
- * (`value`/`defaultValue` are omitted here — control the draft with the root's
- * `inputValue`), plus `aria-invalid`/`data-invalid` and the native `readOnly`
- * attribute with `aria-readonly`/`data-readonly` from the root's
- * `invalid`/`readOnly` props. Enter or the root's `delimiter` commits the
- * draft as a tag via `addTag`; Backspace on an empty field removes the last
- * tag; pasting splits on the delimiter and commits every piece at once while
- * the root's `addOnPaste` is set.
+ * Draft field for new tags. Enter or delimiter commits; Backspace on empty
+ * removes last tag. Root owns `inputValue`. Pasting splits on delimiter if
+ * `addOnPaste` set. Uncommitted draft handled by root's `blurBehavior`.
  *
  * @example
  * ```tsx

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

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { TagsInputInputProps } from './types.js';
 /**
- * Text field for typing and committing new tags within a {@link TagsInput}.
- * Renders a plain `<input type="text">` whose draft text lives on the root
- * (`value`/`defaultValue` are omitted here — control the draft with the root's
- * `inputValue`), plus `aria-invalid`/`data-invalid` and the native `readOnly`
- * attribute with `aria-readonly`/`data-readonly` from the root's
- * `invalid`/`readOnly` props. Enter or the root's `delimiter` commits the
- * draft as a tag via `addTag`; Backspace on an empty field removes the last
- * tag; pasting splits on the delimiter and commits every piece at once while
- * the root's `addOnPaste` is set.
+ * Draft field for new tags. Enter or delimiter commits; Backspace on empty
+ * removes last tag. Root owns `inputValue`. Pasting splits on delimiter if
+ * `addOnPaste` set. Uncommitted draft handled by root's `blurBehavior`.
  *
  * @example
  * ```tsx

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import type { TagsInputItemProps } from './types.cjs';
 /**
- * A single rendered tag within a {@link TagsInput}. Renders a plain `<span>`
- * with `data-disabled` mirroring the root; typically wraps the tag's label
- * and a {@link TagsInputItemDelete} button.
+ * A single rendered tag within a {@link TagsInput}. Renders plain `<span>` with
+ * `data-disabled` mirroring root; typically wraps tag's label and {@link TagsInputItemDelete} button.
+ *
+ * Tags share **one** Tab stop: exactly one item carries `tabIndex` 0, rest reachable with
+ * `ArrowLeft`/`ArrowRight` (mirrored under `dir="rtl"`), so ten-tag field costs one Tab to skip.
+ * `ArrowRight` past last tag lands in draft field. `Delete` or `Backspace` on focused tag removes it
+ * (keyboard path letting {@link TagsInputItemDelete} leave tab order). While root is `editable`,
+ * `Enter` opens tag in {@link TagsInputItemInput}; item carries `data-editing` while open.
  *
  * @example
  * ```tsx

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

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import type { TagsInputItemProps } from './types.js';
 /**
- * A single rendered tag within a {@link TagsInput}. Renders a plain `<span>`
- * with `data-disabled` mirroring the root; typically wraps the tag's label
- * and a {@link TagsInputItemDelete} button.
+ * A single rendered tag within a {@link TagsInput}. Renders plain `<span>` with
+ * `data-disabled` mirroring root; typically wraps tag's label and {@link TagsInputItemDelete} button.
+ *
+ * Tags share **one** Tab stop: exactly one item carries `tabIndex` 0, rest reachable with
+ * `ArrowLeft`/`ArrowRight` (mirrored under `dir="rtl"`), so ten-tag field costs one Tab to skip.
+ * `ArrowRight` past last tag lands in draft field. `Delete` or `Backspace` on focused tag removes it
+ * (keyboard path letting {@link TagsInputItemDelete} leave tab order). While root is `editable`,
+ * `Enter` opens tag in {@link TagsInputItemInput}; item carries `data-editing` while open.
  *
  * @example
  * ```tsx

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

@@ -6,9 +6,14 @@ import type { TagsInputItemDeleteProps } from './types.cjs';
  * `aria-label="Remove <tag>"`, disabled and `data-disabled` when the root
  * is disabled.
  *
- * Because the button is its own tab stop, it hands focus to the next delete
- * button (or the previous one, or the draft field) *before* signalling the
- * removal, so deleting a tag never drops focus onto `<body>`.
+ * It is deliberately **not** a Tab stop: the tags share one, and the keyboard
+ * path to removal is `Delete`/`Backspace` on the {@link TagsInputItem} itself.
+ * Tabbing through every tag *and* every delete button is the thing the roving
+ * order exists to avoid.
+ *
+ * It still hands focus to the next tag (or the previous one, or the draft
+ * field) *before* signalling the removal, so removing a tag with the pointer
+ * never drops focus onto `<body>`.
  *
  * @example
  * ```tsx

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

@@ -6,9 +6,14 @@ import type { TagsInputItemDeleteProps } from './types.js';
  * `aria-label="Remove <tag>"`, disabled and `data-disabled` when the root
  * is disabled.
  *
- * Because the button is its own tab stop, it hands focus to the next delete
- * button (or the previous one, or the draft field) *before* signalling the
- * removal, so deleting a tag never drops focus onto `<body>`.
+ * It is deliberately **not** a Tab stop: the tags share one, and the keyboard
+ * path to removal is `Delete`/`Backspace` on the {@link TagsInputItem} itself.
+ * Tabbing through every tag *and* every delete button is the thing the roving
+ * order exists to avoid.
+ *
+ * It still hands focus to the next tag (or the previous one, or the draft
+ * field) *before* signalling the removal, so removing a tag with the pointer
+ * never drops focus onto `<body>`.
  *
  * @example
  * ```tsx