@nild/components 0.0.53 → 0.0.54

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

@@ -0,0 +1 @@
+export * from './portal-container';

package/dist/_shared/contexts/portal-container/index.d.ts

@@ -0,0 +1,5 @@
+export interface PortalContainerContextValue {
+    container: HTMLElement | null;
+}
+declare const PortalContainerProvider: import('react').Provider<PortalContainerContextValue>, usePortalContainerContext: () => PortalContainerContextValue;
+export { PortalContainerProvider, usePortalContainerContext };

package/dist/_shared/contexts/portal-container/index.js

@@ -0,0 +1 @@
+import{createContextSuite as t}from"@nild/shared";const[e,o]=t({defaultValue:{container:null}});export{e as PortalContainerProvider,o as usePortalContainerContext};

package/dist/modal/Portal.js

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

package/dist/modal/hooks/useModalFocusScope.d.ts

@@ -5,8 +5,9 @@ interface UseModalFocusScopeOptions {
     restoreFocus: boolean;
     topmost: boolean;
     ownerDocument: Document | null;
+    portalContainerRef?: RefObject<HTMLElement>;
     surfaceRef: RefObject<HTMLElement>;
     triggerRef: RefObject<Element>;
 }
-export declare const useModalFocusScope: ({ open, trapFocus, restoreFocus, topmost, ownerDocument, surfaceRef, triggerRef, }: UseModalFocusScopeOptions) => void;
+export declare const useModalFocusScope: ({ open, trapFocus, restoreFocus, topmost, ownerDocument, portalContainerRef, surfaceRef, triggerRef, }: UseModalFocusScopeOptions) => void;
 export {};

package/dist/modal/hooks/useModalFocusScope.js

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

package/dist/modal/hooks/useModalStack.d.ts

@@ -1,4 +1,4 @@
 export declare const useModalStack: (ownerDocument: Document | null, present: boolean) => {
-    zIndex: number;
+    zIndex: string;
     topmost: boolean;
 };

package/dist/modal/hooks/useModalStack.js

@@ -1 +1 @@
-import{useRef as l,useEffect as m,useSyncExternalStore as S}from"react";import{getModalStackStore as d,EMPTY_MODAL_STACK as u}from"../_shared/stack.js";const f=40,i=(e,o)=>{const r=l(Symbol("modal")),t=e?d(e):null;m(()=>{if(!(!o||!t))return t.mount(r.current)},[o,t]);const n=S(c=>t?.subscribe(c)??(()=>{}),()=>t?.getSnapshot()??u,()=>u),s=n.indexOf(r.current),a=n.at(-1)===r.current;return{zIndex:f+(s===-1?0:s),topmost:a}};export{i as useModalStack};
+import{useRef as m,useEffect as d,useSyncExternalStore as i}from"react";import{getModalStackStore as S,EMPTY_MODAL_STACK as s}from"../_shared/stack.js";const n="var(--z-index-modal)",f=o=>o<=0?n:`calc(${n} + ${o})`,p=(o,e)=>{const r=m(Symbol("modal")),t=o?S(o):null;d(()=>{if(!(!e||!t))return t.mount(r.current)},[e,t]);const a=i(l=>t?.subscribe(l)??(()=>{}),()=>t?.getSnapshot()??s,()=>s),u=a.indexOf(r.current),c=a.at(-1)===r.current;return{zIndex:f(u),topmost:c}};export{p as useModalStack};

package/dist/popup/Portal.js

