@nild/components 0.0.43 → 0.0.45
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
|
-
import{cva as e}from"@nild/shared";import{TransitionStatus as a}from"../../transition/interfaces/index.js";const t=[a.UNMOUNTED,a.ENTERING,a.EXITING,a.EXITED],r=e(["nd-modal-trigger"]),s=e(["nd-modal-portal","fixed","inset-0","flex","pointer-events-auto"],{variants:{placement:{center:["items-center","justify-center","p-4"],left:["items-stretch","justify-start"],right:["items-stretch","justify-end"],top:["items-start","justify-center"],bottom:["items-end","justify-center"]}}}),l=e(["nd-modal-overlay","absolute","inset-0","transition-opacity","duration-[var(--default-transition-duration)]","ease-out","bg-[color-mix(in_oklch,var(--background-color-
|
|
1
|
+
import{cva as e}from"@nild/shared";import{TransitionStatus as a}from"../../transition/interfaces/index.js";const t=[a.UNMOUNTED,a.ENTERING,a.EXITING,a.EXITED],r=e(["nd-modal-trigger"]),s=e(["nd-modal-portal","fixed","inset-0","flex","pointer-events-auto"],{variants:{placement:{center:["items-center","justify-center","p-4"],left:["items-stretch","justify-start"],right:["items-stretch","justify-end"],top:["items-start","justify-center"],bottom:["items-end","justify-center"]}}}),l=e(["nd-modal-overlay","absolute","inset-0","transition-opacity","duration-[var(--default-transition-duration)]","ease-out","bg-[color-mix(in_oklch,var(--background-color-canvas-inverse)_18%,transparent)]"]),n=e([],{variants:{status:{[a.UNMOUNTED]:"",[a.ENTERING]:"",[a.ENTERED]:"",[a.EXITING]:"",[a.EXITED]:""}},compoundVariants:[{status:t,className:"opacity-0"},{status:a.ENTERED,className:"opacity-100"}]}),o=e(["nd-modal-header","shrink-0","px-6","pt-6","pb-4","pr-16","text-lg","font-semibold"]),i=e(["nd-modal-body","min-h-0","flex-auto","overflow-auto","px-6","pb-6"]),m=e(["nd-modal-footer","shrink-0","flex","justify-end","gap-3","border-t","border-subtle","px-6","py-4"]),c=e(["nd-modal-close","absolute","top-4","right-6","z-1"]),d=e(["nd-modal-surface","relative","pointer-events-auto","flex","min-h-0","flex-col","overflow-hidden","bg-surface","text-main","shadow-2xl","outline-none","transition-[opacity,translate,scale]","duration-[var(--default-transition-duration)]","ease-out"],{variants:{variant:{dialog:"",drawer:""},placement:{center:["w-full","max-h-[calc(100vh-2rem)]"],left:["h-full","max-h-screen"],right:["h-full","max-h-screen"],top:["w-full","max-w-screen"],bottom:["w-full","max-w-screen"]},size:{small:"",medium:"",large:"",full:""}},compoundVariants:[{variant:"dialog",placement:"center",size:"small",className:["max-w-96","rounded-xl"]},{variant:"dialog",placement:"center",size:"medium",className:["max-w-[36rem]","rounded-xl"]},{variant:"dialog",placement:"center",size:"large",className:["max-w-[48rem]","rounded-xl"]},{variant:"dialog",placement:"center",size:"full",className:["h-[calc(100vh-2rem)]","w-[calc(100vw-2rem)]","max-w-none","rounded-xl"]},{variant:"drawer",placement:["left","right"],size:"small",className:"w-80"},{variant:"drawer",placement:["left","right"],size:"medium",className:"w-[28rem]"},{variant:"drawer",placement:["left","right"],size:"large",className:"w-[36rem]"},{variant:"drawer",placement:["left","right"],size:"full",className:"w-screen"},{variant:"drawer",placement:["top","bottom"],size:"small",className:"h-64"},{variant:"drawer",placement:["top","bottom"],size:"medium",className:"h-96"},{variant:"drawer",placement:["top","bottom"],size:"large",className:"h-[32rem]"},{variant:"drawer",placement:["top","bottom"],size:"full",className:"h-screen"}]}),u=e([],{variants:{status:{[a.UNMOUNTED]:"",[a.ENTERING]:"",[a.ENTERED]:"",[a.EXITING]:"",[a.EXITED]:""},variant:{dialog:"",drawer:""},placement:{center:"",left:"",right:"",top:"",bottom:""}},compoundVariants:[{status:t,variant:"dialog",className:["opacity-0","scale-95"]},{status:a.ENTERED,variant:"dialog",className:["opacity-100","scale-100"]},{status:t,variant:"drawer",placement:"left",className:"-translate-x-full"},{status:a.ENTERED,variant:"drawer",placement:"left",className:"translate-x-0"},{status:t,variant:"drawer",placement:"right",className:"translate-x-full"},{status:a.ENTERED,variant:"drawer",placement:"right",className:"translate-x-0"},{status:t,variant:"drawer",placement:"top",className:"-translate-y-full"},{status:a.ENTERED,variant:"drawer",placement:"top",className:"translate-y-0"},{status:t,variant:"drawer",placement:"bottom",className:"translate-y-full"},{status:a.ENTERED,variant:"drawer",placement:"bottom",className:"translate-y-0"}]}),p={trigger:r,portal:s,overlay:l,overlayMotion:n,surfaceMotion:u,header:o,body:i,footer:m,close:c,surface:d};export{p as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as r}from"@nild/shared";const
|
|
1
|
+
import{cva as r}from"@nild/shared";const a=r(["nd-popup-trigger"]),e=r(["nd-popup-portal",["absolute","top-0","left-0"]]),t=r(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-canvas-inverse","text-main-inverse"],false:["bg-surface","text-main"]}}}),o=r(["nd-popup-arrow","absolute"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},inverse:{true:["bg-canvas-inverse"],false:["bg-surface"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{orientation:"up",className:["shadow-[-1px_-1px_0_0_var(--border-color-muted)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-muted)]"]}]}),s={trigger:a,portal:e,portalContent:t,arrow:o};export{s as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-segment","relative","isolate","font-nd","rounded-md","bg-muted","p-0.5","text-main"],{variants:{orientation:{horizontal:["flex-row","items-center"],vertical:["flex-col","items-stretch"]},block:{true:["flex","w-full"],false:"inline-flex"}}}),o=e(["nd-segment-indicator","pointer-events-none","absolute","top-0","left-0","z-0","rounded-sm","bg-
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-segment","relative","isolate","font-nd","rounded-md","bg-muted","p-0.5","text-main"],{variants:{orientation:{horizontal:["flex-row","items-center"],vertical:["flex-col","items-stretch"]},block:{true:["flex","w-full"],false:"inline-flex"}}}),o=e(["nd-segment-indicator","pointer-events-none","absolute","top-0","left-0","z-0","rounded-sm","bg-canvas","shadow-sm","transition-[transform,width,height,opacity]","ease-out","motion-reduce:transition-none"]),a=e(["nd-segment-item","relative","z-1","inline-flex","min-w-0","items-center","justify-center","rounded-sm","border-0","bg-transparent","select-none","outline-none","transition-[background-color,box-shadow,color]","focus-visible:ring-focused",t],{variants:{orientation:{horizontal:"",vertical:["w-full","justify-start"]},size:{small:["min-h-5","gap-1","px-2","text-sm"],medium:["min-h-7","gap-1.5","px-3","text-md"],large:["min-h-9","gap-2","px-4","text-lg"]},selected:{true:"text-brand",false:""},disabled:{true:["disabled","cursor-not-allowed"],false:"cursor-pointer"},block:{true:"",false:""}},compoundVariants:[{selected:!1,disabled:!1,className:["text-main","hover:text-brand-hover"]},{selected:!1,disabled:!0,className:"text-subtle"},{block:!0,orientation:"horizontal",className:"flex-1"}]}),i={segment:n,indicator:o,item:a};export{i as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"]},size:{small:["h-6","text-sm","rounded-sm"],medium:["h-8","text-md","rounded-md"],large:["h-10","text-lg","rounded-md"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["border-brand","z-1","ring-focused"],false:""}},compoundVariants:[{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),r=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}}}),o=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]},open:{true:["rotate-180"],false:""}}}),l=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),i=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors"],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["cursor-not-allowed","select-none","text-subtle","opacity-50"],false:["cursor-pointer"
|
|
1
|
+
import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"]},size:{small:["h-6","text-sm","rounded-sm"],medium:["h-8","text-md","rounded-md"],large:["h-10","text-lg","rounded-md"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["border-brand","z-1","ring-focused"],false:""}},compoundVariants:[{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),r=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}}}),o=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]},open:{true:["rotate-180"],false:""}}}),l=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),i=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors"],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["cursor-not-allowed","select-none","text-subtle","opacity-50"],false:["cursor-pointer"]},active:{true:["bg-surface-muted"],false:""}}}),a=e(["nd-select-option-content","min-w-0","flex-auto"]),s=e(["nd-select-option-label","block","truncate"]),d=e(["nd-select-option-indicator","shrink-0","inline-flex","items-center","justify-center"],{variants:{size:{small:["size-3.5","text-sm"],medium:["size-4","text-md"],large:["size-4.5","text-lg"]}}}),m={trigger:n,triggerContent:r,triggerIcon:o,listbox:l,option:i,optionContent:a,optionLabel:s,optionIndicator:d};export{m as default};
|
package/dist/tabs/Tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as N,jsx as
|
|
1
|
+
import{jsxs as N,jsx as i}from"react/jsx-runtime";import{Icon as T}from"@nild/icons";import g from"@nild/icons/CloseSmall";import{cnMerge as y}from"@nild/shared";import{forwardRef as z,isValidElement as I}from"react";import E from"../button/index.js";import{useTabsContext as P}from"./contexts/index.js";import t from"./style/index.js";const j="Close tab",q=a=>I(a)&&a.type===r,r=z((a,c)=>{const{variant:b="line",size:l="medium",orientation:p="horizontal",selectedTabId:f,onClose:n}=P(),{className:u,children:v,value:x,disabled:o=!1,closable:m=!1,id:s,...h}=a,d=!!s&&s===f,C=e=>{e.stopPropagation(),n?.(x,e)};return N("div",{...h,"aria-disabled":o||void 0,"aria-selected":d,className:y(t.tab({variant:b,size:l,orientation:p,selected:d,disabled:o,closable:m}),u),id:s,ref:c,role:"tab",children:[i("span",{className:t.tabContent(),children:v}),m&&i(E,{equal:!0,variant:"text","aria-label":j,className:t.close({size:l}),disabled:o,onClick:C,onKeyDown:e=>e.stopPropagation(),tabIndex:-1,children:i(T,{component:g})})]})});r.displayName="Tabs.Tab";export{r as default,q as isTabElement};
|
package/dist/tabs/style/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const
|
|
1
|
+
import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const t=a(["nd-tabs","font-nd","text-main"],{variants:{orientation:{horizontal:"",vertical:["flex","items-start"]},variant:{line:"",card:""}},compoundVariants:[{orientation:"vertical",variant:"line",className:"gap-4"},{orientation:"vertical",variant:"card",className:"items-stretch"}]}),r=a(["nd-tabs-list","flex","shrink-0"],{variants:{orientation:{horizontal:["flex-row","items-end"],vertical:["flex-col","items-stretch"]},variant:{line:"",card:""}},compoundVariants:[{orientation:"horizontal",variant:"line",className:["border-b","border-main"]},{orientation:"vertical",variant:"line",className:["border-r","border-main"]},{orientation:"horizontal",variant:"card",className:["mb-[-1px]","gap-1"]},{orientation:"vertical",variant:"card",className:["mr-[-1px]","gap-1"]}]}),n=a(["nd-tabs-tab","group","relative","inline-flex","items-center","justify-center","min-w-0","select-none","outline-none","transition-[background-color,border-color,color]","focus-visible:ring-focused",e],{variants:{orientation:{horizontal:"",vertical:["w-full","justify-start"]},variant:{line:["bg-transparent","border-transparent"],card:["border","border-main"]},size:{small:["min-h-7","gap-1","px-2","text-sm"],medium:["min-h-8","gap-1.5","px-3","text-md"],large:["min-h-10","gap-2","px-4","text-lg"]},selected:{true:"",false:""},disabled:{true:["disabled","cursor-not-allowed"],false:["cursor-pointer"]},closable:{true:"",false:""}},compoundVariants:[{variant:"line",orientation:"horizontal",className:["border-b-2","mb-[-1px]"]},{variant:"line",orientation:"vertical",className:["border-r-2","mr-[-1px]"]},{variant:"line",selected:!0,className:["text-brand","border-brand"]},{variant:"line",selected:!1,disabled:!1,className:["hover:text-brand-hover"]},{variant:"card",orientation:"horizontal",className:["rounded-t-md","border-b-main"]},{variant:"card",orientation:"vertical",className:["rounded-l-md","border-r-main"]},{variant:"card",selected:!0,className:["z-1","bg-canvas","text-brand"]},{variant:"card",selected:!1,disabled:!1,className:["bg-muted","text-main","hover:text-brand-hover"]},{variant:"card",selected:!0,orientation:"horizontal",className:"border-b-transparent"},{variant:"card",selected:!0,orientation:"vertical",className:"border-r-transparent"},{closable:!0,size:"small",className:"pr-1"},{closable:!0,size:"medium",className:"pr-1.5"},{closable:!0,size:"large",className:"pr-2"}]}),i=a(["nd-tabs-tab-content","min-w-0","truncate"]),o=a(["nd-tabs-tab-close","shrink-0"],{variants:{size:{small:["size-4","text-sm"],medium:["size-4.5","text-md"],large:["size-5","text-lg"]}}}),s=a(["nd-tabs-panel","min-w-0","outline-none"],{variants:{orientation:{horizontal:"",vertical:["flex-auto"]},variant:{line:"",card:["border","border-main","bg-canvas","p-4"]}},compoundVariants:[{variant:"line",orientation:"horizontal",className:"pt-4"},{variant:"line",orientation:"vertical",className:"pt-0"},{variant:"card",orientation:"horizontal",className:["rounded-b-md","rounded-tr-md"]},{variant:"card",orientation:"vertical",className:["rounded-r-md","rounded-bl-md"]}]}),l={tabs:t,list:r,tab:n,tabContent:i,close:o,panel:s};export{l as default};
|
package/dist/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( color-mix(in oklch, oklch(66% .14 140deg) 90%, var(--nd-color-brand-50) 10%), color-mix(in oklch, oklch(52% .14 140deg) 90%, var(--nd-color-brand-70) 10%) ); --color-success-subtle: light-dark( color-mix(in oklch, oklch(95% .05 140deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 140deg) 92%, var(--nd-color-brand-20) 8%) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success-ring: light-dark( color-mix(in oklch, var(--color-success) 28%, transparent), color-mix(in oklch, var(--color-success) 36%, transparent) ); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( color-mix(in oklch, oklch(82% .15 80deg) 95%, var(--nd-color-brand-50) 5%), color-mix(in oklch, oklch(68% .15 80deg) 95%, var(--nd-color-brand-70) 5%) ); --color-warning-subtle: light-dark( color-mix(in oklch, oklch(96% .06 80deg) 96%, var(--nd-color-brand-15) 4%), color-mix(in oklch, oklch(28% .06 80deg) 96%, var(--nd-color-brand-20) 4%) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-warning-ring: light-dark( color-mix(in oklch, var(--color-warning) 30%, transparent), color-mix(in oklch, var(--color-warning) 38%, transparent) ); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( color-mix(in oklch, oklch(64% .16 28deg) 92%, var(--nd-color-brand-50) 8%), color-mix(in oklch, oklch(50% .16 28deg) 92%, var(--nd-color-brand-70) 8%) ); --color-error-subtle: light-dark( color-mix(in oklch, oklch(94% .05 28deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 28deg) 92%, var(--nd-color-brand-20) 8%) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-error-ring: light-dark( color-mix(in oklch, var(--color-error) 28%, transparent), color-mix(in oklch, var(--color-error) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-page: var(--nd-color-neutral-0); --background-color-page-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-panel: light-dark( var(--background-color-page), var(--background-color-muted) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --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-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
|
|
1
|
+
@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -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"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( color-mix(in oklch, oklch(66% .14 140deg) 90%, var(--nd-color-brand-50) 10%), color-mix(in oklch, oklch(52% .14 140deg) 90%, var(--nd-color-brand-70) 10%) ); --color-success-subtle: light-dark( color-mix(in oklch, oklch(95% .05 140deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 140deg) 92%, var(--nd-color-brand-20) 8%) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success-ring: light-dark( color-mix(in oklch, var(--color-success) 28%, transparent), color-mix(in oklch, var(--color-success) 36%, transparent) ); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( color-mix(in oklch, oklch(82% .15 80deg) 95%, var(--nd-color-brand-50) 5%), color-mix(in oklch, oklch(68% .15 80deg) 95%, var(--nd-color-brand-70) 5%) ); --color-warning-subtle: light-dark( color-mix(in oklch, oklch(96% .06 80deg) 96%, var(--nd-color-brand-15) 4%), color-mix(in oklch, oklch(28% .06 80deg) 96%, var(--nd-color-brand-20) 4%) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-warning-ring: light-dark( color-mix(in oklch, var(--color-warning) 30%, transparent), color-mix(in oklch, var(--color-warning) 38%, transparent) ); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( color-mix(in oklch, oklch(64% .16 28deg) 92%, var(--nd-color-brand-50) 8%), color-mix(in oklch, oklch(50% .16 28deg) 92%, var(--nd-color-brand-70) 8%) ); --color-error-subtle: light-dark( color-mix(in oklch, oklch(94% .05 28deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 28deg) 92%, var(--nd-color-brand-20) 8%) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-error-ring: light-dark( color-mix(in oklch, var(--color-error) 28%, transparent), color-mix(in oklch, var(--color-error) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-canvas: var(--nd-color-neutral-0); --background-color-canvas-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-surface: light-dark( var(--nd-color-neutral-0), var(--nd-color-neutral-10) ); --background-color-surface-subtle: light-dark(var(--nd-color-neutral-5), var(--nd-color-neutral-15)); --background-color-surface-muted: light-dark(var(--nd-color-neutral-10), var(--nd-color-neutral-20)); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --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-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nild/components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.45",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"module": "./dist/index.js",
|
|
7
7
|
"exports": {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^18.2.0",
|
|
33
33
|
"react-dom": "^18.2.0",
|
|
34
|
-
"@nild/shared": "0.0.17",
|
|
35
|
-
"@nild/hooks": "0.0.
|
|
36
|
-
"@nild/icons": "0.0.
|
|
34
|
+
"@nild/shared": "^0.0.17",
|
|
35
|
+
"@nild/hooks": "^0.0.20",
|
|
36
|
+
"@nild/icons": "^0.0.20"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
39
|
"build": "vite build --mode PROD",
|