@nild/components 0.0.19 → 0.0.21

package/dist/button/Button.d.ts

@@ -1,10 +1,5 @@
-import { RefAttributes, ForwardRefExoticComponent } from 'react';
-import { ButtonProps, ButtonGroupProps } from './interfaces';
-/**
- * @category Components
- */
-declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> & {
-    Group: typeof Group;
-};
-declare const Group: ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<HTMLDivElement>>;
+import { ReactNode, ReactElement } from 'react';
+import { ButtonProps } from './interfaces';
+export declare const isButtonElement: (child: ReactNode) => child is ReactElement<ButtonProps>;
+declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/button/Button.js

@@ -1 +1 @@
-import{jsx as p}from"react/jsx-runtime";import{cnMerge as f,isEmpty as v}from"@nild/shared";import{forwardRef as b,Children as y,isValidElement as g}from"react";import z from"../_shared/utils/isPlainChildren.js";import{buttonClassNames as C,groupButtonClassNames as B,groupClassNames as q}from"./style/index.js";const i=b(({className:s,children:r,variant:t="solid",size:o="medium",shape:l="square",equal:n=!1,disabled:d,block:u,...a},m)=>{const e=z(r);return p("button",{type:"button",...a,disabled:d,className:f(C({variant:t,size:o,shape:l,equal:n,plain:e,block:u,disabled:d}),s),ref:m,children:r})});i.displayName="Button";const h=s=>g(s)&&s.type===i,N=b(({className:s,children:r,variant:t="solid",size:o="medium",disabled:l,direction:n="horizontal",...d},u)=>{const a=y.toArray(r);if(!a||v(a))return null;if(a.length===1){const[e]=a;return h(e)?p(i,{...e.props,variant:t,size:o,disabled:l}):null}const m=a.filter(h);return p("div",{...d,className:f(q({direction:n}),s),ref:u,children:m.map((e,c)=>p(i,{...e.props,className:B({first:c===0,last:c===m.length-1,direction:n,variant:t}),variant:t,size:o,disabled:l},c))})});N.displayName="Button.Group",i.Group=N;export{i as default};
+import{jsx as b}from"react/jsx-runtime";import{cnMerge as c}from"@nild/shared";import{forwardRef as q,isValidElement as N}from"react";import h from"../_shared/utils/isPlainChildren.js";import{useGroupContext as x}from"./contexts/index.js";import{buttonClassNames as y}from"./style/index.js";const v=a=>N(a)&&a.type===s,s=q((a,o)=>{const e=x(),{className:i,children:t,variant:l=e.variant,size:m=e.size,shape:n="square",equal:d=e.equal,disabled:r=e.disabled,block:p,...u}=a,f=h(t);return b("button",{type:"button",...u,disabled:r,className:c(y({variant:l,size:m,shape:n,equal:d,plain:f,block:p,disabled:r}),i),ref:o,children:t})});s.displayName="Button";export{s as default,v as isButtonElement};

package/dist/button/Group.d.ts

@@ -0,0 +1,3 @@
+import { GroupProps } from './interfaces';
+declare const Group: import('react').ForwardRefExoticComponent<GroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Group;

package/dist/button/Group.js

@@ -0,0 +1 @@
+import{jsxs as f,jsx as h}from"react/jsx-runtime";import{isEmpty as g,cnMerge as v}from"@nild/shared";import{forwardRef as N,Children as y,cloneElement as B}from"react";import{isButtonElement as C}from"./Button.js";import{GroupProvider as E}from"./contexts/index.js";import{groupButtonClassNames as j,groupClassNames as x}from"./style/index.js";const o=N(({className:l,children:n,variant:a="solid",size:m="medium",equal:d=!1,disabled:p,direction:e="horizontal",...c},u)=>{const s=y.toArray(n);if(g(s))return null;const r=s.filter(C);return f(E,{value:{variant:a,size:m,equal:d,disabled:p},children:[r.length===1&&r[0],r.length>1&&h("div",{...c,className:v(x({direction:e}),l),ref:u,children:r.map((t,i)=>B(t,{...t.props,className:j({first:i===0,last:i===r.length-1,direction:e,variant:a})}))})]})});o.displayName="Button.Group";export{o as default};

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

@@ -0,0 +1,3 @@
+import { GroupProps } from '../interfaces';
+declare const GroupProvider: import('react').Provider<Pick<GroupProps, "variant" | "size" | "equal" | "disabled">>, useGroupContext: () => Pick<GroupProps, "variant" | "size" | "equal" | "disabled">;
+export { GroupProvider, useGroupContext };

package/dist/button/contexts/index.js

