@1d1s/design-system 0.1.17 → 0.2.0

package/README.md

@@ -4,7 +4,7 @@
 
 [Storybook 배포 링크](https://your-storybook-url.vercel.app)
 
-> **Note:** 최근 Pagination, ToggleCheck, CheckList, Checkbox, Streak 컴포넌트가 추가되었습니다.
+> **Note:** (v0.1.17) 최근 Pagination, ToggleCheck, CheckList, Checkbox, Streak 컴포넌트가 추가되었습니다.
 
 ## ✨ 특징
 

package/dist/components/AppHeader/AppHeader.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AppHeaderNavItem {
+    key: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface AppHeaderProps {
+    brandName?: string;
+    logo?: React.ReactNode;
+    navItems?: AppHeaderNavItem[];
+    activeKey?: string;
+    profileImage?: string;
+    className?: string;
+    onLogoClick?(): void;
+    onNavChange?(key: string): void;
+    onSearchClick?(): void;
+    onNotificationClick?(): void;
+    onProfileClick?(): void;
+}
+/**
+ * AppHeader
+ * 로고, 주요 네비게이션, 우측 액션 아이콘을 포함한 상단 헤더 컴포넌트.
+ */
+export declare function AppHeader({ brandName, logo, navItems, activeKey, profileImage, className, onLogoClick, onNavChange, onSearchClick, onNotificationClick, onProfileClick, }: AppHeaderProps): React.ReactElement;

package/dist/components/AppHeader/AppHeader.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { AppHeader } from './AppHeader';
+declare const meta: Meta<typeof AppHeader>;
+export default meta;
+type Story = StoryObj<typeof AppHeader>;
+export declare const Default: Story;

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

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

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 declare const customButtonVariants: (props?: ({
-    variant?: "input" | "disabled" | "default" | "warning" | "loading" | "outline" | null | undefined;
-    size?: "lg" | "md" | "sm" | null | undefined;
+    variant?: "default" | "outlined" | "secondary" | "ghost" | null | undefined;
+    size?: "small" | "medium" | "large" | "icon" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof customButtonVariants> {
     asChild?: boolean;
@@ -9,12 +9,12 @@ export interface ButtonProps extends React.ComponentProps<"button">, VariantProp
 /**
  * Button
  * 커스텀 버튼 컴포넌트
- * @param variant 버튼스타일 : default, disabled, warning, loading, outline, input
- * @param size 버튼 크기 : lg, md, sm
+ * @param variant 버튼스타일 : default, outlined, secondary, ghost
+ * @param size 버튼 크기 : small, medium, large, icon
  *
  * @example 기본 버튼
  * ```tsx
- * <Button variant="default" size="lg">Large Button</Button>
+ * <Button variant="default" size="large">Large Button</Button>
  * ```
  */
 export declare function Button({ className, variant, size, asChild, disabled, ...props }: ButtonProps): React.ReactElement;

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

@@ -6,6 +6,8 @@ type Story = StoryObj<typeof Button>;
 export declare const Large: Story;
 export declare const Medium: Story;
 export declare const Small: Story;
-export declare const Outline: Story;
-export declare const Warning: Story;
+export declare const Outlined: Story;
+export declare const Secondary: Story;
+export declare const Ghost: Story;
 export declare const Disabled: Story;
+export declare const Icon: Story;

package/dist/components/ChallengeCard/ChallengeCard.d.ts

@@ -1,38 +1,21 @@
-interface ChallengeProps {
+import { ReactNode } from 'react';
+export interface ChallengeCardProps {
     challengeTitle: string;
     challengeType: string;
+    challengeCategory?: string;
+    challengeIcon?: ReactNode;
+    imageUrl?: string;
     currentUserCount: number;
     maxUserCount: number;
     startDate: string;
     endDate: string;
     isOngoing: boolean;
+    isEnded?: boolean;
     className?: string;
     onClick?(): void;
 }
 /**
  * ChallengeCard
- * 챌린지 카드 컴포넌트 - 제목, 유형, 참여자 수, 기간, 상태(진행중/모집중) 표시
- *
- * @param challengeTitle 챌린지 이름
- * @param challengeType 챌린지 유형
- * @param currentUserCount 현재 참여자 수
- * @param maxUserCount 최대 참여자 수
- * @param startDate 시작일 (YYYY-MM-DD)
- * @param endDate 종료일 (YYYY-MM-DD)
- * @param isOngoing 챌린지 진행 상태 (true: 진행중, false: 모집중)
- *
- * @example 기본 사용 예
- * ```tsx
- * <ChallengeCard
- *   challengeTitle="챌린지 제목"
- *   challengeType="고정목표형"
- *   currentUserCount={12}
- *   maxUserCount={20}
- *   startDate="2023-10-01"
- *   endDate="2023-10-31"
- *   isOngoing={true}
- * />
- * ```
+ * 챌린지 카드 컴포넌트 - 제목, 유형, 참여자 수, 기간, 상태(진행중/모집중/종료됨) 표시
  */
-export declare function ChallengeCard({ challengeTitle, challengeType, currentUserCount, maxUserCount, startDate, endDate, isOngoing, className, onClick, }: ChallengeProps): React.ReactElement;
-export {};
+export declare function ChallengeCard({ challengeTitle, challengeType, challengeCategory, imageUrl, currentUserCount, maxUserCount, startDate, endDate, isOngoing, isEnded, className, onClick, }: ChallengeCardProps): React.ReactElement;

package/dist/components/ChallengeCard/ChallengeCard.stories.d.ts

@@ -5,3 +5,6 @@ export default meta;
 type Story = StoryObj<typeof ChallengeCard>;
 export declare const Default: Story;
 export declare const Recruiting: Story;
+export declare const Ended: Story;
+export declare const Grid3x2: Story;
+export declare const ChallengeIcons: Story;

package/dist/components/CheckContainer/CheckContainer.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface CheckContainerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?(checked: boolean): void;
+    showCheckIndicator?: boolean;
+    width?: number | string;
+    height?: number | string;
+}
+/**
+ * CheckContainer
+ * 선택 가능한 카드형 컨테이너. 우측 상단 체크 인디케이터 표시 여부를 제어할 수 있습니다.
+ */
+export declare function CheckContainer({ label, icon, children, checked, defaultChecked, onCheckedChange, showCheckIndicator, width, height, className, disabled, onClick, style, "aria-label": ariaLabel, ...props }: CheckContainerProps): React.ReactElement;

package/dist/components/CheckContainer/CheckContainer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CheckContainer } from './CheckContainer';
+declare const meta: Meta<typeof CheckContainer>;
+export default meta;
+type Story = StoryObj<typeof CheckContainer>;
+export declare const WithIndicator: Story;
+export declare const WithoutIndicator: Story;
+export declare const CustomSize: Story;
+export declare const WithCustomContent: Story;

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

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

package/dist/components/CheckList/CheckList.d.ts

@@ -18,7 +18,7 @@ export interface CheckListProps {
 }
 /**
  * CheckList
- * 여러 개의 ToggleCheck를 리스트 형태로 보여주고 다중 선택을 관리하는 컴포넌트
+ * 여러 개의 Checkbox를 리스트 형태로 보여주고 다중 선택을 관리하는 컴포넌트
  *
  * @example
  * ```tsx

package/dist/components/CircularProgress/CircularProgress.d.ts

@@ -1,13 +1,11 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const circularProgressVariants: (props?: ({
-    size?: "lg" | "md" | "sm" | "xl" | null | undefined;
-    strokeWidthVariant?: "lg" | "md" | "sm" | "xl" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CircularProgressVariants = VariantProps<typeof circularProgressVariants>;
 interface CircularProgressProps extends CircularProgressVariants {
     value: number;
-    color?: 'blue' | 'green' | 'red';
     showPercentage?: boolean;
     className?: string;
 }
@@ -16,15 +14,14 @@ interface CircularProgressProps extends CircularProgressVariants {
  * 원형 진행률 표시 컴포넌트
  *
  * @param value 진행률 (0~100)
- * @param size 크기 (sm, md, lg, xl)
- * @param color 색상 (red, blue, green)
+ * @param size 크기 (sm, lg)
  * @param showPercentage 퍼센트 표시 여부
  * @param className 추가 클래스 이름
  *
  * @example 기본 사용
  * ```tsx
- * <CircularProgress value={75} size="md" color="red" showPercentage />
+ * <CircularProgress value={75} size="sm" showPercentage />
  * ```
  */
-export declare function CircularProgress({ value, size, color, showPercentage, className, }: CircularProgressProps): React.ReactElement;
+export declare function CircularProgress({ value, size, showPercentage, className, }: CircularProgressProps): React.ReactElement;
 export {};

package/dist/components/CircularProgress/CircularProgress.stories.d.ts

@@ -4,5 +4,5 @@ declare const meta: Meta<typeof CircularProgress>;
 export default meta;
 type Story = StoryObj<typeof CircularProgress>;
 export declare const Default: Story;
-export declare const Blue: Story;
-export declare const Green: Story;
+export declare const Large: Story;
+export declare const ExtraLarge: Story;

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

@@ -1,25 +1,26 @@
+import { default as React } from 'react';
+import { DateRange } from 'react-day-picker';
+interface BasePickerProps {
+    className?: string;
+    placeholder?: string;
+    disableClickPropagation?: boolean;
+}
+export interface DatePickerProps extends BasePickerProps {
+    value: Date | undefined;
+    onChange(date: Date | undefined): void;
+}
+export interface RangeDatePickerProps extends BasePickerProps {
+    value: DateRange | undefined;
+    onChange(range: DateRange | undefined): void;
+}
 /**
  * DatePicker
- * 챌린지 카드 컴포넌트 - 제목, 유형, 참여자 수, 기간, 상태(진행중/모집중) 표시
- *
- * @param value hook에서 관리하는 날짜 값
- * @param onChange 날짜 선택 변경 핸들러
- *
- * @example 기본 사용 예
- * ```tsx
- * <FormItem>
- *  <FormField
- *    control={control}
- *    name="startDate"
- *    render={({ field }) => (
- *      <DatePicker value={field.value} onChange={field.onChange} />
- *    )}
- *  />
- * </FormItem>
- * ```
+ * 단일 날짜를 선택하는 시안형 Date Picker 컴포넌트.
  */
-export declare function DatePicker({ value, onChange, disableClickPropagation, }: {
-    value: Date | undefined;
-    onChange(date: Date | undefined): void;
-    disableClickPropagation?: boolean;
-}): React.ReactElement;
+export declare function DatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: DatePickerProps): React.ReactElement;
+/**
+ * RangeDatePicker
+ * 시작일/종료일 범위를 선택하는 시안형 Date Range Picker 컴포넌트.
+ */
+export declare function RangeDatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: RangeDatePickerProps): React.ReactElement;
+export {};

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

@@ -3,4 +3,5 @@ import { DatePicker } from './DatePicker';
 declare const meta: Meta<typeof DatePicker>;
 export default meta;
 type Story = StoryObj<typeof DatePicker>;
-export declare const Default: Story;
+export declare const Single: Story;
+export declare const Range: Story;

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
+export declare const Small: Story;

package/dist/components/Icons/ChallengeDumbbell.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeDumbbell: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ChallengeFlag.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeFlag: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ChallengeFlame.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeFlame: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ChallengeLaptop.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeLaptop: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ChallengeTarget.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeTarget: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icons/ChallengeTrophy.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const ChallengeTrophy: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,11 @@
 export * from './AddCircle';
 export * from './Calendar';
+export * from './ChallengeDumbbell';
+export * from './ChallengeFlag';
+export * from './ChallengeFlame';
+export * from './ChallengeLaptop';
+export * from './ChallengeTarget';
+export * from './ChallengeTrophy';
 export * from './Check';
 export * from './Chevron';
 export * from './ChevronDown';

package/dist/components/RightSidebar/RightSidebar.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+type ChallengeTone = "blue" | "green" | "orange";
+export interface RightSidebarChallenge {
+    id: string;
+    title: string;
+    progress: number;
+    hasDeadline?: boolean;
+    tone?: ChallengeTone;
+}
+export interface RightSidebarProps {
+    userName: string;
+    userHandle: string;
+    userImage?: string;
+    streakDays: number;
+    fixed?: boolean;
+    className?: string;
+    diaryButtonLabel?: string;
+    myPageButtonLabel?: string;
+    settingButtonLabel?: string;
+    challengeTitle?: string;
+    challenges?: RightSidebarChallenge[];
+    onCollapseClick?(): void;
+    onOpenSettings?(): void;
+    onWriteDiary?(): void;
+    onGoMyPage?(): void;
+}
+export declare function RightSidebar({ userName, userHandle, userImage, streakDays, fixed, className, diaryButtonLabel, myPageButtonLabel, settingButtonLabel, challengeTitle, challenges, onCollapseClick, onOpenSettings, onWriteDiary, onGoMyPage, }: RightSidebarProps): React.ReactElement;
+export {};

package/dist/components/RightSidebar/RightSidebar.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { RightSidebar } from './RightSidebar';
+declare const meta: Meta<typeof RightSidebar>;
+export default meta;
+type Story = StoryObj<typeof RightSidebar>;
+export declare const Default: Story;

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

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

package/dist/components/ScheduleCalendar/ScheduleCalendar.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+type DayTone = "default" | "strong" | "accent" | "muted";
+type BarTone = "main" | "soft";
+export interface ScheduleCalendarBar {
+    width?: number | string;
+    tone?: BarTone;
+}
+export interface ScheduleCalendarCell {
+    id?: string;
+    day?: React.ReactNode;
+    dayTone?: DayTone;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    bars?: ScheduleCalendarBar[];
+    highlighted?: boolean;
+    muted?: boolean;
+    colSpan?: number;
+    content?: React.ReactNode;
+}
+export interface ScheduleCalendarProps {
+    rows: ScheduleCalendarCell[][];
+    weekLabels?: string[];
+    cellMinHeight?: number;
+    className?: string;
+}
+/**
+ * ScheduleCalendar
+ * 주 단위 표 형태로 일정을 보여주는 커스텀 캘린더 컴포넌트.
+ */
+export declare function ScheduleCalendar({ rows, weekLabels, cellMinHeight, className, }: ScheduleCalendarProps): React.ReactElement;
+export {};

package/dist/components/ScheduleCalendar/ScheduleCalendar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ScheduleCalendar } from './ScheduleCalendar';
+declare const meta: Meta<typeof ScheduleCalendar>;
+export default meta;
+type Story = StoryObj<typeof ScheduleCalendar>;
+export declare const OneMonth: Story;
+export declare const TwoWeeks: Story;
+export declare const ThreeWeeks: Story;

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

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

package/dist/components/StatContainer/StatContainer.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface StatContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon: React.ReactNode;
+    title: React.ReactNode;
+    value: React.ReactNode;
+    unit: React.ReactNode;
+    iconClassName?: string;
+}
+/**
+ * StatContainer
+ * 아이콘, 제목, 데이터, 단위를 표시하는 정보 카드 컴포넌트
+ */
+export declare function StatContainer({ icon, title, value, unit, className, iconClassName, ...props }: StatContainerProps): React.ReactElement;

package/dist/components/StatContainer/StatContainer.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StatContainer } from './StatContainer';
+declare const meta: Meta<typeof StatContainer>;
+export default meta;
+type Story = StoryObj<typeof StatContainer>;
+export declare const Default: Story;
+export declare const DashboardGrid: Story;

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

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

