@1d1s/design-system 0.1.17 → 0.2.1

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;
+    showProfile?: boolean;
+    profileImage?: string;
+    className?: string;
+    onLogoClick?(): void;
+    onNavChange?(key: string): void;
+    onNotificationClick?(): void;
+    onProfileClick?(): void;
+}
+/**
+ * AppHeader
+ * 로고, 주요 네비게이션, 우측 액션 아이콘을 포함한 상단 헤더 컴포넌트.
+ */
+export declare function AppHeader({ brandName, logo, navItems, activeKey, showProfile, profileImage, className, onLogoClick, onNavChange, onNotificationClick, onProfileClick, }: AppHeaderProps): React.ReactElement;

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

@@ -0,0 +1,7 @@
+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 WithProfile: Story;
+export declare const WithoutProfile: 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/Calendar/Calendar.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Calendar>;
 export default meta;
 type Story = StoryObj<typeof Calendar>;
 export declare const Default: Story;
+export declare const Range: 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/Check.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+declare const iconComponents: {
+    readonly AddCircle: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Calendar: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Check: ({ strokeWidth, ...props }: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Chevron: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly ChevronDown: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly ChevronLeft: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly ChevronRight: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly ChevronUp: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Close: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Dumbbell: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Endless: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Eye: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly EyeOff: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Flag: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Flame: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly HamburgerMenu: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Heart: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly HeartFilled: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Laptop: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Logo: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Minus: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly People: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Person: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Pin: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Plus: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Search: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Target: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Trophy: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export type IconName = keyof typeof iconComponents;
+export declare const ICON_NAMES: IconName[];
+export interface IconProps extends Omit<React.SVGProps<SVGSVGElement>, "name"> {
+    name: IconName;
+    size?: number | string;
+}
+/**
+ * Icon
+ * name 기반으로 프로젝트 아이콘을 렌더링하는 공통 아이콘 컴포넌트.
+ */
+export declare function Icon({ name, size, width, height, ...props }: IconProps): React.ReactElement;
+export {};

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

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

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

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

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

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

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

@@ -1,5 +1,12 @@
 export * from './AddCircle';
 export * from './Calendar';
+export * from './Dumbbell';
+export * from './Flag';
+export * from './Flame';
+export * from './Icon';
+export * from './Laptop';
+export * from './Target';
+export * from './Trophy';
 export * from './Check';
 export * from './Chevron';
 export * from './ChevronDown';

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    value: number;
+    label?: React.ReactNode;
+    showLabel?: boolean;
+    showValueText?: boolean;
+    valueText?: React.ReactNode;
+    infinite?: boolean;
+    thickness?: number;
+    fillColor?: string;
+    trackColor?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    trackClassName?: string;
+    fillClassName?: string;
+}
+/**
+ * ProgressBar
+ * 라벨/퍼센트 텍스트/두께/색상을 유연하게 제어할 수 있는 진행률 바 컴포넌트.
+ */
+export declare function ProgressBar({ value, label, showLabel, showValueText, valueText, infinite, thickness, fillColor, trackColor, className, labelClassName, valueClassName, trackClassName, fillClassName, ...props }: ProgressBarProps): React.ReactElement;

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressBar } from './ProgressBar';
+declare const meta: Meta<typeof ProgressBar>;
+export default meta;
+type Story = StoryObj<typeof ProgressBar>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const WithoutValueText: Story;
+export declare const CustomThickness: Story;
+export declare const CustomColor: Story;
+export declare const Infinite: Story;

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

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

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+type RightSidebarProgressTone = "blue" | "green" | "orange";
+export interface RightSidebarChallenge {
+    id: string;
+    title: string;
+    progress: number;
+    hasDeadline?: boolean;
+    tone?: RightSidebarProgressTone;
+}
+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,15 @@
+import { default as React } from 'react';
+import { IconName } from '../Icons/Icon';
+export interface StatContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    icon?: React.ReactNode;
+    iconName?: IconName;
+    title: React.ReactNode;
+    value: React.ReactNode;
+    unit: React.ReactNode;
+    iconClassName?: string;
+}
+/**
+ * StatContainer
+ * 아이콘, 제목, 데이터, 단위를 표시하는 정보 카드 컴포넌트
+ */
+export declare function StatContainer({ icon, iconName, 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;