@nild/components 0.0.38 → 0.0.39

package/dist/_shared/utils/get-global-state/__tests__/index.test.d.ts

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

package/dist/_shared/utils/get-global-state/index.d.ts

@@ -0,0 +1,5 @@
+export declare enum GlobalStateKey {
+    Modal = "@nild/components/modal-global-state"
+}
+declare const getGlobalState: <State>(key: GlobalStateKey | string, createState: () => State) => State;
+export default getGlobalState;

package/dist/_shared/utils/get-global-state/index.js

@@ -0,0 +1 @@
+var t=(l=>(l.Modal="@nild/components/modal-global-state",l))(t||{});const n=(l,e)=>{const a=Symbol.for(l),o=globalThis;return a in o||(o[a]=e()),o[a]};export{t as GlobalStateKey,n as default};

package/dist/_shared/utils/get-owner-document/__tests__/index.test.d.ts

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

package/dist/_shared/utils/get-owner-document/index.d.ts

@@ -0,0 +1,2 @@
+declare const getOwnerDocument: (...nodes: Array<Node | null | undefined>) => Document | null;
+export default getOwnerDocument;

package/dist/_shared/utils/get-owner-document/index.js

@@ -0,0 +1 @@
+import{isBrowser as e}from"@nild/shared";const r=(...t)=>{var o;return((o=t.find(n=>n?.ownerDocument))==null?void 0:o.ownerDocument)||(e()?document:null)};export{r as default};

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

@@ -1,5 +1,8 @@
+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 { registerSlots, isPlainChildren, mergeHandlers, mergeProps };
+export { getGlobalState, getOwnerDocument, GlobalStateKey, isPlainChildren, lockDocumentScroll, registerSlots, mergeHandlers, mergeProps, };

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

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

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

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

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

@@ -0,0 +1 @@
+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};

package/dist/_shared/utils/merge-handlers/index.js

@@ -0,0 +1 @@
+const n=e=>typeof e=="object"&&e!==null&&"defaultPrevented"in e,r=(...e)=>(...t)=>{const[o]=t;for(const f of e)if(f&&(f(...t),n(o)&&o.defaultPrevented))break};export{r as default};

package/dist/_shared/utils/merge-props/index.js

@@ -0,0 +1 @@
+import{cnMerge as a}from"@nild/shared";import i from"../merge-handlers/index.js";const l=(o,n)=>{const c={...o,...n},f=new Set([...Object.keys(o),...Object.keys(n)]);for(const s of f){if(s==="className"){const t=o.className,e=n.className;(t||e)&&(c.className=a(e,t));continue}if(s==="style"){const t=o.style,e=n.style;(t||e)&&(c.style={...e,...t});continue}if(/^on[A-Z]/.test(s)){const t=o[s],e=n[s];(typeof t=="function"||typeof e=="function")&&(c[s]=i(t,e))}}return c};export{l as default};

package/dist/index.d.ts

@@ -2,10 +2,11 @@ import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
 import { default as Divider } from './divider';
 import { default as Input } from './input';
+import { default as Modal } from './modal';
 import { default as Popover } from './popover';
 import { default as Radio } from './radio';
 import { default as Switch } from './switch';
 import { default as Tooltip } from './tooltip';
