@1d1s/design-system 0.2.1 → 0.2.3

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

@@ -1,8 +1,11 @@
 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;
@@ -19,13 +22,19 @@ declare const iconComponents: {
     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;
 };

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

@@ -1,10 +1,20 @@
 export * from './AddCircle';
+export * from './Bell';
+export * from './BookOpen';
 export * from './Calendar';
 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';

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

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

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

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

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

@@ -8,14 +8,17 @@ export interface RightSidebarChallenge {
     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/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/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,6 +13,7 @@ export * from './DatePicker';
 export * from './Dialog';
 export * from './DiaryCard';
 export * from './Dropdown';
+export * from './GoalAddList';
 export { Icon } from './Icons/Icon';
 export type { IconName, IconProps } from './Icons/Icon';
 export * from './ImagePlaceholder';
@@ -21,7 +23,6 @@ export * from './Text';
 export * from './PageWatermark';
 export * from './Pagination';
 export * from './ProgressBar';
-export * from './ProfileCard';
 export * from './RightSidebar';
 export * from './ScheduleCalendar';
 export * from './StatContainer';