@uniai-fe/uds-primitives 0.12.0 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -89,8 +89,8 @@
     "typescript": "6.0.3",
     "@uniai-fe/eslint-config": "0.4.2",
     "@uniai-fe/next-devkit": "0.4.0",
-    "@uniai-fe/util-functions": "0.4.3",
     "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/util-functions": "0.4.3",
     "@uniai-fe/uds-foundation": "0.5.0"
   },
   "scripts": {

package/src/components/input/index.tsx

@@ -3,7 +3,7 @@
  * @desc
  * - `Input.Base`, `Input.TextArea`: foundation control
  * - `Input.Text.*`: text scenario wrappers
- * - `Input.Date`, `Input.Address`, `Input.File`: category presets
+ * - `Input.Date`, `Input.Time`, `Input.Address`, `Input.File`: category presets
  * - hooks/utils/types는 별도 배럴로 함께 export한다
  */
 import "./index.scss";

package/src/components/input/markup/time/Template.tsx

@@ -23,20 +23,9 @@ import {
   toDisplayHour,
 } from "../../../time-picker/utils";
 import ClockIcon from "../../img/clock.svg";
-import type { InputTimeTemplateProps } from "../../types";
+import type { InputTimeDraft, InputTimeTemplateProps } from "../../types";
 import InputTimeTrigger from "./Trigger";
 
-interface InputTimeDraftFields {
-  hours: string;
-  minutes: string;
-  seconds: string;
-}
-
-interface InputTimeDraft {
-  fields: InputTimeDraftFields;
-  period: TimePickerPeriod;
-}
-
 const getInputTimeDraft = (
   value: string,
   format: "12h" | "24h",

package/src/components/input/markup/time/Trigger.tsx

@@ -1,67 +1,11 @@
 "use client";
 
 import clsx from "clsx";
-import type {
-  ChangeEvent,
-  ComponentPropsWithoutRef,
-  FocusEvent,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-} from "react";
+import type { ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent } from "react";
 import { forwardRef, useRef } from "react";
 import { Calendar } from "../../../calendar";
-import type {
-  TimePickerFormat,
-  TimePickerPeriod,
-  TimePickerUnit,
-} from "../../../time-picker/types";
-import type { InputPriority, InputSize, InputState } from "../../types";
-
-interface InputTimeTriggerFields {
-  hours: string;
-  minutes: string;
-  seconds: string;
-}
-
-interface InputTimeTriggerProps extends Omit<
-  ComponentPropsWithoutRef<"div">,
-  "onBlur" | "onFocus"
-> {
-  fields: InputTimeTriggerFields;
-  period: TimePickerPeriod;
-  activeUnit: TimePickerUnit | null;
-  priority: InputPriority;
-  size: InputSize;
-  state: InputState;
-  format: TimePickerFormat;
-  withSeconds: boolean;
-  disabled: boolean;
-  readOnly: boolean;
-  icon: ReactNode;
-  iconPosition: "left" | "right";
-  iconLabel: string;
-  hoursInputLabel: string;
-  minutesInputLabel: string;
-  secondsInputLabel: string;
-  amPmInputLabel: string;
-  hoursPlaceholder: string;
-  minutesPlaceholder: string;
-  secondsPlaceholder: string;
-  onFieldChange: (unit: TimePickerUnit, value: string) => void;
-  onFieldFocus: (
-    unit: TimePickerUnit,
-    event: FocusEvent<HTMLInputElement>,
-  ) => void;
-  onFieldBlur: (unit: TimePickerUnit) => void;
-  onFieldKeyDown: (
-    unit: TimePickerUnit,
-    event: KeyboardEvent<HTMLInputElement>,
-  ) => void;
-  onPeriodChange: (period: TimePickerPeriod) => void;
-  onStep: (amount: 1 | -1) => void;
-  onRootBlur: (event: FocusEvent<HTMLDivElement>) => void;
-}
+import type { TimePickerUnit } from "../../../time-picker/types";
+import type { InputTimeTriggerProps } from "../../types";
 
 /**
  * Input Time trigger; 시·분·초 field와 focus 단위 stepper를 렌더한다.

package/src/components/input/markup/time/index.tsx

@@ -1,6 +1,13 @@
 import "../../styles/time.scss";
 import InputTimeTemplate from "./Template";
+import InputTimeTrigger from "./Trigger";
+
+export const InputTimeDefault = {
+  Template: InputTimeTemplate,
+};
 
 export const InputTime = {
   Template: InputTimeTemplate,
+  Default: InputTimeDefault,
+  Trigger: InputTimeTrigger,
 };

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

@@ -1,7 +1,16 @@
-import type { ComponentPropsWithoutRef, FocusEvent, ReactNode } from "react";
+import type {
+  ComponentPropsWithoutRef,
+  FocusEvent,
+  KeyboardEvent,
+  ReactNode,
+} from "react";
 import type { UseFormRegisterReturn } from "react-hook-form";
 import type { FormFieldWidth } from "../../form/types/props";
-import type { TimePickerFormat } from "../../time-picker/types";
+import type {
+  TimePickerFormat,
+  TimePickerPeriod,
+  TimePickerUnit,
+} from "../../time-picker/types";
 import type { InputPriority, InputSize, InputState } from "./foundation";
 
 /**
@@ -18,6 +27,199 @@ export type InputTimeHiddenInputProps = Omit<
   "type" | "value" | "defaultValue" | "name"
 >;
 
+/**
+ * Input Time draft field 값.
+ * @property {string} hours 시 입력값
+ * @property {string} minutes 분 입력값
+ * @property {string} seconds 초 입력값
+ */
+export interface InputTimeDraftFields {
+  /**
+   * 시 입력값.
+   */
+  hours: string;
+  /**
+   * 분 입력값.
+   */
+  minutes: string;
+  /**
+   * 초 입력값.
+   */
+  seconds: string;
+}
+
+/**
+ * Input Time 편집 중인 시간 값.
+ * @property {InputTimeDraftFields} fields 시·분·초 입력값
+ * @property {"am" | "pm"} period 오전·오후 구분
+ */
+export interface InputTimeDraft {
+  /**
+   * 시·분·초 입력값.
+   */
+  fields: InputTimeDraftFields;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+}
+
+/**
+ * Input Time trigger field 값.
+ * @see InputTimeDraftFields
+ */
+export type InputTimeTriggerFields = InputTimeDraftFields;
+
+/**
+ * Input Time Trigger props.
+ * @property {InputTimeTriggerFields} fields 시·분·초 입력값
+ * @property {"am" | "pm"} period 오전·오후 구분
+ * @property {"hours" | "minutes" | "seconds" | null} activeUnit 현재 활성 단위
+ * @property {"primary" | "secondary" | "tertiary" | "table"} priority input priority
+ * @property {"small" | "medium" | "large"} size input size
+ * @property {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} state input state
+ * @property {"12h" | "24h"} format 표시 형식
+ * @property {boolean} withSeconds 초 field 노출 여부
+ * @property {boolean} disabled 비활성화 여부
+ * @property {boolean} readOnly 읽기 전용 여부
+ * @property {ReactNode} icon clock icon
+ * @property {"left" | "right"} iconPosition clock icon 위치
+ * @property {string} iconLabel clock icon 접근성 라벨
+ * @property {string} hoursInputLabel 시 input 접근성 라벨
+ * @property {string} minutesInputLabel 분 input 접근성 라벨
+ * @property {string} secondsInputLabel 초 input 접근성 라벨
+ * @property {string} amPmInputLabel 오전·오후 input 접근성 라벨
+ * @property {string} hoursPlaceholder 시 placeholder
+ * @property {string} minutesPlaceholder 분 placeholder
+ * @property {string} secondsPlaceholder 초 placeholder
+ * @property {(unit: "hours" | "minutes" | "seconds", value: string) => void} onFieldChange field 변경 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds", event: FocusEvent<HTMLInputElement>) => void} onFieldFocus field focus 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds") => void} onFieldBlur field blur 핸들러
+ * @property {(unit: "hours" | "minutes" | "seconds", event: KeyboardEvent<HTMLInputElement>) => void} onFieldKeyDown field keyboard 핸들러
+ * @property {(period: "am" | "pm") => void} onPeriodChange 오전·오후 변경 핸들러
+ * @property {(amount: 1 | -1) => void} onStep 활성 단위 증감 핸들러
+ * @property {(event: FocusEvent<HTMLDivElement>) => void} onRootBlur root blur 핸들러
+ */
+export interface InputTimeTriggerProps extends Omit<
+  ComponentPropsWithoutRef<"div">,
+  "onBlur" | "onFocus"
+> {
+  /**
+   * 시·분·초 입력값.
+   */
+  fields: InputTimeTriggerFields;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+  /**
+   * "hours" | "minutes" | "seconds" | null.
+   */
+  activeUnit: TimePickerUnit | null;
+  /**
+   * "primary" | "secondary" | "tertiary" | "table".
+   */
+  priority: InputPriority;
+  /**
+   * "small" | "medium" | "large".
+   */
+  size: InputSize;
+  /**
+   * "default" | "active" | "focused" | "success" | "error" | "disabled" | "loading".
+   */
+  state: InputState;
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 초 field 노출 여부.
+   */
+  withSeconds: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 읽기 전용 여부.
+   */
+  readOnly: boolean;
+  /**
+   * clock icon.
+   */
+  icon: ReactNode;
+  /**
+   * "left" | "right".
+   */
+  iconPosition: InputTimeIconPosition;
+  /**
+   * clock icon 접근성 라벨.
+   */
+  iconLabel: string;
+  /**
+   * 시 input 접근성 라벨.
+   */
+  hoursInputLabel: string;
+  /**
+   * 분 input 접근성 라벨.
+   */
+  minutesInputLabel: string;
+  /**
+   * 초 input 접근성 라벨.
+   */
+  secondsInputLabel: string;
+  /**
+   * 오전·오후 input 접근성 라벨.
+   */
+  amPmInputLabel: string;
+  /**
+   * 시 placeholder.
+   */
+  hoursPlaceholder: string;
+  /**
+   * 분 placeholder.
+   */
+  minutesPlaceholder: string;
+  /**
+   * 초 placeholder.
+   */
+  secondsPlaceholder: string;
+  /**
+   * field 변경 핸들러.
+   */
+  onFieldChange: (unit: TimePickerUnit, value: string) => void;
+  /**
+   * field focus 핸들러.
+   */
+  onFieldFocus: (
+    unit: TimePickerUnit,
+    event: FocusEvent<HTMLInputElement>,
+  ) => void;
+  /**
+   * field blur 핸들러.
+   */
+  onFieldBlur: (unit: TimePickerUnit) => void;
+  /**
+   * field keyboard 핸들러.
+   */
+  onFieldKeyDown: (
+    unit: TimePickerUnit,
+    event: KeyboardEvent<HTMLInputElement>,
+  ) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+  /**
+   * 활성 단위 증감 핸들러.
+   */
+  onStep: (amount: 1 | -1) => void;
+  /**
+   * root blur 핸들러.
+   */
+  onRootBlur: (event: FocusEvent<HTMLDivElement>) => void;
+}
+
 /**
  * Input Time Template props.
  * 저장값은 24시간 `HH:mm` 또는 `HH:mm:ss` 문자열을 사용한다.

package/src/components/time-picker/markup/Footer.tsx

@@ -1,23 +1,5 @@
 import { Button } from "../../button";
-
-interface TimePickerFooterProps {
-  /**
-   * 삭제 action 노출 여부.
-   */
-  clearable: boolean;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 삭제 핸들러.
-   */
-  onClear: () => void;
-  /**
-   * 적용 핸들러.
-   */
-  onApply: () => void;
-}
+import type { TimePickerFooterProps } from "../types";
 
 /**
  * TimePicker Footer; 삭제와 적용 action을 렌더한다.

package/src/components/time-picker/markup/HourSection.tsx

@@ -1,5 +1,5 @@
 import { SegmentedControl } from "../../segmented-control";
-import type { TimePickerFormat, TimePickerPeriod } from "../types";
+import type { TimePickerHourSectionProps } from "../types";
 
 const HOURS_12 = Array.from({ length: 12 }, (_, index) => index + 1);
 const HOURS_24 = Array.from({ length: 24 }, (_, index) => index);
@@ -8,33 +8,6 @@ const PERIOD_OPTIONS = [
   { value: "pm", label: "오후" },
 ];
 
-interface TimePickerHourSectionProps {
-  /**
-   * "12h" | "24h".
-   */
-  format: TimePickerFormat;
-  /**
-   * 선택한 표시 시.
-   */
-  selectedHour: number | null;
-  /**
-   * "am" | "pm".
-   */
-  period: TimePickerPeriod;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 시 선택 핸들러.
-   */
-  onHourSelect: (hours: number) => void;
-  /**
-   * 오전·오후 변경 핸들러.
-   */
-  onPeriodChange: (period: TimePickerPeriod) => void;
-}
-
 /**
  * TimePicker Hour Section; 오전·오후와 시 선택 grid를 렌더한다.
  * @component

package/src/components/time-picker/markup/MinuteSection.tsx

@@ -1,27 +1,9 @@
 import MinusIcon from "../img/minus.svg";
 import PlusIcon from "../img/plus.svg";
+import type { TimePickerMinuteSectionProps } from "../types";
 
 const MINUTES = Array.from({ length: 12 }, (_, index) => index * 5);
 
-interface TimePickerMinuteSectionProps {
-  /**
-   * 선택한 분.
-   */
-  selectedMinute: number | null;
-  /**
-   * 비활성화 여부.
-   */
-  disabled: boolean;
-  /**
-   * 1분 증감 핸들러.
-   */
-  onMinuteStep: (amount: 1 | -1) => void;
-  /**
-   * 분 선택 핸들러.
-   */
-  onMinuteSelect: (minutes: number) => void;
-}
-
 /**
  * TimePicker Minute Section; 1분 stepper와 5분 선택 grid를 렌더한다.
  * @component

package/src/components/time-picker/markup/Summary.tsx

@@ -1,9 +1,4 @@
-interface TimePickerSummaryProps {
-  /**
-   * 선택한 시간 표시값.
-   */
-  summary: string;
-}
+import type { TimePickerSummaryProps } from "../types";
 
 /**
  * TimePicker Summary; 현재 선택한 시간을 표시한다.

package/src/components/time-picker/types/time-picker.ts

@@ -92,3 +92,102 @@ export interface TimePickerTemplateProps {
    */
   onApply: () => void;
 }
