@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/types/src/components/forms-and-input/combo-box/ComboBox.d.ts

@@ -0,0 +1,28 @@
+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';
+declare const defaultMaxHeight = 275;
+interface ComboBoxProps extends Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> {
+    children?: ReactNode;
+    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;
+}
+declare const ComboBox: import("react").ForwardRefExoticComponent<Omit<ComboBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { defaultMaxHeight, ComboBox };
+export type { ComboBoxProps };

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

@@ -0,0 +1,10 @@
+import { type InputHTMLAttributes } from 'react';
+import type { Size } from '../../../../constant/size';
+interface CustomInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    disabled: boolean;
+    iconName: 'calendar' | 'clock';
+    iconSize: Extract<Size, 'xs' | 'sm'>;
+    placeholder?: string;
+}
+declare const CustomInput: import("react").ForwardRefExoticComponent<CustomInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export { CustomInput };

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

@@ -0,0 +1,28 @@
+import type { DateOption, Options } from 'flatpickr/dist/types/options';
+import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
+import type { Size } from '../../../../constant/size';
+export type DatePickerProps = {
+    size?: Extract<Size, 'xs' | 'sm'>;
+    shouldFocus?: boolean;
+    currentDate: string;
+    datePickerOptions?: Options;
+    destructive?: string;
+    placeholder?: string;
+    isEndDate?: boolean;
+    className?: string;
+    /**
+     * 캘린더를 body에 포탈 마운트합니다.
+     * overflow: auto/scroll/hidden이 적용된 스크롤 컨테이너 안에서
+     * 캘린더가 잘리는 문제를 해결합니다.
+     */
+    portal?: boolean;
+    onChangeDate: (date: string) => void;
+    onValidationError?: (error: {
+        date: Date;
+        minDate?: DateOption;
+        maxDate?: DateOption;
+        violations: Array<'minDate' | 'maxDate'>;
+        previousDate?: Date;
+    }) => 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/forms-and-input/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DatePicker';
+export * from './CustomInput';
+export * from './utils';

package/dist/types/src/components/forms-and-input/image-file-input/components/index.d.ts

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

package/dist/types/src/components/forms-and-input/image-file-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImageFileInput';
+export * from './components';

package/dist/types/src/components/forms-and-input/input-base/InputBase.d.ts

@@ -0,0 +1,55 @@
+import type React from 'react';
+import { COLOR } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+import type { SlotIconComponent } from '../../../types/side-slot';
+interface InputSideButtonSlot {
+    type: 'button';
+    label: string;
+    isSubmit?: boolean;
+    onClick: () => void;
+}
+interface InputSideTextSlot {
+    type: 'text';
+    text: string;
+}
+interface InputSideIconSlot {
+    type: 'icon';
+    icon: SlotIconComponent;
+    size?: number;
+    color?: keyof typeof COLOR;
+    className?: string;
+}
+interface InputSideCustomSlot {
+    type: 'custom';
+    children: React.ReactNode;
+    placement?: 'inside' | 'outside';
+}
+type InputLeadingSlotType = InputSideTextSlot | InputSideIconSlot | InputSideCustomSlot;
+type InputTrailingSlotType = InputSideButtonSlot | InputSideIconSlot | InputSideCustomSlot;
+interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    required?: boolean;
+    label?: string;
+    hintText?: string;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    validation?: boolean;
+    destructive?: boolean;
+    leadingElement?: InputLeadingSlotType;
+    trailingElement?: InputTrailingSlotType;
+    showHelpIcon?: boolean;
+    showTextCount?: boolean;
+    maxLength?: number;
+}
+interface NoneClearableInputBaseProps extends InputBaseCommonProps {
+    clearText?: never;
+    onClearText?: never;
+}
+interface ClearableInputBaseProps extends InputBaseCommonProps {
+    clearText: boolean;
+    onClearText: () => void;
+}
+type InputBaseProps = NoneClearableInputBaseProps | ClearableInputBaseProps;
+declare const InputBase: React.ForwardRefExoticComponent<InputBaseProps & React.RefAttributes<HTMLInputElement>>;
+export type { InputBaseProps };
+export { InputBase };

