@nild/components 0.0.39 → 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,12 +1,15 @@
 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';
 import { default as Radio } from './radio';
+import { default as Select } from './select';
 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, 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 i}from"./radio/index.js";import{default as f}from"./switch/index.js";import{default as p}from"./tooltip/index.js";import{default as u}from"./transition/Transition.js";import{TransitionStatus as d}from"./transition/interfaces/index.js";import{default as e}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,i as Radio,f as Switch,p as Tooltip,u as Transition,d as TransitionStatus,e 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/modal/Close.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{Icon as C}from"@nild/icons";import x from"@nild/icons/Close";import{cnMerge as h}from"@nild/shared";import{forwardRef as M,isValidElement as N}from"react";import q from"../_shared/utils/merge-handlers/index.js";import y from"../button/index.js";import{useModalContext as z}from"./contexts/index.js";import E from"./style/index.js";const g=e=>N(e)&&e.type===a,a=M(({children:e,variant:r="text",shape:s="square",size:l="small",equal:i=!0,"aria-label":m="Close",onClick:t,className:n,disabled:p,...c},d)=>{const{disabled:f,close:u}=z();return o(y,{...c,"aria-label":m,className:h(E.close(),n),disabled:f||p,equal:i,onClick:q(t,b=>(u(),b)),ref:d,shape:s,size:l,variant:r,children:e??o(C,{component:x})})});a.displayName="Modal.Close";export{a as default,g as isCloseElement};
+import{jsx as o}from"react/jsx-runtime";import{Icon as C}from"@nild/icons";import h from"@nild/icons/Close";import{cnMerge as x}from"@nild/shared";import{forwardRef as M,isValidElement as N}from"react";import q from"../_shared/utils/merge-handlers/index.js";import y from"../button/index.js";import{useModalContext as E}from"./contexts/index.js";import g from"./style/index.js";const j=a=>N(a)&&a.type===e,e=M(({children:a,variant:r="text",shape:s="square",size:l="small",equal:i=!0,"aria-label":m="Close",onClick:t,className:n,disabled:p,...d},c)=>{const{disabled:f,updateOpen:u}=E();return o(y,{...d,"aria-label":m,className:x(g.close(),n),disabled:f||p,equal:i,onClick:q(t,b=>(u(!1),b)),ref:c,shape:s,size:l,variant:r,children:a??o(C,{component:h})})});e.displayName="Modal.Close";export{e as default,j as isCloseElement};

package/dist/modal/Modal.js

@@ -1 +1 @@
-import{jsxs as X,jsx as T}from"react/jsx-runtime";import{useControllableState as w,useEffectCallback as x}from"@nild/hooks";import{isFunction as G,cnJoin as B}from"@nild/shared";import{useRef as s,useEffect as H,useMemo as K,cloneElement as L}from"react";import Q from"../_shared/utils/get-owner-document/index.js";import V from"../_shared/utils/register-slots/index.js";import W from"../transition/Transition.js";import{TransitionStatus as P}from"../transition/interfaces/index.js";import{resolvePlacement as Y}from"./_shared/index.js";import{ModalProvider as Z}from"./contexts/index.js";import{isPortalElement as j}from"./Portal.js";import z from"./style/index.js";import _,{isTriggerElement as D}from"./Trigger.js";const $=V({trigger:{isMatched:a=>D(a)},portal:{isMatched:a=>j(a)},firstBare:{isMatched:a=>!D(a)&&!j(a),strategy:"first"}}),U=a=>{const{children:q,variant:o="dialog",size:u="medium",open:A,defaultOpen:I=!1,disabled:i=!1,closeOnEscape:p=!0,closeOnOverlayClick:f=!0,trapFocus:d=!0,restoreFocus:b=!0,lockScroll:v=!0,"aria-label":y,"aria-labelledby":E,"aria-describedby":g,onOpen:O,onClose:C}=a,{slots:l}=$(q),[e,J]=w(A,I),n=s(e),M=s(null),h=s(null),N=s(null),k=s(e),c=Y(o,a.placement);n.current=e;const m=x(r=>{if(i)return;const S=n.current,t=G(r)?r(S):r;t!==S&&(n.current=t,J(t),t?O?.():C?.())}),F=x(()=>{m(!1)});H(()=>{if(e&&!k.current){const r=Q(M.current,h.current);N.current=r?.activeElement}k.current=e},[e]);const R=K(()=>({open:e,variant:o,placement:c,size:u,disabled:i,closeOnEscape:p,closeOnOverlayClick:f,trapFocus:d,restoreFocus:b,lockScroll:v,accessibility:{"aria-label":y,"aria-labelledby":E,"aria-describedby":g},refs:{trigger:M,surface:h,lastActiveEl:N},requestOpen:m,close:F}),[g,y,E,F,p,f,i,v,e,c,m,b,u,d,o]);return X(Z,{value:R,children:[l.trigger.el??(l.firstBare.el&&T(_,{children:l.firstBare.el})),l.portal.el&&T(W,{visible:e,children:r=>!e&&[P.UNMOUNTED,P.EXITED].includes(r)?null:L(l.portal.el,{...l.portal.el.props,overlayClassName:B(z.overlayMotion({status:r}),l.portal.el.props.overlayClassName),surfaceClassName:B(z.surfaceMotion({status:r,variant:o,placement:c}),l.portal.el.props.surfaceClassName)})})]})};U.displayName="Modal";export{U as default};
+import{jsxs as I,jsx as M}from"react/jsx-runtime";import{useControllableState as J,useEffectCallback as R}from"@nild/hooks";import{isFunction as X,cnJoin as h}from"@nild/shared";import{useRef as N,useMemo as q,cloneElement as w}from"react";import A from"../_shared/utils/register-slots/index.js";import G from"../transition/Transition.js";import{TransitionStatus as k}from"../transition/interfaces/index.js";import{resolvePlacement as H}from"./_shared/index.js";import{ModalProvider as K}from"./contexts/index.js";import{isPortalElement as F}from"./Portal.js";import S from"./style/index.js";import L,{isTriggerElement as T}from"./Trigger.js";const Q=A({trigger:{isMatched:e=>T(e)},portal:{isMatched:e=>F(e)},firstBare:{isMatched:e=>!T(e)&&!F(e),strategy:"first"}}),x=e=>{const{children:B,variant:s="dialog",size:c="medium",open:P,defaultOpen:j=!1,disabled:t=!1,closeOnEscape:m=!0,closeOnOverlayClick:p=!0,trapFocus:u=!0,restoreFocus:d=!0,lockScroll:f=!0,"aria-label":b,"aria-labelledby":v,"aria-describedby":y,onOpen:g,onClose:O}=e,{slots:r}=Q(B),[l,z]=J(P,j),i=N(l),D=N(null),n=H(s,e.placement);i.current=l;const C=R(a=>{if(t)return;const E=i.current,o=X(a)?a(E):a;o!==E&&(i.current=o,z(o),o?g?.():O?.())}),U=q(()=>({open:l,variant:s,placement:n,size:c,disabled:t,closeOnEscape:m,closeOnOverlayClick:p,trapFocus:u,restoreFocus:d,lockScroll:f,accessibility:{"aria-label":b,"aria-labelledby":v,"aria-describedby":y},refs:{trigger:D},updateOpen:C}),[y,b,v,m,p,t,f,l,n,C,d,c,u,s]);return I(K,{value:U,children:[r.trigger.el??(r.firstBare.el&&M(L,{children:r.firstBare.el})),r.portal.el&&M(G,{visible:l,children:a=>!l&&[k.UNMOUNTED,k.EXITED].includes(a)?null:w(r.portal.el,{...r.portal.el.props,overlayClassName:h(S.overlayMotion({status:a}),r.portal.el.props.overlayClassName),surfaceClassName:h(S.surfaceMotion({status:a,variant:s,placement:n}),r.portal.el.props.surfaceClassName)})})]})};x.displayName="Modal";export{x as default};