@@ -1 +1 @@
-import{jsxs as P,jsx as g}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{mergeRefs as h,cnMerge as n,getDPR as R}from"@nild/shared";import{forwardRef as b,Children as j,isValidElement as w,cloneElement as z}from"react";import{createPortal as L}from"react-dom";import $ from"./Arrow.js";import{usePopupContext as k,usePortalContext as A}from"./contexts/index.js";import m from"./style/index.js";const i=b(({className:p,style:f,children:u,container:c=document.body,...o},d)=>{var s;const{size:v,inverse:x,refs:y,enter:C,leave:E}=k(),{coords:l}=A(),e=j.toArray(u).find(r=>w(r)),M=t(r=>{var a;(a=o?.onMouseEnter)==null||a.call(o,r),C()}),N=t(r=>{var a;(a=o?.onMouseLeave)==null||a.call(o,r),E()});return e?L(P("div",{...o,className:n(m.portal(),p),style:{transform:`translate(${l.x}px, ${l.y}px)`,...R()>=1.5&&{willChange:"transform"},...f},onMouseEnter:M,onMouseLeave:N,ref:h(y.portal,d),children:[z(e,{...e.props,className:n(m.portalContent({size:v,inverse:x}),(s=e?.props)==null?void 0:s.className)}),g($,{})]}),c):null});i.displayName="Popup.Portal";export{i as default};
+import{jsxs as R,jsx as b}from"react/jsx-runtime";import{useEffectCallback as p}from"@nild/hooks";import{mergeRefs as j,cnMerge as u,getDPR as w}from"@nild/shared";import{forwardRef as z,Children as L,isValidElement as $,cloneElement as k}from"react";import{createPortal as A}from"react-dom";import{usePortalContainerContext as D}from"../_shared/contexts/portal-container/index.js";import V from"../_shared/utils/get-owner-document/index.js";import q from"./Arrow.js";import{usePopupContext as B,usePortalContext as F}from"./contexts/index.js";import f from"./style/index.js";const c=z(({className:d,style:v,children:x,container:s,...e},C)=>{var t;const{size:y,inverse:P,refs:l,enter:g,leave:E}=B(),{coords:n}=F(),M=D(),r=L.toArray(x).find(a=>$(a)),i=V(s,l.trigger.current),m=s??M.container??i?.body??null,N=p(a=>{var o;(o=e?.onMouseEnter)==null||o.call(e,a),g()}),h=p(a=>{var o;(o=e?.onMouseLeave)==null||o.call(e,a),E()});return!r||!m?null:A(R("div",{...e,className:u(f.portal(),d),style:{transform:`translate(${n.x}px, ${n.y}px)`,...w()>=1.5&&{willChange:"transform"},...v},onMouseEnter:N,onMouseLeave:h,ref:j(l.portal,C),children:[k(r,{...r.props,className:u(f.portalContent({size:y,inverse:P}),(t=r?.props)==null?void 0:t.className)}),b(q,{})]}),m)});c.displayName="Popup.Portal";export{c as default};

package/dist/popup/style/index.js

@@ -1 +1 @@
-import{cva as r}from"@nild/shared";const a=r(["nd-popup-trigger"]),e=r(["nd-popup-portal",["absolute","top-0","left-0"]]),t=r(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-canvas-inverse","text-main-inverse"],false:["bg-surface","text-main"]}}}),o=r(["nd-popup-arrow","absolute"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},inverse:{true:["bg-canvas-inverse"],false:["bg-surface"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{orientation:"up",className:["shadow-[-1px_-1px_0_0_var(--border-color-muted)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-muted)]"]}]}),s={trigger:a,portal:e,portalContent:t,arrow:o};export{s as default};
+import{cva as r}from"@nild/shared";const a=r(["nd-popup-trigger"]),e=r(["nd-popup-portal",["absolute","top-0","left-0","z-popup"]]),t=r(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-canvas-inverse","text-main-inverse"],false:["bg-surface","text-main"]}}}),o=r(["nd-popup-arrow","absolute"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},inverse:{true:["bg-canvas-inverse"],false:["bg-surface"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{orientation:"up",className:["shadow-[-1px_-1px_0_0_var(--border-color-muted)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-muted)]"]}]}),s={trigger:a,portal:e,portalContent:t,arrow:o};export{s as default};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-muted: light-dark(var(--nd-color-brand-30), var(--nd-color-brand-40)); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( oklch(from var(--color-success) calc(l + .06) calc(c*.86) h), oklch(from var(--color-success) calc(l + .08) calc(c*.94) h) ); --color-success-muted: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-success-subtle: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( oklch(from var(--color-warning) calc(l + .06) calc(c*.86) h), oklch(from var(--color-warning) calc(l + .08) calc(c*.94) h) ); --color-warning-muted: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-warning-subtle: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( oklch(from var(--color-error) calc(l + .06) calc(c*.86) h), oklch(from var(--color-error) calc(l + .08) calc(c*.94) h) ); --color-error-muted: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-error-subtle: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-canvas: var(--nd-color-neutral-0); --background-color-canvas-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}
+@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-muted: light-dark(var(--nd-color-brand-30), var(--nd-color-brand-40)); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( oklch(from var(--color-success) calc(l + .06) calc(c*.86) h), oklch(from var(--color-success) calc(l + .08) calc(c*.94) h) ); --color-success-muted: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-success-subtle: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( oklch(from var(--color-warning) calc(l + .06) calc(c*.86) h), oklch(from var(--color-warning) calc(l + .08) calc(c*.94) h) ); --color-warning-muted: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-warning-subtle: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( oklch(from var(--color-error) calc(l + .06) calc(c*.86) h), oklch(from var(--color-error) calc(l + .08) calc(c*.94) h) ); --color-error-muted: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-error-subtle: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-canvas: var(--nd-color-neutral-0); --background-color-canvas-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --z-index-popup: 1000; --z-index-modal: 1300; --z-index-toast: 1500; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}

package/package.json

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