@cashdoc/cashdoc-cms-design-system 1.0.12 → 1.0.13

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

@@ -1,185 +0,0 @@
-import { default as React } from 'react';
-
-export interface ModalProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    icon?: React.ReactNode;
-    title?: React.ReactNode;
-    children: React.ReactNode;
-    footer?: React.ReactNode;
-    className?: string;
-    showCloseButton?: boolean;
-    size?: "sm" | "md" | "lg";
-}
-/**
- * 사용자에게 중요한 정보를 표시하거나 입력을 요구하는 오버레이 대화상자입니다.
- *
- * {@link Modal}은 사용자의 주의를 집중시켜야 하는 상황에서 사용됩니다.
- * 모달이 열리면 배경이 어두워지며, 사용자는 모달과 상호작용하거나 닫기 전까지
- * 페이지의 다른 부분과 상호작용할 수 없습니다.
- *
- * Radix UI의 Dialog 컴포넌트를 기반으로 구현되어 접근성과 키보드 내비게이션이
- * 자동으로 처리됩니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **중요한 의사 결정**: 삭제, 저장, 제출 등 되돌릴 수 없는 작업 확인
- * - **필수 정보 입력**: 다음 단계로 진행하기 전 반드시 입력해야 하는 정보 수집
- * - **중요 알림**: 사용자가 반드시 확인해야 하는 에러, 경고, 성공 메시지
- * - **간단한 폼**: 페이지 전환 없이 빠르게 정보를 입력받아야 할 때
- *
- * **사용하지 말아야 하는 경우:**
- * - **긴급하지 않은 알림**: Toast 컴포넌트를 사용하세요
- * - **복잡한 다단계 폼**: 별도 페이지로 이동하세요
- * - **많은 정보 표시**: 페이지 내 섹션으로 구현하세요
- * - **비필수 부가 정보**: Popover나 Tooltip을 사용하세요
- *
- * ## Layout behavior
- *
- * 모달은 항상 화면 중앙에 고정되며, 배경 오버레이는 전체 화면을 덮습니다.
- * 크기는 `size` prop에 따라 결정됩니다:
- * - `sm`: 최대 너비 24rem (384px) - 간단한 확인 대화상자
- * - `md`: 최대 너비 28rem (448px) - 기본값, 일반적인 폼이나 메시지
- * - `lg`: 최대 너비 32rem (512px) - 많은 내용이나 복잡한 폼
- *
- * 모달의 높이는 콘텐츠에 따라 자동으로 조절되며, 화면을 넘어가면 스크롤이 발생합니다.
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- *
- * - **명확한 제목 사용**: 모달의 목적을 한눈에 알 수 있는 제목을 제공하세요
- *   ```tsx
- *   <Modal title="항목 삭제">...</Modal>  // Good
- *   <Modal title="확인">...</Modal>        // Bad - 너무 모호함
- *   ```
- *
- * - **행동 지향적 버튼**: 버튼 레이블은 수행할 동작을 명확히 표현하세요
- *   ```tsx
- *   <Button>삭제하기</Button>  // Good
- *   <Button>확인</Button>      // Bad - 무엇을 확인하는지 불명확
- *   ```
- *
- * - **적절한 크기 선택**: 콘텐츠 양에 맞는 size를 선택하세요
- * - **명확한 닫기 방법**: X 버튼, 취소 버튼, 배경 클릭 중 최소 하나는 제공하세요
- * - **중요도에 따른 변형**: ConfirmModal, SuccessModal, ErrorModal 등 사용
- *
- * ### 🚫 Don't (주의/금지 사항)
- *
- * - **모달 위에 모달을 띄우지 마세요** - UX가 복잡해지고 혼란스러워집니다
- * - **긴 스크롤이 필요한 콘텐츠는 피하세요** - 별도 페이지로 이동하는 것이 좋습니다
- * - **자동으로 모달을 열지 마세요** - 사용자의 명시적 동작(클릭 등) 후에만 열어야 합니다
- * - **모달 없이도 작업 가능한 경우** - 불필요하게 모달을 사용하지 마세요
- * - **모바일에서 큰 모달(lg) 사용 지양** - 화면을 거의 다 차지하므로 페이지 이동 권장
- *
- * ## Accessibility
- *
- * 이 컴포넌트는 WAI-ARIA Dialog 패턴을 따릅니다:
- *
- * - **키보드 내비게이션**:
- *   - `Esc`: 모달 닫기
- *   - `Tab`: 모달 내부 포커스 순환 (모달 외부로 나가지 않음)
- *   - 모달이 열리면 첫 번째 포커스 가능한 요소로 자동 포커스
- *
- * - **스크린 리더**:
- *   - `role="dialog"`: 대화상자임을 인식
- *   - `aria-labelledby`: title이 모달의 레이블로 연결됨
- *   - `aria-describedby`: children 콘텐츠가 설명으로 연결됨
- *
- * - **포커스 트랩**: 모달이 열려있는 동안 포커스가 모달 내부에서만 순환합니다
- * - **배경 스크롤 방지**: 모달이 열리면 body 스크롤이 자동으로 비활성화됩니다
- *
- * ## Example
- *
- * {@tool snippet}
- * 기본적인 확인 모달 예시:
- *
- * ```tsx
- * function DeleteConfirmDialog() {
- *   const [open, setOpen] = useState(false);
- *
- *   return (
- *     <>
- *       <Button onClick={() => setOpen(true)}>삭제</Button>
- *       <Modal
- *         open={open}
- *         onOpenChange={setOpen}
- *         title="항목 삭제"
- *         footer={
- *           <div className="flex gap-2">
- *             <Button onClick={() => setOpen(false)} variant="outline">
- *               취소
- *             </Button>
- *             <Button onClick={handleDelete} variant="destructive">
- *               삭제하기
- *             </Button>
- *           </div>
- *         }
- *       >
- *         이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
- *       </Modal>
- *     </>
- *   );
- * }
- * ```
- * {@end-tool}
- *
- * {@tool snippet}
- * 성공 아이콘이 포함된 모달 예시:
- *
- * ```tsx
- * <Modal
- *   open={open}
- *   onOpenChange={setOpen}
- *   icon={<CheckCircle className="w-12 h-12 text-green-500" />}
- *   title="저장 완료"
- *   footer={
- *     <Button onClick={() => setOpen(false)} className="w-full">
- *       확인
- *     </Button>
- *   }
- * >
- *   데이터가 성공적으로 저장되었습니다.
- * </Modal>
- * ```
- * {@end-tool}
- *
- * {@tool snippet}
- * 큰 크기의 폼 모달 예시:
- *
- * ```tsx
- * <Modal
- *   open={open}
- *   onOpenChange={setOpen}
- *   title="새 사용자 추가"
- *   size="lg"
- *   footer={
- *     <div className="flex justify-end gap-2">
- *       <Button variant="outline" onClick={() => setOpen(false)}>
- *         취소
- *       </Button>
- *       <Button onClick={handleSubmit}>저장</Button>
- *     </div>
- *   }
- * >
- *   <form className="space-y-4">
- *     <TextInput label="이름" required />
- *     <TextInput label="이메일" type="email" required />
- *     <TextInput label="전화번호" />
- *   </form>
- * </Modal>
- * ```
- * {@end-tool}
- *
- * See also:
- *
- * - {@link ConfirmModal}, 간단한 확인 모달을 위한 사전 구성된 변형
- * - {@link SuccessModal}, 성공 메시지를 표시하는 모달
- * - {@link ErrorModal}, 에러 메시지를 표시하는 모달
- * - {@link WarningModal}, 경고 메시지를 표시하는 모달
- * - {@link DeleteModal}, 삭제 확인을 위한 모달
- * - {@link Toast}, 긴급하지 않은 알림을 위한 컴포넌트
- * - {@link Popover}, 비필수 부가 정보를 표시하는 컴포넌트
- */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,31 +0,0 @@
-import { default as React } from 'react';
-
-export interface SuccessModalProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title?: string;
-    message: React.ReactNode;
-    confirmText?: string;
-    onConfirm?: () => void;
-    className?: string;
-}
-/**
- * 요청한 작업이 성공적으로 완료되었음을 축하하거나 알리는 모달입니다.
- *
- * {@link SuccessModal}은 초록색 체크 아이콘을 통해 긍정적인 결과를 전달합니다.
- * 단순한 Toast 알림보다 더 강조된 확인이 필요할 때 사용됩니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **중요 작업 완료**: 회원가입 완료, 대규모 데이터 처리 완료 등
- * - **영구적 저장 완료**: 중요한 설정이나 게시글이 성공적으로 서버에 저장되었을 때
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- *
- * - **긍정적인 피드백**: "처리가 완료되었습니다" 보다는 "성공적으로 저장되었습니다"와 같이 명확한 피드백을 제공하세요.
- * - **후속 조치 안내**: 필요한 경우 다음 단계로 무엇을 해야 하는지(예: 리스트로 이동 등) 메시지에 포함하세요.
- */
-export declare const SuccessModal: React.ForwardRefExoticComponent<SuccessModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,35 +0,0 @@
-import { default as React } from 'react';
-
-export interface WarningModalProps {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    title?: string;
-    message: React.ReactNode;
-    confirmText?: string;
-    onConfirm?: () => void;
-    cancelText?: string;
-    onCancel?: () => void;
-    className?: string;
-}
-/**
- * 잠재적인 문제를 경고하거나 주의가 필요한 작업을 수행하기 전 사용자의 동의를 구하는 모달입니다.
- *
- * {@link WarningModal}은 주황색 경고 아이콘을 통해 주의를 환기시킵니다.
- * 완전한 파괴적 액션(삭제)은 아니지만, 데이터 변경이나 시스템 설정 변경 등
- * 신중함이 필요한 상황에서 사용됩니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **데이터 변경**: 기존 정보를 대량으로 수정하거나 업데이트할 때
- * - **민감한 설정 변경**: 시스템 동작에 영향을 줄 수 있는 설정을 변경할 때
- * - **동작 확인**: 예기치 않은 부작용이 발생할 수 있는 기능을 실행할 때
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- *
- * - **위험성 명시**: 이 작업을 실행했을 때 어떤 결과가 초래될 수 있는지 명확히 설명하세요.
- * - **취소 옵션 제공**: 사용자가 마음을 바꿀 수 있도록 명확한 취소 버튼을 함께 배치하세요.
- */
-export declare const WarningModal: React.ForwardRefExoticComponent<WarningModalProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,12 +0,0 @@
-export { Modal } from './Modal';
-export type { ModalProps } from './Modal';
-export { ConfirmModal } from './ConfirmModal';
-export type { ConfirmModalProps } from './ConfirmModal';
-export { DeleteModal } from './DeleteModal';
-export type { DeleteModalProps } from './DeleteModal';
-export { ErrorModal } from './ErrorModal';
-export type { ErrorModalProps } from './ErrorModal';
-export { WarningModal } from './WarningModal';
-export type { WarningModalProps } from './WarningModal';
-export { SuccessModal } from './SuccessModal';
-export type { SuccessModalProps } from './SuccessModal';

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