package/dist/modal/Portal.js

@@ -1 +1 @@
-import{jsxs as F,jsx as D}from"react/jsx-runtime";import{useEffectCallback as p,useIsomorphicLayoutEffect as J,useEventListener as I}from"@nild/hooks";import{cnMerge as y,mergeRefs as Q}from"@nild/shared";import{forwardRef as U,useRef as X,useEffect as z,isValidElement as Y}from"react";import{createPortal as Z}from"react-dom";import _ from"../_shared/utils/get-owner-document/index.js";import $ from"../_shared/utils/lock-document-scroll/index.js";import ee from"../_shared/utils/register-slots/index.js";import{getFocusableElements as te,focusWithin as v,restoreFocusTo as re}from"./_shared/index.js";import{isBodyElement as ae}from"./Body.js";import se,{isCloseElement as oe}from"./Close.js";import{useModalContext as le}from"./contexts/index.js";import{isFooterElement as ne}from"./Footer.js";import{isHeaderElement as ie}from"./Header.js";import{useModalStack as ce}from"./hooks/useModalStack.js";import E from"./style/index.js";const fe=a=>Y(a)&&a.type===b,ue=ee({header:{isMatched:a=>ie(a)},body:{isMatched:a=>ae(a)},footer:{isMatched:a=>ne(a)},close:{isMatched:a=>oe(a)}}),b=U(({className:a,style:K,children:O,container:h,overlayless:g=!1,overlayClassName:w,surfaceClassName:L,onTransitionEnd:P,...R},S)=>{const{open:l,variant:j,placement:k,size:A,closeOnEscape:B,closeOnOverlayClick:H,trapFocus:M,lockScroll:x,restoreFocus:C,accessibility:u,refs:s,close:T}=le(),N=X(l),t=_(h,s.surface.current,s.trigger.current),n=h??t?.body??null,{zIndex:V,topmost:i}=ce(t,!!n);N.current=l;const W=p(()=>{g||!l||!H||!i||T()}),q=p(e=>{const r=s.surface.current;if(!r||!l||!i)return;if(e.key==="Escape"&&B){e.preventDefault(),T();return}if(e.key!=="Tab"||!M)return;const o=te(r),f=t?.activeElement;if(o.length===0){e.preventDefault(),r.focus();return}if(!f||!r.contains(f)){e.preventDefault(),v(r,e.shiftKey);return}const m=o[0],d=o.at(-1);e.shiftKey&&f===m?(e.preventDefault(),d?.focus()):!e.shiftKey&&f===d&&(e.preventDefault(),m?.focus())}),G=p(e=>{const r=s.surface.current,o=e.target;!r||!M||!l||!i||!o||r.contains(o)||v(r)});if(z(()=>{if(!(!n||!x||!t))return $(t)},[x,t,n]),z(()=>()=>{!C||N.current||re(s.lastActiveEl.current,s.trigger.current)},[s.lastActiveEl,s.trigger,C]),J(()=>{if(!l)return;const e=setTimeout(()=>{const r=s.surface.current;if(!r||!i)return;const o=t?.activeElement;(!o||!r.contains(o))&&v(r)},0);return()=>{clearTimeout(e)}},[l,t,s.surface,i]),I(t,"keydown",q),I(t,"focusin",G),!n)return null;const{slots:c}=ue(O);return Z(F("div",{className:y(E.portal({placement:k}),a),style:{zIndex:V,...K},...R,children:[!g&&D("div",{className:y(E.overlay(),w),onClick:W}),F("div",{ref:Q(s.surface,S),className:y(E.surface({variant:j,placement:k,size:A}),L),"aria-describedby":u["aria-describedby"],"aria-label":u["aria-label"],"aria-labelledby":u["aria-labelledby"],"aria-modal":"true",role:"dialog",tabIndex:-1,onTransitionEnd:P,children:[c.header.el,c.body.el,c.footer.el,c.close.el??D(se,{})]})]}),n)});b.displayName="Modal.Portal";export{b as default,fe as isPortalElement};
+import{jsxs as v,jsx as g}from"react/jsx-runtime";import{useEffectCallback as h,useEventListener as B}from"@nild/hooks";import{cnMerge as n,mergeRefs as H}from"@nild/shared";import{forwardRef as L,useRef as V,useEffect as q,isValidElement as A}from"react";import{createPortal as G}from"react-dom";import J from"../_shared/utils/get-owner-document/index.js";import K from"../_shared/utils/lock-document-scroll/index.js";import Q from"../_shared/utils/register-slots/index.js";import{isBodyElement as U}from"./Body.js";import W,{isCloseElement as X}from"./Close.js";import{useModalContext as Y}from"./contexts/index.js";import{isFooterElement as Z}from"./Footer.js";import{isHeaderElement as _}from"./Header.js";import{useModalStack as $}from"./hooks/useModalStack.js";import{useModalFocusScope as ee}from"./hooks/useModalFocusScope.js";import m from"./style/index.js";const re=e=>A(e)&&e.type===c,ae=Q({header:{isMatched:e=>_(e)},body:{isMatched:e=>U(e)},footer:{isMatched:e=>Z(e)},close:{isMatched:e=>X(e)}}),c=L(({className:e,style:M,children:k,container:d,overlayless:f=!1,overlayClassName:N,surfaceClassName:x,onTransitionEnd:C,...F},z)=>{const{open:s,variant:R,placement:p,size:w,closeOnEscape:I,closeOnOverlayClick:O,trapFocus:P,lockScroll:u,restoreFocus:j,accessibility:t,refs:y,updateOpen:b}=Y(),l=V(null),r=J(d,l.current,y.trigger.current),a=d??r?.body??null,{zIndex:D,topmost:i}=$(r,!!a),S=h(()=>{f||!s||!O||!i||b(!1)}),T=h(E=>{!s||!i||E.key==="Escape"&&I&&(E.preventDefault(),b(!1))});if(q(()=>{if(!(!a||!u||!r))return K(r)},[u,r,a]),ee({open:s,trapFocus:P,restoreFocus:j,topmost:i,ownerDocument:r,surfaceRef:l,triggerRef:y.trigger}),B(r,"keydown",T),!a)return null;const{slots:o}=ae(k);return G(v("div",{className:n(m.portal({placement:p}),e),style:{zIndex:D,...M},...F,children:[!f&&g("div",{className:n(m.overlay(),N),onClick:S}),v("div",{ref:H(l,z),className:n(m.surface({variant:R,placement:p,size:w}),x),"aria-describedby":t["aria-describedby"],"aria-label":t["aria-label"],"aria-labelledby":t["aria-labelledby"],"aria-modal":"true",role:"dialog",tabIndex:-1,onTransitionEnd:C,children:[o.header.el,o.body.el,o.footer.el,o.close.el??g(W,{})]})]}),a)});c.displayName="Modal.Portal";export{c as default,re as isPortalElement};

