@nild/components 0.0.13 → 0.0.14

package/dist/_shared/hooks/usePopup.js

@@ -1 +1 @@
-import{jsx as E}from"react/jsx-runtime";import{computePosition as B,offset as F,shift as G,flip as H,arrow as J,autoUpdate as K}from"../../_lib/floating-ui.dom.js";import{useControllableState as N,usePureCallback as P,useEffectCallback as Q,useIsomorphicLayoutEffect as k}from"@nild/hooks";import{getDPR as W,roundByDPR as f}from"@nild/shared/utils";import{useRef as x,useState as p,useMemo as X,Children as Y,isValidElement as h,cloneElement as O}from"react";import"../../portal/Arrow.js";import S from"../../portal/Portal.js";import Z from"../../transition/Transition.js";import g from"../../trigger/Trigger.js";const _=(j,{placement:m="bottom",strategy:b="absolute",offset:w=12,open:I,defaultOpen:C=!1}={})=>{const t=x(null),a=x(null),c=x(null),[n,L]=p(C),[r,M]=N(I,C),[s,R]=p({x:0,y:0}),[l,T]=p({x:0,y:0}),[o,U]=p(m.split("-")[0]),V=X(()=>{const e=o==="top"||o==="bottom";return{[o==="left"?"right":"left"]:e?l.x:l.x-s.x,[o==="top"?"bottom":"top"]:e?l.y-s.y:l.y}},[o,l,s]),$={top:"down",bottom:"up",left:"right",right:"left"}[o];let y,d,i;Y.forEach(j,e=>{h(e)&&e.type!==g&&e.type!==S&&(y=e),h(e)&&e.type===g&&(d=e),h(e)&&e.type===S&&(i=e)});const q=P(e=>{if(d)return O(d,{...e,ref:t});if(y)return E(g,{...e,ref:t,children:y})}),z=P(e=>{if(i)return E(Z,{visible:r,children:n&&O(i,{...i.props,...e,style:{transform:`translate(${s.x}px, ${s.y}px)`,...W()>=1.5&&{willChange:"transform"}},ref:a,arrow:{ref:c,style:V,orientation:$}})})}),v=Q(()=>{!t.current||!a.current||B(t.current,a.current,{placement:m,strategy:b,middleware:[F(w),G(),H(),c.current&&J({element:c.current})]}).then(({x:e,y:D,placement:A,middlewareData:{arrow:u}})=>{R({x:f(e),y:f(D)}),U(A.split("-")[0]),T({x:f(u?.x??e),y:f(u?.y??D)})})});return k(()=>{r&&!n?L(!0):r&&n&&v()},[r,n]),k(()=>{if(!(!t.current||!a.current||!r))return K(t.current,a.current,v)},[m,b,w,r]),[r,{setOpen:M,renderTrigger:q,renderPortal:z}]};export{_ as default};
+import{jsx as k}from"react/jsx-runtime";import{computePosition as H,offset as J,shift as K,flip as M,arrow as N,autoUpdate as Q}from"../../_lib/floating-ui.dom.js";import{useControllableState as W,usePureCallback as O,useEffectCallback as X,useIsomorphicLayoutEffect as S}from"@nild/hooks";import{getDPR as Y,roundByDPR as p}from"@nild/shared/utils";import{useRef as x,useState as u,Children as Z,isValidElement as h,cloneElement as $}from"react";import"../../portal/Arrow.js";import D from"../../portal/Portal.js";import q from"../../transition/Transition.js";import g from"../../trigger/Trigger.js";const _=(I,{placement:m="bottom",strategy:b="absolute",offset:w=12,open:L,defaultOpen:C=!1}={})=>{const t=x(null),o=x(null),c=x(null),[l,R]=u(C),[r,T]=W(L,C),[n,U]=u({x:0,y:0}),[s,V]=u({x:0,y:0}),[a,j]=u(m.split("-")[0]),E=a==="top"||a==="bottom",z={[a==="left"?"right":"left"]:E?s.x:s.x-n.x,[a==="top"?"bottom":"top"]:E?s.y-n.y:s.y},A={top:"down",bottom:"up",left:"right",right:"left"}[a];let y,d,i;Z.forEach(I,e=>{h(e)&&e.type!==g&&e.type!==D&&(y=e),h(e)&&e.type===g&&(d=e),h(e)&&e.type===D&&(i=e)});const B=O(e=>{if(d)return $(d,{...e,ref:t});if(y)return k(g,{...e,ref:t,children:y})}),F=O(e=>{if(i)return k(q,{visible:r,children:l&&$(i,{...i.props,...e,style:{transform:`translate(${n.x}px, ${n.y}px)`,...Y()>=1.5&&{willChange:"transform"}},ref:o,arrow:{ref:c,style:z,orientation:A}})})}),v=X(()=>{!t.current||!o.current||H(t.current,o.current,{placement:m,strategy:b,middleware:[J(w),K(),M(),c.current&&N({element:c.current})]}).then(({x:e,y:P,placement:G,middlewareData:{arrow:f}})=>{U({x:p(e),y:p(P)}),j(G.split("-")[0]),V({x:p(f?.x??e),y:p(f?.y??P)})})});return S(()=>{r&&!l?R(!0):r&&l&&v()},[r,l]),S(()=>{if(!(!t.current||!o.current||!r))return Q(t.current,o.current,v)},[m,b,w,r]),[r,{setOpen:T,renderTrigger:B,renderPortal:F}]};export{_ as default};

