@thewrong/ui 0.1.0

package/dist/src/components/_shared/form-size-tokens.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 폼 컴포넌트(Input/Select/Textarea) 우측 슬롯의 size 토큰.
+ *
+ * Button/Input/Select/Textarea의 size 토큰 정렬을 단일 출처로 관리한다.
+ */
+export type FormFieldSize = "mini" | "small" | "medium" | "large";
+/** 빌트인 clearable의 X 아이콘과 호출부 trailingIcon의 svg에 적용할 height/width 클래스. */
+export declare const SLOT_ICON_SIZE_CLASS: Record<FormFieldSize, string>;
+/** Select의 chevron 전용 사이즈 — 일반 슬롯 아이콘과 동일 비율. */
+export declare const CHEVRON_SIZE_CLASS: Record<FormFieldSize, string>;
+/** trailingIcon/badge wrapper에 깔아 안의 svg가 자동으로 따라가게 하는 arbitrary selector. */
+export declare const SLOT_CHILD_ICON_CLASS: Record<FormFieldSize, string>;
+/** badge wrapper에 적용할 텍스트 사이즈 — 호출부가 inline className으로 명시 시 override. */
+export declare const SLOT_BADGE_TEXT_CLASS: Record<FormFieldSize, string>;
+/** 슬롯 간 gap — 디자인 시안 medium 기준 12px. */
+export declare const SLOT_GAP_CLASS: Record<FormFieldSize, string>;

package/dist/src/components/action-toast/ActionToast.d.ts

@@ -0,0 +1,56 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Button } from '../../../components/button';
+type ButtonVisualProps = Partial<Pick<ComponentProps<typeof Button>, "variant" | "appearance" | "size" | "leadingIcon" | "trailingIcon">>;
+export interface ActionToastButton extends ButtonVisualProps {
+    label: ReactNode;
+    /**
+     * 클릭 시 호출. 호출 후 토스트는 자동으로 닫힌다.
+     * 닫지 않고 유지하려면 `closeOnClick: false`.
+     *
+     * 콜백이 입력값(prompt/textarea)을 인자로 받음. input이 없으면 빈 문자열.
+     */
+    onClick: (inputValue: string) => void;
+    closeOnClick?: boolean;
+    disabled?: boolean;
+}
+export type ActionToastInput = {
+    type: "text";
+    placeholder?: string;
+    defaultValue?: string;
+} | {
+    type: "textarea";
+    placeholder?: string;
+    defaultValue?: string;
+    rows?: number;
+};
+interface ShowActionToastArgs {
+    message: ReactNode;
+    actions: ActionToastButton[];
+    /** 톤. 좌측 아이콘 색상에만 반영(배경/텍스트는 일반 토스트와 동일한 다크 그레이). */
+    tone?: "warning" | "info" | "danger";
+    /** 좌측 아이콘 커스텀. 미지정 시 톤별 기본 아이콘. null이면 아이콘 숨김. */
+    icon?: ReactNode | null;
+    input?: ActionToastInput;
+    /** 토스트 폭(px) 커스텀. 기본 680(일반 토스트와 동일). 모바일은 viewport-32px로 자동 fit. */
+    widthPx?: number;
+    /**
+     * 백드롭 노출 여부. 기본 true(모달 위 결정 강제용).
+     * 단순 알림(예: 새 버전 안내)처럼 사용자 동작을 막을 필요 없을 때 false.
+     * false면 클릭-아웃 dismiss도 비활성.
+     */
+    backdrop?: boolean;
+}
+/**
+ * 사용자 결정이 필요한 액션 토스트. 자동 dismiss 없음.
+ * 위치는 전역 Toaster를 따름(데스크탑=bottom-center, 모바일=top-center).
+ * 한 번에 최대 1개만 노출(같은 id로 덮어쓰기).
+ *
+ * 컨벤션: 다크 시트 위에서 outlined 버튼은 border가 묻혀 가독성이 떨어진다.
+ * 액션 버튼은 `appearance: "filled"`로 통일할 것.
+ *
+ * 사용 전 앱 루트에 `react-hot-toast`의 `<Toaster />`가 마운트돼 있어야 한다.
+ */
+export declare function showActionToast({ message, actions, tone, icon, input, widthPx, backdrop, }: ShowActionToastArgs): string;
+export declare function dismissActionToast(): void;
+export declare function isActionToastActive(): boolean;
+export {};

package/dist/src/components/action-toast/index.d.ts

