@nild/components 0.0.46 → 0.0.47

package/dist/_shared/utils/index.d.ts

@@ -2,8 +2,7 @@ import { default as getComputedStyleValue } from './get-computed-style-value';
 import { default as getGlobalState, GlobalStateKey } from './get-global-state';
 import { default as getOwnerDocument } from './get-owner-document';
 import { default as isPlainChildren } from './is-plain-children';
-import { default as lockDocumentScroll } from './lock-document-scroll';
 import { default as mergeHandlers } from './merge-handlers';
 import { default as mergeProps } from './merge-props';
 import { default as registerSlots } from './register-slots';
-export { getGlobalState, getComputedStyleValue, getOwnerDocument, GlobalStateKey, isPlainChildren, lockDocumentScroll, registerSlots, mergeHandlers, mergeProps, };
+export { getGlobalState, getComputedStyleValue, getOwnerDocument, GlobalStateKey, isPlainChildren, registerSlots, mergeHandlers, mergeProps, };

package/dist/form/Form.js

@@ -1 +1 @@
-import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useEffectCallback as B}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{forwardRef as D,useState as T,useRef as q,useCallback as z,useMemo as G}from"react";import H from"../_shared/utils/register-slots/index.js";import{isFieldElement as J}from"../field/Field.js";import{updateByPath as K,getByPath as L}from"./_shared/path.js";import{isActionsElement as O}from"./Actions.js";import{FormProvider as Q,hasIssues as U}from"./contexts/index.js";import{useFormIssues as W}from"./hooks/useFormIssues.js";import X from"./style/index.js";const M=(t,o)=>Array.isArray(t)?t.includes(o):t===o,Y=H({field:{isMatched:J,multiple:!0},actions:{isMatched:O}}),A=D((t,o)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:m=["submit","change"],onChange:c,onInvalid:d,onSubmit:f,disabled:l=!1,...C}=t,[i,p]=T(w),{errors:E,getMeta:v,touch:I,touchAll:N,validateValue:h}=W({resolver:x}),a=q(i);a.current=i;const g=B((r,s)=>{const e=K(a.current,r,s);e!==a.current&&(p(e),a.current=e,I(r),c?.(e),M(m,"change")&&h(e,r))}),b=z(r=>L(i,r),[i]),P=async r=>{if(r.preventDefault(),l)return;const s=a.current,e=M(m,"submit")?await h(s):{value:s,errors:E};if(!e)return;const u=e.value??s,n=e.errors??{};if(e.value&&(a.current=e.value,p(e.value)),U(n)){N(u,n),d?.(n,u,r);return}await f?.(u,r)},S=G(()=>({disabled:l,getMeta:v,getValue:b,setValue:g}),[l,v,b,g]),{slots:y}=Y(V);return j(Q,{value:S,children:k("form",{...C,className:R(X.form(),F),"data-disabled":l||void 0,ref:o,onSubmit:P,children:[y.field.el,y.actions.el]})})});A.displayName="Form";export{A as default};
+import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useRefState as B,useEffectCallback as R}from"@nild/hooks";import{cnMerge as D}from"@nild/shared";import{forwardRef as T,useCallback as q,useMemo as z}from"react";import G from"../_shared/utils/register-slots/index.js";import{isFieldElement as H}from"../field/Field.js";import{updateByPath as J,getByPath as K}from"./_shared/path.js";import{isActionsElement as L}from"./Actions.js";import{FormProvider as O,hasIssues as Q}from"./contexts/index.js";import{useFormIssues as U}from"./hooks/useFormIssues.js";import W from"./style/index.js";const M=(r,t)=>Array.isArray(r)?r.includes(t):r===t,X=G({field:{isMatched:H,multiple:!0},actions:{isMatched:L}}),A=T((r,t)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:u=["submit","change"],onChange:n,onInvalid:c,onSubmit:d,disabled:o=!1,...C}=r,[f,p,l]=B(w),{errors:E,getMeta:v,touch:I,touchAll:N,validateValue:h}=U({resolver:x}),g=R((a,s)=>{const e=J(l.current,a,s);e!==l.current&&(p(e),I(a),n?.(e),M(u,"change")&&h(e,a))}),b=q(a=>K(f,a),[f]),P=async a=>{if(a.preventDefault(),o)return;const s=l.current,e=M(u,"submit")?await h(s):{value:s,errors:E};if(!e)return;const i=e.value??s,m=e.errors??{};if(e.value&&p(e.value),Q(m)){N(i,m),c?.(m,i,a);return}await d?.(i,a)},S=z(()=>({disabled:o,getMeta:v,getValue:b,setValue:g}),[o,v,b,g]),{slots:y}=X(V);return j(O,{value:S,children:k("form",{...C,className:D(W.form(),F),"data-disabled":o||void 0,ref:t,onSubmit:P,children:[y.field.el,y.actions.el]})})});A.displayName="Form";export{A as default};

package/dist/modal/Portal.js

