@idbrnd/design-system 3.3.0 → 4.0.1

package/dist/components/Feedback/Modal/Modal.types.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, ReactNode } from "react";
+export type ModalSize = "small" | "medium" | "large";
+export type ModalType = "fixed" | "hug";
+export interface ModalAction {
+    label: string;
+    onClick: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export interface ModalProps {
+    /** 모달 표시 여부 (controlled) */
+    open: boolean;
+    /** ESC 키·닫기 버튼·딤 클릭으로 닫힐 때 호출 */
+    onClose: () => void;
+    /** 모달 너비 프리셋 @defaultValue 'medium' */
+    size?: ModalSize;
+    /**
+     * 너비 결정 방식
+     * - `fixed`: size별 고정 너비 (440 / 840 / 1440)
+     * - `hug`: 콘텐츠에 맞춰 size별 min~max 범위에서 결정
+     * @defaultValue 'fixed'
+     */
+    type?: ModalType;
+    /** 헤더 타이틀 — 문자열 또는 임의의 ReactNode */
+    heading?: ReactNode;
+    /** 헤더(Nav Bar) 노출 여부 @defaultValue true */
+    navBar?: boolean;
+    /** 헤더 우측 끝 닫기(X) 버튼 노출 여부 @defaultValue true */
+    showClose?: boolean;
+    /** 헤더 좌측 슬롯 */
+    navLeadingSlot?: ReactNode;
+    /** 헤더 우측 슬롯 (닫기 버튼 왼쪽에 배치) */
+    navTrailingSlot?: ReactNode;
+    /** 메인 액션 — FillButton으로 렌더링 */
+    mainAction?: ModalAction;
+    /** 서브 액션 — OutlineButton으로 렌더링 (메인 액션 좌측) */
+    subAction?: ModalAction;
+    /** 지정 시 mainAction/subAction 대신 액션 영역을 통째로 교체 */
+    actionSlot?: ReactNode;
+    /** ESC 키로 닫기 허용 @defaultValue true */
+    closeOnEsc?: boolean;
+    /** 딤 클릭으로 닫기 허용 @defaultValue false */
+    closeOnDimClick?: boolean;
+    customStyle?: CSSProperties;
+    className?: string;
+    /** 콘텐츠 영역 */
+    children?: ReactNode;
+}

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,4 @@
+import type { TimePickerProps } from "./TimePicker.types";
+export type { TimePickerActionContent, TimePickerActionMainType, TimePickerActionRenderProps, TimePickerProps, TimePickerTrigger, TimePickerValue, TimePickerVariant, } from "./TimePicker.types";
+declare function TimePicker(props: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export default TimePicker;

package/dist/components/TimePicker/TimePicker.types.d.ts

@@ -0,0 +1,88 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { TimePickerValue, TimePickerVariant } from './timeUtils';
+export type { TimePickerValue, TimePickerVariant } from './timeUtils';
+/**
+ * - `icon`: 아이콘 버튼 트리거. 텍스트 필드에 시간 직접 입력 가능.
+ *   단, variant가 `aa-hh-mm`/`aa-hh`(오전/오후 컬럼 포함)면 amLabel/pmLabel 문자열을 그대로
+ *   입력받아야 해서 국제화가 불가능하므로 직접 입력이 비활성화되고 `field`처럼 동작한다.
+ *   `hh-mm`(24시간제)에서만 실제로 직접 입력이 가능하다.
+ * - `field`: 텍스트 필드 트리거. 클릭 시에만 팝오버가 열리고 직접 입력 불가
+ * - `compact`: heading 없이 값/placeholder만 노출하는 작은 셀렉트박스 트리거.
+ *   직접 입력은 지원하지 않는다. DatePicker의 시작/종료 시간 필드처럼 다른 컴포넌트 안에
+ *   인라인으로 임베드할 때 사용한다.
+ * @defaultValue `'icon'`
+ */
+export type TimePickerTrigger = 'icon' | 'field' | 'compact';
+/** Action area의 Main 버튼(적용) 스타일. @defaultValue `'text'` */
+export type TimePickerActionMainType = 'fill' | 'text';
+/** Action area 커스텀 콘텐츠 함수형에 전달되는 인자 */
+export interface TimePickerActionRenderProps {
+    /** 기본 동작(현재 시각으로 이동 / 적용)을 그대로 실행하는 핸들러. 커스텀 요소에 연결해 재사용할 수 있다 */
+    onClick: () => void;
+}
+/**
+ * Action area 슬롯 콘텐츠.
+ * - 미지정: 기본 콘텐츠(현재 텍스트 버튼 / 적용 버튼) 노출
+ * - ReactNode: 완전히 다른 요소로 교체. 동작은 직접 구현해야 한다
+ * - 함수: 기본 동작 핸들러(`onClick`)를 전달받아, i18n 라벨 등 텍스트만 바꾼 커스텀 요소에 그대로 재사용할 수 있다
+ */
+export type TimePickerActionContent = ReactNode | ((props: TimePickerActionRenderProps) => ReactNode);
+export interface TimePickerProps {
+    /** 현재 선택된 값 */
+    value: TimePickerValue | null;
+    /** 값 변경 시 호출되는 콜백 */
+    onChange: (value: TimePickerValue) => void;
+    /**
+     * - `aa-hh-mm`: 오전/오후 + 12시간제 시 + 분 (3열)
+     * - `aa-hh`: 오전/오후 + 12시간제 시 (분 없음, 2열)
+     * - `hh-mm`: 24시간제 시 + 분 (오전/오후 없음, 2열)
+     * @defaultValue `'aa-hh-mm'`
+     */
+    variant?: TimePickerVariant;
+    /** @defaultValue `'icon'` */
+    trigger?: TimePickerTrigger;
+    /** 상단 heading(라벨) 텍스트. 미지정 시 라벨 영역이 노출되지 않는다. */
+    heading?: string;
+    /** 필수 입력 여부. heading 노출 시 `*`를 함께 표시한다. @defaultValue `false` */
+    required?: boolean;
+    /** 트리거 placeholder. 미지정 시 variant에 맞는 형식(`"AA HH:MM"` 등)을 사용한다 */
+    placeholder?: string;
+    /** 전체 비활성화 여부. @defaultValue `false` */
+    disabled?: boolean;
+    /** 팝오버 하단 액션 영역 노출 여부. `false`면 값 선택 즉시 onChange가 호출된다. @defaultValue `true` */
+    actionArea?: boolean;
+    /** Action area 내 보조 영역(기본: "현재" 텍스트 버튼) 노출 여부. @defaultValue `true` */
+    actionSub?: boolean;
+    /** Action area 보조 영역 커스텀 콘텐츠. 미지정 시 기본 "현재" 텍스트 버튼이 노출된다 */
+    actionSubContent?: TimePickerActionContent;
+    /** Action area 내 메인 영역(기본: "적용" 버튼) 노출 여부. @defaultValue `true` */
+    actionMain?: boolean;
+    /** Action area 메인 버튼 스타일. actionMainContent 지정 시 무시된다. @defaultValue `'text'` */
+    actionMainType?: TimePickerActionMainType;
+    /** Action area 메인 영역 커스텀 콘텐츠. 미지정 시 actionMainType에 따른 기본 "적용" 버튼이 노출된다 */
+    actionMainContent?: TimePickerActionContent;
+    /** 휠 팝오버의 "현재" 버튼 라벨. @defaultValue `'현재'` */
+    nowLabel?: string;
+    /** 휠 팝오버의 "적용" 버튼 라벨. @defaultValue `'적용'` */
+    applyLabel?: string;
+    /** 오전(AM) 라벨. @defaultValue `'오전'` */
+    amLabel?: string;
+    /** 오후(PM) 라벨. @defaultValue `'오후'` */
+    pmLabel?: string;
+    /**
+     * 트리거에 표시되는 시간("오전 08:06") 포맷을 재정의한다. i18n 등에 사용.
+     * hours는 0~23(24시간제) 값으로 전달된다. 미지정 시 variant에 맞는 기본 형식을 사용한다.
+     */
+    formatTime?: (hours: number, minutes: number) => string;
+    /** 트리거의 시간 선택 아이콘 버튼 aria-label. @defaultValue `'시간 선택 열기'` */
+    openLabel?: string;
+    /** 루트 컨테이너에 적용할 추가 style */
+    customStyle?: CSSProperties;
+    /**
+     * @internal 팝오버 DOM 노드가 마운트/언마운트될 때 호출된다.
+     * TimePicker를 다른 컴포넌트(DatePicker 등)에 임베드할 때, 팝오버가 `document.body`에
+     * 별도로 포탈되어 부모의 outside-click/scroll 판정에서 "바깥"으로 오인되는 것을 막기 위해
+     * 부모가 이 팝오버 노드를 자신의 컨테인먼트 체크에 포함시킬 수 있도록 노출한다.
+     */
+    onPopoverRef?: (node: HTMLDivElement | null) => void;
+}

package/dist/components/TimePicker/timeUtils.d.ts

@@ -0,0 +1,27 @@
+export interface TimePickerValue {
+    hours: number;
+    minutes: number;
+}
+/**
+ * - `aa-hh-mm`: 오전/오후 + 12시간제 시 + 분 (3열)
+ * - `aa-hh`: 오전/오후 + 12시간제 시 (분 없음, 2열)
+ * - `hh-mm`: 24시간제 시 + 분 (오전/오후 없음, 2열)
+ */
+export type TimePickerVariant = 'aa-hh-mm' | 'aa-hh' | 'hh-mm';
+type Period = 'AM' | 'PM';
+export declare function hasMinuteColumn(variant: TimePickerVariant): boolean;
+export declare function hasPeriodColumn(variant: TimePickerVariant): boolean;
+export declare function toPeriod(hours: number): Period;
+export declare function toHour12(hours: number): number;
+export declare function toHours24(period: Period, hour12: number): number;
+/** 트리거/텍스트에 노출되는 기본 표시 포맷. amLabel/pmLabel로 i18n 라벨을 대체할 수 있다 */
+export declare function formatTimePickerValue(value: TimePickerValue, variant: TimePickerVariant, amLabel?: string, pmLabel?: string): string;
+/**
+ * 직접 입력 마스킹. 선행 비-숫자 문자(예: "오전")는 그대로 접두로 보존하고,
+ * 숫자 부분만 variant에 맞춰(HH 또는 HH:MM) 자동으로 ":"를 붙인다.
+ * 자동으로 붙은 ":"를 backspace로 지웠을 때도 숫자 하나가 지워지도록 보정한다.
+ */
+export declare function formatTimeInputMask(nextRaw: string, prevRaw: string, variant: TimePickerVariant): string;
+/** 직접 입력된 텍스트를 파싱한다. 형식이 맞지 않으면 null을 반환한다 */
+export declare function parseTimeInput(text: string, variant: TimePickerVariant, amLabel?: string, pmLabel?: string): TimePickerValue | null;
+export {};

package/dist/components/shared/WheelColumn.d.ts

@@ -0,0 +1,11 @@
+export type WheelColumnAlign = 'center' | 'top';
+interface WheelColumnProps<T extends string | number> {
+    items: T[];
+    value: T;
+    onChange: (value: T) => void;
+    format?: (item: T) => string;
+    /** 활성 항목을 컬럼의 중앙(center) 또는 최상단(top)에 정렬한다. @defaultValue 'center' */
+    align?: WheelColumnAlign;
+}
+declare function WheelColumn<T extends string | number>({ items, value, onChange, format, align, }: WheelColumnProps<T>): import("react/jsx-runtime").JSX.Element;
+export default WheelColumn;

package/dist/icons/generated/CalendarIcon.d.ts

@@ -0,0 +1,3 @@
+import type { IconProps } from "../Icon.types";
+declare const CalendarIcon: ({ size, color, style, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export default CalendarIcon;

package/dist/icons/generated/index.d.ts

@@ -14,6 +14,7 @@ export { default as BookFillIcon } from "./BookFillIcon";
 export { default as BookIcon } from "./BookIcon";
 export { default as BotIcon } from "./BotIcon";
 export { default as BuildingIcon } from "./BuildingIcon";
+export { default as CalendarIcon } from "./CalendarIcon";
 export { default as CarbonIcon } from "./CarbonIcon";
 export { default as CaretDownIcon } from "./CaretDownIcon";
 export { default as CaretUpIcon } from "./CaretUpIcon";

package/dist/icons/iconMap.d.ts

@@ -15,6 +15,7 @@ export declare const iconMap: {
     readonly book: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly bot: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly building: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
+    readonly calendar: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly carbon: ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "caret-down": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;
     readonly "caret-up": ({ size, color, style, ...props }: import("./Icon.types").IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -29,6 +29,8 @@ export type { CheckBoxProps, CheckBoxVariant, CheckBoxSize, CheckBoxDensity, } f
 export type { RadioProps, RadioVariant, RadioSize, RadioDensity, } from "./components/Control/Radio/Radio";
 export type { ToggleSwitchProps, ToggleSwitchSize, } from "./components/Control/ToggleSwitch/ToggleSwitch";
 export { default as EmptyState } from "./components/Feedback/EmptyState/EmptyState";
+export { default as Modal } from "./components/Feedback/Modal/Modal";
+export type { ModalProps, ModalSize, ModalType, ModalAction, } from "./components/Feedback/Modal/Modal.types";
 export { default as PushBadge } from "./components/Feedback/PushBadge/PushBadge";
 export { dismissToast, showToast } from "./components/Feedback/Toast/Toast";
 export { dismissSnackbar, showSnackbar, } from "./components/Feedback/Snackbar/Snackbar";
@@ -48,6 +50,10 @@ export { default as StateBadge } from "./components/Content/StateBadge/StateBadg
 export type { StateBadgeProps, StateBadgeVariant, StateBadgeSize, } from "./components/Content/StateBadge/StateBadge";
 export { default as Select } from "./components/Select/Select";
 export type { SelectProps, SelectVariant, SelectSize, SelectType, SelectAlign, } from "./components/Select/Select";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export type { DatePickerActionContent, DatePickerActionMainType, DatePickerActionRenderProps, DatePickerDateRange, DatePickerProps, DatePickerTrigger, DatePickerVariant, } from "./components/DatePicker/DatePicker";
+export { default as TimePicker } from "./components/TimePicker/TimePicker";
+export type { TimePickerActionContent, TimePickerActionMainType, TimePickerActionRenderProps, TimePickerProps, TimePickerTrigger, TimePickerValue, TimePickerVariant, } from "./components/TimePicker/TimePicker";
 export { default as Dropdown } from "./components/Dropdown/Dropdown";
 export type { DropdownProps, DropdownType, DropdownAlign, DropdownOption, } from "./components/Dropdown/Dropdown.types";
 export { default as Chip } from "./components/Chip/Chip/Chip";