@@ -0,0 +1,2 @@
+export { showActionToast, dismissActionToast, isActionToastActive, } from './ActionToast';
+export type { ActionToastButton, ActionToastInput } from './ActionToast';

package/dist/src/components/animated-height/AnimatedHeight.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+export interface AnimatedHeightProps {
+    children: ReactNode;
+    /** 트랜지션 시간(ms). 기본 220. */
+    durationMs?: number;
+    /** cubic-bezier 커브(motion). 기본 ease-out. */
+    ease?: [number, number, number, number];
+    /** 외부 wrapper 추가 className. */
+    className?: string;
+}
+/**
+ * 자식 콘텐츠 높이가 변할 때 부드럽게 이행시키는 wrapper.
+ *
+ * 모드 토글이나 행 추가/삭제 같은 가벼운 변화에 부드러운 트랜지션으로 UX 품질을 높인다.
+ * 구현은 ResizeObserver로 자식 높이를 측정해 motion height로 이행. **첫 측정은 transition 0**으로
+ * 적용해 진입 시점 점프를 방지한다 (motion-discussions#1884의 표준 패턴).
+ *
+ * 모달 외곽이 아니라 **모달 안의 콘텐츠 영역**을 감싸야 한다. 외곽 모달에 직접 적용하면 진입/퇴장
+ * 모션과 충돌한다.
+ *
+ * @example
+ * ```tsx
+ * <AnimatedHeight>
+ *   <ModeToggle />
+ *   {showAdvanced && <AdvancedOptions />}
+ *   <RowList rows={rows} />
+ * </AnimatedHeight>
+ * ```
+ */
+export declare function AnimatedHeight({ children, durationMs, ease, className, }: AnimatedHeightProps): import("react").JSX.Element;

package/dist/src/components/animated-height/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimatedHeight } from './AnimatedHeight';
+export type { AnimatedHeightProps } from './AnimatedHeight';

package/dist/src/components/badge/Badge.d.ts

@@ -0,0 +1,2 @@
+import { BadgeProps } from './types';
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLDivElement | HTMLSpanElement>>;

package/dist/src/components/badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeBaseProps, BadgeDivProps, BadgeCommonProps, BadgeColor, BadgeVariant, BadgeSize, } from './types';

package/dist/src/components/badge/types.d.ts

@@ -0,0 +1,56 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+/**
+ * Badge 컴포넌트의 크기 타입
+ */
+export type BadgeSize = "xsmall" | "small" | "medium" | "large";
+/**
+ * Badge 컴포넌트의 스타일 변형 타입
+ */
+export type BadgeVariant = "fill" | "weak";
+/**
+ * Badge 컴포넌트의 색상 타입
+ */
+export type BadgeColor = "primary" | "secondary" | "success" | "error" | "warning" | "info" | "neutral";
+/**
+ * Badge 컴포넌트의 공통 Props
+ */
+export interface BadgeCommonProps {
+    /**
+     * Badge의 크기
+     */
+    size?: BadgeSize;
+    /**
+     * Badge의 스타일 (모양)
+     */
+    variant?: BadgeVariant;
+    /**
+     * Badge의 색상
+     */
+    color?: BadgeColor;
+    /**
+     * Badge의 내용
+     */
+    children: ReactNode;
+}
+/**
+ * Badge 컴포넌트의 Props (span 태그용)
+ */
+export interface BadgeBaseProps extends Omit<ComponentPropsWithoutRef<"span">, "color" | "children">, BadgeCommonProps {
+    /**
+     * `as` prop이 없으면 span 태그로 렌더링돼요.
+     */
+    as?: never;
+}
+/**
+ * Badge 컴포넌트의 Props (div 태그용)
+ */
+export interface BadgeDivProps extends Omit<ComponentPropsWithoutRef<"div">, "color" | "children">, BadgeCommonProps {
+    /**
+     * `as` prop을 통해 Badge의 태그를 변경할 수 있어요.
+     */
+    as: "div";
+}
+/**
+ * Badge 컴포넌트의 Props
+ */
+export type BadgeProps = BadgeBaseProps | BadgeDivProps;

package/dist/src/components/badge/utils.d.ts

@@ -0,0 +1,13 @@
+import { BadgeColor, BadgeVariant, BadgeSize } from './types';
+/**
+ * Badge 색상에 따른 Tailwind 클래스 매핑
+ */
+export declare const getBadgeColorClasses: (color?: BadgeColor, variant?: BadgeVariant) => string;
+/**
+ * Badge 크기에 따른 Tailwind 클래스 매핑
+ */
+export declare const getBadgeSizeClasses: (size?: BadgeSize) => string;
+/**
+ * Badge의 기본 클래스 (공통 스타일)
+ */
+export declare const getBadgeBaseClasses: () => string;

