@1d1s/design-system 0.2.0 → 0.2.2

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

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

@@ -3,4 +3,5 @@ import { AppHeader } from './AppHeader';
 declare const meta: Meta<typeof AppHeader>;
 export default meta;
 type Story = StoryObj<typeof AppHeader>;
-export declare const Default: Story;
+export declare const WithProfile: Story;
+export declare const WithoutProfile: Story;

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

@@ -0,0 +1,41 @@
+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;
+    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, componentId, enableDataLayerTracking, impressionMode, onBannerClick, onBannerImpression, onBannerChange, onItemClick, className, ...props }: BannerCarouselProps): React.ReactElement | null;

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

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

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

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

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

@@ -0,0 +1,15 @@
+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;
+}
+/**
+ * GoalAddList
+ * 목표 문자열 목록을 보여주고 하단 입력창에서 Enter로 새 목표를 추가하는 컴포넌트.
+ */
+export declare function GoalAddList({ goals, defaultGoals, onGoalsChange, placeholder, disabled, addOnBlur, inputAriaLabel, className, ...props }: GoalAddListProps): React.ReactElement;

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+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/Icons/Bell.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Code2: (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,52 @@
+import { default as React } from 'react';
+declare const iconComponents: {
+    readonly AddCircle: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Bell: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly BookOpen: (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 Code2: (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 LogIn: (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 Palette: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly People: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly PencilLine: (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 Plane: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Plus: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Salad: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Search: (props: React.SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+    readonly Settings: (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/LogIn.d.ts

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

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

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface ProgressRingProps {
+    baseSize: number;
+    radius: number;
+    strokeWidth: number;
+    circumference: number;
+    dashOffset: number;
+    className?: string;
+}
+export declare function ProgressRing({ baseSize, radius, strokeWidth, circumference, dashOffset, className, }: ProgressRingProps): React.ReactElement;

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

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

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

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Settings: (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,11 +1,22 @@
 export * from './AddCircle';
+export * from './Bell';
+export * from './BookOpen';
 export * from './Calendar';
-export * from './ChallengeDumbbell';
-export * from './ChallengeFlag';
-export * from './ChallengeFlame';
-export * from './ChallengeLaptop';
-export * from './ChallengeTarget';
-export * from './ChallengeTrophy';
+export * from './Dumbbell';
+export * from './Flag';
+export * from './Flame';
+export * from './Code2';
+export * from './Icon';
+export * from './Laptop';
+export * from './LogIn';
+export * from './Palette';
+export * from './PencilLine';
+export * from './Plane';
+export * from './ProgressRing';
+export * from './Salad';
+export * from './Settings';
+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

@@ -1,21 +1,24 @@
 import { default as React } from 'react';
-type ChallengeTone = "blue" | "green" | "orange";
+type RightSidebarProgressTone = "blue" | "green" | "orange";
 export interface RightSidebarChallenge {
     id: string;
     title: string;
     progress: number;
     hasDeadline?: boolean;
-    tone?: ChallengeTone;
+    tone?: RightSidebarProgressTone;
 }
 export interface RightSidebarProps {
-    userName: string;
-    userHandle: string;
+    isLoggedIn?: boolean;
+    userName?: string;
+    userHandle?: string;
     userImage?: string;
     streakDays: number;
     fixed?: boolean;
     className?: string;
     diaryButtonLabel?: string;
     myPageButtonLabel?: string;
+    loginButtonLabel?: string;
+    loginPromptMessage?: string;
     settingButtonLabel?: string;
     challengeTitle?: string;
     challenges?: RightSidebarChallenge[];
@@ -23,6 +26,7 @@ export interface RightSidebarProps {
     onOpenSettings?(): void;
     onWriteDiary?(): void;
     onGoMyPage?(): void;
+    onLogin?(): void;
 }
-export declare function RightSidebar({ userName, userHandle, userImage, streakDays, fixed, className, diaryButtonLabel, myPageButtonLabel, settingButtonLabel, challengeTitle, challenges, onCollapseClick, onOpenSettings, onWriteDiary, onGoMyPage, }: RightSidebarProps): React.ReactElement;
+export declare function RightSidebar({ isLoggedIn, userName, userHandle, userImage, streakDays, fixed, className, diaryButtonLabel, myPageButtonLabel, loginButtonLabel, loginPromptMessage, settingButtonLabel, challengeTitle, challenges, onCollapseClick, onOpenSettings, onWriteDiary, onGoMyPage, onLogin, }: RightSidebarProps): React.ReactElement;
 export {};

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof RightSidebar>;
 export default meta;
 type Story = StoryObj<typeof RightSidebar>;
 export declare const Default: Story;
+export declare const LoggedOut: Story;

package/dist/components/StatContainer/StatContainer.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
+import { IconName } from '../Icons/Icon';
 export interface StatContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    icon: React.ReactNode;
+    icon?: React.ReactNode;
+    iconName?: IconName;
     title: React.ReactNode;
     value: React.ReactNode;
     unit: React.ReactNode;
@@ -10,4 +12,4 @@ export interface StatContainerProps extends Omit<React.HTMLAttributes<HTMLDivEle
  * StatContainer
  * 아이콘, 제목, 데이터, 단위를 표시하는 정보 카드 컴포넌트
  */
-export declare function StatContainer({ icon, title, value, unit, className, iconClassName, ...props }: StatContainerProps): React.ReactElement;
+export declare function StatContainer({ icon, iconName, title, value, unit, className, iconClassName, ...props }: StatContainerProps): React.ReactElement;

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

@@ -1,12 +1,13 @@
 import { VariantProps } from 'class-variance-authority';
+import { textVariants } from '../Text';
 declare const tagVariants: (props?: ({
     hasIcon?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TagProps = {
-    icon?: string;
+    icon?: React.ReactNode;
     children: React.ReactNode;
     className?: string;
-    size?: 'caption3' | 'body1';
+    size?: VariantProps<typeof textVariants>['size'];
     weight?: 'bold' | 'medium' | 'regular' | 'light';
 } & VariantProps<typeof tagVariants>;
 /**

package/dist/components/UserListItem/UserListItem.d.ts

@@ -1,10 +1,10 @@
-interface UserListItemProps {
+export interface UserListItemProps {
     className?: string;
     userName: string;
     userImageSrc?: string;
+    timeLabel?: string;
     isAuthor: boolean;
     onAccept?(): void;
     onReject?(): void;
 }
-export declare function UserListItem({ className, userName, userImageSrc, isAuthor, onAccept, onReject, }: UserListItemProps): React.ReactElement;
-export {};
+export declare function UserListItem({ className, userName, userImageSrc, timeLabel, isAuthor, onAccept, onReject, }: UserListItemProps): React.ReactElement;

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordion';
 export * from './AppHeader';
+export * from './BannerCarousel';
 export * from './Button';
 export * from './Calendar';
 export * from './ChallengeCard';
@@ -12,26 +13,24 @@ export * from './DatePicker';
 export * from './Dialog';
 export * from './DiaryCard';
 export * from './Dropdown';
-export * from './Footer';
+export * from './GoalAddList';
+export { Icon } from './Icons/Icon';
+export type { IconName, IconProps } from './Icons/Icon';
 export * from './ImagePlaceholder';
 export * from './ImagePicker';
 export * from './InfoButton';
 export * from './Text';
-export * from './PageBackground';
-export * from './PageTitle';
 export * from './PageWatermark';
 export * from './Pagination';
-export * from './ProfileCard';
+export * from './ProgressBar';
 export * from './RightSidebar';
 export * from './ScheduleCalendar';
-export * from './Spacing';
 export * from './StatContainer';
 export * from './StepIndicator';
 export * from './Streak';
 export * from './Tag';
 export * from './TextField';
 export * from './Toggle';
-export * from './ToggleCheck';
 export * from './ToggleGroup';
 export * from './Tooltip';
 export * from './UserListItem';