@nild/components 0.0.10 → 0.0.12

package/dist/button/Button.js

@@ -1 +1 @@
-import{jsx as t,Fragment as A}from"react/jsx-runtime";import{cnMerge as p,isArray as S,cnJoin as b}from"@nild/shared";import{forwardRef as f}from"react";import{DISABLED_CLS as L}from"../_shared/style/index.js";import P from"../_shared/utils/isEmptyChildren.js";import h from"../_shared/utils/isPlainChildren.js";import{VARIANT_CLS_MAP as C,SIZE_CLS_MAP as M,SHAPE_CLS_MAP as N,EQUAL_CLS_MAP as R,GROUP_FIRST_CLS_MAP as I,GROUP_LAST_CLS_MAP as g,GROUP_DIVIDER_CLS_MAP as z}from"./style/index.js";const i=f(({className:r,children:n,variant:s="solid",size:o="medium",shape:l="square",equal:e=!1,disabled:m,block:c,...d},u)=>{const a=h(n);return t("button",{type:"button",...d,disabled:m,className:p("nd-button","font-sans cursor-pointer transition-colors",L,c&&"w-full",a&&"whitespace-nowrap truncate",C[s],M[o][`${a}`],N[l],e&&R[o],r),ref:u,children:n})});i.displayName="Button";const _=f(({children:r,className:n,variant:s="solid",size:o="medium",disabled:l,direction:e="horizontal",...m},c)=>{if(!r||P(r))return t(A,{});if(!S(r))return t(i,{...r.props,variant:s,size:o,disabled:l});const d=e==="horizontal";return t("div",{...m,className:p("nd-button-group","flex",!d&&"flex-col",n),ref:c,children:r.map((u,a)=>t(i,{...u.props,className:b(a===0?I[e]:a===r.length-1?g[e]:"rounded-none",a!==0&&(d?"border-l-0":"border-t-0"),a!==r.length-1&&z[e][s]),variant:s,size:o,disabled:l},a))})});_.displayName="Button.Group",i.Group=_;export{i as default};
+import{jsx as t,Fragment as A}from"react/jsx-runtime";import{cnMerge as u,isArray as S,cnJoin as b}from"@nild/shared";import{forwardRef as f}from"react";import{DISABLED_CLS as L}from"../_shared/style/index.js";import P from"../_shared/utils/isEmptyChildren.js";import h from"../_shared/utils/isPlainChildren.js";import{VARIANT_CLS_MAP as C,SIZE_CLS_MAP as M,SHAPE_CLS_MAP as N,EQUAL_CLS_MAP as R,GROUP_FIRST_CLS_MAP as I,GROUP_LAST_CLS_MAP as g,GROUP_DIVIDER_CLS_MAP as z}from"./style/index.js";const i=f(({className:a,children:n,variant:s="solid",size:o="medium",shape:l="square",equal:e=!1,disabled:m,block:p,...d},c)=>{const r=h(n);return t("button",{type:"button",...d,disabled:m,className:u("nd-button","font-nd cursor-pointer transition-colors",L,p&&"w-full",r&&"whitespace-nowrap truncate",C[s],M[o][`${r}`],N[l],e&&R[o],a),ref:c,children:n})});i.displayName="Button";const _=f(({children:a,className:n,variant:s="solid",size:o="medium",disabled:l,direction:e="horizontal",...m},p)=>{if(!a||P(a))return t(A,{});if(!S(a))return t(i,{...a.props,variant:s,size:o,disabled:l});const d=e==="horizontal";return t("div",{...m,className:u("nd-button-group","flex",!d&&"flex-col",n),ref:p,children:a.map((c,r)=>t(i,{...c.props,className:b(r===0?I[e]:r===a.length-1?g[e]:"rounded-none",r!==0&&(d?"border-l-0":"border-t-0"),r!==a.length-1&&z[e][s]),variant:s,size:o,disabled:l},r))})});_.displayName="Button.Group",i.Group=_;export{i as default};

package/dist/switch/Switch.js

@@ -1 +1 @@
-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";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};
+import{jsxs as j,jsx as r}from"react/jsx-runtime";import{useControllableState as U}from"@nild/hooks";import{cnJoin as n,cnMerge as m}from"@nild/shared";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 d=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:m("nd-switch","h-[var(--nd-switch-height)]","group","relative inline-block font-nd 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:_})]})});d.displayName="Switch";const f=p(({className:t,children:c,...e},a)=>r("div",{...e,className:m("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:m("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:m("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",d.Checked=f,d.Unchecked=u,d.Thumb=N;export{d as default};

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); --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;}}
+@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;}}

package/dist/typography/Link.js

