@1d1s/design-system 0.1.11 → 0.1.13

package/dist/components/CheckList/CheckList.d.ts

@@ -0,0 +1,35 @@
+import { default as React } from 'react';
+export interface CheckListOption {
+    id: string;
+    label: React.ReactNode;
+    disabled?: boolean;
+}
+export interface CheckListProps {
+    /** 체크박스 옵션 목록 */
+    options: CheckListOption[];
+    /** 선택된 옵션의 ID 목록 */
+    value: string[];
+    /** 선택 변경 시 호출되는 콜백 */
+    onValueChange: (value: string[]) => void;
+    /** 추가 클래스 */
+    className?: string;
+    /** 전체 비활성화 여부 */
+    disabled?: boolean;
+}
+/**
+ * CheckList
+ * 여러 개의 ToggleCheck를 리스트 형태로 보여주고 다중 선택을 관리하는 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * <CheckList
+ *   options={[
+ *     { id: '1', label: '옵션 1' },
+ *     { id: '2', label: '옵션 2' }
+ *   ]}
+ *   value={selectedIds}
+ *   onValueChange={setSelectedIds}
+ * />
+ * ```
+ */
+export declare function CheckList({ options, value, onValueChange, className, disabled, }: CheckListProps): React.ReactElement;

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

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

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

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

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

@@ -0,0 +1,14 @@
+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
+ * 왼쪽의 네모 박스 안에 체크 표시가 들어가는 전형적인 체크박스 컴포넌트
+ *
+ * @param label 선택적 텍스트 라벨
+ * @param readOnly 읽기 전용 여부 (클릭 불가, 시각적 변경 없음)
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+declare const meta: Meta<typeof Checkbox>;
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+export declare const Default: Story;
+export declare const WithoutLabel: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const List: Story;

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

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

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

@@ -4,4 +4,6 @@ declare const meta: Meta<typeof GlobalChrome>;
 export default meta;
 type Story = StoryObj<typeof GlobalChrome>;
 export declare const Default: Story;
+export declare const Mobile: Story;
+export declare const Desktop: Story;
 export declare const BackOnly: Story;

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+export interface PaginationProps {
+    /** 현재 페이지 (1부터 시작) */
+    currentPage: number;
+    /** 총 페이지 수 */
+    totalPages: number;
+    /** 페이지 변경 핸들러 */
+    onPageChange: (page: number) => void;
+    /** 현재 페이지 양옆에 보여줄 페이지 개수 */
+    siblingCount?: number;
+    /** 추가 클래스 */
+    className?: string;
+}
+export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, className, }: PaginationProps): React.ReactElement | null;

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './Pagination';
+declare const meta: Meta<typeof Pagination>;
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+export declare const Default: Story;
+export declare const Short: Story;
+export declare const ManyPages: Story;
+export declare const MobileView: Story;

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

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

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

@@ -0,0 +1,21 @@
+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;
+    /** 추가 클래스 */
+    className?: string;
+}
+/**
+ * Streak
+ * 활동 기록을 깃허브 잔디(Contribution Graph) 스타일로 보여주는 컴포넌트.
+ * 7행 그리드 구조로 요일별로 쌓이며 가로로 데이터가 추가됩니다.
+ */
+export declare function Streak({ data, size, className, }: StreakProps): React.ReactElement;

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

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

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

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

package/dist/components/ToggleCheck/ToggleCheck.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+export interface ToggleCheckProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> {
+    children: React.ReactNode;
+}
+/**
+ * ToggleCheck
+ * 체크 표시가 포함된 토글 버튼 컴포넌트. 선택 상태에 따라 체크 아이콘과 배경색이 변경됩니다.
+ *
+ * @example
+ * ```tsx
+ * <ToggleCheck>선택지 1</ToggleCheck>
+ * ```
+ */
+export declare function ToggleCheck({ children, className, ...props }: ToggleCheckProps): React.ReactElement;

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

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

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

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

package/dist/components/index.d.ts

@@ -4,6 +4,8 @@ export * from './Button';
 export * from './Calendar';
 export * from './ChallengeCard';
 export * from './ChallengeListItem';
+export * from './CheckList';
+export * from './Checkbox';
 export * from './CircleAvatar';
 export * from './CircularProgress';
 export * from './DatePicker';
@@ -20,11 +22,14 @@ export * from './Menu';
 export * from './PageBackground';
 export * from './PageTitle';
 export * from './PageWatermark';
+export * from './Pagination';
 export * from './ProfileCard';
 export * from './Spacing';
+export * from './Streak';
 export * from './Tag';
 export * from './TextField';
 export * from './Toggle';
+export * from './ToggleCheck';
 export * from './ToggleGroup';
 export * from './Tooltip';
 export * from './UserListItem';