@nild/components 0.0.40 → 0.0.41

package/dist/field/Field.d.ts

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

package/dist/field/Field.js

@@ -0,0 +1 @@
+import{jsx as d,jsxs as p}from"react/jsx-runtime";import{cnMerge as V}from"@nild/shared";import{forwardRef as j,cloneElement as w,isValidElement as I}from"react";import H from"../_shared/utils/merge-handlers/index.js";import L from"../_shared/utils/register-slots/index.js";import{useFormContext as P}from"../form/contexts/index.js";import{FieldProvider as S}from"./contexts/index.js";import{isHelperElement as u}from"./Helper.js";import{isLabelElement as c}from"./Label.js";import k,{isRequiredIndicatorElement as f}from"./RequiredIndicator.js";import z,{isStatusElement as h}from"./Status.js";import b from"./style/index.js";const D=e=>I(e)&&e.type===m,Z=L({label:{isMatched:c},helper:{isMatched:u},status:{isMatched:h},requiredIndicator:{isMatched:f},control:{isMatched:e=>!c(e)&&!u(e)&&!h(e)&&!f(e),strategy:"first"}}),m=j((e,v)=>{const s=P(),{className:E,children:M,name:a,required:g,disabled:q,bind:y="value",...x}=e,{slots:t}=Z(M),l=a&&s?s.getMeta(a):{},n=t.status.el,o=n?.props.type??l.status,C=g??!1,i=q??s?.disabled??!1,r=t.control.el,F=r&&w(r,{...a&&s?(()=>{const N=typeof r.props.onChange=="function"?r.props.onChange:void 0;return{[y]:s.getValue(a),onChange:H(N,(...R)=>{s.setValue(a,R[0])})}})():{},...i&&r.props.disabled===void 0?{disabled:i}:{}});return d(S,{value:{status:o,issue:l.issue,required:C,disabled:i},children:p("div",{...x,className:V(b.field({disabled:i,status:o}),E),"data-status":o,ref:v,children:[t.label.el&&p("div",{className:b.labelRow(),children:[t.label.el,t.requiredIndicator.el??d(k,{})]}),F,t.helper.el,t.status.el??(l.issue?d(z,{}):null)]})})});m.displayName="Field";export{m as default,D as isFieldElement};

package/dist/field/Helper.d.ts

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

package/dist/field/Helper.js

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{cnMerge as m}from"@nild/shared";import{forwardRef as o,isValidElement as p}from"react";import t from"./style/index.js";const r=o(({className:e,children:s,...a},l)=>i("div",{...a,className:m(t.helper(),e),ref:l,children:s}));r.displayName="Field.Helper";const d=e=>p(e)&&e.type===r;export{r as default,d as isHelperElement};

package/dist/field/Label.d.ts

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

package/dist/field/Label.js

@@ -0,0 +1 @@
+import{jsx as m}from"react/jsx-runtime";import{cnMerge as o}from"@nild/shared";import{forwardRef as t,isValidElement as d}from"react";import{useFieldContext as n}from"./contexts/index.js";import f from"./style/index.js";const s=t(({className:e,children:a,...r},l)=>{const{disabled:i}=n();return m("span",{...r,className:o(f.label({disabled:i}),e),ref:l,children:a})});s.displayName="Field.Label";const p=e=>d(e)&&e.type===s;export{s as default,p as isLabelElement};

package/dist/field/RequiredIndicator.d.ts

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

package/dist/field/RequiredIndicator.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{cnMerge as d}from"@nild/shared";import{forwardRef as m,isValidElement as n}from"react";import{useFieldContext as l}from"./contexts/index.js";import c from"./style/index.js";const r=m(({className:e,children:a="*",...s},i)=>{const{required:o}=l();return o?t("span",{...s,className:d(c.requiredIndicator(),e),ref:i,children:a}):null});r.displayName="Field.RequiredIndicator";const f=e=>n(e)&&e.type===r;export{r as default,f as isRequiredIndicatorElement};

package/dist/field/Status.d.ts

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

package/dist/field/Status.js

