@nild/components 0.0.51 → 0.0.53

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

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

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

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

package/dist/alert/Alert.js

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

package/dist/alert/Icon.d.ts

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

package/dist/alert/Icon.js

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

package/dist/alert/Title.d.ts

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

package/dist/alert/Title.js

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

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

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

package/dist/alert/contexts/index.js

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

package/dist/alert/index.d.ts

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

package/dist/alert/index.js

@@ -1 +1 @@
-import t from"./Alert.js";export{t as default};
+import o from"./Alert.js";import t from"./Icon.js";import r from"./Title.js";const m=Object.assign(o,{Icon:t,Title:r});export{m as default};

package/dist/alert/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/alert/style/index.js

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

package/dist/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/index.js

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

package/dist/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/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/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/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/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.51",
+  "version": "0.0.53",
   "type": "module",
   "module": "./dist/index.js",
   "exports": {
@@ -31,9 +31,9 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@nild/shared": "^0.0.18",
+    "@nild/hooks": "^0.0.21",
     "@nild/icons": "^0.0.21",
-    "@nild/hooks": "^0.0.21"
+    "@nild/shared": "^0.0.18"
   },
   "scripts": {
     "build": "vite build --mode PROD",