@nild/components 0.0.52 → 0.0.54

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

@@ -0,0 +1 @@
+export * from './portal-container';

package/dist/_shared/contexts/portal-container/index.d.ts

@@ -0,0 +1,5 @@
+export interface PortalContainerContextValue {
+    container: HTMLElement | null;
+}
+declare const PortalContainerProvider: import('react').Provider<PortalContainerContextValue>, usePortalContainerContext: () => PortalContainerContextValue;
+export { PortalContainerProvider, usePortalContainerContext };

package/dist/_shared/contexts/portal-container/index.js

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

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

@@ -0,0 +1,20 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type AlertType = 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    type?: AlertType;
+    closable?: boolean;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    closeAriaLabel?: string;
+    onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
+    children?: ReactNode;
+}
+
+export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+
+export interface TitleProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}

package/dist/button/interfaces/index.d.ts

@@ -0,0 +1,24 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';
+export type ButtonVariant = 'solid' | 'outlined' | 'filled' | 'text';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type ButtonShape = 'round' | 'square';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    shape?: ButtonShape;
+    equal?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+}
+
+export type GroupDirection = 'horizontal' | 'vertical';
+
+export interface GroupProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: GroupDirection;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    equal?: boolean;
+    disabled?: boolean;
+    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
+}

package/dist/checkbox/interfaces/index.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type CheckboxVariant = 'solid' | 'outlined';
+export type CheckboxSize = 'small' | 'medium' | 'large';
+
+export interface CheckboxProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultValue'> {
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: unknown;
+    onChange?: (checked: boolean) => void;
+}
+
+export interface IndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: (checked: boolean) => ReactNode;
+}
+
+export interface LabelProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    children?: ReactNode | ((checked: boolean) => ReactNode);
+}
+
+export type GroupDirection = 'horizontal' | 'vertical';
+
+export interface GroupProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    direction?: GroupDirection;
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    disabled?: boolean;
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
+}

package/dist/divider/interfaces/index.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+export type DividerVariant = 'solid' | 'dashed' | 'dotted';
+export type DividerDirection = 'horizontal' | 'vertical';
+export type DividerAlign = 'left' | 'center' | 'right';
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: DividerVariant;
+    direction?: DividerDirection;
+    align?: DividerAlign;
+}

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

@@ -0,0 +1,28 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type FieldStatus = 'success' | 'warning' | 'error';
+export type FieldBind = 'value' | 'checked';
+
+export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    bind?: FieldBind;
+    children?: ReactNode;
+}
+
+export interface LabelProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}
+
+export interface HelperProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export interface StatusProps extends HTMLAttributes<HTMLDivElement> {
+    type?: FieldStatus;
+    children?: ReactNode;
+}
+
+export interface RequiredIndicatorProps extends HTMLAttributes<HTMLSpanElement> {
+    children?: ReactNode;
+}

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