@@ -1,106 +0,0 @@
-import { default as React } from 'react';
-
-export interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
-    siblingCount?: number;
-    showPrevNext?: boolean;
-    disabled?: boolean;
-    className?: string;
-}
-/**
- * 사용자가 여러 페이지로 나뉜 콘텐츠를 탐색할 수 있게 하는 페이지네이션 컴포넌트입니다.
- *
- * {@link Pagination}은 이전/다음 버튼과 페이지 번호를 제공하며,
- * 많은 페이지가 있을 때 중간 페이지를 생략(ellipsis)하여 UI를 깔끔하게 유지합니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **긴 목록**: 많은 항목을 여러 페이지로 나누어 표시할 때
- * - **검색 결과**: 검색 결과가 여러 페이지에 걸쳐 있을 때
- * - **데이터 테이블**: 대량의 데이터를 페이지 단위로 보여줄 때
- * - **명확한 페이지 구분**: 사용자가 특정 페이지로 직접 이동할 필요가 있을 때
- *
- * **사용하지 말아야 하는 경우:**
- * - **무한 스크롤**: 지속적으로 콘텐츠가 로드되는 피드 형태가 더 적절한 경우
- * - **적은 항목**: 한 페이지에 모두 표시할 수 있는 소량의 데이터
- * - **단계별 프로세스**: 순차적인 단계를 나타낼 때는 Stepper 컴포넌트 사용
- *
- * ## Layout behavior
- *
- * - **Responsive**: 모바일에서는 siblingCount를 줄여 더 적은 페이지 번호를 표시하는 것을 권장
- * - **Centered**: 일반적으로 페이지 하단 중앙에 배치
- * - **Ellipsis**: 많은 페이지가 있을 때 자동으로 중간 페이지를 생략 (...으로 표시)
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- *
- * - **적절한 페이지당 항목 수**: 10-50개 사이가 적절 (콘텐츠 유형에 따라 조정)
- * - **현재 페이지 명확히 표시**: 활성 페이지는 시각적으로 구분되어야 함
- * - **충분한 클릭 영역**: 모바일에서도 쉽게 탭할 수 있도록 버튼 크기 유지
- * - **첫/마지막 페이지 비활성화**: 이동할 수 없는 경우 버튼을 비활성화하여 명확히 표시
- *
- * ### 🚫 Don't (주의/금지 사항)
- *
- * - **너무 많은 페이지 번호**: siblingCount를 너무 크게 설정하지 마세요
- * - **불명확한 상태**: 로딩 중이거나 에러 상태일 때도 적절한 피드백 제공 필요
- *
- * ## Accessibility
- *
- * - **ARIA Labels**: 각 버튼에 명확한 레이블 제공 (aria-label, aria-current)
- * - **Keyboard Navigation**: Tab 키로 버튼 간 이동, Enter/Space로 페이지 변경
- * - **Screen Reader**: 현재 페이지와 전체 페이지 수를 읽어주도록 설정
- * - **Disabled State**: 비활성화된 버튼은 포커스할 수 없도록 처리
- *
- * ## Example
- *
- * {@tool snippet}
- * 기본적인 페이지네이션 사용:
- *
- * ```tsx
- * const [currentPage, setCurrentPage] = useState(1);
- * const totalPages = 10;
- *
- * <Pagination
- *   currentPage={currentPage}
- *   totalPages={totalPages}
- *   onPageChange={setCurrentPage}
- * />
- * ```
- * {@end-tool}
- *
- * {@tool snippet}
- * 많은 페이지와 커스텀 siblingCount:
- *
- * ```tsx
- * <Pagination
- *   currentPage={25}
- *   totalPages={100}
- *   siblingCount={2}
- *   onPageChange={handlePageChange}
- * />
- * // 결과: 1 ... 23 24 25 26 27 ... 100
- * ```
- * {@end-tool}
- *
- * {@tool snippet}
- * 비활성화 상태:
- *
- * ```tsx
- * <Pagination
- *   currentPage={5}
- *   totalPages={10}
- *   onPageChange={handlePageChange}
- *   disabled={isLoading}
- * />
- * ```
- * {@end-tool}
- *
- * See also:
- *
- * - {@link Button}, 단일 버튼 컴포넌트
- */
-export declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1,2 +0,0 @@
-export { Pagination } from './Pagination';
-export type { PaginationProps } from './Pagination';

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