@@ -1 +1 @@
-import{jsxs as v,jsx as g}from"react/jsx-runtime";import{useEffectCallback as h,useEventListener as B}from"@nild/hooks";import{cnMerge as n,mergeRefs as H}from"@nild/shared";import{forwardRef as L,useRef as V,useEffect as q,isValidElement as A}from"react";import{createPortal as G}from"react-dom";import J from"../_shared/utils/get-owner-document/index.js";import K from"../_shared/utils/lock-document-scroll/index.js";import Q from"../_shared/utils/register-slots/index.js";import{isBodyElement as U}from"./Body.js";import W,{isCloseElement as X}from"./Close.js";import{useModalContext as Y}from"./contexts/index.js";import{isFooterElement as Z}from"./Footer.js";import{isHeaderElement as _}from"./Header.js";import{useModalStack as $}from"./hooks/useModalStack.js";import{useModalFocusScope as ee}from"./hooks/useModalFocusScope.js";import m from"./style/index.js";const re=e=>A(e)&&e.type===c,ae=Q({header:{isMatched:e=>_(e)},body:{isMatched:e=>U(e)},footer:{isMatched:e=>Z(e)},close:{isMatched:e=>X(e)}}),c=L(({className:e,style:M,children:k,container:d,overlayless:f=!1,overlayClassName:N,surfaceClassName:x,onTransitionEnd:C,...F},z)=>{const{open:s,variant:R,placement:p,size:w,closeOnEscape:I,closeOnOverlayClick:O,trapFocus:P,lockScroll:u,restoreFocus:j,accessibility:t,refs:y,updateOpen:b}=Y(),l=V(null),r=J(d,l.current,y.trigger.current),a=d??r?.body??null,{zIndex:D,topmost:i}=$(r,!!a),S=h(()=>{f||!s||!O||!i||b(!1)}),T=h(E=>{!s||!i||E.key==="Escape"&&I&&(E.preventDefault(),b(!1))});if(q(()=>{if(!(!a||!u||!r))return K(r)},[u,r,a]),ee({open:s,trapFocus:P,restoreFocus:j,topmost:i,ownerDocument:r,surfaceRef:l,triggerRef:y.trigger}),B(r,"keydown",T),!a)return null;const{slots:o}=ae(k);return G(v("div",{className:n(m.portal({placement:p}),e),style:{zIndex:D,...M},...F,children:[!f&&g("div",{className:n(m.overlay(),N),onClick:S}),v("div",{ref:H(l,z),className:n(m.surface({variant:R,placement:p,size:w}),x),"aria-describedby":t["aria-describedby"],"aria-label":t["aria-label"],"aria-labelledby":t["aria-labelledby"],"aria-modal":"true",role:"dialog",tabIndex:-1,onTransitionEnd:C,children:[o.header.el,o.body.el,o.footer.el,o.close.el??g(W,{})]})]}),a)});c.displayName="Modal.Portal";export{c as default,re as isPortalElement};
+import{jsxs as E,jsx as v}from"react/jsx-runtime";import{useEffectCallback as g,useScrollLock as T,useEventListener as B}from"@nild/hooks";import{cnMerge as n,mergeRefs as H}from"@nild/shared";import{forwardRef as V,useRef as q,isValidElement as A}from"react";import{createPortal as G}from"react-dom";import J from"../_shared/utils/get-owner-document/index.js";import K from"../_shared/utils/register-slots/index.js";import{isBodyElement as Q}from"./Body.js";import U,{isCloseElement as W}from"./Close.js";import{useModalContext as X}from"./contexts/index.js";import{isFooterElement as Y}from"./Footer.js";import{isHeaderElement as Z}from"./Header.js";import{useModalStack as _}from"./hooks/useModalStack.js";import{useModalFocusScope as $}from"./hooks/useModalFocusScope.js";import c from"./style/index.js";const ee=e=>A(e)&&e.type===m,ae=K({header:{isMatched:e=>Z(e)},body:{isMatched:e=>Q(e)},footer:{isMatched:e=>Y(e)},close:{isMatched:e=>W(e)}}),m=V(({className:e,style:h,children:M,container:d,overlayless:p=!1,overlayClassName:k,surfaceClassName:N,onTransitionEnd:x,...C},F)=>{const{open:s,variant:R,placement:f,size:z,closeOnEscape:w,closeOnOverlayClick:I,trapFocus:O,lockScroll:P,restoreFocus:S,accessibility:l,refs:u,updateOpen:b}=X(),t=q(null),a=J(d,t.current,u.trigger.current),r=d??a?.body??null,{zIndex:j,topmost:i}=_(a,!!r),D=g(()=>{p||!s||!I||!i||b(!1)}),L=g(y=>{!s||!i||y.key==="Escape"&&w&&(y.preventDefault(),b(!1))});if(T(a,P&&!!r),$({open:s,trapFocus:O,restoreFocus:S,topmost:i,ownerDocument:a,surfaceRef:t,triggerRef:u.trigger}),B(a,"keydown",L),!r)return null;const{slots:o}=ae(M);return G(E("div",{className:n(c.portal({placement:f}),e),style:{zIndex:j,...h},...C,children:[!p&&v("div",{className:n(c.overlay(),k),onClick:D}),E("div",{ref:H(t,F),className:n(c.surface({variant:R,placement:f,size:z}),N),"aria-describedby":l["aria-describedby"],"aria-label":l["aria-label"],"aria-labelledby":l["aria-labelledby"],"aria-modal":"true",role:"dialog",tabIndex:-1,onTransitionEnd:x,children:[o.header.el,o.body.el,o.footer.el,o.close.el??v(U,{})]})]}),r)});m.displayName="Modal.Portal";export{m as default,ee as isPortalElement};

