@ncds/ui-admin 1.3.0 → 1.5.0

package/dist/types/assets/scripts/utils/selectbox/UnifiedSelectBox.d.ts

@@ -0,0 +1,99 @@
+import { OptionValue } from '../../../../src/types';
+import { DropdownOption } from './DropdownModel';
+export interface UnifiedSelectBoxConfig {
+    options?: DropdownOption[];
+    placeholder?: string;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    onSearch?: (searchValue: string) => void | Promise<void>;
+    onEdit?: () => void;
+    onSelectAll?: () => void;
+    onSearchAll?: () => void;
+    onComplete?: () => void;
+    onScrollBottom?: () => void;
+    searchDebounceMs?: number;
+    maxHeight?: number;
+    disabled?: boolean;
+    size?: 'xs' | 'sm' | 'md';
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    label?: string;
+    required?: boolean;
+    type?: 'selectbox' | 'combobox';
+}
+/**
+ * 통합된 SelectBox 클래스
+ * SelectBox와 ComboBox의 기능을 모두 포함
+ */
+export declare class UnifiedSelectBox {
+    private element;
+    private config;
+    private model;
+    private renderer;
+    private controller;
+    private inputField?;
+    private searchDebounceTimer?;
+    private currentDebounceTimerId?;
+    private lastSearchValue;
+    private hasInitialOptions;
+    private dropdownElement?;
+    private triggerElement?;
+    private footerElement?;
+    private arrowElement?;
+    constructor(element: HTMLElement, config?: UnifiedSelectBoxConfig);
+    private initialize;
+    private setupElementClasses;
+    private createUI;
+    private createComboBoxUI;
+    private createSelectBoxUI;
+    private createDropdown;
+    private setupController;
+    /**
+     * 디바운싱 타이머 취소
+     */
+    private cancelDebounceTimer;
+    private handleInput;
+    private handleInputClick;
+    private handleClearInput;
+    private handleShowAll;
+    private handleSelectionChange;
+    private updateSelectBoxValue;
+    private canToggleDropdown;
+    private handleSelectAll;
+    private handleComplete;
+    private updateSelectAllButtonText;
+    getValues(): DropdownOption[];
+    getOptions(): DropdownOption[];
+    setValues(value: DropdownOption[]): void;
+    updateOptions(newOptions: DropdownOption[]): void;
+    setDisabled(disabled: boolean): void;
+    open(): void;
+    close(): void;
+    focus(): void;
+    destroy(): void;
+    selectAll(): void;
+    deselectAll(): void;
+    isMultiple(): boolean;
+    toggleSelectAll(): void;
+    getDebugInfo(): {
+        config: UnifiedSelectBoxConfig;
+        modelState: any;
+        isOpen: boolean;
+    };
+    /**
+     * 드롭다운을 스크롤의 바닥으로 이동
+     * 전체 선택 시 추가 데이터 로드를 트리거하기 위해 사용
+     */
+    scrollToBottom(): void;
+    /**
+     * 전체 선택 버튼의 텍스트를 외부에서 변경
+     * @param text 버튼에 표시할 텍스트
+     */
+    setSelectAllButtonText(text: string): void;
+    /**
+     * 특정 인덱스의 옵션으로 포커스 이동
+     * @param index 포커스를 이동할 옵션의 인덱스
+     */
+    setFocusIndex(index: number): void;
+}
+//# sourceMappingURL=UnifiedSelectBox.d.ts.map

package/dist/types/constant/color.d.ts