@@ -1,75 +0,0 @@
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-/**
- * 특정 요소 근처에 부가적인 정보나 컨트롤을 표시하는 플로팅 컴포넌트입니다.
- *
- * {@link Popover}는 사용자가 버튼이나 아이콘을 클릭했을 때 나타나며,
- * 기존 화면의 맥락을 유지하면서 추가적인 작업(메뉴 선택, 상세 정보 확인 등)을 수행할 수 있게 합니다.
- *
- * Radix UI의 Popover 컴포넌트를 기반으로 구현되어 포커스 트랩, 키보드 내비게이션 등이
- * 자동으로 처리됩니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **맥락 기반 메뉴**: '더 보기' 버튼 클릭 시 나타나는 관리 기능(수정, 삭제 등)
- * - **상세 정보 표시**: 아이콘 클릭 시 해당 항목에 대한 간단한 설명이나 데이터를 보여줄 때
- * - **간단한 설정**: 필터 옵션이나 정렬 기준을 선택할 때
- *
- * **사용하지 말아야 하는 경우:**
- * - **중요한 의사 결정**: 사용자의 주의를 완전히 집중시켜야 하는 작업은 `Modal`을 사용하세요.
- * - **단순 힌트**: 마우스 호버 시에만 짧게 보여주는 정보는 Tooltip을 사용하세요.
- * - **입력 폼**: 복잡한 입력이 필요한 경우 모달이나 별도 페이지가 더 적합할 수 있습니다.
- *
- * ## Layout behavior
- *
- * - **Anchor Positioning**: 트리거(버튼 등)를 기준으로 상하좌우 적절한 위치에 자동으로 배치됩니다.
- * - **Overlay**: 다른 UI 요소들 위에 겹쳐서 나타나며, 배경(Overlay)을 생성하지 않아 뒤쪽 화면을 볼 수 있습니다.
- * - **Size**: 콘텐츠의 양에 따라 크기가 결정되지만, `min-w-[200px]`의 최소 너비를 가집니다.
- *
- * ## Usage guidelines
- *
- * ### ✅ Do (권장 사항)
- *
- * - **명확한 트리거**: 사용자가 무엇을 클릭하면 팝오버가 열릴지 명확히 인지할 수 있는 버튼이나 아이콘을 사용하세요.
- * - **적절한 배치**: `align` 속성을 조절하여 팝오버가 화면 밖으로 나가지 않도록 관리하세요. (기본값: 'end')
- *
- * ### 🚫 Don't (주의/금지 사항)
- *
- * - **너무 많은 정보**: 팝오버는 빠르고 간단한 상호작용을 위한 것입니다. 너무 많은 내용을 담지 마세요.
- * - **비정상적인 닫기**: 팝오버 외부를 클릭하거나 `Esc`를 누르면 자연스럽게 닫히도록 기본 동작을 유지하세요.
- *
- * ## Accessibility
- *
- * - **Keyboard Interaction**: `Space`나 `Enter`로 열고, `Esc`로 닫으며, 팝오버 내부에서 `Tab` 키로 내비게이션이 가능합니다.
- * - **Aria Attributes**: `aria-expanded`, `aria-controls` 등의 속성이 자동으로 부여됩니다.
- *
- * ## Example
- *
- * {@tool snippet}
- * 버튼 클릭 시 상세 정보를 보여주는 팝오버:
- *
- * ```tsx
- * <Popover>
- *   <PopoverTrigger asChild>
- *     <Button variant="ghost">상세 정보</Button>
- *   </PopoverTrigger>
- *   <PopoverContent>
- *     <div className="p-4">
- *       <h4 className="font-bold">계정 상태</h4>
- *       <p className="text-sm">현재 활성화된 계정입니다.</p>
- *     </div>
- *   </PopoverContent>
- * </Popover>
- * ```
- * {@end-tool}
- *
- * See also:
- *
- * - {@link Modal}, 더 중요하거나 복잡한 상호작용이 필요한 경우
- * - {@link Dropdown}, 정해진 리스트에서 값을 선택하는 것이 주 목적인 경우
- * - {@link PopoverMenuItem}, 팝오버 내부의 메뉴 항목을 구성할 때
- */
-declare const Popover: import('react').FC<PopoverPrimitive.PopoverProps>;
-declare const PopoverTrigger: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
-declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export { Popover, PopoverTrigger, PopoverContent };

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