package/dist/modal/Trigger.js

@@ -1 +1 @@
-import{useEffectCallback as m}from"@nild/hooks";import{mergeRefs as f}from"@nild/shared";import{isValidElement as s,Children as n,cloneElement as p}from"react";import g from"../_shared/utils/merge-props/index.js";import{useModalContext as c}from"./contexts/index.js";import d from"./style/index.js";const u=e=>s(e)&&e.type===o,o=({children:e})=>{const{refs:t,requestOpen:a}=c(),r=n.toArray(e).find(l=>s(l)),i=m(()=>{a(!0)});return r?p(r,g(r.props,{className:d.trigger(),onClick:i,ref:f(t.trigger,r.props.ref)})):null};o.displayName="Modal.Trigger";export{o as default,u as isTriggerElement};
+import{useEffectCallback as l}from"@nild/hooks";import{mergeRefs as p}from"@nild/shared";import{isValidElement as t,Children as f,cloneElement as n}from"react";import d from"../_shared/utils/merge-props/index.js";import{useModalContext as g}from"./contexts/index.js";import c from"./style/index.js";const u=e=>t(e)&&e.type===o,o=({children:e})=>{const{refs:a,updateOpen:s}=g(),r=f.toArray(e).find(m=>t(m)),i=l(()=>{s(!0)});return r?n(r,d(r.props,{className:c.trigger(),onClick:i,ref:p(a.trigger,r.props.ref)})):null};o.displayName="Modal.Trigger";export{o as default,u as isTriggerElement};

