@1d1s/design-system 1.0.0 → 1.1.0

package/dist/components/ScheduleCalendar/ScheduleCalendar.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+type DayTone = "default" | "strong" | "accent" | "muted";
+type BarTone = "main" | "soft";
+export interface ScheduleCalendarBar {
+    width?: number | string;
+    tone?: BarTone;
+}
+export interface ScheduleCalendarCell {
+    id?: string;
+    day?: React.ReactNode;
+    dayTone?: DayTone;
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+    bars?: ScheduleCalendarBar[];
+    highlighted?: boolean;
+    muted?: boolean;
+    colSpan?: number;
+    content?: React.ReactNode;
+}
+export interface ScheduleCalendarProps {
+    rows: ScheduleCalendarCell[][];
+    weekLabels?: string[];
+    cellMinHeight?: number;
+    className?: string;
+}
+/**
+ * ScheduleCalendar
+ * 주 단위 표 형태로 일정을 보여주는 커스텀 캘린더 컴포넌트.
+ */
+export declare function ScheduleCalendar({ rows, weekLabels, cellMinHeight, className, }: ScheduleCalendarProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { ScheduleCalendar } from './ScheduleCalendar';
+declare const meta: Meta<typeof ScheduleCalendar>;
+export default meta;
+type Story = StoryObj<typeof ScheduleCalendar>;
+export declare const OneMonth: Story;
+export declare const TwoWeeks: Story;
+export declare const ThreeWeeks: Story;
+export declare const MobileOneMonth: Story;
+export declare const MobileTwoWeeks: Story;

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

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

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,53 @@
+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>>;
+/**
+ * SelectTrigger
+ * Select 기본 트리거 컴포넌트
+ *
+ * @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 기본 컨텐츠 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <SelectContent>
+ *   <SelectGroup>
+ *     <SelectItem value="option1">Option 1</SelectItem>
+ *     <SelectItem value="option2">Option 2</SelectItem>
+ *   </SelectGroup>
+ * </SelectContent>
+ * ```
+ */
+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, };

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

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

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 declare const statCardVariants: (props?: ({
-    tone?: "mint" | "blue" | "gray" | "brand" | "white" | null | undefined;
+    tone?: "mint" | "blue" | "gray" | "white" | "brand" | 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> {

package/dist/components/StepIndicator/StepIndicator.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface StepIndicatorItem {
+    id?: string;
+    label: React.ReactNode;
+}
+type StepIndicatorSize = "sm" | "md" | "lg";
+export interface StepIndicatorProps {
+    steps: StepIndicatorItem[];
+    /** 현재 단계 (1부터 시작) */
+    currentStep: number;
+    size?: StepIndicatorSize;
+    className?: string;
+}
+/**
+ * StepIndicator
+ * 단계 진행 상태를 가로 라인과 원형 포인트로 표시하는 컴포넌트.
+ */
+export declare function StepIndicator({ steps, currentStep, size, className, }: StepIndicatorProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { StepIndicator } from './StepIndicator';
+declare const meta: Meta<typeof StepIndicator>;
+export default meta;
+type Story = StoryObj<typeof StepIndicator>;
+export declare const Default: Story;
+export declare const Completed: Story;
+export declare const FirstStep: Story;
+export declare const Small: Story;
+export declare const Large: Story;

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

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

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

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface StreakData {
+    /** 날짜 (YYYY-MM-DD) */
+    date: string;
+    /** 활동 레벨 (0-4) */
+    count: number;
+}
+export interface StreakProps {
+    /** 활동 데이터 (count 0-4 권장, 데이터 개수에 따라 가로로 길어짐) */
+    data?: StreakData[];
+    /** 각 날짜 박스의 크기 (픽셀) */
+    size?: number;
+    /** 박스 사이 간격 (픽셀) */
+    gap?: number;
+    /** 추가 클래스 */
+    className?: string;
+    /**
+     * 셀 클릭 시 팝오버 하단에 렌더링할 액션 영역.
+     * 버튼, 링크 등 인터랙티브 요소를 넣을 수 있습니다.
+     */
+    renderCellActions?: (item: StreakData) => React.ReactNode;
+}
+/**
+ * Streak
+ * 활동 기록을 깃허브 잔디(Contribution Graph) 스타일로 보여주는 컴포넌트.
+ * 7행 그리드 구조로 요일별로 쌓이며 가로로 데이터가 추가됩니다.
+ *
+ * - 데스크탑: hover 시 날짜/활동 정보 팝오버 표시
+ * - 모바일: 클릭 시 테두리 + 정보 팝오버 표시, renderCellActions로 액션 영역 추가 가능
+ */
+export declare function Streak({ data, size, gap, className, renderCellActions, }: StreakProps): React.ReactElement;

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

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

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

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 declare const tagVariants: (props?: ({
-    tone?: "mint" | "blue" | "green" | "gray" | "brand" | "red" | null | undefined;
+    tone?: "mint" | "blue" | "green" | "gray" | "red" | "brand" | null | undefined;
     size?: "sm" | "md" | "lg" | "xs" | null | undefined;
     pill?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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" | "light" | "extrabold" | "semibold" | "regular" | null | undefined;
+    weight?: "bold" | "extrabold" | "semibold" | "medium" | "regular" | "light" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * Text

package/dist/components/TextField/TextField.d.ts

@@ -6,7 +6,7 @@ declare const fieldVariants: (props?: ({
     hasIconLeft?: boolean | null | undefined;
     hasSuffix?: boolean | null | undefined;
     multiline?: boolean | null | undefined;
-    state?: "default" | "filled" | "disabled" | "error" | "focus" | null | undefined;
+    state?: "disabled" | "default" | "error" | "focus" | "filled" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof fieldVariants> {
     label?: React.ReactNode;
@@ -39,5 +39,5 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
  * <TextField label="기간" defaultValue="14" suffix="일" size="sm" />
  * ```
  */
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 export {};

package/dist/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,21 @@
+import { VariantProps } from 'class-variance-authority';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+declare const toggleGroupItemVariants: (props?: ({
+    shape?: "square" | "rounded" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface ToggleGroupItemProps extends React.ComponentProps<typeof ToggleGroupPrimitive.Item>, VariantProps<typeof toggleGroupItemVariants> {
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * ToggleGroup
+ * 토글 그룹 컴포넌트
+ */
+export declare function ToggleGroup({ children, className, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root>): React.ReactElement;
+/**
+ * ToggleGroupItem
+ * 토글 그룹 안에서 사용하는 카테고리형 아이템 컴포넌트.
+ */
+export declare function ToggleGroupItem({ icon, shape, children, className, ...props }: ToggleGroupItemProps): React.ReactElement;
+export {};

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

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

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

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

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.ReactElement;
+declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare function TooltipContent({ className, sideOffset, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.ReactElement;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

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

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

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

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

package/dist/components/index.d.ts

@@ -1,21 +1,39 @@
+export * from './Accordion';
 export * from './AchievementBadge';
+export * from './AppHeader';
+export * from './AvatarImagePicker';
 export * from './Banner';
+export * from './BannerCarousel';
 export * from './BottomNav';
 export * from './Button';
+export * from './Calendar';
 export * from './Card';
+export * from './CheckContainer';
+export * from './CheckList';
 export * from './Checkbox';
 export * from './CircleAvatar';
 export * from './CircularProgress';
 export * from './CommentRow';
+export * from './CommentThread';
+export * from './DatePicker';
+export * from './Dialog';
 export * from './Dropdown';
+export * from './GoalAddList';
 export * from './Heatmap';
 export { Icon } from './Icons/Icon';
 export type { IconName, IconProps } from './Icons/Icon';
+export * from './ImagePicker';
+export * from './ImagePlaceholder';
+export * from './PageWatermark';
 export * from './ProgressBar';
 export * from './Radio';
+export * from './RightSidebar';
+export * from './ScheduleCalendar';
 export * from './SectionHeader';
+export * from './Select';
 export * from './StatCard';
 export * from './StatusBadge';
+export * from './StepIndicator';
 export * from './Streak';
 export * from './Stripe';
 export * from './Tabs';
@@ -23,4 +41,6 @@ export * from './Tag';
 export * from './Text';
 export * from './TextField';
 export * from './Toggle';
+export * from './ToggleGroup';
+export * from './Tooltip';
 export * from './TopNav';