@1d1s/design-system 0.2.33 → 0.2.34

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

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export type HeatmapTone = "main" | "mint" | "blue" | "green" | "gray";
+export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 셀 값 배열 (각 0~4 레벨). 길이는 rows×cols 권장 */
+    cells?: number[];
+    /** 컬럼 수 (default 20) */
+    cols?: number;
+    /** 행 수 (default 7) */
+    rows?: number;
+    /** 컬러 톤 프리셋 */
+    tone?: HeatmapTone;
+    /** 5-step 컬러 직접 지정 (tone 무시). [level0, level1, level2, level3, level4] */
+    palette?: [string, string, string, string, string];
+    /** 셀 사이 간격 px */
+    gap?: number;
+    /** 셀 모서리 둥글기 px */
+    cellRadius?: number;
+    /** 호버 시 툴팁 라벨 생성 함수 (셀 인덱스 → 텍스트). 미지정 시 툴팁 비활성 */
+    ariaLabel?: (index: number, level: number) => string;
+}
+/**
+ * Heatmap
+ * GitHub-style 활동 잔디. 7행 × N열 그리드, 각 셀 0~4 레벨.
+ *
+ * @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" />  {/* 빈 그리드 *\/}
+ * ```
+ */
+export declare function Heatmap({ cells, cols, rows, tone, palette, gap, cellRadius, ariaLabel, className, ...props }: HeatmapProps): React.ReactElement;

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

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

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

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

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

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

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

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

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

@@ -30,6 +30,8 @@ export * from './EyeOff';
 export * from './HamburgerMenu';
 export * from './Heart';
 export * from './HeartFilled';
+export * from './Home';
+export * from './LayoutGrid';
 export * from './Logo';
 export * from './Minus';
 export * from './People';

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

@@ -1,13 +1,21 @@
 import { default as React } from 'react';
+export type ProgressBarSize = "xs" | "sm" | "md" | "lg";
 export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 진행률 0~100 */
     value: number;
     label?: React.ReactNode;
     showLabel?: boolean;
     showValueText?: boolean;
     valueText?: React.ReactNode;
+    /** 마감 없음 — 100%로 채운 채 ∞ 표시 */
     infinite?: boolean;
+    /** 굵기 프리셋 (xs=4 · sm=6 · md=8 · lg=12). `thickness` 우선 적용 */
+    size?: ProgressBarSize;
+    /** 픽셀 단위 굵기 (size 무시) */
     thickness?: number;
+    /** 채움 색 (CSS color) — 미지정 시 brand */
     fillColor?: string;
+    /** 트랙 색 (CSS color) — 미지정 시 gray-100 */
     trackColor?: string;
     labelClassName?: string;
     valueClassName?: string;
@@ -15,7 +23,16 @@ export interface ProgressBarProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     fillClassName?: string;
 }
 /**
- * ProgressBar
- * 라벨/퍼센트 텍스트/두께/색상을 유연하게 제어할 수 있는 진행률 바 컴포넌트.
+ * ProgressBar v3
+ * 진행률 바 — 라벨 / 퍼센트 / 굵기 / 색상 제어 가능.
+ *
+ * @param size `xs` (4px) · `sm` (6px) · `md` (8px, default) · `lg` (12px)
+ * @param thickness 픽셀 단위 직접 지정 (size를 덮어씀)
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={62} size="md" />
+ * <ProgressBar label="아침 30분 러닝" value={45} size="lg" />
+ * ```
  */
-export declare function ProgressBar({ value, label, showLabel, showValueText, valueText, infinite, thickness, fillColor, trackColor, className, labelClassName, valueClassName, trackClassName, fillClassName, ...props }: ProgressBarProps): React.ReactElement;
+export declare function ProgressBar({ value, label, showLabel, showValueText, valueText, infinite, size, thickness, fillColor, trackColor, className, labelClassName, valueClassName, trackClassName, fillClassName, ...props }: ProgressBarProps): React.ReactElement;

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof ProgressBar>;
 export default meta;
 type Story = StoryObj<typeof ProgressBar>;
 export declare const Default: Story;
