@situaction/traq-ui-ste 1.2.26 → 1.2.27

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

@@ -1,11 +1,13 @@
 import { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { Size } from '../interface';
 
+type InputMode = "default" | "time";
+type TimeFormat = "HH:mm" | "HH:mm:ss";
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** How large should the input be? **/
     sizeStyle?: Size;
     /** input status style **/
-    status?: 'default' | 'error' | 'secondary' | 'ghost';
+    status?: "default" | "error" | "secondary" | "ghost";
     /** Optional unit or additional label to display next to the input **/
     labelUnit?: string;
     /** If true, the input will have rounded corners **/
@@ -19,10 +21,25 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
     /** Disable the input field **/
     disabled?: boolean;
     fullWidth?: boolean;
+    /** Input rendering mode **/
+    mode?: InputMode;
+    /** Time format used when mode="time" **/
+    timeFormat?: TimeFormat;
+    /** Emits time as milliseconds since midnight (0..86_399_999). null if empty/invalid. */
+    onTimeChange?: (timeMs: number | null) => void;
 }
 /**
  * The Input component renders an input field with optional icons or labels on the left and right.
  * It supports different input sizes, status styles, and focus handling.
  * The input can also be disabled and have rounded corners.
+ *
+ * When mode="time", it behaves like a segmented time editor:
+ * - Empty shows "--:--" / "--:--:--" and DOES NOT auto-fill "00:00" on focus/hover/click
+ * - Click selects HH / mm / ss
+ * - ArrowLeft/Right switches segment
+ * - ArrowUp/Down increments/decrements current segment
+ * - Digits edit current segment (2-digit buffer) then move next
+ * - onTimeChange emits ms since midnight, or null if empty/invalid
  */
 export declare const Input: FC<InputProps>;
+export {};