@@ -0,0 +1 @@
+import{jsx as d}from"react/jsx-runtime";import{cnMerge as f}from"@nild/shared";import{forwardRef as p,isValidElement as c}from"react";import{useFieldContext as x}from"./contexts/index.js";import y from"./style/index.js";const o=s=>s!=null&&s!==!1,t=p(({className:s,children:a,type:l,...m},i)=>{const{issue:n,status:u}=x(),e=l??u,r=o(a)?a:n;return o(r)?d("div",{...m,className:f(y.status({status:e}),s),"data-status":e,ref:i,children:r}):null});t.displayName="Field.Status";const N=s=>c(s)&&s.type===t;export{t as default,N as isStatusElement};

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

@@ -0,0 +1,10 @@
+import { FieldStatus } from '../interfaces';
+import { ReactNode } from 'react';
+export interface FieldContextValue {
+    status?: FieldStatus;
+    issue?: ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+}
+declare const FieldProvider: import('react').Provider<FieldContextValue>, useFieldContext: () => FieldContextValue;
+export { FieldProvider, useFieldContext };

package/dist/field/contexts/index.js

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

package/dist/field/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @category Components
+ */
+declare const Field: import('react').ForwardRefExoticComponent<import('./interfaces').FieldProps & import('react').RefAttributes<HTMLDivElement>> & {
+    Label: import('react').ForwardRefExoticComponent<import('./interfaces').LabelProps & import('react').RefAttributes<HTMLSpanElement>>;
+    Helper: import('react').ForwardRefExoticComponent<import('./interfaces').HelperProps & import('react').RefAttributes<HTMLDivElement>>;
+    Status: import('react').ForwardRefExoticComponent<import('./interfaces').StatusProps & import('react').RefAttributes<HTMLDivElement>>;
+    RequiredIndicator: import('react').ForwardRefExoticComponent<import('./interfaces').RequiredIndicatorProps & import('react').RefAttributes<HTMLSpanElement>>;
+};
+export type * from './interfaces';
+export default Field;

package/dist/field/index.js

@@ -0,0 +1 @@
+import r from"./Field.js";import o from"./Helper.js";import t from"./Label.js";import m from"./RequiredIndicator.js";import e from"./Status.js";const i=Object.assign(r,{Label:t,Helper:o,Status:e,RequiredIndicator:m});export{i as default};

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

