@1d1s/design-system 1.1.0 → 1.2.1

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/Dialog/Dialog.d.ts

@@ -1,3 +1,5 @@
+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>;
@@ -5,9 +7,72 @@ declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dia
 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 function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): 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;
-export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+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

@@ -3,7 +3,9 @@ import { Dialog } from './Dialog';
 declare const meta: Meta<typeof Dialog>;
 export default meta;
 type Story = StoryObj<typeof Dialog>;
-export declare const Default: Story;
-export declare const WithForm: Story;
-export declare const Confirmation: Story;
-export declare const SimpleAlert: Story;
+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

@@ -1 +1,2 @@
-export { Dialog, DialogTrigger, DialogPortal, DialogClose, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from './Dialog';
+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/Heatmap/Heatmap.d.ts

@@ -1,6 +1,12 @@
 import { default as React } from 'react';
 export type HeatmapTone = "main" | "mint" | "blue" | "green" | "gray";
-export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+export interface HeatmapCellInfo {
+    /** 셀 인덱스 (0-based, column-first) */
+    index: number;
+    /** 셀 레벨 (0~4) */
+    level: number;
+}
+export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
     /** 셀 값 배열 (각 0~4 레벨). 길이는 rows×cols 권장 */
     cells?: number[];
     /** 컬럼 수 (default 20) */
@@ -15,21 +21,50 @@ export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     gap?: number;
     /** 셀 모서리 둥글기 px */
     cellRadius?: number;
-    /** 호버 시 툴팁 라벨 생성 함수 (셀 인덱스 → 텍스트). 미지정 시 툴팁 비활성 */
+    /** 셀 a11y 라벨 생성 함수 (셀 인덱스/레벨 → 텍스트). */
     ariaLabel?: (index: number, level: number) => string;
+    /**
+     * Hover/포커스 시 popover로 보여줄 컨텐츠 생성 함수.
+     * 지정하면 셀이 인터랙티브해지고 hover/click으로 popover가 열려요.
+     */
+    renderCellTooltip?: (info: HeatmapCellInfo) => React.ReactNode;
+    /**
+     * 셀 클릭 시 popover 하단에 추가로 렌더링할 액션 영역.
+     * 클릭으로 선택된 상태에서만 표시되며, 인터랙션을 위해 `renderCellTooltip`이 함께 필요해요.
+     */
+    renderCellActions?: (info: HeatmapCellInfo) => React.ReactNode;
+    /** 셀 클릭 콜백 */
+    onCellClick?: (info: HeatmapCellInfo) => void;
+    /** 셀 hover 콜백 */
+    onCellHover?: (info: HeatmapCellInfo | null) => void;
 }
 /**
  * Heatmap
  * GitHub-style 활동 잔디. 7행 × N열 그리드, 각 셀 0~4 레벨.
  *
+ * `renderCellTooltip`을 넘기면 각 셀에 hover popover + 클릭 선택 인터랙션이 활성화돼요.
+ *
  * @param tone `main` (default) · `mint` · `blue` · `green` · `gray`
  * @param cells 길이 rows×cols 의 number[] 0~4
  * @param cols 컬럼 수 (default 20)
  *
  * @example
  * ```tsx
+ * // 정적 (인터랙션 없음)
  * <Heatmap cols={20} cells={data} tone="main" />
- * <Heatmap cols={12} tone="mint" />  {/* 빈 그리드 *\/}
+ *
+ * // hover/click 인터랙션
+ * <Heatmap
+ *   cols={20}
+ *   cells={data}
+ *   renderCellTooltip={({ index, level }) =>
+ *     `${dates[index]} · ${level}회 활동`
+ *   }
+ *   renderCellActions={({ index }) => (
+ *     <Button size="xs" onClick={() => openDay(dates[index])}>일지 보기</Button>
+ *   )}
+ *   onCellClick={({ index, level }) => track(index, level)}
+ * />
  * ```
  */