package/dist/checkbox/Checkbox.d.ts

@@ -1,6 +1,7 @@
 import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes, ChangeEventHandler } from 'react';
-import { CheckboxSize } from './style';
+import { CheckboxVariant, CheckboxSize } from './style';
 export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultValue'> {
+    variant?: CheckboxVariant;
     size?: CheckboxSize;
     checked?: boolean;
     defaultChecked?: boolean;

package/dist/checkbox/Checkbox.js

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

package/dist/checkbox/index.d.ts

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

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

@@ -1,6 +1,4 @@
+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<'wrapper' | 'indicator' | 'label', string>>;
-export declare const INDICATOR_CHECKED_CLS_MAP: {
-    readonly true: readonly ["bg-primary text-contrast", "group-enabled:group-hover:bg-primary-hover"];
-    readonly false: readonly ["bg-transparent text-transparent", "group-enabled:group-hover:bg-tertiary-hover"];
-};
+export declare const SIZE_CLS_MAP: Record<CheckboxSize, Record<'root' | 'indicator' | 'label', string>>;

package/dist/checkbox/style/index.js

@@ -1 +1 @@
-const r={small:{wrapper:"gap-1.5",indicator:"w-3.5 h-3.5 text-sm",label:"text-sm"},medium:{wrapper:"gap-2",indicator:"w-4 h-4 text-md",label:"text-md"},large:{wrapper:"gap-2.5",indicator:"w-4.5 h-4.5 text-lg",label:"text-lg"}},t={true:["bg-primary text-contrast","group-enabled:group-hover:bg-primary-hover"],false:["bg-transparent text-transparent","group-enabled:group-hover:bg-tertiary-hover"]};export{t as INDICATOR_CHECKED_CLS_MAP,r as SIZE_CLS_MAP};
+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};

package/dist/switch/style/index.js