@@ -1 +1 @@
-import{jsx as d}from"react/jsx-runtime";import{cnMerge as s}from"@nild/shared";import{forwardRef as f}from"react";import{DISABLED_CLS as m}from"../_shared/style/index.js";const r=f(({className:n,children:i,disabled:e,underlined:a,href:t="#",...l},o)=>d("a",{...l,href:e?void 0:t,className:s("nd-link",["font-sans","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],m,a?"underline":"no-underline",e&&"disabled",n),ref:o,children:i}));r.displayName="Typography.Link";export{r as default};
+import{jsx as l}from"react/jsx-runtime";import{cnMerge as s}from"@nild/shared";import{forwardRef as f}from"react";import{DISABLED_CLS as m}from"../_shared/style/index.js";const r=f(({className:n,children:i,disabled:e,underlined:a,href:t="#",...d},o)=>l("a",{...d,href:e?void 0:t,className:s("nd-link",["font-nd","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],m,a?"underline":"no-underline",e&&"disabled",n),ref:o,children:i}));r.displayName="Typography.Link";export{r as default};

package/dist/typography/Text.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared";import{forwardRef as g}from"react";import{DISABLED_CLS as u}from"../_shared/style/index.js";const s=g(({className:a,children:o,disabled:n,secondary:t,strong:i,deleted:l,underlined:c,italic:m,marked:p,coded:b,keyboarded:h,...y},f)=>{let e=o;return i&&(e=r("strong",{children:e})),l&&(e=r("del",{children:e})),c&&(e=r("u",{className:"underline",children:e})),m&&(e=r("i",{children:e})),p&&(e=r("mark",{className:"text-contrast bg-primary",children:e})),b&&(e=r("code",{className:d("text-sm","ps-1.5 pe-1.5","bg-secondary rounded-sm border border-solid border-secondary"),children:e})),h&&(e=r("kbd",{className:d("text-sm","ps-1.5 pe-1.5","rounded-sm border border-b-2 border-solid border-secondary"),children:e})),r("span",{...y,className:x("nd-text","font-sans text-[length:inherit]",u,n&&"disabled",t?"text-secondary":"text-primary",a),ref:f,children:e})});s.displayName="Typography.Text";export{s as default};
+import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared";import{forwardRef as g}from"react";import{DISABLED_CLS as u}from"../_shared/style/index.js";const s=g(({className:a,children:o,disabled:n,secondary:t,strong:i,deleted:l,underlined:c,italic:m,marked:p,coded:b,keyboarded:h,...y},f)=>{let e=o;return i&&(e=r("strong",{children:e})),l&&(e=r("del",{children:e})),c&&(e=r("u",{className:"underline",children:e})),m&&(e=r("i",{children:e})),p&&(e=r("mark",{className:"text-contrast bg-primary",children:e})),b&&(e=r("code",{className:d("text-sm","ps-1.5 pe-1.5","bg-secondary rounded-sm border border-solid border-secondary"),children:e})),h&&(e=r("kbd",{className:d("text-sm","ps-1.5 pe-1.5","rounded-sm border border-b-2 border-solid border-secondary"),children:e})),r("span",{...y,className:x("nd-text","font-nd text-[length:inherit]",u,n&&"disabled",t?"text-secondary":"text-primary",a),ref:f,children:e})});s.displayName="Typography.Text";export{s as default};

package/dist/typography/Title.js

@@ -1 +1 @@
-import{jsx as i}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as l}from"react";import{HEADING_LEVEL_CLS_MAP as n}from"./style/index.js";const r=l(({className:a,children:m,level:e=1,...s},o)=>{const t=`h${e}`;return i(t,{...s,className:f(["nd-title","font-sans font-semibold text-primary","mt-[1em] mb-[0.5em]"],n[e],a),ref:o,children:m})});r.displayName="Typography.Title";export{r as default};
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as l}from"react";import{HEADING_LEVEL_CLS_MAP as n}from"./style/index.js";const r=l(({className:m,children:a,level:e=1,...o},t)=>{const s=`h${e}`;return i(s,{...o,className:f(["nd-title","font-nd font-semibold text-primary","mt-[1em] mb-[0.5em]"],n[e],m),ref:t,children:a})});r.displayName="Typography.Title";export{r as default};

package/dist/typography/Typography.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared";import{forwardRef as i}from"react";import s from"./Link.js";import f from"./Paragraph.js";import n from"./Text.js";import l from"./Title.js";const r=i(({className:o,children:a,...m},t)=>e("article",{...m,className:p("nd-typography","font-sans text-md",o),ref:t,children:a}));r.Link=s,r.Paragraph=f,r.Text=n,r.Title=l,r.displayName="Typography";export{r as default};
+import{jsx as e}from"react/jsx-runtime";import{cnMerge as p}from"@nild/shared";import{forwardRef as i}from"react";import f from"./Link.js";import s from"./Paragraph.js";import d from"./Text.js";import n from"./Title.js";const r=i(({className:o,children:a,...m},t)=>e("article",{...m,className:p("nd-typography","font-nd text-md",o),ref:t,children:a}));r.Link=f,r.Paragraph=s,r.Text=d,r.Title=n,r.displayName="Typography";export{r as default};

package/package.json

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