-export declare function Heatmap({ cells, cols, rows, tone, palette, gap, cellRadius, ariaLabel, className, ...props }: HeatmapProps): React.ReactElement;
+export declare function Heatmap({ cells, cols, rows, tone, palette, gap, cellRadius, ariaLabel, renderCellTooltip, renderCellActions, onCellClick, onCellHover, className, ...props }: HeatmapProps): React.ReactElement;

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

@@ -6,3 +6,5 @@ type Story = StoryObj<typeof Heatmap>;
 export declare const Empty: Story;
 export declare const WithData: Story;
 export declare const Tones: Story;
+export declare const Interactive: Story;
+export declare const InteractiveWithActions: Story;

package/dist/components/Snackbar/Snackbar.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface SnackbarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 표시 텍스트 */
+    text: React.ReactNode;
+    /** 우측 인라인 액션 라벨 (예: "복구") */
+    action?: React.ReactNode;
+    /** 액션 클릭 콜백 */
+    onAction?: () => void;
+}
+/**
+ * Snackbar
+ * 컴팩트한 다크 톤 알림 — 보통 화면 하단에 1줄 결과 + 1액션 형태로 표시.
+ *
+ * @example
+ * ```tsx
+ * <Snackbar text="일지가 임시저장되었어요" action="복구" onAction={() => restore()} />
+ * <Snackbar text="링크를 복사했어요" />
+ * ```
+ */
+export declare function Snackbar({ text, action, onAction, className, ...props }: SnackbarProps): React.ReactElement;

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

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

package/dist/components/Snackbar/SnackbarProvider.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+export interface SnackbarOptions {
+    text: React.ReactNode;
+    action?: React.ReactNode;
+    onAction?: () => void;
+    /** ms 단위 자동 닫힘. 0 또는 음수면 수동 닫기 (기본 3000) */
+    duration?: number;
+}
+interface SnackbarContextValue {
+    show: (options: SnackbarOptions) => number;
+    dismiss: (id: number) => void;
+}
+export type SnackbarPosition = "top" | "bottom";
+export interface SnackbarProviderProps {
+    children: React.ReactNode;
+    /** 위치 (기본 `bottom`) */
+    position?: SnackbarPosition;
+}
+/**
+ * SnackbarProvider
+ * 앱 루트에 한 번 감싸 두면 어디서든 `useSnackbar()`로 스낵바를 띄울 수 있어요.
+ *
+ * @example
+ * ```tsx
+ * <SnackbarProvider>
+ *   <App />
+ * </SnackbarProvider>
+ * ```
+ */
+export declare function SnackbarProvider({ children, position, }: SnackbarProviderProps): React.ReactElement;
+/** 스낵바를 띄우거나 닫을 수 있는 훅. `<SnackbarProvider>` 하위에서만 사용 */
+export declare function useSnackbar(): SnackbarContextValue;
+export {};

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