@@ -17,6 +17,8 @@ export declare const COLOR: {
     pink100: string;
     pink600: string;
     yellow600: string;
+    violet300: string;
+    violet600: string;
     white: string;
     currentColor: string;
     black: string;
@@ -31,5 +33,5 @@ export declare const COLOR: {
     'secondary-gray-blue-700': string;
 };
 export type ColorKeyType = keyof typeof COLOR;
-export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled';
+export type ColorTone = 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled' | 'info';
 //# sourceMappingURL=color.d.ts.map

package/dist/types/src/components/button/Button.d.ts

@@ -2,7 +2,7 @@ import { ComponentProps, ReactNode } from 'react';
 import { Size } from '../../../constant/size';
 import { SideSlotType } from '../../types/side-slot';
 import { DotProps } from '../dot';
-export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'link' | 'link-gray' | 'destructive';
+export type ButtonTheme = 'primary' | 'secondary' | 'secondary-gray' | 'tertiary-gray' | 'tertiary' | 'text' | 'text-gray' | 'text-red' | 'destructive';
 export type ButtonSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentProps<T>, 'ref'> & {
     label: string;
@@ -14,21 +14,23 @@ type CommonButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<ComponentPr
     onlyIcon?: boolean;
     size?: ButtonSize;
     children?: ReactNode;
-};
-type ButtonElementProps = CommonButtonProps<Exclude<keyof HTMLElementTagNameMap, 'a'>> & {
-    as?: Exclude<keyof HTMLElementTagNameMap, 'a'>;
-    href?: never;
-};
-type AnchorElementProps = CommonButtonProps<'a'> & {
-    as: 'a';
-    href: string;
-    target?: HTMLAnchorElement['target'];
     underline?: boolean;
 };
-export type ButtonProps = ButtonElementProps | AnchorElementProps;
+export type ButtonProps = CommonButtonProps<'button'>;
 export declare const svgSize: Record<ButtonSize, number>;
 export declare const iconOnlySvgSize: Record<ButtonSize, number>;
 export declare const dotSize: Record<ButtonSize, DotProps['size']>;
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    label: string;
+    className?: string | undefined;
+    hierarchy?: ButtonTheme | undefined;
+    disabled?: boolean | undefined;
+    leadingIcon?: SideSlotType | undefined;
+    trailingIcon?: SideSlotType | undefined;
+    onlyIcon?: boolean | undefined;
+    size?: ButtonSize | undefined;
+    children?: ReactNode;
+    underline?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;
 export {};
 //# sourceMappingURL=Button.d.ts.map

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -15,14 +15,8 @@ interface ButtonGroupItemCommonProps {
     disabled?: boolean;
     isCurrent?: boolean;
 }
-interface ButtonGroupItemButtonProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
-    as?: 'button';
+interface ButtonGroupItemProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
 }
