@nild/components 0.0.15 → 0.0.17

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

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

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/dist/divider/Divider.d.ts

@@ -1,10 +1,4 @@
-import { HTMLAttributes } from 'react';
-import { DividerVariant, DividerDirection, DividerAlign } from './style';
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: DividerVariant;
-    direction?: DividerDirection;
-    align?: DividerAlign;
-}
+import { DividerProps } from './interfaces';
 /**
  * @category Components
  */

package/dist/divider/Divider.js

@@ -1 +1 @@
-import{jsx as m}from"react/jsx-runtime";import{cnMerge as c,isEmpty as _}from"@nild/shared";import{forwardRef as p,Children as I}from"react";import{DIRECTION_WITH_CHILDREN_CLS_MAP as f,DIRECTION_WITHOUT_CHILDREN_CLS_MAP as C,ALIGN_CLS_MAP as N}from"./style/index.js";const s=p(({className:e,children:o,variant:a="solid",direction:r="horizontal",align:t="center",...n},d)=>{const l=r==="horizontal",i=I.toArray(o);return m("div",{...n,className:c("nd-divider","border-split","text-primary",l&&!_(i)?f[r][a].concat(N[t]):C[r][a],e),ref:d,children:i})});s.displayName="Divider";export{s as default};
+import{jsx as l}from"react/jsx-runtime";import{cnMerge as m,isEmpty as c}from"@nild/shared";import{forwardRef as f,Children as p}from"react";import{dividerClassNames as h}from"./style/index.js";const a=f(({className:i,children:e,variant:s="solid",direction:o="horizontal",align:t="center",...n},d)=>{const r=p.toArray(e);return l("div",{...n,className:m(h({emptyChildren:c(r),variant:s,direction:o,align:t}),i),ref:d,children:r})});a.displayName="Divider";export{a as default};

package/dist/divider/index.d.ts

@@ -1,4 +1,3 @@
-import { default as Divider, DividerProps } from './Divider';
-import { DividerVariant, DividerDirection, DividerAlign } from './style';
-export type { DividerProps, DividerVariant, DividerDirection, DividerAlign };
+import { default as Divider } from './Divider';
+export type * from './interfaces';
 export default Divider;

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

@@ -1,6 +1,4 @@
-export type DividerVariant = 'solid' | 'dashed' | 'dotted';
-export type DividerDirection = 'horizontal' | 'vertical';
-export declare const DIRECTION_WITHOUT_CHILDREN_CLS_MAP: Record<DividerDirection, Record<DividerVariant, string[]>>;
-export declare const DIRECTION_WITH_CHILDREN_CLS_MAP: Record<DividerDirection, Record<DividerVariant, string[]>>;
-export type DividerAlign = 'left' | 'center' | 'right';
-export declare const ALIGN_CLS_MAP: Record<DividerAlign, string[]>;
+import { DividerProps } from '../interfaces';
+export declare const dividerClassNames: (props?: (DividerProps & {
+    emptyChildren: boolean;
+}) | undefined) => string;

package/dist/divider/style/index.js

@@ -1 +1 @@
-const e=["w-full min-w-full","border-b","my-6"],r=["inline-block","h-[1em]","align-middle","border-r","ms-3 me-3"],d={horizontal:{solid:e.concat("border-solid"),dashed:e.concat("border-dashed"),dotted:e.concat("border-dotted")},vertical:{solid:r.concat("border-solid"),dashed:r.concat("border-dashed"),dotted:r.concat("border-dotted")}},o=["flex items-center text-center",'before:h-0 before:content-[""] before:border-b before:border-[color:inherit]','after:h-0 after:content-[""] after:border-b after:border-[color:inherit]',"my-6"],t={horizontal:{solid:o.concat(["before:border-solid","after:border-solid"]),dashed:o.concat(["before:border-dashed","after:border-dashed"]),dotted:o.concat(["before:border-dotted","after:border-dotted"])},vertical:{solid:[],dashed:[],dotted:[]}},a={left:["before:basis-1/12 before:grow-0","after:flex-1"],center:["before:flex-1","after:flex-1"],right:["before:flex-1","after:basis-1/12 after:grow-0"]};export{a as ALIGN_CLS_MAP,d as DIRECTION_WITHOUT_CHILDREN_CLS_MAP,t as DIRECTION_WITH_CHILDREN_CLS_MAP};
+import{cva as e}from"@nild/shared";const r=e(["nd-divider","border-split","text-primary"],{compoundVariants:[{emptyChildren:!0,direction:"horizontal",className:["w-full","min-w-full","border-b","my-6"]},{emptyChildren:!0,direction:"vertical",className:["inline-block","h-[1em]","align-middle","border-r","ms-3 me-3"]},{emptyChildren:!0,variant:"solid",className:["border-solid"]},{emptyChildren:!0,variant:"dashed",className:["border-dashed"]},{emptyChildren:!0,variant:"dotted",className:["border-dotted"]},{emptyChildren:!1,direction:"horizontal",className:["flex items-center text-center",'before:h-0 before:content-[""] before:border-b before:border-[color:inherit]','after:h-0 after:content-[""] after:border-b after:border-[color:inherit]',"my-6"]},{emptyChildren:!1,direction:"horizontal",variant:"solid",className:["before:border-solid","after:border-solid"]},{emptyChildren:!1,direction:"horizontal",variant:"dashed",className:["before:border-dashed","after:border-dashed"]},{emptyChildren:!1,direction:"horizontal",variant:"dotted",className:["before:border-dotted","after:border-dotted"]},{emptyChildren:!1,direction:"horizontal",align:"left",className:["before:basis-1/12","before:grow-0","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"center",className:["before:flex-1","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"right",className:["before:flex-1","after:basis-1/12","after:grow-0"]}]});export{r as dividerClassNames};

package/package.json

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