+export declare const Sizes: Story;
 export declare const WithoutLabel: Story;
 export declare const WithoutValueText: Story;
 export declare const CustomThickness: Story;

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    label?: React.ReactNode;
+}
+/**
+ * Radio v3
+ * 18×18 원형 라디오 버튼. 체크 시 brand 컬러 외곽선 + 9×9 brand 내부 점.
+ *
+ * @example
+ * ```tsx
+ * <Radio name="type" value="solo" defaultChecked label="개인 챌린지" />
+ * <Radio name="type" value="group" label="단체 챌린지" />
+ * ```
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+export interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> {
+    /** 모든 Radio가 공유하는 name (group 식별자) */
+    name: string;
+    /** 옵션 리스트 — value/label */
+    options: Array<{
+        value: string;
+        label: React.ReactNode;
+        disabled?: boolean;
+    }>;
+    /** 현재 선택값 (controlled) */
+    value?: string;
+    /** 기본값 (uncontrolled) */
+    defaultValue?: string;
+    /** 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 항목 사이 간격 / 방향 */
+    direction?: "vertical" | "horizontal";
+}
+/**
+ * RadioGroup
+ * 단일 선택 라디오 그룹. controlled/uncontrolled 둘 다 지원.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup name="type" defaultValue="solo" options={[
+ *   { value: 'solo', label: '개인 챌린지' },
+ *   { value: 'group', label: '단체 챌린지' },
+ * ]} />
+ * ```
+ */
+export declare function RadioGroup({ name, options, value, defaultValue, onChange, direction, className, ...props }: RadioGroupProps): React.ReactElement;

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

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

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

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