@@ -0,0 +1 @@
+import{createContext as e}from"@nild/shared";const[a,t]=e({defaultValue:{variant:"solid",size:"medium",equal:!1,disabled:!1}});export{a as GroupProvider,t as useGroupContext};

package/dist/button/index.d.ts

@@ -1,3 +1,8 @@
-import { default as Button } from './Button';
+/**
+ * @category Components
+ */
+declare const Button: import('react').ForwardRefExoticComponent<import('./interfaces').ButtonProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Group: import('react').ForwardRefExoticComponent<import('./interfaces').GroupProps & import('react').RefAttributes<HTMLDivElement>>;
+};
 export type * from './interfaces';
 export default Button;

package/dist/button/index.js

@@ -1 +1 @@
-import o from"./Button.js";export{o as default};
+import o from"./Button.js";import t from"./Group.js";const r=Object.assign(o,{Group:t});export{r as default};

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

@@ -1,9 +1,9 @@
-import { ButtonProps, ButtonGroupProps } from '../interfaces';
+import { ButtonProps, GroupProps } from '../interfaces';
 export declare const buttonClassNames: (props?: (ButtonProps & {
     plain?: boolean;
 }) | undefined) => string;
-export declare const groupClassNames: (props?: ButtonGroupProps | undefined) => string;
-export declare const groupButtonClassNames: (props?: (ButtonGroupProps & {
+export declare const groupClassNames: (props?: GroupProps | undefined) => string;
+export declare const groupButtonClassNames: (props?: (GroupProps & {
     first?: boolean;
     last?: boolean;
 }) | undefined) => string;

package/dist/checkbox/Checkbox.d.ts

@@ -1,20 +1,3 @@
-import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes, ChangeEventHandler } from 'react';
-import { CheckboxProps, CheckboxSize } from './interfaces';
-/**
- * @category Components
- */
-declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLDivElement>> & {
-    Indicator: typeof Indicator;
-    Label: typeof Label;
-};
-interface IndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    size?: CheckboxSize;
-    checked?: boolean;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-declare const Indicator: ForwardRefExoticComponent<IndicatorProps & RefAttributes<HTMLDivElement>>;
-interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
-    size?: CheckboxSize;
-}
-declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLSpanElement>>;
+import { CheckboxProps } from './interfaces';
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
 export default Checkbox;

package/dist/checkbox/Checkbox.js

@@ -1 +1 @@
-import{jsx as i,jsxs as S}from"react/jsx-runtime";import{useControllableState as V,useEffectCallback as L,usePureCallback as x}from"@nild/hooks";import{Icon as M}from"@nild/icons";import P from"@nild/icons/CheckSmall";import{isString as g,cnMerge as u}from"@nild/shared";import{forwardRef as N,Children as R,isValidElement as W,cloneElement as I}from"react";import{defaultIndicatorClassNames as q,defaultIndicatorIconClassNames as A,checkboxClassNames as B,indicatorInputClassNames as D,indicatorWrapperClassNames as F,labelClassNames as G}from"./style/index.js";const m=N(({className:n,children:c,variant:o="solid",size:a="medium",checked:t,defaultChecked:h,value:p,defaultValue:v,indeterminate:H,disabled:C,onChange:b,...y},E)=>{const d=[],s=new Map,[f,j]=V(t??p,h??v??!1),k=L(()=>{C||j(e=>(b?.(!e),!e))}),w=x(()=>i(r,{size:a,checked:f,onChange:k,children:i("div",{className:q({variant:o,checked:f}),children:i(M,{className:A(),component:P})})})),z=x(e=>i(l,{size:a,children:e}));return R.forEach(c,e=>{W(e)?e.type===r?(s.delete(r),s.set(r,I(e,{...e.props,size:a,checked:f,onChange:k}))):e.type===l&&(s.delete(l),s.set(l,I(e,{...e.props,size:a}))):g(e)&&(s.has(l)||s.set(l,z(e)))}),d.push(...s.values()),s.has(r)||d.unshift(w()),!s.has(l)&&g(c)&&d.push(z(c)),i("label",{...y,className:u(B({size:a,disabled:C}),n),ref:E,children:d})}),r=N(({className:n,children:c,size:o,checked:a,onChange:t,...h},p)=>S("div",{...h,className:u(F({size:o}),n),ref:p,children:[c,i("input",{type:"checkbox",className:D(),checked:a,onChange:t})]}));r.displayName="Checkbox.Indicator";const l=N(({className:n,children:c,size:o,...a},t)=>i("span",{...a,className:u(G({size:o}),n),ref:t,children:c}));l.displayName="Checkbox.Label",m.Indicator=r,m.Label=l,m.displayName="Checkbox";export{m as default};
+import{jsx as r}from"react/jsx-runtime";import{useControllableState as y,useEffectCallback as E}from"@nild/hooks";import{isString as c,cnMerge as w}from"@nild/shared";import{forwardRef as z,Children as M,isValidElement as S}from"react";import{CheckboxProvider as j}from"./contexts/index.js";import t from"./Indicator.js";import s from"./Label.js";import{checkboxClassNames as P}from"./style/index.js";const m=z(({className:h,children:l,variant:f="solid",size:o="medium",checked:p,defaultChecked:u,value:C,defaultValue:b,indeterminate:R,disabled:d,onChange:n,...k},v)=>{const i=[],a=new Map,[x,N]=y(p??C,u??b??!1),g=E(()=>{d||N(e=>(n?.(!e),!e))});return M.forEach(l,e=>{S(e)?e.type===t?(a.delete(t),a.set(t,e)):e.type===s&&(a.delete(s),a.set(s,e)):c(e)&&(a.has(s)||a.set(s,r(s,{children:e})))}),i.push(...a.values()),a.has(t)||i.unshift(r(t,{})),!a.has(s)&&c(l)&&i.push(r(s,{children:l})),r(j,{value:{variant:f,size:o,checked:x,handleChange:g},children:r("label",{...k,className:w(P({size:o,disabled:d}),h),ref:v,children:i})})});m.displayName="Checkbox";export{m as default};

package/dist/checkbox/Indicator.d.ts

@@ -0,0 +1,3 @@
+import { IndicatorProps } from './interfaces';
+declare const Indicator: import('react').ForwardRefExoticComponent<IndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Indicator;

package/dist/checkbox/Indicator.js

@@ -0,0 +1 @@
+import{jsxs as f,jsx as a}from"react/jsx-runtime";import{Icon as p}from"@nild/icons";import h from"@nild/icons/CheckSmall";import{cnMerge as N}from"@nild/shared";import{forwardRef as C}from"react";import{useCheckboxContext as k}from"./contexts/index.js";import{indicatorInputClassNames as u,indicatorClassNames as x,defaultIndicatorBlockClassNames as I,defaultIndicatorIconClassNames as b}from"./style/index.js";const e=C(({className:o,children:r,...c},t)=>{const{variant:i,size:m,checked:s,handleChange:n}=k(),d=r??(l=>a("div",{className:I({variant:i,checked:l}),children:a(p,{className:b(),component:h})}));return f("div",{...c,className:N(x({size:m}),o),ref:t,children:[d(!!s),a("input",{type:"checkbox",className:u(),checked:s,onChange:n})]})});e.displayName="Checkbox.Indicator";export{e as default};

package/dist/checkbox/Label.d.ts

@@ -0,0 +1,3 @@
+import { LabelProps } from './interfaces';
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Label;

package/dist/checkbox/Label.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{isFunction as l,cnMerge as n}from"@nild/shared";import{forwardRef as f}from"react";import{useCheckboxContext as p}from"./contexts/index.js";import{labelClassNames as d}from"./style/index.js";const s=f(({className:a,children:e,...r},o)=>{const{size:m,checked:t}=p(),c=l(e)?e(!!t):e;return i("span",{...r,className:n(d({size:m}),a),ref:o,children:c})});s.displayName="Checkbox.Label";export{s as default};

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

@@ -0,0 +1,7 @@
+import { CheckboxProps } from '../interfaces';
+declare const CheckboxProvider: import('react').Provider<Pick<CheckboxProps, "variant" | "size" | "checked"> & {
+    handleChange?: () => void;
+}>, useCheckboxContext: () => Pick<CheckboxProps, "variant" | "size" | "checked"> & {
+    handleChange?: () => void;
+};
+export { CheckboxProvider, useCheckboxContext };

package/dist/checkbox/contexts/index.js

@@ -0,0 +1 @@
+import{createContext as e}from"@nild/shared";const[t,o]=e({defaultValue:{}});export{t as CheckboxProvider,o as useCheckboxContext};

package/dist/checkbox/index.d.ts

@@ -1,3 +1,9 @@
-import { default as Checkbox } from './Checkbox';
+/**
+ * @category Components
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<import('./interfaces').CheckboxProps & import('react').RefAttributes<HTMLLabelElement>> & {
+    Indicator: import('react').ForwardRefExoticComponent<import('./interfaces').IndicatorProps & import('react').RefAttributes<HTMLDivElement>>;
+    Label: import('react').ForwardRefExoticComponent<import('./interfaces').LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
 export type * from './interfaces';
 export default Checkbox;

package/dist/checkbox/index.js

@@ -1 +1 @@
-import e from"./Checkbox.js";export{e as default};
+import o from"./Checkbox.js";import r from"./Indicator.js";import t from"./Label.js";const m=Object.assign(o,{Indicator:r,Label:t});export{m as default};

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

@@ -1,7 +1,7 @@
 import { CheckboxProps } from '../interfaces';
 export declare const checkboxClassNames: (props?: Pick<CheckboxProps, "size" | "disabled"> | undefined) => string;
-export declare const indicatorWrapperClassNames: (props?: Pick<CheckboxProps, "size"> | undefined) => string;
+export declare const indicatorClassNames: (props?: Pick<CheckboxProps, "size"> | undefined) => string;
 export declare const indicatorInputClassNames: (props?: object | undefined) => string;
-export declare const defaultIndicatorClassNames: (props?: Pick<CheckboxProps, "variant" | "checked"> | undefined) => string;
+export declare const defaultIndicatorBlockClassNames: (props?: Pick<CheckboxProps, "variant" | "checked"> | undefined) => string;
 export declare const defaultIndicatorIconClassNames: (props?: object | undefined) => string;
 export declare const labelClassNames: (props?: Pick<CheckboxProps, "size"> | undefined) => string;

package/dist/checkbox/style/index.js

@@ -1 +1 @@
-import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),t=e(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"w-3.5 h-3.5 text-sm",medium:"w-4 h-4 text-md",large:"w-4.5 h-4.5 text-xl"}}}),s=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),o=e([["flex","items-center","justify-center"],["w-full","h-full","rounded-sm","border-solid","border-1","border-primary"],"transition-[background-color,color]"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-primary text-contrast","group-enabled:group-hover:bg-primary-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent text-primary","group-enabled:group-hover:bg-tertiary-hover"]},{checked:!1,className:["bg-transparent text-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),l=e(["mr-[0.25px]"]),i=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}});export{r as checkboxClassNames,o as defaultIndicatorClassNames,l as defaultIndicatorIconClassNames,s as indicatorInputClassNames,t as indicatorWrapperClassNames,i as labelClassNames};
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),t=e(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"w-3.5 h-3.5 text-sm",medium:"w-4 h-4 text-md",large:"w-4.5 h-4.5 text-xl"}}}),s=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),o=e([["flex","items-center","justify-center"],["w-full","h-full","rounded-sm","border-solid","border-1","border-primary"],"transition-[background-color,color]"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-primary text-contrast","group-enabled:group-hover:bg-primary-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent text-primary","group-enabled:group-hover:bg-tertiary-hover"]},{checked:!1,className:["bg-transparent text-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),l=e(["mr-[0.25px]"]),i=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}});export{r as checkboxClassNames,o as defaultIndicatorBlockClassNames,l as defaultIndicatorIconClassNames,t as indicatorClassNames,s as indicatorInputClassNames,i as labelClassNames};

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/Button.js";import{default as o}from"./checkbox/Checkbox.js";import{default as r}from"./divider/Divider.js";import{default as t}from"./popover/Popover.js";import{default as s}from"./switch/Switch.js";import{default as f}from"./transition/Transition.js";import{default as m}from"./typography/Typography.js";/* empty css            */export{a as Button,o as Checkbox,r as Divider,t as Popover,s as Switch,f as Transition,m as Typography};
+import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as r}from"./divider/Divider.js";import{default as t}from"./popover/Popover.js";import{default as s}from"./switch/index.js";import{default as f}from"./transition/Transition.js";import{default as m}from"./typography/Typography.js";/* empty css            */export{a as Button,o as Checkbox,r as Divider,t as Popover,s as Switch,f as Transition,m as Typography};

