@nild/components 0.0.24 → 0.0.25

package/dist/checkbox/Checkbox.js

@@ -1 +1 @@
-import{jsx as s}from"react/jsx-runtime";import{useControllableState as w,useEffectCallback as E}from"@nild/hooks";import{isString as u,cnMerge as M}from"@nild/shared";import{forwardRef as S,Children as V,isValidElement as j}from"react";import{useGroupContext as G,CheckboxProvider as P}from"./contexts/index.js";import i from"./Indicator.js";import r from"./Label.js";import{checkboxClassNames as I}from"./style/index.js";const h=S((f,p)=>{const t=[],l=new Map,e=G(),{className:v,children:o,variant:C=e?.variant??"solid",size:n=e?.size??"medium",disabled:c=e?.disabled??!1,checked:b,defaultChecked:k,value:d,onChange:m,...x}=f,[z,N]=w(e?e.value.includes(d):b,k??!1),g=E(()=>{c||N(a=>(e?e.setValue(a?e.value.filter(y=>y!==d):e.value.concat(d)):m?.(!a),!a))});return V.forEach(o,a=>{j(a)?a.type===i?(l.delete(i),l.set(i,a)):a.type===r&&(l.delete(r),l.set(r,a)):u(a)&&(l.has(r)||l.set(r,s(r,{children:a})))}),t.push(...l.values()),l.has(i)||t.unshift(s(i,{})),!l.has(r)&&u(o)&&t.push(s(r,{children:o})),s(P,{value:{variant:C,size:n,checked:z,handleChange:g},children:s("label",{...x,className:M(I({size:n,disabled:c}),v),ref:p,children:t})})});h.displayName="Checkbox";export{h as default};
+import{jsx as r}from"react/jsx-runtime";import{useControllableState as g,useEffectCallback as w}from"@nild/hooks";import{isString as u,cnMerge as M}from"@nild/shared";import{forwardRef as S,Children as V,isValidElement as j,cloneElement as G}from"react";import{useGroupContext as P,CheckboxProvider as R}from"./contexts/index.js";import i from"./Indicator.js";import s from"./Label.js";import{checkboxClassNames as I}from"./style/index.js";const h=S((p,f)=>{const t=[],l=new Map,a=P(),{className:v,children:o,variant:C=a?.variant??"solid",size:n=a?.size??"medium",disabled:c=a?.disabled??!1,checked:b,defaultChecked:k,value:d,onChange:m,...x}=p,[y,N]=g(a?a.value.includes(d):b,k??!1),z=w(()=>{c||N(e=>(a?a.setValue(e?a.value.filter(E=>E!==d):a.value.concat(d)):m?.(!e),!e))});return V.forEach(o,e=>{j(e)?e.type===i?(l.delete(i),l.set(i,e)):e.type===s&&(l.delete(s),l.set(s,e)):u(e)&&(l.has(s)||l.set(s,r(s,{children:e})))}),t.push(...l.values()),l.has(i)||t.unshift(r(i,{})),!l.has(s)&&u(o)&&t.push(r(s,{children:o})),r(R,{value:{variant:C,size:n,checked:y,setChecked:z},children:r("label",{...x,className:M(I({size:n,disabled:c}),v),ref:f,children:t.map(e=>G(e,{key:e.type.displayName,...e.props}))})})});h.displayName="Checkbox";export{h as default};

package/dist/checkbox/Indicator.js