package/dist/modal/_shared/index.d.ts

@@ -1,5 +1,2 @@
 import { ModalPlacement, ModalVariant } from '../interfaces';
 export declare const resolvePlacement: (variant: ModalVariant, placement?: ModalPlacement) => ModalPlacement;
-export declare const getFocusableElements: (container: HTMLElement) => HTMLElement[];
-export declare const focusWithin: (container: HTMLElement, fromEnd?: boolean) => HTMLElement;
-export declare const restoreFocusTo: (target?: HTMLElement | null, fallback?: HTMLElement | null) => void;

package/dist/modal/_shared/index.js

@@ -1 +1 @@
-const a=(t,e)=>t==="drawer"?e&&e!=="center"?e:"right":"center",o=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe","summary",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(","),d=t=>{const e=window.getComputedStyle(t);return e.display!=="none"&&e.visibility!=="hidden"&&!t.hidden},r=t=>Array.from(t.querySelectorAll(o)).filter(e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"&&e.tabIndex>=0&&d(e)),l=(t,e=!1)=>{const n=r(t).at(e?-1:0)??t;return n.focus(),n},s=(t,e)=>{var n;const i=t!=null&&t.isConnected?t:e!=null&&e.isConnected?e:null;(n=i?.focus)==null||n.call(i)};export{l as focusWithin,r as getFocusableElements,a as resolvePlacement,s as restoreFocusTo};
+const r=(t,e)=>t==="drawer"?e&&e!=="center"?e:"right":"center";export{r as resolvePlacement};

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

@@ -14,11 +14,8 @@ export interface ModalContextValue {
     accessibility: ModalAccessibility;
     refs: {
         trigger: RefObject<Element>;
-        surface: RefObject<HTMLDivElement>;
-        lastActiveEl: RefObject<HTMLElement | null>;
     };
-    requestOpen: Dispatch<SetStateAction<boolean>>;
-    close: () => void;
+    updateOpen: Dispatch<SetStateAction<boolean>>;
 }
 declare const ModalProvider: import('react').Provider<ModalContextValue>, useModalContext: () => ModalContextValue;
 export { ModalProvider, useModalContext };

package/dist/modal/contexts/index.js

@@ -1 +1 @@
-import{createContextSuite as e}from"@nild/shared";const[l,r]=e({defaultValue:{open:!1,variant:"dialog",placement:"center",size:"medium",disabled:!1,closeOnEscape:!0,closeOnOverlayClick:!0,trapFocus:!0,restoreFocus:!0,lockScroll:!0,accessibility:{"aria-label":void 0,"aria-labelledby":void 0,"aria-describedby":void 0},refs:{trigger:{current:null},surface:{current:null},lastActiveEl:{current:null}},requestOpen:()=>{},close:()=>{}}});export{l as ModalProvider,r as useModalContext};
+import{createContextSuite as e}from"@nild/shared";const[a,l]=e({defaultValue:{open:!1,variant:"dialog",placement:"center",size:"medium",disabled:!1,closeOnEscape:!0,closeOnOverlayClick:!0,trapFocus:!0,restoreFocus:!0,lockScroll:!0,accessibility:{"aria-label":void 0,"aria-labelledby":void 0,"aria-describedby":void 0},refs:{trigger:{current:null}},updateOpen:()=>{}}});export{a as ModalProvider,l as useModalContext};

package/dist/modal/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useModalStack } from './useModalStack';
+export { useModalFocusScope } from './useModalFocusScope';

package/dist/modal/hooks/useModalFocusScope.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+interface UseModalFocusScopeOptions {
+    open: boolean;
+    trapFocus: boolean;
+    restoreFocus: boolean;
+    topmost: boolean;
+    ownerDocument: Document | null;
+    surfaceRef: RefObject<HTMLElement>;
+    triggerRef: RefObject<Element>;
+}
+export declare const useModalFocusScope: ({ open, trapFocus, restoreFocus, topmost, ownerDocument, surfaceRef, triggerRef, }: UseModalFocusScopeOptions) => void;
+export {};

package/dist/modal/hooks/useModalFocusScope.js

