@nild/components 0.0.50 → 0.0.52

package/dist/_shared/utils/register-slots/index.d.ts

@@ -23,6 +23,7 @@ interface CollectSlotsResult<Schema extends SlotSchema> {
         [K in keyof Schema]: SlotValue<Schema[K]>;
     };
     plainChildren: PlainChild[];
+    restChildren: ReactNode[];
 }
 declare const registerSlots: <Schema extends SlotSchema>(schema: Schema) => (children: ReactNode) => CollectSlotsResult<Schema>;
 export default registerSlots;

package/dist/_shared/utils/register-slots/index.js

@@ -1 +1 @@
-import{Children as c,isValidElement as a,Fragment as h}from"react";const m=f=>{const o=Object.entries(f);return p=>{const l=o.reduce((n,[t,e])=>(n[t]=e.multiple?{el:[],seq:[]}:{el:null,seq:-1},n),{}),i=[];let r=0;const u=n=>{c.forEach(n,t=>{if(!(t==null||typeof t=="boolean")){if(a(t)&&t.type===h){u(t.props.children);return}if(typeof t=="string"||typeof t=="number"){i.push({content:t,seq:r}),r+=1;return}if(!a(t)){r+=1;return}for(const[e,s]of o)if(s.isMatched(t)){s.multiple?(l[e].el.push(t),l[e].seq.push(r)):(l[e].el===null||(s.strategy??"last")==="last")&&(l[e].el=t,l[e].seq=r);break}r+=1}})};return u(p),{slots:l,plainChildren:i}}};export{m as default};
+import{Children as f,isValidElement as h,Fragment as m}from"react";const y=c=>{const o=Object.entries(c);return d=>{const r=o.reduce((n,[t,u])=>(n[t]=u.multiple?{el:[],seq:[]}:{el:null,seq:-1},n),{}),p=[],l=[];let s=0;const a=n=>{f.forEach(n,t=>{if(t==null||typeof t=="boolean")return;if(h(t)&&t.type===m){a(t.props.children);return}if(typeof t=="string"||typeof t=="number"){p.push({content:t,seq:s}),l.push(t),s+=1;return}if(!h(t)){l.push(t),s+=1;return}let u=!1;for(const[e,i]of o)if(i.isMatched(t)){u=!0,i.multiple?(r[e].el.push(t),r[e].seq.push(s)):(r[e].el===null||(i.strategy??"last")==="last")&&(r[e].el=t,r[e].seq=s);break}!u&&l.push(t),s+=1})};return a(d),{slots:r,plainChildren:p,restChildren:f.toArray(l)}}};export{y as default};

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

package/dist/alert/Icon.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { IconProps } from './interfaces';
+export declare const isIconElement: (child: ReactNode) => child is ReactElement<IconProps>;
+declare const Icon: import('react').ForwardRefExoticComponent<IconProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Icon;

package/dist/alert/Icon.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{isNil as m,cnMerge as l}from"@nild/shared";import{forwardRef as n,isValidElement as p}from"react";import{useAlertContext as c}from"./contexts/index.js";import f from"./style/index.js";const d=e=>p(e)&&e.type===s,s=n(({className:e,children:r,...a},o)=>{const{type:t}=c();return m(r)||r===!1?null:i("span",{...a,"aria-hidden":"true",className:l(f.icon({type:t}),e),ref:o,children:r})});s.displayName="Alert.Icon";export{s as default,d as isIconElement};

package/dist/alert/Title.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { TitleProps } from './interfaces';
+export declare const isTitleElement: (child: ReactNode) => child is ReactElement<TitleProps>;
+declare const Title: import('react').ForwardRefExoticComponent<TitleProps & import('react').RefAttributes<HTMLDivElement>>;
+export default Title;

package/dist/alert/Title.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as l}from"@nild/shared";import{forwardRef as o,isValidElement as p}from"react";import{useAlertContext as f}from"./contexts/index.js";import n from"./style/index.js";const c=e=>p(e)&&e.type===t,t=o(({className:e,children:r,...s},a)=>{const{type:m}=f();return i("div",{...s,className:l(n.title({type:m}),e),ref:a,children:r})});t.displayName="Alert.Title";export{t as default,c as isTitleElement};

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

@@ -0,0 +1,7 @@
+import { AlertType } from '../interfaces';
+declare const AlertProvider: import('react').Provider<{
+    type: AlertType;
+}>, useAlertContext: () => {
+    type: AlertType;
+};
+export { AlertProvider, useAlertContext };

package/dist/alert/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as e}from"@nild/shared";const[t,o]=e({defaultValue:{type:"info"}});export{t as AlertProvider,o as useAlertContext};

package/dist/alert/index.d.ts

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

package/dist/alert/index.js

@@ -0,0 +1 @@
+import o from"./Alert.js";import t from"./Icon.js";import r from"./Title.js";const m=Object.assign(o,{Icon:t,Title:r});export{m 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"]),a=e(["nd-alert-title","font-medium","leading-[inherit]"],{variants:{type:{info:"text-brand",success:"text-success",warning:"text-warning",error:"text-error"}}}),s=e(["nd-alert-body","text-muted","leading-[inherit]"]),i=e(["nd-alert-close","-mt-px","ms-1","shrink-0","text-muted","enabled:hover:text-brand","enabled:hover:bg-transparent","enabled:active:bg-transparent"]),d={alert:t,icon:r,content:n,title:a,body:s,close:i};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/index.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.52",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {