@nild/components 0.0.6 → 0.0.8

package/dist/_shared/hooks/usePopup.d.ts

@@ -13,7 +13,7 @@ type UsePopupReturn = [
     boolean,
     {
         setOpen: Dispatch<React.SetStateAction<boolean>>;
-        renderTrigger: (props?: TriggerProps & Partial<any>) => ReactElement | undefined;
+        renderTrigger: (props?: TriggerProps) => ReactElement | undefined;
         renderPortal: (props?: PortalProps) => ReactElement | undefined;
     }
 ];

package/dist/_shared/hooks/usePopup.js

@@ -1 +1 @@
-import{jsx as O}from"react/jsx-runtime";import{computePosition as F,offset as G,shift as H,flip as J,arrow as K,autoUpdate as M}from"../../_lib/floating-ui.dom.js";import{useControllableState as N,useStableCallback as x,useIsomorphicLayoutEffect as P}from"@nild/hooks";import{getDPR as Q,roundByDPR as u}from"@nild/shared/utils";import{useRef as b,useState as f,useMemo as W,Children as X,isValidElement as g,cloneElement as j}from"react";import"../../portal/Arrow.js";import k from"../../portal/Portal.js";import Y from"../../transition/Transition.js";import h from"../../trigger/Trigger.js";const Z=(I,{placement:m="bottom",strategy:w="absolute",offset:C=12,open:L,defaultOpen:E=!1}={})=>{const t=b(null),a=b(null),c=b(null),[n,R]=f(E),[r,S]=N(L,E),[s,T]=f({x:0,y:0}),[l,U]=f({x:0,y:0}),[o,V]=f(m.split("-")[0]),$=W(()=>{const e=o==="top"||o==="bottom";return{[o==="left"?"right":"left"]:e?l.x:l.x-s.x,[o==="top"?"bottom":"top"]:e?l.y-s.y:l.y}},[o,l,s]),q={top:"down",bottom:"up",left:"right",right:"left"}[o];let y,d,i;X.forEach(I,e=>{g(e)&&e.type!==h&&e.type!==k&&(y=e),g(e)&&e.type===h&&(d=e),g(e)&&e.type===k&&(i=e)});const z=x(e=>{if(d)return j(d,{...e,ref:t});if(y)return O(h,{...e,ref:t,children:y})}),A=x(e=>{if(i)return O(Y,{visible:r,children:n&&j(i,{...i.props,...e,style:{transform:`translate(${s.x}px, ${s.y}px)`,...Q()>=1.5&&{willChange:"transform"}},ref:a,arrow:{ref:c,style:$,orientation:q}})})}),v=x(()=>{!t.current||!a.current||F(t.current,a.current,{placement:m,strategy:w,middleware:[G(C),H(),J(),c.current&&K({element:c.current})]}).then(({x:e,y:D,placement:B,middlewareData:{arrow:p}})=>{T({x:u(e),y:u(D)}),V(B.split("-")[0]),U({x:u(p?.x??e),y:u(p?.y??D)})})});return P(()=>{r&&!n?R(!0):r&&n&&v()},[r,n]),P(()=>{if(!(!t.current||!a.current||!r))return M(t.current,a.current,v)},[m,w,C,r]),[r,{setOpen:S,renderTrigger:z,renderPortal:A}]};export{Z as default};
+import{jsx as E}from"react/jsx-runtime";import{computePosition as B,offset as F,shift as G,flip as H,arrow as J,autoUpdate as K}from"../../_lib/floating-ui.dom.js";import{useControllableState as N,usePureCallback as P,useEffectCallback as Q,useIsomorphicLayoutEffect as k}from"@nild/hooks";import{getDPR as W,roundByDPR as f}from"@nild/shared/utils";import{useRef as x,useState as p,useMemo as X,Children as Y,isValidElement as h,cloneElement as O}from"react";import"../../portal/Arrow.js";import S from"../../portal/Portal.js";import Z from"../../transition/Transition.js";import g from"../../trigger/Trigger.js";const _=(j,{placement:m="bottom",strategy:b="absolute",offset:w=12,open:I,defaultOpen:C=!1}={})=>{const t=x(null),a=x(null),c=x(null),[n,L]=p(C),[r,M]=N(I,C),[s,R]=p({x:0,y:0}),[l,T]=p({x:0,y:0}),[o,U]=p(m.split("-")[0]),V=X(()=>{const e=o==="top"||o==="bottom";return{[o==="left"?"right":"left"]:e?l.x:l.x-s.x,[o==="top"?"bottom":"top"]:e?l.y-s.y:l.y}},[o,l,s]),$={top:"down",bottom:"up",left:"right",right:"left"}[o];let y,d,i;Y.forEach(j,e=>{h(e)&&e.type!==g&&e.type!==S&&(y=e),h(e)&&e.type===g&&(d=e),h(e)&&e.type===S&&(i=e)});const q=P(e=>{if(d)return O(d,{...e,ref:t});if(y)return E(g,{...e,ref:t,children:y})}),z=P(e=>{if(i)return E(Z,{visible:r,children:n&&O(i,{...i.props,...e,style:{transform:`translate(${s.x}px, ${s.y}px)`,...W()>=1.5&&{willChange:"transform"}},ref:a,arrow:{ref:c,style:V,orientation:$}})})}),v=Q(()=>{!t.current||!a.current||B(t.current,a.current,{placement:m,strategy:b,middleware:[F(w),G(),H(),c.current&&J({element:c.current})]}).then(({x:e,y:D,placement:A,middlewareData:{arrow:u}})=>{R({x:f(e),y:f(D)}),U(A.split("-")[0]),T({x:f(u?.x??e),y:f(u?.y??D)})})});return k(()=>{r&&!n?L(!0):r&&n&&v()},[r,n]),k(()=>{if(!(!t.current||!a.current||!r))return K(t.current,a.current,v)},[m,b,w,r]),[r,{setOpen:M,renderTrigger:q,renderPortal:z}]};export{_ as default};

