@uniai-fe/uds-primitives 0.6.14 → 0.7.0

package/src/components/input/types/time.ts

@@ -0,0 +1,265 @@
+import type { PopoverProps, ScrollAreaProps } from "@mantine/core";
+import type {
+  TimePickerAmPmLabels,
+  TimePickerFormat,
+  TimePickerPasteSplit,
+  TimePickerPresets,
+} from "@mantine/dates";
+import type { ComponentPropsWithoutRef, FocusEvent, ReactNode } from "react";
+import type { UseFormRegisterReturn } from "react-hook-form";
+import type { FormFieldWidth } from "../../form/types/props";
+import type { InputPriority, InputSize, InputState } from "./foundation";
+
+/**
+ * Input Time icon position.
+ */
+export type InputTimeIconPosition = "left" | "right";
+
+/**
+ * Input TimePicker hidden input props.
+ */
+export type InputTimeHiddenInputProps = Omit<
+  ComponentPropsWithoutRef<"input">,
+  "type" | "value" | "defaultValue" | "name"
+>;
+
+/**
+ * Input TimePicker props.
+ * @property {string} [value] 제어형 시간 값
+ * @property {string} [defaultValue] 비제어 초기 시간 값
+ * @property {(value:string)=>void} [onChange] 값 변경 핸들러
+ * @property {(value:string)=>void} [onValueChange] 값 변경 별칭
+ * @property {string} [name] form name
+ * @property {string} [form] form id
+ * @property {UseFormRegisterReturn} [register] react-hook-form register 결과
+ * @property {InputPriority} [priority] input priority
+ * @property {InputSize} [size] input size
+ * @property {InputState} [state] input state
+ * @property {boolean} [block] width 100% 여부
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [width] width preset 옵션
+ * @property {string} [className] root className
+ * @property {boolean} [disabled] disabled 여부
+ * @property {boolean} [readOnly] readOnly 여부
+ * @property {boolean} [required] required 여부
+ * @property {string} [id] root id
+ * @property {"12h" | "24h"} [format] 표시/입력 시간 포맷
+ * @property {boolean} [withSeconds] seconds 입력 노출 여부
+ * @property {boolean} [withDropdown] dropdown 노출 여부
+ * @property {boolean} [clearable] clear 버튼 노출 여부
+ * @property {string} [min] 최소 시간 값
+ * @property {string} [max] 최대 시간 값
+ * @property {number} [hoursStep] hour step
+ * @property {number} [minutesStep] minute step
+ * @property {number} [secondsStep] second step
+ * @property {ReactNode} [icon] clock icon override
+ * @property {"left" | "right"} [iconPosition] clock icon 위치
+ * @property {string} [iconLabel] clock icon 접근성 라벨
+ * @property {string} [clearButtonLabel] clear 버튼 접근성 라벨
+ * @property {PopoverProps} [popoverProps] Mantine Popover 옵션
+ * @property {InputTimeHiddenInputProps} [hiddenInputProps] hidden input 옵션
+ * @property {string} [hoursInputLabel] hour input aria-label
+ * @property {string} [minutesInputLabel] minute input aria-label
+ * @property {string} [secondsInputLabel] second input aria-label
+ * @property {string} [amPmInputLabel] am/pm input aria-label
+ * @property {TimePickerAmPmLabels} [amPmLabels] am/pm 라벨
+ * @property {string} [hoursPlaceholder] hour placeholder
+ * @property {string} [minutesPlaceholder] minute placeholder
+ * @property {string} [secondsPlaceholder] second placeholder
+ * @property {TimePickerPasteSplit} [pasteSplit] paste parser
+ * @property {TimePickerPresets} [presets] dropdown preset
+ * @property {number} [maxDropdownContentHeight] dropdown 최대 높이
+ * @property {ScrollAreaProps} [scrollAreaProps] dropdown scroll area 옵션
+ * @property {boolean} [reverseTimeControlsList] dropdown control 역순 여부
+ * @property {(event:FocusEvent<HTMLInputElement>)=>void} [onFocus] focus 핸들러
+ * @property {(event:FocusEvent<HTMLDivElement>)=>void} [onBlur] blur 핸들러
+ */
+export interface InputTimePickerProps {
+  /**
+   * 제어형 시간 값
+   */
+  value?: string;
+  /**
+   * 비제어 초기 시간 값
+   */
+  defaultValue?: string;
+  /**
+   * 값 변경 핸들러
+   */
+  onChange?: (value: string) => void;
+  /**
+   * 값 변경 별칭
+   */
+  onValueChange?: (value: string) => void;
+  /**
+   * form name
+   */
+  name?: string;
+  /**
+   * form id
+   */
+  form?: string;
+  /**
+   * react-hook-form register 결과
+   */
+  register?: UseFormRegisterReturn;
+  /**
+   * input priority
+   */
+  priority?: InputPriority;
+  /**
+   * input size
+   */
+  size?: InputSize;
+  /**
+   * input state
+   */
+  state?: InputState;
+  /**
+   * width 100% 여부
+   */
+  block?: boolean;
+  /**
+   * width preset 옵션
+   */
+  width?: FormFieldWidth;
+  /**
+   * root className
+   */
+  className?: string;
+  /**
+   * disabled 여부
+   */
+  disabled?: boolean;
+  /**
+   * readOnly 여부
+   */
+  readOnly?: boolean;
+  /**
+   * required 여부
+   */
+  required?: boolean;
+  /**
+   * root id
+   */
+  id?: string;
+  /**
+   * 표시/입력 시간 포맷
+   */
+  format?: TimePickerFormat;
+  /**
+   * seconds 입력 노출 여부
+   */
+  withSeconds?: boolean;
+  /**
+   * dropdown 노출 여부
+   */
+  withDropdown?: boolean;
+  /**
+   * clear 버튼 노출 여부
+   */
+  clearable?: boolean;
+  /**
+   * 최소 시간 값
+   */
+  min?: string;
+  /**
+   * 최대 시간 값
+   */
+  max?: string;
+  /**
+   * hour step
+   */
+  hoursStep?: number;
+  /**
+   * minute step
+   */
+  minutesStep?: number;
+  /**
+   * second step
+   */
+  secondsStep?: number;
+  /**
+   * clock icon override
+   */
+  icon?: ReactNode;
+  /**
+   * clock icon 위치
+   */
+  iconPosition?: InputTimeIconPosition;
+  /**
+   * clock icon 접근성 라벨
+   */
+  iconLabel?: string;
+  /**
+   * clear 버튼 접근성 라벨
+   */
+  clearButtonLabel?: string;
+  /**
+   * Mantine Popover 옵션
+   */
+  popoverProps?: PopoverProps;
+  /**
+   * hidden input 옵션
+   */
+  hiddenInputProps?: InputTimeHiddenInputProps;
+  /**
+   * hour input aria-label
+   */
+  hoursInputLabel?: string;
+  /**
+   * minute input aria-label
+   */
+  minutesInputLabel?: string;
+  /**
+   * second input aria-label
+   */
+  secondsInputLabel?: string;
+  /**
+   * am/pm input aria-label
+   */
+  amPmInputLabel?: string;
+  /**
+   * am/pm 라벨
+   */
+  amPmLabels?: TimePickerAmPmLabels;
+  /**
+   * hour placeholder
+   */
+  hoursPlaceholder?: string;
+  /**
+   * minute placeholder
+   */
+  minutesPlaceholder?: string;
+  /**
+   * second placeholder
+   */
+  secondsPlaceholder?: string;
+  /**
+   * paste parser
+   */
+  pasteSplit?: TimePickerPasteSplit;
+  /**
+   * dropdown preset
+   */
+  presets?: TimePickerPresets;
+  /**
+   * dropdown 최대 높이
+   */
+  maxDropdownContentHeight?: number;
+  /**
+   * dropdown scroll area 옵션
+   */
+  scrollAreaProps?: ScrollAreaProps;
+  /**
+   * dropdown control 역순 여부
+   */
+  reverseTimeControlsList?: boolean;
+  /**
+   * focus 핸들러
+   */
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+  /**
+   * blur 핸들러
+   */
+  onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
+}