package/dist/modal/hooks/useModalFocusScope.js

@@ -1 +1 @@
-import{useEffectCallback as v,useIsomorphicLayoutEffect as A,useEventListener as y}from"@nild/hooks";import{useRef as h,useEffect as E}from"react";const C=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe","summary",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(","),w=e=>{const t=e.ownerDocument.defaultView;if(!t)return!e.hidden;const o=t.getComputedStyle(e);return o.display!=="none"&&o.visibility!=="hidden"&&!e.hidden},g=e=>Array.from(e.querySelectorAll(C)).filter(t=>!t.hasAttribute("disabled")&&t.getAttribute("aria-hidden")!=="true"&&t.tabIndex>=0&&w(t)),m=(e,t=!1)=>{const o=g(e).at(t?-1:0)??e;return o.focus(),o},K=(e,t)=>{var o;const c=e!=null&&e.isConnected?e:t!=null&&t.isConnected?t:null;(o=c?.focus)==null||o.call(c)},S=({open:e,trapFocus:t,restoreFocus:o,topmost:c,ownerDocument:u,surfaceRef:a,triggerRef:p})=>{const b=h(null),i=h(e),x=v(n=>{const r=a.current;if(!r||!e||!c||n.key!=="Tab"||!t)return;const s=g(r),l=u?.activeElement;if(s.length===0){n.preventDefault(),r.focus();return}if(!l||!r.contains(l)){n.preventDefault(),m(r,n.shiftKey);return}const d=s[0],f=s.at(-1);n.shiftKey&&l===d?(n.preventDefault(),f?.focus()):!n.shiftKey&&l===f&&(n.preventDefault(),d?.focus())}),D=v(n=>{const r=a.current,s=n.target;!r||!t||!e||!c||!s||r.contains(s)||m(r)});E(()=>{const n=i.current;e&&!n&&(b.current=u?.activeElement),i.current=e},[e,u]),E(()=>{const n=p.current;return()=>{!o||i.current||K(b.current,n)}},[o,p]),A(()=>{if(!e)return;const n=setTimeout(()=>{const r=a.current;if(!r||!c)return;const s=u?.activeElement;(!s||!r.contains(s))&&m(r)},0);return()=>{clearTimeout(n)}},[e,u,a,c]),y(u,"keydown",x),y(u,"focusin",D)};export{S as useModalFocusScope};
+import{useTimeout as C,useEffectCallback as h,useIsomorphicLayoutEffect as w,useEventListener as y}from"@nild/hooks";import{useRef as E,useEffect as g}from"react";const K=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe","summary",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(","),S=e=>{const n=e.ownerDocument.defaultView;if(!n)return!e.hidden;const u=n.getComputedStyle(e);return u.display!=="none"&&u.visibility!=="hidden"&&!e.hidden},x=e=>Array.from(e.querySelectorAll(K)).filter(n=>!n.hasAttribute("disabled")&&n.getAttribute("aria-hidden")!=="true"&&n.tabIndex>=0&&S(n)),p=(e,n=!1)=>{const u=x(e).at(n?-1:0)??e;return u.focus(),u},k=(e,n)=>{var u;const c=e!=null&&e.isConnected?e:n!=null&&n.isConnected?n:null;(u=c?.focus)==null||u.call(c)},F=({open:e,trapFocus:n,restoreFocus:u,topmost:c,ownerDocument:o,surfaceRef:a,triggerRef:b})=>{const v=E(null),i=E(e),d=C(()=>{const t=a.current;if(!t||!c)return;const r=o?.activeElement;(!r||!t.contains(r))&&p(t)},0),D=h(t=>{const r=a.current;if(!r||!e||!c||t.key!=="Tab"||!n)return;const s=x(r),l=o?.activeElement;if(s.length===0){t.preventDefault(),r.focus();return}if(!l||!r.contains(l)){t.preventDefault(),p(r,t.shiftKey);return}const f=s[0],m=s.at(-1);t.shiftKey&&l===f?(t.preventDefault(),m?.focus()):!t.shiftKey&&l===m&&(t.preventDefault(),f?.focus())}),A=h(t=>{const r=a.current,s=t.target;!r||!n||!e||!c||!s||r.contains(s)||p(r)});g(()=>{const t=i.current;e&&!t&&(v.current=o?.activeElement),i.current=e},[e,o]),g(()=>{const t=b.current;return()=>{!u||i.current||k(v.current,t)}},[u,b]),w(()=>{if(e)return d.run(),d.cancel},[d,e,o,a,c]),y(o,"keydown",D),y(o,"focusin",A)};export{F as useModalFocusScope};

package/dist/popup/Popup.js

