import * as React from 'react';
import type { LucideIcon } from 'lucide-react';
import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
import { type TimeParts, type TimeStep } from '../../components/TimePicker/time-columns';
/**
 * TimePicker — 單一時間(時/分/秒)輸入與顯示元件
 *
 * ── 定位(同 DatePicker 家族)──
 * Value 以 ISO time string 儲存("HH:mm" 或 "HH:mm:ss"),local-time 語義(不帶時區)。
 * Edit 用本 DS 自建 time column panel + Popover 呈現,視覺與 DatePicker 一致。
 * Display 用 Intl.DateTimeFormat 格式化(跨 locale / 12h-24h 統一經過此 API)。
 *
 * ── Layout Family ──
 * CLAUDE.md 4-Family Model Family 4(Field control layout)消費者。結構繼承
 * `fieldWrapperStyles + [<editable>] [endIcon=Clock]`,視覺對齊 DatePicker(同
 * 「點擊觸發浮層」role:indicator 在 suffix slot,對齊 Material `endAdornment` /
 * Ant DatePicker / Polaris Picker 共識)。
 *
 * ── 實作基礎 ──
 * Trigger:`<div role="combobox">` + `fieldWrapperStyles`(視覺仍是 Input wrapper,改為可點擊觸發浮層;
 *   2026-04-25 由 `<button>` 改 div 避 nested-interactive,對齊 Select / Combobox,鍵盤靠顯式 onKeyDown)
 * Popup:`Popover`(消費 overlay-surface pattern)
 * Panel 主體:自建 column picker(三欄 scrollable list),不引入第三方 time library
 *
 * ── 共用規則 ──
 * Mode / size / disabled / error 等詳見 `../Field/field-controls.spec.md`。
 */
export interface TimeFormatOptions {
    /** Intl.DateTimeFormat options(預設 { hour: '2-digit', minute: '2-digit', hour12: false }) */
    formatOptions?: Intl.DateTimeFormatOptions;
    /** locale(預設 'en-US') */
    locale?: string;
}
export interface DisabledTimeResult {
    disabledHours?: number[];
    disabledMinutes?: number[];
    disabledSeconds?: number[];
}
export interface TimePickerProps extends TimeFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'> {
    mode?: FieldMode;
    /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
    variant?: FieldVariant;
    error?: boolean;
    size?: 'sm' | 'md' | 'lg';
    /** ISO time string("HH:mm" 或 "HH:mm:ss") */
    value?: string | null;
    onChange?: (value: string) => void;
    placeholder?: string;
    className?: string;
    disabled?: boolean;
    /** 允許清空已選值 */
    clearable?: boolean;
    /**
     * 是否顯示秒欄(三欄 picker)。預設 false(兩欄:時/分)。
     * format 自動對應:false → "HH:mm",true → "HH:mm:ss"。
     */
    showSeconds?: boolean;
    /** 分鐘步進(會議常用 15)。預設 1 */
    minuteStep?: TimeStep;
    /** 秒步進。預設 1。僅 showSeconds=true 有效 */
    secondStep?: TimeStep;
    /** 動態 disabled 某些時/分/秒(基於已選其他欄位)。 */
    disabledTime?: (parts: TimeParts) => DisabledTimeResult;
    /**
     * Suffix indicator(2026-05-05 v9 canonical fix):「點擊觸發浮層」indicator 一律 suffix
     * (對齊 DatePicker calendar / Material endAdornment)。預設 Clock,傳 null 可關閉。
     */
    endIcon?: LucideIcon | null;
    /**
     * Display 是否渲 endIcon + Field naked wrapper(D-path opt-in,2026-05-08)
     * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
     * 設 true 時 display 也走 fieldWrapperStyles(naked variant)+ ItemSuffix Clock,
     * 與 edit 同 DOM 結構,消除 Layer-B padding mismatch。
     */
    showDisplayEndIcon?: boolean;
    /** Initial open state(uncontrolled)— DataTable cell-as-input 1-step open canonical */
    defaultOpen?: boolean;
    /** open state 變更 callback。DataTable cell-as-input 用:open=false → cell exit edit */
    onOpenChange?: (open: boolean) => void;
}
declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<HTMLDivElement>>;
export declare const timePickerMeta: {
    readonly component: "TimePicker";
    readonly family: 4;
    readonly variants: {};
    readonly sizes: {};
    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
    readonly tokens: {
        readonly bg: readonly ["bg-neutral-hover", "bg-primary", "bg-transparent"];
        readonly fg: readonly ["text-fg-disabled", "text-fg-muted", "text-foreground"];
        readonly ring: readonly [];
    };
};
export { TimePicker };
//# sourceMappingURL=time-picker.d.ts.map