@@ -0,0 +1 @@
+import{useEffectCallback as v,useIsomorphicLayoutEffect as A,useEventListener as y}from"@nild/hooks";import{useRef as h,useEffect as E}from"react";const C=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe","summary",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(","),w=e=>{const t=e.ownerDocument.defaultView;if(!t)return!e.hidden;const o=t.getComputedStyle(e);return o.display!=="none"&&o.visibility!=="hidden"&&!e.hidden},g=e=>Array.from(e.querySelectorAll(C)).filter(t=>!t.hasAttribute("disabled")&&t.getAttribute("aria-hidden")!=="true"&&t.tabIndex>=0&&w(t)),m=(e,t=!1)=>{const o=g(e).at(t?-1:0)??e;return o.focus(),o},K=(e,t)=>{var o;const c=e!=null&&e.isConnected?e:t!=null&&t.isConnected?t:null;(o=c?.focus)==null||o.call(c)},S=({open:e,trapFocus:t,restoreFocus:o,topmost:c,ownerDocument:u,surfaceRef:a,triggerRef:p})=>{const b=h(null),i=h(e),x=v(n=>{const r=a.current;if(!r||!e||!c||n.key!=="Tab"||!t)return;const s=g(r),l=u?.activeElement;if(s.length===0){n.preventDefault(),r.focus();return}if(!l||!r.contains(l)){n.preventDefault(),m(r,n.shiftKey);return}const d=s[0],f=s.at(-1);n.shiftKey&&l===d?(n.preventDefault(),f?.focus()):!n.shiftKey&&l===f&&(n.preventDefault(),d?.focus())}),D=v(n=>{const r=a.current,s=n.target;!r||!t||!e||!c||!s||r.contains(s)||m(r)});E(()=>{const n=i.current;e&&!n&&(b.current=u?.activeElement),i.current=e},[e,u]),E(()=>{const n=p.current;return()=>{!o||i.current||K(b.current,n)}},[o,p]),A(()=>{if(!e)return;const n=setTimeout(()=>{const r=a.current;if(!r||!c)return;const s=u?.activeElement;(!s||!r.contains(s))&&m(r)},0);return()=>{clearTimeout(n)}},[e,u,a,c]),y(u,"keydown",x),y(u,"focusin",D)};export{S as useModalFocusScope};

package/dist/popup/Trigger.js

@@ -1 +1 @@
-import{useEffectCallback as u,useEventListener as m}from"@nild/hooks";import{mergeRefs as N,cnJoin as w}from"@nild/shared";import{Children as y,isValidElement as B,cloneElement as F}from"react";import{usePopupContext as P}from"./contexts/index.js";import b from"./style/index.js";const f=({children:g})=>{var p,v;const{actions:r,refs:a,setOpen:s,enter:h,leave:x}=P(),o=y.toArray(g).find(e=>B(e)),d=r.has("click")||r.has("contextMenu")?window:null,E=u(e=>{var l,n;(n=(l=o?.props)==null?void 0:l.onMouseEnter)==null||n.call(l,e),h()}),M=u(e=>{var l,n;(n=(l=o?.props)==null?void 0:l.onMouseLeave)==null||n.call(l,e),x()}),k=u(e=>{var l,n;(n=(l=o?.props)==null?void 0:l.onFocus)==null||n.call(l,e),r.has("focus")&&s(!0)}),C=u(e=>{var l,n;(n=(l=o?.props)==null?void 0:l.onBlur)==null||n.call(l,e),r.has("focus")&&s(!1)});return m(d,"click",e=>{var l,n;const t=e.target,i=(l=a.trigger.current)==null?void 0:l.contains(t),c=(n=a.portal.current)==null?void 0:n.contains(t);i?(r.has("click")&&s(L=>!L),r.has("contextMenu")&&s(!1)):!c&&s(!1)}),m(d,"contextmenu",e=>{var l,n;const t=e.target,i=(l=a.trigger.current)==null?void 0:l.contains(t),c=(n=a.portal.current)==null?void 0:n.contains(t);i?r.has("contextMenu")&&(e.preventDefault(),s(!0)):!c&&s(!1)}),o?F(o,{...o?.props,className:w(b.trigger(),(p=o?.props)==null?void 0:p.className),onMouseEnter:E,onMouseLeave:M,onFocus:k,onBlur:C,ref:N(a.trigger,(v=o?.props)==null?void 0:v.ref)}):null};f.displayName="Popup.Trigger";export{f as default};
+import{useEffectCallback as u,useEventListener as d}from"@nild/hooks";import{mergeRefs as L,cnJoin as N}from"@nild/shared";import{Children as w,isValidElement as y,cloneElement as B}from"react";import{usePopupContext as F}from"./contexts/index.js";import b from"./style/index.js";const f=({children:m})=>{var p;const{actions:r,refs:s,setOpen:t,enter:g,leave:h}=F(),e=w.toArray(m).find(o=>y(o)),v=r.has("click")||r.has("contextMenu")?window:null,M=u(o=>{var l,n;(n=(l=e?.props)==null?void 0:l.onMouseEnter)==null||n.call(l,o),g()}),x=u(o=>{var l,n;(n=(l=e?.props)==null?void 0:l.onMouseLeave)==null||n.call(l,o),h()}),E=u(o=>{var l,n;(n=(l=e?.props)==null?void 0:l.onFocus)==null||n.call(l,o),r.has("focus")&&t(!0)}),k=u(o=>{var l,n;(n=(l=e?.props)==null?void 0:l.onBlur)==null||n.call(l,o),r.has("focus")&&t(!1)});return d(v,"click",o=>{var l,n;const a=o.target,i=(l=s.trigger.current)==null?void 0:l.contains(a),c=(n=s.portal.current)==null?void 0:n.contains(a);i?(r.has("click")&&t(C=>!C),r.has("contextMenu")&&t(!1)):!c&&t(!1)}),d(v,"contextmenu",o=>{var l,n;const a=o.target,i=(l=s.trigger.current)==null?void 0:l.contains(a),c=(n=s.portal.current)==null?void 0:n.contains(a);i?r.has("contextMenu")&&(o.preventDefault(),t(!0)):!c&&t(!1)}),e?B(e,{...e?.props,className:N(b.trigger(),(p=e?.props)==null?void 0:p.className),onMouseEnter:M,onMouseLeave:x,onFocus:E,onBlur:k,ref:L(s.trigger,e.ref)}):null};f.displayName="Popup.Trigger";export{f as default};