@@ -1 +1 @@
-import{jsxs as H,jsx as l}from"react/jsx-runtime";import{useControllableState as J,useEffectCallback as f,useIsomorphicLayoutEffect as K}from"@nild/hooks";import{isArray as Q,makeArray as V,isFunction as W}from"@nild/shared";import{useState as X,useMemo as P,useRef as Y}from"react";import Z from"../_shared/utils/register-slots/index.js";import _ from"../transition/Transition.js";import{PopupProvider as $,PortalProvider as G,ArrowProvider as ee}from"./contexts/index.js";import re from"./hooks/usePopup.js";import R from"./Portal.js";import m from"./Trigger.js";const te=Z({trigger:{isMatched:e=>e.type===m},portal:{isMatched:e=>e.type===R},firstBare:{isMatched:e=>e.type!==m&&e.type!==R,strategy:"first"}}),T=({children:e,placement:b,offset:x,action:d="click",size:h="medium",arrowed:v=!0,inverse:y=!1,delay:a=100,open:A,defaultOpen:g=!1,disabled:B,onOpen:w,onClose:C})=>{const{slots:t}=te(e),[o,O]=X(g),[s,j]=J(A,g),[k,z=100]=Q(a)?a:[a,a],i=P(()=>new Set(V(d)),[d]),r=Y(),[{triggerRef:n,portalRef:u,portalContext:E,arrowRef:S,arrowContext:F},{update:I,autoUpdate:L}]=re({placement:b,offset:x}),p=f(c=>{B||j(D=>{const M=W(c)?c(D):c;return M?w?.():C?.(),M})}),N=f(()=>{i.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{p(!0)},k))}),U=f(()=>{i.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{p(!1)},z))}),q=P(()=>({actions:i,size:h,arrowed:v,inverse:y,refs:{trigger:n,portal:u,arrow:S},setOpen:p,enter:N,leave:U}),[i,h,v,y]);return K(()=>{if(s&&!o)O(!0);else if(s&&o&&n.current&&u.current)return L(n.current,u.current,I)},[s,o]),H($,{value:q,children:[t.trigger.el??(t.firstBare.el&&l(m,{children:t.firstBare.el})),l(G,{value:E,children:l(ee,{value:F,children:t.portal.el&&l(_,{visible:s,children:o&&t.portal.el})})})]})};T.displayName="Popup";export{T as default};
+import{jsxs as K,jsx as i}from"react/jsx-runtime";import{useControllableState as Q,useEffectCallback as u,useTimeout as M,useIsomorphicLayoutEffect as V}from"@nild/hooks";import{isArray as W,makeArray as X,isFunction as Y}from"@nild/shared";import{useState as Z,useMemo as P}from"react";import _ from"../_shared/utils/register-slots/index.js";import $ from"../transition/Transition.js";import{PopupProvider as J,PortalProvider as ee,ArrowProvider as re}from"./contexts/index.js";import te from"./hooks/usePopup.js";import O from"./Portal.js";import m from"./Trigger.js";const oe=_({trigger:{isMatched:e=>e.type===m},portal:{isMatched:e=>e.type===O},firstBare:{isMatched:e=>e.type!==m&&e.type!==O,strategy:"first"}}),R=({children:e,placement:S,offset:j,action:f="click",size:d="medium",arrowed:h=!0,inverse:v=!1,delay:t=100,open:k,defaultOpen:y=!1,disabled:z,onOpen:g,onClose:w})=>{const{slots:r}=oe(e),[o,A]=Z(y),[a,B]=Q(k,y),[E,F=100]=W(t)?t:[t,t],s=P(()=>new Set(X(f)),[f]),[{triggerRef:l,portalRef:n,portalContext:I,arrowRef:L,arrowContext:N},{update:T,autoUpdate:U}]=te({placement:S,offset:j}),p=u(c=>{z||B(H=>{const b=Y(c)?c(H):c;return b?g?.():w?.(),b})}),x=M(()=>p(!0),E),C=M(()=>p(!1),F),q=u(()=>{s.has("hover")&&(C.cancel(),x.run())}),D=u(()=>{s.has("hover")&&(x.cancel(),C.run())}),G=P(()=>({actions:s,size:d,arrowed:h,inverse:v,refs:{trigger:l,portal:n,arrow:L},setOpen:p,enter:q,leave:D}),[s,d,h,v]);return V(()=>{if(a&&!o)A(!0);else if(a&&o&&l.current&&n.current)return U(l.current,n.current,T)},[a,o]),K(J,{value:G,children:[r.trigger.el??(r.firstBare.el&&i(m,{children:r.firstBare.el})),i(ee,{value:I,children:i(re,{value:N,children:r.portal.el&&i($,{visible:a,children:o&&r.portal.el})})})]})};R.displayName="Popup";export{R as default};

package/dist/segment/Segment.js