@@ -1,36 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-import { ButtonHTMLAttributes } from 'react';
-
-declare const popoverMenuItemVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface PopoverMenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof popoverMenuItemVariants> {
-    icon?: React.ReactNode;
-}
-/**
- * Popover 내부에 배치되는 개별 액션 항목 컴포넌트입니다.
- *
- * {@link PopoverMenuItem}은 아이콘과 텍스트가 결합된 형태의 메뉴 버튼으로,
- * 일관된 패딩, 폰트, 호버 효과를 제공합니다.
- *
- * ## Example
- *
- * ```tsx
- * <PopoverContent>
- *   <div className="flex flex-col gap-1">
- *     <PopoverMenuItem icon={<EditIcon />} onClick={handleEdit}>
- *       수정하기
- *     </PopoverMenuItem>
- *     <PopoverMenuItem
- *       variant="destructive"
- *       icon={<TrashIcon />}
- *       onClick={handleDelete}
- *     >
- *       삭제하기
- *     </PopoverMenuItem>
- *   </div>
- * </PopoverContent>
- * ```
- */
-declare const PopoverMenuItem: import('react').ForwardRefExoticComponent<PopoverMenuItemProps & import('react').RefAttributes<HTMLButtonElement>>;
-export { PopoverMenuItem, popoverMenuItemVariants };

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