package/dist/select/Option.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement, ReactNode } from 'react';
+import { SelectOptionProps } from './interfaces';
+export declare const isOptionElement: <T>(child: ReactNode) => child is ReactElement<SelectOptionProps<T>>;
+declare const Option: <T>(props: SelectOptionProps<T> & import('react').RefAttributes<HTMLDivElement>) => ReactElement | null;
+export default Option;

package/dist/select/Option.js

@@ -0,0 +1 @@
+import{jsxs as N,jsx as i}from"react/jsx-runtime";import b from"@nild/icons/CheckSmall";import{forwardRefWithGenerics as v,cnMerge as x}from"@nild/shared";import{isValidElement as M}from"react";import s from"./style/index.js";const w=e=>M(e)&&e.type===o,o=v((e,r)=>{const{size:a="medium",label:l,disabled:n=!1,selected:t=!1,active:d=!1,children:c,className:m,onClick:p,onMouseDown:f,onMouseEnter:u,...h}=e;return N("div",{...h,"aria-disabled":n||void 0,"aria-selected":t,className:x(s.option({size:a,disabled:n,active:d}),m),onClick:p,onMouseDown:f,onMouseEnter:u,ref:r,role:"option",children:[i("div",{className:s.optionContent(),children:c??i("span",{className:s.optionLabel(),children:l})}),i("span",{"aria-hidden":"true",className:s.optionIndicator({size:a}),children:t?i(b,{className:"text-brand",size:"1em"}):null})]})});o.displayName="Select.Option";export{o as default,w as isOptionElement};

package/dist/select/Select.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement, RefAttributes } from 'react';
+import { SelectProps } from './interfaces';
+declare const Select: <T>(props: SelectProps<T> & RefAttributes<HTMLButtonElement>) => ReactElement | null;
+export default Select;

package/dist/select/Select.js

@@ -0,0 +1 @@
+import{jsxs as J,jsx as m}from"react/jsx-runtime";import{useControllableState as de,useIsomorphicLayoutEffect as pe}from"@nild/hooks";import{Icon as ue}from"@nild/icons";import me from"@nild/icons/Down";import{forwardRefWithGenerics as be,mergeRefs as Q,cnMerge as fe}from"@nild/shared";import{useId as he,useRef as K,useState as ge,useMemo as ve,cloneElement as ye}from"react";import D from"../_shared/utils/merge-handlers/index.js";import xe from"../_shared/utils/register-slots/index.js";import L from"../popup/index.js";import{useSelectNavigation as Ie}from"./hooks/useSelectNavigation.js";import{isOptionElement as Oe}from"./Option.js";import N from"./style/index.js";const je=xe({option:{isMatched:t=>Oe(t),multiple:!0}}),g=t=>Array.isArray(t)?t:[],we=(t,l,s)=>{if(!t)return Object.is(l,s);const n=g(l),i=g(s);return n.length===i.length&&n.every((r,c)=>Object.is(r,i[c]))},ke=(t,l)=>t.some(s=>Object.is(s,l))?t.filter(s=>!Object.is(s,l)):t.concat(l),De=(t,l,s)=>{const{slots:n}=je(t),i=n.option.el,r=[],c=[],v=[],y=l?g(s):[];let x="",d=!0,b=-1;return i.forEach((p,f)=>{var I;const o=p.props,O=l?y.some(j=>Object.is(j,o.value)):Object.is(o.value,s);r.push({key:((I=p.key)==null?void 0:I.toString())??`${n.option.seq[f]}`,selected:O,element:p,props:o}),o.disabled||c.push(f),O&&(d=!1,!o.disabled&&b<0&&(b=f),l?v.push(o.label):x=o.label)}),{options:r,enabledIndices:c,selectedIndex:b,selectionValues:y,selectionText:l?v.join(", "):x,selectionEmpty:d}},U=be((t,l)=>{var s;const{className:n,children:i,"aria-label":r,"aria-labelledby":c,onKeyDown:v,placeholder:y,variant:x="outlined",size:d="medium",block:b=!1,disabled:p=!1,placement:f="bottom-start",offset:I=8,multiple:o=!1,value:O,defaultValue:j,onChange:w,...X}=t,Y=he(),E=K(null),A=K(null),V=K([]),[S,C]=ge(!1),[M,Z]=de(O,o?g(j):j),{options:R,enabledIndices:W,selectedIndex:_,selectionValues:ee,selectionText:oe,selectionEmpty:$}=ve(()=>De(i,o,M),[i,o,M]),h=!p&&W.length>0,u=h&&S,B=()=>h&&C(!0),z=()=>C(!1),q=e=>{we(o,M,e)||(o?w?.(g(e)):w?.(e),Z(()=>e))},G=e=>{const a=R[e];if(!(!a||a.props.disabled)){if(o)return q(ke(ee,a.props.value));q(a.props.value),z(),ie()}},{activeIndex:k,setActiveIndex:te,focusListbox:le,handleTriggerKeyDown:se,handleListboxKeyDown:ae,handleListboxBlur:ne,focusTrigger:ie}=Ie({open:u,selectedIndex:_,enabledIndices:W,triggerRef:E,listboxRef:A,optionRefs:V,onOpen:B,onClose:z,onSelect:G});pe(()=>{!h&&S&&C(!1)},[h,S]);const P=(e,a)=>e.props.id??`${Y}-option-${a}`,F=k>=0?R[k]:void 0,re=u&&F?P(F,k):void 0,ce=(e,a)=>{const H=e.element;return ye(H,{key:e.key,id:P(e,a),size:d,active:k===a,className:e.props.className,onClick:D(e.props.onClick,()=>G(a)),onMouseDown:D(e.props.onMouseDown,T=>T.preventDefault()),onMouseEnter:D(e.props.onMouseEnter,()=>{e.props.disabled||te(a)}),ref:Q(H.ref,T=>{V.current[a]=T}),selected:e.selected})};return J(L,{action:"click",arrowed:!1,disabled:!h,offset:I,open:u,placement:f,onClose:z,onOpen:B,children:[m(L.Trigger,{children:J("button",{...X,"aria-expanded":u,"aria-haspopup":"listbox","aria-label":r,"aria-labelledby":c,className:fe(N.trigger({variant:x,size:d,block:b,disabled:p,open:u}),n),disabled:p,onKeyDown:D(v,se),ref:Q(l,E),type:"button",children:[m("span",{className:N.triggerContent({size:d,placeholder:$}),children:$?y??"":oe}),m("span",{"aria-hidden":"true",className:N.triggerIcon({size:d,open:u}),children:m(ue,{component:me})})]})}),m(L.Portal,{children:m("div",{"aria-activedescendant":re,"aria-label":r,"aria-labelledby":c,"aria-multiselectable":o||void 0,className:N.listbox(),onBlur:ne,onKeyDown:ae,ref:e=>{A.current=e,e&&u&&le()},role:"listbox",style:{minWidth:(s=E.current)==null?void 0:s.offsetWidth},tabIndex:-1,children:R.map(ce)})})]})});U.displayName="Select";export{U as default};