@@ -1 +1 @@
-import{jsxs as Y,jsx as j}from"react/jsx-runtime";import{useControllableState as Z,useEffectCallback as u,useIsomorphicLayoutEffect as D}from"@nild/hooks";import{forwardRefWithGenerics as _,mergeRefs as K,cnMerge as Q}from"@nild/shared";import{useRef as L,useState as M,useMemo as ee,cloneElement as te}from"react";import{useRovingIndexNavigation as oe}from"../_shared/hooks/use-roving-index-navigation/index.js";import F from"../_shared/utils/merge-handlers/index.js";import ne from"../_shared/utils/register-slots/index.js";import{SegmentProvider as se}from"./contexts/index.js";import{isItemElement as ie}from"./Item.js";import $ from"./style/index.js";const re=ne({item:{isMatched:ie,multiple:!0}}),ae=y=>{const{slots:h}=re(y),g=h.item.el,a=[],d=[];return g.forEach((i,l)=>{var c;a.push({key:((c=i.key)==null?void 0:c.toString())??`${h.item.seq[l]}`,element:i,props:i.props}),i.props.disabled||d.push(l)}),{items:a,enabledIndices:d,firstEnabledIndex:d[0]??-1}},q=_((y,h)=>{const{className:g,children:a,value:d,defaultValue:i,onChange:l,size:c="medium",orientation:m="horizontal",disabled:p=!1,block:x=!1,...k}=y,I=L(null),v=L([]),[A,C]=M({opacity:0}),{items:s,enabledIndices:z,firstEnabledIndex:b}=ee(()=>ae(a),[a]),W=i??(b>=0?s[b].props.value:void 0),[S,G]=Z(d,W),N=s.findIndex(e=>Object.is(e.props.value,S)),r=N>=0?N:b,w=z.includes(r)?r:b,[O,E]=M(w),H=u(e=>{Object.is(S,e)||(G(e),l?.(e))}),R=u(e=>{const t=s[e];!t||p||t.props.disabled||H(t.props.value)}),P=u(e=>{const t=v.current[e];!t||typeof window>"u"||window.requestAnimationFrame(()=>{t.isConnected&&t.focus()})}),T=u(e=>{E(e),P(e)}),{handleKeyDown:V}=oe({orientation:m,activeIndex:O,selectedIndex:w,enabledIndices:p?[]:z,selectOnMove:!0,selectOnConfirm:!0,onActiveChange:T,onSelect:R,onKeyDown:k.onKeyDown}),f=u(()=>{const e=I.current,t=v.current[r];if(!e||!t||r<0){C(o=>o.opacity===0?o:{opacity:0});return}const n={opacity:1,width:t.offsetWidth,height:t.offsetHeight,transform:`translate3d(${t.offsetLeft}px, ${t.offsetTop}px, 0)`};C(o=>o.opacity===n.opacity&&o.width===n.width&&o.height===n.height&&o.transform===n.transform?o:n)});D(()=>{E(w)},[w]),D(()=>{f();const e=I.current;if(!e||typeof window>"u")return;const t=window.ResizeObserver;if(t){const n=new t(f);return n.observe(e),v.current.slice(0,s.length).forEach(o=>{o&&n.observe(o)}),()=>{n.disconnect()}}return window.addEventListener("resize",f),()=>{window.removeEventListener("resize",f)}},[x,r,s,m,c,f]);const B=(e,t)=>{const{element:n}=e,o=p||!!e.props.disabled,J=t===r,U=t===O;return j(se,{value:{selected:J,size:c,orientation:m,block:x},children:te(n,{value:e.props.value,disabled:o,tabIndex:U&&!o?0:-1,onClick:F(e.props.onClick,()=>R(t)),onFocus:F(e.props.onFocus,()=>{!o&&E(t)}),ref:K(n.ref,X=>{v.current[t]=X})})},e.key)};return Y("div",{...k,"aria-disabled":p,"aria-orientation":m,className:Q($.segment({orientation:m,block:x}),g),"data-disabled":p||void 0,onKeyDown:V,ref:K(h,I),role:"radiogroup",children:[s.length>0&&j("div",{"aria-hidden":"true",className:$.indicator(),style:A}),s.map(B)]})});q.displayName="Segment";export{q as default};
+import{jsxs as _,jsx as z}from"react/jsx-runtime";import{useControllableState as U,useEffectCallback as u,useIsomorphicLayoutEffect as D,useResizeObserver as ee}from"@nild/hooks";import{forwardRefWithGenerics as te,mergeRefs as K,cnMerge as oe}from"@nild/shared";import{useRef as M,useState as F,useMemo as $,cloneElement as se}from"react";import{useRovingIndexNavigation as ne}from"../_shared/hooks/use-roving-index-navigation/index.js";import q from"../_shared/utils/merge-handlers/index.js";import ie from"../_shared/utils/register-slots/index.js";import{SegmentProvider as re}from"./contexts/index.js";import{isItemElement as ae}from"./Item.js";import A from"./style/index.js";const le=ie({item:{isMatched:ae,multiple:!0}}),de=g=>{const{slots:f}=le(g),y=f.item.el,a=[],l=[];return y.forEach((i,d)=>{var c;a.push({key:((c=i.key)==null?void 0:c.toString())??`${f.item.seq[d]}`,element:i,props:i.props}),i.props.disabled||l.push(d)}),{items:a,enabledIndices:l,firstEnabledIndex:l[0]??-1}},L=te((g,f)=>{const{className:y,children:a,value:l,defaultValue:i,onChange:d,size:c="medium",orientation:m="horizontal",disabled:p=!1,block:I=!1,...C}=g,w=M(null),h=M([]),[W,E]=F({opacity:0}),{items:s,enabledIndices:S,firstEnabledIndex:b}=$(()=>de(a),[a]),G=i??(b>=0?s[b].props.value:void 0),[N,H]=U(l,G),O=s.findIndex(e=>Object.is(e.props.value,N)),r=O>=0?O:b,v=S.includes(r)?r:b,[R,x]=F(v),P=u(e=>{Object.is(N,e)||(H(e),d?.(e))}),j=u(e=>{const t=s[e];!t||p||t.props.disabled||P(t.props.value)}),T=u(e=>{const t=h.current[e];!t||typeof window>"u"||window.requestAnimationFrame(()=>{t.isConnected&&t.focus()})}),V=u(e=>{x(e),T(e)}),{handleKeyDown:B}=ne({orientation:m,activeIndex:R,selectedIndex:v,enabledIndices:p?[]:S,selectOnMove:!0,selectOnConfirm:!0,onActiveChange:V,onSelect:j,onKeyDown:C.onKeyDown}),k=u(()=>{const e=w.current,t=h.current[r];if(!e||!t||r<0){E(o=>o.opacity===0?o:{opacity:0});return}const n={opacity:1,width:t.offsetWidth,height:t.offsetHeight,transform:`translate3d(${t.offsetLeft}px, ${t.offsetTop}px, 0)`};E(o=>o.opacity===n.opacity&&o.width===n.width&&o.height===n.height&&o.transform===n.transform?o:n)});D(()=>{x(v)},[v]),D(()=>{k()},[I,r,s,m,c,k]);const J=$(()=>[w,...s.map((e,t)=>({get current(){return h.current[t]}}))],[s]);ee(J,k);const Q=(e,t)=>{const{element:n}=e,o=p||!!e.props.disabled,X=t===r,Y=t===R;return z(re,{value:{selected:X,size:c,orientation:m,block:I},children:se(n,{value:e.props.value,disabled:o,tabIndex:Y&&!o?0:-1,onClick:q(e.props.onClick,()=>j(t)),onFocus:q(e.props.onFocus,()=>{!o&&x(t)}),ref:K(n.ref,Z=>{h.current[t]=Z})})},e.key)};return _("div",{...C,"aria-disabled":p,"aria-orientation":m,className:oe(A.segment({orientation:m,block:I}),y),"data-disabled":p||void 0,onKeyDown:B,ref:K(f,w),role:"radiogroup",children:[s.length>0&&z("div",{"aria-hidden":"true",className:A.indicator(),style:W}),s.map(Q)]})});L.displayName="Segment";export{L as default};