-import { default as Transition } from './transition';
+import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
-export { Button, Checkbox, Divider, Popover, Radio, Switch, Tooltip, Transition, Typography, Input };
+export { Button, Checkbox, Divider, Input, Modal, Popover, Radio, Switch, Tooltip, Transition, TransitionStatus, Typography, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./input/index.js";import{default as s}from"./popover/index.js";import{default as f}from"./radio/index.js";import{default as m}from"./switch/index.js";import{default as i}from"./tooltip/index.js";import{default as p}from"./transition/Transition.js";import{default as e}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Input,s as Popover,f as Radio,m as Switch,i as Tooltip,p as Transition,e as Typography};
+import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./input/index.js";import{default as s}from"./modal/index.js";import{default as m}from"./popover/index.js";import{default as i}from"./radio/index.js";import{default as f}from"./switch/index.js";import{default as p}from"./tooltip/index.js";import{default as u}from"./transition/Transition.js";import{TransitionStatus as d}from"./transition/interfaces/index.js";import{default as e}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Input,s as Modal,m as Popover,i as Radio,f as Switch,p as Tooltip,u as Transition,d as TransitionStatus,e as Typography};

package/dist/modal/Body.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { BodyProps } from './interfaces';
+export declare const isBodyElement: (child: ReactNode) => child is ReactElement<BodyProps>;
+declare const Body: import('react').ForwardRefExoticComponent<BodyProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Body;

package/dist/modal/Body.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";import{forwardRef as i,isValidElement as l}from"react";import t from"./style/index.js";const f=a=>l(a)&&a.type===e,e=i(({className:a,children:r,...s},o)=>m("div",{...s,className:d(t.body(),a),ref:o,children:r}));e.displayName="Modal.Body";export{e as default,f as isBodyElement};

package/dist/modal/Close.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { CloseProps } from './interfaces';
+export declare const isCloseElement: (child: ReactNode) => child is ReactElement<CloseProps>;
+declare const Close: import('react').ForwardRefExoticComponent<import('../button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export default Close;

package/dist/modal/Close.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{Icon as C}from"@nild/icons";import x from"@nild/icons/Close";import{cnMerge as h}from"@nild/shared";import{forwardRef as M,isValidElement as N}from"react";import q from"../_shared/utils/merge-handlers/index.js";import y from"../button/index.js";import{useModalContext as z}from"./contexts/index.js";import E from"./style/index.js";const g=e=>N(e)&&e.type===a,a=M(({children:e,variant:r="text",shape:s="square",size:l="small",equal:i=!0,"aria-label":m="Close",onClick:t,className:n,disabled:p,...c},d)=>{const{disabled:f,close:u}=z();return o(y,{...c,"aria-label":m,className:h(E.close(),n),disabled:f||p,equal:i,onClick:q(t,b=>(u(),b)),ref:d,shape:s,size:l,variant:r,children:e??o(C,{component:x})})});a.displayName="Modal.Close";export{a as default,g as isCloseElement};

package/dist/modal/Footer.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { FooterProps } from './interfaces';
+export declare const isFooterElement: (child: ReactNode) => child is ReactElement<FooterProps>;
+declare const Footer: import('react').ForwardRefExoticComponent<FooterProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Footer;

package/dist/modal/Footer.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as t}from"@nild/shared";import{forwardRef as i,isValidElement as f}from"react";import l from"./style/index.js";const d=e=>f(e)&&e.type===r,r=i(({className:e,children:a,...o},s)=>m("div",{...o,className:t(l.footer(),e),ref:s,children:a}));r.displayName="Modal.Footer";export{r as default,d as isFooterElement};

package/dist/modal/Header.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { HeaderProps } from './interfaces';
+export declare const isHeaderElement: (child: ReactNode) => child is ReactElement<HeaderProps>;
+declare const Header: import('react').ForwardRefExoticComponent<HeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Header;

package/dist/modal/Header.js

@@ -0,0 +1 @@
+import{jsx as d}from"react/jsx-runtime";import{cnMerge as i}from"@nild/shared";import{forwardRef as o,isValidElement as l}from"react";import t from"./style/index.js";const f=e=>l(e)&&e.type===a,a=o(({className:e,children:r,...s},m)=>d("div",{...s,className:i(t.header(),e),ref:m,children:r}));a.displayName="Modal.Header";export{a as default,f as isHeaderElement};

package/dist/modal/Modal.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ModalProps } from './interfaces';
+declare const Modal: FC<ModalProps>;
+export default Modal;

package/dist/modal/Modal.js

