@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

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

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import { type TimeStep } from '../../components/TimePicker/time-columns';
+export interface DateFormatOptions {
+    /** Intl.DateTimeFormat options（預設 { year: 'numeric', month: '2-digit', day: '2-digit' }） */
+    formatOptions?: Intl.DateTimeFormatOptions;
+    /** locale（預設 'en-US'） */
+    locale?: string;
+}
+/**
+ * Default format:**YYYY/MM/DD**(對齊 Ant Design 順序,year-first ISO-like)。
+ * 棄 `en-US` `MM/DD/YYYY`(month-first 美式)— 美式順序在 international DS 反直覺
+ * (跟 ISO date 視覺對不上,跟 sort 順序也對不上)。Ant / Material X / Apple HIG
+ * 一致 year-first。Consumer 想自訂可傳 `formatOptions` + `locale`。
+ */
+declare function formatDate(value: string | number | Date, options?: DateFormatOptions): string;
+export interface DatePickerProps extends DateFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'placeholder' | 'defaultValue'> {
+    mode?: FieldMode;
+    /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
+    variant?: FieldVariant;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** ISO date(YYYY-MM-DD)或 ISO datetime(YYYY-MM-DDTHH:MM:SS,當 showTime=true) */
+    value?: string | null;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    disabled?: boolean;
+    /** 允許清空已選值 */
+    clearable?: boolean;
+    /** 啟用時間欄位(時 / 分 [/ 秒]),Ant idiom — value 變 ISO datetime */
+    showTime?: boolean;
+    /** showTime 時是否顯示秒 */
+    showSeconds?: boolean;
+    /** showTime 分鐘步進(會議常用 15) */
+    minuteStep?: TimeStep;
+    /** showTime 秒鐘步進 */
+    secondStep?: TimeStep;
+    /**
+     * 是否需 OK 確認才提交,預設 showTime=true 時為 true(對齊 Ant DatePicker showTime)
+     * — datetime picker user 習慣編完才 commit,避免 calendar 點到就關。
+     */
+    needConfirm?: boolean;
+    /**
+     * Display 是否渲 Calendar icon + Field naked wrapper(D-path opt-in,2026-05-08)
+     * — DataTable cell display↔edit 像素級對齊用。預設 false(裸 span,backward compat)。
+     * 設 true 時 display 走 fieldWrapperStyles(naked variant)+ ItemSuffix CalendarIcon,
+     * 與 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;
+    /**
+     * Issue 10 typed input(2026-05-10):trigger 內渲 real `<input>` 接 user 鍵盤輸入,
+     * 同時保持 Calendar icon trigger 開啟 calendar 選擇(對齊 Material X DatePicker / Ant
+     * DatePicker / Notion typed-date idiom)。
+     *
+     * 預設 false(backward-compat)— trigger 仍是 `<div role="combobox">` + `<span>` 文字。
+     *
+     * Behavior(opt-in `typeable=true`):
+     *   - `<input>` 取代 `<span>` displayValue,user 可直接打字
+     *   - Partial input(打到一半,如 "2025-")allow,**不**即時驗證
+     *   - `Enter` / `Blur` → `parseDateInput` 解析 → 合法 commit `onChange`;不合法 set
+     *     aria-invalid + keep draft visible(user 可繼續修)
+     *   - `Esc` → reset draft 回 committed value
+     *   - IME composition 期間不觸發驗證(中日韓輸入法 onCompositionStart/End 攔截)
+     *   - Calendar pick → 同步 input draft + commit(走原 path)
+     *   - Calendar icon 仍 click 開 popover(Material/Ant idiom)
+     *
+     * **v1 limits**:
+     *   - format detection ISO YYYY-MM-DD / YYYY/MM/DD / Date.parse fallback(`parseDateInput`)
+     *   - US `MM/DD/YYYY` vs EU `DD/MM/YYYY` ambiguous → fallback native parser
+     *   - 未支援 locale-aware format prop(v2 加 `dateFormat?: string`)
+     *
+     * 對齊 Material X-DatePicker `format` prop / Ant DatePicker `format` array / Notion typed-input。
+     */
+    typeable?: boolean;
+}
+export interface DatePickerRangeProps extends DateFormatOptions, Omit<React.HTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'placeholder' | 'defaultValue'> {
+    mode?: FieldMode;
+    /** Field chrome variant. Default = context.variant ?? 'default'. Per-prop override. */
+    variant?: FieldVariant;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** 區間值:[start ISO, end ISO]。任一 null 代表尚未選。 */
+    value?: [string | null, string | null] | null;
+    onChange?: (value: [string | null, string | null]) => void;
+    /** Placeholder:[start placeholder, end placeholder] */
+    placeholder?: [string, string];
+    className?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    /** 啟用時間欄位 — value 兩端皆變 ISO datetime */
+    showTime?: boolean;
+    showSeconds?: boolean;
+    minuteStep?: TimeStep;
+    secondStep?: TimeStep;
+    needConfirm?: boolean;
+}
+declare const DatePickerRange: React.ForwardRefExoticComponent<DatePickerRangeProps & React.RefAttributes<HTMLDivElement>>;
+declare const DatePickerWithRange: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>> & {
+    Range: React.ForwardRefExoticComponent<DatePickerRangeProps & React.RefAttributes<HTMLDivElement>>;
+};
+export declare const datePickerMeta: {
+    readonly component: "DatePicker";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
+        readonly ring: readonly [];
+    };
+};
+export { DatePickerWithRange as DatePicker, DatePickerRange, formatDate, };
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/components/DatePicker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/date-picker.tsx"],"names":[],"mappings":"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"}