package/dist/select/hooks/useSelectNavigation.js

@@ -1 +1 @@
-import{useEffectCallback as i,useIsomorphicLayoutEffect as v}from"@nild/hooks";import{useRef as I,useState as L}from"react";const x=n=>{if(typeof window>"u"||!n)return;const s=n.ownerDocument;s.activeElement!==n&&window.requestAnimationFrame(()=>{n.isConnected&&s.activeElement!==n&&n.focus()})},T=({open:n,selectedIndex:s,enabledIndices:t,triggerRef:k,listboxRef:D,optionRefs:g,onOpen:p,onClose:l,onSelect:m})=>{const d=I(!1),[o,f]=L(-1),w=i(()=>x(D.current)),b=i(()=>x(k.current)),a=e=>f(r=>{const c=t.length-1;if(c<0)return-1;if(e==="start")return t[0];if(e==="end")return t[c];const u=t.indexOf(r);if(u===-1)return e===1?t[0]:t[c];const A=Math.min(Math.max(u+e,0),c);return t[A]}),h=i(e=>{if(t.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),n?a(1):p();break;case"ArrowUp":e.preventDefault(),n?a(-1):p();break;case"Home":n&&(e.preventDefault(),a("start"));break;case"End":n&&(e.preventDefault(),a("end"));break;case"Enter":case" ":e.preventDefault(),n?m(o):p();break;case"Escape":n&&(e.preventDefault(),l(),b());break}}),E=i(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),a(1);break;case"ArrowUp":e.preventDefault(),a(-1);break;case"Home":e.preventDefault(),a("start");break;case"End":e.preventDefault(),a("end");break;case"Enter":case" ":e.preventDefault(),m(o);break;case"Escape":e.preventDefault(),l(),b();break;case"Tab":l();break}}),y=i(e=>{var r,c;const u=e.relatedTarget;(r=k.current)!=null&&r.contains(u)||(c=D.current)!=null&&c.contains(u)||l()});return v(()=>{if(!n){d.current=!1,f(-1);return}const e=s>=0?s:t[0]??-1;f(r=>d.current&&t.includes(r)?r:e),d.current=!0},[t,n,s]),v(()=>{n&&w()},[w,n]),v(()=>{if(!n||o<0||typeof window>"u")return;const e=window.requestAnimationFrame(()=>{var r;(r=g.current[o])==null||r.scrollIntoView({block:"nearest"})});return()=>window.cancelAnimationFrame(e)},[o,n]),{activeIndex:o,setActiveIndex:f,focusTrigger:b,focusListbox:w,handleTriggerKeyDown:h,handleListboxKeyDown:E,handleListboxBlur:y}};export{T as useSelectNavigation};
+import{useRaf as k,useEffectCallback as l,useIsomorphicLayoutEffect as w}from"@nild/hooks";import{useRef as C,useState as H}from"react";const g=n=>{if(typeof window>"u"||!n)return;const c=n.ownerDocument;c.activeElement!==n&&n.isConnected&&c.activeElement!==n&&n.focus()},K=({open:n,selectedIndex:c,enabledIndices:t,triggerRef:m,listboxRef:h,optionRefs:x,onOpen:p,onClose:f,onSelect:E})=>{const b=C(!1),[u,i]=H(-1),y=k(()=>g(h.current)),A=k(()=>g(m.current)),d=k(()=>{var e;(e=x.current[u])==null||e.scrollIntoView({block:"nearest"})}),v=l(()=>y.run()),D=l(()=>A.run()),r=e=>i(a=>{const s=t.length-1;if(s<0)return-1;if(e==="start")return t[0];if(e==="end")return t[s];const o=t.indexOf(a);if(o===-1)return e===1?t[0]:t[s];const T=Math.min(Math.max(o+e,0),s);return t[T]}),I=l(e=>{if(t.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),n?r(1):p();break;case"ArrowUp":e.preventDefault(),n?r(-1):p();break;case"Home":n&&(e.preventDefault(),r("start"));break;case"End":n&&(e.preventDefault(),r("end"));break;case"Enter":case" ":e.preventDefault(),n?E(u):p();break;case"Escape":n&&(e.preventDefault(),f(),D());break}}),L=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),r(1);break;case"ArrowUp":e.preventDefault(),r(-1);break;case"Home":e.preventDefault(),r("start");break;case"End":e.preventDefault(),r("end");break;case"Enter":case" ":e.preventDefault(),E(u);break;case"Escape":e.preventDefault(),f(),D();break;case"Tab":f();break}}),R=l(e=>{var a,s;const o=e.relatedTarget;(a=m.current)!=null&&a.contains(o)||(s=h.current)!=null&&s.contains(o)||f()});return w(()=>{if(!n){b.current=!1,i(-1);return}const e=c>=0?c:t[0]??-1;i(a=>b.current&&t.includes(a)?a:e),b.current=!0},[t,n,c]),w(()=>{n&&v()},[v,n]),w(()=>{if(!(!n||u<0))return d.run(),d.cancel},[u,n,d]),{activeIndex:u,setActiveIndex:i,focusTrigger:D,focusListbox:v,handleTriggerKeyDown:I,handleListboxKeyDown:L,handleListboxBlur:R}};export{K as useSelectNavigation};