@@ -0,0 +1 @@
+import{jsxs as X,jsx as T}from"react/jsx-runtime";import{useControllableState as w,useEffectCallback as x}from"@nild/hooks";import{isFunction as G,cnJoin as B}from"@nild/shared";import{useRef as s,useEffect as H,useMemo as K,cloneElement as L}from"react";import Q from"../_shared/utils/get-owner-document/index.js";import V from"../_shared/utils/register-slots/index.js";import W from"../transition/Transition.js";import{TransitionStatus as P}from"../transition/interfaces/index.js";import{resolvePlacement as Y}from"./_shared/index.js";import{ModalProvider as Z}from"./contexts/index.js";import{isPortalElement as j}from"./Portal.js";import z from"./style/index.js";import _,{isTriggerElement as D}from"./Trigger.js";const $=V({trigger:{isMatched:a=>D(a)},portal:{isMatched:a=>j(a)},firstBare:{isMatched:a=>!D(a)&&!j(a),strategy:"first"}}),U=a=>{const{children:q,variant:o="dialog",size:u="medium",open:A,defaultOpen:I=!1,disabled:i=!1,closeOnEscape:p=!0,closeOnOverlayClick:f=!0,trapFocus:d=!0,restoreFocus:b=!0,lockScroll:v=!0,"aria-label":y,"aria-labelledby":E,"aria-describedby":g,onOpen:O,onClose:C}=a,{slots:l}=$(q),[e,J]=w(A,I),n=s(e),M=s(null),h=s(null),N=s(null),k=s(e),c=Y(o,a.placement);n.current=e;const m=x(r=>{if(i)return;const S=n.current,t=G(r)?r(S):r;t!==S&&(n.current=t,J(t),t?O?.():C?.())}),F=x(()=>{m(!1)});H(()=>{if(e&&!k.current){const r=Q(M.current,h.current);N.current=r?.activeElement}k.current=e},[e]);const R=K(()=>({open:e,variant:o,placement:c,size:u,disabled:i,closeOnEscape:p,closeOnOverlayClick:f,trapFocus:d,restoreFocus:b,lockScroll:v,accessibility:{"aria-label":y,"aria-labelledby":E,"aria-describedby":g},refs:{trigger:M,surface:h,lastActiveEl:N},requestOpen:m,close:F}),[g,y,E,F,p,f,i,v,e,c,m,b,u,d,o]);return X(Z,{value:R,children:[l.trigger.el??(l.firstBare.el&&T(_,{children:l.firstBare.el})),l.portal.el&&T(W,{visible:e,children:r=>!e&&[P.UNMOUNTED,P.EXITED].includes(r)?null:L(l.portal.el,{...l.portal.el.props,overlayClassName:B(z.overlayMotion({status:r}),l.portal.el.props.overlayClassName),surfaceClassName:B(z.surfaceMotion({status:r,variant:o,placement:c}),l.portal.el.props.surfaceClassName)})})]})};U.displayName="Modal";export{U as default};

package/dist/modal/Portal.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { PortalProps } from './interfaces';
+export declare const isPortalElement: (child: unknown) => child is ReactElement<PortalProps>;
+declare const Portal: import('react').ForwardRefExoticComponent<PortalProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Portal;

package/dist/modal/Portal.js

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

package/dist/modal/Trigger.d.ts

@@ -0,0 +1,5 @@
+import { FC, ReactElement } from 'react';
+import { TriggerProps } from './interfaces';
+export declare const isTriggerElement: (child: unknown) => child is ReactElement<TriggerProps>;
+declare const Trigger: FC<TriggerProps>;
+export default Trigger;

package/dist/modal/Trigger.js

@@ -0,0 +1 @@
+import{useEffectCallback as m}from"@nild/hooks";import{mergeRefs as f}from"@nild/shared";import{isValidElement as s,Children as n,cloneElement as p}from"react";import g from"../_shared/utils/merge-props/index.js";import{useModalContext as c}from"./contexts/index.js";import d from"./style/index.js";const u=e=>s(e)&&e.type===o,o=({children:e})=>{const{refs:t,requestOpen:a}=c(),r=n.toArray(e).find(l=>s(l)),i=m(()=>{a(!0)});return r?p(r,g(r.props,{className:d.trigger(),onClick:i,ref:f(t.trigger,r.props.ref)})):null};o.displayName="Modal.Trigger";export{o as default,u as isTriggerElement};

package/dist/modal/_shared/__tests__/index.test.d.ts

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

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

@@ -0,0 +1,5 @@
+import { ModalPlacement, ModalVariant } from '../interfaces';
+export declare const resolvePlacement: (variant: ModalVariant, placement?: ModalPlacement) => ModalPlacement;
+export declare const getFocusableElements: (container: HTMLElement) => HTMLElement[];
+export declare const focusWithin: (container: HTMLElement, fromEnd?: boolean) => HTMLElement;
+export declare const restoreFocusTo: (target?: HTMLElement | null, fallback?: HTMLElement | null) => void;

package/dist/modal/_shared/index.js