package/dist/src/components/button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonBaseProps, ButtonLinkProps } from './types';
+export declare const Button: import('react').ForwardRefExoticComponent<(ButtonBaseProps | ButtonLinkProps) & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/src/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonBaseProps, ButtonLinkProps, ButtonVariant, ButtonAppearance, ButtonSize, ButtonDisplay, } from './types';

package/dist/src/components/button/types.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "danger";
+export type ButtonAppearance = "filled" | "outlined" | "transparent";
+export type ButtonSize = "mini" | "small" | "medium" | "large";
+export type ButtonDisplay = "inline" | "block";
+export interface ButtonCommonProps {
+    variant?: ButtonVariant;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    display?: ButtonDisplay;
+    loading?: boolean;
+    /** 클릭 후 N ms 동안 추가 클릭 무시 — 더블클릭 방지 */
+    clickThrottleMs?: number;
+    leadingIcon?: ReactNode;
+    trailingIcon?: ReactNode;
+}
+export interface ButtonBaseProps extends Omit<ComponentPropsWithoutRef<"button">, "color">, ButtonCommonProps {
+}
+export interface ButtonLinkProps extends Omit<ComponentPropsWithoutRef<"a">, "color">, ButtonCommonProps {
+    as: "a";
+}
+export type ButtonProps = ButtonBaseProps | ButtonLinkProps;

package/dist/src/components/button/utils.d.ts

@@ -0,0 +1,6 @@
+import { ButtonAppearance, ButtonDisplay, ButtonSize, ButtonVariant } from './types';
+export declare const getButtonColorClasses: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;
+export declare const getButtonSizeClasses: (size?: ButtonSize) => string;
+export declare const getButtonDisplayClasses: (display?: ButtonDisplay) => string;
+export declare const getButtonBaseClasses: () => string;
+export declare const getButtonFocusRing: (variant?: ButtonVariant) => string;

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

@@ -0,0 +1,33 @@
+import { CheckboxProps } from './types';
+/**
+ * Checkbox.Circle 컴포넌트 — 원형 아이콘을 사용하는 체크박스
+ */
+export declare const CheckboxCircle: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+/**
+ * Checkbox.Line 컴포넌트 — 라인 스타일의 체크박스
+ */
+export declare const CheckboxLine: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+/**
+ * Checkbox.LineTransparent 컴포넌트 — 투명한 라인 스타일의 체크박스
+ */
+export declare const CheckboxLineTransparent: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+/**
+ * Checkbox 컴포넌트
+ *
+ * 세 가지 변형을 제공합니다.
+ * - Circle: 원형 스타일
+ * - Line: 라인 스타일
+ * - LineTransparent: 투명 라인 스타일
+ *
+ * @example
+ * ```tsx
+ * <Checkbox.Circle size={24} checked={isChecked} />
+ * <Checkbox.Line size={24} checked={isAgreed} />
+ * <Checkbox.LineTransparent size={24} checked={isSelected} />
+ * ```
+ */
+export declare const Checkbox: {
+    Circle: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+    Line: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+    LineTransparent: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;
+};

package/dist/src/components/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox, CheckboxCircle, CheckboxLine, CheckboxLineTransparent, } from './Checkbox';
+export type { CheckboxProps, CheckboxVariant } from './types';

package/dist/src/components/checkbox/types.d.ts

@@ -0,0 +1,33 @@
+import { InputHTMLAttributes } from 'react';
+/**
+ * Checkbox 컴포넌트의 공통 Props
+ */
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
+    /**
+     * input 태그의 `type` 속성을 결정해요.
+     * @default 'checkbox'
+     */
+    inputType?: "checkbox" | "radio";
+    /**
+     * Checkbox 컴포넌트의 크기를 결정해요.
+     * @default 24
+     */
+    size?: number;
+    /**
+     * Checkbox 컴포넌트의 선택 상태가 바뀔 때 실행되는 함수예요.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Label 텍스트
+     */
+    label?: string;
+    /**
+     * Checkbox의 기본 색상
+     * @default 'primary'
+     */
+    baseColor?: "primary" | "secondary" | "neutral";
+}
+/**
+ * Checkbox 변형 타입
+ */
+export type CheckboxVariant = "circle" | "line" | "lineTransparent";

package/dist/src/components/checkbox/utils.d.ts

@@ -0,0 +1,33 @@
+import { CheckboxProps, CheckboxVariant } from './types';
+/**
+ * Checkbox의 기본 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxBaseClasses(): string;
+/**
+ * Checkbox input의 기본 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxInputBaseClasses(): string;
+/**
+ * Checkbox Circle 변형의 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxCircleClasses(baseColor?: CheckboxProps["baseColor"]): string;
+/**
+ * Checkbox Line 변형의 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxLineClasses(baseColor?: CheckboxProps["baseColor"]): string;
+/**
+ * Checkbox LineTransparent 변형의 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxLineTransparentClasses(baseColor?: CheckboxProps["baseColor"]): string;
+/**
+ * variant에 따른 Checkbox 스타일 클래스를 반환합니다.
+ */
+export declare function getCheckboxVariantClasses(variant: CheckboxVariant, baseColor?: CheckboxProps["baseColor"]): string;
+/**
+ * Checkbox 크기에 따른 스타일을 반환합니다.
+ */
+export declare function getCheckboxSizeStyle(size?: number): React.CSSProperties;
+/**
+ * Label 스타일 클래스를 반환합니다.
+ */
+export declare function getLabelClasses(): string;

package/dist/src/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+export interface CollapsibleProps {
+    /** true면 펼침, false면 접힘. */
+    open: boolean;
+    /** 접힘 → 펼침/그 반대 모션 시간. 기본 200ms. */
+    durationMs?: number;
+    /** ease. 기본 ease-out. */
+    ease?: string;
+    /**
+     * 접힘 상태에서 콘텐츠를 DOM에서 제거할지 여부. 기본 false(렌더 유지 + height 0).
+     * true면 unmount하면서 모션은 사라진다(다음 펼침 때 처음부터).
+     */
+    unmountWhenClosed?: boolean;
+    /** 접힘 상태에서 opacity 0으로 만들지 여부. 기본 true. */
+    fade?: boolean;
+    /** 추가 className(외부 wrapper에 적용). */
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * 자식 콘텐츠 높이를 부드럽게 펼치고 접는 컴포넌트.
+ *
+ * 구현은 CSS grid의 `grid-template-rows: 0fr ↔ 1fr` 트릭이라 JS 측정 없이도 height auto
+ * 트랜지션이 동작한다 (Chrome 117+ / Safari 17.4+ / Firefox 117+).
+ *
+ * 모달 안에서 영역을 부드럽게 늘리고 줄일 때 사용. 모달 외곽 자체는 Collapsible로 감싸지 말 것
+ * (시트 위치/스크롤 컨테이너 동작과 충돌 가능). 모달 안의 내용 블록을 감싸는 용도.
+ *
+ * @example
+ * ```tsx
+ * <Collapsible open={showDetail}>
+ *   <div className="px-4 py-3">상세 정보</div>
+ * </Collapsible>
+ * ```
+ */
+export declare function Collapsible({ open, durationMs, ease, unmountWhenClosed, fade, className, children, }: CollapsibleProps): import("react").JSX.Element | null;

package/dist/src/components/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { Collapsible } from './Collapsible';
+export type { CollapsibleProps } from './Collapsible';

package/dist/src/components/date-input/DateInput.d.ts

@@ -0,0 +1,27 @@
+interface Props {
+    /** yyyy-MM-dd 또는 빈 문자열. */
+    value: string;
+    onChange: (next: string) => void;
+    size?: "mini" | "small";
+    ariaLabel?: string;
+    /**
+     * SearchBox 플로팅 라벨 패턴을 적용한다. 지정하면 상단에 작은 라벨이 부유로 떠 다른 검색 필드와
+     * 같은 톤. 값 없음 + 미포커스면 인풋 중앙 placeholder 위치, 포커스/값 있음이면 상단 보더 위.
+     */
+    label?: string;
+    className?: string;
+    /**
+     * true면 trailing 캘린더 버튼이 모바일에서도 popover로만 떠 자체 바텀시트를 만들지 않는다.
+     * 호출부가 이미 시트(예: SearchBox 모바일 바텀시트) 안에 있을 때 시트 두 개 겹침 회피.
+     */
+    disableMobileSheet?: boolean;
+}
+/**
+ * 단일 날짜 입력 — `<input type="date">` + 우측 trailing 캘린더 버튼(DatePicker popover).
+ *
+ * 네이티브 캘린더 indicator는 `.search-box-date-input` 클래스 + globals CSS로 숨김.
+ * 사용자는 직접 타이핑(브라우저가 yyyy-MM-dd 형식 강제) 또는 trailing 버튼으로 캘린더 선택.
+ * value 빈 값일 땐 placeholder(브라우저 기본 "연도-월-일")가 회색으로 표기.
+ */
+export declare function DateInput({ value, onChange, size, ariaLabel, label, className, disableMobileSheet, }: Props): import("react").JSX.Element;
+export {};

package/dist/src/components/date-input/index.d.ts

@@ -0,0 +1 @@
+export { DateInput } from './DateInput';

package/dist/src/components/date-picker/date-picker.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+interface DatePickerProps {
+    /** 트리거 — children 자체가 클릭 대상. */
+    children: ReactNode;
+    /** yyyy-MM-dd. 빈 문자열/null이면 미선택. */
+    value?: string | null;
+    onApply: (date: string) => void;
+    disabled?: boolean;
+    /**
+     * true면 모바일에서도 자체 바텀시트 대신 데스크톱과 동일한 popover로 표시.
+     * 호출부가 이미 바텀시트(예: SearchBox 모바일 시트) 안에 있어 시트 두 개가 겹치는 걸 피할 때 사용.
+     */
+    disableMobileSheet?: boolean;
+}
+/**
+ * 단일 날짜 선택 popover.
+ *
+ * 위치 계산은 floating-ui 위임 — autoUpdate가 스크롤/리사이즈 시 좌표 자동 갱신.
+ * 모바일에선 바텀시트로 풀스크린 전환(트리거 위치 계산 무시).
+ */
+export declare function DatePicker({ children, value, onApply, disabled, disableMobileSheet, }: DatePickerProps): import("react").JSX.Element;
+interface DatePickerBodyProps {
+    initialValue?: string | null;
+    onApply: (date: string) => void;
+    onClose: () => void;
+}
+/**
+ * DatePicker 본체(캘린더 + 닫기/적용 버튼)만 — 컨테이너(popover/시트) 없이.
+ *
+ * SearchBox 바텀시트 안처럼 부모 컨테이너(ModalSubView 등)에 직접 캘린더만 마운트하고 싶을 때 쓴다.
+ * 일반 사용처는 `<DatePicker>`를 그대로 사용.
+ */
+export declare function DatePickerBody({ initialValue, onApply, onClose }: DatePickerBodyProps): import("react").JSX.Element;
+export {};

package/dist/src/components/date-picker/date-range-picker.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+export interface DateRange {
+    from: string | null;
+    to: string | null;
+}
+interface DateRangePickerProps {
+    /** 트리거 (버튼/탭 등). asChild처럼 children을 클릭 가능한 요소로 받음 */
+    children: ReactNode;
+    value?: DateRange;
+    onApply: (range: DateRange) => void;
+    disabled?: boolean;
+}
+/**
+ * 날짜 범위 선택 popover.
+ *
+ * 위치 계산은 floating-ui 위임 — autoUpdate가 스크롤/리사이즈 시 좌표 자동 갱신.
+ * 모바일에선 바텀시트로 풀스크린 전환(트리거 위치 계산 무시) + 단일 캘린더.
+ * 데스크탑은 두 달 가로 배치.
+ */
+export declare function DateRangePicker({ children, value, onApply, disabled, }: DateRangePickerProps): import("react").JSX.Element;
+export {};

package/dist/src/components/date-picker/index.d.ts

@@ -0,0 +1,5 @@
+export { DateRangePicker } from './date-range-picker';
+export type { DateRange } from './date-range-picker';
+export { DatePicker, DatePickerBody } from './date-picker';
+export { MonthPicker } from './month-picker';
+export type { MonthValue } from './month-picker';

package/dist/src/components/date-picker/month-picker.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export interface MonthValue {
+    year: number;
+    month: number;
+}
+interface MonthPickerProps {
+    /** 트리거 요소. children에 클릭 가능한 노드를 넘긴다. */
+    children: ReactNode;
+    value?: MonthValue;
+    onChange: (value: MonthValue) => void;
+    disabled?: boolean;
+    /**
+     * true면 모바일에서도 바텀시트 대신 popover로 뜬다. 이미 바텀시트(SearchBox 필터 등) 안에
+     * 있을 때 시트가 겹치는 걸 막는다.
+     */
+    disableMobileSheet?: boolean;
+}
+/**
+ * 월(YYYY.MM) 선택 popover.
+ *
+ * 위치 계산은 floating-ui 위임 — autoUpdate가 스크롤/리사이즈 시 좌표 자동 갱신.
+ * 모바일에선 바텀시트로 풀스크린 전환(disableMobileSheet면 popover 유지).
+ */
+export declare function MonthPicker({ children, value, onChange, disabled, disableMobileSheet, }: MonthPickerProps): import("react").JSX.Element;
+export {};

package/dist/src/components/drawer/Drawer.d.ts

@@ -0,0 +1,18 @@
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    /** 데스크탑(sm+) 드로어 폭(px). 기본 480. 모바일은 무관 (바텀시트). */
+    widthPx?: number;
+    children: React.ReactNode;
+}
+/**
+ * 데스크탑(`sm`+)에서는 화면 우측에서 슬라이드 인 하는 사이드 드로어,
+ * 모바일에서는 화면 하단에서 올라오는 bottom-sheet으로 동작.
+ *
+ * 모바일 분기·드래그-다운 닫기·바텀시트 하단 틈 방지 패턴은 Modal과 동일.
+ *
+ * **레이어드 오버레이**: ESC/백드롭은 `overlayStack`에서 자신이 top일 때만 반응한다.
+ * ActionToast가 위에 떠 있으면(priority) 자동으로 양보된다.
+ */
+export declare function Drawer({ open, onClose, title, widthPx, children, }: DrawerProps): import("react").JSX.Element;