package/dist/select/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useSelectNavigation } from './useSelectNavigation';

package/dist/select/hooks/useSelectNavigation.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, FocusEvent, KeyboardEvent, MutableRefObject, RefObject, SetStateAction } from 'react';
+interface UseSelectNavigationOptions {
+    open: boolean;
+    selectedIndex: number;
+    enabledIndices: number[];
+    triggerRef: RefObject<HTMLButtonElement>;
+    listboxRef: RefObject<HTMLDivElement>;
+    optionRefs: MutableRefObject<(HTMLDivElement | null)[]>;
+    onOpen: () => void;
+    onClose: () => void;
+    onSelect: (index: number) => void;
+}
+interface UseSelectNavigationReturn {
+    activeIndex: number;
+    setActiveIndex: Dispatch<SetStateAction<number>>;
+    focusListbox: () => void;
+    handleTriggerKeyDown: (evt: KeyboardEvent<HTMLButtonElement>) => void;
+    handleListboxKeyDown: (evt: KeyboardEvent<HTMLDivElement>) => void;
+    handleListboxBlur: (evt: FocusEvent<HTMLDivElement>) => void;
+    focusTrigger: () => void;
+}
+export declare const useSelectNavigation: ({ open, selectedIndex, enabledIndices, triggerRef, listboxRef, optionRefs, onOpen, onClose, onSelect, }: UseSelectNavigationOptions) => UseSelectNavigationReturn;
+export {};

package/dist/select/hooks/useSelectNavigation.js

@@ -0,0 +1 @@
+import{useEffectCallback as i,useIsomorphicLayoutEffect as v}from"@nild/hooks";import{useRef as I,useState as L}from"react";const x=n=>{if(typeof window>"u"||!n)return;const s=n.ownerDocument;s.activeElement!==n&&window.requestAnimationFrame(()=>{n.isConnected&&s.activeElement!==n&&n.focus()})},T=({open:n,selectedIndex:s,enabledIndices:t,triggerRef:k,listboxRef:D,optionRefs:g,onOpen:p,onClose:l,onSelect:m})=>{const d=I(!1),[o,f]=L(-1),w=i(()=>x(D.current)),b=i(()=>x(k.current)),a=e=>f(r=>{const c=t.length-1;if(c<0)return-1;if(e==="start")return t[0];if(e==="end")return t[c];const u=t.indexOf(r);if(u===-1)return e===1?t[0]:t[c];const A=Math.min(Math.max(u+e,0),c);return t[A]}),h=i(e=>{if(t.length!==0)switch(e.key){case"ArrowDown":e.preventDefault(),n?a(1):p();break;case"ArrowUp":e.preventDefault(),n?a(-1):p();break;case"Home":n&&(e.preventDefault(),a("start"));break;case"End":n&&(e.preventDefault(),a("end"));break;case"Enter":case" ":e.preventDefault(),n?m(o):p();break;case"Escape":n&&(e.preventDefault(),l(),b());break}}),E=i(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),a(1);break;case"ArrowUp":e.preventDefault(),a(-1);break;case"Home":e.preventDefault(),a("start");break;case"End":e.preventDefault(),a("end");break;case"Enter":case" ":e.preventDefault(),m(o);break;case"Escape":e.preventDefault(),l(),b();break;case"Tab":l();break}}),y=i(e=>{var r,c;const u=e.relatedTarget;(r=k.current)!=null&&r.contains(u)||(c=D.current)!=null&&c.contains(u)||l()});return v(()=>{if(!n){d.current=!1,f(-1);return}const e=s>=0?s:t[0]??-1;f(r=>d.current&&t.includes(r)?r:e),d.current=!0},[t,n,s]),v(()=>{n&&w()},[w,n]),v(()=>{if(!n||o<0||typeof window>"u")return;const e=window.requestAnimationFrame(()=>{var r;(r=g.current[o])==null||r.scrollIntoView({block:"nearest"})});return()=>window.cancelAnimationFrame(e)},[o,n]),{activeIndex:o,setActiveIndex:f,focusTrigger:b,focusListbox:w,handleTriggerKeyDown:h,handleListboxKeyDown:E,handleListboxBlur:y}};export{T as useSelectNavigation};

