@1d1s/design-system 1.0.0 → 1.2.0

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * Accordion
+ * 아코디언 컴포넌트 - 접을 수 있는 콘텐츠 섹션을 제공합니다.
+ *
+ * @example 단일 아코디언
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>제목</AccordionTrigger>
+ *     <AccordionContent>내용</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @example 다중 아코디언
+ * ```tsx
+ * <Accordion type="multiple">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>제목 1</AccordionTrigger>
+ *     <AccordionContent>내용 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>제목 2</AccordionTrigger>
+ *     <AccordionContent>내용 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AccordionItem
+ * 각 아코디언 항목을 감싸는 컨테이너
+ */
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.ReactElement;
+/**
+ * AccordionTrigger
+ * 아코디언을 열고 닫는 트리거 버튼
+ */
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.ReactElement;
+/**
+ * AccordionContent
+ * 아코디언의 접히는 콘텐츠 영역
+ */
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.ReactElement;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Accordion } from './Accordion';
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+export declare const Single: Story;
+export declare const Multiple: Story;
+export declare const DefaultOpen: Story;

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

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

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

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

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+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;
+export declare const WithBackButton: Story;
+export declare const Mobile: Story;

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

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

package/dist/components/AvatarImagePicker/AvatarImagePicker.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AvatarImagePickerProps extends Omit<React.ComponentPropsWithoutRef<"input">, "size"> {
+    /** 원형 이미지 영역 지름(px) */
+    size?: number;
+    /** 초기 이미지 URL */
+    defaultImageUrl?: string;
+    /** 하단 변경 버튼 텍스트 */
+    changeLabel?: string;
+}
+/**
+ * AvatarImagePicker
+ * 이미지 업로드 및 미리보기를 위한 컴포넌트
+ *
+ * @param onChange 파일 선택 시 호출되는 콜백 함수(optional)
+ * @param size 원형 이미지 영역 지름(px), 기본값 300
+ * @param defaultImageUrl 초기 이미지 URL
+ * @param changeLabel 하단 변경 버튼 텍스트(기본값: Change)
+ *
+ * @example 기본 사용
+ * ```tsx
+ * <AvatarImagePicker onChange={(e) => console.log(e.target.files)} />
+ * ```
+ */
+export declare function AvatarImagePicker({ onChange, size, defaultImageUrl, changeLabel, ...props }: AvatarImagePickerProps): React.ReactElement;

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

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

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

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

package/dist/components/BannerCarousel/BannerCarousel.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+export interface BannerCarouselItem {
+    id?: string | number;
+    type: string;
+    title: string;
+    subtitle: string;
+    backgroundImageUrl?: string;
+    /** @deprecated `backgroundImageUrl`을 사용하세요. */
+    backgroundImage?: string;
+}
+export interface BannerTrackingPayload {
+    event: "impression" | "click" | "change";
+    componentId?: string;
+    bannerId: string;
+    bannerIndex: number;
+    bannerType: string;
+    bannerTitle: string;
+    bannerSubtitle: string;
+    timestamp: number;
+}
+export interface BannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: BannerCarouselItem[];
+    autoSlideIntervalMs?: number;
+    initialIndex?: number;
+    enableLoop?: boolean;
+    showIndicators?: boolean;
+    aspectRatioClassName?: string;
+    minHeightPx?: number;
+    componentId?: string;
+    enableDataLayerTracking?: boolean;
+    impressionMode?: "once" | "always";
+    onBannerClick?(payload: BannerTrackingPayload): void;
+    onBannerImpression?(payload: BannerTrackingPayload): void;
+    onBannerChange?(payload: BannerTrackingPayload): void;
+    onItemClick?(item: BannerCarouselItem, index: number): void;
+}
+/**
+ * BannerCarousel
+ * 메인 배너 슬라이더 컴포넌트. 자동 슬라이드, 무한 루프, 인디케이터를 지원하며
+ * 클릭/노출 추적 콜백 및 dataLayer 이벤트 전송 포인트를 제공합니다.
+ */
+export declare function BannerCarousel({ items, autoSlideIntervalMs, initialIndex, enableLoop, showIndicators, aspectRatioClassName, minHeightPx, componentId, enableDataLayerTracking, impressionMode, onBannerClick, onBannerImpression, onBannerChange, onItemClick, className, ...props }: BannerCarouselProps): React.ReactElement | null;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { BannerCarousel } from './BannerCarousel';
+declare const meta: Meta<typeof BannerCarousel>;
+export default meta;
+type Story = StoryObj<typeof BannerCarousel>;
+export declare const Default: Story;
+export declare const ImageBackground: Story;
+export declare const Mobile: Story;
+export declare const NoAutoSlide: Story;
+export declare const NoIndicators: Story;

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

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

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const BottomSheet: React.FC<DialogPrimitive.DialogProps>;
+declare const BottomSheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const BottomSheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const BottomSheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function BottomSheetOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.ReactElement;
+export interface BottomSheetContentProps extends React.ComponentProps<typeof DialogPrimitive.Content> {
+    /** 시트 좌·우·하단 inset (px). 기본 8 */
+    inset?: number;
+    /** 상단 그립 핸들 노출 (기본 true) */
+    showHandle?: boolean;
+}
+declare function BottomSheetContent({ className, children, inset, showHandle, style, ...props }: BottomSheetContentProps): React.ReactElement;
+declare function BottomSheetHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+declare function BottomSheetFooter({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+declare function BottomSheetTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.ReactElement;
+declare function BottomSheetDescription({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.ReactElement;
+export { BottomSheet, BottomSheetTrigger, BottomSheetPortal, BottomSheetClose, BottomSheetOverlay, BottomSheetContent, BottomSheetHeader, BottomSheetFooter, BottomSheetTitle, BottomSheetDescription, };

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

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

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

@@ -0,0 +1,2 @@
+export { BottomSheet, BottomSheetTrigger, BottomSheetPortal, BottomSheetClose, BottomSheetOverlay, BottomSheetContent, BottomSheetHeader, BottomSheetFooter, BottomSheetTitle, BottomSheetDescription, } from './BottomSheet';
+export type { BottomSheetContentProps } from './BottomSheet';

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "secondary" | "soft" | "ghost" | "danger" | null | undefined;
-    size?: "sm" | "md" | "lg" | "icon" | "xs" | "xl" | null | undefined;
+    variant?: "default" | "primary" | "secondary" | "soft" | "ghost" | "danger" | "outlined" | null | undefined;
+    size?: "small" | "sm" | "md" | "lg" | "medium" | "xs" | "xl" | "icon" | "large" | null | undefined;
     pill?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Calendar/Calendar.d.ts

@@ -0,0 +1,4 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from 'react';
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: React.ComponentProps<typeof DayPicker>): React.ReactElement;
+export { Calendar };

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

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Calendar } from './Calendar';
+declare const meta: Meta<typeof Calendar>;
+export default meta;
+type Story = StoryObj<typeof Calendar>;
+export declare const Default: Story;
+export declare const Range: Story;
+/** 오늘로부터 N일 이전/이후만 클릭 가능 */
+export declare const DisabledOutsideRange: Story;
+/** 오늘 이후 날짜만 클릭 가능 (과거 비활성화) */
+export declare const DisabledPastDays: Story;
+/** 오늘 이전 날짜만 클릭 가능 (미래 비활성화) */
+export declare const DisabledFutureDays: Story;
+/** 특정 날짜 범위만 클릭 가능 */
+export declare const DisabledWithCustomMatcher: Story;

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

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

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-vite';
+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

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export interface CheckListOption {
+    id: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface CheckListProps {
+    /** 체크박스 옵션 목록 */
+    options: CheckListOption[];
+    /** 선택된 옵션의 ID 목록 */
+    value: string[];
+    /** 선택 변경 시 호출되는 콜백 */
+    onValueChange: (value: string[]) => void;
+    /** 추가 클래스 */
+    className?: string;
+    /** 읽기 전용 여부 (시각 변화 없이 토글만 비활성화) */
+    readOnly?: boolean;
+    /** 전체 비활성화 여부 */
+    disabled?: boolean;
+}
+/**
+ * CheckList
+ * 여러 개의 Checkbox를 리스트 형태로 보여주고 다중 선택을 관리하는 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <CheckList
+ *   options={[
+ *     { id: '1', label: '옵션 1' },
+ *     { id: '2', label: '옵션 2' }
+ *   ]}
+ *   value={selectedIds}
+ *   onValueChange={setSelectedIds}
+ * />
+ * ```
+ */
+export declare function CheckList({ options, value, onValueChange, className, readOnly, disabled, }: CheckListProps): React.ReactElement;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CheckList } from './CheckList';
+declare const meta: Meta<typeof CheckList>;
+export default meta;
+type Story = StoryObj<typeof CheckList>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;

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

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

package/dist/components/CommentThread/CommentThread.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface CommentAuthor {
+    id: string;
+    nickname: string;
+    profileImageUrl?: string;
+}
+export interface CommentNode {
+    id: string;
+    content: string;
+    createdAt: string;
+    author: CommentAuthor;
+    replies?: CommentNode[];
+    isAuthor?: boolean;
+    hasMoreReplies?: boolean;
+    remainingReplyCount?: number;
+    isLoadingReplies?: boolean;
+}
+export interface CommentThreadProps {
+    comments: CommentNode[];
+    currentUserId?: string;
+    className?: string;
+    replyPlaceholder?: string;
+    replySubmitLabel?: string;
+    replyCancelLabel?: string;
+    loadMoreRepliesLabel?: string;
+    onDelete?(comment: CommentNode): void;
+    onReport?(comment: CommentNode): void;
+    onReplySubmit?(comment: CommentNode, content: string): void;
+    onLoadMoreReplies?(comment: CommentNode): void;
+}
+export declare function CommentThread({ comments, currentUserId, className, replyPlaceholder, replySubmitLabel, replyCancelLabel, loadMoreRepliesLabel, onReplySubmit, onLoadMoreReplies, onDelete, onReport, }: CommentThreadProps): React.ReactElement;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CommentThread } from './CommentThread';
+declare const meta: Meta<typeof CommentThread>;
+export default meta;
+type Story = StoryObj<typeof CommentThread>;
+export declare const Default: Story;
+export declare const Empty: Story;
+export declare const LongContent: Story;
+export declare const ManyReplies: Story;

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

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

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

