@1d1s/design-system 0.2.33 → 1.0.0

package/dist/components/AchievementBadge/AchievementBadge.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    tone?: "main" | "peach" | "mint" | "blue" | "green" | "gray" | null | undefined;
+    layout?: "vertical" | "horizontal" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AchievementBadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof badgeVariants> {
+    /** 배지 이모지 또는 아이콘 */
+    emoji: React.ReactNode;
+    /** 배지 라벨 */
+    label: React.ReactNode;
+}
+/**
+ * AchievementBadge
+ * 마이페이지 / 프로필에 사용하는 업적 배지.
+ *
+ * @param tone `main` (default) · `peach` · `mint` · `blue` · `green` · `gray`
+ * @param layout `vertical` (default) · `horizontal`
+ * @param size `sm` · `md` (default) · `lg`
+ *
+ * @example
+ * ```tsx
+ * <AchievementBadge emoji="🔥" label="14일 연속" tone="main" />
+ * <AchievementBadge emoji="🏆" label="첫 완주" tone="peach" layout="horizontal" />
+ * ```
+ */
+export declare function AchievementBadge({ emoji, label, tone, layout, size, className, ...props }: AchievementBadgeProps): React.ReactElement;
+export {};

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

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

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

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

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { StatusBadgeKind } from '../StatusBadge';
+declare const bannerVariants: (props?: ({
+    tone?: "mint" | "blue" | "gray" | "orange" | "purple" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
+    /** 좌상단 상태 라벨 (NEW/HOT/TIP) — string도 허용 */
+    kind?: StatusBadgeKind | string;
+    /** 제목 — `\n`은 줄바꿈으로 렌더링됨 */
+    title: React.ReactNode;
+    /** 부제 */
+    subtitle?: React.ReactNode;
+    /** 우측 슬롯 (CTA / 데코) */
+    action?: React.ReactNode;
+    /** 사용자 정의 background (CSS 값). 지정 시 tone 무시 */
+    bg?: string;
+}
+/**
+ * Banner
+ * 풀블리드 그라디언트 히어로 배너 — 홈/마이페이지 등.
+ *
+ * @param tone `orange` (default) · `mint` · `blue` · `purple` · `gray`
+ * @param size `sm` · `md` (default) · `lg`
+ * @param kind 좌상단 상태 라벨 (StatusBadge inline 형태)
+ * @param bg CSS background — 지정 시 tone 무시
+ *
+ * @example
+ * ```tsx
+ * <Banner kind="NEW" title={'5월 챌린지\n시즌 오픈!'} subtitle="함께 도전할 챌린저를 찾아보세요" />
+ * <Banner tone="mint" kind="TIP" title="꾸준함이 실력이 됩니다" />
+ * ```
+ */
+export declare function Banner({ kind, title, subtitle, action, tone, size, bg, className, style, ...props }: BannerProps): React.ReactElement;
+export {};

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

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

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

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

package/dist/components/BottomNav/BottomNav.d.ts

@@ -0,0 +1,34 @@
+import { default as React } from 'react';
+export interface BottomNavItem {
+    id: string;
+    /** 아이콘 노드 (또는 active/inactive 분기용 함수) */
+    icon: React.ReactNode | ((active: boolean) => React.ReactNode);
+    label: React.ReactNode;
+    onClick?: () => void;
+}
+export interface BottomNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onChange"> {
+    items: BottomNavItem[];
+    /** 활성 항목의 id */
+    activeId?: string;
+    /** 항목 클릭 시 호출 (item.onClick보다 먼저 호출됨) */
+    onChange?: (id: string) => void;
+}
+/**
+ * BottomNav
+ * 모바일 하단 sticky 내비게이션. 4개 탭이 일반적이지만 가변.
+ *
+ * @example
+ * ```tsx
+ * <BottomNav
+ *   activeId={tab}
+ *   onChange={setTab}
+ *   items={[
+ *     { id: 'home', icon: <Home />, label: '홈' },
+ *     { id: 'challenge', icon: <Grid />, label: '챌린지' },
+ *     { id: 'diary', icon: <Book />, label: '일지' },
+ *     { id: 'mypage', icon: <User />, label: '마이' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function BottomNav({ items, activeId, onChange, className, ...props }: BottomNavProps): React.ReactElement;

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

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

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

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

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

@@ -1,21 +1,33 @@
 import { VariantProps } from 'class-variance-authority';
-declare const customButtonVariants: (props?: ({
-    variant?: "default" | "outlined" | "secondary" | "ghost" | null | undefined;
-    size?: "small" | "medium" | "large" | "icon" | null | undefined;
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "soft" | "ghost" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | "xs" | "xl" | null | undefined;
+    pill?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof customButtonVariants> {
+export interface ButtonProps extends Omit<React.ComponentProps<"button">, "size">, VariantProps<typeof buttonVariants> {
+    /** asChild로 렌더링하면 자식 엘리먼트에 버튼 props를 머지 (Radix Slot) */
     asChild?: boolean;
+    /** 라벨 좌측 아이콘 */
+    iconLeft?: React.ReactNode;
+    /** 라벨 우측 아이콘 */
+    iconRight?: React.ReactNode;
 }
 /**
- * Button
- * 커스텀 버튼 컴포넌트
- * @param variant 버튼스타일 : default, outlined, secondary, ghost
- * @param size 버튼 크기 : small, medium, large, icon
+ * Button v3
  *
- * @example 기본 버튼
+ * @param variant `primary` (default) · `secondary` · `soft` · `ghost` · `danger`
+ * @param size `xs` · `sm` · `md` (default) · `lg` · `xl` · `icon`
+ * @param pill 둥근 알약형 (rounded-full)
+ * @param fullWidth 부모 너비 100%
+ * @param iconLeft / iconRight 라벨 양옆 아이콘
+ *
+ * @example
  * ```tsx
- * <Button variant="default" size="large">Large Button</Button>
+ * <Button variant="primary" size="lg" iconLeft={<Plus />}>
+ *   새 챌린지
+ * </Button>
  * ```
  */