-interface ButtonGroupItemAnchorProps extends ButtonGroupItemCommonProps, ComponentProps<'a'> {
-    as: 'a';
-    href: string;
-}
-type ButtonGroupItemProps = ButtonGroupItemButtonProps | ButtonGroupItemAnchorProps;
 interface ButtonGroupProps {
     className?: string;
     size?: ButtonGroupSize;
@@ -33,7 +27,7 @@ interface ButtonGroupProps {
 }
 export declare const ButtonGroup: {
     ({ children, className, hasBorder, size, onlyIcon, disabled, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-    Item({ as, label, size, onlyIcon, icon, disabled, children, isCurrent, ...props }: ButtonGroupItemProps): React.ReactElement<{
+    Item({ label, size, onlyIcon, icon, disabled, children, isCurrent, ...props }: ButtonGroupItemProps): React.DetailedReactHTMLElement<{
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
         key?: React.Key | null | undefined;
         form?: string | undefined;
@@ -43,7 +37,7 @@ export declare const ButtonGroup: {
         formNoValidate?: boolean | undefined;
         formTarget?: string | undefined;
         name?: string | undefined;
-        type: string | undefined;
+        type: string;
         value?: string | number | readonly string[] | undefined;
         defaultChecked?: boolean | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -313,286 +307,7 @@ export declare const ButtonGroup: {
         onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
         disabled: boolean | undefined;
-    } | {
-        href: string;
-        ref?: React.LegacyRef<HTMLAnchorElement> | undefined;
-        key?: React.Key | null | undefined;
-        download?: any;
-        hrefLang?: string | undefined;
-        media?: string | undefined;
-        ping?: string | undefined;
-        target?: React.HTMLAttributeAnchorTarget | undefined;
-        type: string | undefined;
-        referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
-        defaultChecked?: boolean | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
-        autoFocus?: boolean | undefined;
-        className: string;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
-        draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        slot?: string | undefined;
-        spellCheck?: (boolean | "true" | "false") | undefined;
-        style?: React.CSSProperties | undefined;
-        tabIndex?: number | undefined;
-        title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
-        radioGroup?: string | undefined;
-        role?: React.AriaRole | undefined;
-        about?: string | undefined;
-        content?: string | undefined;
-        datatype?: string | undefined;
-        inlist?: any;
-        prefix?: string | undefined;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        color?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "off" | "on" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-        is?: string | undefined;
-        exportparts?: string | undefined;
-        part?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
-        "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
-        "aria-braillelabel"?: string | undefined;
-        "aria-brailleroledescription"?: string | undefined;
-        "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colindextext"?: string | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-description"?: string | undefined;
-        "aria-details"?: string | undefined;
-        "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "link" | "move" | "copy" | "execute" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
-        "aria-expanded"?: (boolean | "true" | "false") | undefined;
-        "aria-flowto"?: string | undefined;
-        "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
-        "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
-        "aria-modal"?: (boolean | "true" | "false") | undefined;
-        "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
-        "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        "aria-required"?: (boolean | "true" | "false") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowindextext"?: string | undefined;
-        "aria-rowspan"?: number | undefined;
-        "aria-selected"?: (boolean | "true" | "false") | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
-        dangerouslySetInnerHTML?: {
-            __html: string | TrustedHTML;
-        } | undefined;
-        onCopy?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onCopyCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onCut?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onCutCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onPaste?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onPasteCapture?: React.ClipboardEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionEnd?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionEndCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionStart?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionStartCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionUpdate?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLAnchorElement> | undefined;
-        onFocus?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-        onFocusCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-        onBlur?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-        onBlurCapture?: React.FocusEventHandler<HTMLAnchorElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLAnchorElement> | undefined;
-        onLoad?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onError?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onErrorCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onKeyDownCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onKeyPress?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onKeyPressCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onKeyUp?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onKeyUpCapture?: React.KeyboardEventHandler<HTMLAnchorElement> | undefined;
-        onAbort?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onAbortCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onCanPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onCanPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onCanPlayThrough?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onCanPlayThroughCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onDurationChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onDurationChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEmptied?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEmptiedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEncrypted?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEncryptedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEnded?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onEndedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadedData?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadedDataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadedMetadata?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadedMetadataCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadStart?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onLoadStartCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPause?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPauseCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPlay?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPlayCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPlaying?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onPlayingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onProgress?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onProgressCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onRateChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onRateChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSeeked?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSeekedCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSeeking?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSeekingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onStalled?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onStalledCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSuspend?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSuspendCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onTimeUpdate?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onTimeUpdateCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onVolumeChange?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onVolumeChangeCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onWaiting?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onWaitingCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onAuxClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onAuxClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onContextMenu?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onContextMenuCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onDoubleClick?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onDoubleClickCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onDrag?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragEnd?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragEndCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragEnter?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragEnterCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragExit?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragExitCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragLeave?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragLeaveCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragOver?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragOverCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragStart?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDragStartCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDrop?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onDropCapture?: React.DragEventHandler<HTMLAnchorElement> | undefined;
-        onMouseDown?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseDownCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseEnter?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseLeave?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseMove?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseMoveCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseOut?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseOutCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseOver?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseOverCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseUp?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onMouseUpCapture?: React.MouseEventHandler<HTMLAnchorElement> | undefined;
-        onSelect?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onSelectCapture?: React.ReactEventHandler<HTMLAnchorElement> | undefined;
-        onTouchCancel?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchCancelCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchEnd?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchEndCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchMove?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchMoveCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchStart?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onTouchStartCapture?: React.TouchEventHandler<HTMLAnchorElement> | undefined;
-        onPointerDown?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerDownCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerMove?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerMoveCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerUp?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerUpCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerCancel?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerCancelCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerEnter?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerLeave?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerOver?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerOverCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerOut?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onPointerOutCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onGotPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onLostPointerCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLAnchorElement> | undefined;
-        onScroll?: React.UIEventHandler<HTMLAnchorElement> | undefined;
-        onScrollCapture?: React.UIEventHandler<HTMLAnchorElement> | undefined;
-        onWheel?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
-        onWheelCapture?: React.WheelEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationStart?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationStartCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationEnd?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationEndCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationIteration?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onAnimationIterationCapture?: React.AnimationEventHandler<HTMLAnchorElement> | undefined;
-        onTransitionEnd?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
-        onTransitionEndCapture?: React.TransitionEventHandler<HTMLAnchorElement> | undefined;
-        disabled: boolean | undefined;
-    }, string | React.JSXElementConstructor<any>>;
+    }, HTMLButtonElement>;
 };
 export {};
 //# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/types/src/components/button/ButtonStepper.d.ts

@@ -0,0 +1,10 @@
+import { Size } from '../../../constant/size';
+export type ButtonStepperProps = {
+    size: Extract<Size, 'xs' | 'sm'>;
+    direction: 'up' | 'down';
+    disabled?: boolean;
+    onClick?: () => void;
+    className?: string;
+};
+export declare const ButtonStepper: ({ size, direction, disabled, onClick, className }: ButtonStepperProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonStepper.d.ts.map

package/dist/types/src/components/button/index.d.ts

@@ -1,3 +1,5 @@
 export * from './Button';
+export * from './ButtonCloseX';
 export * from './ButtonGroup';
+export * from './ButtonStepper';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/checkbox/Checkbox.d.ts

@@ -1,10 +1,9 @@
-import { ChangeEvent, MutableRefObject, ReactNode, RefCallback } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { CheckboxInputProps } from './CheckboxInput';
 export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
     text?: ReactNode;
     supportText?: string;
-    checkboxRef?: RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const Checkbox: ({ size, indeterminate, text, supportText, disabled, checked, className, checkboxRef, onChange, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/types/src/components/combobox/ComboBox.d.ts

@@ -0,0 +1,28 @@
+import { Size } from '@ncds/ui/constant/size';
+import { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
+export declare const defaultMaxHeight = 275;
+type BaseComboBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'>;
+export interface ComboBoxProps extends PropsWithChildren<BaseComboBoxProps> {
+    placeholder?: string;
+    hintText?: string;
+    destructive?: boolean;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    optionItems?: OptionType[];
+    value?: OptionValue;
+    onChange?: OptionChangeHandler;
+    onSearch?: (searchValue: string) => void;
+    disabled?: boolean;
+    register?: UseFormRegisterReturn;
+    maxHeight?: number;
+    searchValue?: string;
+    label?: string;
+    required?: boolean;
+    multiple?: boolean;
+    showFooterButtons?: boolean;
+    onEdit?: () => void;
+}
+export declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=ComboBox.d.ts.map

package/dist/types/src/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { ComboBox } from './ComboBox';
+export type { ComboBoxProps } from './ComboBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/date-picker/CustomInput.d.ts

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes } from 'react';
+import type { IconName } from '@ncds/ui-admin-icon/dynamic';
+import type { Size } from '../../../constant/size';
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled: boolean;
+    iconName: Extract<IconName, 'calendar' | 'clock'>;
+    iconSize: Extract<Size, 'xs' | 'sm'>;
+    placeholder?: string;
+}
+export declare const CustomInput: import("react").ForwardRefExoticComponent<CustomInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=CustomInput.d.ts.map

package/dist/types/src/components/date-picker/DatePicker.d.ts

@@ -6,6 +6,9 @@ export type DatePickerProps = {
     shouldFocus?: boolean;
     currentDate: string;
     datePickerOptions?: Options;
+    destructive?: string;
+    placeholder?: string;
+    isEndDate?: boolean;
     onChangeDate: (date: string) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;

package/dist/types/src/components/date-picker/RangeDatePickerWithButtons.d.ts

@@ -1,14 +1,14 @@
-import { Dispatch, SetStateAction } from 'react';
+import { type Dispatch, type SetStateAction } from 'react';
 import { PERIOD_ITEM } from '../../constant/date-picker';
-import { RangeDatePickerProps } from './RangeDatePicker';
+import { type RangeDatePickerProps } from './RangeDatePicker';
 export type PeriodKeyType = keyof typeof PERIOD_ITEM;
 type RangeDatePickerWithButtonsProps = {
-    fixedEndDate?: string;
+    useYesterdayAsEndDate?: boolean;
     currentButtonId: PeriodKeyType;
     setCurrentButtonId: Dispatch<SetStateAction<PeriodKeyType>>;
     periodKeys: PeriodKeyType[];
     size?: 'xs' | 'sm';
 } & RangeDatePickerProps;
-export declare const RangeDatePickerWithButtons: ({ fixedEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RangeDatePickerWithButtons: ({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, onDateValidation, }: RangeDatePickerWithButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=RangeDatePickerWithButtons.d.ts.map

package/dist/types/src/components/{input → file-upload}/FileInput.d.ts

@@ -1,4 +1,4 @@
-import { InputBaseProps } from './InputBase';
+import { InputBaseProps } from '../input/InputBase';
 export declare enum FileInputErrorType {
     ALREADY_UPLOADED = "ALREADY_UPLOADED",
     EXCEED_MAX_FILE_SIZE = "EXCEED_MAX_FILE_SIZE",

package/dist/types/src/components/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileInput';
+//# sourceMappingURL=index.d.ts.map