@@ -0,0 +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
+ * 단일 날짜를 선택하는 시안형 Date Picker 컴포넌트.
+ */
+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

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

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

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

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,78 @@
+import { VariantProps } from 'class-variance-authority';
+import { IconName } from '../Icons/Icon';
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.ReactElement;
+declare const dialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
+    /** 닫기 버튼 노출 (기본 true) */
+    showClose?: boolean;
+}
+declare function DialogContent({ className, children, size, showClose, ...props }: DialogContentProps): React.ReactElement;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+declare function DialogBody({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
+declare function DialogTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.ReactElement;
+declare function DialogDescription({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): React.ReactElement;
+declare const confirmToneStyles: {
+    brand: {
+        iconBg: string;
+        iconColor: string;
+        buttonVariant: "primary";
+    };
+    danger: {
+        iconBg: string;
+        iconColor: string;
+        buttonVariant: "danger";
+    };
+    mint: {
+        iconBg: string;
+        iconColor: string;
+        buttonVariant: "primary";
+    };
+};
+export type ConfirmTone = keyof typeof confirmToneStyles;
+export interface ConfirmDialogProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** 톤 색상 — `brand` (기본) · `danger` · `mint` */
+    tone?: ConfirmTone;
+    /** 상단 원형 배지에 들어갈 아이콘 */
+    icon?: IconName;
+    title: React.ReactNode;
+    /** `\n` 줄바꿈을 그대로 렌더 */
+    description?: React.ReactNode;
+    confirmLabel?: React.ReactNode;
+    cancelLabel?: React.ReactNode;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    /** Trigger 노드 (옵션). 외부에서 `open`을 제어할 때는 생략 */
+    children?: React.ReactNode;
+}
+/**
+ * ConfirmDialog
+ * 아이콘 + 제목 + 설명 + 2버튼 형태의 확인 다이얼로그.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   tone="danger"
+ *   icon="Flame"
+ *   title="정말 포기하시겠어요?"
+ *   description={"27일 스트릭이 초기화돼요.\n이 동작은 되돌릴 수 없어요."}
+ *   confirmLabel="포기"
+ *   onConfirm={() => stop()}
+ * >
+ *   <Button variant="danger">포기하기</Button>
+ * </ConfirmDialog>
+ * ```
+ */
+declare function ConfirmDialog({ open, defaultOpen, onOpenChange, tone, icon, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, children, }: ConfirmDialogProps): React.ReactElement;
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, ConfirmDialog, };

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

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Dialog } from './Dialog';
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+export declare const SizeSm: Story;
+export declare const SizeMd: Story;
+export declare const SizeLg: Story;
+export declare const ConfirmBrand: Story;
+export declare const ConfirmDanger: Story;
+export declare const ConfirmMint: Story;

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