-export declare function Button({ className, variant, size, asChild, disabled, ...props }: ButtonProps): React.ReactElement;
+export declare function Button({ className, variant, size, pill, fullWidth, asChild, disabled, iconLeft, iconRight, children, ...props }: ButtonProps): React.ReactElement;
 export {};

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

@@ -3,11 +3,11 @@ import { Button } from './Button';
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
-export declare const Large: Story;
-export declare const Medium: Story;
-export declare const Small: Story;
-export declare const Outlined: Story;
-export declare const Secondary: Story;
-export declare const Ghost: Story;
+export declare const Primary: Story;
+export declare const Sizes: Story;
+export declare const Variants: Story;
+export declare const WithIcons: Story;
+export declare const Pill: Story;
+export declare const FullWidth: Story;
+export declare const IconOnly: Story;
 export declare const Disabled: Story;
-export declare const Icon: Story;

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const cardVariants: (props?: ({
+    radius?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
+}
+/**
+ * Card
+ * 흰 배경 + 얇은 보더 + 라운드 컨테이너. 챌린지/일지/스탯 카드의 베이스.
+ *
+ * @param radius `sm`(8) · `md`(12) · `lg`(14, default) · `xl`(16)
+ * @param interactive hover lift + shadow
+ */
+export declare function Card({ radius, interactive, className, ...props }: CardProps): React.ReactElement;
+export declare namespace Card {
+    var Thumb: typeof CardThumb;
+    var Body: typeof CardBody;
+    var Title: typeof CardTitle;
+    var Meta: typeof CardMeta;
+    var Overlay: typeof CardOverlay;
+}
+/**
+ * Card.Thumb
+ * 카드 상단 이미지/플레이스홀더 영역. height/aspect 직접 지정.
+ */
+export declare function CardThumb({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/**
+ * Card.Body
+ * 카드 하단 텍스트 영역.
+ */
+export declare function CardBody({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/**
+ * Card.Title
+ * 카드 본문 큰 라벨.
+ */
+export declare function CardTitle({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/**
+ * Card.Meta
+ * 카드 하단 메타 라인 (좌/우 분할).
+ */
+export declare function CardMeta({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.ReactElement;
+/**
+ * Card.Overlay
+ * 썸네일 위에 절대 위치로 얹는 라벨 (퍼센트/이모지 등).
+ */
+export declare function CardOverlay({ className, children, position, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}): React.ReactElement;
+export {};

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

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

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

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

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,13 +2,18 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 export interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
     label?: string;
+    /** 읽기 전용 — 클릭/포커스 비활성, 시각은 유지 */
     readOnly?: boolean;
 }
 /**
- * Checkbox
- * 왼쪽의 네모 박스 안에 체크 표시가 들어가는 전형적인 체크박스 컴포넌트
+ * Checkbox v3
+ * 18×18 박스, 체크 시 brand 컬러로 채움.
+ * 체크되면 라벨이 자동으로 회색 + 취소선 처리됨 (체크리스트 스타일).
  *
- * @param label 선택적 텍스트 라벨
- * @param readOnly 읽기 전용 여부 (클릭 불가, 시각적 변경 없음)
+ * @example
+ * ```tsx
+ * <Checkbox label="아침 30분 러닝" defaultChecked />
+ * <Checkbox label="물 2L 마시기" />
+ * ```
  */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -4,7 +4,8 @@ declare const meta: Meta<typeof Checkbox>;
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
 export declare const Default: Story;
+export declare const Checked: Story;
 export declare const WithoutLabel: Story;
 export declare const Disabled: Story;
 export declare const ReadOnly: Story;
-export declare const List: Story;
+export declare const TodoList: Story;

package/dist/components/CircleAvatar/CircleAvatar.d.ts

@@ -1,8 +1,36 @@
 import { default as React } from 'react';
+import { StripeTone } from '../Stripe';
+export type CircleAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type CircleAvatarTone = StripeTone;
 interface CircleAvatarProps {
+    /** 사이즈 — 프리셋 또는 px 숫자 (default `"md"` = 40) */
+    size?: CircleAvatarSize | number;
+    /** 이미지가 없을 때 보여줄 줄무늬 톤 — 프리셋 또는 CSS color 문자열 */
+    tone?: CircleAvatarTone | string;
+    /** 외곽선 (main-200 컬러). size>40일 때 3px, 아니면 2px */
+    ring?: boolean;
+    /** 이미지 URL — 비어있거나 로드 실패 시 톤 Stripe 패턴으로 fallback */
     imageUrl?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Stripe 대신 보여줄 커스텀 fallback (이니셜·이모지 등) */
+    fallback?: React.ReactNode;
+    /** alt 텍스트 */
+    alt?: string;
     className?: string;
 }
-export declare function CircleAvatar({ imageUrl, size, className, }: CircleAvatarProps): React.ReactElement;
+/**
+ * CircleAvatar
+ * 원형 아바타 — 이미지 또는 톤 Stripe 패턴.
+ *
+ * @param size `xs`(24)·`sm`(32)·`md`(40, default)·`lg`(56)·`xl`(76)·또는 px 숫자
+ * @param tone Stripe 컬러 — `peach`(default)·`cream`·`mint`·`blue`·`sky`·`rose`·`gray`·또는 CSS color
+ * @param ring main-200 외곽선 (size>40 → 3px, 이하 → 2px)
+ *
+ * @example
+ * ```tsx
+ * <CircleAvatar size="lg" tone="mint" ring />
+ * <CircleAvatar imageUrl="/me.jpg" size="md" />
+ * <CircleAvatar size={48} tone="#ffbaba" ring />
+ * ```
+ */
+export declare function CircleAvatar({ size, tone, ring, imageUrl, fallback, alt, className, }: CircleAvatarProps): React.ReactElement;
 export {};

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

@@ -4,4 +4,9 @@ declare const meta: Meta<typeof CircleAvatar>;
 export default meta;
 type Story = StoryObj<typeof CircleAvatar>;
 export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const Tones: Story;
+export declare const CustomTone: Story;
+export declare const NumericSize: Story;
 export declare const WithImage: Story;
+export declare const WithFallbackNode: Story;

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

@@ -1,27 +1,34 @@
 import { default as React } from 'react';
-import { VariantProps } from 'class-variance-authority';
-declare const circularProgressVariants: (props?: ({
-    size?: "sm" | "lg" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type CircularProgressVariants = VariantProps<typeof circularProgressVariants>;
-interface CircularProgressProps extends CircularProgressVariants {
+export type CircularProgressSize = "sm" | "md" | "lg" | "xl";
+export interface CircularProgressProps {
+    /** 진행률 0~100 */
     value: number;
+    /** 사이즈 프리셋 또는 픽셀 단위 직경 */
+    size?: CircularProgressSize | number;
+    /** stroke 두께(px). 미지정 시 size 프리셋 값 또는 직경의 1/10 */
+    stroke?: number;
+    /** 채움 색 — 미지정 시 brand */
+    color?: string;
+    /** 트랙 색 — 미지정 시 gray-100 */
+    trackColor?: string;
+    /** 가운데 퍼센트 텍스트 */
     showPercentage?: boolean;
+    /** 가운데에 들어갈 커스텀 노드 (showPercentage보다 우선) */
+    centerSlot?: React.ReactNode;
     className?: string;
 }
 /**
- * CircularProgress
- * 원형 진행률 표시 컴포넌트
+ * CircularProgress v3
+ * 원형 진행률 — track + fill 2-arc SVG.
  *
- * @param value 진행률 (0~100)
- * @param size 크기 (sm, lg)
- * @param showPercentage 퍼센트 표시 여부
- * @param className 추가 클래스 이름
+ * @param size `sm`(48) · `md`(72, default) · `lg`(100) · `xl`(140) · 또는 숫자(px)
+ * @param stroke stroke 두께 (px)
+ * @param color 채움 색
  *
- * @example 기본 사용
+ * @example
  * ```tsx
- * <CircularProgress value={75} size="sm" showPercentage />
+ * <CircularProgress value={75} size="lg" />
+ * <CircularProgress value={62} size={120} stroke={10} />
  * ```
  */
-export declare function CircularProgress({ value, size, showPercentage, className, }: CircularProgressProps): React.ReactElement;
-export {};
+export declare function CircularProgress({ value, size, stroke, color, trackColor, showPercentage, centerSlot, className, }: CircularProgressProps): React.ReactElement;

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

@@ -4,5 +4,8 @@ declare const meta: Meta<typeof CircularProgress>;
 export default meta;
 type Story = StoryObj<typeof CircularProgress>;
 export declare const Default: Story;
-export declare const Large: Story;
-export declare const ExtraLarge: Story;
+export declare const Sizes: Story;
+export declare const CustomSize: Story;
+export declare const CustomColor: Story;
+export declare const NoLabel: Story;
+export declare const CustomCenter: Story;

package/dist/components/CommentRow/CommentRow.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+export interface CommentRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 좌측 아바타 슬롯 (CircleAvatar 등). 미지정 시 imageUrl로 자동 생성 */
+    avatar?: React.ReactNode;
+    /** avatar 미지정 시 사용할 이미지 URL */
+    imageUrl?: string;
+    /** 작성자 이름 */
+    author: React.ReactNode;
+    /** 댓글 본문 */
+    text: React.ReactNode;
+    /** 작성 시간 (예: "1시간 전") */
+    time?: React.ReactNode;
+    /** 하단 구분선 표시 (default `true`) */
+    divider?: boolean;
+}
+/**
+ * CommentRow
+ * 한 줄 댓글 — 응원 / 단순 댓글 리스트용. 중첩이 필요하면 `CommentThread` 사용.
+ *
+ * @example
+ * ```tsx
+ * <CommentRow
+ *   imageUrl="/users/min.jpg"
+ *   author="새벽러너"
+ *   text="5km 축하드려요! 🏃"
+ *   time="1시간 전"
+ * />
+ * ```
+ */
+export declare function CommentRow({ avatar, imageUrl, author, text, time, divider, className, ...props }: CommentRowProps): React.ReactElement;

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

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

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

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

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

@@ -1,53 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-declare const Select: React.FC<SelectPrimitive.SelectProps>;
-declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
-declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const dropdownTriggerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    open?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface DropdownProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "value">, VariantProps<typeof dropdownTriggerVariants> {
+    /** 라벨 (위) */
+    label?: React.ReactNode;
+    /** 현재 선택값 */
+    value?: React.ReactNode;
+    /** 미선택 시 표시할 placeholder */
+    placeholder?: React.ReactNode;
+    /** 부모 너비 100%. false면 240px */
+    full?: boolean;
+}
 /**
- * SelectTrigger
- * Select 기본 트리거 컴포넌트
+ * Dropdown
+ * 셀렉트형 버튼 — 우측 chevron, open 상태에서 brand 보더 + main 글로우.
  *
- * @example
- * ```tsx
- * <SelectTrigger className="w-[180px]">
- *   <SelectValue placeholder="값을 선택해주세요" />
- * </SelectTrigger>
- * ```
- */
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
-}): React.ReactElement;
-/**
- * SelectItem
- * Select 기본 아이템 컴포넌트
- *
- * @example
- * ```tsx
- * <SelectItem value="option1">value1</SelectItem>
- * ```
- */
-declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): React.ReactElement;
-/**
- * SelectSeparator
- * Select 구분선 컴포넌트
- */
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): React.ReactElement;
-declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): React.ReactElement;
-declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): React.ReactElement;
-/**
- * SelectContent
- * Select 기본 컨텐츠 컴포넌트
+ * @param size `sm` · `md` (default) · `lg`
+ * @param open 메뉴 열림 시각 상태 (실제 메뉴 렌더링은 별도)
  *
  * @example
  * ```tsx
- * <SelectContent>
- *   <SelectGroup>
- *     <SelectItem value="option1">Option 1</SelectItem>
- *     <SelectItem value="option2">Option 2</SelectItem>
- *   </SelectGroup>
- * </SelectContent>
+ * <Dropdown value="인기순" />
+ * <Dropdown placeholder="카테고리 선택" />
+ * <Dropdown value="운동" open />
  * ```
  */
-declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): React.ReactElement;
-declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): React.ReactElement;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -1,7 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from './Dropdown';
-declare const meta: Meta<typeof Select>;
+import { Dropdown } from './Dropdown';
+declare const meta: Meta<typeof Dropdown>;
 export default meta;
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Dropdown>;
 export declare const Default: Story;
-export declare const Small: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const Interactive: Story;
+export declare const MenuOnly: Story;
+export declare const Multi: Story;

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface DropdownMenuItem {
+    value: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface DropdownMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onSelect" | "children"> {
+    items: DropdownMenuItem[];
+    /** 현재 선택된 value */
+    value?: string;
+    /** 선택 시 콜백 */
+    onSelect?: (value: string) => void;
+    /** 메뉴 너비 (default 240) */
+    width?: number | string;
+}
+/**
+ * DropdownMenu
+ * Dropdown 트리거 아래 띄우는 항목 목록 — 선택된 항목은 brand + check.
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu
+ *   items={[{ value: 'recent', label: '최신순' }, { value: 'popular', label: '인기순' }]}
+ *   value="popular"
+ *   onSelect={(v) => setSort(v)}
+ * />
+ * ```
+ */
+export declare function DropdownMenu({ items, value, onSelect, width, className, style, ...props }: DropdownMenuProps): React.ReactElement;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /** 선택된 값 라벨 배열 */
+    selected: string[];
+    /** placeholder 텍스트 (예: "카테고리 선택", "4 외 더 추가") */
+    placeholder?: React.ReactNode;
+    /** 칩 X 버튼 클릭 시 콜백 */
+    onRemove?: (value: string) => void;
+    /** 클릭 시 콜백 (메뉴 열기 등) */
+    onAddClick?: () => void;
+}
+/**
+ * MultiSelect
+ * 선택된 값을 brand-soft 칩 묶음으로 보여주는 multi-tag 입력. 칩에 X 버튼.
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   selected={['운동', '건강']}
+ *   placeholder="4 외 더 추가"
+ *   onRemove={(v) => setTags(tags.filter(t => t !== v))}
+ *   onAddClick={openMenu}
+ * />
+ * ```
+ */
+export declare function MultiSelect({ selected, placeholder, onRemove, onAddClick, className, ...props }: MultiSelectProps): React.ReactElement;

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

@@ -1 +1,3 @@
 export * from './Dropdown';
+export * from './DropdownMenu';
+export * from './MultiSelect';