@@ -0,0 +1,17 @@
+import { FieldStatus } from '../interfaces';
+declare const _default: {
+    field: (props?: {
+        disabled?: boolean;
+        status?: FieldStatus;
+    } | undefined) => string;
+    labelRow: (props?: object | undefined) => string;
+    label: (props?: {
+        disabled?: boolean;
+    } | undefined) => string;
+    helper: (props?: object | undefined) => string;
+    status: (props?: {
+        status?: FieldStatus;
+    } | undefined) => string;
+    requiredIndicator: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/field/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";const t=e(["nd-field","flex","flex-col","items-start","gap-1.5","font-nd","text-md"],{variants:{disabled:{true:["disabled"],false:""},status:{success:"",warning:"",error:""}}}),r=e(["nd-field-label-row","inline-flex","items-center","gap-1.5"]),s=e(["nd-field-label","text-main","font-medium"],{variants:{disabled:{true:["opacity-60"],false:""}}}),a=e(["nd-field-helper","text-sm","text-subtle"]),i=e(["nd-field-status","text-sm"],{variants:{status:{success:["text-success"],warning:["text-warning"],error:["text-error"]}}}),l=e(["nd-field-required-indicator","text-error"]),d={field:t,labelRow:r,label:s,helper:a,status:i,requiredIndicator:l};export{d as default};

package/dist/form/Actions.d.ts

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

package/dist/form/Actions.js

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

package/dist/form/Form.d.ts

@@ -0,0 +1,3 @@
+import { FormProps } from './interfaces';
+declare const Form: import('react').ForwardRefExoticComponent<FormProps & import('react').RefAttributes<HTMLFormElement>>;
+export default Form;

package/dist/form/Form.js

@@ -0,0 +1 @@
+import{jsx as j,jsxs as k}from"react/jsx-runtime";import{useEffectCallback as B}from"@nild/hooks";import{cnMerge as R}from"@nild/shared";import{forwardRef as D,useState as T,useRef as q,useCallback as z,useMemo as G}from"react";import H from"../_shared/utils/register-slots/index.js";import{isFieldElement as J}from"../field/Field.js";import{updateByPath as K,getByPath as L}from"./_shared/path.js";import{isActionsElement as O}from"./Actions.js";import{FormProvider as Q,hasIssues as U}from"./contexts/index.js";import{useFormIssues as W}from"./hooks/useFormIssues.js";import X from"./style/index.js";const M=(s,o)=>Array.isArray(s)?s.includes(o):s===o,Y=H({field:{isMatched:J,multiple:!0},actions:{isMatched:O}}),A=D((s,o)=>{const{className:F,children:V,defaultValue:w={},resolver:x,validateTrigger:m=["submit","change"],onChange:c,onInvalid:f,onSubmit:d,disabled:l=!1,...C}=s,[i,p]=T(w),{errors:E,getMeta:v,touch:I,touchAll:N,validateValue:h}=W({resolver:x}),a=q(i);a.current=i;const g=B((r,t)=>{const e=K(a.current,r,t);e!==a.current&&(p(e),a.current=e,I(r),c?.(e),M(m,"change")&&h(e,r))}),b=z(r=>L(i,r),[i]),P=async r=>{if(r.preventDefault(),l)return;const t=a.current,e=M(m,"submit")?await h(t):{value:t,errors:E};if(!e)return;const u=e.value??t,n=e.errors??{};if(e.value&&(a.current=e.value,p(e.value)),U(n)){N(u,n),f?.(n,u,r);return}await d?.(u,r)},S=G(()=>({disabled:l,getMeta:v,getValue:b,setValue:g}),[l,v,b,g]),{slots:y}=Y(V);return j(Q,{value:S,children:k("form",{...C,className:R(X.form({disabled:l}),F),ref:o,onSubmit:P,children:[y.field.el,y.actions.el]})})});A.displayName="Form";export{A as default};

package/dist/form/_shared/path.d.ts

@@ -0,0 +1,3 @@
+export declare const getByPath: (value: Record<string, unknown>, path: string) => unknown;
+export declare const updateByPath: (formValue: Record<string, unknown>, path: string, value: unknown) => Record<string, unknown>;
+export declare const collectPaths: (value: unknown, prefix?: string, paths?: string[]) => string[];

package/dist/form/_shared/path.js

@@ -0,0 +1 @@
+const A=/^\d+$/,h=e=>e.split(".").filter(Boolean),i=e=>typeof e=="object"&&e!==null&&!Array.isArray(e),y=(e,r)=>Array.isArray(e)?[...e]:i(e)?{...e}:r&&A.test(r)?[]:{},$=(e,r)=>{const t=h(r);let n=e;for(const s of t){if(n==null)return;n=n[s]}return n},g=(e,r,t)=>{const n=h(r);if(n.length===0)return e;const s=[e];let c=e;for(const l of n)c=c?.[l],s.push(c);if(Object.is(c,t))return e;const u=y(e,n[0]);let a=u;for(let l=0;l<n.length-1;l+=1){const p=n[l],f=y(s[l+1],n[l+1]);a[p]=f,a=f}return a[n[n.length-1]]=t,u},o=(e,r="",t=[])=>{if(Array.isArray(e))return e.forEach((n,s)=>o(n,r?`${r}.${s}`:`${s}`,t)),t;if(i(e)){const n=Object.keys(e);return n.length===0?(r&&t.push(r),t):(n.forEach(s=>o(e[s],r?`${r}.${s}`:s,t)),t)}return r&&t.push(r),t};export{o as collectPaths,$ as getByPath,g as updateByPath};

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

@@ -0,0 +1,16 @@
+import { FieldStatus } from '../../field';
+import { FormIssueMap } from '../interfaces';
+import { ReactNode } from 'react';
+export interface FieldMeta {
+    status?: FieldStatus;
+    issue?: ReactNode;
+}
+export interface FormContextValue {
+    disabled?: boolean;
+    getValue: (name: string) => unknown;
+    getMeta: (name: string) => FieldMeta;
+    setValue: (name: string, value: unknown) => void;
+}
+declare const FormProvider: import('react').Provider<FormContextValue | undefined>, useFormContext: () => FormContextValue | undefined;
+export declare const hasIssues: (issues: FormIssueMap | undefined) => boolean;
+export { FormProvider, useFormContext };

package/dist/form/contexts/index.js

@@ -0,0 +1 @@
+import{createContextSuite as t}from"@nild/shared";const[o,a]=t({defaultValue:void 0}),u=r=>r?Object.keys(r).some(e=>{const s=r[e];return s?Array.isArray(s)?s.length>0:!0:!1}):!1;export{o as FormProvider,u as hasIssues,a as useFormContext};

package/dist/form/hooks/useFormIssues.d.ts

@@ -0,0 +1,14 @@
+import { FieldMeta } from '../contexts';
+import { FormIssueMap, FormResolver, FormResolverResult, FormValue } from '../interfaces';
+interface UseFormIssuesOptions {
+    resolver?: FormResolver;
+}
+export declare const useFormIssues: ({ resolver }: UseFormIssuesOptions) => {
+    errors: FormIssueMap;
+    warnings: FormIssueMap;
+    getMeta: (name: string) => FieldMeta;
+    touch: (name: string) => void;
+    touchAll: (formValue: FormValue, issues: FormIssueMap) => void;
+    validateValue: (formValue: FormValue, name?: string) => Promise<FormResolverResult | undefined>;
+};
+export {};

package/dist/form/hooks/useFormIssues.js

@@ -0,0 +1 @@
+import{useState as f,useRef as C,useCallback as g,isValidElement as F}from"react";import{collectPaths as I}from"../_shared/path.js";const d=r=>Array.isArray(r)?r[0]:r,b=r=>{const e=d(r);if(e)return typeof e=="object"&&!F(e)&&"message"in e?e.message:e},j=(r,e,u)=>{const n=d(u);if(!n){if(!(e in r))return r;const a={...r};return delete a[e],a}return Object.is(d(r[e]),n)?r:{...r,[e]:n}},p=(r,e)=>r[e]?r:{...r,[e]:!0},E=(r,e,u)=>{const n={};return I(r).forEach(a=>{n[a]=!0}),Object.keys(e??{}).forEach(a=>{n[a]=!0}),Object.keys(u??{}).forEach(a=>{n[a]=!0}),n},S=({resolver:r})=>{const[e,u]=f({}),[n,a]=f({}),[m,w]=f({}),[h,y]=f({}),v=C(0),k=g(async(t,s)=>{if(!r)return{value:t,errors:{},warnings:{}};const c=v.current+1;v.current=c;const o=await r(t);if(v.current===c)return s?(u(i=>{var l;return j(i,s,(l=o.errors)==null?void 0:l[s])}),a(i=>{var l;return j(i,s,(l=o.warnings)==null?void 0:l[s])}),y(i=>p(i,s))):(u(o.errors??{}),a(o.warnings??{}),y(E(t,o.errors,o.warnings))),o},[r]),A=g(t=>{w(s=>p(s,t))},[]),O=g((t,s)=>{w(E(t,s,void 0))},[]),x=g(t=>{const s=b(e[t]);if(s)return{status:"error",issue:s};const c=b(n[t]);return c?{status:"warning",issue:c}:r&&m[t]&&h[t]?{status:"success"}:{}},[e,r,m,h,n]);return{errors:e,warnings:n,getMeta:x,touch:A,touchAll:O,validateValue:k}};export{S as useFormIssues};

package/dist/form/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @category Components
+ */
+declare const Form: import('react').ForwardRefExoticComponent<import('./interfaces').FormProps & import('react').RefAttributes<HTMLFormElement>> & {
+    Actions: import('react').ForwardRefExoticComponent<import('./interfaces').ActionsProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export type * from './interfaces';
+export default Form;

package/dist/form/index.js

@@ -0,0 +1 @@
+import o from"./Actions.js";import t from"./Form.js";const r=Object.assign(t,{Actions:o});export{r as default};

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

@@ -0,0 +1,7 @@
+declare const _default: {
+    form: (props?: {
+        disabled?: boolean;
+    } | undefined) => string;
+    actions: (props?: object | undefined) => string;
+};
+export default _default;

package/dist/form/style/index.js

@@ -0,0 +1 @@
+import{cva as a}from"@nild/shared";const e=a(["nd-form","flex","flex-col","gap-4","font-nd"],{variants:{disabled:{true:["disabled"],false:""}}}),t=a(["nd-form-actions","flex","items-center","justify-end","gap-3"]),o={form:e,actions:t};export{o as default};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 import { default as Button } from './button';
 import { default as Checkbox } from './checkbox';
 import { default as Divider } from './divider';
+import { default as Field } from './field';
+import { default as Form } from './form';
 import { default as Input } from './input';
 import { default as Modal } from './modal';
 import { default as Popover } from './popover';
@@ -10,4 +12,4 @@ import { default as Switch } from './switch';
 import { default as Tooltip } from './tooltip';
 import { default as Transition, TransitionStatus } from './transition';
 import { default as Typography } from './typography';
-export { Button, Checkbox, Divider, Input, Modal, Popover, Radio, Select, Switch, Tooltip, Transition, TransitionStatus, Typography, };
+export { Button, Checkbox, Divider, Field, Form, Input, Modal, Popover, Radio, Select, Switch, Tooltip, Transition, TransitionStatus, Typography, };

package/dist/index.js

@@ -1 +1 @@
-import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}from"./divider/Divider.js";import{default as r}from"./input/index.js";import{default as s}from"./modal/index.js";import{default as m}from"./popover/index.js";import{default as f}from"./radio/index.js";import{default as i}from"./select/index.js";import{default as p}from"./switch/index.js";import{default as e}from"./tooltip/index.js";import{default as d}from"./transition/Transition.js";import{TransitionStatus as u}from"./transition/interfaces/index.js";import{default as l}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Input,s as Modal,m as Popover,f as Radio,i as Select,p as Switch,e as Tooltip,d as Transition,u as TransitionStatus,l as Typography};
+import{default as a}from"./button/index.js";import{default as o}from"./checkbox/index.js";import{default as t}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"./select/index.js";import{default as d}from"./switch/index.js";import{default as u}from"./tooltip/index.js";import{default as l}from"./transition/Transition.js";import{TransitionStatus as n}from"./transition/interfaces/index.js";import{default as T}from"./typography/index.js";/* empty css            */export{a as Button,o as Checkbox,t as Divider,r as Field,s as Form,m as Input,f as Modal,i as Popover,e as Radio,p as Select,d as Switch,u as Tooltip,l as Transition,n as TransitionStatus,T as Typography};