@@ -0,0 +1,2 @@
+export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, ConfirmDialog, } from './Dialog';
+export type { DialogContentProps, ConfirmDialogProps, ConfirmTone } from './Dialog';

package/dist/components/GoalAddList/GoalAddList.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface GoalAddListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    goals?: string[];
+    defaultGoals?: string[];
+    onGoalsChange?(goals: string[]): void;
+    placeholder?: string;
+    disabled?: boolean;
+    addOnBlur?: boolean;
+    inputAriaLabel?: string;
+    maxGoals?: number;
+}
+/**
+ * GoalAddList
+ * 목표 문자열 목록을 보여주고 하단 입력창에서 Enter로 새 목표를 추가하는 컴포넌트.
+ */
+export declare function GoalAddList({ goals, defaultGoals, onGoalsChange, placeholder, disabled, addOnBlur, inputAriaLabel, maxGoals, className, ...props }: GoalAddListProps): React.ReactElement;

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

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

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

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

package/dist/components/ImagePicker/ImagePicker.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export interface ImagePickerProps {
+    /** 현재 미리보기 이미지 URL (blob: / data: / https: 모두 가능) */
+    previewUrl?: string;
+    /** 파일 선택 시 호출되는 콜백 */
+    onSelectFile: (file: File) => void;
+    /** 선택 해제 버튼 클릭 시 호출되는 콜백 */
+    onClear?: () => void;
+    /** 이미지 미선택 시 안내 텍스트 (기본값: "썸네일 영역을 클릭해 이미지를 선택하세요.") */
+    placeholderTitle?: string;
+    /** 이미지 미선택 시 보조 안내 텍스트 (기본값: "또는 이미지를 드래그해서 놓아주세요.") */
+    placeholderSubtitle?: string;
+    /** 하단 도움말 텍스트 (기본값: "JPG, PNG, GIF 파일을 업로드할 수 있습니다.") */
+    helperText?: string;
+    /** 선택 해제 버튼 텍스트 (기본값: "선택 해제") */
+    clearLabel?: string;
+    /**
+     * 드롭존 영역의 크기·비율을 지정하는 className.
+     * 기본값: `aspect-video`
+     * @example "aspect-[4/1]", "aspect-square", "h-64"
+     */
+    dropZoneClassName?: string;
+    /** 추가 className */
+    className?: string;
+}
+/**
+ * ImagePicker
+ * 일지 썸네일 이미지 선택 컴포넌트
+ *
+ * 클릭 또는 드래그 앤 드롭으로 이미지를 선택할 수 있습니다.
+ *
+ * @param previewUrl 현재 미리보기 이미지 URL
+ * @param onSelectFile 파일 선택 시 호출되는 콜백
+ * @param onClear 선택 해제 버튼 클릭 시 호출되는 콜백
+ * @param placeholderTitle 이미지 미선택 시 안내 텍스트
+ * @param placeholderSubtitle 이미지 미선택 시 보조 안내 텍스트
+ * @param helperText 하단 도움말 텍스트
+ * @param clearLabel 선택 해제 버튼 텍스트
+ * @param className 추가 className
+ *
+ * @example
+ * ```tsx
+ * <ImagePicker
+ *   previewUrl={previewUrl}
+ *   onSelectFile={(file) => setFile(file)}
+ *   onClear={() => setFile(null)}
+ * />
+ * ```
+ */
+export declare function ImagePicker({ previewUrl, onSelectFile, onClear, placeholderTitle, placeholderSubtitle, helperText, clearLabel, dropZoneClassName, className, }: ImagePickerProps): React.ReactElement;

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

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

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

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

package/dist/components/ImagePlaceholder/ImagePlaceholder.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface ImagePlaceholderProps {
+    className?: string;
+    logoSize?: 'sm' | 'md' | 'lg';
+}
+/**
+ * ImagePlaceholder
+ * 이미지가 없을 때 연한 primary 색상 배경에 로고를 보여주는 컴포넌트
+ */
+export declare function ImagePlaceholder({ className, logoSize, }: ImagePlaceholderProps): React.ReactElement;
+export {};