@sellmate/design-system 1.28.0 → 1.31.0

package/dist/types/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.d.ts

@@ -6,11 +6,19 @@ export declare class SdDateRangePickerCalendar {
     selectable?: [string, string];
     /** 최대 선택 가능 일 수 */
     maxRange?: number;
+    /** 시간(시:분) 선택 푸터 사용 여부 */
+    useTimePicker: boolean;
     private currentYear;
     private currentMonth;
     private pendingStart;
     private hoverDate;
     private displayValue;
+    private startHour;
+    private startMinute;
+    private endHour;
+    private endMinute;
+    /** 직접 emit한 값이 value prop으로 되돌아오는 에코를 구분해 시간 입력 clobber를 막는다 */
+    private lastEmitted;
     /** 날짜 범위 선택 시 발생합니다. */
     select: EventEmitter<[string, string]>;
     /** 달력 뷰가 변경될 때 발생합니다. */
@@ -22,6 +30,8 @@ export declare class SdDateRangePickerCalendar {
     componentWillLoad(): void;
     handleValueChange(): void;
     private syncFromValue;
+    /** "YYYY-MM-DD HH:mm" 또는 "YYYY-MM-DD"를 날짜/시/분으로 분리한다 */
+    private splitDateTime;
     private get rightYear();
     private get rightMonth();
     private formatDate;
@@ -34,10 +44,20 @@ export declare class SdDateRangePickerCalendar {
     private goToday;
     private isDisabled;
     private handleDayClick;
+    /** 날짜 범위(+ useTimePicker면 시:분)를 결합해 sdSelect로 emit한다 */
+    private emitRange;
+    private pad;
+    /** 시:분 입력 — 숫자만/2자리로 제한하고 범위(시 0~23, 분 0~59)로 클램프한다 */
+    private handleTimeInput;
+    private handleTimeBlur;
+    private getTimePart;
+    private setTimePart;
     private handleDayHover;
     private getRangeState;
     private renderHeader;
     private renderYearNav;
     private renderPanel;
+    private renderTimeSection;
+    private renderTimeFooter;
     render(): any;
 }

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.config.d.ts

@@ -8,3 +8,28 @@ export declare const RANGE_LAYOUT: {
     panelGap: string;
     divider: string;
 };
+/** 시간(시:분) 선택 푸터 레이아웃 토큰 */
+export declare const TIME_LAYOUT: {
+    bgDefault: string;
+    bgSelected: string;
+    dateLabel: string;
+    dateUnit: string;
+    dateGap: string;
+    radius: string;
+    paddingX: string;
+    paddingY: string;
+    gap: string;
+    sectionGap: string;
+    unitGap: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    input: {
+        height: string;
+        radius: string;
+        border: string;
+        borderFocus: string;
+        text: string;
+        placeholder: string;
+    };
+};

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts

@@ -17,6 +17,11 @@ export declare class SdDateRangePicker {
     selectable?: [string, string];
     /** 최대 선택 가능한 날짜 범위 (일 단위) */
     maxRange?: number;
+    /**
+     * 시간(시:분) 선택 푸터 사용 여부.
+     * true이면 value는 "YYYY-MM-DD HH:mm" 형식이 되고, 캘린더 하단에 시작·종료 시간 입력이 표시됩니다.
+     */
+    useTimePicker: boolean;
     /** 비활성 상태 여부 */
     disabled: boolean;
     /** 필드 너비 (숫자면 px, 문자열이면 그대로 적용) */
@@ -37,6 +42,8 @@ export declare class SdDateRangePicker {
     rules?: Rule[];
     /** 에러 상태 여부 */
     error: boolean;
+    /** 필드 상태 (없으면 error/rules 결과로 자동 결정) */
+    status?: 'default' | 'pass' | 'error';
     /** 레이블 영역 아이콘 */
     icon?: IconProps;
     /** 레이블 툴팁 텍스트 */
@@ -71,6 +78,8 @@ export declare class SdDateRangePicker {
     private handleSelect;
     private handleViewChange;
     private get displayText();
+    private static readonly DEFAULT_PLACEHOLDER;
+    private get resolvedPlaceholder();
     disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/sd-field/sd-field.d.ts

@@ -37,6 +37,13 @@ export declare class SdField implements ValidatableField {
     label: string;
     /** 레이블 너비 */
     labelWidth: string | number;
+    /**
+     * 레이블 박스 높이 (숫자면 px). 미지정 시 size별 기본값 사용.
+     * multiline 등 컨트롤 박스가 커질 때 레이블을 첫 행에 맞추기 위해 사용한다.
+     */
+    labelHeight?: number | string;
+    /** 멀티라인 컨트롤 — 컨트롤 높이를 고정하지 않고 min-height만 적용한다. */
+    multiline: boolean;
     /** 필드 우측 어드온 레이블 */
     addonLabel: string;
     /** 어드온 정렬 방향 */

package/dist/types/components/sd-file-picker/sd-file-picker.config.d.ts

@@ -1,3 +1,4 @@
+/** 기본(sm) 레이아웃 — 하위호환용 단일 export */
 export declare const FILE_PICKER_LAYOUT: {
     height: string;
     paddingX: string;
@@ -10,6 +11,33 @@ export declare const FILE_PICKER_LAYOUT: {
     iconSize: string;
     contentsGap: string;
 };
+/** size별 레이아웃 맵 */
+export declare const FILE_PICKER_LAYOUTS: {
+    readonly sm: {
+        height: string;
+        paddingX: string;
+        gap: string;
+        radius: string;
+        borderWidth: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        contentsGap: string;
+    };
+    readonly md: {
+        height: string;
+        paddingX: string;
+        gap: string;
+        radius: string;
+        borderWidth: string;
+        fontSize: string;
+        lineHeight: string;
+        fontWeight: string;
+        iconSize: string;
+        contentsGap: string;
+    };
+};
 export declare const FILE_PICKER_COLORS: {
     border: {
         default: string;

package/dist/types/components/sd-file-picker/sd-file-picker.d.ts

@@ -1,7 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Rule } from '../../types/form';
 import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
-import { type FieldAddonAlign } from '../sd-field/sd-field.config';
+import { type FieldAddonAlign, type FieldSize } from '../sd-field/sd-field.config';
 export declare class SdFilePicker implements ComponentInterface {
     el: HTMLElement;
     /** 선택된 파일 값 */
@@ -24,6 +24,8 @@ export declare class SdFilePicker implements ComponentInterface {
     maxTotalSize?: number | string;
     /** 최대 파일 개수 */
     maxFiles?: number | string;
+    /** 필드 크기 */
+    size: FieldSize;
     /** 폼 연동용 name 속성 */
     name: string;
     /** 레이블 텍스트 */

package/dist/types/components/sd-ghost-button/sd-ghost-button.d.ts

@@ -9,6 +9,11 @@ export declare class SdGhostButton {
     intent: GhostButtonIntent;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel: string;
+    /**
+     * 토글 버튼일 때 눌림 상태 → `aria-pressed`로 반영. 미지정 시 속성 자체를 내보내지 않는다.
+     * (DOM `Element.ariaPressed`(문자열 예약 속성)와 충돌하므로 prop 이름은 `pressed`)
+     */
+    pressed?: boolean;
     /** 호버 시 표시할 툴팁 텍스트 */
     tooltipText?: string;
     /** 비활성 상태 여부 */

package/dist/types/components/sd-input/sd-input.d.ts

@@ -8,7 +8,7 @@ export declare class SdInput {
     /** 입력 값 */
     value?: string | number | null;
     /** 입력 타입 */
-    type: 'text' | 'password' | 'email';
+    type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'search' | 'url';
     /** 입력 크기 */
     size: InputSize;
     /** 필드 우측 어드온 레이블 */

package/dist/types/components/sd-key-value-table/sd-key-value-table.config.d.ts

@@ -5,6 +5,8 @@ export declare const KEY_VALUE_TABLE_LAYOUT: {
     borderRadius: number;
     thPaddingX: number;
     padding: number;
+    tdPaddingX: number;
+    tdPaddingXWide: number;
     helpIconSize: number;
     requiredIconSize: number;
     gap: number;
@@ -100,8 +102,25 @@ export type SdKeyValueField = (FieldBase & {
     type: 'file-picker';
     options?: SdKeyValueFilePickerOptions;
 });
-export interface SdKeyValueChangeDetail {
-    name: string;
-    value: unknown;
+/**
+ * field type별 `sdChange`로 올라오는 값 타입.
+ * - `string`: input · textarea · select · radio · date-picker
+ * - `number`: number-input
+ * - `boolean`: checkbox
+ * - `string[]`: date-range-picker
+ */
+export type SdKeyValueFieldValue = string | number | boolean | string[];
+/**
+ * `sdChange` 이벤트 detail.
+ * 제네릭 `V`에 폼 값 형태(`{ [name]: value }`)를 넘기면 `name`/`value`/`values`가 정밀하게 타이핑됩니다.
+ * 미지정 시 `value`는 {@link SdKeyValueFieldValue} 유니온으로 잡힙니다.
+ */
+export interface SdKeyValueChangeDetail<V extends Record<string, SdKeyValueFieldValue> = Record<string, SdKeyValueFieldValue>> {
+    /** 변경된 field의 name */
+    name: Extract<keyof V, string>;
+    /** 변경된 field의 새 값 */
+    value: V[Extract<keyof V, string>];
+    /** 변경이 반영된 전체 값 객체 (`{ [name]: value }`). controlled 패턴에서 그대로 상태에 반영하면 됩니다. */
+    values: V;
 }
 export {};

package/dist/types/components/sd-key-value-table/sd-key-value-table.d.ts

@@ -6,6 +6,12 @@ export declare class SdKeyValueTable {
      * 한 row에 여러 field를 넣으면 [th|td|th|td...] 형태로 렌더.
      */
     fields: SdKeyValueField[][];
+    /**
+     * field name을 key로 하는 값 객체 (`{ [name]: value }`).
+     * 지정 시 해당 field의 값으로 사용되며, field별 `options.value`보다 우선합니다.
+     * `sdChange`의 `detail.values`와 함께 controlled 패턴으로 사용합니다.
+     */
+    values: Record<string, unknown>;
     /**
      * true이면 테이블 우측에 검색 버튼 패널을 표시. 클릭 시 `sdSearch` 이벤트 emit.
      */
@@ -17,11 +23,13 @@ export declare class SdKeyValueTable {
      * - 'full': 상하단 모두 radius 0 (요소 사이에 끼워 쓸 때)
      */
     radius: 'default' | 'useTop' | 'full';
-    /** 필드 값이 변경될 때 `{ name, value }` 형태로 발생합니다. */
+    /** 필드 값이 변경될 때 `{ name, value, values }` 형태로 발생합니다. `values`는 갱신된 전체 값 객체입니다. */
     change: EventEmitter<SdKeyValueChangeDetail>;
     /** search 패널의 검색 버튼 클릭 시 발생합니다. */
     searchEvent: EventEmitter<void>;
     private emit;
+    /** values prop이 해당 field를 가지면 그 값을, 없으면 field.options.value를 사용. */
+    private resolveOptions;
     private handleSearchClick;
     private renderField;
     private renderHelpIcon;

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -13,7 +13,10 @@ export interface ConfirmModalOptions {
     tagPreset?: TagName;
     tagLabel?: string;
     slotLabel?: string;
+    /** 콘텐츠 박스 tag 위치에 직접 삽입할 HTMLElement (slot="tag") */
     tagContents?: HTMLElement;
+    /** 콘텐츠 박스 option 위치에 직접 삽입할 HTMLElement (slot="option") */
+    optionContents?: HTMLElement;
     persistent?: boolean;
 }
 export interface LoadingModalOptions {

package/dist/types/components/sd-modal-container/sd-modal-container.d.ts

@@ -31,6 +31,8 @@ export declare class SdModalContainer {
     private createLoadingModal;
     private applyLoadingProps;
     private applyProps;
+    /** confirm 모달의 named slot(tag/option) 위치에 HTMLElement 를 light-DOM 으로 주입한다. */
+    private setSlotContent;
     private handleBackdropClick;
     /**
      * 모달이 열릴 때 트리거 요소(버튼 등)에 남아 있던 포커스를 모달 내부로

package/dist/types/components/sd-number-input/sd-number-input.d.ts

@@ -17,6 +17,8 @@ export declare class SdNumberInput {
     useButton: boolean;
     /** 소수점 입력 허용 여부 */
     useDecimal: boolean;
+    /** 소수점 이하 최대 자리수 (useDecimal일 때만 적용, 초과 입력한 소수부는 잘라냄) */
+    maxDecimalLength?: number;
     /** 입력 값 */
     value?: string | number | null;
     /** 레이블 텍스트 */
@@ -81,6 +83,12 @@ export declare class SdNumberInput {
     blur?: EventEmitter<Event>;
     private toNumber;
     private formatWithCommas;
+    /** useDecimal이면서 유효한 maxDecimalLength가 있을 때만 소수점 이하 제한 자리수를 반환합니다. */
+    private getDecimalLimit;
+    /** 소수부를 제한 자리수로 잘라낸 문자열을 반환합니다(반올림하지 않고 잘라냄). */
+    private truncateToDecimalLimit;
+    /** 숫자값의 소수부를 제한 자리수로 잘라냅니다(제한이 없으면 원본 그대로). */
+    private applyDecimalLimit;
     private parseInput;
     private clampMinMax;
     private updateDisplay;

package/dist/types/components/sd-popover/sd-popover.config.d.ts

@@ -0,0 +1,22 @@
+import { type ButtonName } from '../sd-button/sd-button.config';
+/** 팝오버 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
+export type PopoverType = 'default' | 'danger' | 'warning' | 'accent';
+/** 제목-아이콘 간격 */
+export declare const POPOVER_TITLE_GAP: string;
+/** 제목 좌측 아이콘 크기 */
+export declare const POPOVER_TITLE_ICON_SIZE: string;
+interface PopoverTypeStyle {
+    bg: string;
+    title: string;
+    description: string;
+    subAction: string;
+    /** 하단 우측 버튼 프리셋 (button.name 미지정 시 기본값) */
+    buttonName: ButtonName;
+}
+/**
+ * popoverType별 색상·버튼 매핑.
+ * - default·accent: 하단 버튼 primary(solid) / danger: danger outline / warning: neutral outline
+ * - default: 다크 배경 + 흰색 텍스트 / danger·warning·accent: 라이트 배경 + 타입 색상 제목 + light 계열 본문·링크 색상
+ */
+export declare const POPOVER_TYPE_CONFIG: Record<PopoverType, PopoverTypeStyle>;
+export {};

package/dist/types/components/sd-popover/sd-popover.d.ts

@@ -1,52 +1,45 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ButtonName, type ButtonType } from '../sd-button/sd-button.config';
-import type { SdButton } from '../sd-button/sd-button';
-import type { SdTextLink } from '../sd-text-link/sd-text-link';
-export type PopoverButton = Partial<Pick<SdButton, 'name' | 'icon' | 'rightIcon' | 'ariaLabel' | 'disabled' | 'type'>> & {
-    label: string;
-    onClick?: (e: Event) => void;
-};
-export type PopoverLink = Partial<Pick<SdTextLink, 'icon' | 'iconColor' | 'rightArrow' | 'underline' | 'disabled'>> & {
-    label: string;
-    onClick?: (e: Event) => void;
-};
+import { type PopoverType } from './sd-popover.config';
 export declare class SdPopover {
     el: HTMLElement;
-    /** 팝오버 표시 여부 */
-    show: boolean;
+    /** 표시 여부 (제어). 미지정 시 defaultOpen 기반 비제어로 동작 */
+    open?: boolean;
+    /** 기본 표시 여부 (비제어) */
+    defaultOpen: boolean;
     /** 팝오버를 표시할 방향 */
     placement: 'top' | 'bottom' | 'left' | 'right';
-    /** 아이콘 트리거 색상 */
-    color: string;
-    /** 아이콘 트리거 아이콘명 */
+    /** 색상 타입 (default=다크 배경 / danger·warning·accent=라이트 배경) */
+    type: PopoverType;
+    /** 메뉴 제목 (필수) */
+    menuTitle: string;
+    /** 제목 좌측 아이콘 (선택) */
+    titleIcon?: IconName;
+    /** 기본(아이콘) 트리거 아이콘명. slot="trigger" 가 있으면 무시 */
     icon: IconName;
-    /** 아이콘 트리거 크기 */
+    /** 기본(아이콘) 트리거 크기 */
     iconSize: number;
-    /** 버튼 트리거 레이블 (있으면 아이콘 대신 버튼 렌더링) */
-    label: string;
-    /** 버튼 트리거 프리셋 */
-    name: ButtonName;
-    /** 버튼 트리거 우측 아이콘 */
-    rightIcon?: IconName;
+    /** 기본(아이콘) 트리거 색상 */
+    color: string;
+    /** 하단 좌측 링크 레이블 (선택) */
+    leftLinkLabel?: string;
+    /** 하단 우측 버튼 레이블 (필수). 색상/스타일은 type 별로 고정 */
+    buttonLabel: string;
     /** 스크린리더용 접근성 레이블 */
     ariaLabel: string;
-    /** 비활성 상태 여부 */
-    disabled: boolean;
-    /** 버튼 type 속성 */
-    type: ButtonType;
-    /** 팝오버 메뉴 제목 */
-    menuTitle?: string;
-    /** 팝오버 하단 좌측 링크 옵션 */
-    leftLink?: PopoverLink;
-    /** 팝오버 하단 버튼 옵션 */
-    button?: PopoverButton;
     /** 팝오버 메뉴에 추가할 클래스 */
-    menuClass: string;
+    menuClassName: string;
+    internalOpen: boolean;
     slotContentHTML: string;
+    triggerHTML: string;
     /** 팝오버 표시 상태가 바뀔 때 발생합니다. */
     showChange: EventEmitter<boolean>;
-    private buttonEl?;
-    private setShow;
+    /** 하단 우측 버튼 클릭 시 발생합니다. */
+    buttonClick: EventEmitter<void>;
+    /** 하단 좌측 링크 클릭 시 발생합니다. */
+    leftLinkClick: EventEmitter<void>;
+    private triggerEl?;
+    private get isOpen();
+    private setOpen;
     private get popoverOffset();
     private handleClose;
     componentWillLoad(): void;

package/dist/types/components/sd-radio/sd-radio.d.ts

@@ -2,13 +2,15 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export type RadioValue = string | number | boolean;
 export declare class SdRadio {
     /** 라디오 그룹의 현재 선택 값 */
-    value: RadioValue;
+    value?: RadioValue;
     /** 이 라디오 아이템의 값 */
     val: RadioValue;
     /** 비활성 상태 여부 */
     disabled: boolean;
     /** 표시할 라벨 텍스트 */
     label?: string;
+    /** native radio 그룹핑을 위한 name 속성 (미지정 시 val을 name으로 사용) */
+    name?: string;
     /** 선택 값이 변경될 때 발생합니다. */
     update: EventEmitter<RadioValue>;
     valueChanged(newValue: RadioValue): void;

package/dist/types/components/sd-radio-button/sd-radio-button.d.ts

@@ -6,8 +6,8 @@ export type RadioOption = {
     disabled?: boolean;
 };
 export declare class SdRadioButton {
-    /** 현재 선택된 값 */
-    value: RadioValue;
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
+    value?: RadioValue;
     /** 라디오 버튼 옵션 목록 */
     options: RadioOption[];
     /** 버튼 크기 */

package/dist/types/components/sd-radio-group/sd-radio-group.d.ts

@@ -6,8 +6,8 @@ export type RadioOption = {
     disabled?: boolean;
 };
 export declare class SdRadioGroup {
-    /** 현재 선택된 값 */
-    value: RadioValue;
+    /** 현재 선택된 값 (미지정 시 선택 없음) */
+    value?: RadioValue;
     /** 라디오 옵션 목록 */
     options: RadioOption[];
     /** 옵션 배치 방향 */

package/dist/types/components/sd-switch/sd-switch.d.ts

@@ -2,7 +2,14 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class SdSwitch {
     /** 현재 on/off 상태 */
     value: boolean;
-    /** 표시할 라벨 텍스트 */
+    /** 스위치 좌측 라벨 */
+    leftLabel?: string;
+    /** 스위치 우측 라벨 */
+    rightLabel?: string;
+    /**
+     * 표시할 라벨 텍스트
+     * @deprecated `rightLabel` 사용. 우측 라벨(하위호환)
+     */
     label: string;
     /** 비활성 상태 여부 */
     disabled: boolean;

package/dist/types/components/sd-tag/sd-tag.d.ts

@@ -6,8 +6,8 @@ export declare class SdTag {
     label: string;
     /** 아이콘명 */
     icon?: IconName;
-    /** true이면 아이콘을 레이블 왼쪽에 배치 */
-    isLeft: boolean;
+    /** 아이콘을 레이블 왼쪽에 배치할지 여부 (기본값 true) */
+    iconLeft: boolean;
     /** 태그 너비 (숫자면 px, 문자열이면 그대로 적용). 미지정 시 콘텐츠 크기(fit-content) */
     width: string | number;
     componentWillLoad(): void;

package/dist/types/components/sd-time-picker/sd-time-picker-selector/sd-time-picker-selector.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+export declare class SdTimePickerSelector {
+    /** 선택된 시간 (HH:mm) */
+    value: string | null;
+    /** 오전/오후 선택 표시 여부 */
+    useMeridiem: boolean;
+    /** 분 증감 단위 */
+    minuteStep: number;
+    /** 시간 변경 시 발생합니다. */
+    update: EventEmitter<string>;
+    valueChanged(): void;
+    private editingPart;
+    private inputDraft;
+    private hour;
+    private minute;
+    componentWillLoad(): void;
+    private syncFromValue;
+    private get meridiem();
+    private get displayHour();
+    private emitNext;
+    private sanitizeInput;
+    private setDraft;
+    private beginEdit;
+    private commitHourDraft;
+    private commitMinuteDraft;
+    private endEdit;
+    private setMeridiem;
+    private changeHour;
+    private changeMinute;
+    private handleHourInput;
+    private handleMinuteInput;
+    private renderMeridiemButton;
+    private renderColumn;
+    render(): any;
+}

package/dist/types/components/sd-time-picker/sd-time-picker-trigger/sd-time-picker-trigger.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { type TimePickerSize } from '../sd-time-picker.config';
+export declare class SdTimePickerTrigger {
+    /** 표시할 시간 텍스트 */
+    displayText: string;
+    /** 입력 힌트 텍스트 */
+    placeholder: string;
+    /** 비활성 상태 여부 */
+    disabled: boolean;
+    /** 지우기 버튼 표시 여부 */
+    clearable: boolean;
+    /** 트리거 크기 */
+    size: TimePickerSize;
+    /** 트리거 클릭 시 발생합니다. */
+    triggerClick: EventEmitter<void>;
+    /** 지우기 버튼 클릭 시 발생합니다. */
+    clear: EventEmitter<void>;
+    private handleClick;
+    private handleClear;
+    render(): any;
+}

package/dist/types/components/sd-time-picker/sd-time-picker.config.d.ts

@@ -0,0 +1,71 @@
+export type TimePickerSize = 'sm' | 'md';
+export type TimePickerType = 'default' | 'midday';
+export type TimePickerMeridiem = 'AM' | 'PM';
+export interface TimePickerSizeTokens {
+    height: string;
+    paddingX: string;
+    gap: string;
+    iconSize: string;
+    radius: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+    minWidth: string;
+}
+export declare const TIMEPICKER_SIZE_MAP: Record<TimePickerSize, TimePickerSizeTokens>;
+export declare const TIMEPICKER_COLORS: {
+    border: {
+        default: string;
+        focus: string;
+        disabled: string;
+        width: string;
+    };
+    bg: {
+        default: string;
+        disabled: string;
+    };
+    icon: {
+        default: string;
+        disabled: string;
+    };
+    text: {
+        hint: string;
+        default: string;
+        disabled: string;
+    };
+};
+export declare const TIMEPICKER_SELECTOR: {
+    bg: string;
+    radius: string;
+    section: {
+        paddingX: string;
+        paddingY: string;
+    };
+    time: {
+        gap: string;
+        column: {
+            gap: string;
+        };
+    };
+    inputWidth: string;
+    colonSize: string;
+    range: {
+        heading: {
+            color: string;
+            gap: string;
+        };
+        paddingXY: string;
+        panelGap: string;
+        section: {
+            gap: string;
+        };
+    };
+};
+export declare function clampTimePart(value: number, min: number, max: number): number;
+export declare function padTimePart(value: number): string;
+export declare function parseTimeValue(value: string | null | undefined): {
+    hour: number;
+    minute: number;
+};
+export declare function formatTimeValue(hour: number, minute: number): string;
+export declare function formatTimeDisplay(value: string | null | undefined, type: TimePickerType): string;