package/dist/select/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @category Components
+ */
+declare const Select: (<T>(props: import('./interfaces').SelectProps<T> & import('react').RefAttributes<HTMLButtonElement>) => import('react').ReactElement | null) & {
+    Option: <T>(props: import('./interfaces').SelectOptionProps<T> & import('react').RefAttributes<HTMLDivElement>) => import('react').ReactElement | null;
+};
+export type * from './interfaces';
+export default Select;

package/dist/select/index.js

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

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

@@ -0,0 +1,30 @@
+import { SelectSize, SelectVariant } from '../interfaces';
+declare const _default: {
+    trigger: (props?: {
+        variant?: SelectVariant;
+        size?: SelectSize;
+        block?: boolean;
+        disabled?: boolean;
+        open?: boolean;
+    } | undefined) => string;
+    triggerContent: (props?: {
+        size?: SelectSize;
+        placeholder?: boolean;
+    } | undefined) => string;
+    triggerIcon: (props?: {
+        size?: SelectSize;
+        open?: boolean;
+    } | undefined) => string;
+    listbox: (props?: object | undefined) => string;
+    option: (props?: {
+        size?: SelectSize;
+        disabled?: boolean;
+        active?: boolean;
+    } | undefined) => string;
+    optionContent: (props?: object | undefined) => string;
+    optionLabel: (props?: object | undefined) => string;
+    optionIndicator: (props?: {
+        size?: SelectSize;
+    } | undefined) => string;
+};
+export default _default;

package/dist/select/style/index.js

@@ -0,0 +1 @@
+import{cva as e}from"@nild/shared";import{DISABLED_CLS as t}from"../../_shared/style/index.js";const n=e(["nd-select-trigger","group",["inline-flex","items-center"],"box-border","font-nd","overflow-hidden","text-left","appearance-none","border","transition-colors","outline-none",t],{variants:{variant:{outlined:["bg-transparent","border-main","enabled:hover:border-brand-hover"],filled:["bg-muted","border-subtle"]},size:{small:["h-6","text-sm","rounded-sm"],medium:["h-8","text-md","rounded-md"],large:["h-10","text-lg","rounded-md"]},block:{true:["flex","w-full"],false:""},disabled:{true:"",false:"cursor-pointer"},open:{true:["border-brand","z-1","ring-focused"],false:""}},compoundVariants:[{variant:"filled",disabled:!1,open:!1,className:["enabled:hover:bg-muted-hover","enabled:hover:border-muted"]},{variant:"filled",open:!0,className:["bg-muted-hover"]}]}),r=e(["nd-select-trigger-content","min-w-0","flex-auto","truncate"],{variants:{size:{small:["pl-2","text-sm"],medium:["pl-3","text-md"],large:["pl-4","text-lg"]},placeholder:{true:["text-subtle"],false:["text-main"]}}}),o=e(["nd-select-trigger-icon","shrink-0","inline-flex","items-center","text-muted","transition-transform"],{variants:{size:{small:["px-2","text-sm"],medium:["px-3","text-md"],large:["px-4","text-lg"]},open:{true:["rotate-180"],false:""}}}),l=e(["nd-select-listbox","max-h-60","overflow-auto","overscroll-contain","px-1","py-1","outline-none"]),i=e(["nd-select-option","w-full","flex","items-center","gap-2","rounded-sm","text-left","text-main","select-none","transition-colors"],{variants:{size:{small:["min-h-8","px-2","text-sm"],medium:["min-h-9","px-3","text-md"],large:["min-h-10","px-4","text-lg"]},disabled:{true:["cursor-not-allowed","select-none","text-subtle","opacity-50"],false:["cursor-pointer","hover:bg-muted-hover"]},active:{true:["bg-muted"],false:""}}}),a=e(["nd-select-option-content","min-w-0","flex-auto"]),s=e(["nd-select-option-label","block","truncate"]),d=e(["nd-select-option-indicator","shrink-0","inline-flex","items-center","justify-center"],{variants:{size:{small:["size-3.5","text-sm"],medium:["size-4","text-md"],large:["size-4.5","text-lg"]}}}),m={trigger:n,triggerContent:r,triggerIcon:o,listbox:l,option:i,optionContent:a,optionLabel:s,optionIndicator:d};export{m as default};

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.39",
+  "version": "0.0.41",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {