@nild/components 0.0.14 → 0.0.15

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;
+}) => string;
+export declare const groupClassNames: (props: ButtonGroupProps) => string;
+export declare const groupButtonClassNames: (props: ButtonGroupProps & {
+    first?: boolean;
+    last?: boolean;
+}) => 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/package.json

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