@@ -1 +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};
+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:c,...r},t)=>{const{variant:i,size:m,checked:s,setChecked:n}=k(),d=c??(l=>a("div",{className:I({variant:i,checked:l}),children:a(p,{className:b(),component:h})}));return f("div",{...r,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/contexts/index.d.ts

@@ -1,8 +1,8 @@
 import { CheckboxProps, GroupProps } from '../interfaces';
 declare const CheckboxProvider: import('react').Provider<Pick<CheckboxProps, "variant" | "size" | "checked"> & {
-    handleChange?: () => void;
+    setChecked?: () => void;
 }>, useCheckboxContext: () => Pick<CheckboxProps, "variant" | "size" | "checked"> & {
-    handleChange?: () => void;
+    setChecked?: () => void;
 };
 declare const GroupProvider: import('react').Provider<(Pick<GroupProps<unknown>, "variant" | "size" | "disabled"> & {
     value: any[];

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
 import { default as Divider } from './divider';
 import { default as Popover } from './popover';
+import { default as Radio } from './radio';
 import { default as Switch } from './switch';
 import { default as Transition } from './transition';
 import { default as Typography } from './typography';
-export { Button, Checkbox, Divider, Popover, Switch, Transition, Typography };
+export { Button, Checkbox, Divider, Popover, Radio, Switch, Transition, Typography };

package/dist/index.js

@@ -1 +1 @@
-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};
+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"./radio/index.js";import{default as f}from"./switch/index.js";import{default as m}from"./transition/Transition.js";import{default as i}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,r as Divider,t as Popover,s as Radio,f as Switch,m as Transition,i as Typography};

package/dist/radio/Group.d.ts

@@ -0,0 +1,3 @@
+import { GroupProps } from './interfaces';
+declare const Group: <T>(props: GroupProps<T> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement | null;
+export default Group;

package/dist/radio/Group.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useControllableState as b,useEffectCallback as N}from"@nild/hooks";import{forwardRefWithGenerics as C,cnMerge as G}from"@nild/shared";import{GroupProvider as g}from"./contexts/index.js";import{groupClassNames as x}from"./style/index.js";const o=C(({className:s,children:i,direction:l="horizontal",variant:t="solid",size:d="medium",disabled:n=!1,value:m,defaultValue:u,onChange:a,...c},f)=>{const[p,v]=b(m,u),h=N(e=>{v(()=>(a?.(e),e))});return r(g,{value:{variant:t,size:d,disabled:n,value:p,setValue:h},children:r("div",{...c,className:G(x({direction:l}),s),ref:f,children:i})})});o.displayName="Radio.Group";export{o as default};

package/dist/radio/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/radio/Indicator.js

@@ -0,0 +1 @@
+import{jsxs as c,jsx as a}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared";import{forwardRef as h}from"react";import{useRadioContext as N}from"./contexts/index.js";import{indicatorInputClassNames as C,indicatorClassNames as u,defaultIndicatorOuterCircleClassNames as x,defaultIndicatorInnerCircleClassNames as v}from"./style/index.js";const i=h(({className:t,children:o,...n},l)=>{const{variant:e,size:d,checked:s,setChecked:m}=N(),f=o??(r=>c("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[a("circle",{cx:"10",cy:"10",r:"9.5",className:x({variant:e,checked:r})}),a("circle",{cx:"10",cy:"10",className:v({variant:e,checked:r})})]}));return c("div",{...n,className:p(u({size:d}),t),ref:l,children:[f(!!s),a("input",{type:"radio",className:C(),checked:s,onChange:m})]})});i.displayName="Radio.Indicator";export{i as default};

package/dist/radio/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/radio/Label.js

@@ -0,0 +1 @@
+import{jsx as c}from"react/jsx-runtime";import{isFunction as l,cnMerge as n}from"@nild/shared";import{forwardRef as f}from"react";import{useRadioContext as d}from"./contexts/index.js";import{labelClassNames as p}from"./style/index.js";const a=f(({className:e,children:s,...r},o)=>{const{size:i,checked:m}=d(),t=l(s)?s(!!m):s;return c("span",{...r,className:n(p({size:i}),e),ref:o,children:t})});a.displayName="Radio.Label";export{a as default};

package/dist/radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { RadioProps } from './interfaces';
+declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLLabelElement>>;
+export default Radio;

package/dist/radio/Radio.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{useControllableState as R,useEffectCallback as g}from"@nild/hooks";import{isString as c,cnMerge as w}from"@nild/shared";import{forwardRef as x,Children as M,isValidElement as S,cloneElement as V}from"react";import{useGroupContext as j,RadioProvider as G}from"./contexts/index.js";import r from"./Indicator.js";import l from"./Label.js";import{radioClassNames as P}from"./style/index.js";const u=x((h,f)=>{const t=[],s=new Map,a=j(),{className:v,children:o,variant:C=a?.variant??"solid",size:d=a?.size??"medium",disabled:n=a?.disabled??!1,checked:b,defaultChecked:k,value:m,onChange:p,...y}=h,[N,z]=R(a?a.value===m:b,k??!1),E=g(()=>{n||z(e=>e||(a?a.setValue(m):p?.(!e),!e))});return M.forEach(o,e=>{S(e)?e.type===r?(s.delete(r),s.set(r,e)):e.type===l&&(s.delete(l),s.set(l,e)):c(e)&&(s.has(l)||s.set(l,i(l,{children:e})))}),t.push(...s.values()),s.has(r)||t.unshift(i(r,{})),!s.has(l)&&c(o)&&t.push(i(l,{children:o})),i(G,{value:{variant:C,size:d,checked:N,setChecked:E},children:i("label",{...y,className:w(P({size:d,disabled:n}),v),ref:f,children:t.map(e=>V(e,{key:e.type.displayName,...e.props}))})})});u.displayName="Radio";export{u as default};

