@nild/components 0.0.33 → 0.0.35

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{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-button",["font-nd","cursor-pointer","transition-colors"],["whitespace-nowrap","truncate"],a],{variants:{variant:{solid:["bg-brand","text-on-brand","enabled:hover:bg-brand-hover","enabled:active:bg-brand-active"],outlined:["bg-transparent","border-solid","border","border-edge","text-body","enabled:hover:border-brand-hover","enabled:hover:text-brand-hover","enabled:active:border-brand-active","enabled:active:text-brand-active"],filled:["bg-surface","text-brand","enabled:hover:text-brand-hover","enabled:active:text-brand-active","enabled:hover:bg-surface-hover","enabled:active:bg-surface-active"],text:["bg-transparent","text-brand","enabled:hover:text-brand-hover","enabled:active:text-brand-active","enabled:hover:bg-surface-hover","enabled:active:bg-surface-active"]},shape:{round:["rounded-full"],square:["rounded-md"]},size:{small:["px-2","h-6","text-sm"],medium:["px-4","h-8","text-md"],large:["px-6","h-10","text-lg"]},block:{true:"w-full",false:""},disabled:{true:"disabled",false:""},equal:{true:["flex","justify-center","items-center"],false:""}},compoundVariants:[{size:"small",equal:!0,className:["w-6 h-6","p-1"]},{size:"medium",equal:!0,className:["w-8 h-8","p-1.5"]},{size:"large",equal:!0,className:["w-10 h-10","p-2"]}]}),t=e(["nd-button-group",["flex"]],{variants:{direction:{horizontal:"",vertical:"flex-col"}}}),o=e("",{compoundVariants:[{first:!0,direction:"horizontal",className:"rounded-r-none"},{first:!0,direction:"vertical",className:"rounded-b-none"},{last:!0,direction:"horizontal",className:"rounded-l-none"},{last:!0,direction:"vertical",className:"rounded-t-none"},{first:!1,last:!1,className:"rounded-none"},{last:!1,direction:"horizontal",variant:"outlined",className:["mr-[-1px]","hover:z-1"]},{last:!1,direction:"vertical",variant:"outlined",className:["mb-[-1px]","hover:z-1"]},{last:!1,direction:"horizontal",variant:"solid",className:["border-solid","border-r","border-r-brand-hover"]},{last:!1,direction:"horizontal",variant:["filled","text"],className:["border-solid","border-r","border-r-surface-hover"]},{last:!1,direction:"vertical",variant:"solid",className:["border-solid","border-b","border-b-brand-hover"]},{last:!1,direction:"vertical",variant:["filled","text"],className:["border-solid","border-b","border-b-surface-hover"]}]});export{r as buttonClassNames,t as groupClassNames,o as groupedButtonClassNames};
1
+ import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-button",["font-nd","cursor-pointer","transition-colors"],["whitespace-nowrap","truncate"],a],{variants:{variant:{solid:["bg-brand","text-brand-contrast","enabled:hover:bg-brand-hover","enabled:active:bg-brand-active"],outlined:["bg-transparent","border","border-main","text-main","enabled:hover:border-brand-hover","enabled:hover:text-brand-hover","enabled:active:border-brand-active","enabled:active:text-brand-active"],filled:["bg-muted","text-main","enabled:hover:bg-muted-hover","enabled:active:bg-muted-active"],text:["bg-transparent","text-main","enabled:hover:bg-muted-hover","enabled:active:bg-muted-active"]},shape:{round:["rounded-full"],square:["rounded-md"]},size:{small:["px-2","h-6","text-sm"],medium:["px-4","h-8","text-md"],large:["px-6","h-10","text-lg"]},block:{true:"w-full",false:""},disabled:{true:"disabled",false:""},equal:{true:["flex","justify-center","items-center"],false:""}},compoundVariants:[{size:"small",equal:!0,className:["w-6 h-6","p-1"]},{size:"medium",equal:!0,className:["w-8 h-8","p-1.5"]},{size:"large",equal:!0,className:["w-10 h-10","p-2"]}]}),t=e(["nd-button-group",["flex"]],{variants:{direction:{horizontal:"",vertical:"flex-col"}}}),n=e("",{compoundVariants:[{first:!0,direction:"horizontal",className:"rounded-r-none"},{first:!0,direction:"vertical",className:"rounded-b-none"},{last:!0,direction:"horizontal",className:"rounded-l-none"},{last:!0,direction:"vertical",className:"rounded-t-none"},{first:!1,last:!1,className:"rounded-none"},{last:!1,direction:"horizontal",variant:"outlined",className:["mr-[-1px]","hover:z-1"]},{last:!1,direction:"vertical",variant:"outlined",className:["mb-[-1px]","hover:z-1"]},{last:!1,direction:"horizontal",variant:"solid",className:["border-r","border-r-brand-hover"]},{last:!1,direction:"horizontal",variant:["filled","text"],className:["border-r","border-r-muted"]},{last:!1,direction:"vertical",variant:"solid",className:["border-b","border-b-brand-hover"]},{last:!1,direction:"vertical",variant:["filled","text"],className:["border-b","border-b-muted"]}]});export{r as buttonClassNames,t as groupClassNames,n as groupedButtonClassNames};
@@ -1 +1 @@
1
- import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),s=e(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"}}}),o=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=e([["flex","items-center","justify-center"],["size-full","rounded-sm","border-solid","border-1"],"transition-[background-color,color,border-color]"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-brand border-brand text-on-brand","group-enabled:group-hover:bg-brand-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent border-brand text-brand","group-enabled:group-hover:border-brand-hover"]},{checked:!1,className:["bg-transparent border-edge text-transparent","group-enabled:group-hover:border-brand-hover"]}]}),l=e(["w-full"]),d=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=e(["nd-checkbox-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{r as checkboxClassNames,t as defaultIndicatorBlockClassNames,l as defaultIndicatorIconClassNames,n as groupClassNames,s as indicatorClassNames,o as indicatorInputClassNames,d as labelClassNames};
1
+ import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const r=e(["nd-checkbox","group",["flex","items-center"],"cursor-pointer",a],{variants:{size:{small:"gap-1.5",medium:"gap-2",large:"gap-2.5"},disabled:{true:"disabled",false:""}}}),s=e(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"}}}),o=e([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=e([["flex","items-center","justify-center"],["size-full","rounded-sm","border"],"transition-[background-color,color,border-color]"],{compoundVariants:[{checked:!0,variant:"solid",className:["bg-brand border-brand text-brand-contrast","group-enabled:group-hover:bg-brand-hover"]},{checked:!0,variant:"outlined",className:["bg-transparent border-brand text-brand","group-enabled:group-hover:border-brand-hover","group-enabled:group-hover:text-brand-hover"]},{checked:!1,className:["bg-transparent border-main text-transparent","group-enabled:group-hover:border-brand-hover"]}]}),l=e(["w-full"]),n=e(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),d=e(["nd-checkbox-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{r as checkboxClassNames,t as defaultIndicatorBlockClassNames,l as defaultIndicatorIconClassNames,d as groupClassNames,s as indicatorClassNames,o as indicatorInputClassNames,n as labelClassNames};
@@ -1 +1 @@
1
- import{cva as e}from"@nild/shared";const r=e(["nd-divider","border-split","text-body"],{compoundVariants:[{emptyChildren:!0,direction:"horizontal",className:["w-full","min-w-full","border-b","my-6"]},{emptyChildren:!0,direction:"vertical",className:["inline-block","h-[1em]","align-middle","border-r","ms-3 me-3"]},{emptyChildren:!0,variant:"solid",className:["border-solid"]},{emptyChildren:!0,variant:"dashed",className:["border-dashed"]},{emptyChildren:!0,variant:"dotted",className:["border-dotted"]},{emptyChildren:!1,direction:"horizontal",className:["flex items-center text-center",'before:h-0 before:content-[""] before:border-b before:border-[color:inherit]','after:h-0 after:content-[""] after:border-b after:border-[color:inherit]',"my-6"]},{emptyChildren:!1,direction:"horizontal",variant:"solid",className:["before:border-solid","after:border-solid"]},{emptyChildren:!1,direction:"horizontal",variant:"dashed",className:["before:border-dashed","after:border-dashed"]},{emptyChildren:!1,direction:"horizontal",variant:"dotted",className:["before:border-dotted","after:border-dotted"]},{emptyChildren:!1,direction:"horizontal",align:"left",className:["before:basis-1/12","before:grow-0","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"center",className:["before:flex-1","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"right",className:["before:flex-1","after:basis-1/12","after:grow-0"]}]});export{r as dividerClassNames};
1
+ import{cva as e}from"@nild/shared";const r=e(["nd-divider","border-muted","text-main"],{compoundVariants:[{emptyChildren:!0,direction:"horizontal",className:["w-full","min-w-full","border-b","my-6"]},{emptyChildren:!0,direction:"vertical",className:["inline-block","h-[1em]","align-middle","border-r","ms-3 me-3"]},{emptyChildren:!0,variant:"solid",className:[]},{emptyChildren:!0,variant:"dashed",className:["border-dashed"]},{emptyChildren:!0,variant:"dotted",className:["border-dotted"]},{emptyChildren:!1,direction:"horizontal",className:["flex items-center text-center",'before:h-0 before:content-[""] before:border-b before:border-[color:inherit]','after:h-0 after:content-[""] after:border-b after:border-[color:inherit]',"my-6"]},{emptyChildren:!1,direction:"horizontal",variant:"solid",className:["before:border-solid","after:border-solid"]},{emptyChildren:!1,direction:"horizontal",variant:"dashed",className:["before:border-dashed","after:border-dashed"]},{emptyChildren:!1,direction:"horizontal",variant:"dotted",className:["before:border-dotted","after:border-dotted"]},{emptyChildren:!1,direction:"horizontal",align:"left",className:["before:basis-1/12","before:grow-0","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"center",className:["before:flex-1","after:flex-1"]},{emptyChildren:!1,direction:"horizontal",align:"right",className:["before:flex-1","after:basis-1/12","after:grow-0"]}]});export{r as dividerClassNames};
@@ -1 +1 @@
1
- import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const s=e(["nd-input-composite","inline-flex","items-stretch"],{variants:{block:{true:["flex","w-full"],false:""}}}),a=e(["flex-auto"],{variants:{prepended:{true:["rounded-l-none"],false:""},appended:{true:["rounded-r-none"],false:""}},compoundVariants:[{variant:"outlined",appended:!0,className:["mr-[-1px]","hover:z-1","focus-within:z-1"]}]}),r=e(["nd-input-wrapper","group",["inline-flex","items-center","box-border","font-nd","transition-colors","overflow-hidden"],["border-solid","border","enabled:focus-within:border-brand"],t],{variants:{variant:{outlined:["bg-transparent","border-edge","enabled:hover:border-brand-hover"],filled:["bg-surface","border-surface","enabled:[&:hover:not(:focus-within)]:bg-surface-hover","enabled:[&:hover:not(:focus-within)]:border-surface-hover"]},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:"disabled",false:""}}}),n=e(["nd-input","flex-auto","h-full","bg-transparent","border-none","outline-none","p-0","m-0","text-body","placeholder:text-subtle","disabled:cursor-not-allowed","[&::-ms-reveal]:hidden","[&::-ms-clear]:hidden","[&::-webkit-inner-spin-button]:appearance-none","[&::-webkit-outer-spin-button]:appearance-none","[&::-webkit-inner-spin-button]:m-0","[&::-webkit-outer-spin-button]:m-0","[-moz-appearance:textfield]"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]}}}),l=e(["nd-input-prefix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]}}}),i=e(["nd-input-suffix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pr-2","text-sm"],medium:["pr-3","text-md"],large:["pr-4","text-lg"]}}}),d=e(["shrink-0"],{variants:{variant:{outlined:["mr-[-1px]","hover:z-1","focus:z-1","focus-within:z-1"],filled:[]},type:{string:["inline-flex","items-center","border-solid","border"],element:["rounded-r-none"]},size:{small:["h-6","text-sm","rounded-l-sm"],medium:["h-8","text-md","rounded-l-md"],large:["h-10","text-lg","rounded-l-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-surface","border-edge","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-on-brand"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),o=e(["shrink-0"],{variants:{type:{string:["inline-flex","items-center","border-solid","border"],element:["rounded-l-none","h-auto"]},size:{small:["h-6","text-sm","rounded-r-sm"],medium:["h-8","text-md","rounded-r-md"],large:["h-10","text-lg","rounded-r-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-surface","border-edge","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-on-brand"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),m=e(["group-focus-within:text-brand"]),p=e(["gap-2","items-center"],{variants:{block:{true:["flex","w-full"],false:["inline-flex"]}}}),u=e(["flex-auto","min-w-0","text-center"],{compoundVariants:[{size:"small",block:!1,className:["w-6"]},{size:"medium",block:!1,className:["w-8"]},{size:"large",block:!1,className:["w-10"]}]});export{o as appendClassNames,s as compositeClassNames,a as compositedInputWrapperClassNames,n as inputClassNames,r as inputWrapperClassNames,u as otpInputWrapperClassNames,p as otpWrapperClassNames,l as prefixClassNames,d as prependClassNames,m as searchIconClassNames,i as suffixClassNames};
1
+ import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-input-composite","inline-flex","items-stretch"],{variants:{block:{true:["flex","w-full"],false:""}}}),s=e(["flex-auto"],{variants:{prepended:{true:["rounded-l-none"],false:""},appended:{true:["rounded-r-none"],false:""}},compoundVariants:[{variant:"outlined",appended:!0,className:["mr-[-1px]","hover:z-1","focus-within:z-1"]}]}),n=e(["nd-input-wrapper","group",["inline-flex","items-center","box-border","font-nd","transition-colors","overflow-hidden"],["border","enabled:focus-within:border-brand"],t],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle","enabled:[&:hover:not(:focus-within)]:bg-muted-hover","enabled:[&:hover:not(:focus-within)]:border-muted"]},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:"disabled",false:""}}}),r=e(["nd-input","flex-auto","h-full","bg-transparent","border-none","outline-none","p-0","m-0","text-main","placeholder:text-subtle","disabled:cursor-not-allowed","[&::-ms-reveal]:hidden","[&::-ms-clear]:hidden","[&::-webkit-inner-spin-button]:appearance-none","[&::-webkit-outer-spin-button]:appearance-none","[&::-webkit-inner-spin-button]:m-0","[&::-webkit-outer-spin-button]:m-0","[-moz-appearance:textfield]"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]}}}),l=e(["nd-input-prefix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]}}}),i=e(["nd-input-suffix","shrink-0","h-full","inline-flex","items-center","text-muted"],{variants:{size:{small:["pr-2","text-sm"],medium:["pr-3","text-md"],large:["pr-4","text-lg"]}}}),d=e(["shrink-0"],{variants:{variant:{outlined:["mr-[-1px]","hover:z-1","focus:z-1","focus-within:z-1"],filled:[]},type:{string:["inline-flex","items-center","border"],element:["rounded-r-none"]},size:{small:["h-6","text-sm","rounded-l-sm"],medium:["h-8","text-md","rounded-l-md"],large:["h-10","text-lg","rounded-l-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-muted","border-main","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-brand-contrast"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),m=e(["shrink-0"],{variants:{type:{string:["inline-flex","items-center","border"],element:["rounded-l-none","h-auto"]},size:{small:["h-6","text-sm","rounded-r-sm"],medium:["h-8","text-md","rounded-r-md"],large:["h-10","text-lg","rounded-r-md"]}},compoundVariants:[{type:"string",variant:"outlined",className:["bg-muted","border-main","text-muted"]},{type:"string",variant:"filled",className:["bg-brand","border-transparent","text-brand-contrast"]},{type:"string",size:"small",className:["px-2"]},{type:"string",size:"medium",className:["px-3"]},{type:"string",size:"large",className:["px-4"]}]}),o=e(["group-focus-within:text-brand"]),p=e(["gap-2","items-center"],{variants:{block:{true:["flex","w-full"],false:["inline-flex"]}}}),u=e(["flex-auto","min-w-0","text-center"],{compoundVariants:[{size:"small",block:!1,className:["w-6"]},{size:"medium",block:!1,className:["w-8"]},{size:"large",block:!1,className:["w-10"]}]});export{m as appendClassNames,a as compositeClassNames,s as compositedInputWrapperClassNames,r as inputClassNames,n as inputWrapperClassNames,u as otpInputWrapperClassNames,p as otpWrapperClassNames,l as prefixClassNames,d as prependClassNames,o as searchIconClassNames,i as suffixClassNames};
@@ -1 +1 @@
1
- import{jsx as m}from"react/jsx-runtime";import{usePopupContext as n,useArrowContext as p}from"./contexts/index.js";import{arrowClassNames as l}from"./style/index.js";const r=()=>{const{size:o,arrowed:s,borderless:e,refs:a}=n(),{style:t,orientation:i}=p();return m("div",{className:l({size:o,arrowed:s,borderless:e,orientation:i}),style:t,ref:a.arrow})};r.displayName="Popup.Arrow";export{r as default};
1
+ import{jsx as n}from"react/jsx-runtime";import{usePopupContext as m,useArrowContext as p}from"./contexts/index.js";import{arrowClassNames as f}from"./style/index.js";const r=()=>{const{size:e,arrowed:o,inverse:s,refs:a}=m(),{style:t,orientation:i}=p();return n("div",{className:f({size:e,arrowed:o,inverse:s,orientation:i}),style:t,ref:a.arrow})};r.displayName="Popup.Arrow";export{r as default};
@@ -1 +1 @@
1
- import{jsxs as J,jsx as i}from"react/jsx-runtime";import{useControllableState as K,useEffectCallback as f,useIsomorphicLayoutEffect as M}from"@nild/hooks";import{isArray as Q,makeArray as W,isFunction as X}from"@nild/shared";import{Children as Y,isValidElement as Z,useState as _,useMemo as P,useRef as $}from"react";import G from"../transition/Transition.js";import{PopupProvider as ee,PortalProvider as re,ArrowProvider as te}from"./contexts/index.js";import oe from"./hooks/usePopup.js";import ae from"./Portal.js";import x from"./Trigger.js";const A=({children:E,placement:O,offset:R,action:p="click",size:d="medium",arrowed:h=!0,borderless:b=!1,delay:t=100,open:S,defaultOpen:v=!1,disabled:g,onOpen:w,onClose:k})=>{let l,y,n;Y.forEach(E,e=>{if(Z(e))switch(e.type){case x:y=e;break;case ae:n=e;break;default:l=e;break}});const[o,j]=_(v),[a,z]=K(S,v),[T,F=100]=Q(t)?t:[t,t],s=P(()=>new Set(W(p)),[p]),r=$(),[{triggerRef:u,portalRef:c,portalContext:I,arrowRef:L,arrowContext:N},{update:U,autoUpdate:V}]=oe({placement:O,offset:R}),m=f(e=>{g||z(H=>{const C=X(e)?e(H):e;return C?w?.():k?.(),C})}),q=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!0)},T))}),B=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!1)},F))}),D=P(()=>({actions:s,size:d,arrowed:h,borderless:b,refs:{trigger:u,portal:c,arrow:L},setOpen:m,enter:q,leave:B}),[s,d,h,b]);return M(()=>{if(a&&!o)j(!0);else if(a&&o&&u.current&&c.current)return V(u.current,c.current,U)},[a,o]),J(ee,{value:D,children:[y||l&&i(x,{children:l}),i(re,{value:I,children:i(te,{value:N,children:n&&i(G,{visible:a,children:o&&n})})})]})};A.displayName="Popup";export{A as default};
1
+ import{jsxs as J,jsx as i}from"react/jsx-runtime";import{useControllableState as K,useEffectCallback as f,useIsomorphicLayoutEffect as M}from"@nild/hooks";import{isArray as Q,makeArray as W,isFunction as X}from"@nild/shared";import{Children as Y,isValidElement as Z,useState as _,useMemo as P,useRef as $}from"react";import G from"../transition/Transition.js";import{PopupProvider as ee,PortalProvider as re,ArrowProvider as te}from"./contexts/index.js";import ae from"./hooks/usePopup.js";import oe from"./Portal.js";import x from"./Trigger.js";const A=({children:E,placement:O,offset:R,action:p="click",size:d="medium",arrowed:h=!0,inverse:v=!1,delay:t=100,open:S,defaultOpen:w=!1,disabled:g,onOpen:b,onClose:k})=>{let n,y,l;Y.forEach(E,e=>{if(Z(e))switch(e.type){case x:y=e;break;case oe:l=e;break;default:n=e;break}});const[a,j]=_(w),[o,z]=K(S,w),[T,F=100]=Q(t)?t:[t,t],s=P(()=>new Set(W(p)),[p]),r=$(),[{triggerRef:u,portalRef:c,portalContext:I,arrowRef:L,arrowContext:N},{update:U,autoUpdate:V}]=ae({placement:O,offset:R}),m=f(e=>{g||z(H=>{const C=X(e)?e(H):e;return C?b?.():k?.(),C})}),q=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!0)},T))}),B=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!1)},F))}),D=P(()=>({actions:s,size:d,arrowed:h,inverse:v,refs:{trigger:u,portal:c,arrow:L},setOpen:m,enter:q,leave:B}),[s,d,h,v]);return M(()=>{if(o&&!a)j(!0);else if(o&&a&&u.current&&c.current)return V(u.current,c.current,U)},[o,a]),J(ee,{value:D,children:[y||n&&i(x,{children:n}),i(re,{value:I,children:i(te,{value:N,children:l&&i(G,{visible:o,children:a&&l})})})]})};A.displayName="Popup";export{A as default};
@@ -1 +1 @@
1
- import{jsxs as M,jsx as P}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{mergeRefs as b,cnMerge as n,getDPR as g}from"@nild/shared";import{forwardRef as h,Children as R,isValidElement as j,cloneElement as w}from"react";import{createPortal as z}from"react-dom";import L from"./Arrow.js";import{usePopupContext as $,usePortalContext as k}from"./contexts/index.js";import{portalContentClassNames as A,portalClassNames as D}from"./style/index.js";const m=h(({className:i,style:p,children:f,container:u=document.body,...s},c)=>{var r;const{size:d,borderless:v,refs:x,enter:C,leave:N}=$(),{coords:l}=k(),a=R.toArray(f).find(o=>j(o)),y=t(o=>{var e;(e=s?.onMouseEnter)==null||e.call(s,o),C()}),E=t(o=>{var e;(e=s?.onMouseLeave)==null||e.call(s,o),N()});return a?z(M("div",{...s,className:n(D(),i),style:{transform:`translate(${l.x}px, ${l.y}px)`,...g()>=1.5&&{willChange:"transform"},...p},onMouseEnter:y,onMouseLeave:E,ref:b(x.portal,c),children:[w(a,{...a.props,className:n(A({size:d,borderless:v}),(r=a?.props)==null?void 0:r.className)}),P(L,{})]}),u):null});m.displayName="Popup.Portal";export{m as default};
1
+ import{jsxs as M,jsx as P}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{mergeRefs as g,cnMerge as n,getDPR as h}from"@nild/shared";import{forwardRef as R,Children as b,isValidElement as j,cloneElement as w}from"react";import{createPortal as z}from"react-dom";import L from"./Arrow.js";import{usePopupContext as $,usePortalContext as k}from"./contexts/index.js";import{portalContentClassNames as A,portalClassNames as D}from"./style/index.js";const m=R(({className:i,style:p,children:f,container:u=document.body,...s},c)=>{var r;const{size:d,inverse:v,refs:x,enter:C,leave:N}=$(),{coords:l}=k(),a=b.toArray(f).find(e=>j(e)),y=t(e=>{var o;(o=s?.onMouseEnter)==null||o.call(s,e),C()}),E=t(e=>{var o;(o=s?.onMouseLeave)==null||o.call(s,e),N()});return a?z(M("div",{...s,className:n(D(),i),style:{transform:`translate(${l.x}px, ${l.y}px)`,...h()>=1.5&&{willChange:"transform"},...p},onMouseEnter:y,onMouseLeave:E,ref:g(x.portal,c),children:[w(a,{...a.props,className:n(A({size:d,inverse:v}),(r=a?.props)==null?void 0:r.className)}),P(L,{})]}),u):null});m.displayName="Popup.Portal";export{m as default};
@@ -1,7 +1,7 @@
1
1
  import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
