@1d1s/design-system 0.2.32 → 0.2.34

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
+    label?: React.ReactNode;
+    labelHint?: React.ReactNode;
+    helper?: React.ReactNode;
+    error?: React.ReactNode;
+    /** 우하단 글자수 카운터 표시 */
+    count?: boolean;
+    /** maxLength — count와 함께 쓰면 `n/max` 표시 */
+    max?: number;
+    /** 부모 너비 100% (default `true`). false면 380px */
+    full?: boolean;
+}
+/**
+ * TextArea
+ * 다중 행 입력 — 글자수 카운터, label/helper/error 지원.
+ *
+ * @example
+ * ```tsx
+ * <TextArea placeholder="오늘 챌린지 어떠셨나요?" rows={4} count max={500} />
+ * ```
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { TextArea } from './TextArea';
+declare const meta: Meta<typeof TextArea>;
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+export declare const Default: Story;
+export declare const WithCount: Story;
+export declare const WithLabelHelper: Story;
+export declare const ShortReply: Story;
+export declare const Error: Story;

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

@@ -1,26 +1,43 @@
 import { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import * as React from "react";
+export type TextFieldState = "default" | "focus" | "filled" | "error" | "disabled";
 declare const fieldVariants: (props?: ({
-    variant?: "search" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+    hasIconLeft?: boolean | null | undefined;
+    hasSuffix?: boolean | null | undefined;
     multiline?: boolean | null | undefined;
+    state?: "default" | "filled" | "disabled" | "error" | "focus" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof fieldVariants> {
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof fieldVariants> {
     label?: React.ReactNode;
     labelHint?: React.ReactNode;
-    error?: string;
+    helper?: React.ReactNode;
+    error?: React.ReactNode;
+    /** prefix 아이콘 (왼쪽) */
+    iconLeft?: React.ReactNode;
+    /** suffix 텍스트/노드 (오른쪽 — 글자수, 단위 등) */
+    suffix?: React.ReactNode;
+    /** suffix 대신 자유 노드 — iconRight (suffix와 동일 자리) */
+    iconRight?: React.ReactNode;
     multiline?: boolean;
     rows?: number;
     cols?: number;
 }
 /**
- * TextField
- * 시안형 입력 필드 컴포넌트. `multiline` 사용 시 TextArea 스타일로 렌더링합니다.
+ * TextField v3.1
+ * 입력 필드 — 라벨 / 아이콘 / suffix / 헬퍼·에러 / 5단 사이즈 / 5 visual state.
+ *
+ * @param size `xs`(26)·`sm`(32)·`md`(38, default)·`lg`(46)·`xl`(54)
+ * @param state 비주얼 강제 — `default`·`focus`·`filled`·`error`·`disabled` (스토리북 데모/디자인 토큰용)
+ * @param suffix 우측 텍스트 (글자수/단위 등)
+ * @param helper / `error` 하단 안내 — error가 있으면 helper 무시
+ *
+ * @example
+ * ```tsx
+ * <TextField label="이메일" iconLeft={<Mail />} placeholder="email@..." helper="가입 메일" />
+ * <TextField label="목표" defaultValue="아침 30분" suffix="6/20" />
+ * <TextField label="기간" defaultValue="14" suffix="일" size="sm" />
+ * ```
  */
-export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-export type TextAreaProps = Omit<TextFieldProps, 'multiline' | 'type'>;
-/**
- * TextArea
- * TextField의 multiline 전용 래퍼 컴포넌트.
- */
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLTextAreaElement | HTMLInputElement>>;
 export {};

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

@@ -3,7 +3,10 @@ import { TextField } from './TextField';
 declare const meta: Meta<typeof TextField>;
 export default meta;
 type Story = StoryObj<typeof TextField>;
-export declare const InputOnly: Story;
-export declare const WithRequiredLabel: Story;
-export declare const DescriptionTextArea: Story;
-export declare const Search: Story;
+export declare const Default: Story;
+export declare const Sizes: Story;
+export declare const States: Story;
+export declare const WithIconLeft: Story;
+export declare const WithSuffix: Story;
+export declare const WithLabel: Story;
+export declare const WithError: Story;

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

@@ -1 +1,2 @@
 export * from './TextField';
+export * from './TextArea';

