@cashdoc/cashdoc-cms-design-system 1.4.0 → 1.5.0

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/SegmentedControls/SegmentedControls.d.ts

@@ -0,0 +1,55 @@
+type Option<T extends string | number> = {
+    label: string;
+    value: T;
+};
+type SegmentedControlsProps<T extends string | number> = {
+    options: Option<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    className?: string;
+};
+/**
+ * 상호 배타적인 적은 수의 옵션 중 하나를 선택하거나 뷰(View)를 전환할 때 사용하는 컴포넌트입니다.
+ * Radix UI의 ToggleGroup을 기반으로 구축되어, 향상된 키보드 접근성을 제공합니다.
+ *
+ * ## When (언제 사용해야 하는가)
+ *
+ * **사용해야 하는 경우:**
+ * - **뷰(View) 전환**: 지도/목록 보기, 일/주/월 달력 보기 등 화면의 데이터 표시 방식을 전환할 때
+ * - **적은 수의 단일 선택**: 2~5개 사이의 옵션 중 하나를 빠르게 선택하고 결과를 즉시 확인해야 할 때
+ *
+ * **사용하지 말아야 하는 경우:**
+ * - **옵션이 많은 경우**: 선택지가 5개를 초과한다면 `Dropdown`이나 `Select`를 사용하는 것이 좋습니다.
+ * - **다중 선택**: 여러 항목을 동시에 선택해야 하는 경우 `Checkbox`를 사용하세요.
+ *
+ * ## Layout behavior
+ *
+ * - **Flexbox 기반**: 컨테이너는 `flex`를 사용하며, 내부 버튼들은 `flex-1` 속성을 가져 주어진 너비 내에서 동일한 비율로 공간을 차지합니다.
+ *
+ * ## Accessibility
+ *
+ * - **Keyboard Navigation**: `Tab` 키로 그룹에 진입한 후, **좌우 방향키(Arrow Keys)**를 사용하여 옵션 간 포커스를 이동할 수 있습니다.
+ * - **Screen Reader**: `role="group"` 및 내부적으로 적절한 토글 상태 속성이 자동으로 부여됩니다.
+ *
+ * ## Example
+ *
+ * {@tool snippet}
+ * ```tsx
+ * const [viewType, setViewType] = useState<"map" | "list">("map");
+ *
+ * <SegmentedControls
+ * value={viewType}
+ * onChange={setViewType}
+ * options={[
+ * { label: "지도 보기", value: "map" },
+ * { label: "목록 보기", value: "list" },
+ * ]}
+ * />
+ * ```
+ * {@end-tool}
+ *
+ * ## 참고사진
+ * ![](<https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/SegmentedControls/For%20Jsdoc.png?raw=true>)
+ */
+declare const SegmentedControls: <T extends string | number>({ options, value, onChange, className, }: SegmentedControlsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default SegmentedControls;

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

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

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,7 +5,7 @@ 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`)
@@ -21,7 +21,7 @@ export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof Switc
      * 스위치가 꺼짐(`unchecked`) 상태일 때, thumb 반대편(오른쪽 빈 영역)에 표시할 텍스트입니다.
      */
     uncheckedLabel?: React.ReactNode;
-}
+} & React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & VariantProps<typeof switchVariants>;
 /**
  * 두 가지 상반된 상태(On/Off, 활성/비활성)를 즉각적으로 전환할 때 사용하는 컴포넌트입니다.
  *
@@ -104,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 };