package/dist/portal/Arrow.d.ts

@@ -1,9 +1,3 @@
-import { CSSProperties, HTMLAttributes } from 'react';
-import { ArrowSize, ArrowOrientation } from './style';
-export interface ArrowProps extends HTMLAttributes<HTMLSpanElement> {
-    style?: CSSProperties;
-    orientation?: ArrowOrientation;
-    size?: ArrowSize;
-}
+import { ArrowProps } from './interfaces';
 declare const Arrow: import('react').ForwardRefExoticComponent<ArrowProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Arrow;

package/dist/portal/Arrow.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";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};
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as t}from"@nild/shared";import{forwardRef as f}from"react";import{arrowClassNames as p}from"./style/index.js";const r=f(({className:a,orientation:s="up",size:o="medium",...e},i)=>m("div",{...e,className:t(p({orientation:s,size:o}),a),ref:i}));r.displayName="Arrow";export{r as default};

package/dist/portal/Portal.d.ts

@@ -1,14 +1,4 @@
-import { HTMLAttributes, Ref } from 'react';
-import { ArrowProps } from './Arrow';
-import { PaddingSize } from './style';
-export interface ArrowOptions extends ArrowProps {
-    ref: Ref<HTMLDivElement>;
-}
-export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
-    container?: Element | DocumentFragment;
-    paddingSize?: PaddingSize;
-    arrow?: ArrowOptions | false;
-}
+import { PortalProps } from './interfaces';
 /**
  * @category Components
  */