+
+/**
+ * TimePicker Summary props.
+ * @property {string} summary 선택한 시간 표시값
+ */
+export interface TimePickerSummaryProps {
+  /**
+   * 선택한 시간 표시값.
+   */
+  summary: string;
+}
+
+/**
+ * TimePicker Hour Section props.
+ * @property {"12h" | "24h"} format 표시 형식
+ * @property {number | null} selectedHour 선택한 표시 시
+ * @property {"am" | "pm"} period 오전·오후 구분
+ * @property {boolean} disabled 비활성화 여부
+ * @property {(hours: number) => void} onHourSelect 시 선택 핸들러
+ * @property {(period: "am" | "pm") => void} onPeriodChange 오전·오후 변경 핸들러
+ */
+export interface TimePickerHourSectionProps {
+  /**
+   * "12h" | "24h".
+   */
+  format: TimePickerFormat;
+  /**
+   * 선택한 표시 시.
+   */
+  selectedHour: number | null;
+  /**
+   * "am" | "pm".
+   */
+  period: TimePickerPeriod;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 시 선택 핸들러.
+   */
+  onHourSelect: (hours: number) => void;
+  /**
+   * 오전·오후 변경 핸들러.
+   */
+  onPeriodChange: (period: TimePickerPeriod) => void;
+}
+
+/**
+ * TimePicker Minute Section props.
+ * @property {number | null} selectedMinute 선택한 분
+ * @property {boolean} disabled 비활성화 여부
+ * @property {(amount: 1 | -1) => void} onMinuteStep 1분 증감 핸들러
+ * @property {(minutes: number) => void} onMinuteSelect 분 선택 핸들러
+ */
+export interface TimePickerMinuteSectionProps {
+  /**
+   * 선택한 분.
+   */
+  selectedMinute: number | null;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 1분 증감 핸들러.
+   */
+  onMinuteStep: (amount: 1 | -1) => void;
+  /**
+   * 분 선택 핸들러.
+   */
+  onMinuteSelect: (minutes: number) => void;
+}
+
+/**
+ * TimePicker Footer props.
+ * @property {boolean} clearable 삭제 action 노출 여부
+ * @property {boolean} disabled 비활성화 여부
+ * @property {() => void} onClear 삭제 핸들러
+ * @property {() => void} onApply 적용 핸들러
+ */
+export interface TimePickerFooterProps {
+  /**
+   * 삭제 action 노출 여부.
+   */
+  clearable: boolean;
+  /**
+   * 비활성화 여부.
+   */
+  disabled: boolean;
+  /**
+   * 삭제 핸들러.
+   */
+  onClear: () => void;
+  /**
+   * 적용 핸들러.
+   */
+  onApply: () => void;
+}