package/dist/src/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';

package/dist/src/components/info-tooltip/InfoTooltip.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export interface InfoTooltipProps {
+    content: ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+}
+/**
+ * 정보 툴팁 컴포넌트
+ *
+ * `?` 아이콘에 마우스 호버 시 툴팁을 표시해요. CSS group-hover 기반의 단순 구현.
+ */
+export declare function InfoTooltip({ content, position }: InfoTooltipProps): import("react").JSX.Element;

package/dist/src/components/info-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { InfoTooltip } from './InfoTooltip';
+export type { InfoTooltipProps } from './InfoTooltip';

package/dist/src/components/input/Input.d.ts

@@ -0,0 +1,10 @@
+import { InputProps } from './types';
+/**
+ * Input 컴포넌트
+ *
+ * @example
+ * <Input variant="box" label="이름" placeholder="이름을 입력하세요" />
+ * <Input variant="box" hasError help="에러 메시지" />
+ * <Input variant="box" disabled />
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/src/components/input/PasswordInput.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from './types';
+type PasswordInputProps = Omit<InputProps, "type" | "trailingIcon">;
+/**
+ * 비밀번호 입력 — 마스킹 토글(눈 아이콘) 내장.
+ * `Input`을 그대로 감싸서 type/trailingIcon만 제어. 다른 prop은 모두 통과.
+ */
+export declare const PasswordInput: import('react').ForwardRefExoticComponent<PasswordInputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/src/components/input/format.d.ts