@@ -0,0 +1 @@
+const a=(t,e)=>t==="drawer"?e&&e!=="center"?e:"right":"center",o=["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(","),d=t=>{const e=window.getComputedStyle(t);return e.display!=="none"&&e.visibility!=="hidden"&&!t.hidden},r=t=>Array.from(t.querySelectorAll(o)).filter(e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"&&e.tabIndex>=0&&d(e)),l=(t,e=!1)=>{const n=r(t).at(e?-1:0)??t;return n.focus(),n},s=(t,e)=>{var n;const i=t!=null&&t.isConnected?t:e!=null&&e.isConnected?e:null;(n=i?.focus)==null||n.call(i)};export{l as focusWithin,r as getFocusableElements,a as resolvePlacement,s as restoreFocusTo};

package/dist/modal/_shared/stack.d.ts

@@ -0,0 +1,7 @@
+export declare const EMPTY_MODAL_STACK: readonly symbol[];
+export interface ModalStackStore {
+    getSnapshot: () => readonly symbol[];
+    mount: (token: symbol) => VoidFunction;
+    subscribe: (listener: VoidFunction) => VoidFunction;
+}
+export declare const getModalStackStore: (ownerDocument: Document) => ModalStackStore;

package/dist/modal/_shared/stack.js

@@ -0,0 +1 @@
+import c,{GlobalStateKey as i}from"../../_shared/utils/get-global-state/index.js";import"@nild/shared";import"react";const a=[],l=()=>{const t=[],o=new Set;let s=a;const n=()=>{s=[...t],o.forEach(e=>{e()})};return{getSnapshot:()=>s,mount:e=>(t.includes(e)||(t.push(e),n()),()=>{const r=t.indexOf(e);r!==-1&&(t.splice(r,1),n())}),subscribe:e=>(o.add(e),()=>{o.delete(e)})}},p=t=>{const o=c(i.Modal,()=>new WeakMap),s=o.get(t);if(s)return s;const n=l();return o.set(t,n),n};export{a as EMPTY_MODAL_STACK,p as getModalStackStore};

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

@@ -0,0 +1,24 @@
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { ModalAccessibility, ModalPlacement, ModalSize, ModalVariant } from '../interfaces';
+export interface ModalContextValue {
+    open: boolean;
+    variant: ModalVariant;
+    placement: ModalPlacement;
+    size: ModalSize;
+    disabled: boolean;
+    closeOnEscape: boolean;
+    closeOnOverlayClick: boolean;
+    trapFocus: boolean;
+    restoreFocus: boolean;
+    lockScroll: boolean;
+    accessibility: ModalAccessibility;
+    refs: {
+        trigger: RefObject<Element>;
+        surface: RefObject<HTMLDivElement>;
+        lastActiveEl: RefObject<HTMLElement | null>;
+    };
+    requestOpen: Dispatch<SetStateAction<boolean>>;
+    close: () => void;
+}
+declare const ModalProvider: import('react').Provider<ModalContextValue>, useModalContext: () => ModalContextValue;
+export { ModalProvider, useModalContext };

package/dist/modal/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as e}from"@nild/shared";const[l,r]=e({defaultValue:{open:!1,variant:"dialog",placement:"center",size:"medium",disabled:!1,closeOnEscape:!0,closeOnOverlayClick:!0,trapFocus:!0,restoreFocus:!0,lockScroll:!0,accessibility:{"aria-label":void 0,"aria-labelledby":void 0,"aria-describedby":void 0},refs:{trigger:{current:null},surface:{current:null},lastActiveEl:{current:null}},requestOpen:()=>{},close:()=>{}}});export{l as ModalProvider,r as useModalContext};

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

@@ -0,0 +1 @@
+export { useModalStack } from './useModalStack';

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

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

package/dist/modal/hooks/useModalStack.js

@@ -0,0 +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};

package/dist/modal/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @category Components
+ */
+declare const Modal: import('react').FC<import('./interfaces').ModalProps> & {
+    Trigger: import('react').FC<import('./interfaces').TriggerProps>;
+    Portal: import('react').ForwardRefExoticComponent<import('./interfaces').PortalProps & import('react').RefAttributes<HTMLDivElement>>;
+    Header: import('react').ForwardRefExoticComponent<import('./interfaces').HeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+    Body: import('react').ForwardRefExoticComponent<import('./interfaces').BodyProps & import('react').RefAttributes<HTMLDivElement>>;
+    Footer: import('react').ForwardRefExoticComponent<import('./interfaces').FooterProps & import('react').RefAttributes<HTMLDivElement>>;
+    Close: import('react').ForwardRefExoticComponent<import('../button').ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+};
+export type * from './interfaces';
+export default Modal;