package/dist/tailwind.css

@@ -1 +1 @@
-@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-page: var(--nd-color-neutral-0); --background-color-page-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-panel: light-dark( var(--background-color-page), var(--background-color-muted) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}
+@theme static{ --nd-brand-h: 158; --nd-brand-c: .14; --nd-neutral-c: .001; --nd-shadow-l: 15%; --nd-shadow-c: .008; --nd-color-brand-0: light-dark( oklch(99% var(--nd-brand-c) var(--nd-brand-h)), oklch(14% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-5: light-dark( oklch(97% var(--nd-brand-c) var(--nd-brand-h)), oklch(17% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-10: light-dark( oklch(95% var(--nd-brand-c) var(--nd-brand-h)), oklch(20% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-15: light-dark( oklch(92% var(--nd-brand-c) var(--nd-brand-h)), oklch(25% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-20: light-dark( oklch(88% var(--nd-brand-c) var(--nd-brand-h)), oklch(30% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-30: light-dark( oklch(80% var(--nd-brand-c) var(--nd-brand-h)), oklch(38% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-40: light-dark( oklch(72% var(--nd-brand-c) var(--nd-brand-h)), oklch(46% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-50: light-dark( oklch(64% var(--nd-brand-c) var(--nd-brand-h)), oklch(52% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-60: oklch(58% var(--nd-brand-c) var(--nd-brand-h)); --nd-color-brand-70: light-dark( oklch(50% var(--nd-brand-c) var(--nd-brand-h)), oklch(66% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-80: light-dark( oklch(40% var(--nd-brand-c) var(--nd-brand-h)), oklch(76% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-90: light-dark( oklch(30% var(--nd-brand-c) var(--nd-brand-h)), oklch(88% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-brand-100: light-dark( oklch(20% var(--nd-brand-c) var(--nd-brand-h)), oklch(96% var(--nd-brand-c) var(--nd-brand-h)) ); --nd-color-neutral-0: light-dark( oklch(99% var(--nd-neutral-c) var(--nd-brand-h)), oklch(14% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-5: light-dark( oklch(97.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(17% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-10: light-dark( oklch(95.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(21% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-15: light-dark( oklch(92.5% var(--nd-neutral-c) var(--nd-brand-h)), oklch(26% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-20: light-dark( oklch(89% var(--nd-neutral-c) var(--nd-brand-h)), oklch(32% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-30: light-dark( oklch(81% var(--nd-neutral-c) var(--nd-brand-h)), oklch(42% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-40: light-dark( oklch(72% var(--nd-neutral-c) var(--nd-brand-h)), oklch(50% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-50: light-dark( oklch(60% var(--nd-neutral-c) var(--nd-brand-h)), oklch(58% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-60: light-dark( oklch(50% var(--nd-neutral-c) var(--nd-brand-h)), oklch(67% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-70: light-dark( oklch(40% var(--nd-neutral-c) var(--nd-brand-h)), oklch(76% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-80: light-dark( oklch(32% var(--nd-neutral-c) var(--nd-brand-h)), oklch(85% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-90: light-dark( oklch(22% var(--nd-neutral-c) var(--nd-brand-h)), oklch(93% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-neutral-100: light-dark( oklch(15% var(--nd-neutral-c) var(--nd-brand-h)), oklch(98% var(--nd-neutral-c) var(--nd-brand-h)) ); --nd-color-success-base: oklch(60% .14 140deg); --nd-color-warning-base: oklch(76% .15 80deg); --nd-color-error-base: oklch(58% .16 28deg); --nd-color-shadow-key: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 16%), oklch(0% 0 0deg / 65%) ); --nd-color-shadow-ambient: light-dark( oklch(var(--nd-shadow-l) var(--nd-shadow-c) var(--nd-brand-h) / 4%), oklch(0% 0 0deg / 30%) ); --nd-font-family: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }@theme{ --color-brand: var(--nd-color-brand-60); --color-brand-hover: light-dark(var(--nd-color-brand-50), var(--nd-color-brand-70)); --color-brand-active: var(--nd-color-brand-60); --color-brand-subtle: var(--nd-color-brand-15); --color-brand-subtle-hover: var(--nd-color-brand-20); --color-brand-subtle-active: var(--nd-color-brand-30); --color-brand-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-brand-ring: light-dark( color-mix(in oklch, var(--nd-color-brand-60) 28%, transparent), color-mix(in oklch, var(--nd-color-brand-60) 36%, transparent) ); --color-success: color-mix(in oklch, var(--nd-color-success-base) 90%, var(--nd-color-brand-60) 10%); --color-success-hover: light-dark( color-mix(in oklch, oklch(66% .14 140deg) 90%, var(--nd-color-brand-50) 10%), color-mix(in oklch, oklch(52% .14 140deg) 90%, var(--nd-color-brand-70) 10%) ); --color-success-subtle: light-dark( color-mix(in oklch, oklch(95% .05 140deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 140deg) 92%, var(--nd-color-brand-20) 8%) ); --color-success-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-success-ring: light-dark( color-mix(in oklch, var(--color-success) 28%, transparent), color-mix(in oklch, var(--color-success) 36%, transparent) ); --color-warning: color-mix(in oklch, var(--nd-color-warning-base) 95%, var(--nd-color-brand-60) 5%); --color-warning-hover: light-dark( color-mix(in oklch, oklch(82% .15 80deg) 95%, var(--nd-color-brand-50) 5%), color-mix(in oklch, oklch(68% .15 80deg) 95%, var(--nd-color-brand-70) 5%) ); --color-warning-subtle: light-dark( color-mix(in oklch, oklch(96% .06 80deg) 96%, var(--nd-color-brand-15) 4%), color-mix(in oklch, oklch(28% .06 80deg) 96%, var(--nd-color-brand-20) 4%) ); --color-warning-contrast: light-dark(var(--nd-color-neutral-100), var(--nd-color-neutral-0)); --color-warning-ring: light-dark( color-mix(in oklch, var(--color-warning) 30%, transparent), color-mix(in oklch, var(--color-warning) 38%, transparent) ); --color-error: color-mix(in oklch, var(--nd-color-error-base) 92%, var(--nd-color-brand-60) 8%); --color-error-hover: light-dark( color-mix(in oklch, oklch(64% .16 28deg) 92%, var(--nd-color-brand-50) 8%), color-mix(in oklch, oklch(50% .16 28deg) 92%, var(--nd-color-brand-70) 8%) ); --color-error-subtle: light-dark( color-mix(in oklch, oklch(94% .05 28deg) 92%, var(--nd-color-brand-15) 8%), color-mix(in oklch, oklch(26% .06 28deg) 92%, var(--nd-color-brand-20) 8%) ); --color-error-contrast: light-dark(var(--nd-color-neutral-0), var(--nd-color-neutral-100)); --color-error-ring: light-dark( color-mix(in oklch, var(--color-error) 28%, transparent), color-mix(in oklch, var(--color-error) 36%, transparent) ); --border-color-main: var(--nd-color-neutral-20); --border-color-muted: var(--nd-color-neutral-15); --border-color-subtle: var(--nd-color-neutral-10); --outline-color-main: var(--border-color-main); --outline-color-muted: var(--border-color-muted); --outline-color-subtle: var(--border-color-subtle); --background-color-page: var(--nd-color-neutral-0); --background-color-page-inverse: var(--nd-color-neutral-100); --background-color-subtle: var(--nd-color-neutral-5); --background-color-subtle-hover: var(--nd-color-neutral-10); --background-color-muted: var(--nd-color-neutral-10); --background-color-muted-hover: var(--nd-color-neutral-15); --background-color-muted-active: var(--nd-color-neutral-20); --background-color-emphasized: var(--nd-color-neutral-20); --background-color-emphasized-hover: var(--nd-color-neutral-30); --background-color-panel: light-dark( var(--background-color-page), var(--background-color-muted) ); --text-color-main: var(--nd-color-neutral-100); --text-color-main-inverse: var(--nd-color-neutral-0); --text-color-muted: var(--nd-color-neutral-70); --text-color-subtle: var(--nd-color-neutral-50); --text-sm: .75rem; --text-sm--line-height: 1.25rem; --text-md: .875rem; --text-md--line-height: 1.375rem; --text-lg: 1rem; --text-lg--line-height: 1.5rem; --text-xl: 1.125rem; --text-xl--line-height: 1.625rem; --text-2xl: 1.25rem; --text-2xl--line-height: 1.75rem; --text-3xl: 1.5rem; --text-3xl--line-height: 2rem; --text-4xl: 1.875rem; --text-4xl--line-height: 2.375rem; --text-5xl: 2.375rem; --text-5xl--line-height: 2.875rem; --text-6xl: 2.875rem; --text-6xl--line-height: 3.375rem; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --shadow-sm: 0 0 0 .8px var(--border-color-muted), 0 1px 2px 0 var(--nd-color-shadow-key); --shadow-md: 0 0 0 .8px var(--border-color-muted), 0 4px 6px -1px var(--nd-color-shadow-key), 0 2px 4px -2px var(--nd-color-shadow-ambient); --shadow-lg: 0 0 0 .8px var(--border-color-muted), 0 10px 15px -3px var(--nd-color-shadow-key), 0 4px 6px -4px var(--nd-color-shadow-ambient); --shadow-xl: 0 0 0 .8px var(--border-color-muted), 0 20px 25px -5px var(--nd-color-shadow-key), 0 8px 10px -6px var(--nd-color-shadow-ambient); --shadow-2xl: 0 0 0 .8px var(--border-color-muted), 0 25px 50px -12px var(--nd-color-shadow-key), 0 12px 24px -12px var(--nd-color-shadow-ambient); --font-nd: var(--nd-font-family); --default-transition-duration: .2s; }@utility stroke-main{stroke: var(--border-color-main);}@utility stroke-muted{stroke: var(--border-color-muted);}@utility stroke-subtle{stroke: var(--border-color-subtle);}@utility underline{text-decoration: underline; text-underline-offset: .125rem;}@utility ring-focused{outline: none; box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility ring-focused-with-outline{box-shadow: 0 0 0 .2rem var(--color-brand-ring),var(--tw-shadow, 0 0 #00000000);}@utility r-*{r: --value(number);}@custom-variant focus-visible-within{&:has(:focus-visible) {@slot;}}@custom-variant disabled{&.disabled,&:disabled {@slot;}}@custom-variant enabled{&:not(.disabled,:disabled) {@slot;}}

package/package.json

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