package/dist/portal/Portal.js

@@ -1 +1 @@
-import{jsxs as p,jsx as u}from"react/jsx-runtime";import{cnMerge as r,cnJoin as f}from"@nild/shared";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};
+import{jsxs as p,jsx as f}from"react/jsx-runtime";import{cnMerge as e,cnJoin as N}from"@nild/shared";import{forwardRef as u,Children as C,isValidElement as v,cloneElement as x}from"react";import{createPortal as y}from"react-dom";import g from"./Arrow.js";import{portalContentClassNames as h,portalArrowClassNames as j,portalClassNames as w}from"./style/index.js";const o=u(({className:l,children:m,container:t=document.body,paddingSize:i="medium",arrow:s=!1,...n},d)=>{var r;const a=C.toArray(m).find(c=>v(c));return a?y(p("div",{...n,className:e(w(),l),ref:d,children:[x(a,{...a.props,className:e(h({paddingSize:i}),(r=a?.props)==null?void 0:r.className)}),s!==!1&&f(g,{...s,className:N(j(),s.className)})]}),t):null});o.displayName="Portal";export{o as default};

package/dist/portal/index.d.ts

@@ -1,6 +1,5 @@
-import { default as Arrow, ArrowProps } from './Arrow';
-import { default as Portal, PortalProps, ArrowOptions } from './Portal';
-import { PaddingSize } from './style';
-export type { ArrowProps, PortalProps, PaddingSize, ArrowOptions };
+import { default as Arrow } from './Arrow';
+import { default as Portal } from './Portal';
+export type * from './interfaces';
 export { Arrow };
 export default Portal;

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