package/dist/button/Button.d.ts

@@ -1,8 +1,6 @@
-import { ReactNode, ButtonHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
+import { ReactElement, ButtonHTMLAttributes, HTMLAttributes, RefAttributes, ForwardRefExoticComponent } from 'react';
 import { ButtonVariant, ButtonSize, ButtonShape } from './style';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    className?: string;
-    children?: ReactNode;
     variant?: ButtonVariant;
     size?: ButtonSize;
     shape?: ButtonShape;
@@ -13,8 +11,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> & {
     Group: typeof Group;
 };
-export interface GroupProps extends Pick<ButtonProps, 'variant' | 'size' | 'disabled'> {
-    className?: string;
+export interface GroupProps extends HTMLAttributes<HTMLDivElement>, Pick<ButtonProps, 'variant' | 'size' | 'disabled'> {
     children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
     direction?: 'horizontal' | 'vertical';
 }

package/dist/button/Button.js

@@ -1 +1 @@
-import{jsx as t,Fragment as A}from"react/jsx-runtime";import{cnMerge as u,isArray as S}from"@nild/shared/utils";import{forwardRef as f}from"react";import{DISABLED_CLS as b}from"../_shared/style/index.js";import L from"../_shared/utils/isEmptyChildren.js";import P from"../_shared/utils/isPlainChildren.js";import{VARIANT_CLS_MAP as h,SIZE_CLS_MAP as C,SHAPE_CLS_MAP as M,EQUAL_CLS_MAP as N,GROUP_FIRST_CLS_MAP as R,GROUP_LAST_CLS_MAP as I,GROUP_DIVIDER_CLS_MAP as g}from"./style/index.js";const i=f(({className:r,children:n,variant:s="solid",size:o="medium",shape:l="square",equal:e=!1,disabled:m,block:d,...p},a)=>{const c=P(n);return t("button",{type:"button",...p,disabled:m,className:u("nd-button","font-sans cursor-pointer transition-colors",b,d&&"w-full",c&&"whitespace-nowrap truncate",h[s],C[o][`${c}`],M[l],e&&N[o],r),ref:a,children:n})});i.displayName="Button";const _=f(({children:r,className:n,variant:s="solid",size:o="medium",disabled:l,direction:e="horizontal"},m)=>{if(!r||L(r))return t(A,{});if(!S(r))return t(i,{...r.props,variant:s,size:o,disabled:l});const d=e==="horizontal";return t("div",{className:u("nd-button-group","flex",!d&&"flex-col",n),ref:m,children:r.map((p,a)=>t(i,{...p.props,className:u(a===0?R[e]:a===r.length-1?I[e]:"rounded-none",a!==0&&(d?"border-l-0":"border-t-0"),a!==r.length-1&&g[e][s]),variant:s,size:o,disabled:l},a))})});_.displayName="Button.Group",i.Group=_;export{i as default};
+import{jsx as t,Fragment as A}from"react/jsx-runtime";import{cnMerge as p,isArray as S,cnJoin as b}from"@nild/shared/utils";import{forwardRef as f}from"react";import{DISABLED_CLS as L}from"../_shared/style/index.js";import P from"../_shared/utils/isEmptyChildren.js";import h from"../_shared/utils/isPlainChildren.js";import{VARIANT_CLS_MAP as C,SIZE_CLS_MAP as M,SHAPE_CLS_MAP as N,EQUAL_CLS_MAP as R,GROUP_FIRST_CLS_MAP as I,GROUP_LAST_CLS_MAP as g,GROUP_DIVIDER_CLS_MAP as z}from"./style/index.js";const i=f(({className:r,children:n,variant:s="solid",size:o="medium",shape:l="square",equal:e=!1,disabled:m,block:c,...d},u)=>{const a=h(n);return t("button",{type:"button",...d,disabled:m,className:p("nd-button","font-sans cursor-pointer transition-colors",L,c&&"w-full",a&&"whitespace-nowrap truncate",C[s],M[o][`${a}`],N[l],e&&R[o],r),ref:u,children:n})});i.displayName="Button";const _=f(({children:r,className:n,variant:s="solid",size:o="medium",disabled:l,direction:e="horizontal",...m},c)=>{if(!r||P(r))return t(A,{});if(!S(r))return t(i,{...r.props,variant:s,size:o,disabled:l});const d=e==="horizontal";return t("div",{...m,className:p("nd-button-group","flex",!d&&"flex-col",n),ref:c,children:r.map((u,a)=>t(i,{...u.props,className:b(a===0?I[e]:a===r.length-1?g[e]:"rounded-none",a!==0&&(d?"border-l-0":"border-t-0"),a!==r.length-1&&z[e][s]),variant:s,size:o,disabled:l},a))})});_.displayName="Button.Group",i.Group=_;export{i as default};

package/dist/divider/Divider.d.ts

@@ -1,8 +1,6 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import { DividerVariant, DividerDirection, DividerAlign } from './style';
 export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-    className?: string;
-    children?: ReactNode;
     variant?: DividerVariant;
     direction?: DividerDirection;
     align?: DividerAlign;

package/dist/popover/Popover.d.ts

@@ -1,8 +1,8 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { default as Portal } from '../portal';
 import { default as Trigger, TriggerAction } from '../trigger';
 import { Placement, OffsetOptions } from '@floating-ui/dom';
-interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface PopoverProps {
     children?: ReactNode;
     placement?: Placement;
     offset?: OffsetOptions;

package/dist/popover/Popover.js

@@ -1 +1 @@
-import{jsxs as O,Fragment as P}from"react/jsx-runtime";import{useStableCallback as t}from"@nild/hooks";import T from"../_shared/hooks/usePopup.js";import"../portal/Arrow.js";import b from"../portal/Portal.js";import h from"../trigger/Trigger.js";const o=({children:a,placement:l,offset:p,action:m,open:s,defaultOpen:f,onChange:e})=>{const[x,{setOpen:n,renderTrigger:i,renderPortal:c}]=T(a,{placement:l,offset:p,open:s,defaultOpen:f}),d=t(()=>{n(r=>(e?.(!r),!r))}),g=t(()=>{n(()=>(e?.(!0),!0))}),u=t(()=>{n(()=>(e?.(!1),!1))});return O(P,{children:[i({action:m,onToggle:d,onOpen:g,onClose:u}),c()]})};o.displayName="Popover",o.Trigger=h,o.Portal=b;export{o as default};
+import{jsxs as O,Fragment as P}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import T from"../_shared/hooks/usePopup.js";import"../portal/Arrow.js";import h from"../portal/Portal.js";import x from"../trigger/Trigger.js";const o=({children:a,placement:l,offset:p,action:m,open:f,defaultOpen:s,onChange:e})=>{const[C,{setOpen:n,renderTrigger:i,renderPortal:c}]=T(a,{placement:l,offset:p,open:f,defaultOpen:s}),d=t(()=>{n(r=>(e?.(!r),!r))}),g=t(()=>{n(()=>(e?.(!0),!0))}),u=t(()=>{n(()=>(e?.(!1),!1))});return O(P,{children:[i({action:m,onToggle:d,onOpen:g,onClose:u}),c()]})};o.displayName="Popover",o.Trigger=x,o.Portal=h;export{o as default};

package/dist/portal/Arrow.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties, HTMLAttributes } from 'react';
 import { ArrowSize, ArrowOrientation } from './style';
 export interface ArrowProps extends HTMLAttributes<HTMLSpanElement> {
-    className?: string;
     style?: CSSProperties;
     orientation?: ArrowOrientation;
     size?: ArrowSize;

package/dist/portal/Arrow.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared/utils";import{forwardRef as A}from"react";import{ARROW_ORIENTATION_STYLE_MAP as R,ARROW_ORIENTATION_CLS_MAP as _,ARROW_SIZE_CLS_MAP as p}from"./style/index.js";const a=A(({className:o,style:s,orientation:r="up",size:e="medium",...i},m)=>t("div",{...i,style:{...R[r],...s},className:d("nd-arrow","bg-container border-solid border-split",_[r],p[e],o),ref:m}));a.displayName="Arrow";export{a as default};
+import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared/utils";import{forwardRef as R}from"react";import{ARROW_ORIENTATION_STYLE_MAP as _,ARROW_ORIENTATION_CLS_MAP as f,ARROW_SIZE_CLS_MAP as A}from"./style/index.js";const a=R(({className:e,style:o,orientation:r="up",size:s="medium",...i},m)=>t("div",{...i,style:{..._[r],...o},className:d("nd-arrow","bg-container border-solid border-edge",f[r],A[s],e),ref:m}));a.displayName="Arrow";export{a as default};

package/dist/portal/Portal.d.ts

@@ -1,11 +1,10 @@
-import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { HTMLAttributes, Ref } from 'react';
 import { ArrowProps } from './Arrow';
 import { PaddingSize } from './style';
 interface ArrowOptions extends ArrowProps {
     ref: Ref<HTMLDivElement>;
 }
 export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
-    children?: ReactNode;
     container?: Element | DocumentFragment;
     paddingSize?: PaddingSize;
     arrow?: ArrowOptions | false;

package/dist/portal/Portal.js

@@ -1 +1 @@
-import{jsxs as p,jsx as u}from"react/jsx-runtime";import{cnMerge as r}from"@nild/shared/utils";import{forwardRef as f,Children as N,isValidElement as b,cloneElement as g}from"react";import{createPortal as P}from"react-dom";import h from"./Arrow.js";import{PADDING_SIZE_CLS_MAP as v}from"./style/index.js";const e=f(({className:l,children:t,container:i=document.body,paddingSize:m="medium",arrow:o=!1,...n},d)=>{var s;const a=N.toArray(t).find(c=>b(c));return a?P(p("div",{...n,className:r("nd-portal","absolute top-0 left-0",l),ref:d,children:[g(a,{...a.props,className:r("bg-container rounded-md outline-solid outline-1 outline-split shadow-lg",v[m],(s=a?.props)==null?void 0:s.className)}),o!==!1&&u(h,{...o,className:r("absolute",o.className)})]}),i):null});e.displayName="Portal";export{e as default};
+import{jsxs as p,jsx as u}from"react/jsx-runtime";import{cnMerge as r,cnJoin as f}from"@nild/shared/utils";import{forwardRef as N,Children as g,isValidElement as b,cloneElement as P}from"react";import{createPortal as h}from"react-dom";import v from"./Arrow.js";import{PADDING_SIZE_CLS_MAP as x}from"./style/index.js";const s=N(({className:l,children:t,container:n=document.body,paddingSize:i="medium",arrow:e=!1,...m},d)=>{var o;const a=g.toArray(t).find(c=>b(c));return a?h(p("div",{...m,className:r("nd-portal","absolute top-0 left-0",l),ref:d,children:[P(a,{...a.props,className:r("bg-container rounded-md outline-solid outline-1 outline-edge shadow-lg",x[i],(o=a?.props)==null?void 0:o.className)}),e!==!1&&u(v,{...e,className:f("absolute",e.className)})]}),n):null});s.displayName="Portal";export{s as default};

package/dist/switch/Switch.d.ts

@@ -1,7 +1,6 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ButtonHTMLAttributes, HTMLAttributes, RefAttributes } from 'react';
 import { SwitchVariant, SwitchSize, SwitchShape } from './style';
 export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
-    className?: string;
     variant?: SwitchVariant;
     size?: SwitchSize;
     shape?: SwitchShape;
@@ -10,10 +9,14 @@ export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     value?: boolean;
     defaultValue?: boolean;
     disabled?: boolean;
-    checkedContent?: React.ReactNode;
-    uncheckedContent?: React.ReactNode;
-    thumbContent?: React.ReactNode;
     onChange?: (checked: boolean) => void;
 }
-declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>> & {
+    Checked: typeof Checked;
+    Unchecked: typeof Unchecked;
+    Thumb: typeof Thumb;
+};
+declare const Checked: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+declare const Unchecked: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+declare const Thumb: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
 export default Switch;

package/dist/switch/Switch.js

@@ -1 +1 @@
-import{jsxs as N,jsx as s}from"react/jsx-runtime";import{useControllableState as M}from"@nild/hooks";import{cnMerge as a}from"@nild/shared/utils";import{forwardRef as y}from"react";import{DISABLED_CLS as L}from"../_shared/style/index.js";import{SIZE_VAR_MAP as P,VARIANT_TRACK_CLS_MAP as h,VARIANT_THUMB_CLS_MAP as I,SHAPE_CLS_MAP as o,VARIANT_CLS_MAP as R,SIZE_CLS_MAP as j}from"./style/index.js";const l=y(({className:d,variant:e="solid",size:c="medium",shape:i="round",checked:m,defaultChecked:f,value:u,defaultValue:g,disabled:v,checkedContent:p,uncheckedContent:w,thumbContent:A,onChange:n,style:C,..._},x)=>{const S={"--nd-switch-height":P[c]},[t,b]=M(m??u,f??g??!1),k=()=>{b(r=>(n?.(!r),!r))};return N("button",{..._,type:"button",role:"switch","aria-checked":t,disabled:v,className:a("nd-switch",["relative","inline-block","font-sans","overflow-hidden","cursor-pointer"],["h-[var(--nd-switch-height)]"],L,R[e],j[c],o[i],d),style:{...S,...C},ref:x,onClick:k,children:[s("div",{className:a("h-[var(--nd-switch-height)] flex justify-center items-center","text-center text-contrast","ps-[calc(var(--nd-switch-height)/3)] pe-[calc(var(--nd-switch-height)*1.1)]","transition-[margin-inline,background-color]",h[e][`${t}`].concat(t?["ms-0 me-0"]:["-ms-[100%] me-[100%]"])),children:p}),s("div",{className:a("h-[var(--nd-switch-height)] flex justify-center items-center","text-center text-contrast","-mt-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)*1.1)] pe-[calc(var(--nd-switch-height)/3)]","transition-[margin-inline,background-color]",h[e][`${t}`].concat(t?["ms-[100%] -me-[100%]"]:["ms-0 me-0"])),children:w}),s("div",{className:a("flex justify-center items-center","h-[var(--nd-switch-height)] absolute aspect-square scale-80","text-contrast transition-[left]",I[e],o[i],t?"left-[calc(100%-var(--nd-switch-height))]":"left-0"),children:A})]})});l.displayName="Switch";export{l as default};
+import{jsxs as j,jsx as r}from"react/jsx-runtime";import{useControllableState as U}from"@nild/hooks";import{cnJoin as n,cnMerge as d}from"@nild/shared/utils";import{forwardRef as p,Children as B,isValidElement as D,cloneElement as g}from"react";import{DISABLED_CLS as H}from"../_shared/style/index.js";import{VARIANT_TRACK_CLS_MAP as y,VARIANT_THUMB_CLS_MAP as Z,SHAPE_CLS_MAP as k,SIZE_VAR_MAP as $,VARIANT_CLS_MAP as q,SIZE_CLS_MAP as J}from"./style/index.js";const m=p(({className:t,children:c,variant:e="solid",size:a="medium",shape:w="round",checked:C,defaultChecked:b,value:x,defaultValue:M,disabled:E,onChange:v,style:I,...L},P)=>{let l,h,o;B.forEach(c,s=>{D(s)&&(s.type===f?l=s:s.type===u?h=s:s.type===N&&(o=s))});const R={"--nd-switch-height":$[a]},[i,T]=U(C??x,b??M??!1),A=n("h-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)/3)] pe-[calc(var(--nd-switch-height)*1.1)]",y[e][`${i}`].concat(i?"ms-0 me-0":"-ms-[100%] me-[100%]")),S=n("h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)*1.1)] pe-[calc(var(--nd-switch-height)/3)]",y[e][`${i}`].concat(i?"ms-[100%] -me-[100%]":"ms-0 me-0")),_=n("h-[var(--nd-switch-height)]",Z[e],k[w],i?"left-[calc(100%-var(--nd-switch-height))]":"left-0"),V=()=>{T(s=>(v?.(!s),!s))};return j("button",{...L,type:"button",role:"switch","aria-checked":i,disabled:E,className:d("nd-switch","h-[var(--nd-switch-height)]","group","relative inline-block font-sans overflow-hidden cursor-pointer",H,q[e],J[a],k[w],t),style:{...R,...I},ref:P,onClick:V,children:[l?g(l,{...l.props,className:n(A,l.props.className)}):r(f,{className:A}),h?g(h,{...h.props,className:n(S,h.props.className)}):r(u,{className:S}),o?g(o,{...o.props,className:n(_,o.props.className)}):r(N,{className:_})]})});m.displayName="Switch";const f=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","text-center text-contrast","transition-[margin-inline,background-color]",t),ref:a,children:c}));f.displayName="Switch.Checked";const u=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","text-center text-contrast","transition-[margin-inline,background-color]",t),ref:a,children:c}));u.displayName="Switch.Unchecked";const N=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","absolute aspect-square scale-80","text-contrast transition-[left,background-color]",t),ref:a,children:c}));N.displayName="Switch.Thumb",m.Checked=f,m.Unchecked=u,m.Thumb=N;export{m as default};

