@nild/components 0.0.33 → 0.0.34

package/dist/popup/Arrow.js

@@ -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};
+import{jsx as m}from"react/jsx-runtime";import{usePopupContext as p,useArrowContext as l}from"./contexts/index.js";import{arrowClassNames as d}from"./style/index.js";const r=()=>{const{size:e,arrowed:s,inverse:o,borderless:a,refs:t}=p(),{style:i,orientation:n}=l();return m("div",{className:d({size:e,arrowed:s,inverse:o,borderless:a,orientation:n}),style:i,ref:t.arrow})};r.displayName="Popup.Arrow";export{r as default};

package/dist/popup/Popup.js

@@ -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};
+import{jsxs as K,jsx as i}from"react/jsx-runtime";import{useControllableState as M,useEffectCallback as f,useIsomorphicLayoutEffect as Q}from"@nild/hooks";import{isArray as W,makeArray as X,isFunction as Y}from"@nild/shared";import{Children as Z,isValidElement as _,useState as $,useMemo as P,useRef as H}from"react";import ee from"../transition/Transition.js";import{PopupProvider as re,PortalProvider as te,ArrowProvider as ae}from"./contexts/index.js";import oe from"./hooks/usePopup.js";import se from"./Portal.js";import x from"./Trigger.js";const E=({children:O,placement:R,offset:S,action:p="click",size:d="medium",arrowed:h=!0,inverse:g=!1,borderless:v=!1,delay:t=100,open:j,defaultOpen:b=!1,disabled:z,onOpen:w,onClose:k})=>{let l,y,n;Z.forEach(O,e=>{if(_(e))switch(e.type){case x:y=e;break;case se:n=e;break;default:l=e;break}});const[a,A]=$(b),[o,T]=M(j,b),[F,I=100]=W(t)?t:[t,t],s=P(()=>new Set(X(p)),[p]),r=H(),[{triggerRef:u,portalRef:c,portalContext:L,arrowRef:N,arrowContext:U},{update:V,autoUpdate:q}]=oe({placement:R,offset:S}),m=f(e=>{z||T(J=>{const C=Y(e)?e(J):e;return C?w?.():k?.(),C})}),B=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!0)},F))}),D=f(()=>{s.has("hover")&&(r.current&&clearTimeout(r.current),r.current=setTimeout(()=>{m(!1)},I))}),G=P(()=>({actions:s,size:d,arrowed:h,inverse:g,borderless:v,refs:{trigger:u,portal:c,arrow:N},setOpen:m,enter:B,leave:D}),[s,d,h,v]);return Q(()=>{if(o&&!a)A(!0);else if(o&&a&&u.current&&c.current)return q(u.current,c.current,V)},[o,a]),K(re,{value:G,children:[y||l&&i(x,{children:l}),i(te,{value:L,children:i(ae,{value:U,children:n&&i(ee,{visible:o,children:a&&n})})})]})};E.displayName="Popup";export{E as default};

package/dist/popup/Portal.js

@@ -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};
+import{jsxs as P,jsx as b}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 j,isValidElement as w,cloneElement as z}from"react";import{createPortal as L}from"react-dom";import $ from"./Arrow.js";import{usePopupContext as k,usePortalContext as A}from"./contexts/index.js";import{portalContentClassNames as D,portalClassNames as V}from"./style/index.js";const m=R(({className:i,style:p,children:f,container:u=document.body,...s},c)=>{var o;const{size:d,inverse:v,borderless:x,refs:C,enter:N,leave:y}=k(),{coords:l}=A(),e=j.toArray(f).find(r=>w(r)),E=t(r=>{var a;(a=s?.onMouseEnter)==null||a.call(s,r),N()}),M=t(r=>{var a;(a=s?.onMouseLeave)==null||a.call(s,r),y()});return e?L(P("div",{...s,className:n(V(),i),style:{transform:`translate(${l.x}px, ${l.y}px)`,...h()>=1.5&&{willChange:"transform"},...p},onMouseEnter:E,onMouseLeave:M,ref:g(C.portal,c),children:[z(e,{...e.props,className:n(D({size:d,inverse:v,borderless:x}),(o=e?.props)==null?void 0:o.className)}),b($,{})]}),u):null});m.displayName="Popup.Portal";export{m as default};

package/dist/popup/contexts/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties, Dispatch, RefObject, SetStateAction } from 'react';
 import { ArrowOrientation, PopupProps, TriggerAction } from '../interfaces';
 import { Coords } from '@floating-ui/dom';
-export interface PopupContextValue extends Pick<PopupProps, 'size' | 'arrowed' | 'borderless'> {
+export interface PopupContextValue extends Pick<PopupProps, 'size' | 'arrowed' | 'inverse' | 'borderless'> {
     actions: Set<TriggerAction>;
     refs: {
         trigger: RefObject<Element>;

package/dist/popup/style/index.d.ts

@@ -1,7 +1,7 @@
 import { ArrowOrientation, PopupProps, PortalProps } from '../interfaces';
 export declare const triggerClassNames: (props?: object | undefined) => string;
 export declare const portalClassNames: (props?: PortalProps | undefined) => string;
-export declare const portalContentClassNames: (props?: Pick<PopupProps, "size" | "borderless"> | undefined) => string;
-export declare const arrowClassNames: (props?: (Pick<PopupProps, "size" | "arrowed" | "borderless"> & {
+export declare const portalContentClassNames: (props?: Pick<PopupProps, "size" | "inverse" | "borderless"> | undefined) => string;
+export declare const arrowClassNames: (props?: (Pick<PopupProps, "size" | "arrowed" | "inverse" | "borderless"> & {
     orientation: ArrowOrientation;
 }) | undefined) => string;

package/dist/popup/style/index.js

@@ -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};
+import{cva as e}from"@nild/shared";const r=e(["nd-popup-trigger"]),s=e(["nd-popup-portal",["absolute","top-0","left-0"]]),a=e(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-inverse","text-inverse"],false:["bg-panel","text-body"]},borderless:{true:"",false:["outline-solid","outline-1","outline-edge"]}}}),o=e(["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-inverse"],false:["bg-panel"]},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{o as arrowClassNames,s as portalClassNames,a as portalContentClassNames,r as triggerClassNames};

package/dist/tailwind.css

@@ -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;}}
+@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-panel: 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); --background-color-inverse: var(--nd-color-neutral-80); --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-inverse: var(--nd-color-neutral-0); --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;}}

package/dist/tooltip/Tooltip.js

@@ -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};
+import{jsx as r}from"react/jsx-runtime";import s from"../popup/index.js";const e=o=>r(s,{size:"small",placement:"top",...o,inverse:!0,borderless:!0,action:"hover"});e.displayName="Tooltip";export{e as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.33",
+  "version": "0.0.34",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -32,8 +32,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@nild/shared": "0.0.14",
-    "@nild/icons": "0.0.16",
-    "@nild/hooks": "0.0.16"
+    "@nild/hooks": "0.0.16",
+    "@nild/icons": "0.0.16"
   },
   "scripts": {
     "build": "vite build --mode PROD",