@@ -1,8 +1,5 @@
-import { CSSProperties } from 'react';
-export type ArrowSize = 'small' | 'medium' | 'large';
-export declare const ARROW_SIZE_CLS_MAP: Record<ArrowSize, string>;
-export type ArrowOrientation = 'up' | 'down' | 'left' | 'right';
-export declare const ARROW_ORIENTATION_STYLE_MAP: Record<ArrowOrientation, Pick<CSSProperties, 'clipPath' | 'transform'>>;
-export declare const ARROW_ORIENTATION_CLS_MAP: Record<ArrowOrientation, string>;
-export type PaddingSize = 'small' | 'medium' | 'large';
-export declare const PADDING_SIZE_CLS_MAP: Record<PaddingSize, string>;
+import { ArrowProps, PortalProps } from '../interfaces';
+export declare const arrowClassNames: (props?: ArrowProps | undefined) => string;
+export declare const portalClassNames: (props?: PortalProps | undefined) => string;
+export declare const portalContentClassNames: (props?: PortalProps | undefined) => string;
+export declare const portalArrowClassNames: (props?: ArrowProps | undefined) => string;

package/dist/portal/style/index.js

@@ -1 +1 @@
-const r={small:"w-1.5 h-1.5",medium:"w-3 h-3",large:"w-4.5 h-4.5"},e={up:{transform:"translateY(-50%) rotate(45deg)"},down:{transform:"translateY(50%) rotate(45deg)"},left:{transform:"translateX(-50%) rotate(45deg)"},right:{transform:"translateX(50%) rotate(45deg)"}},t={up:"rounded-tl-sm border-l-1 border-t-1",down:"rounded-br-sm border-r-1 border-b-1",left:"rounded-bl-sm border-l-1 border-b-1",right:"rounded-tr-sm border-r-1 border-t-1"},o={small:"px-2 py-1",medium:"px-4 py-3",large:"px-6 py-5"};export{t as ARROW_ORIENTATION_CLS_MAP,e as ARROW_ORIENTATION_STYLE_MAP,r as ARROW_SIZE_CLS_MAP,o as PADDING_SIZE_CLS_MAP};
+import{cva as r}from"@nild/shared";const e=r(["nd-arrow","bg-container",["border-solid","border-edge"]],{variants:{orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]",["rounded-tl-sm","border-l-1","border-t-1"]],down:["transform-[translateY(50%)_rotate(45deg)]",["rounded-br-sm","border-r-1","border-b-1"]],left:["transform-[translateX(-50%)_rotate(45deg)]",["rounded-bl-sm","border-l-1","border-b-1"]],right:["transform-[translateX(50%)_rotate(45deg)]",["rounded-tr-sm","border-r-1","border-t-1"]]},size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]}}}),a=r(["nd-portal",["absolute","top-0","left-0"]]),o=r(["bg-container","rounded-md",["outline-solid","outline-1","outline-edge"],"shadow-lg"],{variants:{paddingSize:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]}}}),t=r(["absolute"]);export{e as arrowClassNames,t as portalArrowClassNames,a as portalClassNames,o as portalContentClassNames};

package/dist/switch/Switch.d.ts

@@ -1,27 +1,3 @@
-import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from 'react';
-import { SwitchProps, SwitchVariant, SwitchShape } from './interfaces';
-/**
- * @category Components
- */
-declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>> & {
-    Checked: typeof Checked;
-    Unchecked: typeof Unchecked;
-    Thumb: typeof Thumb;
-};
-interface CheckedProps extends HTMLAttributes<HTMLDivElement> {
-    variant: SwitchVariant;
-    checked: boolean;
-}
-declare const Checked: ForwardRefExoticComponent<CheckedProps & RefAttributes<HTMLDivElement>>;
-interface UncheckedProps extends HTMLAttributes<HTMLDivElement> {
-    variant: SwitchVariant;
-    checked: boolean;
-}
-declare const Unchecked: ForwardRefExoticComponent<UncheckedProps & RefAttributes<HTMLDivElement>>;
-interface ThumbProps extends HTMLAttributes<HTMLDivElement> {
-    variant: SwitchVariant;
-    shape: SwitchShape;
-    checked: boolean;
-}
-declare const Thumb: ForwardRefExoticComponent<ThumbProps & RefAttributes<HTMLDivElement>>;
+import { SwitchProps } from './interfaces';
+declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
 export default Switch;

package/dist/switch/Switch.js

@@ -1 +1 @@
-import{jsxs as M,jsx as d}from"react/jsx-runtime";import{useControllableState as R}from"@nild/hooks";import{cnMerge as p}from"@nild/shared";import{forwardRef as k,Children as T,isValidElement as U,cloneElement as y}from"react";import{switchClassNames as q,checkedClassNames as A,uncheckedClassNames as B,thumbClassNames as D}from"./style/index.js";const h=k(({className:i,children:r,variant:a="solid",size:s="medium",shape:c="round",checked:l,defaultChecked:f,value:w,defaultValue:b,disabled:g,onChange:C,style:S,...j},x)=>{let n,m,o;T.forEach(r,e=>{U(e)&&(e.type===v?n=e:e.type===u?m=e:e.type===N&&(o=e))});const E={"--nd-switch-height":{small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"}[s]},[t,V]=R(l??w,f??b??!1),z=()=>{V(e=>(C?.(!e),!e))};return M("button",{...j,type:"button",role:"switch","aria-checked":t,disabled:g,className:p(q({variant:a,size:s,shape:c}),i),style:{...E,...S},ref:x,onClick:z,children:[n?y(n,{...n.props,variant:a,checked:t}):d(v,{variant:a,checked:t}),m?y(m,{...m.props,variant:a,checked:t}):d(u,{variant:a,checked:t}),o?y(o,{...o.props,variant:a,shape:c,checked:t}):d(N,{variant:a,shape:c,checked:t})]})});h.displayName="Switch";const v=k(({className:i,children:r,variant:a,checked:s,...c},l)=>d("div",{...c,className:p(A({variant:a,checked:s}),i),ref:l,children:r}));v.displayName="Switch.Checked";const u=k(({className:i,children:r,variant:a,checked:s,...c},l)=>d("div",{...c,className:p(B({variant:a,checked:s}),i),ref:l,children:r}));u.displayName="Switch.Unchecked";const N=k(({className:i,children:r,variant:a,shape:s,checked:c,...l},f)=>d("div",{...l,className:p(D({variant:a,shape:s,checked:c}),i),ref:f,children:r}));N.displayName="Switch.Thumb",h.Checked=v,h.Unchecked=u,h.Thumb=N;export{h as default};
+import{jsx as a,jsxs as j}from"react/jsx-runtime";import{useControllableState as E}from"@nild/hooks";import{cnMerge as V}from"@nild/shared";import{forwardRef as z,Children as M,isValidElement as P}from"react";import{SwitchProvider as R}from"./contexts/index.js";import{switchClassNames as q}from"./style/index.js";import n from"./Thumb.js";import s from"./Track.js";const p=z(({className:h,children:f,variant:t="solid",size:r="medium",shape:c="round",checked:u,defaultChecked:v,value:y,defaultValue:g,disabled:k,onChange:i,style:C,...w},b)=>{let l,o,d;M.forEach(f,e=>{P(e)&&(e.type===s?e.props.type==="checked"?l=e:o=e:e.type===n&&(d=e))});const N={"--nd-switch-height":{small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"}[r]},[m,x]=E(u??y,v??g??!1),S=()=>{x(e=>(i?.(!e),!e))};return a(R,{value:{variant:t,shape:c,checked:m},children:j("button",{...w,type:"button",role:"switch","aria-checked":m,disabled:k,className:V(q({variant:t,size:r,shape:c}),h),style:{...N,...C},ref:b,onClick:S,children:[l||a(s,{type:"checked"}),o||a(s,{type:"unchecked"}),d||a(n,{})]})})});p.displayName="Switch";export{p as default};

package/dist/switch/Thumb.d.ts

@@ -0,0 +1,3 @@
+import { ThumbProps } from './interfaces';
+declare const Thumb: import('react').ForwardRefExoticComponent<ThumbProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Thumb;

package/dist/switch/Thumb.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import{cnMerge as h}from"@nild/shared";import{forwardRef as f}from"react";import{useSwitchContext as n}from"./contexts/index.js";import{thumbClassNames as p}from"./style/index.js";const r=f(({className:s,children:a,...t},o)=>{const{variant:i,shape:m,checked:e}=n();return c("div",{...t,className:h(p({variant:i,shape:m,checked:e}),s),ref:o,children:a?.(!!e)})});r.displayName="Switch.Thumb";export{r as default};

package/dist/switch/Track.d.ts

@@ -0,0 +1,3 @@
+import { TrackProps } from './interfaces';
+declare const Track: import('react').ForwardRefExoticComponent<TrackProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Track;

package/dist/switch/Track.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as n}from"react";import{useSwitchContext as p}from"./contexts/index.js";import{trackClassNames as d}from"./style/index.js";const r=n(({className:a,children:e,type:s,...t},c)=>{const{variant:m,checked:o}=p();return i("div",{...t,className:f(d({type:s,variant:m,checked:o}),a),ref:c,children:e})});r.displayName="Switch.Track";export{r as default};

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

@@ -0,0 +1,3 @@
+import { SwitchProps } from '../interfaces';
+declare const SwitchProvider: import('react').Provider<Pick<SwitchProps, "variant" | "shape" | "checked">>, useSwitchContext: () => Pick<SwitchProps, "variant" | "shape" | "checked">;
+export { SwitchProvider, useSwitchContext };

package/dist/switch/contexts/index.js

@@ -0,0 +1 @@
+import{createContext as t}from"@nild/shared";const[e,o]=t({defaultValue:{}});export{e as SwitchProvider,o as useSwitchContext};

package/dist/switch/index.d.ts

@@ -1,3 +1,9 @@
-import { default as Switch } from './Switch';
+/**
+ * @category Components
+ */
+declare const Switch: import('react').ForwardRefExoticComponent<import('./interfaces').SwitchProps & import('react').RefAttributes<HTMLButtonElement>> & {
+    Track: import('react').ForwardRefExoticComponent<import('./interfaces').TrackProps & import('react').RefAttributes<HTMLDivElement>>;
+    Thumb: import('react').ForwardRefExoticComponent<import('./interfaces').ThumbProps & import('react').RefAttributes<HTMLDivElement>>;
+};
 export type * from './interfaces';
 export default Switch;

package/dist/switch/index.js

@@ -1 +1 @@
-import o from"./Switch.js";export{o as default};
+import o from"./Switch.js";import r from"./Thumb.js";import t from"./Track.js";const m=Object.assign(o,{Track:t,Thumb:r});export{m as default};

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

@@ -1,5 +1,4 @@
-import { SwitchProps } from '../interfaces';
+import { SwitchProps, TrackProps } from '../interfaces';
 export declare const switchClassNames: (props?: SwitchProps | undefined) => string;
-export declare const checkedClassNames: (props?: Pick<SwitchProps, "variant" | "checked"> | undefined) => string;
-export declare const uncheckedClassNames: (props?: Pick<SwitchProps, "variant" | "checked"> | undefined) => string;
+export declare const trackClassNames: (props?: (Pick<SwitchProps, "variant" | "checked"> & Pick<TrackProps, "type">) | undefined) => string;
 export declare const thumbClassNames: (props?: Pick<SwitchProps, "variant" | "shape" | "checked"> | undefined) => string;

package/dist/switch/style/index.js

@@ -1 +1 @@
-import{cva as e}from"@nild/shared";import{DISABLED_CLS as r}from"../../_shared/style/index.js";const a=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],r],{variants:{variant:{solid:"",outlined:["outline-solid","outline","outline-primary"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}}}),t=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"]],{variants:{checked:{true:["ms-0","me-0"],false:["-ms-[100%]","me-[100%]"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),i=e(["h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"],["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]"]],{variants:{checked:{true:["ms-[100%]","-me-[100%]"],false:["ms-0","me-0"]}},compoundVariants:[{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),s=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-contrast","top-0"],outlined:["bg-primary","top-0","group-enabled:group-hover:bg-primary-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as checkedClassNames,a as switchClassNames,s as thumbClassNames,i as uncheckedClassNames};
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const t=e(["nd-switch","group","h-[var(--nd-switch-height)]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],a],{variants:{variant:{solid:"",outlined:["outline-solid","outline","outline-primary"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}}}),r=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-contrast"]],{variants:{type:{checked:["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"],unchecked:["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]","-mt-[var(--nd-switch-height)]"]}},compoundVariants:[{type:"checked",checked:!0,className:["ms-0","me-0"]},{type:"checked",checked:!1,className:["-ms-[100%]","me-[100%]"]},{type:"unchecked",checked:!0,className:["ms-[100%]","-me-[100%]"]},{type:"unchecked",checked:!1,className:["ms-0","me-0"]},{variant:"solid",checked:!0,className:["bg-primary","group-enabled:group-hover:bg-primary-hover"]},{variant:"solid",checked:!1,className:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},{variant:"outlined",className:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}]}),s=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-contrast","top-0"],outlined:["bg-primary","top-0","group-enabled:group-hover:bg-primary-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as switchClassNames,s as thumbClassNames,r as trackClassNames};

package/dist/transition/Transition.d.ts

@@ -1,9 +1,5 @@
-import { FC, ReactNode } from 'react';
-export interface TransitionProps {
-    className?: string;
-    children?: ReactNode;
-    visible?: boolean;
-}
+import { FC } from 'react';
+import { TransitionProps } from './interfaces';
 /**
  * @category Components
  */

package/dist/transition/Transition.js

@@ -1 +1 @@
-import{useEffectCallback as o}from"@nild/hooks";import{cnMerge as E}from"@nild/shared";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};
+import{useEffectCallback as o}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{transitionClassNames as G}from"./style/index.js";const I=({className:U,children:f,visible:i=!0})=>{const a=X.toArray(f).find(N=>M(N)),c=a?i?r.ENTERED:r.EXITED:r.UNMOUNTED,[t,E]=O(c),e=m(),n=m(a);n.current=t===r.UNMOUNTED?a:a??n.current;const s=o(N=>{u();let T=!0;const l=()=>{T&&(T=!1,e.current=void 0,N?.())};l.cancel=()=>{T=!1},e.current=l}),d=o(()=>{e.current&&(e.current(),e.current=void 0)}),u=o(()=>{e.current&&(e.current.cancel(),e.current=void 0)}),p=o(()=>{c===r.UNMOUNTED&&t===r.EXITED&&E(r.UNMOUNTED)});return D(()=>{d()},[t]),D(()=>{switch(c){case r.ENTERED:t!==r.ENTERING&&t!==r.ENTERED&&(t===r.UNMOUNTED?E(r.EXITED):(u(),E(r.ENTERING),s(()=>{s(()=>{E(r.ENTERED)}),e.current&&setTimeout(e.current,0)})));break;case r.EXITED:(t===r.ENTERING||t===r.ENTERED)&&(u(),E(r.EXITING),s(()=>{s(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break;case r.UNMOUNTED:default:t!==r.EXITED&&t!==r.UNMOUNTED&&(u(),E(r.EXITING),s(()=>{s(()=>{E(r.EXITED)}),e.current&&setTimeout(e.current,0)}));break}},[i,c,t]),n.current?b(n.current,{...n.current.props,className:R(n.current.props.className,G({status:t}),U),onTransitionEnd:p}):null};I.displayName="Transition";export{I as default};

package/dist/transition/index.d.ts

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

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare enum Status {
+    UNMOUNTED = "unmounted",
+    ENTERING = "entering",
+    ENTERED = "entered",
+    EXITING = "exiting",
+    EXITED = "exited"
+}
+export interface TransitionProps {
+    className?: string;
+    children?: ReactNode;
+    visible?: boolean;
+}

package/dist/transition/interfaces/index.js

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

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

@@ -0,0 +1,4 @@
+import { Status } from '../interfaces';
+export declare const transitionClassNames: (props?: {
+    status: Status;
+} | undefined) => string;

package/dist/transition/style/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,9 +31,9 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "@nild/shared": "0.0.9",
-    "@nild/hooks": "0.0.11",
-    "@nild/icons": "0.0.10"
+    "@nild/shared": "0.0.10",
+    "@nild/hooks": "0.0.12",
+    "@nild/icons": "0.0.11"
   },
   "scripts": {
     "build": "vite build --mode PROD",