@@ -1 +1 @@
-const r={solid:[""],outlined:["border-solid border border-primary"]},a={solid:{true:["bg-primary","group-enabled:group-hover:bg-primary-hover"],false:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},outlined:{true:["bg-transparent"],false:["bg-transparent"]}},e={solid:["bg-contrast","top-0"],outlined:["bg-primary","group-enabled:group-hover:bg-primary-hover","-top-[1px]"]},o={small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"},l={small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},p={round:["rounded-full"],square:["rounded-md"]};export{p as SHAPE_CLS_MAP,l as SIZE_CLS_MAP,o as SIZE_VAR_MAP,r as VARIANT_CLS_MAP,e as VARIANT_THUMB_CLS_MAP,a as VARIANT_TRACK_CLS_MAP};
+const r={solid:[""],outlined:["border-solid border border-primary"]},a={solid:{true:["bg-primary","group-enabled:group-hover:bg-primary-hover"],false:["bg-[--alpha(var(--color-primary)/40%)]","group-enabled:group-hover:bg-[--alpha(var(--color-primary)/50%)]"]},outlined:{true:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"],false:["bg-transparent","group-enabled:group-hover:bg-tertiary-hover"]}},e={solid:["bg-contrast","top-0"],outlined:["bg-primary","top-[50%] -translate-y-[50%]","group-enabled:group-hover:bg-primary-hover"]},o={small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"},l={small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},t={round:["rounded-full"],square:["rounded-md"]};export{t as SHAPE_CLS_MAP,l as SIZE_CLS_MAP,o as SIZE_VAR_MAP,r as VARIANT_CLS_MAP,e as VARIANT_THUMB_CLS_MAP,a as VARIANT_TRACK_CLS_MAP};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-color-primary-0: light-dark(#fafafa, #171717); --nd-color-primary-5: light-dark(#f7f7f7, #1e1e1e); --nd-color-primary-10: light-dark(#f4f4f4, #242424); --nd-color-primary-15: light-dark(#ededed, #2c2c2c); --nd-color-primary-20: light-dark(#e5e5e5, #333333); --nd-color-primary-30: light-dark(#cecece, #434343); --nd-color-primary-40: light-dark(#aeaeae, #575757); --nd-color-primary-50: light-dark(#888888, #888888); --nd-color-primary-60: light-dark(#626262, #b9b9b9); --nd-color-primary-70: light-dark(#424242, #cdcdcd); --nd-color-primary-80: light-dark(#2b2b2b, #dedede); --nd-color-primary-90: light-dark(#1d1d1d, #ececec); --nd-color-primary-100: light-dark(#171717, #fafafa); }@theme{ --color-primary: var(--nd-color-primary-80); --color-primary-hover: var(--nd-color-primary-70); --color-primary-active: var(--nd-color-primary-90); --color-secondary: var(--nd-color-primary-20); --color-secondary-hover: var(--nd-color-primary-30); --color-secondary-active: var(--nd-color-primary-40); --color-tertiary: var(--nd-color-primary-15); --color-tertiary-hover: var(--nd-color-primary-20); --color-tertiary-active: var(--nd-color-primary-30); --color-contrast: var(--nd-color-primary-0); --color-split: var(--nd-color-primary-20); --color-edge: var(--nd-color-primary-30); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --text-color-primary: var(--nd-color-primary-100); --text-color-secondary: var(--nd-color-primary-60); --text-color-link: var(--color-primary); --text-color-link-hover: var(--color-primary-hover); --text-color-link-active: var(--color-primary-active); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.25rem; --text-xl--line-height: 1.75rem; --text-2xl: 1.5rem; --text-2xl--line-height: 2rem; --text-3xl: 1.875rem; --text-3xl--line-height: 2.375rem; --text-4xl: 2.375rem; --text-4xl--line-height: 2.875rem; --text-5xl: 2.875rem; --text-5xl--line-height: 3.375rem; --radius-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; --font-nd: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --default-transition-duration: .2s; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
+@theme static{ --nd-color-primary-0: light-dark(#fafafa, #171717); --nd-color-primary-5: light-dark(#f7f7f7, #1e1e1e); --nd-color-primary-10: light-dark(#f4f4f4, #242424); --nd-color-primary-15: light-dark(#ededed, #2c2c2c); --nd-color-primary-20: light-dark(#e5e5e5, #333333); --nd-color-primary-30: light-dark(#cecece, #434343); --nd-color-primary-40: light-dark(#aeaeae, #575757); --nd-color-primary-50: light-dark(#888888, #888888); --nd-color-primary-60: light-dark(#626262, #b9b9b9); --nd-color-primary-70: light-dark(#424242, #cdcdcd); --nd-color-primary-80: light-dark(#2b2b2b, #dedede); --nd-color-primary-90: light-dark(#1d1d1d, #ececec); --nd-color-primary-100: light-dark(#171717, #fafafa); }@theme{ --color-primary: var(--nd-color-primary-80); --color-primary-hover: var(--nd-color-primary-70); --color-primary-active: var(--nd-color-primary-90); --color-secondary: var(--nd-color-primary-20); --color-secondary-hover: var(--nd-color-primary-30); --color-secondary-active: var(--nd-color-primary-40); --color-tertiary: var(--nd-color-primary-15); --color-tertiary-hover: var(--nd-color-primary-20); --color-tertiary-active: var(--nd-color-primary-30); --color-contrast: var(--nd-color-primary-0); --color-split: var(--nd-color-primary-20); --color-edge: var(--nd-color-primary-30); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --text-color-primary: var(--nd-color-primary-100); --text-color-secondary: var(--nd-color-primary-60); --text-color-link: var(--color-primary); --text-color-link-hover: var(--color-primary-hover); --text-color-link-active: var(--color-primary-active); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; --font-nd: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --default-transition-duration: .2s; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}

package/dist/typography/style/index.js

@@ -1 +1 @@
-const t={1:["text-5xl"],2:["text-4xl"],3:["text-3xl"],4:["text-2xl"],5:["text-xl"],6:["text-lg"]};export{t as HEADING_LEVEL_CLS_MAP};
+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};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.13",
+  "version": "0.0.14",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "@nild/shared": "0.0.7",
-    "@nild/icons": "0.0.8",
-    "@nild/hooks": "0.0.9"
+    "@nild/hooks": "0.0.9",
+    "@nild/icons": "0.0.8"
   },
   "scripts": {
     "build": "vite build --mode PROD",