@nild/components 0.0.50 → 0.0.51

package/dist/alert/Alert.d.ts

@@ -0,0 +1,6 @@
+import { AlertProps } from './interfaces';
+/**
+ * @category Components
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Alert;

package/dist/alert/Alert.js

@@ -0,0 +1 @@
+import{jsxs as m,jsx as r}from"react/jsx-runtime";import{useControllableState as w}from"@nild/hooks";import{Icon as n}from"@nild/icons";import A from"@nild/icons/Caution";import g from"@nild/icons/Close";import k from"@nild/icons/Error";import z from"@nild/icons/Info";import M from"@nild/icons/Success";import{cnMerge as S}from"@nild/shared";import{forwardRef as V}from"react";import B from"../button/index.js";import e from"./style/index.js";const E={info:z,success:M,warning:A,error:k},c=V(({className:p,children:l,title:a,icon:i,role:f="alert",type:o="info",closable:d=!1,visible:u,defaultVisible:h=!0,closeAriaLabel:b="Close",onClose:s,...v},N)=>{const[y,x]=w(u,h);if(!y)return null;const C=r(n,{component:E[o],variant:"filled"}),t=i===void 0?C:i,j=q=>{x(!1),s?.(q)};return m("div",{...v,className:S(e.alert({type:o}),p),ref:N,role:f,children:[t!==!1&&r("span",{"aria-hidden":"true",className:e.icon({type:o}),children:t}),m("div",{className:e.content(),children:[a&&r("div",{className:e.title({type:o}),children:a}),l&&r("div",{className:e.body(),children:l})]}),d&&r(B,{"aria-label":b,className:e.close(),equal:!0,onClick:j,shape:"square",size:"small",variant:"text",children:r(n,{component:g})})]})});c.displayName="Alert";export{c as default};

package/dist/alert/index.d.ts

@@ -0,0 +1,3 @@
+import { default as Alert } from './Alert';
+export type * from './interfaces';
+export default Alert;

package/dist/alert/index.js

@@ -0,0 +1 @@
+import t from"./Alert.js";export{t as default};

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

@@ -0,0 +1,10 @@
+import { AlertProps } from '../interfaces';
+declare const _default: {
+    alert: (props?: Pick<AlertProps, "type"> | undefined) => string;
+    icon: (props?: Pick<AlertProps, "type"> | undefined) => string;
+    content: (props?: object | undefined) => string;
+    title: (props?: Pick<AlertProps, "type"> | undefined) => string;
+    body: (props?: object | undefined) => string;
+    close: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/alert/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";const t=e(["nd-alert",["flex","w-full","items-start","gap-3"],["rounded-md","border","px-4","py-3"],["font-nd","text-md","text-main"]],{variants:{type:{info:["border-brand-muted","bg-brand-subtle"],success:["border-success-muted","bg-success-subtle"],warning:["border-warning-muted","bg-warning-subtle"],error:["border-error-muted","bg-error-subtle"]}}}),r=e(["nd-alert-icon","inline-flex","size-[1lh]","shrink-0","items-center","justify-center","leading-[inherit]"],{variants:{type:{info:"text-brand",success:"text-success",warning:"text-warning",error:"text-error"}}}),n=e(["nd-alert-content","flex","min-w-0","flex-1","flex-col","gap-1"]),s=e(["nd-alert-title","font-medium","leading-[inherit]"],{variants:{type:{info:"text-brand",success:"text-success",warning:"text-warning",error:"text-error"}}}),i=e(["nd-alert-body","text-muted","leading-[inherit]"]),a=e(["nd-alert-close","-mt-px","ms-1","shrink-0","text-muted","enabled:hover:text-main"]),d={alert:t,icon:r,content:n,title:s,body:i,close:a};export{d as default};

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { default as Alert } from './alert';
 import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
 import { default as Divider } from './divider';
@@ -15,4 +16,4 @@ import { default as Tooltip } from './tooltip';
 import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
 import { default as Watermark } from './watermark';
-export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Segment, Select, Switch, Tabs, Tooltip, Transition, TransitionStatus, Typography, Watermark, };
+export { Alert, Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Segment, Select, Switch, Tabs, Tooltip, Transition, TransitionStatus, Typography, Watermark, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/index.js";import{default as t}from"./checkbox/index.js";import{default as o}from"./divider/Divider.js";import{default as r}from"./field/index.js";import{default as s}from"./form/index.js";import{default as m}from"./input/index.js";import{default as f}from"./modal/index.js";import{default as i}from"./popover/index.js";import{default as e}from"./radio/index.js";import{default as p}from"./segment/index.js";import{default as l}from"./select/index.js";import{default as u}from"./switch/index.js";import{default as d}from"./tabs/index.js";import{default as n}from"./tooltip/index.js";import{default as T}from"./transition/Transition.js";import{TransitionStatus as S}from"./transition/interfaces/index.js";import{default as c}from"./typography/index.js";import{default as b}from"./watermark/Watermark.js";/* empty css            */export{a as Button,t as Checkbox,o as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Segment,l as Select,u as Switch,d as Tabs,n as Tooltip,T as Transition,S as TransitionStatus,c as Typography,b as Watermark};
+import{default as a}from"./alert/Alert.js";import{default as t}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as r}from"./divider/Divider.js";import{default as s}from"./field/index.js";import{default as m}from"./form/index.js";import{default as f}from"./input/index.js";import{default as i}from"./modal/index.js";import{default as e}from"./popover/index.js";import{default as p}from"./radio/index.js";import{default as l}from"./segment/index.js";import{default as d}from"./select/index.js";import{default as u}from"./switch/index.js";import{default as n}from"./tabs/index.js";import{default as T}from"./tooltip/index.js";import{default as S}from"./transition/Transition.js";import{TransitionStatus as c}from"./transition/interfaces/index.js";import{default as b}from"./typography/index.js";import{default as h}from"./watermark/Watermark.js";/* empty css            */export{a as Alert,t as Button,o as Checkbox,r as Divider,s as Field,m as Form,f as Input,i as Modal,e as Popover,p as Radio,l as Segment,d as Select,u as Switch,n as Tabs,T as Tooltip,S as Transition,c as TransitionStatus,b as Typography,h as Watermark};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) 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% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) 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-10); --color-brand-subtle-hover: var(--nd-color-brand-15); --color-brand-subtle-active: var(--nd-color-brand-20); --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{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}
+@theme static{ --nd-brand-h: 255; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)), oklch(14% calc(var(--nd-brand-c) * .08) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)), oklch(17% calc(var(--nd-brand-c) * .12) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)), oklch(20% calc(var(--nd-brand-c) * .18) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)), oklch(25% calc(var(--nd-brand-c) * .24) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)), oklch(30% calc(var(--nd-brand-c) * .34) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)), oklch(38% calc(var(--nd-brand-c) * .5) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)), oklch(46% calc(var(--nd-brand-c) * .68) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% calc(var(--nd-brand-c) * .86) var(--nd-brand-h)), oklch(52% calc(var(--nd-brand-c) * .86) 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% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)), oklch(66% calc(var(--nd-brand-c) * .94) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)), oklch(76% calc(var(--nd-brand-c) * .78) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)), oklch(88% calc(var(--nd-brand-c) * .55) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% calc(var(--nd-brand-c) * .36) var(--nd-brand-h)), oklch(96% calc(var(--nd-brand-c) * .36) 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-muted: light-dark(var(--nd-color-brand-30), var(--nd-color-brand-40)); --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-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( oklch(from var(--color-success) calc(l + .06) calc(c*.86) h), oklch(from var(--color-success) calc(l + .08) calc(c*.94) h) ); --color-success-muted: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-success-subtle: light-dark( oklch(from var(--color-success) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-success) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( oklch(from var(--color-warning) calc(l + .06) calc(c*.86) h), oklch(from var(--color-warning) calc(l + .08) calc(c*.94) h) ); --color-warning-muted: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-warning-subtle: light-dark( oklch(from var(--color-warning) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-warning) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( oklch(from var(--color-error) calc(l + .06) calc(c*.86) h), oklch(from var(--color-error) calc(l + .08) calc(c*.94) h) ); --color-error-muted: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.476)) calc(c/2) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.727) calc(c*.68) h) ); --color-error-subtle: light-dark( oklch(from var(--color-error) calc(1 - ((1 - l)*.119)) calc(c*.18) h), oklch(from var(--color-error) calc(.14 + (l - .14)*.136) calc(c*.18) h) ); --color-error-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-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-muted),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-muted),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&:where(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}@custom-variant disabled-visual{&:where(:disabled,[aria-disabled="true"],[data-disabled]):not(:where(.nd-disabled-carrier:where(:disabled,[aria-disabled="true"],[data-disabled])) :where(:disabled,[aria-disabled="true"],[data-disabled])) {@slot;}}@custom-variant enabled{&:not(:disabled,[aria-disabled="true"],[data-disabled]) {@slot;}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nild/components",
   "private": false,
-  "version": "0.0.50",
+  "version": "0.0.51",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {