@cashdoc/cashdoc-cms-design-system 1.3.0 → 1.4.1

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

@@ -2,8 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ButtonHTMLAttributes } from 'react';
 import { buttonVariants } from './variants';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-}
+export type ButtonProps = {} & ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>;
 /**
  * 사용자의 클릭 동작을 통해 특정 액션을 실행하거나 페이지를 이동시키는 기본적인 컴포넌트입니다.
  *
@@ -109,5 +108,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Va
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/Button/For%20Jsdoc.png?raw=true)
  */
-declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "default" | "secondary" | "outline" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLButtonElement>>;
 export { Button };

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

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+export type CheckboxProps = {
     label?: string;
     id?: string;
-}
+} & React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
 /**
  * 사용자가 여러 옵션 중 하나 이상을 선택하거나, 특정 항목의 활성화 상태를 제어할 때 사용하는 컴포넌트입니다.
  *
@@ -87,4 +87,7 @@ export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof Che
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/Checkbox/For%20Jsdoc.png)
  */
-export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    label?: string;
+    id?: string;
+} & Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/components/DatePicker/DatePicker.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface DatePickerProps {
+export type DatePickerProps = {
     value?: string;
     onChange?: (date: string) => void;
     label?: string;
@@ -12,7 +12,7 @@ export interface DatePickerProps {
     errorMessage?: string;
     helperText?: string;
     className?: string;
-}
+};
 /**
  * 사용자가 달력 인터페이스를 통해 특정 날짜를 선택할 수 있게 하는 컴포넌트입니다.
  *

package/dist/src/components/DateRangePicker/DateRangePicker.d.ts

@@ -1,16 +1,16 @@
 import { default as React } from 'react';
 
-export interface DateRange {
+export type DateRange = {
     start: string;
     end: string;
-}
-export interface DateRangePickerProps {
+};
+export type DateRangePickerProps = {
     value?: DateRange;
     onChange?: (range: DateRange) => void;
     startLabel?: string;
     endLabel?: string;
     className?: string;
-}
+};
 /**
  * 사용자가 특정 기간(시작일과 종료일)을 선택할 수 있게 하는 컴포넌트입니다.
  *

package/dist/src/components/Dropdown/Combobox.d.ts

@@ -1,10 +1,10 @@
 import { DropdownProps } from './Dropdown';
 
-export interface ComboboxProps extends Omit<DropdownProps, "searchable"> {
+export type ComboboxProps = {
     loading?: boolean;
     createable?: boolean;
     onCreateOption?: (value: string) => void;
-}
+} & Omit<DropdownProps, "searchable">;
 /**
  * 텍스트 입력과 드롭다운 선택 기능이 결합되어, 목록에서 검색하거나 새로운 옵션을 생성할 수 있는 컴포넌트입니다.
  *
@@ -83,4 +83,8 @@ export interface ComboboxProps extends Omit<DropdownProps, "searchable"> {
  * - {@link TagInput}, 여러 개의 값을 검색하여 추가해야 할 때
  * - {@link TextInput}, 단순한 텍스트 입력만 필요한 경우
  */
-export declare const Combobox: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Combobox: import('react').ForwardRefExoticComponent<{
+    loading?: boolean;
+    createable?: boolean;
+    onCreateOption?: (value: string) => void;
+} & Omit<DropdownProps, "searchable"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/Dropdown/Dropdown.d.ts

@@ -1,13 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
 import { dropdownTriggerVariants } from './variants';
 
-export interface DropdownOption {
+export type DropdownOption = {
     value: string;
     label: string;
     disabled?: boolean;
     children?: DropdownOption[];
-}
-export interface DropdownProps extends VariantProps<typeof dropdownTriggerVariants> {
+};
+export type DropdownProps = {
     options: DropdownOption[];
     value?: string;
     placeholder?: string;
@@ -20,7 +20,7 @@ export interface DropdownProps extends VariantProps<typeof dropdownTriggerVarian
     multiple?: boolean;
     maxHeight?: number;
     defaultOpen?: boolean;
-}
+} & VariantProps<typeof dropdownTriggerVariants>;
 /**
  * 사용자가 목록에서 하나 또는 여러 개의 옵션을 선택할 수 있게 하는 컴포넌트입니다.
  *
@@ -105,4 +105,20 @@ export interface DropdownProps extends VariantProps<typeof dropdownTriggerVarian
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/Dropdown/For%20Jsdoc.png?raw=true)
  */
-export declare const Dropdown: import('react').ForwardRefExoticComponent<DropdownProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Dropdown: import('react').ForwardRefExoticComponent<{
+    options: DropdownOption[];
+    value?: string;
+    placeholder?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    className?: string;
+    dropdownClassName?: string;
+    searchable?: boolean;
+    clearable?: boolean;
+    multiple?: boolean;
+    maxHeight?: number;
+    defaultOpen?: boolean;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/Dropdown/Select.d.ts

@@ -1,11 +1,11 @@
 import { DropdownProps } from './Dropdown';
 
-export interface SelectProps extends Omit<DropdownProps, "multiple" | "searchable" | "clearable"> {
+export type SelectProps = {
     label?: string;
     helperText?: string;
     error?: string;
     required?: boolean;
-}
+} & Omit<DropdownProps, "multiple" | "searchable" | "clearable">;
 /**
  * 사용자에게 레이블, 도움말, 에러 메시지와 함께 단일 선택 드롭다운을 제공하는 컴포넌트입니다.
  *
@@ -84,4 +84,9 @@ export interface SelectProps extends Omit<DropdownProps, "multiple" | "searchabl
  * - {@link TextInput}, 텍스트 직접 입력이 필요한 경우
  * - {@link RadioButton}, 옵션이 적고 한눈에 보여야 하는 경우
  */
-export declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const Select: import('react').ForwardRefExoticComponent<{
+    label?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+} & Omit<DropdownProps, "searchable" | "clearable" | "multiple"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/components/FileUpload/FileUpload.d.ts

@@ -1,6 +1,6 @@
 import { Accept } from 'react-dropzone';
 
-export interface FileUploadProps {
+export type FileUploadProps = {
     value?: File[];
     onChange?: (files: File[]) => void;
     maxFiles?: number;
@@ -9,7 +9,7 @@ export interface FileUploadProps {
     disabled?: boolean;
     className?: string;
     onError?: (error: string) => void;
-}
+};
 /**
  * 드래그 앤 드롭 및 클릭을 통해 파일을 업로드할 수 있는 컴포넌트입니다.
  *

package/dist/src/components/ImageUpload/ImageUpload.d.ts

@@ -1,12 +1,12 @@
 import { Accept } from 'react-dropzone';
 
-export interface ImageMetadata {
+export type ImageMetadata = {
     width: number;
     height: number;
     aspectRatio: number;
     size: number;
-}
-export interface ImageUploadProps {
+};
+export type ImageUploadProps = {
     value?: File[];
     onChange?: (files: File[]) => void;
     maxFiles?: number;
@@ -20,7 +20,7 @@ export interface ImageUploadProps {
     validateImage?: (file: File, metadata: ImageMetadata) => string | null | Promise<string | null>;
     placeholder?: string;
     placeholderActive?: string;
-}
+};
 /**
  * 드래그 앤 드롭 및 클릭을 통해 이미지를 업로드할 수 있는 컴포넌트입니다.
  *

package/dist/src/components/LoadingCircle/LoadingCircle.d.ts

@@ -1,7 +1,7 @@
-interface LoadingCircleProps {
+type LoadingCircleProps = {
     size?: "sm" | "md" | "lg";
     className?: string;
-}
+};
 /**
  * 시스템이 데이터를 처리 중이거나 다음 화면을 준비 중임을 시각적으로 나타내는 인디케이터입니다.
  *

package/dist/src/components/Modal/ConfirmModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface ConfirmModalProps {
+export type ConfirmModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: string;
@@ -8,7 +8,7 @@ export interface ConfirmModalProps {
     confirmText?: string;
     onConfirm?: () => void;
     className?: string;
-}
+};
 /**
  * 사용자에게 특정 작업에 대한 최종 확인을 받기 위한 단순화된 모달 컴포넌트입니다.
  *

package/dist/src/components/Modal/DeleteModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface DeleteModalProps {
+export type DeleteModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: string;
@@ -10,7 +10,7 @@ export interface DeleteModalProps {
     onConfirm: () => void;
     onCancel?: () => void;
     className?: string;
-}
+};
 /**
  * 데이터를 삭제하거나 영구적인 작업을 수행하기 전, 사용자의 최종 승인을 받기 위한 경고 모달입니다.
  *

package/dist/src/components/Modal/ErrorModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface ErrorModalProps {
+export type ErrorModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: string;
@@ -8,7 +8,7 @@ export interface ErrorModalProps {
     confirmText?: string;
     onConfirm?: () => void;
     className?: string;
-}
+};
 /**
  * 시스템 오류나 사용자의 잘못된 조작으로 인해 작업이 실패했음을 알리는 모달입니다.
  *

package/dist/src/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface ModalProps {
+export type ModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     icon?: React.ReactNode;
@@ -10,7 +10,7 @@ export interface ModalProps {
     className?: string;
     showCloseButton?: boolean;
     size?: "sm" | "md" | "lg";
-}
+};
 /**
  * 사용자에게 중요한 정보를 표시하거나 입력을 요구하는 오버레이 대화상자입니다.
  *

package/dist/src/components/Modal/SuccessModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface SuccessModalProps {
+export type SuccessModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: string;
@@ -8,7 +8,7 @@ export interface SuccessModalProps {
     confirmText?: string;
     onConfirm?: () => void;
     className?: string;
-}
+};
 /**
  * 요청한 작업이 성공적으로 완료되었음을 축하하거나 알리는 모달입니다.
  *

package/dist/src/components/Modal/WarningModal.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface WarningModalProps {
+export type WarningModalProps = {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     title?: string;
@@ -10,7 +10,7 @@ export interface WarningModalProps {
     cancelText?: string;
     onCancel?: () => void;
     className?: string;
-}
+};
 /**
  * 잠재적인 문제를 경고하거나 주의가 필요한 작업을 수행하기 전 사용자의 동의를 구하는 모달입니다.
  *

package/dist/src/components/Pagination/Pagination.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export interface PaginationProps {
+export type PaginationProps = {
     currentPage: number;
     totalPages: number;
     onPageChange: (page: number) => void;
@@ -8,7 +8,7 @@ export interface PaginationProps {
     showPrevNext?: boolean;
     disabled?: boolean;
     className?: string;
-}
+};
 /**
  * 사용자가 여러 페이지로 나뉜 콘텐츠를 탐색할 수 있게 하는 페이지네이션 컴포넌트입니다.
  *

package/dist/src/components/Popover/PopoverMenuItem.d.ts

@@ -2,9 +2,9 @@ import { VariantProps } from 'class-variance-authority';
 import { ButtonHTMLAttributes } from 'react';
 import { popoverMenuItemVariants } from './variants';
 
-export interface PopoverMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof popoverMenuItemVariants> {
+export type PopoverMenuItemProps = {
     icon?: React.ReactNode;
-}
+} & ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof popoverMenuItemVariants>;
 /**
  * Popover 내부에 배치되는 개별 액션 항목 컴포넌트입니다.
  *
@@ -30,5 +30,9 @@ export interface PopoverMenuItemProps extends ButtonHTMLAttributes<HTMLButtonEle
  * </PopoverContent>
  * ```
  */
-declare const PopoverMenuItem: import('react').ForwardRefExoticComponent<PopoverMenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+declare const PopoverMenuItem: import('react').ForwardRefExoticComponent<{
+    icon?: React.ReactNode;
+} & ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLButtonElement>>;
 export { PopoverMenuItem };

package/dist/src/components/RadioButton/RadioButton.d.ts

@@ -81,7 +81,9 @@ declare const radioGroupItemVariants: (props?: ({
     variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item>, VariantProps<typeof radioGroupItemVariants> {
-}
-declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
+export type RadioGroupItemProps = {} & React.ComponentPropsWithoutRef<typeof RadioGroupPrimitives.Item> & VariantProps<typeof radioGroupItemVariants>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitives.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { RadioGroup, RadioGroupItem };

package/dist/src/components/SideNavigation/SideNavigation.d.ts

@@ -1,23 +1,23 @@
 import { default as React } from 'react';
 
-export interface SubMenuItem {
+export type SubMenuItem = {
     url: string;
     title: string;
-}
-export interface MenuItem {
+};
+export type MenuItem = {
     url: string;
     title: string;
     icon?: React.ReactNode;
     subMenu?: SubMenuItem[];
-}
-export interface SideNavigationProps {
+};
+export type SideNavigationProps = {
     title?: string;
     menus: MenuItem[];
     selectedUrl: string;
     onMenuClick: (url: string) => void;
     headerSlot?: React.ReactNode;
     className?: string;
-}
+};
 /**
  * 어플리케이션의 주요 섹션 간 이동을 담당하는 왼쪽 사이드바 메뉴 컴포넌트입니다.
  *

package/dist/src/components/Switch/Switch.d.ts

@@ -5,8 +5,23 @@ import * as SwitchPrimitives from "@radix-ui/react-switch";
 declare const switchVariants: (props?: ({
     variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, VariantProps<typeof switchVariants> {
-}
+export type SwitchProps = {
+    /**
+     * 스위치 트랙의 가로 길이입니다.
+     * - `number` 입력 시 px 단위로 처리됩니다. (예: `96`)
+     * - `string` 입력 시 CSS 길이값으로 처리됩니다. (예: `8rem`, `120px`)
+     * - 최소 길이는 기본 크기(40px)입니다.
+     */
+    width?: number | string;
+    /**
+     * 스위치가 켜짐(`checked`) 상태일 때, thumb 반대편(왼쪽 빈 영역)에 표시할 텍스트입니다.
+     */
+    checkedLabel?: React.ReactNode;
+    /**
+     * 스위치가 꺼짐(`unchecked`) 상태일 때, thumb 반대편(오른쪽 빈 영역)에 표시할 텍스트입니다.
+     */
+    uncheckedLabel?: React.ReactNode;
+} & React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & VariantProps<typeof switchVariants>;
 /**
  * 두 가지 상반된 상태(On/Off, 활성/비활성)를 즉각적으로 전환할 때 사용하는 컴포넌트입니다.
  *
@@ -31,13 +46,22 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
  *
  * - **Inline Component**: 주변 텍스트나 다른 요소와 자연스럽게 어우러지는 인라인 블록 형태입니다.
  * - **Thumb Animation**: 클릭 시 스위치의 '손잡이(Thumb)'가 부드럽게 좌우로 이동하며 상태 변화를 시각화합니다.
+ * - **Adjustable Width**: `width` prop으로 가로 길이를 확장할 수 있으며, 높이(24px)와 thumb 크기(20px)는 고정됩니다.
+ * - **Inner State Label**: `checkedLabel`, `uncheckedLabel`을 사용하면 스위치 내부 빈 영역에 상태 텍스트를 표시할 수 있습니다.
+ *
+ * ## Props (확장 기능)
+ *
+ * - **width**: 스위치 가로 길이 (`number | string`)
+ * - **checkedLabel**: 켜짐 상태에서 왼쪽 빈 영역에 표시할 텍스트 (`ReactNode`)
+ * - **uncheckedLabel**: 꺼짐 상태에서 오른쪽 빈 영역에 표시할 텍스트 (`ReactNode`)
  *
  * ## Usage guidelines
  *
  * ### ✅ Do (권장 사항)
  *
  * - **명확한 현재 상태 표시**: 색상 변화(회색 vs 색상)를 통해 켜져 있는지 꺼져 있는지 한눈에 알 수 있게 하세요.
- * - **레이블과 함께 사용**: 스위치 옆에 무엇을 제어하는지 설명하는 텍스트를 반드시 배치하세요.
+ * - **문맥 레이블 제공**: 스위치가 무엇을 제어하는지 외부 레이블(스위치 옆 텍스트) 또는 내부 상태 텍스트로 명확히 표현하세요.
+ * - **텍스트 길이에 맞는 폭 사용**: `checkedLabel`과 `uncheckedLabel` 길이를 고려해 `width` 값을 지정하세요.
  *
  * ### 🚫 Don't (주의/금지 사항)
  *
@@ -60,6 +84,16 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
  *   <label htmlFor="airplane-mode">비행기 모드</label>
  * </div>
  * ```
+ *
+ * 내부 상태 텍스트와 가변 길이를 사용하는 스위치:
+ *
+ * ```tsx
+ * <Switch
+ *   width={96}
+ *   checkedLabel="노출"
+ *   uncheckedLabel="미노출"
+ * />
+ * ```
  * {@end-tool}
  *
  * See also:
@@ -70,5 +104,23 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/Switch/For%20Jsdoc.png?raw=true)
  */
-declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Switch: React.ForwardRefExoticComponent<{
+    /**
+     * 스위치 트랙의 가로 길이입니다.
+     * - `number` 입력 시 px 단위로 처리됩니다. (예: `96`)
+     * - `string` 입력 시 CSS 길이값으로 처리됩니다. (예: `8rem`, `120px`)
+     * - 최소 길이는 기본 크기(40px)입니다.
+     */
+    width?: number | string;
+    /**
+     * 스위치가 켜짐(`checked`) 상태일 때, thumb 반대편(왼쪽 빈 영역)에 표시할 텍스트입니다.
+     */
+    checkedLabel?: React.ReactNode;
+    /**
+     * 스위치가 꺼짐(`unchecked`) 상태일 때, thumb 반대편(오른쪽 빈 영역)에 표시할 텍스트입니다.
+     */
+    uncheckedLabel?: React.ReactNode;
+} & Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "green" | "black" | "blue" | "red" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Switch };