@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/temp/src/components/bread-crumb/BreadCrumb.d.ts

@@ -0,0 +1,11 @@
+interface BreadcrumbItemProps {
+    href?: string;
+    label: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItemProps[];
+    className?: string;
+}
+declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+export { BreadCrumb };
+export type { BreadcrumbItemProps, BreadcrumbProps };

package/dist/temp/src/components/bread-crumb/BreadCrumb.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Home01 } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+const BreadcrumbItem = ({ href, children }) => {
+    const ElementType = href ? 'a' : 'span';
+    return (_jsx(ElementType, { href: href, className: "ncua-breadcrumb__item", children: children }));
+};
+const BreadCrumb = ({ items, className }) => {
+    if (!items || items.length === 0)
+        return null;
+    const renderItem = (item, index) => {
+        const isLast = index === items.length - 1;
+        const content = index === 0 ? _jsx(Home01, { width: 16, height: 16, color: "gray500" }) : item.label;
+        return (_jsx("li", { className: classNames('ncua-breadcrumb__list-item', {
+                'ncua-breadcrumb__list-item--active': isLast,
+            }), children: _jsx(BreadcrumbItem, { href: isLast ? undefined : item.href, children: content }) }, index));
+    };
+    return (_jsx("nav", { "aria-label": "breadcrumb", className: classNames('ncua-breadcrumb', className), children: _jsx("ol", { className: "ncua-breadcrumb__list", children: items.map(renderItem) }) }));
+};
+export { BreadCrumb };

package/dist/temp/src/components/bread-crumb/index.d.ts

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

package/dist/temp/src/components/bread-crumb/index.js

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

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