@@ -0,0 +1,32 @@
+import { FormEvent, FormHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type ValidateTrigger = 'change' | 'submit';
+export type FormValue = Record<string, unknown>;
+export type FormIssue = ReactNode | { message: ReactNode };
+export type FormIssueMap = Record<string, FormIssue | FormIssue[] | undefined>;
+
+export interface FormResolverResult {
+    value?: FormValue;
+    errors?: FormIssueMap;
+    warnings?: FormIssueMap;
+}
+
+export type FormResolver = (value: FormValue) => FormResolverResult | Promise<FormResolverResult>;
+
+export interface ActionsProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export interface FormProps
+    extends Omit<
+        FormHTMLAttributes<HTMLFormElement>,
+        'children' | 'defaultValue' | 'onChange' | 'onInvalid' | 'onSubmit'
+    > {
+    children?: ReactNode;
+    defaultValue?: FormValue;
+    resolver?: FormResolver;
+    validateTrigger?: ValidateTrigger | ValidateTrigger[];
+    onChange?: (value: FormValue) => void;
+    onInvalid?: (errors: FormIssueMap, value: FormValue, evt: FormEvent<HTMLFormElement>) => void;
+    onSubmit?: (value: FormValue, evt: FormEvent<HTMLFormElement>) => void | Promise<void>;
+    disabled?: boolean;
+}

package/dist/input/interfaces/index.d.ts

@@ -0,0 +1,76 @@
+import { InputHTMLAttributes, HTMLAttributes, FocusEvent, ChangeEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
+export type InputVariant = 'outlined' | 'filled' | 'underlined';
+export type InputSize = 'small' | 'medium' | 'large';
+
+export interface InputProps
+    extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'defaultValue' | 'onChange'> {
+    variant?: InputVariant;
+    size?: InputSize;
+    block?: boolean;
+    disabled?: boolean;
+    value?: string | number;
+    defaultValue?: string | number;
+    onChange?: (value: string | number, evt: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export type PrefixProps = HTMLAttributes<HTMLSpanElement>;
+export type SuffixProps = HTMLAttributes<HTMLSpanElement>;
+
+export type PrependProps = HTMLAttributes<HTMLDivElement>;
+export type AppendProps = HTMLAttributes<HTMLDivElement>;
+
+export interface CompositeProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: InputVariant;
+    size?: InputSize;
+    disabled?: boolean;
+    block?: boolean;
+    children?:
+        | ReactElement<PrependProps | InputProps | AppendProps>
+        | Array<ReactElement<PrependProps | InputProps | AppendProps>>;
+}
+
+export interface SearchProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    keyword?: string;
+    defaultKeyword?: string;
+    onChange?: (value: string, evt: ChangeEvent<HTMLInputElement>) => void;
+    onSearch?: (value: string) => void;
+}
+
+export interface PasswordProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string, evt: ChangeEvent<HTMLInputElement>) => void;
+    visible?: boolean;
+    defaultVisible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+}
+
+export interface OTPRef {
+    focus: (index?: number) => void;
+    blur: () => void;
+}
+
+export interface OTPProps
+    extends Omit<HTMLAttributes<HTMLSpanElement>, 'placeholder' | 'onFocus' | 'onChange'>,
+        Pick<InputProps, 'variant' | 'type' | 'block' | 'size' | 'disabled'> {
+    placeholder?: string[];
+    length?: number;
+    separator?: ReactNode | ((index: number) => ReactNode);
+    value?: string[];
+    defaultValue?: string[];
+    onFocus?: (index: number, evt: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (evt: FocusEvent<HTMLSpanElement>) => void;
+    onChange?: (value: string[], evt: SyntheticEvent) => void;
+    onComplete?: (value: string[], evt: SyntheticEvent) => void;
+}
+
+export interface NumberProps extends Omit<InputProps, 'value' | 'defaultValue' | 'onChange'> {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined, evt?: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/modal/Portal.js

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

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

@@ -5,8 +5,9 @@ interface UseModalFocusScopeOptions {
     restoreFocus: boolean;
     topmost: boolean;
     ownerDocument: Document | null;
+    portalContainerRef?: RefObject<HTMLElement>;
     surfaceRef: RefObject<HTMLElement>;
     triggerRef: RefObject<Element>;
 }
-export declare const useModalFocusScope: ({ open, trapFocus, restoreFocus, topmost, ownerDocument, surfaceRef, triggerRef, }: UseModalFocusScopeOptions) => void;
+export declare const useModalFocusScope: ({ open, trapFocus, restoreFocus, topmost, ownerDocument, portalContainerRef, surfaceRef, triggerRef, }: UseModalFocusScopeOptions) => void;
 export {};

package/dist/modal/hooks/useModalFocusScope.js

@@ -1 +1 @@
-import{useTimeout as C,useEffectCallback as h,useIsomorphicLayoutEffect as w,useEventListener as y}from"@nild/hooks";import{useRef as E,useEffect as g}from"react";const K=["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(","),S=e=>{const n=e.ownerDocument.defaultView;if(!n)return!e.hidden;const u=n.getComputedStyle(e);return u.display!=="none"&&u.visibility!=="hidden"&&!e.hidden},x=e=>Array.from(e.querySelectorAll(K)).filter(n=>!n.hasAttribute("disabled")&&n.getAttribute("aria-hidden")!=="true"&&n.tabIndex>=0&&S(n)),p=(e,n=!1)=>{const u=x(e).at(n?-1:0)??e;return u.focus(),u},k=(e,n)=>{var u;const c=e!=null&&e.isConnected?e:n!=null&&n.isConnected?n:null;(u=c?.focus)==null||u.call(c)},F=({open:e,trapFocus:n,restoreFocus:u,topmost:c,ownerDocument:o,surfaceRef:a,triggerRef:b})=>{const v=E(null),i=E(e),d=C(()=>{const t=a.current;if(!t||!c)return;const r=o?.activeElement;(!r||!t.contains(r))&&p(t)},0),D=h(t=>{const r=a.current;if(!r||!e||!c||t.key!=="Tab"||!n)return;const s=x(r),l=o?.activeElement;if(s.length===0){t.preventDefault(),r.focus();return}if(!l||!r.contains(l)){t.preventDefault(),p(r,t.shiftKey);return}const f=s[0],m=s.at(-1);t.shiftKey&&l===f?(t.preventDefault(),m?.focus()):!t.shiftKey&&l===m&&(t.preventDefault(),f?.focus())}),A=h(t=>{const r=a.current,s=t.target;!r||!n||!e||!c||!s||r.contains(s)||p(r)});g(()=>{const t=i.current;e&&!t&&(v.current=o?.activeElement),i.current=e},[e,o]),g(()=>{const t=b.current;return()=>{!u||i.current||k(v.current,t)}},[u,b]),w(()=>{if(e)return d.run(),d.cancel},[d,e,o,a,c]),y(o,"keydown",D),y(o,"focusin",A)};export{F as useModalFocusScope};
+import{useTimeout as F,useEffectCallback as E,useIsomorphicLayoutEffect as K,useEventListener as g}from"@nild/hooks";import{useRef as D,useEffect as A}from"react";const R=["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(","),S=e=>{const n=e.ownerDocument.defaultView;if(!n)return!e.hidden;const o=n.getComputedStyle(e);return o.display!=="none"&&o.visibility!=="hidden"&&!e.hidden},C=e=>Array.from(e.querySelectorAll(R)).filter(n=>!n.hasAttribute("disabled")&&n.getAttribute("aria-hidden")!=="true"&&n.tabIndex>=0&&S(n)),b=(e,n=!1)=>{const o=C(e).at(n?-1:0)??e;return o.focus(),o},k=(e,n)=>{var o;const a=e!=null&&e.isConnected?e:n!=null&&n.isConnected?n:null;(o=a?.focus)==null||o.call(a)},I=({open:e,trapFocus:n,restoreFocus:o,topmost:a,ownerDocument:u,portalContainerRef:i,surfaceRef:s,triggerRef:h})=>{const y=D(null),d=D(e),m=F(()=>{const t=s.current;if(!t||!a)return;const r=u?.activeElement;(!r||!t.contains(r))&&b(t)},0),w=E(t=>{const r=s.current,c=i?.current??r;if(!r||!c||!e||!a||t.key!=="Tab"||!n)return;const l=C(r),f=u?.activeElement;if(l.length===0){t.preventDefault(),r.focus();return}if(!f||!c.contains(f)){t.preventDefault(),b(r,t.shiftKey);return}const p=l[0],v=l.at(-1);t.shiftKey&&f===p?(t.preventDefault(),v?.focus()):!t.shiftKey&&f===v&&(t.preventDefault(),p?.focus())}),x=E(t=>{const r=s.current,c=i?.current??r,l=t.target;!r||!c||!n||!e||!a||!l||c.contains(l)||b(r)});A(()=>{const t=d.current;e&&!t&&(y.current=u?.activeElement),d.current=e},[e,u]),A(()=>{const t=h.current;return()=>{!o||d.current||k(y.current,t)}},[o,h]),K(()=>{if(e)return m.run(),m.cancel},[m,e,u,s,a]),g(u,"keydown",w),g(u,"focusin",x)};export{I as useModalFocusScope};

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

@@ -1,4 +1,4 @@
 export declare const useModalStack: (ownerDocument: Document | null, present: boolean) => {
-    zIndex: number;
+    zIndex: string;
     topmost: boolean;
 };

package/dist/modal/hooks/useModalStack.js

@@ -1 +1 @@
-import{useRef as l,useEffect as m,useSyncExternalStore as S}from"react";import{getModalStackStore as d,EMPTY_MODAL_STACK as u}from"../_shared/stack.js";const f=40,i=(e,o)=>{const r=l(Symbol("modal")),t=e?d(e):null;m(()=>{if(!(!o||!t))return t.mount(r.current)},[o,t]);const n=S(c=>t?.subscribe(c)??(()=>{}),()=>t?.getSnapshot()??u,()=>u),s=n.indexOf(r.current),a=n.at(-1)===r.current;return{zIndex:f+(s===-1?0:s),topmost:a}};export{i as useModalStack};
+import{useRef as m,useEffect as d,useSyncExternalStore as i}from"react";import{getModalStackStore as S,EMPTY_MODAL_STACK as s}from"../_shared/stack.js";const n="var(--z-index-modal)",f=o=>o<=0?n:`calc(${n} + ${o})`,p=(o,e)=>{const r=m(Symbol("modal")),t=o?S(o):null;d(()=>{if(!(!e||!t))return t.mount(r.current)},[e,t]);const a=i(l=>t?.subscribe(l)??(()=>{}),()=>t?.getSnapshot()??s,()=>s),u=a.indexOf(r.current),c=a.at(-1)===r.current;return{zIndex:f(u),topmost:c}};export{p as useModalStack};

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

@@ -0,0 +1,64 @@
+import { ButtonProps } from '../../button';
+import { HTMLAttributes, ReactNode } from 'react';
+export type ModalPlacement = 'center' | 'left' | 'right' | 'top' | 'bottom';
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+export type ModalVariant = 'dialog' | 'drawer';
+export type DrawerPlacement = Exclude<ModalPlacement, 'center'>;
+
+export interface TriggerProps {
+    children?: ReactNode;
+}
+
+export interface PortalProps
+    extends Omit<HTMLAttributes<HTMLDivElement>, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> {
+    children?: ReactNode;
+    container?: Element | DocumentFragment;
+    overlayless?: boolean;
+    overlayClassName?: string;
+    surfaceClassName?: string;
+}
+
+export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export interface BodyProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export type CloseProps = ButtonProps;
+
+export interface ModalCommonProps {
+    children?: ReactNode;
+    size?: ModalSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    closeOnEscape?: boolean;
+    closeOnOverlayClick?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+    lockScroll?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+export interface DialogProps extends ModalCommonProps {
+    variant?: 'dialog';
+    placement?: 'center';
+}
+
+export interface DrawerProps extends ModalCommonProps {
+    variant: 'drawer';
+    placement?: DrawerPlacement;
+}
+
+export type ModalProps = DialogProps | DrawerProps;
+export type ModalAccessibility = Pick<ModalCommonProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'>;

package/dist/popover/interfaces/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { PopupSize, TriggerAction } from '../../popup';
+import { OffsetOptions, Placement } from '@floating-ui/dom';
+export interface PopoverProps {
+    children?: ReactNode;
+    placement?: Placement;
+    offset?: OffsetOptions;
+    action?: TriggerAction | TriggerAction[];
+    arrowed?: boolean;
+    size?: PopupSize;
+    delay?: number | [number] | [number, number];
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}

package/dist/popup/Portal.js

@@ -1 +1 @@
-import{jsxs as P,jsx as g}from"react/jsx-runtime";import{useEffectCallback as t}from"@nild/hooks";import{mergeRefs as h,cnMerge as n,getDPR as R}from"@nild/shared";import{forwardRef as b,Children as j,isValidElement as w,cloneElement as z}from"react";import{createPortal as L}from"react-dom";import $ from"./Arrow.js";import{usePopupContext as k,usePortalContext as A}from"./contexts/index.js";import m from"./style/index.js";const i=b(({className:p,style:f,children:u,container:c=document.body,...o},d)=>{var s;const{size:v,inverse:x,refs:y,enter:C,leave:E}=k(),{coords:l}=A(),e=j.toArray(u).find(r=>w(r)),M=t(r=>{var a;(a=o?.onMouseEnter)==null||a.call(o,r),C()}),N=t(r=>{var a;(a=o?.onMouseLeave)==null||a.call(o,r),E()});return e?L(P("div",{...o,className:n(m.portal(),p),style:{transform:`translate(${l.x}px, ${l.y}px)`,...R()>=1.5&&{willChange:"transform"},...f},onMouseEnter:M,onMouseLeave:N,ref:h(y.portal,d),children:[z(e,{...e.props,className:n(m.portalContent({size:v,inverse:x}),(s=e?.props)==null?void 0:s.className)}),g($,{})]}),c):null});i.displayName="Popup.Portal";export{i as default};
+import{jsxs as R,jsx as b}from"react/jsx-runtime";import{useEffectCallback as p}from"@nild/hooks";import{mergeRefs as j,cnMerge as u,getDPR as w}from"@nild/shared";import{forwardRef as z,Children as L,isValidElement as $,cloneElement as k}from"react";import{createPortal as A}from"react-dom";import{usePortalContainerContext as D}from"../_shared/contexts/portal-container/index.js";import V from"../_shared/utils/get-owner-document/index.js";import q from"./Arrow.js";import{usePopupContext as B,usePortalContext as F}from"./contexts/index.js";import f from"./style/index.js";const c=z(({className:d,style:v,children:x,container:s,...e},C)=>{var t;const{size:y,inverse:P,refs:l,enter:g,leave:E}=B(),{coords:n}=F(),M=D(),r=L.toArray(x).find(a=>$(a)),i=V(s,l.trigger.current),m=s??M.container??i?.body??null,N=p(a=>{var o;(o=e?.onMouseEnter)==null||o.call(e,a),g()}),h=p(a=>{var o;(o=e?.onMouseLeave)==null||o.call(e,a),E()});return!r||!m?null:A(R("div",{...e,className:u(f.portal(),d),style:{transform:`translate(${n.x}px, ${n.y}px)`,...w()>=1.5&&{willChange:"transform"},...v},onMouseEnter:N,onMouseLeave:h,ref:j(l.portal,C),children:[k(r,{...r.props,className:u(f.portalContent({size:y,inverse:P}),(t=r?.props)==null?void 0:t.className)}),b(q,{})]}),m)});c.displayName="Popup.Portal";export{c as default};

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { OffsetOptions, Placement } from '@floating-ui/dom';
+export type ArrowOrientation = 'up' | 'down' | 'left' | 'right';
+
+export type TriggerAction = 'click' | 'hover' | 'focus' | 'contextMenu';
+
+export interface TriggerProps {
+    children?: ReactNode;
+}
+
+export interface PortalProps extends HTMLAttributes<HTMLDivElement> {
+    container?: Element | DocumentFragment;
+}
+
+export type PopupSize = 'small' | 'medium' | 'large';
+
+export interface PopupProps {
+    children?: ReactNode;
+    placement?: Placement;
+    offset?: OffsetOptions;
+    action?: TriggerAction | TriggerAction[];
+    size?: PopupSize;
+    arrowed?: boolean;
+    inverse?: boolean;
+    delay?: number | [number] | [number, number];
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}

package/dist/popup/style/index.js

@@ -1 +1 @@
-import{cva as r}from"@nild/shared";const a=r(["nd-popup-trigger"]),e=r(["nd-popup-portal",["absolute","top-0","left-0"]]),t=r(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-canvas-inverse","text-main-inverse"],false:["bg-surface","text-main"]}}}),o=r(["nd-popup-arrow","absolute"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},inverse:{true:["bg-canvas-inverse"],false:["bg-surface"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{orientation:"up",className:["shadow-[-1px_-1px_0_0_var(--border-color-muted)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-muted)]"]}]}),s={trigger:a,portal:e,portalContent:t,arrow:o};export{s as default};
+import{cva as r}from"@nild/shared";const a=r(["nd-popup-trigger"]),e=r(["nd-popup-portal",["absolute","top-0","left-0","z-popup"]]),t=r(["rounded-md","shadow-lg"],{variants:{size:{small:["px-2","py-1"],medium:["px-4","py-3"],large:["px-6","py-5"]},inverse:{true:["bg-canvas-inverse","text-main-inverse"],false:["bg-surface","text-main"]}}}),o=r(["nd-popup-arrow","absolute"],{variants:{size:{small:["w-1.5","h-1.5"],medium:["w-3","h-3"],large:["w-4.5","h-4.5"]},arrowed:{true:"",false:["opacity-0","invisible"]},inverse:{true:["bg-canvas-inverse"],false:["bg-surface"]},orientation:{up:["transform-[translateY(-50%)_rotate(45deg)]","rounded-tl-sm"],down:["transform-[translateY(50%)_rotate(45deg)]","rounded-br-sm"],left:["transform-[translateX(-50%)_rotate(45deg)]","rounded-bl-sm"],right:["transform-[translateX(50%)_rotate(45deg)]","rounded-tr-sm"]}},compoundVariants:[{orientation:"up",className:["shadow-[-1px_-1px_0_0_var(--border-color-muted)]"]},{orientation:"down",className:["shadow-[1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"left",className:["shadow-[-1px_1px_0_0_var(--border-color-muted)]"]},{orientation:"right",className:["shadow-[1px_-1px_0_0_var(--border-color-muted)]"]}]}),s={trigger:a,portal:e,portalContent:t,arrow:o};export{s as default};

package/dist/radio/interfaces/index.d.ts

@@ -0,0 +1,33 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type RadioVariant = 'solid' | 'outlined';
+export type RadioSize = 'small' | 'medium' | 'large';
+
+export interface RadioProps extends Omit<HTMLAttributes<HTMLLabelElement>, 'onChange' | 'defaultValue'> {
+    variant?: RadioVariant;
+    size?: RadioSize;
+    disabled?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: unknown;
+    onChange?: (checked: boolean) => void;
+}
+
+export interface IndicatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: (checked: boolean) => ReactNode;
+}
+
+export interface LabelProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    children?: ReactNode | ((checked: boolean) => ReactNode);
+}
+
+export type GroupDirection = 'horizontal' | 'vertical';
+
+export interface GroupProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    direction?: GroupDirection;
+    variant?: RadioVariant;
+    size?: RadioSize;
+    disabled?: boolean;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+}

package/dist/segment/interfaces/index.d.ts

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SegmentSize = 'small' | 'medium' | 'large';
+export type SegmentOrientation = 'horizontal' | 'vertical';
+
+export interface SegmentProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    children?: ReactNode;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    size?: SegmentSize;
+    orientation?: SegmentOrientation;
+    disabled?: boolean;
+    block?: boolean;
+}
+
+export interface ItemProps<T = unknown> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
+    value: T;
+    disabled?: boolean;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,46 @@
+import { InputSize, InputVariant } from '../../input';
+import { OffsetOptions, Placement } from '@floating-ui/dom';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SelectVariant = InputVariant;
+export type SelectSize = InputSize;
+
+export interface SelectCommonProps
+    extends Omit<
+        ButtonHTMLAttributes<HTMLButtonElement>,
+        'children' | 'defaultValue' | 'id' | 'onChange' | 'size' | 'value'
+    > {
+    children?: ReactNode;
+    placeholder?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    block?: boolean;
+    disabled?: boolean;
+    placement?: Placement;
+    offset?: OffsetOptions;
+}
+
+export interface SingleSelectProps<T = unknown> extends SelectCommonProps {
+    multiple?: false;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T | undefined) => void;
+}
+
+export interface MultipleSelectProps<T = unknown> extends SelectCommonProps {
+    multiple: true;
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
+}
+
+export type SelectProps<T = unknown> = SingleSelectProps<T> | MultipleSelectProps<T>;
+
+export interface SelectOptionProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'value'> {
+    value: T;
+    label: string;
+    size?: SelectSize;
+    disabled?: boolean;
+    selected?: boolean;
+    active?: boolean;
+    children?: ReactNode;
+}

package/dist/switch/interfaces/index.d.ts

@@ -0,0 +1,27 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type SwitchVariant = 'solid' | 'outlined';
+export type SwitchSize = 'small' | 'medium' | 'large';
+export type SwitchShape = 'round' | 'square';
+
+export interface SwitchProps
+    extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
+    variant?: SwitchVariant;
+    size?: SwitchSize;
+    shape?: SwitchShape;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: boolean;
+    defaultValue?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+}
+
+export type TrackType = 'checked' | 'unchecked';
+
+export interface TrackProps extends HTMLAttributes<HTMLDivElement> {
+    type: TrackType;
+}
+
+export interface ThumbProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    children?: (checked: boolean) => ReactNode;
+}

package/dist/tabs/interfaces/index.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+export type TabsVariant = 'line' | 'card';
+export type TabsSize = 'small' | 'medium' | 'large';
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsActivation = 'auto' | 'manual';
+
+export interface TabsProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
+    children?: ReactNode;
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    orientation?: TabsOrientation;
+    activation?: TabsActivation;
+    disabled?: boolean;
+    closable?: boolean;
+    onClose?: (value: T, evt: MouseEvent<HTMLButtonElement>) => void;
+    destroyOnInactive?: boolean;
+}
+
+export interface ListProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+
+export interface TabProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    value: T;
+    disabled?: boolean;
+    closable?: boolean;
+    children?: ReactNode;
+}
+
+export interface PanelProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
+    value: T;
+    children?: ReactNode;
+}