package/dist/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 섹션 제목 (h2 비주얼) */
+    title: React.ReactNode;
+    /** 부제 — 작은 회색 보조 텍스트 */
+    subtitle?: React.ReactNode;
+    /** 우측 액션 — "전체보기 →" 버튼이나 임의 노드 */
+    action?: React.ReactNode;
+    /** `action` 미지정이고 `onActionClick` 전달 시 기본 "전체보기 →" 버튼 자동 렌더링 */
+    onActionClick?: () => void;
+    /** 기본 액션 라벨 (default `"전체보기 →"`) */
+    actionLabel?: React.ReactNode;
+    /** 폰트 크기 변형 */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * SectionHeader
+ * 페이지 섹션 헤더 — 제목 + (선택)부제 + 우측 액션 슬롯.
+ *
+ * @example
+ * ```tsx
+ * <SectionHeader
+ *   title="오늘 시작해볼 챌린지"
+ *   subtitle="추천 4개"
+ *   onActionClick={() => router.push('/challenges')}
+ * />
+ *
+ * <SectionHeader title="진행 중" action={<Button size="sm" variant="ghost">필터</Button>} />
+ * ```
+ */
+export declare function SectionHeader({ title, subtitle, action, onActionClick, actionLabel, size, className, ...props }: SectionHeaderProps): React.ReactElement;

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

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

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

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

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+declare const statCardVariants: (props?: ({
+    tone?: "mint" | "blue" | "gray" | "brand" | "white" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StatCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof statCardVariants> {
+    /** 캡션 라벨 */
+    label: React.ReactNode;
+    /** 큰 값 */
+    value: React.ReactNode;
+    /** 보조 텍스트 (값 아래 소형 메타) */
+    helper?: React.ReactNode;
+}
+/**
+ * StatCard
+ * 라벨 + 큰 숫자 통계 카드. 마이페이지/대시보드용.
+ *
+ * @param tone `white` (default) · `brand` · `mint` · `blue` · `gray`
+ * @param size `sm` · `md` (default) · `lg`
+ *
+ * @example
+ * ```tsx
+ * <StatCard label="현재 스트릭" value="🔥 27" tone="brand" />
+ * <StatCard label="작성한 일지" value="48" helper="이번 달 +12" />
+ * ```
+ */
+export declare function StatCard({ label, value, helper, tone, size, className, ...props }: StatCardProps): React.ReactElement;
+export {};

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

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

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

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

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export type StatusBadgeKind = "NEW" | "HOT" | "TIP";
+export type StatusBadgeTone = "brand" | "blue" | "mint" | "red" | "green" | "gray";
+export interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 프리셋 — 라벨 텍스트와 tone을 자동 설정 */
+    kind?: StatusBadgeKind;
+    /** wrap 색상 (kind 없을 때 기본 brand) */
+    tone?: StatusBadgeTone;
+    /** 라벨 텍스트 (kind 미지정 시 필수) */
+    children?: React.ReactNode;
+    /**
+     * `standalone` — wrap + inner pill 2-layer (default)
+     * `inline` — 1-layer pill (이미 컬러 배경이 있는 컨테이너 안에 둘 때)
+     */
+    variant?: "standalone" | "inline";
+}
+/**
+ * StatusBadge
+ * NEW / HOT / TIP 상태 라벨. 배너 위 또는 단독으로 사용.
+ *
+ * @example
+ * ```tsx
+ * <StatusBadge kind="NEW" />
+ * <StatusBadge tone="green">UPCOMING</StatusBadge>
+ * <StatusBadge variant="inline" kind="NEW" />  {/* 컬러 배너 위에 사용 *\/}
+ * ```
+ */
+export declare function StatusBadge({ kind, tone, children, variant, className, ...props }: StatusBadgeProps): React.ReactElement;

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

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

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

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

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface StreakChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 연속 일수 */
+    days: number;
+    /** 좌측 아이콘 (기본 🔥 이모지) */
+    icon?: React.ReactNode;
+    /** 일수 우측 단위 (예: "일") — 미지정 시 표시 안함 */
+    unit?: React.ReactNode;
+}
+/**
+ * StreakChip
+ * 헤더/네비 등에 들어가는 알약형 스트릭 표시.
+ *
+ * @example
+ * ```tsx
+ * <StreakChip days={27} />
+ * <StreakChip days={27} unit="일" />
+ * ```
+ */
+export declare function StreakChip({ days, icon, unit, className, ...props }: StreakChipProps): React.ReactElement;

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

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

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

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface StreakHeroProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 현재 연속 일수 */
+    days: number;
+    /** 헤더 라벨 (default `"현재 스트릭"`) */
+    label?: React.ReactNode;
+    /** 일수 단위 (default `"일째"`) */
+    unit?: React.ReactNode;
+    /** 우상단 아이콘 (default 🔥 — flame-flicker 애니메이션 자동 적용) */
+    icon?: React.ReactNode;
+    /** 하단 메타 라인 (예: "최장 45일 · 이번주 5/7") */
+    meta?: React.ReactNode;
+}
+/**
+ * StreakHero
+ * 따뜻한 그라디언트 카드에 큰 스트릭 숫자를 표시.
+ *
+ * @example
+ * ```tsx
+ * <StreakHero days={27} meta="최장 45일 · 이번주 5/7" />
+ * ```
+ */
+export declare function StreakHero({ days, label, unit, icon, meta, className, ...props }: StreakHeroProps): React.ReactElement;

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

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

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

@@ -1 +1,2 @@
-export * from './Streak';
+export * from './StreakChip';
+export * from './StreakHero';