package/dist/modal/index.js

@@ -0,0 +1 @@
+import o from"./Body.js";import r from"./Close.js";import m from"./Footer.js";import t from"./Header.js";import i from"./Modal.js";import e from"./Portal.js";import f from"./Trigger.js";const p=Object.assign(i,{Trigger:f,Portal:e,Header:t,Body:o,Footer:m,Close:r});export{p as default};

package/dist/modal/style/index.d.ts

@@ -0,0 +1,27 @@
+import { TransitionStatus } from '../../transition/interfaces';
+import { ModalPlacement, ModalSize, ModalVariant } from '../interfaces';
+declare const _default: {
+    trigger: (props?: object | undefined) => string;
+    portal: (props?: {
+        placement: ModalPlacement;
+    } | undefined) => string;
+    overlay: (props?: object | undefined) => string;
+    overlayMotion: (props?: {
+        status: TransitionStatus;
+    } | undefined) => string;
+    surfaceMotion: (props?: {
+        status: TransitionStatus;
+        variant: ModalVariant;
+        placement: ModalPlacement;
+    } | undefined) => string;
+    header: (props?: object | undefined) => string;
+    body: (props?: object | undefined) => string;
+    footer: (props?: object | undefined) => string;
+    close: (props?: object | undefined) => string;
+    surface: (props?: {
+        variant: ModalVariant;
+        placement: ModalPlacement;
+        size: ModalSize;
+    } | undefined) => string;
+};
+export default _default;

package/dist/modal/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";import{TransitionStatus as a}from"../../transition/interfaces/index.js";const t=[a.UNMOUNTED,a.ENTERING,a.EXITING,a.EXITED],r=e(["nd-modal-trigger"]),s=e(["nd-modal-portal","fixed","inset-0","flex","pointer-events-auto"],{variants:{placement:{center:["items-center","justify-center","p-4"],left:["items-stretch","justify-start"],right:["items-stretch","justify-end"],top:["items-start","justify-center"],bottom:["items-end","justify-center"]}}}),l=e(["nd-modal-overlay","absolute","inset-0","transition-opacity","duration-[var(--default-transition-duration)]","ease-out","bg-[color-mix(in_oklch,var(--background-color-page-inverse)_18%,transparent)]"]),n=e([],{variants:{status:{[a.UNMOUNTED]:"",[a.ENTERING]:"",[a.ENTERED]:"",[a.EXITING]:"",[a.EXITED]:""}},compoundVariants:[{status:t,className:"opacity-0"},{status:a.ENTERED,className:"opacity-100"}]}),o=e(["nd-modal-header","shrink-0","px-6","pt-6","pb-4","pr-16","text-lg","font-semibold"]),i=e(["nd-modal-body","min-h-0","flex-auto","overflow-auto","px-6","pb-6"]),m=e(["nd-modal-footer","shrink-0","flex","justify-end","gap-3","border-t","border-subtle","px-6","py-4"]),c=e(["nd-modal-close","absolute","top-4","right-6","z-1"]),d=e(["nd-modal-surface","relative","pointer-events-auto","flex","min-h-0","flex-col","overflow-hidden","bg-panel","text-main","shadow-2xl","outline-none","transition-[opacity,translate,scale]","duration-[var(--default-transition-duration)]","ease-out"],{variants:{variant:{dialog:"",drawer:""},placement:{center:["w-full","max-h-[calc(100vh-2rem)]"],left:["h-full","max-h-screen"],right:["h-full","max-h-screen"],top:["w-full","max-w-screen"],bottom:["w-full","max-w-screen"]},size:{small:"",medium:"",large:"",full:""}},compoundVariants:[{variant:"dialog",placement:"center",size:"small",className:["max-w-96","rounded-xl"]},{variant:"dialog",placement:"center",size:"medium",className:["max-w-[36rem]","rounded-xl"]},{variant:"dialog",placement:"center",size:"large",className:["max-w-[48rem]","rounded-xl"]},{variant:"dialog",placement:"center",size:"full",className:["h-[calc(100vh-2rem)]","w-[calc(100vw-2rem)]","max-w-none","rounded-xl"]},{variant:"drawer",placement:["left","right"],size:"small",className:"w-80"},{variant:"drawer",placement:["left","right"],size:"medium",className:"w-[28rem]"},{variant:"drawer",placement:["left","right"],size:"large",className:"w-[36rem]"},{variant:"drawer",placement:["left","right"],size:"full",className:"w-screen"},{variant:"drawer",placement:["top","bottom"],size:"small",className:"h-64"},{variant:"drawer",placement:["top","bottom"],size:"medium",className:"h-96"},{variant:"drawer",placement:["top","bottom"],size:"large",className:"h-[32rem]"},{variant:"drawer",placement:["top","bottom"],size:"full",className:"h-screen"}]}),u=e([],{variants:{status:{[a.UNMOUNTED]:"",[a.ENTERING]:"",[a.ENTERED]:"",[a.EXITING]:"",[a.EXITED]:""},variant:{dialog:"",drawer:""},placement:{center:"",left:"",right:"",top:"",bottom:""}},compoundVariants:[{status:t,variant:"dialog",className:["opacity-0","scale-95"]},{status:a.ENTERED,variant:"dialog",className:["opacity-100","scale-100"]},{status:t,variant:"drawer",placement:"left",className:"-translate-x-full"},{status:a.ENTERED,variant:"drawer",placement:"left",className:"translate-x-0"},{status:t,variant:"drawer",placement:"right",className:"translate-x-full"},{status:a.ENTERED,variant:"drawer",placement:"right",className:"translate-x-0"},{status:t,variant:"drawer",placement:"top",className:"-translate-y-full"},{status:a.ENTERED,variant:"drawer",placement:"top",className:"translate-y-0"},{status:t,variant:"drawer",placement:"bottom",className:"translate-y-full"},{status:a.ENTERED,variant:"drawer",placement:"bottom",className:"translate-y-0"}]}),p={trigger:r,portal:s,overlay:l,overlayMotion:n,surfaceMotion:u,header:o,body:i,footer:m,close:c,surface:d};export{p as default};

