@1d1s/design-system 1.3.0 → 1.4.0

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -10,8 +10,10 @@ export interface BottomSheetContentProps extends React.ComponentProps<typeof Dia
     inset?: number;
     /** 상단 그립 핸들 노출 (기본 true) */
     showHandle?: boolean;
+    /** 우측 상단 닫기 버튼 노출 (기본 false) */
+    showClose?: boolean;
 }
-declare function BottomSheetContent({ className, children, inset, showHandle, style, ...props }: BottomSheetContentProps): React.ReactElement;
+declare function BottomSheetContent({ className, children, inset, showHandle, showClose, style, ...props }: BottomSheetContentProps): React.ReactElement;
 declare function BottomSheetHeader({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
 declare function BottomSheetFooter({ className, ...props }: React.ComponentProps<"div">): React.ReactElement;
 declare function BottomSheetTitle({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.ReactElement;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -3,7 +3,16 @@ import { DateRange } from 'react-day-picker';
 interface BasePickerProps {
     className?: string;
     placeholder?: string;
+    /** 비활성화 상태. 트리거를 클릭해도 열리지 않으며 회색조로 표시된다. */
+    disabled?: boolean;
     disableClickPropagation?: boolean;
+    /**
+     * 모바일 뷰포트에서 팝오버 대신 바텀시트로 표시한다. (기본 true)
+     * false면 항상 팝오버로 표시.
+     */
+    mobileSheet?: boolean;
+    /** 바텀시트 상단 제목 (모바일에서만 표시). 기본값은 placeholder. */
+    sheetTitle?: string;
 }
 export interface DatePickerProps extends BasePickerProps {
     value: Date | undefined;
@@ -17,10 +26,10 @@ export interface RangeDatePickerProps extends BasePickerProps {
  * DatePicker
  * 단일 날짜를 선택하는 시안형 Date Picker 컴포넌트.
  */
-export declare function DatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: DatePickerProps): React.ReactElement;
+export declare function DatePicker({ value, onChange, className, placeholder, disabled, disableClickPropagation, mobileSheet, sheetTitle, }: DatePickerProps): React.ReactElement;
 /**
  * RangeDatePicker
  * 시작일/종료일 범위를 선택하는 시안형 Date Range Picker 컴포넌트.
  */
-export declare function RangeDatePicker({ value, onChange, className, placeholder, disableClickPropagation, }: RangeDatePickerProps): React.ReactElement;
+export declare function RangeDatePicker({ value, onChange, className, placeholder, disabled, disableClickPropagation, mobileSheet, sheetTitle, }: RangeDatePickerProps): React.ReactElement;
 export {};

package/dist/components/Dropdown/DropdownMenu.d.ts

@@ -12,6 +12,12 @@ export interface DropdownMenuProps extends Omit<React.HTMLAttributes<HTMLDivElem
     onSelect?: (value: string) => void;
     /** 메뉴 너비 (default 240) */
     width?: number | string;
+    /**
+     * 열림 상태. 지정하면 입·퇴장 애니메이션과 마운트/언마운트를 내부에서 관리한다.
+     * (소비처는 조건부 렌더 없이 항상 렌더하고 open만 토글)
+     * 미지정 시 기존처럼 항상 정적으로 표시한다.
+     */
+    open?: boolean;
 }
 /**
  * DropdownMenu
@@ -26,4 +32,4 @@ export interface DropdownMenuProps extends Omit<React.HTMLAttributes<HTMLDivElem
  * />
  * ```
  */
-export declare function DropdownMenu({ items, value, onSelect, width, className, style, ...props }: DropdownMenuProps): React.ReactElement;
+export declare function DropdownMenu({ items, value, onSelect, width, open, className, style, ...props }: DropdownMenuProps): React.ReactElement | null;

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

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

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

@@ -2,6 +2,7 @@ export * from './AddCircle';
 export * from './Bell';
 export * from './BookOpen';
 export * from './Calendar';
+export * from './Challenge';
 export * from './Dumbbell';
 export * from './Flag';
 export * from './Flame';

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SegmentedControlOption {
+    value: string;
+    label: React.ReactNode;
+    /** 좌측 아이콘 */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">, VariantProps<typeof trackVariants> {
+    options: SegmentedControlOption[];
+    /** 선택값 (controlled) */
+    value?: string;
+    /** 초기 선택값 (uncontrolled) */
+    defaultValue?: string;
+    onValueChange?(value: string): void;
+}
+/**
+ * SegmentedControl
+ * 회색 트랙 위에서 흰 인디케이터가 슬라이드 이동하는 단일 선택 세그먼트 컨트롤.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   aria-label="챌린지 유형"
+ *   options={[
+ *     { value: "personal", label: "개인 챌린지", icon: <Person /> },
+ *     { value: "group", label: "단체 챌린지", icon: <People /> },
+ *   ]}
+ *   defaultValue="personal"
+ *   onValueChange={(v) => setType(v)}
+ * />
+ * ```
+ */
+export declare function SegmentedControl({ options, value, defaultValue, onValueChange, size, fullWidth, className, ...props }: SegmentedControlProps): React.ReactElement;
+export {};

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

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

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

@@ -17,7 +17,7 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
     iconLeft?: React.ReactNode;
     /** suffix 텍스트/노드 (오른쪽 — 글자수, 단위 등) */
     suffix?: React.ReactNode;
-    /** suffix 대신 자유 노드 — iconRight (suffix와 동일 자리) */
+    /** suffix 대신 자유 노드 — iconRight (suffix와 동일 자리, 버튼 등 클릭 가능) */
     iconRight?: React.ReactNode;
     multiline?: boolean;
     rows?: number;

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

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

package/dist/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './ProgressBar';
 export * from './Radio';
 export * from './ScheduleCalendar';
 export * from './SectionHeader';
+export * from './SegmentedControl';
 export * from './Select';
 export * from './Snackbar';
 export * from './StatCard';

package/dist/hooks/index.d.ts

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

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,8 @@
+/**
+ * useMediaQuery
+ * 주어진 미디어쿼리의 매칭 여부를 SSR 안전하게 반환한다.
+ * 서버 렌더링 시점에는 항상 false를 반환하고, 마운트 이후 실제 값으로 동기화한다.
+ */
+export declare function useMediaQuery(query: string): boolean;
+/** 모바일 뷰포트(기본 640px 이하) 여부를 반환한다. */
+export declare function useIsMobile(maxWidth?: number): boolean;

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from './components';
+export * from './hooks';
 export * from './lib/utils';