@@ -1,3 +0,0 @@
-export { Popover, PopoverTrigger, PopoverContent } from './Popover';
-export { PopoverMenuItem, popoverMenuItemVariants } from './PopoverMenuItem';
-export type { PopoverMenuItemProps } from './PopoverMenuItem';

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

@@ -1,84 +0,0 @@
-import { default as React } from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-import * as RadioGroupPrimitives from "@radix-ui/react-radio-group";
-/**
- * 상호 배타적인 옵션 목록 중 단 하나만을 선택해야 할 때 사용하는 컴포넌트입니다.
- *
- * {@link RadioGroup}은 여러 개의 {@link RadioGroupItem}을 포함하는 컨테이너이며,
- * 한 번에 하나의 아이템만 선택될 수 있도록 상태를 관리합니다.
- *
- * Radix UI의 Radio Group 컴포넌트를 기반으로 구현되어 방향키를 이용한 내비게이션 등
- * 표준 라디오 그룹 동작을 지원합니다.
- *
- * ## When (언제 사용해야 하는가)
- *
- * **사용해야 하는 경우:**
- * - **단일 선택**: 성별 선택, 배송 방법 선택 등 여러 옵션 중 하나만 골라야 할 때
- * - **옵션 노출**: 모든 선택지가 사용자에게 한눈에 보여야 할 때 (옵션이 5개 이하인 경우 권장)
- *
- * **사용하지 말아야 하는 경우:**
- * - **다중 선택**: 여러 개를 동시에 선택할 수 있어야 하는 경우 `Checkbox`를 사용하세요.
- * - **옵션이 많은 경우**: 선택지가 5-6개를 넘어간다면 화면 공간을 위해 `Dropdown`을 사용하는 것이 좋습니다.
- * - **독립적 On/Off**: 단순히 하나의 항목을 켜고 끄는 것이라면 `Checkbox`나 `Switch`가 더 적절합니다.
- *
- * ## Layout behavior
- *
- * - **asChild**: `asChild` 속성을 사용하면 기본 렌더링 요소 대신 자식 요소를 렌더링하고 속성을 병합합니다.
- *   커스텀 컴포넌트나 다른 라이브러리와 연동할 때 유용합니다.
- *
- * ## Accessibility
- *
- * - **Keyboard Navigation**: `Tab` 키로 그룹에 진입한 후, 화살표 키(`Up`, `Down`, `Left`, `Right`)를 사용하여 옵션 간 이동 및 선택이 가능합니다.
- * - **Roles**: `role="radiogroup"` 및 `role="radio"` 속성이 자동으로 부여됩니다.
- *
- * ## Example
- *
- * {@tool snippet}
- * 기본적인 라디오 그룹 사용 예시:
- *
- * ```tsx
- * <RadioGroup defaultValue="apple" onValueChange={(val) => console.log(val)}>
- *   <div className="flex items-center gap-2">
- *     <RadioGroupItem value="apple" id="apple" />
- *     <label htmlFor="apple">사과</label>
- *   </div>
- *   <div className="flex items-center gap-2">
- *     <RadioGroupItem value="banana" id="banana" />
- *     <label htmlFor="banana">바나나</label>
- *   </div>
- * </RadioGroup>
- * ```
- * {@end-tool}
- *
- * {@tool snippet}
- * `asChild`를 사용한 커스텀 렌더링 예시:
- *
- * ```tsx
- * <RadioGroup asChild>
- *   <section className="my-custom-group">
- *     <RadioGroupItem asChild value="custom">
- *       <button type="button" className="custom-radio-trigger">
- *         커스텀 라디오
- *       </button>
- *     </RadioGroupItem>
- *   </section>
- * </RadioGroup>
- * ```
- * {@end-tool}
- *
- * See also:
- *
- * - {@link Checkbox}, 다중 선택이 필요한 경우
- * - {@link Dropdown}, 옵션이 많아 리스트로 숨겨야 하는 경우
- * - {@link Switch}, 단순 활성화/비활성화를 토글할 때
- */
-declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitives.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-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 { RadioGroup, RadioGroupItem };

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

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