@nild/components 0.0.6 → 0.0.7

package/dist/switch/Switch.d.ts

@@ -1,7 +1,8 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent, ButtonHTMLAttributes, HTMLAttributes, ReactNode, RefAttributes } from 'react';
 import { SwitchVariant, SwitchSize, SwitchShape } from './style';
 export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
     className?: string;
+    children?: ReactNode;
     variant?: SwitchVariant;
     size?: SwitchSize;
     shape?: SwitchShape;
@@ -10,10 +11,14 @@ export interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     value?: boolean;
     defaultValue?: boolean;
     disabled?: boolean;
-    checkedContent?: React.ReactNode;
-    uncheckedContent?: React.ReactNode;
-    thumbContent?: React.ReactNode;
     onChange?: (checked: boolean) => void;
 }
-declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLButtonElement>> & {
+    Checked: typeof Checked;
+    Unchecked: typeof Unchecked;
+    Thumb: typeof Thumb;
+};
+declare const Checked: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+declare const Unchecked: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
+declare const Thumb: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>;
 export default Switch;

package/dist/switch/Switch.js

@@ -1 +1 @@
-import{jsxs as N,jsx as s}from"react/jsx-runtime";import{useControllableState as M}from"@nild/hooks";import{cnMerge as a}from"@nild/shared/utils";import{forwardRef as y}from"react";import{DISABLED_CLS as L}from"../_shared/style/index.js";import{SIZE_VAR_MAP as P,VARIANT_TRACK_CLS_MAP as h,VARIANT_THUMB_CLS_MAP as I,SHAPE_CLS_MAP as o,VARIANT_CLS_MAP as R,SIZE_CLS_MAP as j}from"./style/index.js";const l=y(({className:d,variant:e="solid",size:c="medium",shape:i="round",checked:m,defaultChecked:f,value:u,defaultValue:g,disabled:v,checkedContent:p,uncheckedContent:w,thumbContent:A,onChange:n,style:C,..._},x)=>{const S={"--nd-switch-height":P[c]},[t,b]=M(m??u,f??g??!1),k=()=>{b(r=>(n?.(!r),!r))};return N("button",{..._,type:"button",role:"switch","aria-checked":t,disabled:v,className:a("nd-switch",["relative","inline-block","font-sans","overflow-hidden","cursor-pointer"],["h-[var(--nd-switch-height)]"],L,R[e],j[c],o[i],d),style:{...S,...C},ref:x,onClick:k,children:[s("div",{className:a("h-[var(--nd-switch-height)] flex justify-center items-center","text-center text-contrast","ps-[calc(var(--nd-switch-height)/3)] pe-[calc(var(--nd-switch-height)*1.1)]","transition-[margin-inline,background-color]",h[e][`${t}`].concat(t?["ms-0 me-0"]:["-ms-[100%] me-[100%]"])),children:p}),s("div",{className:a("h-[var(--nd-switch-height)] flex justify-center items-center","text-center text-contrast","-mt-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)*1.1)] pe-[calc(var(--nd-switch-height)/3)]","transition-[margin-inline,background-color]",h[e][`${t}`].concat(t?["ms-[100%] -me-[100%]"]:["ms-0 me-0"])),children:w}),s("div",{className:a("flex justify-center items-center","h-[var(--nd-switch-height)] absolute aspect-square scale-80","text-contrast transition-[left]",I[e],o[i],t?"left-[calc(100%-var(--nd-switch-height))]":"left-0"),children:A})]})});l.displayName="Switch";export{l as default};
+import{jsxs as j,jsx as r}from"react/jsx-runtime";import{useControllableState as U}from"@nild/hooks";import{cnJoin as n,cnMerge as d}from"@nild/shared/utils";import{forwardRef as p,Children as B,isValidElement as D,cloneElement as g}from"react";import{DISABLED_CLS as H}from"../_shared/style/index.js";import{VARIANT_TRACK_CLS_MAP as y,VARIANT_THUMB_CLS_MAP as Z,SHAPE_CLS_MAP as k,SIZE_VAR_MAP as $,VARIANT_CLS_MAP as q,SIZE_CLS_MAP as J}from"./style/index.js";const m=p(({className:t,children:c,variant:e="solid",size:a="medium",shape:w="round",checked:C,defaultChecked:b,value:x,defaultValue:M,disabled:E,onChange:v,style:I,...L},P)=>{let l,h,o;B.forEach(c,s=>{D(s)&&(s.type===f?l=s:s.type===u?h=s:s.type===N&&(o=s))});const R={"--nd-switch-height":$[a]},[i,T]=U(C??x,b??M??!1),A=n("h-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)/3)] pe-[calc(var(--nd-switch-height)*1.1)]",y[e][`${i}`].concat(i?"ms-0 me-0":"-ms-[100%] me-[100%]")),S=n("h-[var(--nd-switch-height)]","-mt-[var(--nd-switch-height)]","ps-[calc(var(--nd-switch-height)*1.1)] pe-[calc(var(--nd-switch-height)/3)]",y[e][`${i}`].concat(i?"ms-[100%] -me-[100%]":"ms-0 me-0")),_=n("h-[var(--nd-switch-height)]",Z[e],k[w],i?"left-[calc(100%-var(--nd-switch-height))]":"left-0"),V=()=>{T(s=>(v?.(!s),!s))};return j("button",{...L,type:"button",role:"switch","aria-checked":i,disabled:E,className:d("nd-switch","h-[var(--nd-switch-height)]","group","relative inline-block font-sans overflow-hidden cursor-pointer",H,q[e],J[a],k[w],t),style:{...R,...I},ref:P,onClick:V,children:[l?g(l,{...l.props,className:n(A,l.props.className)}):r(f,{className:A}),h?g(h,{...h.props,className:n(S,h.props.className)}):r(u,{className:S}),o?g(o,{...o.props,className:n(_,o.props.className)}):r(N,{className:_})]})});m.displayName="Switch";const f=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","text-center text-contrast","transition-[margin-inline,background-color]",t),ref:a,children:c}));f.displayName="Switch.Checked";const u=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","text-center text-contrast","transition-[margin-inline,background-color]",t),ref:a,children:c}));u.displayName="Switch.Unchecked";const N=p(({className:t,children:c,...e},a)=>r("div",{...e,className:d("flex justify-center items-center","absolute aspect-square scale-80","text-contrast transition-[left,background-color]",t),ref:a,children:c}));N.displayName="Switch.Thumb",m.Checked=f,m.Unchecked=u,m.Thumb=N;export{m as default};

package/dist/switch/style/index.js

@@ -1 +1 @@
-const a={solid:[""],outlined:["border-solid border border-primary"]},r={solid:{true:["bg-primary"],false:["bg-[--alpha(var(--color-primary)/45%)]"]},outlined:{true:["bg-transparent"],false:["bg-transparent"]}},e={solid:["bg-contrast","top-0"],outlined:["bg-primary","-top-[1px]"]},l={small:"calc(var(--spacing) * 4)",medium:"calc(var(--spacing) * 6)",large:"calc(var(--spacing) * 8)"},s={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,s as SIZE_CLS_MAP,l as SIZE_VAR_MAP,a as VARIANT_CLS_MAP,e as VARIANT_THUMB_CLS_MAP,r 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"],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};

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); --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); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --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; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.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); --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); --background-color-container: light-dark(var(--nd-color-primary-0), var(--nd-color-primary-5)); --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; --default-transition-duration: .2s; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,8 +31,8 @@
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
-    "@nild/shared": "0.0.5",
-    "@nild/hooks": "0.0.6"
+    "@nild/hooks": "0.0.6",
+    "@nild/shared": "0.0.5"
   },
   "scripts": {
     "build": "vite build --mode PROD",