package/dist/tailwind.css

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

package/dist/tooltip/interfaces/index.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { PopupSize } from '../../popup';
+import { OffsetOptions, Placement } from '@floating-ui/dom';
+export interface TooltipProps {
+    children?: ReactNode;
+    placement?: Placement;
+    offset?: OffsetOptions;
+    arrowed?: boolean;
+    size?: PopupSize;
+    delay?: number | [number] | [number, number];
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}

package/dist/typography/interfaces/index.d.ts

@@ -0,0 +1,23 @@
+import { AnchorHTMLAttributes, HTMLAttributes } from 'react';
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    underlined?: boolean;
+    disabled?: boolean;
+}
+
+export type ParagraphProps = HTMLAttributes<HTMLParagraphElement>;
+
+export type TextTag = 'strong' | 'del' | 'u' | 'i' | 'mark' | 'code' | 'kbd';
+
+export interface TextProps extends HTMLAttributes<HTMLSpanElement> {
+    tags?: TextTag[];
+    secondary?: boolean;
+    disabled?: boolean;
+}
+
+export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    level?: TitleLevel;
+}
+
+export type TypographyProps = HTMLAttributes<HTMLElement>;

package/dist/watermark/interfaces/index.d.ts

@@ -0,0 +1,51 @@
+import { HTMLAttributes } from 'react';
+export type WatermarkComposition = 'stack' | 'inline' | 'overlay';
+
+export type WatermarkGap = number | [number, number];
+export type WatermarkOffset = number | [number, number];
+export type WatermarkImageCrossOrigin = '' | 'anonymous' | 'use-credentials';
+export type WatermarkTamperType = 'removed' | 'reordered' | 'attribute';
+export type WatermarkTamperAttribute = 'aria-hidden' | 'class' | 'hidden' | 'style';
+
+export interface WatermarkTamperEvent {
+    type: WatermarkTamperType;
+    attributeName?: WatermarkTamperAttribute;
+}
+
+export interface WatermarkImage {
+    src: string;
+    width?: number;
+    height?: number;
+    scale?: number;
+    crossOrigin?: WatermarkImageCrossOrigin;
+}
+
+export interface WatermarkPattern {
+    gap?: WatermarkGap;
+    offset?: WatermarkOffset;
+    rotate?: number;
+    composition?: WatermarkComposition;
+    compositionGap?: number;
+}
+
+export interface WatermarkTextStyle {
+    fontSize?: number;
+    fontWeight?: string | number;
+    fontFamily?: string;
+    fontStyle?: string;
+    lineHeight?: number;
+    color?: string;
+    textAlign?: CanvasTextAlign;
+}
+
+export interface WatermarkProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content' | 'onError'> {
+    text?: string | string[];
+    image?: string | WatermarkImage;
+    pattern?: WatermarkPattern;
+    textStyle?: WatermarkTextStyle;
+    opacity?: number;
+    zIndex?: number;
+    preserve?: boolean;
+    onTamper?: (event: WatermarkTamperEvent) => void;
+    onError?: (error: Event | Error, image: WatermarkImage) => void;
+}

package/package.json

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