@nild/components 0.0.14 → 0.0.16

package/dist/button/Button.d.ts

@@ -1,22 +1,10 @@
-import { ReactElement, ButtonHTMLAttributes, HTMLAttributes, RefAttributes, ForwardRefExoticComponent } from 'react';
-import { ButtonVariant, ButtonSize, ButtonShape, GroupDirection } from './style';
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    shape?: ButtonShape;
-    equal?: boolean;
-    disabled?: boolean;
-    block?: boolean;
-}
+import { RefAttributes, ForwardRefExoticComponent } from 'react';
+import { ButtonProps, ButtonGroupProps } from './interfaces';
 /**
  * @category Components
  */
 declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> & {
     Group: typeof Group;
 };
-export interface GroupProps extends HTMLAttributes<HTMLDivElement>, Pick<ButtonProps, 'variant' | 'size' | 'disabled'> {
-    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
-    direction?: GroupDirection;
-}
-declare const Group: ForwardRefExoticComponent<GroupProps & RefAttributes<HTMLDivElement>>;
+declare const Group: ForwardRefExoticComponent<ButtonGroupProps & RefAttributes<HTMLDivElement>>;
 export default Button;

package/dist/button/Button.js

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

package/dist/button/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Button, ButtonProps, GroupProps } from './Button';
-import { ButtonVariant, ButtonShape, ButtonSize, GroupDirection } from './style';
-export type { ButtonProps, ButtonVariant, ButtonShape, ButtonSize, GroupProps, GroupDirection };
+import { default as Button } from './Button';
+export type * from './interfaces';
 export default Button;

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

@@ -1,11 +1,9 @@
-export type ButtonVariant = 'solid' | 'outlined' | 'filled' | 'text';
-export declare const VARIANT_CLS_MAP: Record<ButtonVariant, string[]>;
-export type ButtonShape = 'round' | 'square';
-export declare const SHAPE_CLS_MAP: Record<ButtonShape, string[]>;
-export type ButtonSize = 'small' | 'medium' | 'large';
-export declare const SIZE_CLS_MAP: Record<ButtonSize, Record<'true' | 'false', string[]>>;
-export declare const EQUAL_CLS_MAP: Record<ButtonSize, string[]>;
-export type GroupDirection = 'horizontal' | 'vertical';
-export declare const GROUP_FIRST_CLS_MAP: Record<GroupDirection, string[]>;
-export declare const GROUP_LAST_CLS_MAP: Record<GroupDirection, string[]>;
-export declare const GROUP_DIVIDER_CLS_MAP: Record<GroupDirection, Record<ButtonVariant, string[]>>;
+import { ButtonProps, ButtonGroupProps } 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 & {
+    first?: boolean;
+    last?: boolean;
+}) | undefined) => string;

package/dist/button/style/index.js

@@ -1 +1 @@
-const e={solid:["bg-primary","text-contrast","enabled:hover:bg-primary-hover","enabled:active:bg-primary-active"],outlined:["bg-transparent","border-solid","border","border-primary","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"],filled:["bg-tertiary","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"],text:["bg-transparent","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"]},r={round:["rounded-full"],square:["rounded-md"]},t={small:{true:["px-2","text-sm","h-6"],false:["px-2","text-sm","py-1"]},medium:{true:["px-4","text-md","h-8"],false:["px-4","text-md","py-1.5"]},large:{true:["px-6","text-lg","h-10"],false:["px-6","text-lg","py-2"]}},o={small:["w-6 h-6","p-1","flex justify-center items-center"],medium:["w-8 h-8","p-1.5","flex justify-center items-center"],large:["w-10 h-10","p-2","flex justify-center items-center"]},d={horizontal:["rounded-r-none"],vertical:["rounded-b-none"]},a={horizontal:["rounded-l-none"],vertical:["rounded-t-none"]},i={horizontal:{solid:["border-solid","border-r","border-r-primary-hover"],outlined:[],filled:["border-solid","border-r","border-r-tertiary-hover"],text:["border-solid","border-r","border-r-tertiary-hover"]},vertical:{solid:["border-solid","border-b","border-b-primary-hover"],outlined:[],filled:["border-solid","border-b","border-b-tertiary-hover"],text:["border-solid","border-b","border-b-tertiary-hover"]}};export{o as EQUAL_CLS_MAP,i as GROUP_DIVIDER_CLS_MAP,d as GROUP_FIRST_CLS_MAP,a as GROUP_LAST_CLS_MAP,r as SHAPE_CLS_MAP,t as SIZE_CLS_MAP,e as VARIANT_CLS_MAP};
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as r}from"../../_shared/style/index.js";const a=e(["nd-button",["font-nd","cursor-pointer","transition-colors"],r],{variants:{variant:{solid:["bg-primary","text-contrast","enabled:hover:bg-primary-hover","enabled:active:bg-primary-active"],outlined:["bg-transparent","border-solid","border","border-primary","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"],filled:["bg-tertiary","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"],text:["bg-transparent","text-primary","enabled:hover:bg-tertiary-hover","enabled:active:bg-tertiary-active"]},shape:{round:["rounded-full"],square:["rounded-md"]},size:{small:["px-2","text-sm"],medium:["px-4","text-md"],large:["px-6","text-lg"]},plain:{true:["whitespace-nowrap","truncate"],false:""},block:{true:"w-full",false:""},disabled:{true:"disabled",false:""},equal:{true:["flex","justify-center","items-center"],false:""}},compoundVariants:[{size:"small",plain:!1,className:["py-1"]},{size:"small",plain:!0,className:["h-6"]},{size:"small",equal:!0,className:["w-6 h-6","p-1"]},{size:"medium",plain:!1,className:["py-1.5"]},{size:"medium",plain:!0,className:["h-8"]},{size:"medium",equal:!0,className:["w-8 h-8","p-1.5"]},{size:"large",plain:!1,className:["py-2"]},{size:"large",plain:!0,className:["h-10"]},{size:"large",equal:!0,className:["w-10 h-10","p-2"]}]}),t=e(["nd-button-group",["flex"]],{variants:{direction:{horizontal:"",vertical:"flex-col"}}}),i=e("",{compoundVariants:[{first:!0,direction:"horizontal",className:"rounded-r-none"},{first:!0,direction:"vertical",className:"rounded-b-none"},{last:!0,direction:"horizontal",className:"rounded-l-none"},{last:!0,direction:"vertical",className:"rounded-t-none"},{first:!1,last:!1,className:"rounded-none"},{first:!1,direction:"horizontal",className:"border-l-0"},{first:!1,direction:"vertical",className:"border-t-0"},{last:!1,direction:"horizontal",variant:"solid",className:["border-solid","border-r","border-r-primary-hover"]},{last:!1,direction:"horizontal",variant:["filled","text"],className:["border-solid","border-r","border-r-tertiary-hover"]},{last:!1,direction:"vertical",variant:"solid",className:["border-solid","border-b","border-b-primary-hover"]},{last:!1,direction:"vertical",variant:["filled","text"],className:["border-solid","border-b","border-b-tertiary-hover"]}]});export{a as buttonClassNames,i as groupButtonClassNames,t as groupClassNames};

package/dist/checkbox/Checkbox.d.ts

@@ -1,16 +1,5 @@
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes, ChangeEventHandler } from 'react';
-import { CheckboxVariant, CheckboxSize } from './style';
-export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultValue'> {
-    variant?: CheckboxVariant;
-    size?: CheckboxSize;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    value?: boolean;
-    defaultValue?: boolean;
-    indeterminate?: boolean;
-    disabled?: boolean;
-    onChange?: (checked: boolean) => void;
-}
+import { CheckboxProps, CheckboxSize } from './interfaces';
 /**
  * @category Components
  */
@@ -19,10 +8,13 @@ declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<
     Label: typeof Label;
 };
 interface IndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    size?: CheckboxSize;
     checked?: boolean;
     onChange?: ChangeEventHandler<HTMLInputElement>;
 }
 declare const Indicator: ForwardRefExoticComponent<IndicatorProps & RefAttributes<HTMLDivElement>>;
-type LabelProps = HTMLAttributes<HTMLSpanElement>;
+interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: CheckboxSize;
+}
 declare const Label: ForwardRefExoticComponent<LabelProps & RefAttributes<HTMLSpanElement>>;
 export default Checkbox;

package/dist/checkbox/Checkbox.js

@@ -1 +1 @@
-import{jsx as o,jsxs as w}from"react/jsx-runtime";import{useControllableState as M,useEffectCallback as D,usePureCallback as g}from"@nild/hooks";import{Icon as P}from"@nild/icons";import R from"@nild/icons/CheckSmall";import{cnJoin as m,isString as y,cnMerge as I}from"@nild/shared";import{forwardRef as b,Children as V,isValidElement as T,cloneElement as S}from"react";import{DISABLED_CLS as B}from"../_shared/style/index.js";import{SIZE_CLS_MAP as t,INDICATOR_VARIANT_CLS_MAP as J}from"./style/index.js";const p=b(({className:n,children:r,variant:i="solid",size:l="medium",checked:h,defaultChecked:u,value:v,defaultValue:L,indeterminate:O,disabled:N,onChange:C,...A},E)=>{const d=[],a=new Map,[f,_]=M(h??v,u??L??!1),k=D(()=>{N||_(e=>(C?.(!e),!e))}),j=g(()=>o(c,{className:t[l].indicator,checked:f,onChange:k,children:o("div",{className:m("flex items-center justify-center","w-full h-full rounded-sm border-solid border-1 border-primary","transition-[background-color,color]",J[i][`${f}`]),children:o(P,{className:"mr-[0.25px]",component:R})})})),x=g(e=>o(s,{className:t[l].label,children:e}));return V.forEach(r,e=>{T(e)?e.type===c?(a.delete(c),a.set(c,S(e,{...e.props,className:m(t[l].indicator,e.props.className),checked:f,onChange:k}))):e.type===s&&(a.delete(s),a.set(s,S(e,{...e.props,className:m(t[l].label,e.props.className)}))):y(e)&&(a.has(s)||a.set(s,x(e)))}),d.push(...a.values()),a.has(c)||d.unshift(j()),!a.has(s)&&y(r)&&d.push(x(r)),o("label",{...A,className:I("nd-checkbox","group","flex items-center","cursor-pointer",t[l].root,B,N&&"disabled",n),ref:E,children:d})}),c=b(({className:n,children:r,checked:i,onChange:l,...h},u)=>w("div",{...h,className:I("relative","flex items-center justify-center",n),ref:u,children:[r,o("input",{type:"checkbox",className:m("absolute inset-0 opacity-0","group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"),checked:i,onChange:l})]}));c.displayName="Checkbox.Indicator";const s=b(({children:n,...r},i)=>o("span",{...r,ref:i,children:n}));s.displayName="Checkbox.Label",p.Indicator=c,p.Label=s,p.displayName="Checkbox";export{p as default};
+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};

package/dist/checkbox/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Checkbox, CheckboxProps } from './Checkbox';
-import { CheckboxVariant, CheckboxSize } from './style';
-export type { CheckboxProps, CheckboxVariant, CheckboxSize };
+import { default as Checkbox } from './Checkbox';
+export type * from './interfaces';
 export default Checkbox;

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

@@ -1,4 +1,7 @@
-export type CheckboxVariant = 'solid' | 'outlined';
-export declare const INDICATOR_VARIANT_CLS_MAP: Record<CheckboxVariant, Record<'true' | 'false', string[]>>;
-export type CheckboxSize = 'small' | 'medium' | 'large';
-export declare const SIZE_CLS_MAP: Record<CheckboxSize, Record<'root' | 'indicator' | 'label', string>>;
+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 indicatorInputClassNames: (props?: object | undefined) => string;
+export declare const defaultIndicatorClassNames: (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 @@
-const r={solid:{true:["bg-primary text-contrast","group-enabled:group-hover:bg-primary-hover"],false:["bg-transparent text-transparent","group-enabled:group-hover:bg-tertiary-hover"]},outlined:{true:["bg-transparent text-primary","group-enabled:group-hover:bg-tertiary-hover"],false:["bg-transparent text-transparent","group-enabled:group-hover:bg-tertiary-hover"]}},t={small:{root:"gap-1.5",indicator:"w-3.5 h-3.5 text-sm",label:"text-sm"},medium:{root:"gap-2",indicator:"w-4 h-4 text-md",label:"text-md"},large:{root:"gap-2.5",indicator:"w-4.5 h-4.5 text-xl",label:"text-lg"}};export{r as INDICATOR_VARIANT_CLS_MAP,t as SIZE_CLS_MAP};
+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};

package/package.json

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