package/dist/transition/Transition.js

@@ -1 +1 @@
-import{useEffectCallback as N}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{Children as X,isValidElement as M,useState as O,useRef as m,useEffect as D,cloneElement as b}from"react";import{Status as r}from"./interfaces/index.js";import G from"./style/index.js";const I=({className:U,children:f,visible:i=!0})=>{const s=X.toArray(f).find(o=>M(o)),a=s?i?r.ENTERED:r.EXITED:r.UNMOUNTED,[t,E]=O(a),e=m(),n=m(s);n.current=t===r.UNMOUNTED?s:s??n.current;const c=N(o=>{u();let T=!0;const l=()=>{T&&(T=!1,e.current=void 0,o?.())};l.cancel=()=>{T=!1},e.current=l}),d=N(()=>{e.current&&(e.current(),e.current=void 0)}),u=N(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),p=N(()=>{a===r.UNMOUNTED&&t===r.EXITED&&E(r.UNMOUNTED)});return D(()=>{d()},[t]),D(()=>{switch(a){case r.ENTERED:t!==r.ENTERING&&t!==r.ENTERED&&(t===r.UNMOUNTED?E(r.EXITED):(u(),E(r.ENTERING),c(()=>{c(()=>{E(r.ENTERED)}),e.current&&setTimeout(e.current,0)})));break;case r.EXITED:(t===r.ENTERING||t===r.ENTERED)&&(u(),E(r.EXITING),c(()=>{c(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break;case r.UNMOUNTED:default:t!==r.EXITED&&t!==r.UNMOUNTED&&(u(),E(r.EXITING),c(()=>{c(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break}},[i,a,t]),n.current?b(n.current,{...n.current.props,className:R(n.current.props.className,G.transition({status:t}),U),onTransitionEnd:p}):null};I.displayName="Transition";export{I as default};
+import{cnMerge as M,isFunction as I}from"@nild/shared";import{useState as O,useRef as U,useEffect as f,cloneElement as G,Children as v,isValidElement as g}from"react";import h from"../_shared/utils/merge-handlers/index.js";import{TransitionStatus as r}from"./interfaces/index.js";import S from"./style/index.js";const d=(e,s)=>{const c=I(e)?e(s):e;return v.toArray(c).find(t=>g(t))},R=({className:e,children:s,visible:c=!0})=>{const[t,N]=O(()=>{const n=c?r.ENTERED:r.EXITED;return d(s,n)?n:r.UNMOUNTED}),i=d(s,t),T=i?c?r.ENTERED:r.EXITED:r.UNMOUNTED,E=U(),u=U(i);u.current=t===r.UNMOUNTED?i:i??u.current;const l=()=>{var n;(n=E.current)==null||n.cancel(),E.current=void 0},m=n=>{l();let o=!0;const p=()=>{o&&(o=!1,E.current=void 0,n())};p.cancel=()=>{o=!1},E.current=p},D=(n,o)=>{l(),N(n),m(()=>{m(()=>{N(o)}),E.current&&setTimeout(E.current,0)})},X=n=>{n&&n.target!==n.currentTarget||T===r.UNMOUNTED&&t===r.EXITED&&N(r.UNMOUNTED)};if(f(()=>{E.current&&(E.current(),E.current=void 0)},[t]),f(()=>{if(T===r.ENTERED){t===r.UNMOUNTED?N(r.EXITED):t!==r.ENTERING&&t!==r.ENTERED&&D(r.ENTERING,r.ENTERED);return}if(T===r.EXITED){(t===r.ENTERING||t===r.ENTERED)&&D(r.EXITING,r.EXITED);return}t!==r.EXITED&&t!==r.UNMOUNTED&&D(r.EXITING,r.EXITED)},[T,t]),!u.current)return null;const a=u.current;return G(a,{...a.props,className:I(s)?a.props.className:M(a.props.className,S.transition({status:t}),e),onTransitionEnd:h(a.props.onTransitionEnd,X)})};R.displayName="Transition";export{R as default};

package/dist/transition/index.d.ts

@@ -1,3 +1,3 @@
 import { default as Transition } from './Transition';
-export type * from './interfaces';
+export * from './interfaces';
 export default Transition;

package/dist/transition/interfaces/index.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export declare enum Status {
+export declare enum TransitionStatus {
     UNMOUNTED = "unmounted",
     ENTERING = "entering",
     ENTERED = "entered",
@@ -8,6 +8,6 @@ export declare enum Status {
 }
 export interface TransitionProps {
     className?: string;
-    children?: ReactNode;
+    children?: ReactNode | ((status: TransitionStatus) => ReactNode);
     visible?: boolean;
 }

package/dist/transition/interfaces/index.js

@@ -1 +1 @@
-var t=(E=>(E.UNMOUNTED="unmounted",E.ENTERING="entering",E.ENTERED="entered",E.EXITING="exiting",E.EXITED="exited",E))(t||{});export{t as Status};
+var t=(E=>(E.UNMOUNTED="unmounted",E.ENTERING="entering",E.ENTERED="entered",E.EXITING="exiting",E.EXITED="exited",E))(t||{});export{t as TransitionStatus};

package/dist/transition/style/index.d.ts

@@ -1,7 +1,7 @@
-import { Status } from '../interfaces';
+import { TransitionStatus } from '../interfaces';
 declare const _default: {
     transition: (props?: {
-        status: Status;
+        status: TransitionStatus;
     } | undefined) => string;
 };
 export default _default;

package/dist/transition/style/index.js

@@ -1 +1 @@
-import{cva as a}from"@nild/shared";import{Status as t}from"../interfaces/index.js";const i=a(["transition-[opacity,visibility]"],{compoundVariants:[{status:t.ENTERED,className:["opacity-100","visible"]},{status:[t.UNMOUNTED,t.ENTERING,t.EXITING,t.EXITED],className:["opacity-0","invisible"]}]}),s={transition:i};export{s as default};
+import{cva as t}from"@nild/shared";import{TransitionStatus as i}from"../interfaces/index.js";const a=t(["transition-[opacity,visibility]"],{compoundVariants:[{status:i.ENTERED,className:["opacity-100","visible"]},{status:[i.UNMOUNTED,i.ENTERING,i.EXITING,i.EXITED],className:["opacity-0","invisible"]}]}),s={transition:a};export{s as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.38",
+  "version": "0.0.39",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@nild/shared": "0.0.16",
-    "@nild/hooks": "0.0.18",
-    "@nild/icons": "0.0.18"
+    "@nild/icons": "0.0.18",
+    "@nild/hooks": "0.0.18"
   },
   "scripts": {
     "build": "vite build --mode PROD",