@nild/components 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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-secondary-hover","enabled:active:bg-secondary-active"],filled:["bg-secondary","text-primary","enabled:hover:bg-secondary-hover","enabled:active:bg-secondary-active"],text:["bg-transparent","text-primary","enabled:hover:bg-secondary-hover","enabled:active:bg-secondary-active"]},r={round:["rounded-full"],square:["rounded-md"]},o={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"]}},d={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"]},t={horizontal:["rounded-r-none"],vertical:["rounded-b-none"]},a={horizontal:["rounded-l-none"],vertical:["rounded-t-none"]},n={horizontal:{solid:["border-solid","border-r","border-r-primary-hover"],outlined:[],filled:["border-solid","border-r","border-r-secondary-hover"],text:["border-solid","border-r","border-r-secondary-hover"]},vertical:{solid:["border-solid","border-b","border-b-primary-hover"],outlined:[],filled:["border-solid","border-b","border-b-secondary-hover"],text:["border-solid","border-b","border-b-secondary-hover"]}};export{d as EQUAL_CLS_MAP,n as GROUP_DIVIDER_CLS_MAP,t as GROUP_FIRST_CLS_MAP,a as GROUP_LAST_CLS_MAP,r as SHAPE_CLS_MAP,o as SIZE_CLS_MAP,e as VARIANT_CLS_MAP};
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};
@@ -1 +1 @@
1
- import{jsxs as N,jsx as a}from"react/jsx-runtime";import{useControllable as M}from"@nild/hooks";import{cnMerge as s}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:t="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 b={"--nd-switch-height":P[c]},[e,S]=M(m??u,f??g??!1),k=()=>{S(r=>(n?.(!r),!r))};return N("button",{..._,type:"button",role:"switch","aria-checked":e,disabled:v,className:s("nd-switch",["relative","inline-block","font-sans","overflow-hidden","cursor-pointer"],["h-[var(--nd-switch-height)]"],L,R[t],j[c],o[i],d),style:{...b,...C},ref:x,onClick:k,children:[a("div",{className:s("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[t][`${e}`].concat(e?["ms-0 me-0"]:["-ms-[100%] me-[100%]"])),children:p}),a("div",{className:s("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[t][`${e}`].concat(e?["ms-[100%] -me-[100%]"]:["ms-0 me-0"])),children:w}),a("div",{className:s("flex justify-center items-center","h-[var(--nd-switch-height)] absolute aspect-square scale-80","text-contrast transition-[left]",I[t],o[i],e?"left-[calc(100%-var(--nd-switch-height))]":"left-0"),children:A})]})});l.displayName="Switch";export{l as default};
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};
package/dist/tailwind.css CHANGED
@@ -1 +1 @@
1
- .i-icon{display:inline-block;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.i-icon-spin svg{animation:i-icon-spin 1s infinite linear}.i-icon-rtl{transform:scaleX(-1)}@keyframes i-icon-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes i-icon-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@theme{ --color-primary: var(--nd-color-primary); --color-primary-hover: var(--nd-color-primary-hover); --color-primary-active: var(--nd-color-primary-active); --color-primary-mark: var(--nd-color-primary-mark); --color-primary-code: var(--nd-color-primary-code); --color-secondary: var(--nd-color-secondary); --color-secondary-hover: var(--nd-color-secondary-hover); --color-secondary-active: var(--nd-color-secondary-active); --color-contrast: var(--nd-color-contrast); --color-split: var(--nd-color-split); --text-color-primary: var(--nd-text-color-primary); --text-color-secondary: var(--nd-text-color-secondary); --text-color-link: var(--nd-color-primary); --text-color-link-hover: var(--nd-color-primary-hover); --text-color-link-active: var(--nd-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; }@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@custom-variant disabled{&.disabled,&:disabled {@slot;}}:root{--nd-h-primary: 215;--nd-s-primary: 25%;--nd-l-primary: 27%;--nd-color-primary: hsl(var(--nd-h-primary) var(--nd-s-primary) var(--nd-l-primary));--nd-color-primary-hover: hsl(var(--nd-h-primary) var(--nd-s-primary) calc(var(--nd-l-primary) + 5%));--nd-color-primary-active: hsl(var(--nd-h-primary) var(--nd-s-primary) calc(var(--nd-l-primary) - 5%));--nd-color-primary-mark: hsl(var(--nd-h-primary) var(--nd-s-primary) 90%);--nd-color-primary-code: hsl(var(--nd-h-primary) var(--nd-s-primary) 75% / .2);--nd-h-secondary: var(--nd-h-primary);--nd-s-secondary: var(--nd-s-primary);--nd-l-secondary: 92.5%;--nd-color-secondary: hsl(var(--nd-h-secondary) var(--nd-s-secondary) var(--nd-l-secondary));--nd-color-secondary-hover: hsl(var(--nd-h-secondary) var(--nd-s-secondary) calc(var(--nd-l-secondary) - 2.5%));--nd-color-secondary-active: hsl(var(--nd-h-secondary) var(--nd-s-secondary) calc(var(--nd-l-secondary) - 5%));--nd-h-contrast: var(--nd-h-primary);--nd-s-contrast: var(--nd-s-primary);--nd-l-contrast: 95%;--nd-color-contrast: hsl(var(--nd-h-contrast), var(--nd-s-contrast), var(--nd-l-contrast));--nd-color-split: hsl(var(--nd-h-primary) var(--nd-s-primary) var(--nd-l-primary) / .15);--nd-text-color-primary: hsl(var(--nd-h-primary) var(--nd-s-primary) 5%);--nd-text-color-secondary: hsl(var(--nd-h-primary) var(--nd-s-primary) 5% / .6)}.dark{--nd-l-primary: 95%;--nd-color-primary-hover: hsl(var(--nd-h-primary) var(--nd-s-primary) calc(var(--nd-l-primary) - 5%));--nd-color-primary-active: hsl(var(--nd-h-primary) var(--nd-s-primary) calc(var(--nd-l-primary) + 5%));--nd-color-primary-mark: hsl(var(--nd-h-primary) var(--nd-s-primary) 25%);--nd-l-secondary: 22.5%;--nd-l-contrast: 27%;--nd-text-color-primary: hsl(var(--nd-h-primary) var(--nd-s-primary) 95%);--nd-text-color-secondary: hsl(var(--nd-h-primary) var(--nd-s-primary) 95% / .8)}
1
+ .i-icon{display:inline-block;color:inherit;font-style:normal;line-height:0;text-align:center;text-transform:none;vertical-align:-.125em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.i-icon-spin svg{animation:i-icon-spin 1s infinite linear}.i-icon-rtl{transform:scaleX(-1)}@keyframes i-icon-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes i-icon-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@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); --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;}}
@@ -1 +1 @@
1
- import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared/utils";import{forwardRef as g}from"react";import{DISABLED_CLS as u}from"../_shared/style/index.js";const a=g(({className:s,children:o,disabled:n,secondary:t,strong:i,deleted:l,underlined:c,italic:m,marked:p,coded:b,keyboarded:y,...h},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-primary bg-primary-mark",children:e})),b&&(e=r("code",{className:d("text-sm","ps-1.5 pe-1.5","bg-primary-code rounded-sm border border-solid border-secondary"),children:e})),y&&(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",{...h,className:x(["nd-text","font-sans","text-[length:inherit]"],u,n&&"disabled",t?"text-secondary":"text-primary",s),ref:f,children:e})});a.displayName="Typography.Text";export{a as default};
1
+ import{jsx as r}from"react/jsx-runtime";import{cnJoin as d,cnMerge as x}from"@nild/shared/utils";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};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nild/components",
3
3
  "private": false,
4
- "version": "0.0.2",
4
+ "version": "0.0.4",
5
5
  "type": "module",
6
6
  "module": "./dist/index.js",
7
7
  "exports": {
@@ -31,8 +31,8 @@
31
31
  "peerDependencies": {
32
32
  "react": ">=18.2.0",
33
33
  "react-dom": ">=18.2.0",
34
- "@nild/shared": "0.0.2",
35
- "@nild/hooks": "0.0.2"
34
+ "@nild/shared": "0.0.3",
35
+ "@nild/hooks": "0.0.4"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "vite build --mode PROD",