@@ -0,0 +1,35 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import type { Size } from '../../../constant/size';
+import type { SideSlotType } from '../../types/side-slot';
+import { type DotProps } from '../dot';
+export type ButtonProps = Omit<ComponentProps<'button'>, 'ref'> & {
+    label: ReactNode;
+    className?: string;
+    hierarchy?: ButtonTheme;
+    disabled?: boolean;
+    loading?: boolean;
+    leadingIcon?: SideSlotType;
+    trailingIcon?: SideSlotType;
+    onlyIcon?: boolean;
+    size?: ButtonSize;
+    children?: ReactNode;
+    underline?: boolean;
+};
+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'>;
+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<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    label: ReactNode;
+    className?: string | undefined;
+    hierarchy?: ButtonTheme | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    leadingIcon?: SideSlotType | undefined;
+    trailingIcon?: SideSlotType | undefined;
+    onlyIcon?: boolean | undefined;
+    size?: ButtonSize | undefined;
+    children?: ReactNode;
+    underline?: boolean | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/temp/src/components/button/Button.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { createElement, forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
+export const svgSize = {
+    xxs: 12,
+    xs: 14,
+    sm: 16,
+    md: 20,
+};
+export const iconOnlySvgSize = {
+    xxs: 14,
+    xs: 16,
+    sm: 20,
+    md: 20,
+};
+export const dotSize = {
+    xxs: 'sm',
+    xs: 'sm',
+    sm: 'md',
+    md: 'md',
+};
+const loadableHierarchies = ['primary', 'secondary', 'secondary-gray', 'destructive'];
+export const Button = forwardRef((props, ref) => {
+    const { size = 'xs', children, onlyIcon, disabled, loading, className, hierarchy = 'secondary-gray', label, leadingIcon, trailingIcon, underline = false, ...restProps } = props;
+    const isLoading = loading && !onlyIcon && loadableHierarchies.includes(hierarchy);
+    const isDisabled = disabled || isLoading;
+    const sideSlotRender = (slot) => {
+        const iconSize = onlyIcon ? iconOnlySvgSize[size] : svgSize[size];
+        if (slot.type === 'icon') {
+            const Icon = slot.icon;
+            return (_jsx(Icon, { height: slot.size ?? iconSize, width: slot.size ?? iconSize, color: slot.color ? COLOR[slot.color] : undefined }));
+        }
+        if (slot.type === 'dot') {
+            return _jsx(Dot, { color: slot.color, size: slot.size ?? dotSize[size] });
+        }
+        return slot.children;
+    };
+    return createElement('button', {
+        className: classnames('ncua-btn', `ncua-btn--${size}`, {
+            'only-icon': onlyIcon,
+            'is-disable': isDisabled,
+            'is-loading': isLoading,
+            'has-underline': underline,
+        }, className, hierarchy && `ncua-btn--${hierarchy}`),
+        disabled: isDisabled,
+        'aria-busy': isLoading || undefined,
+        ...restProps,
+        ref,
+    }, _jsxs(_Fragment, { children: [isLoading ? _jsx("span", { className: "ncua-btn__spinner" }) : leadingIcon && sideSlotRender(leadingIcon), !onlyIcon && label && _jsx("span", { className: "ncua-btn__label", children: label }), children, trailingIcon && sideSlotRender(trailingIcon)] }));
+});

package/dist/temp/src/components/button/ButtonCloseX.d.ts

@@ -0,0 +1,10 @@
+import type { Size } from '../../../constant/size';
+type ButtonCloseXProps = {
+    size: Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+    theme?: 'dark' | 'light';
+    onClick?: () => void;
+    className?: string;
+};
+declare const ButtonCloseX: ({ size, theme, className, onClick }: ButtonCloseXProps) => import("react/jsx-runtime").JSX.Element;
+export { ButtonCloseX };
+export type { ButtonCloseXProps };

package/dist/temp/src/components/button/ButtonCloseX.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { XClose } from '@ncds/ui-admin-icon';
+import classnames from 'classnames';
+const svgSize = {
+    xs: 16,
+    sm: 20,
+    md: 20,
+    lg: 24,
+};
+const ButtonCloseX = ({ size, theme = 'light', className, onClick }) => {
+    return (_jsx("button", { type: "button", className: classnames('ncua-button-close-x', `ncua-button-close-x--${size}`, `ncua-button-close-x--${theme}`, className), onClick: onClick, children: _jsx(XClose, { width: svgSize[size], height: svgSize[size] }) }));
+};
+export { ButtonCloseX };

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

@@ -0,0 +1,9 @@
+import type { 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;

package/dist/temp/src/components/button/ButtonStepper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classnames from 'classnames';
+export const ButtonStepper = ({ size, direction, disabled, onClick, className }) => {
+    return (_jsx("button", { className: classnames('ncua-button-stepper', `ncua-button-stepper--${size}`, `ncua-button-stepper--${direction}`, className), type: "button", disabled: disabled, onClick: onClick }));
+};

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

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './ButtonCloseX';
+export * from './ButtonStepper';

package/dist/temp/src/components/button/index.js

@@ -0,0 +1,3 @@
+export * from './Button';
+export * from './ButtonCloseX';
+export * from './ButtonStepper';

package/dist/{types/src/components/button → temp/src/components/button-group}/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import React, { type ComponentProps } from 'react';
 import type { Size } from '../../../constant/size';
 import type { SideSlotType } from '../../types/side-slot';
-export type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
+type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }
@@ -15,18 +15,19 @@ interface ButtonGroupItemCommonProps {
     disabled?: boolean;
     isCurrent?: boolean;
 }
-export interface ButtonGroupItemProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
+interface ButtonGroupItemProps extends ButtonGroupItemCommonProps, ComponentProps<'button'> {
 }
-export interface ButtonGroupProps {
+interface ButtonGroupProps {
     className?: string;
     size?: ButtonGroupSize;
     children: React.ReactNode;
     hasBorder?: boolean;
+    fullWidth?: boolean;
     onlyIcon?: boolean;
     disabled?: boolean;
 }
-export declare const ButtonGroup: {
-    ({ children, className, hasBorder, size, onlyIcon, disabled, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+declare const ButtonGroup: {
+    ({ children, className, hasBorder, fullWidth, size, onlyIcon, disabled, }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
     Item({ label, size, onlyIcon, icon, disabled, children, isCurrent, className, ...props }: ButtonGroupItemProps): React.DetailedReactHTMLElement<{
         ref?: React.LegacyRef<HTMLButtonElement> | undefined;
         key?: React.Key | null | undefined;
@@ -50,7 +51,7 @@ export declare const ButtonGroup: {
         contextMenu?: string | undefined;
         dir?: string | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
         hidden?: boolean | undefined;
         id?: string | undefined;
         lang?: string | undefined;
@@ -85,7 +86,7 @@ export declare const ButtonGroup: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "off" | "on" | undefined;
-        inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+        inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
@@ -106,7 +107,7 @@ export declare const ButtonGroup: {
         "aria-description"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+        "aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
         "aria-errormessage"?: string | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
         "aria-flowto"?: string | undefined;
@@ -163,7 +164,7 @@ export declare const ButtonGroup: {
         onBlurCapture?: React.FocusEventHandler<HTMLButtonElement> | undefined;
         onChange?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onChangeCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
-        onBeforeInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
+        onBeforeInput?: React.InputEventHandler<HTMLButtonElement> | undefined;
         onBeforeInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInput?: React.FormEventHandler<HTMLButtonElement> | undefined;
         onInputCapture?: React.FormEventHandler<HTMLButtonElement> | undefined;
@@ -213,8 +214,6 @@ export declare const ButtonGroup: {
         onProgressCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChange?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onRateChangeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResize?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-        onResizeCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeked?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeekedCapture?: React.ReactEventHandler<HTMLButtonElement> | undefined;
         onSeeking?: React.ReactEventHandler<HTMLButtonElement> | undefined;
@@ -309,5 +308,5 @@ export declare const ButtonGroup: {
         disabled: boolean | undefined;
     }, HTMLButtonElement>;
 };
-export {};
-//# sourceMappingURL=ButtonGroup.d.ts.map
+export { ButtonGroup };
+export type { ButtonGroupSize, ButtonGroupItemProps, ButtonGroupProps };

package/dist/temp/src/components/button-group/ButtonGroup.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import React, { createElement } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Dot } from '../dot';
+const svgSize = {
+    xxs: 12,
+    xs: 16,
+    sm: 16,
+    md: 20,
+};
+const dotSize = {
+    xxs: 'sm',
+    xs: 'sm',
+    sm: 'md',
+    md: 'md',
+};
+const ButtonGroup = ({ children, className, hasBorder = true, fullWidth = false, size = 'xs', onlyIcon = false, disabled = false, }) => {
+    return (_jsx("div", { className: classNames('ncua-button-group', `ncua-button-group--${size}`, { 'has-border': hasBorder, 'full-width': fullWidth }, className), children: React.Children.map(children, (child) => {
+            if (!React.isValidElement(child)) {
+                return null;
+            }
+            return React.cloneElement(child, {
+                onlyIcon,
+                size,
+                disabled: disabled || child.props.disabled,
+            });
+        }) }));
+};
+ButtonGroup.Item = ({ label, size = 'xs', onlyIcon, icon, disabled, children, isCurrent, className, ...props }) => {
+    const renderIcon = () => {
+        if (!icon)
+            return null;
+        if (icon.type === 'icon') {
+            const IconComponent = icon.icon;
+            return (_jsx(IconComponent, { width: icon.size ?? svgSize[size], height: icon.size ?? svgSize[size], color: icon.color ? COLOR[icon.color] : 'currentColor' }));
+        }
+        if (icon.type === 'dot') {
+            return _jsx(Dot, { color: icon.color, size: icon.size ?? dotSize[size] });
+        }
+        return icon.children;
+    };
+    const position = icon?.position ?? 'leading';
+    return createElement('button', {
+        className: classNames('ncua-button-group__item', { 'is-only-icon': onlyIcon }, { 'is-current': isCurrent }, className),
+        disabled,
+        type: 'button',
+        ...props,
+    }, _jsxs(_Fragment, { children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()] }));
+};
+export { ButtonGroup };

package/dist/temp/src/components/button-group/index.d.ts

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

package/dist/temp/src/components/button-group/index.js

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

package/dist/temp/src/components/carousel-arrow/CarouselArrow.d.ts

@@ -0,0 +1,8 @@
+type CarouselArrowProps = {
+    type?: 'default' | 'line';
+    className?: string;
+    chevron: 'left' | 'right';
+    onClick?: () => void;
+};
+export declare const CarouselArrow: ({ type, className, chevron, onClick }: CarouselArrowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/carousel-arrow/CarouselArrow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+const SIZE = 'md';
+export const CarouselArrow = ({ type = 'default', className, chevron, onClick }) => (_jsx("button", { type: "button", className: classNames('ncua-carousel-arrow', {
+        [`ncua-carousel-arrow--${type}`]: type,
+        [`ncua-carousel-arrow--${SIZE}`]: SIZE,
+        [`ncua-carousel-arrow--${chevron}`]: chevron,
+    }, className), onClick: onClick, children: chevron === 'left' ? (_jsx(ChevronLeft, { className: "ncua-carousel-arrow__icon" })) : (_jsx(ChevronRight, { className: "ncua-carousel-arrow__icon" })) }));

package/dist/temp/src/components/carousel-arrow/index.d.ts

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

package/dist/temp/src/components/carousel-arrow/index.js

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

package/dist/temp/src/components/carousel-number-group/CarouselNumberGroup.d.ts

@@ -0,0 +1,8 @@
+type CarouselNumberGroupProps = {
+    framed?: boolean;
+    color?: 'light' | 'dark';
+    currentPage: number;
+    totalPage: number;
+};
+export declare const CarouselNumberGroup: ({ framed, color, currentPage, totalPage, }: CarouselNumberGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/temp/src/components/carousel-number-group/CarouselNumberGroup.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const SIZE = 'sm';
+export const CarouselNumberGroup = ({ framed = true, color = 'light', currentPage, totalPage, }) => {
+    return (_jsxs("div", { className: classNames('ncua-carousel-number-group', {
+            framed,
+            [`ncua-carousel-number-group--${color}`]: color,
+            [`ncua-carousel-number-group--${SIZE}`]: SIZE,
+        }), children: [_jsx("span", { className: "ncua-carousel-number-group__number", children: currentPage }), _jsxs("span", { className: "ncua-carousel-number-group__total", children: ["/", totalPage] })] }));
+};

package/dist/temp/src/components/carousel-number-group/index.d.ts

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

package/dist/temp/src/components/carousel-number-group/index.js

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

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type CheckboxInputProps } from './CheckboxInput';
+export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
+    text?: ReactNode;
+    supportText?: string;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/checkbox/Checkbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { CheckboxInput } from './CheckboxInput';
+export const Checkbox = forwardRef(({ size = 'xs', indeterminate = false, text, supportText, disabled, checked, className, onChange, ...props }, ref) => {
+    return (_jsxs("label", { className: classNames('ncua-checkbox-field', `ncua-checkbox-field--${size}`, { 'has-text': text }, className), children: [_jsx(CheckboxInput, { size: size, ref: ref, checked: checked, indeterminate: indeterminate, disabled: disabled, onChange: onChange, className: "ncua-checkbox-field__input", ...props }), supportText ? (_jsxs("span", { children: [_jsx("span", { className: "ncua-checkbox-field__text", children: text }), supportText && _jsx("span", { className: "ncua-checkbox-field__support-text", children: supportText })] })) : (text && _jsx("span", { className: "ncua-checkbox-field__text", children: text }))] }));
+});

package/dist/temp/src/components/checkbox/CheckboxInput.d.ts

@@ -0,0 +1,9 @@
+import { type ChangeEvent, type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../constant/size';
+export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
+    size?: Extract<Size, 'xs' | 'sm'>;
+    indeterminate?: boolean;
+    destructive?: boolean;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const CheckboxInput: import("react").ForwardRefExoticComponent<CheckboxInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/temp/src/components/checkbox/CheckboxInput.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { forwardRef, useEffect, useRef } from 'react';
+export const CheckboxInput = forwardRef(({ size = 'xs', indeterminate = false, disabled, className, destructive = false, onChange, ...props }, ref) => {
+    const inputRef = useRef(null);
+    useEffect(() => {
+        const input = ref && typeof ref !== 'function' ? ref.current : inputRef.current;
+        if (input) {
+            input.indeterminate = indeterminate; // 외부에서 받은 값을 그대로 사용
+        }
+    }, [indeterminate, ref]);
+    return (_jsx("span", { className: classNames('ncua-checkbox-input', `ncua-checkbox-input--${size}`, { 'has-indeterminate': indeterminate }, { destructive }, className), children: _jsx("input", { type: "checkbox", ref: (node) => {
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error - ref assignment is needed for internal tracking
+                inputRef.current = node;
+            }, onChange: onChange, disabled: disabled, ...props }) }));
+});

package/dist/temp/src/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxInput';

package/dist/temp/src/components/checkbox/index.js

@@ -0,0 +1,2 @@
+export * from './Checkbox';
+export * from './CheckboxInput';

package/dist/{types/src/components/combobox → temp/src/components/combo-box}/ComboBox.d.ts

@@ -1,9 +1,9 @@
-import type { Size } from '@ncds/ui/constant/size';
-import { type ComponentPropsWithRef, ReactNode } from 'react';
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { Size } from '../../../constant/size';
 import type { OptionChangeHandler, OptionType, OptionValue } from '../../types/dropdown';
-export declare const defaultMaxHeight = 275;
-export interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
+declare const defaultMaxHeight = 275;
+interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
     children?: ReactNode;
     placeholder?: string;
     hintText?: string;
@@ -23,5 +23,6 @@ export interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size'
     showFooterButtons?: boolean;
     onEdit?: () => void;
 }
-export declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=ComboBox.d.ts.map
+declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { defaultMaxHeight, ComboBox };
+export type { ComboBoxProps };

package/dist/temp/src/components/combo-box/ComboBox.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useDropdown } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { Button } from '../button';
+import { InputBase } from '../input-base/InputBase';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+const defaultMaxHeight = 275;
+const toggleMultiSelectValue = (currentValue, optionId) => {
+    const currentValues = Array.isArray(currentValue) ? currentValue : [];
+    if (currentValues.includes(optionId)) {
+        return currentValues.filter((v) => v !== optionId);
+    }
+    return [...currentValues, optionId];
+};
+const notifyFormChange = (register, multiple, newValue) => {
+    if (register?.onChange) {
+        register.onChange({
+            target: {
+                value: multiple ? JSON.stringify(newValue) : newValue,
+                name: register.name,
+            },
+        });
+    }
+};
+const ComboBox = forwardRef(({ placeholder = '검색하세요', id, className, hintText, children, size = 'xs', destructive = false, value, optionItems = [], onChange, onSearch, disabled = false, register, maxHeight = defaultMaxHeight, searchValue = '', label, required = false, multiple = false, showFooterButtons = false, onEdit, ...props }, ref) => {
+    const internalRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const [inputValue, setInputValue] = useState(searchValue);
+    const [showAllItems, setShowAllItems] = useState(false);
+    const [selectedTags, setSelectedTags] = useState([]);
+    const handleOptionSelect = (option) => {
+        if (disabled)
+            return;
+        if (multiple) {
+            const newValue = toggleMultiSelectValue(value ?? [], option.id);
+            onChange?.(newValue);
+            notifyFormChange(register, multiple, newValue);
+            return;
+        }
+        const newValue = option.id;
+        const tag = { id: option.id, label: option.label };
+        setSelectedTags([tag]);
+        onChange?.(newValue);
+        notifyFormChange(register, multiple, newValue);
+    };
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        onSearch?.(newValue);
+        setShowAllItems(false);
+        if (!isOpen && !disabled) {
+            toggleDropdown();
+        }
+    };
+    const handleInputClick = () => {
+        if (!disabled) {
+            inputRef.current?.focus();
+        }
+        if (inputValue) {
+            toggleDropdown();
+        }
+    };
+    // useDropdown 훅 사용
+    const { isOpen, direction: dropdownDirection, focusedIndex, toggleDropdown, closeDropdown: dropdownClose, handleKeyDown: dropdownHandleKeyDown, handleOptionSelect: handleDropdownSelect, handleMouseMove, isKeyboardNavigation, } = useDropdown({
+        triggerRef: internalRef,
+        dropdownRef,
+        maxHeight,
+        itemCount: optionItems.length,
+        optionItems: optionItems,
+        disabled,
+        multiple,
+        onSelect: handleOptionSelect,
+    });
+    const showAllItem = () => {
+        if (disabled)
+            return;
+        inputRef.current?.focus();
+        setInputValue('');
+        onSearch?.('');
+        setShowAllItems(true);
+        if (!isOpen) {
+            toggleDropdown();
+        }
+    };
+    const closeDropdown = () => {
+        setShowAllItems(false);
+        dropdownClose();
+    };
+    // 키보드 이벤트 처리는 useDropdown 훅에서 처리됨
+    const handleKeyDown = (e) => {
+        // input 전용 키보드 이벤트 처리
+        if (e.key === 'Escape' && isOpen) {
+            closeDropdown();
+            e.preventDefault();
+            return;
+        }
+        // 나머지는 useDropdown 훅에서 처리
+        dropdownHandleKeyDown(e);
+    };
+    useImperativeHandle(ref, () => internalRef.current, []);
+    const trailingElement = {
+        type: 'custom',
+        children: (_jsx("div", { className: "ncua-input__icon-wrap ncua-input__right-icon", onClick: showAllItem, children: _jsx(Button, { label: "\uC804\uCCB4", hierarchy: "text", size: "xxs", leadingIcon: { type: 'icon', icon: ChevronSelectorVertical } }) })),
+    };
+    const leadingElement = {
+        type: 'icon',
+        icon: SearchLg,
+        size: 14,
+        color: 'gray300',
+    };
+    const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+    const { buttonText: selectAllButtonText, toggleSelectAll, getSelectedTagsData, removeTag, } = useMultiSelect(currentSelectedValues, optionItems);
+    const handleSelectAll = () => {
+        if (!multiple || !onChange)
+            return;
+        const newSelectedValues = toggleSelectAll();
+        onChange(newSelectedValues);
+    };
+    const handleEdit = () => {
+        onEdit?.();
+    };
+    const handleComplete = () => {
+        if (!multiple)
+            return;
+        const tags = getSelectedTagsData();
+        setSelectedTags(tags);
+        setInputValue('');
+        closeDropdown();
+    };
+    const handleRemoveTag = (tagId) => {
+        if (!onChange)
+            return;
+        if (multiple) {
+            const newSelectedValues = removeTag(tagId);
+            onChange(newSelectedValues);
+            setSelectedTags((prev) => prev.filter((tag) => tag.id !== tagId));
+            return;
+        }
+        onChange('');
+        setSelectedTags([]);
+    };
+    const comboboxId = `combobox-options-${id || 'default'}`;
+    const hasVisibleOptions = showAllItems || inputValue;
+    const displayedOptions = hasVisibleOptions ? optionItems : [];
+    const showNoResults = !hasVisibleOptions || optionItems.length === 0;
+    const showFooter = multiple || showFooterButtons;
+    const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+    const hasTags = selectedTags.length > 0;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, className: classNames('ncua-combobox', `ncua-combobox--${size}`, {
+                    'ncua-combobox--open': isOpen,
+                    'ncua-combobox--disabled': disabled,
+                    destructive: destructive,
+                }, className), ...props, children: [_jsxs("div", { className: "ncua-combobox__content", children: [_jsx(InputBase, { ref: inputRef, size: size, label: label, required: required, placeholder: placeholder, value: inputValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onClick: handleInputClick, disabled: disabled, destructive: destructive, leadingElement: leadingElement, trailingElement: trailingElement, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": comboboxId, "aria-disabled": disabled, autoComplete: "off", clearText: !!inputValue, onClearText: () => {
+                                    setInputValue('');
+                                    onSearch?.('');
+                                } }), _jsxs(SelectDropdown, { ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: displayedOptions, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: comboboxId, onOptionSelect: handleDropdownSelect, onMouseMove: handleMouseMove, isKeyboardNavigation: isKeyboardNavigation, multiple: multiple, showFooterButtons: showFooter, selectAllButtonText: selectAllButtonText, onSelectAll: handleSelectAll, onEdit: handleEdit, onComplete: handleComplete, componentType: "combobox", children: [showNoResults ? _jsx("li", { className: "ncua-select-dropdown__no-results", children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." }) : null, children] })] }), register && _jsx("input", { type: "hidden", ...register, value: hiddenInputValue }), hintText && _jsx(HintText, { destructive: destructive, children: hintText })] }), hasTags && (_jsx("div", { className: "ncua-combobox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) }))] }));
+});
+ComboBox.displayName = 'ComboBox';
+export { defaultMaxHeight, ComboBox };