package/dist/switch/style/index.js

@@ -1 +1 @@
-const a={solid:[""],outlined:["border-solid border border-primary"]},r={solid:{true:["bg-primary"],false:["bg-[--alpha(var(--color-primary)/45%)]"]},outlined:{true:["bg-transparent"],false:["bg-transparent"]}},e={solid:["bg-contrast","top-0"],outlined:["bg-primary","-top-[1px]"]},l={small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"},s={small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},t={round:["rounded-full"],square:["rounded-md"]};export{t as SHAPE_CLS_MAP,s as SIZE_CLS_MAP,l as SIZE_VAR_MAP,a as VARIANT_CLS_MAP,e as VARIANT_THUMB_CLS_MAP,r as VARIANT_TRACK_CLS_MAP};
+const r={solid:[""],outlined:["border-solid border border-primary"]},a={solid:{true:["bg-primary","group-enabled:group-hover:bg-primary-hover"],false:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},outlined:{true:["bg-transparent"],false:["bg-transparent"]}},e={solid:["bg-contrast","top-0"],outlined:["bg-primary","group-enabled:group-hover:bg-primary-hover","-top-[1px]"]},o={small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"},l={small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},p={round:["rounded-full"],square:["rounded-md"]};export{p as SHAPE_CLS_MAP,l as SIZE_CLS_MAP,o as SIZE_VAR_MAP,r as VARIANT_CLS_MAP,e as VARIANT_THUMB_CLS_MAP,a as VARIANT_TRACK_CLS_MAP};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-color-primary-0: light-dark(#fafafa, #171717); --nd-color-primary-5: light-dark(#f7f7f7, #1e1e1e); --nd-color-primary-10: light-dark(#f4f4f4, #242424); --nd-color-primary-15: light-dark(#ededed, #2c2c2c); --nd-color-primary-20: light-dark(#e5e5e5, #333333); --nd-color-primary-30: light-dark(#cecece, #434343); --nd-color-primary-40: light-dark(#aeaeae, #575757); --nd-color-primary-50: light-dark(#888888, #888888); --nd-color-primary-60: light-dark(#626262, #b9b9b9); --nd-color-primary-70: light-dark(#424242, #cdcdcd); --nd-color-primary-80: light-dark(#2b2b2b, #dedede); --nd-color-primary-90: light-dark(#1d1d1d, #ececec); --nd-color-primary-100: light-dark(#171717, #fafafa); }@theme{ --color-primary: var(--nd-color-primary-80); --color-primary-hover: var(--nd-color-primary-70); --color-primary-active: var(--nd-color-primary-90); --color-secondary: var(--nd-color-primary-20); --color-secondary-hover: var(--nd-color-primary-30); --color-secondary-active: var(--nd-color-primary-40); --color-tertiary: var(--nd-color-primary-15); --color-tertiary-hover: var(--nd-color-primary-20); --color-tertiary-active: var(--nd-color-primary-30); --color-contrast: var(--nd-color-primary-0); --color-split: var(--nd-color-primary-20); --text-color-primary: var(--nd-color-primary-100); --text-color-secondary: var(--nd-color-primary-60); --text-color-link: var(--color-primary); --text-color-link-hover: var(--color-primary-hover); --text-color-link-active: var(--color-primary-active); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --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.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.375rem; --text-4xl: 2.375rem; --text-4xl--line-height: 2.875rem; --text-5xl: 2.875rem; --text-5xl--line-height: 3.375rem; --radius-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}
+@theme static{ --nd-color-primary-0: light-dark(#fafafa, #171717); --nd-color-primary-5: light-dark(#f7f7f7, #1e1e1e); --nd-color-primary-10: light-dark(#f4f4f4, #242424); --nd-color-primary-15: light-dark(#ededed, #2c2c2c); --nd-color-primary-20: light-dark(#e5e5e5, #333333); --nd-color-primary-30: light-dark(#cecece, #434343); --nd-color-primary-40: light-dark(#aeaeae, #575757); --nd-color-primary-50: light-dark(#888888, #888888); --nd-color-primary-60: light-dark(#626262, #b9b9b9); --nd-color-primary-70: light-dark(#424242, #cdcdcd); --nd-color-primary-80: light-dark(#2b2b2b, #dedede); --nd-color-primary-90: light-dark(#1d1d1d, #ececec); --nd-color-primary-100: light-dark(#171717, #fafafa); }@theme{ --color-primary: var(--nd-color-primary-80); --color-primary-hover: var(--nd-color-primary-70); --color-primary-active: var(--nd-color-primary-90); --color-secondary: var(--nd-color-primary-20); --color-secondary-hover: var(--nd-color-primary-30); --color-secondary-active: var(--nd-color-primary-40); --color-tertiary: var(--nd-color-primary-15); --color-tertiary-hover: var(--nd-color-primary-20); --color-tertiary-active: var(--nd-color-primary-30); --color-contrast: var(--nd-color-primary-0); --color-split: var(--nd-color-primary-20); --color-edge: var(--nd-color-primary-30); --text-color-primary: var(--nd-color-primary-100); --text-color-secondary: var(--nd-color-primary-60); --text-color-link: var(--color-primary); --text-color-link-hover: var(--color-primary-hover); --text-color-link-active: var(--color-primary-active); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --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.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.375rem; --text-4xl: 2.375rem; --text-4xl--line-height: 2.875rem; --text-5xl: 2.875rem; --text-5xl--line-height: 3.375rem; --radius-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; --default-transition-duration: .2s; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}

package/dist/transition/Transition.js

@@ -1 +1 @@
-import{useStableCallback as o}from"@nild/hooks";import{cnMerge as T}from"@nild/shared/utils";import{Children as h,isValidElement as k,useState as E,useRef as p,useEffect as f,cloneElement as N}from"react";const x=({className:b,children:y,visible:l=!0})=>{const u=h.toArray(y).find(a=>k(a)),s=u?l?"entered":"exited":"unmounted",[t,n]=E(s),e=p(),r=p(u);r.current=t==="unmounted"?u:u??r.current;const i=o(a=>{c();let d=!0;const m=()=>{d&&(d=!1,e.current=void 0,a?.())};m.cancel=()=>{d=!1},e.current=m}),v=o(()=>{e.current&&(e.current(),e.current=void 0)}),c=o(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),g=o(()=>{s==="unmounted"&&t==="exited"&&n("unmounted")});return f(()=>{v()},[t]),f(()=>{switch(s){case"entered":t!=="entering"&&t!=="entered"&&(t==="unmounted"?n("exited"):(c(),n("entering"),i(()=>{i(()=>{n("entered")}),e.current&&setTimeout(e.current,0)})));break;case"exited":(t==="entering"||t==="entered")&&(c(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break;case"unmounted":default:t!=="exited"&&t!=="unmounted"&&(c(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break}},[l,s,t]),r.current?N(r.current,{...r.current.props,className:T(r.current.props.className,"transition-[opacity,visibility]",b),style:{...r.current.props.style,opacity:t==="entered"?1:0,visibility:t==="entered"?"visible":"hidden"},onTransitionEnd:g}):null};x.displayName="Transition";export{x as default};
+import{useEffectCallback as o}from"@nild/hooks";import{cnMerge as E}from"@nild/shared/utils";import{Children as T,isValidElement as k,useState as h,useRef as p,useEffect as f,cloneElement as N}from"react";const x=({className:b,children:v,visible:l=!0})=>{const c=T.toArray(v).find(a=>k(a)),u=c?l?"entered":"exited":"unmounted",[t,n]=h(u),e=p(),r=p(c);r.current=t==="unmounted"?c:c??r.current;const i=o(a=>{s();let d=!0;const m=()=>{d&&(d=!1,e.current=void 0,a?.())};m.cancel=()=>{d=!1},e.current=m}),g=o(()=>{e.current&&(e.current(),e.current=void 0)}),s=o(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),y=o(()=>{u==="unmounted"&&t==="exited"&&n("unmounted")});return f(()=>{g()},[t]),f(()=>{switch(u){case"entered":t!=="entering"&&t!=="entered"&&(t==="unmounted"?n("exited"):(s(),n("entering"),i(()=>{i(()=>{n("entered")}),e.current&&setTimeout(e.current,0)})));break;case"exited":(t==="entering"||t==="entered")&&(s(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break;case"unmounted":default:t!=="exited"&&t!=="unmounted"&&(s(),n("exiting"),i(()=>{i(()=>{n("exited")}),e.current&&setTimeout(e.current,0)}));break}},[l,u,t]),r.current?N(r.current,{...r.current.props,className:E(r.current.props.className,"transition-[opacity,visibility]",t==="entered"?"opacity-100 visible":"opacity-0 invisible",b),onTransitionEnd:y}):null};x.displayName="Transition";export{x as default};

package/dist/trigger/Trigger.js

@@ -1 +1 @@
-import{useStableCallback as o}from"@nild/hooks";import{mergeRefs as x,cnJoin as y}from"@nild/shared/utils";import{forwardRef as C,Children as A,isValidElement as E,cloneElement as N}from"react";const a=C(({children:t,action:s="click",onToggle:u,onOpen:e,onClose:i,...v},f)=>{var r,d;const n=A.toArray(t).find(c=>E(c)),l=Array.isArray(s)?s:[s],m=o(()=>l.includes("click")&&u?.()),p=o(()=>l.includes("hover")&&e?.()),g=o(()=>l.includes("hover")&&i?.()),k=o(()=>l.includes("focus")&&e?.()),M=o(()=>(l.includes("click")||l.includes("focus")||l.includes("contextMenu"))&&i?.()),h=o(c=>l.includes("contextMenu")&&(c.preventDefault(),e?.()));return n?N(n,{...v,className:y("nd-trigger",(r=n?.props)==null?void 0:r.className),ref:x(f,(d=n?.props)==null?void 0:d.ref),onClick:m,onMouseEnter:p,onMouseLeave:g,onFocus:k,onBlur:M,onContextMenu:h}):null});a.displayName="Trigger";export{a as default};
+import{useEffectCallback as o}from"@nild/hooks";import{mergeRefs as x,cnJoin as y}from"@nild/shared/utils";import{forwardRef as C,Children as E,isValidElement as A,cloneElement as N}from"react";const a=C(({children:t,action:s="click",onToggle:u,onOpen:l,onClose:i,...v},f)=>{var r,d;const n=E.toArray(t).find(c=>A(c)),e=Array.isArray(s)?s:[s],m=o(()=>e.includes("click")&&u?.()),p=o(()=>e.includes("hover")&&l?.()),g=o(()=>e.includes("hover")&&i?.()),k=o(()=>e.includes("focus")&&l?.()),M=o(()=>(e.includes("click")||e.includes("focus")||e.includes("contextMenu"))&&i?.()),h=o(c=>e.includes("contextMenu")&&(c.preventDefault(),l?.()));return n?N(n,{...v,className:y("nd-trigger",(r=n?.props)==null?void 0:r.className),ref:x(f,(d=n?.props)==null?void 0:d.ref),onClick:m,onMouseEnter:p,onMouseLeave:g,onFocus:k,onBlur:M,onContextMenu:h}):null});a.displayName="Trigger";export{a as default};

package/dist/typography/Link.d.ts

@@ -1,7 +1,5 @@
-import { AnchorHTMLAttributes, ReactNode } from 'react';
+import { AnchorHTMLAttributes } from 'react';
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    className?: string;
-    children?: ReactNode;
     disabled?: boolean;
     underlined?: boolean;
 }

package/dist/typography/Link.js

@@ -1 +1 @@
-import{jsx as d}from"react/jsx-runtime";import{cnMerge as s}from"@nild/shared/utils";import{forwardRef as f}from"react";import{DISABLED_CLS as m}from"../_shared/style/index.js";const r=f(({className:n,children:i,disabled:e,underlined:a,href:t="#",...l},o)=>d("a",{...l,href:e?void 0:t,className:s(["nd-link","font-sans","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],m,a?"underline":"no-underline",e&&"disabled",n),ref:o,children:i}));r.displayName="Typography.Link";export{r as default};
+import{jsx as d}from"react/jsx-runtime";import{cnMerge as s}from"@nild/shared/utils";import{forwardRef as f}from"react";import{DISABLED_CLS as m}from"../_shared/style/index.js";const r=f(({className:n,children:i,disabled:e,underlined:a,href:t="#",...l},o)=>d("a",{...l,href:e?void 0:t,className:s("nd-link",["font-sans","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],m,a?"underline":"no-underline",e&&"disabled",n),ref:o,children:i}));r.displayName="Typography.Link";export{r as default};

package/dist/typography/Paragraph.d.ts

@@ -1,7 +1,4 @@
-import { HTMLAttributes, ReactNode } from 'react';
-export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
-    className?: string;
-    children?: ReactNode;
-}
+import { HTMLAttributes } from 'react';
+export type ParagraphProps = HTMLAttributes<HTMLParagraphElement>;
 declare const Paragraph: import('react').ForwardRefExoticComponent<ParagraphProps & import('react').RefAttributes<HTMLParagraphElement>>;
 export default Paragraph;

package/dist/typography/Paragraph.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared/utils";import{forwardRef as s}from"react";const r=s(({className:a,children:e,...m},p)=>t("p",{...m,className:o("nd-paragraph","text-primary","text-[length:inherit]","mt-0 mb-[1em]",a),ref:p,children:e}));r.displayName="Typography.Paragraph";export{r as default};
+import{jsx as t}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared/utils";import{forwardRef as s}from"react";const r=s(({className:a,children:e,...m},p)=>t("p",{...m,className:o("nd-paragraph","text-primary text-[length:inherit]","mt-0 mb-[1em]",a),ref:p,children:e}));r.displayName="Typography.Paragraph";export{r as default};

package/dist/typography/Text.d.ts

@@ -1,7 +1,5 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
-    className?: string;
-    children?: ReactNode;
     disabled?: boolean;
     secondary?: boolean;
     strong?: boolean;

package/dist/typography/Text.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared/utils";import{forwardRef as g}from"react";import{DISABLED_CLS as u}from"../_shared/style/index.js";const s=g(({className:a,children:o,disabled:n,secondary:t,strong:i,deleted:l,underlined:c,italic:m,marked:p,coded:b,keyboarded:h,...y},f)=>{let e=o;return i&&(e=r("strong",{children:e})),l&&(e=r("del",{children:e})),c&&(e=r("u",{className:"underline",children:e})),m&&(e=r("i",{children:e})),p&&(e=r("mark",{className:"text-contrast bg-primary",children:e})),b&&(e=r("code",{className:d("text-sm","ps-1.5 pe-1.5","bg-secondary rounded-sm border border-solid border-secondary"),children:e})),h&&(e=r("kbd",{className:d("text-sm","ps-1.5 pe-1.5","rounded-sm border border-b-2 border-solid border-secondary"),children:e})),r("span",{...y,className:x(["nd-text","font-sans","text-[length:inherit]"],u,n&&"disabled",t?"text-secondary":"text-primary",a),ref:f,children:e})});s.displayName="Typography.Text";export{s as default};
+import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared/utils";import{forwardRef as g}from"react";import{DISABLED_CLS as u}from"../_shared/style/index.js";const s=g(({className:a,children:o,disabled:n,secondary:t,strong:i,deleted:l,underlined:c,italic:m,marked:p,coded:b,keyboarded:h,...y},f)=>{let e=o;return i&&(e=r("strong",{children:e})),l&&(e=r("del",{children:e})),c&&(e=r("u",{className:"underline",children:e})),m&&(e=r("i",{children:e})),p&&(e=r("mark",{className:"text-contrast bg-primary",children:e})),b&&(e=r("code",{className:d("text-sm","ps-1.5 pe-1.5","bg-secondary rounded-sm border border-solid border-secondary"),children:e})),h&&(e=r("kbd",{className:d("text-sm","ps-1.5 pe-1.5","rounded-sm border border-b-2 border-solid border-secondary"),children:e})),r("span",{...y,className:x("nd-text","font-sans text-[length:inherit]",u,n&&"disabled",t?"text-secondary":"text-primary",a),ref:f,children:e})});s.displayName="Typography.Text";export{s as default};

package/dist/typography/Title.d.ts

@@ -1,8 +1,6 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes } from 'react';
 import { HeadingLevel } from './style';
 export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    className?: string;
-    children?: ReactNode;
     level?: HeadingLevel;
 }
 declare const Title: import('react').ForwardRefExoticComponent<TitleProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/typography/Title.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared/utils";import{forwardRef as l}from"react";import{HEADING_LEVEL_CLS_MAP as n}from"./style/index.js";const r=l(({className:a,children:m,level:e=1,...s},o)=>{const t=`h${e}`;return i(t,{...s,className:f(["nd-title","font-sans","font-semibold","text-primary","mt-[1em] mb-[0.5em]"],n[e],a),ref:o,children:m})});r.displayName="Typography.Title";export{r as default};
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared/utils";import{forwardRef as l}from"react";import{HEADING_LEVEL_CLS_MAP as n}from"./style/index.js";const r=l(({className:a,children:m,level:e=1,...s},o)=>{const t=`h${e}`;return i(t,{...s,className:f(["nd-title","font-sans font-semibold text-primary","mt-[1em] mb-[0.5em]"],n[e],a),ref:o,children:m})});r.displayName="Typography.Title";export{r as default};

package/dist/typography/Typography.d.ts

@@ -1,12 +1,9 @@
-import { ForwardRefExoticComponent, HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ForwardRefExoticComponent } from 'react';
 import { default as Link } from './Link';
 import { default as Paragraph } from './Paragraph';
 import { default as Text } from './Text';
 import { default as Title } from './Title';
-export interface TypographyProps extends HTMLAttributes<HTMLElement> {
-    className?: string;
-    children?: ReactNode;
-}
+export type TypographyProps = HTMLAttributes<HTMLElement>;
 declare const Typography: ForwardRefExoticComponent<TypographyProps> & {
     Link: typeof Link;
     Paragraph: typeof Paragraph;

package/dist/typography/Typography.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared/utils";import{forwardRef as i}from"react";import s from"./Link.js";import f from"./Paragraph.js";import n from"./Text.js";import l from"./Title.js";const r=i(({className:o,children:a,...m},t)=>e("article",{...m,className:p("nd-typography","font-sans","text-md",o),ref:t,children:a}));r.Link=s,r.Paragraph=f,r.Text=n,r.Title=l,r.displayName="Typography";export{r as default};
+import{jsx as e}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared/utils";import{forwardRef as i}from"react";import s from"./Link.js";import f from"./Paragraph.js";import n from"./Text.js";import l from"./Title.js";const r=i(({className:o,children:a,...m},t)=>e("article",{...m,className:p("nd-typography","font-sans text-md",o),ref:t,children:a}));r.Link=s,r.Paragraph=f,r.Text=n,r.Title=l,r.displayName="Typography";export{r as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,8 +31,8 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "@nild/shared": "0.0.5",
-    "@nild/hooks": "0.0.6"
+    "@nild/hooks": "0.0.7",
+    "@nild/shared": "0.0.5"
   },
   "scripts": {
     "build": "vite build --mode PROD",