@@ -0,0 +1,4 @@
+export { Snackbar } from './Snackbar';
+export type { SnackbarProps } from './Snackbar';
+export { SnackbarProvider, useSnackbar, } from './SnackbarProvider';
+export type { SnackbarOptions, SnackbarProviderProps, SnackbarPosition, } from './SnackbarProvider';

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import { IconName } from '../Icons/Icon';
+import * as React from "react";
+declare const toastIconStyles: {
+    brand: {
+        bg: string;
+        color: string;
+    };
+    success: {
+        bg: string;
+        color: string;
+    };
+    danger: {
+        bg: string;
+        color: string;
+    };
+    info: {
+        bg: string;
+        color: string;
+    };
+};
+export type ToastTone = keyof typeof toastIconStyles;
+declare const toastVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof toastVariants> {
+    /** 톤 — `brand` (default) · `success` · `danger` · `info` */
+    tone?: ToastTone;
+    /** 좌측 원형 배지 아이콘 */
+    icon?: IconName;
+    /** 제목 (1행) */
+    title?: React.ReactNode;
+    /** 본문 (보조 1행) */
+    body?: React.ReactNode;
+    /** 우측 액션 라벨 */
+    action?: React.ReactNode;
+    /** 액션 클릭 콜백 */
+    onAction?: () => void;
+}
+/**
+ * Toast
+ * 화이트 카드 위에 컬러 아이콘 배지 + 제목/본문/액션을 보여주는 알림.
+ *
+ * 단독 표시용 프레젠테이션 컴포넌트로, `ToastProvider` + `useToast`와 함께 쓸 수 있어요.
+ *
+ * @param tone `brand` (default) · `success` · `danger` · `info`
+ *
+ * @example
+ * ```tsx
+ * <Toast tone="success" icon="Check" title="일지를 저장했어요" body="응원이 도착하면 알려드릴게요" />
+ * <Toast tone="info" icon="Bell" title="새 응원 3개" action="보기" onAction={() => view()} />
+ * ```
+ */
+export declare function Toast({ tone, icon, title, body, action, onAction, className, ...props }: ToastProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Toast } from './Toast';
+declare const meta: Meta<typeof Toast>;
+export default meta;
+type Story = StoryObj<typeof Toast>;
+export declare const Brand: Story;
+export declare const Success: Story;
+export declare const Info: Story;
+export declare const Danger: Story;
+export declare const WithProvider: Story;

package/dist/components/Toast/ToastProvider.d.ts

@@ -0,0 +1,40 @@
+import { ToastProps, ToastTone } from './Toast';
+import { IconName } from '../Icons/Icon';
+import * as React from "react";
+export interface ToastOptions {
+    tone?: ToastTone;
+    icon?: IconName;
+    title?: React.ReactNode;
+    body?: React.ReactNode;
+    action?: React.ReactNode;
+    onAction?: () => void;
+    /** ms 단위 자동 닫힘. 0 또는 음수면 수동 닫기 (기본 4000) */
+    duration?: number;
+}
+interface ToastContextValue {
+    show: (options: ToastOptions) => number;
+    dismiss: (id: number) => void;
+}
+export type ToastPosition = "top" | "top-right" | "top-left" | "bottom" | "bottom-right" | "bottom-left";
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    /** 토스트 정렬 위치 (기본 `top-right`) */
+    position?: ToastPosition;
+    /** 동시에 표시되는 최대 토스트 수 (기본 5) */
+    max?: number;
+}
+/**
+ * ToastProvider
+ * 앱 루트에 한 번 감싸 두면 어디서든 `useToast()`로 토스트를 띄울 수 있어요.
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider position="top-right">
+ *   <App />
+ * </ToastProvider>
+ * ```
+ */
+export declare function ToastProvider({ children, position, max, }: ToastProviderProps): React.ReactElement;
+/** 토스트를 띄우거나 닫을 수 있는 훅. `<ToastProvider>` 하위에서만 사용 */
+export declare function useToast(): ToastContextValue;
+export type { ToastProps };

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

@@ -0,0 +1,4 @@
+export { Toast } from './Toast';
+export type { ToastProps, ToastTone } from './Toast';
+export { ToastProvider, useToast, } from './ToastProvider';
+export type { ToastOptions, ToastProviderProps, ToastPosition } from './ToastProvider';

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './AvatarImagePicker';
 export * from './Banner';
 export * from './BannerCarousel';
 export * from './BottomNav';
+export * from './BottomSheet';
 export * from './Button';
 export * from './Calendar';
 export * from './Card';
@@ -31,6 +32,7 @@ export * from './RightSidebar';
 export * from './ScheduleCalendar';
 export * from './SectionHeader';
 export * from './Select';
+export * from './Snackbar';
 export * from './StatCard';
 export * from './StatusBadge';
 export * from './StepIndicator';
@@ -40,6 +42,7 @@ export * from './Tabs';
 export * from './Tag';
 export * from './Text';
 export * from './TextField';
+export * from './Toast';
 export * from './Toggle';
 export * from './ToggleGroup';
 export * from './Tooltip';