2
2
  import { ArrowOrientation, PopupProps, TriggerAction } from '../interfaces';
3
3
  import { Coords } from '@floating-ui/dom';
4
- export interface PopupContextValue extends Pick<PopupProps, 'size' | 'arrowed' | 'borderless'> {
4
+ export interface PopupContextValue extends Pick<PopupProps, 'size' | 'arrowed' | 'inverse'> {
5
5
  actions: Set<TriggerAction>;
6
6
  refs: {
7
7
  trigger: RefObject<Element>;
@@ -1,7 +1,7 @@
1
1
  import { ArrowOrientation, PopupProps, PortalProps } from '../interfaces';
2
2
  export declare const triggerClassNames: (props?: object | undefined) => string;
3
3
  export declare const portalClassNames: (props?: PortalProps | undefined) => string;
4
- export declare const portalContentClassNames: (props?: Pick<PopupProps, "size" | "borderless"> | undefined) => string;
5
- export declare const arrowClassNames: (props?: (Pick<PopupProps, "size" | "arrowed" | "borderless"> & {
4
+ export declare const portalContentClassNames: (props?: Pick<PopupProps, "size" | "inverse"> | undefined) => string;
5
+ export declare const arrowClassNames: (props?: (Pick<PopupProps, "size" | "arrowed" | "inverse"> & {
6
6
  orientation: ArrowOrientation;
7
7
  }) | undefined) => string;
@@ -1 +1 @@
1
- import{cva as r}from"@nild/shared";const e=r(["nd-popup-trigger"]),o=r(["nd-popup-portal",["absolute","top-0","left-0"]]),a=r(["bg-container","text-body","rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},borderless:{true:"",false:["outline-solid","outline-1","outline-edge"]}}}),s=r(["nd-popup-arrow","absolute","bg-container"],{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"]},borderless:{true:"",false:["border-solid","border-edge"]},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:[{borderless:!1,orientation:"up",className:["border-l-1","border-t-1"]},{borderless:!1,orientation:"down",className:["border-r-1","border-b-1"]},{borderless:!1,orientation:"left",className:["border-l-1","border-b-1"]},{borderless:!1,orientation:"right",className:["border-r-1","border-t-1"]}]});export{s as arrowClassNames,o as portalClassNames,a as portalContentClassNames,e as triggerClassNames};
1
+ import{cva as a}from"@nild/shared";const e=a(["nd-popup-trigger"]),r=a(["nd-popup-portal",["absolute","top-0","left-0"]]),s=a(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-page-inverse","text-main-inverse"],false:["bg-panel","text-main"]}}}),t=a(["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-page-inverse"],false:["bg-panel"]},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-subtle)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-subtle)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-subtle)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-subtle)]"]}]});export{t as arrowClassNames,r as portalClassNames,s as portalContentClassNames,e as triggerClassNames};
@@ -1 +1 @@
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",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};
1
+ import{jsxs as c,jsx as a}from"react/jsx-runtime";import{cnMerge as i}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 t=h(({className:o,children:n,...d},l)=>{const{variant:e,size:m,checked:s,setChecked:f}=N(),p=n??(r=>c("svg",{viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[a("circle",{cx:"10",cy:"10",className:i(x({variant:e,checked:r}))}),a("circle",{cx:"10",cy:"10",className:v({variant:e,checked:r})})]}));return c("div",{...d,className:i(u({size:m}),o),ref:l,children:[p(!!s),a("input",{type:"radio",className:C(),checked:s,onChange:f})]})});t.displayName="Radio.Indicator";export{t as default};
@@ -1 +1 @@
1
- import{cva as a}from"@nild/shared";import{DISABLED_CLS as e}from"../../_shared/style/index.js";const s=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:""}}}),r=a(["relative",["flex","items-center","justify-center"]],{variants:{size:{small:"size-3.5 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"}}}),l=a([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=a(["stroke-1","r-9","transition-[stroke,fill]"],{compoundVariants:[{checked:!0,variant:"solid",className:["fill-brand stroke-brand","group-enabled:group-hover:fill-brand-hover"]},{checked:!0,variant:"outlined",className:["fill-transparent stroke-brand"]},{checked:!1,className:["fill-transparent stroke-edge","group-enabled:group-hover:stroke-brand-hover"]}]}),i=a(["transition-[fill]"],{variants:{variant:{solid:"r-4.5",outlined:"r-5.5"}},compoundVariants:[{checked:!0,variant:"solid",className:["fill-on-brand"]},{checked:!0,variant:"outlined",className:["fill-brand"]},{checked:!1,className:["fill-transparent"]}]}),o=a(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=a(["nd-radio-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{i as defaultIndicatorInnerCircleClassNames,t as defaultIndicatorOuterCircleClassNames,n as groupClassNames,r as indicatorClassNames,l as indicatorInputClassNames,o as labelClassNames,s as radioClassNames};
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 text-sm",medium:"size-4 text-md",large:"size-4.5 text-lg"}}}),l=a([["absolute","inset-0","opacity-0"],["group-enabled:cursor-pointer","group-disabled:cursor-not-allowed"]]),t=a(["stroke-1","r-9","transition-[stroke,fill]","group-enabled:group-hover:stroke-brand-hover"],{compoundVariants:[{checked:!0,variant:"solid",className:["fill-brand stroke-brand","group-enabled:group-hover:fill-brand-hover"]},{checked:!0,variant:"outlined",className:["fill-transparent stroke-brand"]},{checked:!1,className:["fill-transparent stroke-main"]}]}),i=a(["transition-[fill]"],{variants:{variant:{solid:"r-4.5",outlined:"r-5.5"}},compoundVariants:[{checked:!0,variant:"solid",className:["fill-brand-contrast"]},{checked:!0,variant:"outlined",className:["fill-brand","group-enabled:group-hover:fill-brand-hover"]},{checked:!1,className:["fill-transparent"]}]}),o=a(["text-sm"],{variants:{size:{small:"text-sm",medium:"text-md",large:"text-lg"}}}),n=a(["nd-radio-group",["flex","gap-x-4","gap-y-2"]],{variants:{direction:{horizontal:"flex-row flex-wrap",vertical:"flex-col"}}});export{i as defaultIndicatorInnerCircleClassNames,t as defaultIndicatorOuterCircleClassNames,n as groupClassNames,s as indicatorClassNames,l as indicatorInputClassNames,o as labelClassNames,r as radioClassNames};
@@ -1 +1 @@
1
- import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const t=e(["nd-switch","group","h-[var(--nd-switch-height)]","transition-[outline-color]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],a],{variants:{variant:{solid:"",outlined:["outline-solid","outline"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}},compoundVariants:[{checked:!0,variant:"outlined",className:["outline-brand"]},{checked:!1,variant:"outlined",className:["outline-edge","enabled:hover:outline-brand-hover"]}]}),n=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-on-brand"]],{variants:{type:{checked:["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"],unchecked:["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]","-mt-[var(--nd-switch-height)]"]}},compoundVariants:[{type:"checked",checked:!0,className:["ms-0","me-0"]},{type:"checked",checked:!1,className:["-ms-[100%]","me-[100%]"]},{type:"unchecked",checked:!0,className:["ms-[100%]","-me-[100%]"]},{type:"unchecked",checked:!1,className:["ms-0","me-0"]},{variant:"solid",checked:!0,className:["bg-brand","group-enabled:group-hover:bg-brand-hover"]},{variant:"solid",checked:!1,className:["bg-fill","group-enabled:group-hover:bg-fill-hover"]},{variant:"outlined",className:["bg-transparent"]}]}),r=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-on-brand","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-on-brand","top-0"],outlined:["bg-brand","top-0","group-enabled:group-hover:bg-brand-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as switchClassNames,r as thumbClassNames,n as trackClassNames};
1
+ import{cva as e}from"@nild/shared";import{DISABLED_CLS as a}from"../../_shared/style/index.js";const t=e(["nd-switch","group","h-[var(--nd-switch-height)]","transition-[outline-color]",["relative","inline-block","font-nd","overflow-hidden","cursor-pointer"],a],{variants:{variant:{solid:"",outlined:["outline-solid","outline"]},size:{small:["min-w-8","text-sm"],medium:["min-w-10","text-md"],large:["min-w-12","text-lg"]},shape:{round:"rounded-full",square:"rounded-md"}},compoundVariants:[{checked:!0,variant:"outlined",className:["outline-brand"]},{checked:!1,variant:"outlined",className:["outline-main","enabled:hover:outline-brand-hover"]}]}),n=e(["h-[var(--nd-switch-height)]","transition-[margin-inline,background-color]",["flex","justify-center","items-center"],["text-center","text-brand-contrast"]],{variants:{type:{checked:["ps-[calc(var(--nd-switch-height)/3)]","pe-[calc(var(--nd-switch-height)*1.1)]"],unchecked:["ps-[calc(var(--nd-switch-height)*1.1)]","pe-[calc(var(--nd-switch-height)/3)]","-mt-[var(--nd-switch-height)]"]}},compoundVariants:[{type:"checked",checked:!0,className:["ms-0","me-0"]},{type:"checked",checked:!1,className:["-ms-[100%]","me-[100%]"]},{type:"unchecked",checked:!0,className:["ms-[100%]","-me-[100%]"]},{type:"unchecked",checked:!1,className:["ms-0","me-0"]},{variant:"solid",checked:!0,className:["bg-brand","group-enabled:group-hover:bg-brand-hover"]},{variant:"solid",checked:!1,className:["bg-emphasized","group-enabled:group-hover:bg-emphasized-hover"]},{variant:"outlined",className:["bg-transparent"]}]}),r=e(["h-[var(--nd-switch-height)]",["flex","justify-center","items-center"],["absolute","aspect-square","scale-80"],["text-brand-contrast","transition-[left,background-color]"]],{variants:{variant:{solid:["bg-brand-contrast","top-0"],outlined:["bg-brand","top-0","group-enabled:group-hover:bg-brand-hover"]},shape:{round:"rounded-full",square:"rounded-md"},checked:{true:"left-[calc(100%-var(--nd-switch-height))]",false:"left-0"}}});export{t as switchClassNames,r as thumbClassNames,n as trackClassNames};
package/dist/tailwind.css CHANGED
@@ -1 +1 @@
1
- @theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .003; --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(94% var(--nd-brand-c) var(--nd-brand-h)), oklch(21% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(90% var(--nd-brand-c) var(--nd-brand-h)), oklch(26% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(85% var(--nd-brand-c) var(--nd-brand-h)), oklch(32% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(76% var(--nd-brand-c) var(--nd-brand-h)), oklch(42% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(67% var(--nd-brand-c) var(--nd-brand-h)), oklch(50% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(58% var(--nd-brand-c) var(--nd-brand-h)), oklch(58% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(67% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-70: light-dark( oklch(42% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(35% var(--nd-brand-c) var(--nd-brand-h)), oklch(85% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(25% var(--nd-brand-c) var(--nd-brand-h)), oklch(93% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(15% var(--nd-brand-c) var(--nd-brand-h)), oklch(98% 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% 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(94% 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(90% 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(85% 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(76% 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(67% 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(58% 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(42% 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(35% 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(25% 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)) ); }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: var(--nd-color-brand-70); --color-brand-active: var(--nd-color-brand-80); --color-brand-subtle: var(--nd-color-brand-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --color-surface: var(--nd-color-neutral-5); --color-surface-hover: var(--nd-color-neutral-10); --color-surface-active: var(--nd-color-neutral-15); --color-edge: var(--nd-color-neutral-30); --color-split: var(--nd-color-neutral-20); --color-on-brand: var(--nd-color-neutral-0); --background-color-page: var(--nd-color-neutral-0); --background-color-container: var(--nd-color-neutral-5); --background-color-fill: var(--nd-color-neutral-20); --background-color-fill-hover: var(--nd-color-neutral-30); --text-color-body: var(--nd-color-neutral-100); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-color-link: var(--color-brand); --text-color-link-hover: var(--color-brand-hover); --text-color-link-active: var(--color-brand-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;}}
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(94% var(--nd-brand-c) var(--nd-brand-h)), oklch(21% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(90% var(--nd-brand-c) var(--nd-brand-h)), oklch(26% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(85% var(--nd-brand-c) var(--nd-brand-h)), oklch(32% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(76% var(--nd-brand-c) var(--nd-brand-h)), oklch(42% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(67% var(--nd-brand-c) var(--nd-brand-h)), oklch(50% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(58% var(--nd-brand-c) var(--nd-brand-h)), oklch(58% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(67% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-70: light-dark( oklch(42% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(35% var(--nd-brand-c) var(--nd-brand-h)), oklch(85% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(25% var(--nd-brand-c) var(--nd-brand-h)), oklch(93% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(15% var(--nd-brand-c) var(--nd-brand-h)), oklch(98% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99.5% 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(98% 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(96.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(94% 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(91% 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(84% 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(73% 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(30% 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(20% 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-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: var(--nd-color-brand-50); --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)); --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-sm: .125rem; --radius-md: .25rem; --radius-lg: .375rem; --shadow-sm: 0 0 0 1px var(--border-color-subtle), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 1px var(--border-color-subtle), 0 3px 6px -1px var(--nd-color-shadow-key), 0 1px 3px -1px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 1px var(--border-color-subtle), 0 8px 16px -2px var(--nd-color-shadow-key), 0 3px 6px -2px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 1px var(--border-color-subtle), 0 16px 24px -4px var(--nd-color-shadow-key), 0 6px 12px -4px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 1px var(--border-color-subtle), 0 24px 36px -6px var(--nd-color-shadow-key), 0 10px 16px -6px 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 r-*{r: --value(number);}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
@@ -1 +1 @@
1
- import{jsx as t}from"react/jsx-runtime";import r from"../popup/index.js";const o=e=>t(r,{size:"small",placement:"top",...e,borderless:!0,action:"hover"});o.displayName="Tooltip";export{o as default};
1
+ import{jsx as t}from"react/jsx-runtime";import a from"../popup/index.js";const o=e=>t(a,{size:"small",placement:"top",...e,inverse:!0,action:"hover"});o.displayName="Tooltip";export{o as default};
@@ -1 +1 @@
1
- import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-link",["font-nd","text-link","text-[length:inherit]","cursor-pointer","enabled:hover:text-link-hover","enabled:active:text-link-active"],t],{variants:{disabled:{true:"disabled",false:""},underlined:{true:"underline",false:"no-underline"}}}),r=e(["nd-paragraph",["font-nd","text-body","text-[length:inherit]"],["mt-0","mb-[1em]"]]),s=e(["nd-text",["font-nd","text-[length:inherit]"],t],{variants:{secondary:{true:"text-muted",false:"text-body"},disabled:{true:"disabled",false:""}}}),d=e("",{variants:{tag:{strong:"",del:"",u:["underline"],i:"",mark:["bg-brand","text-on-brand"],code:[["ps-1.5","pe-1.5"],["bg-brand-subtle","text-sm","rounded-sm"],["border","border-solid","border-brand-subtle"]],kbd:[["ps-1.5","pe-1.5"],["text-sm","rounded-sm"],["border","border-b-2","border-solid","border-brand-subtle"]]}}}),n=e(["nd-title",["font-nd","font-semibold","text-body"],["mt-[1em]","mb-[0.5em]"]],{variants:{level:{1:["text-6xl"],2:["text-5xl"],3:["text-4xl"],4:["text-3xl"],5:["text-2xl"],6:["text-lg"]}}}),l=e(["nd-typography",["font-nd","text-md"]]);export{a as linkClassNames,r as paragraphClassNames,s as textClassNames,d as textTagClassNames,n as titleClassNames,l as typographyClassNames};
1
+ import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const a=e(["nd-link",["font-nd","text-brand","text-[length:inherit]","cursor-pointer","enabled:hover:text-brand-hover","enabled:active:text-brand-active"],t],{variants:{disabled:{true:"disabled",false:""},underlined:{true:"underline",false:"no-underline"}}}),n=e(["nd-paragraph",["font-nd","text-main","text-[length:inherit]"],["mt-0","mb-[1em]"]]),r=e(["nd-text",["font-nd","text-[length:inherit]"],t],{variants:{secondary:{true:"text-muted",false:"text-main"},disabled:{true:"disabled",false:""}}}),s=e("",{variants:{tag:{strong:"",del:"",u:["underline"],i:"",mark:["bg-brand","text-brand-contrast"],code:[["ps-1.5","pe-1.5"],["bg-brand-subtle","text-sm","rounded-sm"],["border","border-brand-subtle"]],kbd:[["ps-1.5","pe-1.5"],["text-sm","rounded-sm"],["border","border-b-2","border-brand-subtle"]]}}}),d=e(["nd-title",["font-nd","font-semibold","text-main"],["mt-[1em]","mb-[0.5em]"]],{variants:{level:{1:["text-6xl"],2:["text-5xl"],3:["text-4xl"],4:["text-3xl"],5:["text-2xl"],6:["text-lg"]}}}),l=e(["nd-typography",["font-nd","text-md"]]);export{a as linkClassNames,n as paragraphClassNames,r as textClassNames,s as textTagClassNames,d as titleClassNames,l as typographyClassNames};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nild/components",
3
3
  "private": false,
4
- "version": "0.0.33",
4
+ "version": "0.0.35",
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.14",
34
+ "@nild/hooks": "0.0.16",
35
35
  "@nild/icons": "0.0.16",
36
- "@nild/hooks": "0.0.16"
36
+ "@nild/shared": "0.0.14"
37
37
  },
38
38
  "scripts": {
39
39
  "build": "vite build --mode PROD",