@cashdoc/cashdoc-cms-design-system 2.6.2 → 2.8.0

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

@@ -55,7 +55,4 @@ export type FileUploadProps = {
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/FileUpload/For%20Jsdoc.png?raw=true)
  */
-export declare const FileUpload: {
-    ({ value, onChange, maxFiles, maxSize, accept, disabled, className, onError, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FileUpload: import('react').ForwardRefExoticComponent<FileUploadProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 declare const filterToggleGroupSizeClassMap: {
     readonly sm: {
         readonly item: "min-w-[84px] px-3 py-2";
@@ -80,64 +80,6 @@ export type FilterToggleGroupProps<T extends string | number> = {
     showIcon?: boolean;
     ariaLabel?: string;
 };
-/**
- * 상태별 집계 카드와 단일 선택 필터를 결합한 카드형 토글 컴포넌트입니다.
- *
- * 숫자 요약(Count)과 상태 선택을 한 번에 제공해야 하는 관리 화면 상단 영역에 적합합니다.
- * 내부적으로 Radix ToggleGroup(single) 기반으로 동작하며 항상 하나의 상태만 선택됩니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - 상태별 집계 수치(예: 전체/승인/반려/취소)를 보여주면서 바로 목록 필터를 바꿔야 할 때
- * - 옵션 수가 적고(보통 3~8개), 각 옵션의 의미를 카드로 강조하고 싶을 때
- * - 프로젝트 간 동일한 카드 필터 패턴을 재사용하려는 경우
- *
- * **사용하지 말아야 하는 경우:**
- * - 다중 선택이 필요한 필터(체크박스 기반 UI 권장)
- * - 옵션이 많아 카드가 가로로 과밀해지는 경우(Dropdown/Select 권장)
- * - 집계 수치가 없고 단순 탭 전환만 필요한 경우(SegmentedControls 권장)
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- * - `value`를 단일 source of truth로 관리하고 `onValueChange`에서 화면 데이터를 즉시 동기화하세요.
- * - `size`는 한 화면에서 통일해서 사용하고, 필요한 경우 `className`/`itemClassName`으로 레이아웃만 보정하세요.
- * - `ariaLabel`에 그룹 목적(예: "리뷰 상태 필터")을 명확히 지정하세요.
- *
- * ### 🚫 Don't (주의/금지 사항)
- * - 10개 이상의 옵션을 카드로 나열하지 마세요. 가독성과 클릭 정확도가 크게 떨어집니다.
- * - 상태 의미를 색상에만 의존하지 마세요. `label` 텍스트를 명확히 유지하세요.
- * - `onValueChange`를 비워 둔 채 시각 요소로만 사용하지 마세요. 필터 컴포넌트 의미가 약해집니다.
- *
- * ## Example
- *
- * {@tool snippet}
- * ```tsx
- * type ReviewStatus = "all" | "requested" | "approved" | "rejected";
- *
- * const [status, setStatus] = useState<ReviewStatus>("all");
- *
- * <FilterToggleGroup
- *   ariaLabel="리뷰 상태 필터"
- *   value={status}
- *   onValueChange={setStatus}
- *   size="md"
- *   items={[
- *     { value: "all", label: "전체", count: 120, icon: <UserIcon /> },
- *     { value: "requested", label: "포인트 신청", count: 32, icon: <FileTextIcon /> },
- *     { value: "approved", label: "신청 승인", count: 21, icon: <CheckCircleIcon />, intent: "success" },
- *     { value: "rejected", label: "신청 거절", count: 5, icon: <XIcon />, intent: "danger" },
- *   ]}
- * />
- * ```
- * {@end-tool}
- *
- * ## 참고사진
- * ![](<https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/FilterToggleGroup/For%20Jsdoc.png?raw=true>)
- */
-export declare const FilterToggleGroup: {
-    <T extends string | number>({ items, value, onValueChange, className, itemClassName, size, align, showIcon, ariaLabel, }: FilterToggleGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+type FilterToggleGroupRef = React.ElementRef<typeof ToggleGroup.Root>;
+export declare const FilterToggleGroup: <T extends string | number>(props: FilterToggleGroupProps<T> & React.RefAttributes<FilterToggleGroupRef>) => React.ReactElement;
 export {};

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

@@ -166,7 +166,4 @@ export type ImageUploadProps = {
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Forms/ImageUpload/For%20Jsdoc.png?raw=true)
  */
-export declare const ImageUpload: {
-    ({ value, onChange, maxFiles, maxSize, accept, disabled, className, showPreview, showAcceptedFileTypes, error, onError, validateImage, placeholder, placeholderActive, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const ImageUpload: import('react').ForwardRefExoticComponent<ImageUploadProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -75,4 +75,4 @@ export type LoadingCircleProps = {
  * ## 참고사진
  * ![](https://raw.githubusercontent.com/AlmSmartDoctor/ccds-screenshots/main/screenshots/Loading/LoadingCircle/For%20Jsdoc.png?raw=true)
  */
-export declare function LoadingCircle({ size, className }: LoadingCircleProps): import("react/jsx-runtime").JSX.Element;
+export declare const LoadingCircle: import('react').ForwardRefExoticComponent<LoadingCircleProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -15,6 +15,15 @@ export type ModalProps = {
     modal?: boolean;
     icon?: React.ReactNode;
     title?: React.ReactNode;
+    /**
+     * 스크린리더에 전달할 모달 설명 텍스트입니다. 지정하면 시각적으로는
+     * 숨겨진 채 `aria-describedby`로 연결됩니다.
+     *
+     * `children`은 `<div>` 컨테이너에 렌더되어 block 요소(픽커, 폼 등)를
+     * 안전하게 담을 수 있으므로, 접근성 설명이 필요하면 이 prop을 사용하세요.
+     * 지정하지 않으면 Radix의 설명 연결이 생략됩니다(시각/동작 영향 없음).
+     */
+    description?: React.ReactNode;
     children: React.ReactNode;
     footer?: React.ReactNode;
     className?: string;
@@ -107,7 +116,8 @@ export type ModalProps = {
  * - **스크린 리더**:
  *   - `role="dialog"`: 대화상자임을 인식
  *   - `aria-labelledby`: title이 모달의 레이블로 연결됨
- *   - `aria-describedby`: children 콘텐츠가 설명으로 연결됨
+ *   - `aria-describedby`: `description` prop이 있으면 시각적으로 숨긴 설명으로
+ *     연결됨. `children`은 `<div>` 컨테이너에 렌더되어 block 요소도 안전함.
  *
  * - **포커스 트랩**: 모달이 열려있는 동안 포커스가 모달 내부에서만 순환합니다
  * - **배경 스크롤 방지**: 모달이 열리면 body 스크롤이 자동으로 비활성화됩니다

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

@@ -42,7 +42,7 @@ export type PopoverContentProps = ComponentPropsWithoutRef<typeof PopoverPrimiti
  * ### ✅ Do (권장 사항)
  *
  * - **명확한 트리거**: 사용자가 무엇을 클릭하면 팝오버가 열릴지 명확히 인지할 수 있는 버튼이나 아이콘을 사용하세요.
- * - **적절한 배치**: `align` 속성을 조절하여 팝오버가 화면 밖으로 나가지 않도록 관리하세요. (기본값: 'end')
+ * - **적절한 배치**: `align` 속성을 조절하여 팝오버가 화면 밖으로 나가지 않도록 관리하세요. (기본값: 'start' — 팝오버 왼쪽 보더가 트리거 왼쪽 선에 정렬)
  *
  * ### 🚫 Don't (주의/금지 사항)
  *

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

@@ -1,3 +1,4 @@
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
 export type SegmentedControlsOption<T extends string | number> = {
     label: string;
     value: T;
@@ -8,50 +9,6 @@ export type SegmentedControlsProps<T extends string | number> = {
     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>)
- */
-export declare const SegmentedControls: {
-    <T extends string | number>({ options, value, onChange, className, }: SegmentedControlsProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+type SegmentedControlsRef = React.ElementRef<typeof ToggleGroup.Root>;
+export declare const SegmentedControls: <T extends string | number>(props: SegmentedControlsProps<T> & React.RefAttributes<SegmentedControlsRef>) => React.ReactElement;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashdoc/cashdoc-cms-design-system",
-  "version": "2.6.2",
+  "version": "2.8.0",
   "description": "Cashdoc CMS Design System",
   "type": "module",
   "main": "dist/index.umd.js",