package/dist/components/Toggle/Toggle.d.ts

@@ -1,16 +1,17 @@
-import { VariantProps } from 'class-variance-authority';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-declare const toggleVariants: (props?: ({
-    shape?: "square" | "rounded" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-interface ToggleProps extends React.ComponentProps<typeof TogglePrimitive.Root>, VariantProps<typeof toggleVariants> {
-    icon?: React.ReactNode;
-    children: React.ReactNode;
-    className?: string;
+import * as React from "react";
+export interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    label?: React.ReactNode;
+    /** 라벨 위치 */
+    labelPosition?: "left" | "right";
 }
 /**
- * Toggle
- * 카테고리 선택형 토글 버튼 컴포넌트. `shape`로 둥근/사각 스타일을 선택할 수 있습니다.
+ * Toggle v3
+ * 38×22 알약형 스위치. on=brand bg, off=gray-300, 흰색 노브.
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultChecked label="알림 켜짐" />
+ * <Toggle label="공개" labelPosition="left" />
+ * ```
  */
-export declare function Toggle({ icon, shape, children, className, ...props }: ToggleProps): React.ReactElement;
-export {};
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -3,8 +3,8 @@ import { Toggle } from './Toggle';
 declare const meta: Meta<typeof Toggle>;
 export default meta;
 type Story = StoryObj<typeof Toggle>;
-export declare const RoundedSelected: Story;
-export declare const SquareSelected: Story;
-export declare const RowPreview: Story;
-export declare const RoundedRowPreview: Story;
-export declare const CustomSizeByClassName: Story;
+export declare const Default: Story;
+export declare const Off: Story;
+export declare const NoLabel: Story;
+export declare const Disabled: Story;
+export declare const LabelPosition: Story;

package/dist/components/TopNav/TopNav.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+export interface TopNavItem {
+    id: string;
+    label: React.ReactNode;
+    onClick?: () => void;
+}
+export interface TopNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "children" | "onChange"> {
+    /** 좌측 브랜드 영역 (로고 + 이름). `<TopNav.Brand />` 또는 임의 노드 */
+    brand?: React.ReactNode;
+    /** 가운데 네비 항목 */
+    items?: TopNavItem[];
+    /** 활성 항목의 id */
+    activeId?: string;
+    /** 항목 클릭 콜백 (id 전달, 그 후 item.onClick 호출) */
+    onChange?: (id: string) => void;
+    /** 우측 영역 (검색 / 알림 / 프로필 등) */
+    end?: React.ReactNode;
+    /** 컴팩트(태블릿) 변형 — height 56px, padding 줄어듦 */
+    compact?: boolean;
+}
+/**
+ * TopNav
+ * 데스크톱/태블릿 상단 sticky 네비게이션 — 좌측 브랜드 / 가운데 항목 / 우측 슬롯.
+ *
+ * @example
+ * ```tsx
+ * <TopNav
+ *   brand={<TopNav.Brand letters="1D" name="1Day 1Streak" />}
+ *   activeId={tab}
+ *   onChange={setTab}
+ *   items={[
+ *     { id: 'home', label: '홈' },
+ *     { id: 'challenge', label: '챌린지' },
+ *   ]}
+ *   end={<>... 검색 / 알림 / 아바타 ...</>}
+ * />
+ * ```
+ */
+export declare function TopNav({ brand, items, activeId, onChange, end, compact, className, ...props }: TopNavProps): React.ReactElement;
+export declare namespace TopNav {
+    var Brand: typeof TopNavBrand;
+}
+export interface TopNavBrandProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /** 로고 박스 안에 표시할 약자 (e.g. "1D") */
+    letters?: React.ReactNode;
+    /** 로고 박스 옆에 표시할 풀 네임 */
+    name?: React.ReactNode;
+    /** 로고 박스 클릭 가능 시 onClick */
+    onLogoClick?: () => void;
+}
+/**
+ * TopNav.Brand
+ * 그라디언트 로고 박스 + 이름. 캘러는 letters/name만 넘기면 됨.
+ */
+export declare function TopNavBrand({ letters, name, onLogoClick, className, ...props }: TopNavBrandProps): React.ReactElement;

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

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

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

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

package/dist/components/index.d.ts

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