package/dist/components/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface StepIndicatorItem {
+    id?: string;
+    label: React.ReactNode;
+}
+export interface StepIndicatorProps {
+    steps: StepIndicatorItem[];
+    /** 현재 단계 (1부터 시작) */
+    currentStep: number;
+    className?: string;
+}
+/**
+ * StepIndicator
+ * 단계 진행 상태를 가로 라인과 원형 포인트로 표시하는 컴포넌트.
+ */
+export declare function StepIndicator({ steps, currentStep, className, }: StepIndicatorProps): React.ReactElement;

package/dist/components/StepIndicator/StepIndicator.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { StepIndicator } from './StepIndicator';
+declare const meta: Meta<typeof StepIndicator>;
+export default meta;
+type Story = StoryObj<typeof StepIndicator>;
+export declare const Default: Story;
+export declare const Completed: Story;
+export declare const FirstStep: Story;

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

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

package/dist/components/Streak/Streak.d.ts

@@ -10,6 +10,8 @@ export interface StreakProps {
     data?: StreakData[];
     /** 각 날짜 박스의 크기 (픽셀) */
     size?: number;
+    /** 박스 사이 간격 (픽셀) */
+    gap?: number;
     /** 추가 클래스 */
     className?: string;
 }
@@ -18,4 +20,4 @@ export interface StreakProps {
  * 활동 기록을 깃허브 잔디(Contribution Graph) 스타일로 보여주는 컴포넌트.
  * 7행 그리드 구조로 요일별로 쌓이며 가로로 데이터가 추가됩니다.
  */
-export declare function Streak({ data, size, className, }: StreakProps): React.ReactElement;
+export declare function Streak({ data, size, gap, className, }: StreakProps): React.ReactElement;

package/dist/components/TextField/TextField.d.ts

@@ -1,11 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const textFieldVariants: (props?: ({
+declare const fieldVariants: (props?: ({
     variant?: "search" | "default" | null | undefined;
-    size?: "default" | null | undefined;
+    multiline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof textFieldVariants> {
-    label?: string;
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof fieldVariants> {
+    label?: React.ReactNode;
+    labelHint?: React.ReactNode;
     error?: string;
     multiline?: boolean;
     rows?: number;
@@ -13,37 +14,13 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 /**
  * TextField
- * 입력 필드 컴포넌트
- *
- * @param label 입력 필드 레이블 (선택적)
- * @param error 입력 필드 오류 메시지 (선택적)
- * @param variant 스타일 변형 (default | search)
- * @param multiline 다중 행 입력 여부 (textarea 렌더링)
- *
- * @example 기본 사용
- * ```tsx
- * <TextField
- *   label="레이블"
- *   placeholder="플레이스홀더"
- * />
- * ```
- *
- * @example 검색 필드
- * ```tsx
- * <TextField
- *   variant="search"
- *   placeholder="검색어 입력"
- * />
- * ```
- *
- * @example 다중 행 입력
- * ```tsx
- * <TextField
- *   multiline
- *   rows={4}
- *   placeholder="내용을 입력하세요"
- * />
- * ```
+ * 시안형 입력 필드 컴포넌트. `multiline` 사용 시 TextArea 스타일로 렌더링합니다.
  */
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export type TextAreaProps = Omit<TextFieldProps, 'multiline' | 'type'>;
+/**
+ * TextArea
+ * TextField의 multiline 전용 래퍼 컴포넌트.
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/TextField/TextField.stories.d.ts

@@ -3,7 +3,7 @@ import { TextField } from './TextField';
 declare const meta: Meta<typeof TextField>;
 export default meta;
 type Story = StoryObj<typeof TextField>;
-export declare const Default: Story;
-export declare const WithError: Story;
+export declare const InputOnly: Story;
+export declare const WithRequiredLabel: Story;
+export declare const DescriptionTextArea: Story;
 export declare const Search: Story;
-export declare const TextArea: Story;

package/dist/components/Toggle/Toggle.d.ts

@@ -1,19 +1,16 @@
+import { VariantProps } from 'class-variance-authority';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
-interface ToggleProps extends React.ComponentProps<typeof TogglePrimitive.Root> {
-    icon?: string;
+declare const toggleVariants: (props?: ({
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface ToggleProps extends React.ComponentProps<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
+    icon?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
 }
 /**
  * Toggle
- * 간단한 토글 스타일을 위한 컴포넌트 (텍스트 + 아이콘 구성)
- *
- * @param icon 선택적 아이콘 이모지 텍스트
- *
- * @example 기본 사용
- * ```tsx
- * <Toggle icon="🔥">인기</Toggle>
- * ```
+ * 카테고리 선택형 토글 버튼 컴포넌트. `shape`로 둥근/사각 스타일을 선택할 수 있습니다.
  */
-export declare function Toggle({ icon, children, className, ...props }: ToggleProps): React.ReactElement;
+export declare function Toggle({ icon, shape, children, className, ...props }: ToggleProps): React.ReactElement;
 export {};

package/dist/components/Toggle/Toggle.stories.d.ts

@@ -3,5 +3,8 @@ import { Toggle } from './Toggle';
 declare const meta: Meta<typeof Toggle>;
 export default meta;
 type Story = StoryObj<typeof Toggle>;
-export declare const Default: Story;
-export declare const WithIcon: Story;
+export declare const RoundedSelected: Story;
+export declare const SquareSelected: Story;
+export declare const RowPreview: Story;
+export declare const RoundedRowPreview: Story;
+export declare const CustomSizeByClassName: Story;