@@ -0,0 +1,38 @@
+import { InputFormat, InputValue } from './types';
+/**
+ * 전화번호에 하이픈을 추가해요
+ * @example "01012345678" → "010-1234-5678"
+ */
+export declare function transformToPhoneNumber(value: InputValue): string;
+/**
+ * 전화번호에서 하이픈을 제거해요
+ * @example "010-1234-5678" → "01012345678"
+ */
+export declare function resetFromPhoneNumber(value: InputValue): string;
+/**
+ * 금액에 콤마를 추가해요
+ * @example "1000000" → "1,000,000"
+ */
+export declare function transformToPrice(value: InputValue): string;
+/**
+ * 금액에서 콤마를 제거해요
+ * @example "1,000,000" → "1000000"
+ */
+export declare function resetFromPrice(value: InputValue): string;
+/**
+ * 내장 Format 객체
+ */
+export declare const inputFormats: {
+    /**
+     * 전화번호 포맷
+     * transform: "01012345678" → "010-1234-5678"
+     * reset: "010-1234-5678" → "01012345678"
+     */
+    readonly phoneNumber: InputFormat;
+    /**
+     * 금액 포맷
+     * transform: "1000000" → "1,000,000"
+     * reset: "1,000,000" → "1000000"
+     */
+    readonly price: InputFormat;
+};

package/dist/src/components/input/index.d.ts

@@ -0,0 +1,4 @@
+export { Input } from './Input';
+export { PasswordInput } from './PasswordInput';
+export { inputFormats } from './format';
+export type { InputProps, InputVariant, InputSize, InputLabelOption, InputValue, InputFormat, FormatTransform, FormatReset, } from './types';