package/dist/components/Stripe/Stripe.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export type StripeTone = "peach" | "cream" | "mint" | "blue" | "sky" | "rose" | "gray";
+export declare function resolveStripeTone(tone: StripeTone | string | undefined): string;
+export declare function stripeBackground(color: string): string;
+export interface StripeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 줄무늬 컬러 — 프리셋 또는 CSS color (default `cream` = main-200) */
+    tone?: StripeTone | string;
+    /** 가운데 라벨 — 작은 흰색 알약형 박스에 표시. 비우면 패턴만 */
+    label?: React.ReactNode;
+    /** 둥근 모서리 px (default `0` — 카드 내부 사용 가정) */
+    radius?: number | string;
+    /** 높이 (default `100%` — 부모를 채움) */
+    height?: number | string;
+}
+/**
+ * Stripe (Placeholder)
+ * 이미지 자리 표시자 — 사선 줄무늬 패턴. 카드 썸네일 / 아바타 fallback / 배너 등.
+ *
+ * @param tone `peach`·`cream`(default)·`mint`·`blue`·`sky`·`rose`·`gray` 또는 임의 CSS color
+ * @param label 가운데 작은 흰색 알약 박스에 표시
+ * @param radius 둥근 모서리 px (default 0)
+ *
+ * @example
+ * ```tsx
+ * <div style={{ height: 110 }}><Stripe tone="peach" label="run" /></div>
+ * <Stripe tone="#c8f4e1" />
+ * ```
+ */
+export declare function Stripe({ tone, label, radius, height, className, style, ...props }: StripeProps): React.ReactElement;

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

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

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

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

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import { default as React } from 'react';
+export interface TabItem {
+    id: string;
+    label: React.ReactNode;
+    /** 우측 카운트 등 — 라벨 옆에 작게 표시 */
+    badge?: React.ReactNode;
+    onClick?: () => void;
+}
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> {
+    items: TabItem[];
+    /** 활성 항목 id (controlled) */
+    activeId?: string;
+    /** 활성 변경 콜백 */
+    onChange?: (id: string) => void;
+    /** 항목들이 화면 가득 차도록 균등 분할 */
+    fullWidth?: boolean;
+    /** 사이즈 — 폰트/패딩 */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * Tabs
+ * 하단 보더 + 활성 표시. 각 탭은 button 요소.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   activeId={tab}
+ *   onChange={setTab}
+ *   items={[
+ *     { id: 'challenge', label: '챌린지' },
+ *     { id: 'diary',     label: '일지' },
+ *     { id: 'cheer',     label: '응원' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function Tabs({ items, activeId, onChange, fullWidth, size, className, ...props }: TabsProps): React.ReactElement;

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

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

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

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

package/dist/components/Tag/ChallengeTag.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface ChallengeTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** 챌린지 제목 */
+    children: React.ReactNode;
+    /** 좌측 아이콘 변경 (default Flag 아이콘) */
+    icon?: React.ReactNode;
+    size?: "sm" | "md";
+}
+/**
+ * ChallengeTag
+ * 일지 / 상세 화면에서 챌린지 출처를 표시하는 알약형 태그.
+ * Flag 아이콘 + brand-soft 컬러 (main-100 bg + main-200 border + brand text).
+ *
+ * @example
+ * ```tsx
+ * <ChallengeTag>아침 30분 러닝하기</ChallengeTag>
+ * ```
+ */
+export declare function ChallengeTag({ children, icon, size, className, ...props }: ChallengeTagProps): React.ReactElement;

package/dist/components/Tag/ChallengeTag.stories.d.ts

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

package/dist/components/Tag/FilterChip.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+declare const filterChipVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FilterChipProps extends Omit<React.ComponentProps<"button">, "size">, VariantProps<typeof filterChipVariants> {
+    children: React.ReactNode;
+}
+/**
+ * FilterChip
+ * 카테고리 필터 / 토글 칩 — 클릭 가능한 button 요소.
+ *
+ * @param active 선택 상태 (default `false`)
+ * @param size `sm` · `md` (default) · `lg`
+ *
+ * @example
+ * ```tsx
+ * const [cat, setCat] = useState('전체');
+ * {categories.map((c) => (
+ *   <FilterChip key={c} active={cat === c} onClick={() => setCat(c)}>{c}</FilterChip>
+ * ))}
+ * ```
+ */
+export declare function FilterChip({ className, size, active, children, type, ...props }: FilterChipProps): React.ReactElement;
+export {};

package/dist/components/Tag/Tag.d.ts

@@ -1,26 +1,28 @@
 import { VariantProps } from 'class-variance-authority';
-import { textVariants } from '../Text';
 declare const tagVariants: (props?: ({
-    hasIcon?: boolean | null | undefined;
+    tone?: "mint" | "blue" | "green" | "gray" | "brand" | "red" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    pill?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type TagProps = {
+export interface TagProps extends Omit<React.ComponentProps<"span">, "color">, VariantProps<typeof tagVariants> {
+    /** 라벨 좌측 아이콘/이모지 */
     icon?: React.ReactNode;
     children: React.ReactNode;
-    className?: string;
-    size?: VariantProps<typeof textVariants>['size'];
-    weight?: 'bold' | 'medium' | 'regular' | 'light';
-} & VariantProps<typeof tagVariants>;
+}
 /**
- * Tag
- * 간단한 태그 스타일을 위한 컴포넌트 (텍스트 + 아이콘 구성)
+ * Tag (a.k.a. Chip)
+ * 카테고리 / 상태 / 메타데이터 표시용 작은 라벨.
  *
- * @param icon 선택적 아이콘 이모지 텍스트
- * @param weight 텍스트 굵기 (기본값: bold) : bold, medium, regular, light
+ * @param tone `gray` · `brand` (default) · `mint` · `blue` · `red` · `green`
+ * @param size `xs` · `sm` · `md` (default) · `lg`
+ * @param pill 알약형 라운딩 (default `true`)
+ * @param icon 라벨 좌측 아이콘 또는 이모지
  *
- * @example 기본 사용
+ * @example
  * ```tsx
- * <Tag icon="🔥">인기</Tag>
+ * <Tag tone="brand">운동</Tag>
+ * <Tag tone="mint" size="sm" icon="🔥">14일</Tag>
  * ```
  */
-export declare function Tag({ icon, children, size, weight, className, }: TagProps): React.ReactElement;
+export declare function Tag({ className, tone, size, pill, icon, children, ...props }: TagProps): React.ReactElement;
 export {};

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

@@ -1,8 +1,13 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Tag } from './Tag';
+import { FilterChip } from './FilterChip';
 declare const meta: Meta<typeof Tag>;
 export default meta;
 type Story = StoryObj<typeof Tag>;
 export declare const Default: Story;
+export declare const Tones: Story;
+export declare const Sizes: Story;
 export declare const WithIcon: Story;
-export declare const CustomWeight: Story;
+export declare const Square: Story;
+export declare const FilterChips: StoryObj<typeof FilterChip>;
+export declare const FilterChipSizes: StoryObj<typeof FilterChip>;

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

@@ -1 +1,3 @@
 export * from './Tag';
+export * from './FilterChip';
+export * from './ChallengeTag';

package/dist/components/Text/Text.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const textVariants: (props?: ({
     size?: "display1" | "display2" | "heading1" | "heading2" | "body1" | "body2" | "caption1" | "caption2" | "caption3" | "pageTitle" | null | undefined;
-    weight?: "bold" | "medium" | "regular" | "light" | null | undefined;
+    weight?: "bold" | "medium" | "light" | "extrabold" | "semibold" | "regular" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Text
@@ -9,7 +9,7 @@ export declare const textVariants: (props?: ({
  *
  * @param size 텍스트 크기 : heading1, heading2, body1, body2, caption1, caption2, caption3, pageTitle
  * @default size body2
- * @param weight 텍스트 굵기 : bold, medium, regular, light
+ * @param weight 텍스트 굵기 : extrabold, bold, semibold, medium, regular, light
  * @param as HTML 태그 또는 커스텀 컴포넌트로 렌더링 (기본값: span)
  *
  * @example 기본 사용