package/dist/watermark/hooks/useWatermarkLayer.js

@@ -1,3 +1,3 @@
-import{useEffectCallback as F}from"@nild/hooks";import{useState as H,useRef as W,useMemo as f,useCallback as b,useEffect as $}from"react";import k from"../../_shared/utils/get-computed-style-value/index.js";import"@nild/shared";import{normalizeContent as G,normalizeImage as N,toTuple as I,createTile as R}from"../_shared/canvas.js";const m={dataUrl:null,size:null},w=C=>{const{rootRef:v,layerRef:p,text:g,image:h,pattern:t,textStyle:o,opacity:E,zIndex:j,onError:y}=C,[n,A]=H(m),z=W(m),u=f(()=>G(g).join(`
-`),[g]),s=f(()=>{const l=N(h);return l?{...l}:void 0},[h]),r=f(()=>{const[l,i]=I(t?.gap,[64,48]),[e,a]=I(t?.offset,[0,0]);return{gap:[l,i],offset:[e,a],rotate:t?.rotate??-22,composition:t?.composition??"stack",compositionGap:t?.compositionGap??8}},[t?.composition,t?.compositionGap,t?.gap,t?.offset,t?.rotate]),S=b(()=>{const l=o?.fontSize??16,i=k(p.current,"color");return{fontSize:l,fontWeight:o?.fontWeight??400,fontFamily:o?.fontFamily||k(v.current,"fontFamily")||"-apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",fontStyle:o?.fontStyle??"normal",lineHeight:o?.lineHeight??l*1.4,color:o!=null&&o.color?i||o.color:i||"currentColor",textAlign:o?.textAlign??"center"}},[p,v,o?.color,o?.fontFamily,o?.fontSize,o?.fontStyle,o?.fontWeight,o?.lineHeight,o?.textAlign]),x=F((l,i)=>{y?.(l,i)}),d=b(l=>{var i,e,a,U;const{current:c}=z;(c.dataUrl!==l.dataUrl||((i=c.size)==null?void 0:i.width)!==((e=l.size)==null?void 0:e.width)||((a=c.size)==null?void 0:a.height)!==((U=l.size)==null?void 0:U.height))&&(z.current=l,A(l))},[]);return $(()=>{let l=!1;const i=u?u.split(`
-`):[];if(!i.length&&!s){d(m);return}return R({content:i,image:s,pattern:r,textStyle:S()}).then(e=>{l||(d({dataUrl:e.dataUrl,size:e.width&&e.height?{width:e.width,height:e.height}:null}),e.error&&e.image&&x(e.error,e.image))}),()=>{l=!0}},[x,u,s,r,S,d]),{layerStyle:{backgroundImage:n.dataUrl?`url(${n.dataUrl})`:void 0,backgroundSize:n.size?`${n.size.width}px ${n.size.height}px`:void 0,backgroundPosition:`${r.offset[0]}px ${r.offset[1]}px`,color:o?.color,opacity:E??.16,zIndex:j??1}}};export{w as default,w as useWatermarkLayer};
+import{useRefState as F,useEffectCallback as H}from"@nild/hooks";import{useMemo as f,useCallback as b,useEffect as W}from"react";import k from"../../_shared/utils/get-computed-style-value/index.js";import"@nild/shared";import{normalizeContent as j,normalizeImage as G,toTuple as I,createTile as N}from"../_shared/canvas.js";const w={dataUrl:null,size:null},C=E=>{const{rootRef:m,layerRef:v,text:p,image:g,pattern:t,textStyle:o,opacity:$,zIndex:A,onError:h}=E,[n,y,z]=F(w),u=f(()=>j(p).join(`
+`),[p]),s=f(()=>{const l=G(g);return l?{...l}:void 0},[g]),r=f(()=>{const[l,i]=I(t?.gap,[64,48]),[e,a]=I(t?.offset,[0,0]);return{gap:[l,i],offset:[e,a],rotate:t?.rotate??-22,composition:t?.composition??"stack",compositionGap:t?.compositionGap??8}},[t?.composition,t?.compositionGap,t?.gap,t?.offset,t?.rotate]),S=b(()=>{const l=o?.fontSize??16,i=k(v.current,"color");return{fontSize:l,fontWeight:o?.fontWeight??400,fontFamily:o?.fontFamily||k(m.current,"fontFamily")||"-apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",fontStyle:o?.fontStyle??"normal",lineHeight:o?.lineHeight??l*1.4,color:o!=null&&o.color?i||o.color:i||"currentColor",textAlign:o?.textAlign??"center"}},[v,m,o?.color,o?.fontFamily,o?.fontSize,o?.fontStyle,o?.fontWeight,o?.lineHeight,o?.textAlign]),x=H((l,i)=>{h?.(l,i)}),d=b(l=>{var i,e,a,U;const{current:c}=z;(c.dataUrl!==l.dataUrl||((i=c.size)==null?void 0:i.width)!==((e=l.size)==null?void 0:e.width)||((a=c.size)==null?void 0:a.height)!==((U=l.size)==null?void 0:U.height))&&y(l)},[y,z]);return W(()=>{let l=!1;const i=u?u.split(`
+`):[];if(!i.length&&!s){d(w);return}return N({content:i,image:s,pattern:r,textStyle:S()}).then(e=>{l||(d({dataUrl:e.dataUrl,size:e.width&&e.height?{width:e.width,height:e.height}:null}),e.error&&e.image&&x(e.error,e.image))}),()=>{l=!0}},[x,u,s,r,S,d]),{layerStyle:{backgroundImage:n.dataUrl?`url(${n.dataUrl})`:void 0,backgroundSize:n.size?`${n.size.width}px ${n.size.height}px`:void 0,backgroundPosition:`${r.offset[0]}px ${r.offset[1]}px`,color:o?.color,opacity:$??.16,zIndex:A??1}}};export{C as default,C as useWatermarkLayer};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.46",
+  "version": "0.0.47",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,9 +31,9 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@nild/icons": "^0.0.20",
-    "@nild/hooks": "^0.0.20",
-    "@nild/shared": "^0.0.17"
+    "@nild/hooks": "^0.0.21",
+    "@nild/shared": "^0.0.18",
+    "@nild/icons": "^0.0.21"
   },
   "scripts": {
     "build": "vite build --mode PROD",

package/dist/_shared/utils/lock-document-scroll/__tests__/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/_shared/utils/lock-document-scroll/index.d.ts

@@ -1,2 +0,0 @@
-declare const lockDocumentScroll: (doc: Document) => () => void;
-export default lockDocumentScroll;

package/dist/_shared/utils/lock-document-scroll/index.js

@@ -1 +0,0 @@
-import{isBrowser as r}from"@nild/shared";let t=0,n="",i="";const a=e=>{const o=e.defaultView??(r()?window:null);return o?[e.documentElement,e.body].some(d=>{const l=o.getComputedStyle(d),s=l.getPropertyValue("scrollbar-gutter")||l.scrollbarGutter||"";return/\bstable\b/.test(s)}):!1},y=e=>{if(!r())return()=>{};if(t===0){n=e.body.style.overflow,i=e.body.style.paddingRight;const o=Number.parseFloat(window.getComputedStyle(e.body).paddingRight||"0")||0,d=e.documentElement.clientWidth>0?window.innerWidth-e.documentElement.clientWidth:0,l=!a(e);e.body.style.overflow="hidden",l&&d>0&&(e.body.style.paddingRight=`${o+d}px`)}return t+=1,()=>{t=Math.max(0,t-1),t===0&&(e.body.style.overflow=n,e.body.style.paddingRight=i)}};export{y as default};