package/dist/types/src/components/forms-and-input/radio/RadioInput.d.ts

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

package/dist/types/src/components/forms-and-input/range-date-picker-with-buttons/RangeDatePickerWithButtons.d.ts

@@ -0,0 +1,71 @@
+import { type Dispatch, type SetStateAction } from 'react';
+import { PERIOD_ITEM, type PeriodItemMap } from '../../../constant/date-picker';
+import { type RangeDatePickerProps } from '../range-date-picker/RangeDatePicker';
+type PeriodKeyType = keyof typeof PERIOD_ITEM;
+type RangeDatePickerWithButtonsProps<T extends PeriodItemMap = typeof PERIOD_ITEM> = {
+    useYesterdayAsEndDate?: boolean;
+    currentButtonId: keyof T & string;
+    setCurrentButtonId: Dispatch<SetStateAction<keyof T & string>>;
+    periodKeys: (keyof T & string)[];
+    periodItems?: T;
+    size?: 'xs' | 'sm';
+} & RangeDatePickerProps;
+declare const RangeDatePickerWithButtons: <T extends PeriodItemMap = {
+    TODAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    YESTERDAY: {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '7DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1WEEK': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '15DAYS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '3MONTHS': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    '1YEAR': {
+        text: string;
+        period: number;
+        unit: string;
+    };
+    ENTIRE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+    NONE: {
+        text: string;
+        period: number;
+        unit: null;
+    };
+}>({ useYesterdayAsEndDate, size, currentButtonId, setCurrentButtonId, startDateOptions, endDateOptions, validationOption, periodKeys, periodItems, onDateValidation, }: RangeDatePickerWithButtonsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type { PeriodKeyType };
+export { RangeDatePickerWithButtons };

package/dist/types/src/components/forms-and-input/select/Select.d.ts

@@ -0,0 +1,16 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { Size } from '../../../../constant/size';
+import type { OptionType } from '../../../types/dropdown';
+export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size'> {
+    placeholder?: string;
+    disabledPlaceholder?: boolean;
+    hintText?: string;
+    destructive?: boolean;
+    size?: Extract<Size, 'xs' | 'sm' | 'md'>;
+    optionItems?: OptionType[];
+    register?: UseFormRegisterReturn;
+    type?: 'default' | 'simple';
+    children?: ReactNode;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/types/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -0,0 +1,27 @@
+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';
+declare const DEFAULT_MAX_HEIGHT = 275;
+type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> & {
+    children?: ReactNode;
+    placeholder?: string;
+    disabledPlaceholder?: boolean;
+    hintText?: string;
+    destructive?: boolean;
+    size?: Extract<Size, 'xs' | 'sm' | 'md'>;
+    autoWidth?: boolean;
+    type?: 'default' | 'simple';
+    optionItems?: OptionType[];
+    value?: OptionValue;
+    onChange?: OptionChangeHandler;
+    disabled?: boolean;
+    register?: UseFormRegisterReturn;
+    maxHeight?: number;
+    multiple?: boolean;
+    onEdit?: () => void;
+    align?: 'left' | 'right';
+};
+declare const SelectBox: import("react").ForwardRefExoticComponent<Omit<SelectBoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type { SelectBoxProps };
+export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/types/src/components/forms-and-input/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import { type SliderOptions } from '../../../../assets/scripts/slider';
+export type SliderLabelPosition = SliderOptions['labelPosition'];
+export interface SliderProps {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | [number, number];
+    onChange?: (value: number | [number, number]) => void;
+    labelPosition?: SliderLabelPosition;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Slider: ({ min, max, step, value, onChange, labelPosition, disabled, className, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export default Slider;

package/dist/types/src/components/forms-and-input/switch/Switch.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode, type Ref } from 'react';
+import type { Size } from '../../../../constant/size';
+type SwitchOption = {
+    label: ReactNode;
+    value: string | boolean;
+};
+type SwitchSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
+type SwitchProps = {
+    size?: SwitchSize;
+    left: SwitchOption;
+    right: SwitchOption;
+    onChange?: (value: string | boolean) => void;
+    name: string;
+    disabled?: boolean;
+    value?: string | boolean;
+    defaultValue?: string | boolean;
+    className?: string;
+    refs?: [Ref<HTMLInputElement>, Ref<HTMLInputElement>];
+};
+declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export type { SwitchSize, SwitchProps };
+export { Switch };

package/dist/types/src/components/forms-and-input/switch/index.d.ts

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

package/dist/types/src/components/forms-and-input/textarea/Textarea.d.ts

@@ -0,0 +1,14 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { Size } from '../../../../constant/size';
+interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
+    className?: string;
+    size?: Extract<Size, 'xs' | 'sm'>;
+    label?: string;
+    hintText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    characterCount?: boolean;
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/types/src/components/image-and-icons/dot/Dot.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes } from 'react';
+import type { ColorTone } from '../../../../constant/color';
+import type { Size } from '../../../../constant/size';
+type DotColor = Extract<ColorTone, 'neutral' | 'error' | 'warning' | 'success' | 'blue' | 'pink' | 'disabled'>;
+type DotSize = Extract<Size, 'sm' | 'md' | 'lg'>;
+interface DotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /**
+     * The color of the dot
+     * @default 'success'
+     */
+    color?: DotColor;
+    /**
+     * The size of the dot
+     * @default 'md'
+     */
+    size?: DotSize;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare const Dot: import("react").ForwardRefExoticComponent<DotProps & import("react").RefAttributes<HTMLSpanElement>>;
+export type { DotColor, DotSize, DotProps };
+export { Dot };

package/dist/types/src/components/image-and-icons/featured-icon/FeaturedIcon.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { SlotIconComponent } from '../../../types/side-slot';
+type FeaturedIconTheme = 'light-circle' | 'dark-circle' | 'outline-circle' | 'square-outline';
+type FeaturedIconColor = 'neutral' | 'error' | 'warning' | 'success';
+type FeaturedIconSize = 'sm' | 'md' | 'lg' | 'xl';
+interface FeaturedIconProps extends Omit<ComponentPropsWithoutRef<'div'>, 'color'> {
+    icon: SlotIconComponent;
+    theme?: FeaturedIconTheme;
+    color?: FeaturedIconColor;
+    size?: FeaturedIconSize;
+    className?: string;
+}
+declare const FeaturedIcon: import("react").ForwardRefExoticComponent<FeaturedIconProps & import("react").RefAttributes<HTMLDivElement>>;
+export type { FeaturedIconTheme, FeaturedIconColor, FeaturedIconSize, FeaturedIconProps };
+export { FeaturedIcon };

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

@@ -1,45 +1,45 @@
 export type { SideSlotType, SlotIconComponent } from '../types';
-export * from './badge';
-export * from './badge-group';
-export * from './bread-crumb';
-export * from './button';
-export * from './button-group';
-export * from './carousel-arrow';
-export * from './carousel-number-group';
-export * from './checkbox';
-export * from './combo-box';
-export * from './data-grid';
-export * from './date-picker';
-export * from './divider';
-export * from './dot';
-export * from './dropdown';
-export * from './empty-state';
-export * from './featured-icon';
-export * from './file-input';
-export * from './horizontal-tab';
-export * from './image-file-input';
-export * from './input-base';
-export * from './modal';
-export * from './notification';
-export * from './number-input';
-export * from './pagination';
-export * from './password-input';
-export * from './progress-bar';
-export * from './progress-circle';
-export * from './radio';
-export * from './range-date-picker';
-export * from './range-date-picker-with-buttons';
-export * from './select';
-export * from './select-box';
+export * from './action/button';
+export * from './action/button-group';
+export * from './data-display/data-grid';
+export * from './data-display/table';
+export * from './feedback-and-status/badge';
+export * from './feedback-and-status/badge-group';
+export * from './feedback-and-status/carousel-arrow';
+export * from './feedback-and-status/carousel-number-group';
+export * from './feedback-and-status/empty-state';
+export * from './feedback-and-status/progress-bar';
+export * from './feedback-and-status/progress-circle';
+export * from './feedback-and-status/spinner';
+export * from './feedback-and-status/tag';
+export * from './forms-and-input/checkbox';
+export * from './forms-and-input/combo-box';
+export * from './forms-and-input/date-picker';
+export * from './forms-and-input/file-input';
+export * from './forms-and-input/image-file-input';
+export * from './forms-and-input/input-base';
+export * from './forms-and-input/number-input';
+export * from './forms-and-input/password-input';
+export * from './forms-and-input/radio';
+export * from './forms-and-input/range-date-picker';
+export * from './forms-and-input/range-date-picker-with-buttons';
+export * from './forms-and-input/select';
+export * from './forms-and-input/select-box';
+export * from './forms-and-input/slider';
+export * from './forms-and-input/switch';
+export * from './forms-and-input/textarea';
+export * from './forms-and-input/toggle';
+export * from './image-and-icons/dot';
+export * from './image-and-icons/featured-icon';
+export * from './layout/divider';
+export * from './navigation/bread-crumb';
+export * from './navigation/horizontal-tab';
+export * from './navigation/pagination';
+export * from './navigation/vertical-tab';
+export * from './overlays/dropdown';
+export * from './overlays/modal';
+export * from './overlays/notification';
+export * from './overlays/tooltip';
 export * from './select-dropdown';
 export * from './shared';
-export * from './slider';
-export * from './spinner';
-export * from './switch';
 export * from './tab';
-export * from './table';
-export * from './tag';
-export * from './textarea';
-export * from './toggle';
-export * from './tooltip';
-export * from './vertical-tab';

package/dist/types/src/components/navigation/horizontal-tab/HorizontalTab.d.ts

@@ -0,0 +1,12 @@
+import { type TabButtonProps, type TabSize, type TabType } from '../../tab/TabButton';
+type HorizontalTabProps = {
+    type?: Exclude<TabType, 'line-vertical'>;
+    size?: TabSize;
+    activeTab?: string;
+    fullWidth?: boolean;
+    menus?: TabButtonProps[];
+    className?: string;
+};
+declare const HorizontalTab: ({ type, size, activeTab, fullWidth, menus, className, }: HorizontalTabProps) => import("react/jsx-runtime").JSX.Element | null;
+export type { HorizontalTabProps };
+export { HorizontalTab };

package/dist/types/src/components/navigation/pagination/NavButton.d.ts

@@ -0,0 +1,31 @@
+import type { SlotIconComponent } from '../../../types/side-slot';
+declare const NAV_BUTTON_CONFIG: {
+    readonly first: {
+        readonly label: "처음";
+        readonly className: "ncua-pagination__first";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+    readonly prev: {
+        readonly label: "이전";
+        readonly className: "ncua-pagination__before";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly next: {
+        readonly label: "다음";
+        readonly className: "ncua-pagination__next";
+        readonly getIcon: (isPC: boolean) => SlotIconComponent;
+    };
+    readonly last: {
+        readonly label: "마지막";
+        readonly className: "ncua-pagination__last";
+        readonly getIcon: (_isPC: boolean) => SlotIconComponent;
+    };
+};
+export declare const NavButton: ({ type, breakPoint, noPrev, noNext, onClick, }: {
+    type: keyof typeof NAV_BUTTON_CONFIG;
+    breakPoint: 'pc' | 'mo';
+    noPrev: boolean;
+    noNext: boolean;
+    onClick: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/src/components/navigation/vertical-tab/VerticalTab.d.ts

@@ -0,0 +1,9 @@
+import { type TabButtonProps } from '../../tab/TabButton';
+export type VerticalTabProps = {
+    type?: 'button-primary' | 'button-white' | 'line-vertical';
+    breakPoint?: 'mobile' | 'pc';
+    activeTab?: string;
+    menus?: TabButtonProps[];
+    onSelect?: (value: string) => void;
+};
+export declare const VerticalTab: ({ type, breakPoint, activeTab, menus, onSelect, }: VerticalTabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/overlays/dropdown/Dropdown.d.ts

@@ -0,0 +1,65 @@
+import type { SlotIconComponent } from '../../../types/side-slot';
+export type AvatarTrigger = {
+    type: 'avatar';
+    avatar: string;
+};
+export type ButtonTrigger = {
+    type: 'button';
+    text: string;
+};
+export type IconTrigger = {
+    type: 'icon';
+    icon?: SlotIconComponent;
+};
+export type CustomTrigger = {
+    type: 'custom';
+    children: React.ReactNode;
+};
+export type DropdownItemType = {
+    id: string;
+    text: string;
+    icon?: SlotIconComponent;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    type?: 'default' | 'danger';
+    className?: string;
+    visible?: boolean;
+    required?: boolean;
+};
+export type DropdownGroup = {
+    items: DropdownItemType[];
+    sortable?: boolean;
+};
+export type AvatarHeader = {
+    type: 'avatar';
+    avatar: string;
+    title: string;
+    subtitle: string;
+};
+export type TextHeader = {
+    type: 'text';
+    title: string;
+};
+export type DropdownHeaderType = AvatarHeader | TextHeader;
+export type DropdownBaseProps = {
+    trigger: AvatarTrigger | ButtonTrigger | IconTrigger | CustomTrigger;
+    align?: 'left' | 'right';
+    header?: DropdownHeaderType;
+    className?: string;
+    opened?: boolean;
+    closeOnClickOutside?: boolean;
+};
+export type ActionDropdownProps = DropdownBaseProps & {
+    variant?: 'action';
+    groups: DropdownGroup[];
+    closeOnClickItem?: boolean;
+};
+export type ConfigDropdownProps = DropdownBaseProps & {
+    variant: 'config';
+    groups: DropdownGroup[];
+    onApply: (items: DropdownItemType[]) => void;
+    applyButtonText?: string;
+};
+export type DropdownProps = ActionDropdownProps | ConfigDropdownProps;
+export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/overlays/dropdown/utils.d.ts

@@ -0,0 +1,32 @@
+import type { DropdownGroup, DropdownItemType } from './Dropdown';
+/**
+ * 배열에서 fromId 위치의 요소를 toId 위치로 이동.
+ * id 중 하나라도 없으면 원본 그대로 반환. immutable.
+ */
+export declare function arrayMoveById(order: string[], fromId: string, toId: string): string[];
+/**
+ * fromId 요소를 toId 기준 edge('top'=직전, 'bottom'=직후)에 삽입.
+ * indicator 위치와 정확히 일치하는 reorder를 위해 사용.
+ */
+export declare function arrayReorderByEdge(order: string[], fromId: string, toId: string, edge: 'top' | 'bottom'): string[];
+export type DraftState = {
+    order: string[];
+    visibility: Record<string, boolean>;
+};
+/**
+ * groups를 받아 초기 draft state를 만든다.
+ * - order: 모든 그룹·아이템의 id를 순서대로 평탄화
+ * - visibility: item.visible (undefined면 true)
+ */
+export declare function initDraftState(groups: DropdownGroup[]): DraftState;
+/**
+ * 모든 그룹의 items를 평탄화하고, draft.order 순서로 재배열.
+ * 각 item의 visible은 원래 visible이 정의되어 있던 경우에만 draft.visibility 값으로 갱신.
+ * 그 외 필드는 props 원본 그대로 보존.
+ */
+export declare function applyDraftToItems(groups: DropdownGroup[], draft: DraftState): DropdownItemType[];
+/**
+ * draft가 original과 비교해 변경되었는지 판단.
+ * order 배열 또는 visibility 객체 중 하나라도 다르면 true.
+ */
+export declare function hasDraftChanged(original: DraftState, draft: DraftState): boolean;