package/dist/radio/contexts/index.d.ts

@@ -0,0 +1,14 @@
+import { RadioProps, GroupProps } from '../interfaces';
+declare const RadioProvider: import('react').Provider<Pick<RadioProps, "variant" | "size" | "checked"> & {
+    setChecked?: () => void;
+}>, useRadioContext: () => Pick<RadioProps, "variant" | "size" | "checked"> & {
+    setChecked?: () => void;
+};
+declare const GroupProvider: import('react').Provider<(Pick<GroupProps<unknown>, "variant" | "size" | "disabled"> & {
+    value: any;
+    setValue: (value: any) => void;
+}) | undefined>, useGroupContext: () => (Pick<GroupProps<unknown>, "variant" | "size" | "disabled"> & {
+    value: any;
+    setValue: (value: any) => void;
+}) | undefined;
+export { RadioProvider, GroupProvider, useRadioContext, useGroupContext };

package/dist/radio/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as e}from"@nild/shared";const[o,t]=e({defaultValue:{}}),[a,r]=e({defaultValue:void 0});export{a as GroupProvider,o as RadioProvider,r as useGroupContext,t as useRadioContext};

package/dist/radio/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @category Components
+ */
+declare const Radio: import('react').ForwardRefExoticComponent<import('./interfaces').RadioProps & 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>>;
+    Group: <T>(props: import('./interfaces').GroupProps<T> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement | null;
+};
+export type * from './interfaces';
+export default Radio;

package/dist/radio/index.js

@@ -0,0 +1 @@
+import o from"./Group.js";import r from"./Indicator.js";import t from"./Label.js";import m from"./Radio.js";const i=Object.assign(m,{Indicator:r,Label:t,Group:o});export{i as default};

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

@@ -0,0 +1,8 @@
+import { RadioProps, GroupProps } from '../interfaces';
+export declare const radioClassNames: (props?: Pick<RadioProps, "size" | "disabled"> | undefined) => string;
+export declare const indicatorClassNames: (props?: Pick<RadioProps, "size"> | undefined) => string;
+export declare const indicatorInputClassNames: (props?: object | undefined) => string;
+export declare const defaultIndicatorOuterCircleClassNames: (props?: Pick<RadioProps, "variant" | "checked"> | undefined) => string;
+export declare const defaultIndicatorInnerCircleClassNames: (props?: Pick<RadioProps, "variant" | "checked"> | undefined) => string;
+export declare const labelClassNames: (props?: Pick<RadioProps, "size"> | undefined) => string;
+export declare const groupClassNames: (props?: Pick<GroupProps<unknown>, "direction"> | undefined) => string;

package/dist/radio/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const r=a(["nd-radio","group",["flex","items-center"],"cursor-pointer",e],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),s=a(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5",medium:"size-4",large:"size-4.5"}}}),l=a([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),i=a(["stroke-primary","stroke-1","transition-[stroke,fill]"],{compoundVariants:[{checked:!0,variant:"solid",className:["fill-primary","group-enabled:group-hover:fill-primary-hover"]},{checked:!0,variant:"outlined",className:["fill-transparent","group-enabled:group-hover:fill-tertiary-hover"]},{checked:!1,className:["fill-transparent","group-enabled:group-hover:fill-tertiary-hover"]}]}),t=a(["transition-[fill]"],{variants:{variant:{solid:"r-4.5",outlined:"r-5.5"}},compoundVariants:[{checked:!0,variant:"solid",className:["fill-contrast"]},{checked:!0,variant:"outlined",className:["fill-primary"]},{checked:!1,className:["fill-transparent"]}]}),o=a(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=a(["nd-checkbox-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{t as defaultIndicatorInnerCircleClassNames,i as defaultIndicatorOuterCircleClassNames,n as groupClassNames,s as indicatorClassNames,l as indicatorInputClassNames,o as labelClassNames,r as radioClassNames};

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.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;}}
+@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;}@utility r-*{r: --value(number);}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,8 +31,8 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "@nild/hooks": "0.0.13",
     "@nild/shared": "0.0.11",
+    "@nild/hooks": "0.0.13",
     "@nild/icons": "0.0.12"
   },
   "scripts": {