@nild/components 0.0.20 → 0.0.22

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/index.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/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/typography/Link.d.ts

@@ -1,7 +1,3 @@
-import { AnchorHTMLAttributes } from 'react';
-export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    disabled?: boolean;
-    underlined?: boolean;
-}
+import { LinkProps } from './interfaces';
 declare const Link: import('react').ForwardRefExoticComponent<LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/dist/typography/Link.js

@@ -1 +1 @@
-import{jsx as l}from"react/jsx-runtime";import{cnMerge as s}from"@nild/shared";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="#",...d},o)=>l("a",{...d,href:e?void 0:t,className:s("nd-link",["font-nd","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 m}from"react/jsx-runtime";import{cnMerge as n}from"@nild/shared";import{forwardRef as f}from"react";import{linkClassNames as p}from"./style/index.js";const a=f(({className:r,children:s,underlined:i=!1,disabled:e=!1,href:d="#",...l},o)=>m("a",{...l,href:e?void 0:d,className:n(p({underlined:i,disabled:e}),r),ref:o,children:s}));a.displayName="Typography.Link";export{a as default};

package/dist/typography/Paragraph.d.ts

@@ -1,4 +1,3 @@
-import { HTMLAttributes } from 'react';
-export type ParagraphProps = HTMLAttributes<HTMLParagraphElement>;
+import { ParagraphProps } from './interfaces';
 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";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 o}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared";import{forwardRef as f}from"react";import{paragraphClassNames as t}from"./style/index.js";const a=f(({className:r,children:s,...e},m)=>o("p",{...e,className:p(t(),r),ref:m,children:s}));a.displayName="Typography.Paragraph";export{a as default};

package/dist/typography/Text.d.ts

@@ -1,14 +1,3 @@
-import { HTMLAttributes } from 'react';
-export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
-    disabled?: boolean;
-    secondary?: boolean;
-    strong?: boolean;
-    deleted?: boolean;
-    underlined?: boolean;
-    italic?: boolean;
-    marked?: boolean;
-    coded?: boolean;
-    keyboarded?: boolean;
-}
+import { TextProps } from './interfaces';
 declare const Text: import('react').ForwardRefExoticComponent<TextProps & import('react').RefAttributes<HTMLSpanElement>>;
 export default Text;

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";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-nd 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 s}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared";import{forwardRef as f}from"react";import{textTagClassNames as x,textClassNames as N}from"./style/index.js";const e=f(({className:r,children:t,variants:o=[],secondary:d=!1,disabled:m=!1,...n},i)=>{const c=[...new Set(o)].reduce((l,a)=>s(a,{className:x({variant:a}),children:l}),t);return s("span",{...n,className:p(N({secondary:d,disabled:m}),r),ref:i,children:c})});e.displayName="Typography.Text";export{e as default};

package/dist/typography/Title.d.ts

@@ -1,7 +1,3 @@
-import { HTMLAttributes } from 'react';
-import { HeadingLevel } from './style';
-export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
-    level?: HeadingLevel;
-}
+import { TitleProps } from './interfaces';
 declare const Title: import('react').ForwardRefExoticComponent<TitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
 export default Title;

package/dist/typography/Title.js

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

package/dist/typography/Typography.d.ts

@@ -1,16 +1,3 @@
-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 type TypographyProps = HTMLAttributes<HTMLElement>;
-/**
- * @category Components
- */
-declare const Typography: ForwardRefExoticComponent<TypographyProps> & {
-    Link: typeof Link;
-    Paragraph: typeof Paragraph;
-    Text: typeof Text;
-    Title: typeof Title;
-};
+import { TypographyProps } from './interfaces';
+declare const Typography: import('react').ForwardRefExoticComponent<TypographyProps & import('react').RefAttributes<HTMLElement>>;
 export default Typography;

package/dist/typography/Typography.js

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

package/dist/typography/index.d.ts

@@ -1,8 +1,11 @@
-import { LinkProps } from './Link';
-import { ParagraphProps } from './Paragraph';
-import { HeadingLevel } from './style';
-import { TextProps } from './Text';
-import { TitleProps } from './Title';
-import { default as Typography, TypographyProps } from './Typography';
-export type { TypographyProps, LinkProps, ParagraphProps, TextProps, TitleProps, HeadingLevel };
+/**
+ * @category Components
+ */
+declare const Typography: import('react').ForwardRefExoticComponent<import('./interfaces').TypographyProps & import('react').RefAttributes<HTMLElement>> & {
+    Link: import('react').ForwardRefExoticComponent<import('./interfaces').LinkProps & import('react').RefAttributes<HTMLAnchorElement>>;
+    Paragraph: import('react').ForwardRefExoticComponent<import('./interfaces').ParagraphProps & import('react').RefAttributes<HTMLParagraphElement>>;
+    Text: import('react').ForwardRefExoticComponent<import('./interfaces').TextProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Title: import('react').ForwardRefExoticComponent<import('./interfaces').TitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+};
+export type * from './interfaces';
 export default Typography;

package/dist/typography/index.js

@@ -1 +1 @@
-import o from"./Typography.js";export{o as default};
+import r from"./Link.js";import o from"./Paragraph.js";import t from"./Text.js";import m from"./Title.js";import i from"./Typography.js";const p=Object.assign(i,{Link:r,Paragraph:o,Text:t,Title:m});export{p as default};

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

@@ -1,2 +1,9 @@
-export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
-export declare const HEADING_LEVEL_CLS_MAP: Record<HeadingLevel, string[]>;
+import { LinkProps, ParagraphProps, TextProps, TextVariant, TitleProps, TypographyProps } from '../interfaces';
+export declare const linkClassNames: (props?: LinkProps | undefined) => string;
+export declare const paragraphClassNames: (props?: ParagraphProps | undefined) => string;
+export declare const textClassNames: (props?: TextProps | undefined) => string;
+export declare const textTagClassNames: (props?: {
+    variant: TextVariant;
+} | undefined) => string;
+export declare const titleClassNames: (props?: TitleProps | undefined) => string;
+export declare const typographyClassNames: (props?: TypographyProps | undefined) => string;

package/dist/typography/style/index.js

@@ -1 +1 @@
-const t={1:["text-6xl"],2:["text-5xl"],3:["text-4xl"],4:["text-3xl"],5:["text-2xl"],6:["text-lg"]};export{t as HEADING_LEVEL_CLS_MAP};
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-link",["font-nd","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],t],{variants:{disabled:{true:"disabled",false:""},underlined:{true:"underline",false:"no-underline"}}}),r=e(["nd-paragraph",["font-nd","text-primary","text-[length:inherit]"],["mt-0","mb-[1em]"]]),s=e(["nd-text",["font-nd","text-[length:inherit]"],t],{variants:{secondary:{true:"text-secondary",false:"text-primary"},disabled:{true:"disabled",false:""}}}),n=e("",{variants:{variant:{strong:"",del:"",u:["underline"],i:"",mark:["bg-primary","text-contrast"],code:[["ps-1.5","pe-1.5"],["bg-secondary","text-sm","rounded-sm"],["border","border-solid","border-secondary"]],kbd:[["ps-1.5","pe-1.5"],["text-sm","rounded-sm"],["border","border-b-2","border-solid","border-secondary"]]}}}),d=e(["nd-title",["font-nd","font-semibold","text-primary"],["mt-[1em]","mb-[0.5em]"]],{variants:{level:{1:["text-6xl"],2:["text-5xl"],3:["text-4xl"],4:["text-3xl"],5:["text-2xl"],6:["text-lg"]}}}),l=e(["nd-typography",["font-nd","text-md"]]);export{a as linkClassNames,r as paragraphClassNames,s as textClassNames,n as textTagClassNames,d as titleClassNames,l as typographyClassNames};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.20",
+  "version": "0.0.22",
   "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/icons": "0.0.10",
-    "@nild/hooks": "0.0.11"
+    "@nild/hooks": "0.0.12",
+    "@nild/icons": "0.0.11",
+    "@nild/shared": "0.0.10"
   },
   "scripts": {
     "build": "vite build --mode PROD",