@uniai-fe/uds-primitives 0.12.7 → 0.12.9

package/dist/styles.css

@@ -3,13 +3,12 @@
   --alternate-unit-text-color: var(--color-cool-gray-70);
   --alternate-unit-text-font-size: 1.4rem;
   --alternate-unit-text-line-height: 1.5;
-  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-figure-text-gap-ratio: 0.344444;
   --alternate-loading-icon-color: var(--color-primary-default);
   --alternate-loading-icon-small-size: 2.4rem;
   --alternate-loading-icon-medium-size: 3.6rem;
   --alternate-loading-icon-large-size: 5.2rem;
   --alternate-layout-min-block-size: 320px;
-  --alternate-layout-gap: var(--spacing-gap-7);
   --alternate-layout-content-gap: var(--spacing-gap-4);
   --alternate-layout-figure-size: 120px;
   --alternate-layout-title-color: var(--color-label-strong);
@@ -1045,6 +1044,10 @@
 }
 
 .alternate {
+  --alternate-unit-gap: calc(
+    var(--alternate-loading-icon-small-size) *
+      var(--alternate-figure-text-gap-ratio)
+  );
   width: 100%;
   height: 100%;
   display: flex;
@@ -1102,6 +1105,9 @@
 }
 
 .alternate-layout {
+  --alternate-layout-gap: calc(
+    var(--alternate-layout-figure-size) * var(--alternate-figure-text-gap-ratio)
+  );
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -1122,6 +1128,13 @@
   margin: 0;
 }
 
+.alternate-layout-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--alternate-layout-content-gap);
+}
+
 .alternate-layout-title {
   margin: 0;
   color: var(--alternate-layout-title-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -87,11 +87,11 @@
     "react-hook-form": "^7.86.0",
     "sass": "^1.102.0",
     "typescript": "6.0.3",
-    "@uniai-fe/next-devkit": "0.4.1",
     "@uniai-fe/eslint-config": "0.4.3",
-    "@uniai-fe/tsconfig": "0.2.0",
+    "@uniai-fe/uds-foundation": "0.6.0",
     "@uniai-fe/util-functions": "0.4.3",
-    "@uniai-fe/uds-foundation": "0.6.0"
+    "@uniai-fe/next-devkit": "0.4.1",
+    "@uniai-fe/tsconfig": "0.2.0"
   },
   "scripts": {
     "check:pre-commit": "pnpm --dir ../../.. run check:pre-commit",

package/src/components/alternate/layout/Layout.tsx

@@ -2,6 +2,7 @@ import AlternateLayoutButton from "./Button";
 import AlternateLayoutContainer from "./Container";
 import AlternateLayoutContents from "./Contents";
 import AlternateLayoutFigure from "./Figure";
+import AlternateLayoutText from "./Text";
 import AlternateLayoutTextButton from "./TextButton";
 import AlternateLayoutTitle from "./Title";
 
@@ -10,6 +11,7 @@ import AlternateLayoutTitle from "./Title";
  * @desc
  * - `Container`: 화면 상태 조합 루트다.
  * - `Figure`: 도입 측이 제어하는 visual 영역이다.
+ * - `Text`: 제목과 본문을 묶는 텍스트 영역이다.
  * - `Title`: 제목 텍스트 영역이다.
  * - `Contents`: 본문 텍스트 영역이다.
  * - `TextButton`: paragraph 내부 text action이다.
@@ -18,6 +20,7 @@ import AlternateLayoutTitle from "./Title";
 const AlternateLayout = {
   Container: AlternateLayoutContainer,
   Figure: AlternateLayoutFigure,
+  Text: AlternateLayoutText,
   Title: AlternateLayoutTitle,
   Contents: AlternateLayoutContents,
   TextButton: AlternateLayoutTextButton,

package/src/components/alternate/layout/Text.tsx

@@ -0,0 +1,23 @@
+import { clsx } from "clsx";
+import type { AlternateLayoutTextProps } from "../types";
+
+/**
+ * Alternate Layout Text; 제목과 본문을 묶는 텍스트 영역
+ * @component
+ * @param {AlternateLayoutTextProps} props
+ * @param {string} [props.className] 텍스트 영역 className override다.
+ * @param {React.ReactNode} [props.children] 제목과 본문 콘텐츠다.
+ * @example
+ * <Alternate.Layout.Text>
+ *   <Alternate.Layout.Title>데이터가 없습니다.</Alternate.Layout.Title>
+ *   <Alternate.Layout.Contents>다른 조건으로 검색해 주세요.</Alternate.Layout.Contents>
+ * </Alternate.Layout.Text>
+ */
+export default function AlternateLayoutText({
+  className,
+  children,
+}: AlternateLayoutTextProps) {
+  return (
+    <div className={clsx("alternate-layout-text", className)}>{children}</div>
+  );
+}

package/src/components/alternate/styles/layout.scss

@@ -1,4 +1,8 @@
 .alternate-layout {
+  --alternate-layout-gap: calc(
+    var(--alternate-layout-figure-size) * var(--alternate-figure-text-gap-ratio)
+  );
+
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -19,6 +23,13 @@
   margin: 0;
 }
 
+.alternate-layout-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--alternate-layout-content-gap);
+}
+
 .alternate-layout-title {
   margin: 0;
   color: var(--alternate-layout-title-color);

package/src/components/alternate/styles/unit.scss

@@ -25,6 +25,11 @@
 }
 
 .alternate {
+  --alternate-unit-gap: calc(
+    var(--alternate-loading-icon-small-size) *
+      var(--alternate-figure-text-gap-ratio)
+  );
+
   width: 100%;
   height: 100%;
   display: flex;

package/src/components/alternate/styles/variables.scss

@@ -2,14 +2,13 @@
   --alternate-unit-text-color: var(--color-cool-gray-70);
   --alternate-unit-text-font-size: 1.4rem;
   --alternate-unit-text-line-height: 1.5;
-  --alternate-unit-gap: var(--spacing-gap-6);
+  --alternate-figure-text-gap-ratio: 0.344444;
   --alternate-loading-icon-color: var(--color-primary-default);
   --alternate-loading-icon-small-size: 2.4rem;
   --alternate-loading-icon-medium-size: 3.6rem;
   --alternate-loading-icon-large-size: 5.2rem;
 
   --alternate-layout-min-block-size: 320px;
-  --alternate-layout-gap: var(--spacing-gap-7);
   --alternate-layout-content-gap: var(--spacing-gap-4);
   --alternate-layout-figure-size: 120px;
   --alternate-layout-title-color: var(--color-label-strong);

package/src/components/alternate/types/layout.ts

@@ -38,6 +38,22 @@ export interface AlternateLayoutFigureProps {
   children?: ReactNode;
 }
 
+/**
+ * Alternate Layout Text Props; 제목과 본문을 묶는 텍스트 영역 props
+ * @property {string} [className] 텍스트 영역 className override다.
+ * @property {ReactNode} [children] 제목과 본문 콘텐츠다.
+ */
+export interface AlternateLayoutTextProps {
+  /**
+   * 텍스트 영역 className override다.
+   */
+  className?: string;
+  /**
+   * 제목과 본문 콘텐츠다.
+   */
+  children?: ReactNode;
+}
+
 /**
  * Alternate Layout Title Props; 제목 텍스트 props
  * @property {ElementType} [as] 렌더링할 제목 요소다. 기본값은 strong이다.

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

@@ -1,6 +1,10 @@
 "use client";
 
-import type { ChangeEvent, MouseEvent as ReactMouseEvent } from "react";
+import type {
+  ChangeEvent,
+  FocusEvent as ReactFocusEvent,
+  MouseEvent as ReactMouseEvent,
+} from "react";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { useUncontrolled } from "@mantine/hooks";
 import { Calendar } from "../../../calendar";
@@ -26,30 +30,39 @@ const INPUT_DATE_TABLE_FORMAT = "YY-MM-DD";
  * placeholder는 format과 별도 props로 처리되며, format 변경으로 placeholder가 자동 치환되지는 않는다.
  * @component
  * @param {InputCalendarProps} props
- * @param {CalendarMode} [props.mode="date"] 날짜/시간 모드
- * @param {CalendarColumns} [props.columns=1] 동시 노출 달력 수
- * @param {CalendarValue} [props.value] 제어형 값
- * @param {CalendarValue} [props.defaultValue] 비제어 초기값
- * @param {CalendarOnChange} [props.onChange] 값 변경 이벤트
- * @param {CalendarOnChange} [props.onValueChange] onChange alias
- * @param {boolean} [props.readOnly] 읽기 전용 여부
- * @param {boolean} [props.disabled] 비활성화 여부
- * @param {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
- * @param {string} [props.name] form name/RHF name
- * @param {UseFormRegisterReturn} [props.register] RHF register
- * @param {string} [props.placeholder="YYYY-MM-DD"] placeholder
- * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] trigger input priority
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
- * @param {ReactNode} [props.header] 패널 header 콘텐츠
- * @param {ReactNode} [props.footer] 패널 footer 콘텐츠
- * @param {InputCalendarTexts} [props.texts] 기본 Date 문구
- * @param {unknown} [props.timePicker] TimePicker 확장용 예약 슬롯(현재 미구현)
- * @param {boolean} [props.calendarOpened] calendar 열림 제어 상태
- * @param {(open: boolean) => void} [props.onCalendarOpen] calendar 열림 변경 이벤트
- * @param {(event: MouseEvent<Element>) => void} [props.onClick] trigger 클릭 핸들러
- * @param {string} [props.id] trigger id
- * @param {ReactNode} [props.trigger] 커스텀 trigger 슬롯
- * @param {(props: InputCalendarTriggerRenderProps) => ReactNode} [props.renderTrigger] 커스텀 trigger 렌더 함수
+ * @property {"date" | "date-time" | "time"} [props.mode="date"] Calendar layout mode. 선택 body는 date로 유지된다.
+ * @property {1 | 2} [props.columns=1] 동시 노출 달력 수
+ * @property {string | null} [props.value] 제어형 날짜 값
+ * @property {string | null} [props.defaultValue] 비제어 초기 날짜 값
+ * @property {(value: string | null) => void} [props.onChange] 값 변경 이벤트
+ * @property {(value: string | null) => void} [props.onValueChange] onChange alias
+ * @property {boolean} [props.readOnly] 읽기 전용 여부
+ * @property {boolean} [props.disabled] 비활성화 여부
+ * @property {CalendarDatePickerProps} [props.datePickerProps] Mantine DatePicker 옵션
+ * @property {string} [props.name] hidden input form name
+ * @property {string} [props.form] hidden input form id
+ * @property {UseFormRegisterReturn} [props.register] hidden input RHF register
+ * @property {boolean} [props.required] hidden input required 여부
+ * @property {InputCalendarHiddenInputProps} [props.hiddenInputProps] Template 고정값을 제외한 hidden input native props
+ * @property {string} [props.placeholder="YYYY-MM-DD"] placeholder
+ * @property {"primary" | "secondary" | "tertiary" | "table"} [props.priority="primary"] trigger input priority
+ * @property {"small" | "medium" | "large"} [props.size="medium"] trigger input size
+ * @property {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state="default"] trigger input state
+ * @property {boolean} [props.block=false] trigger width 100% 여부
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [props.width] trigger width preset 또는 custom width
+ * @property {(event: FocusEvent<HTMLInputElement>) => void} [props.onFocus] trigger focus 핸들러
+ * @property {(event: FocusEvent<HTMLInputElement>) => void} [props.onBlur] trigger blur 핸들러
+ * @property {ReactNode} [props.header] 패널 header 콘텐츠
+ * @property {ReactNode} [props.footer] 패널 footer 콘텐츠
+ * @property {InputCalendarTexts} [props.texts] 기본 Date 문구
+ * @property {unknown} [props.timePicker] 미구현 compatibility prop
+ * @property {boolean} [props.calendarOpened] calendar 열림 제어 상태
+ * @property {(open: boolean) => void} [props.onCalendarOpen] calendar 열림 변경 이벤트
+ * @property {(event: MouseEvent<Element>) => void} [props.onClick] trigger 클릭 핸들러
+ * @property {string} [props.id] trigger id
+ * @property {ReactNode} [props.trigger] 커스텀 trigger 슬롯
+ * @property {(props: InputCalendarTriggerRenderProps) => ReactNode} [props.renderTrigger] 커스텀 trigger 렌더 함수
+ * @desc 날짜 표시 trigger, Calendar panel과 YYYY-MM-DD hidden form storage를 조합한다.
  */
 const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
   (
@@ -64,10 +77,18 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       disabled,
       datePickerProps,
       name,
+      form,
       register,
+      required,
+      hiddenInputProps,
       placeholder = "YYYY-MM-DD",
       priority = "primary",
+      size = "medium",
       state = "default",
+      block = false,
+      width,
+      onFocus,
+      onBlur,
       header,
       footer,
       texts,
@@ -88,7 +109,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
      * Input Date Template; Calendar open 상태 변경 전달 함수.
      * 비제어 사용을 위해 내부 상태를 갱신하고, 제어형 사용을 위해 외부 owner에게 next open 값을 전달한다.
      * @param {boolean} nextOpen 다음 calendar open 상태
-     * @returns {void}
+     * @return {void}
      */
     const handleCalendarOpenChange = useCallback(
       (nextOpen: boolean) => {
@@ -113,7 +134,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
      * Input Date Template; RHF hidden input 변경 이벤트 동기화 함수.
      * trigger 표시값과 form 저장값을 분리하기 위해 CalendarValue를 직렬화한 synthetic change를 register에 전달한다.
      * @param {CalendarValue} nextValue 다음 calendar 선택 값
-     * @returns {void}
+     * @return {void}
      */
     const emitRegisterChange = useCallback(
       (nextValue: CalendarValue) => {
@@ -140,7 +161,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
      * Input Date Template; calendar value 갱신 함수.
      * 내부/제어형 value pipeline을 갱신한 뒤 RHF register 저장값을 같은 CalendarValue 기준으로 동기화한다.
      * @param {CalendarValue} nextValue 다음 calendar 선택 값
-     * @returns {void}
+     * @return {void}
      */
     const updateValue = useCallback(
       (nextValue: CalendarValue) => {
@@ -164,17 +185,33 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
      * Input Date Template; trigger click 위임 함수.
      * Calendar Root의 PopOver toggle은 asChild trigger props가 담당하고, 이 함수는 소비자가 넘긴 trigger onClick만 보존한다.
      * @param {ReactMouseEvent<Element>} event trigger click event
-     * @returns {void}
+     * @return {void}
      */
     const handleTriggerClick = (event: ReactMouseEvent<Element>) => {
       triggerOnClick?.(event);
     };
 
+    /**
+     * Input Date Template; trigger blur와 RHF touched 상태 동기화 함수.
+     * 표시 trigger는 form name을 소유하지 않으므로 직렬화된 hidden input 값을 synthetic blur event로 전달한다.
+     * @utility
+     * @param {ReactFocusEvent<HTMLInputElement>} event trigger blur event
+     * @desc 소비자 blur callback과 hidden input register blur를 같은 날짜 값으로 동기화한다.
+     * @return {void}
+     */
+    const handleTriggerBlur = (event: ReactFocusEvent<HTMLInputElement>) => {
+      register?.onBlur({
+        target: { name: register.name, value: serializedCalendarValue },
+        type: "blur",
+      });
+      onBlur?.(event);
+    };
+
     /**
      * Input Date Template; Calendar Core change adapter 함수.
      * Calendar.Root의 onChange 값을 Template value/RHF 동기화 pipeline으로 연결한다.
      * @param {CalendarValue} nextValue 다음 calendar 선택 값
-     * @returns {void}
+     * @return {void}
      */
     const handleCalendarChange = (nextValue: CalendarValue) => {
       updateValue(nextValue);
@@ -201,7 +238,12 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
       readOnly,
       onClick: handleTriggerClick,
       priority,
+      size,
       state,
+      block,
+      width,
+      onFocus,
+      onBlur: handleTriggerBlur,
     };
 
     const triggerNode = trigger ?? renderTrigger?.(triggerRenderProps) ?? (
@@ -214,6 +256,11 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         readOnly={readOnly}
         onClick={handleTriggerClick}
         priority={priority}
+        size={size}
+        block={block}
+        width={width}
+        onFocus={onFocus}
+        onBlur={handleTriggerBlur}
       />
     );
 
@@ -228,7 +275,7 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
           readOnly={readOnly}
           value={calendarValue}
           onChange={handleCalendarChange}
-          // 변경: Mantine DatePicker는 valueFormat prop을 지원하지 않으므로 옵션을 그대로 전달한다.
+          // Mantine DatePicker는 valueFormat prop을 지원하지 않으므로 옵션을 그대로 전달한다.
           datePickerProps={datePickerProps}
           header={header}
           footer={footerContent}
@@ -239,11 +286,14 @@ const InputDateTemplate = forwardRef<HTMLDivElement, InputCalendarProps>(
         </Calendar.Root>
         {(register?.name || name) && (
           <input
-            // 변경: trigger 표시값과 저장값을 분리하기 위해 form 참여는 hidden input만 담당한다.
+            // trigger 표시값과 form 저장값을 분리해 hidden input만 form에 참여한다.
+            {...hiddenInputProps}
+            {...register}
             type="hidden"
             value={serializedCalendarValue}
             name={register?.name ?? name}
-            {...register}
+            form={form ?? hiddenInputProps?.form}
+            required={required ?? hiddenInputProps?.required}
           />
         )}
       </>

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

@@ -19,17 +19,23 @@ import type { InputCalendarTriggerViewProps } from "../../types";
  * 그 외 priority에서는 기존처럼 right 슬롯을 유지한다.
  * @component
  * @param {InputCalendarTriggerViewProps} props
- * @param {string} [props.className] trigger className
- * @param {string} [props.placeholder] placeholder
- * @param {string} [props.displayValue] 표시 문자열
- * @param {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
- * @param {boolean} [props.disabled] disabled 여부
- * @param {boolean} [props.readOnly] readOnly 여부
- * @param {"primary" | "secondary" | "tertiary" | "table"} [props.priority] trigger input priority
- * @param {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state] trigger input state
- * @param {string} [props.id] input id
- * @param {string} [props.name] form name
- * @param {UseFormRegisterReturn} [props.register] RHF register
+ * @property {string} [props.className] trigger className
+ * @property {string} [props.placeholder] placeholder
+ * @property {string} [props.displayValue] 표시 문자열
+ * @property {(event: MouseEvent<Element>) => void} [props.onClick] 클릭 핸들러
+ * @property {boolean} [props.disabled] disabled 여부
+ * @property {boolean} [props.readOnly] readOnly 여부
+ * @property {"primary" | "secondary" | "tertiary" | "table"} [props.priority] trigger input priority
+ * @property {"small" | "medium" | "large"} [props.size] trigger input size
+ * @property {"default" | "active" | "focused" | "success" | "error" | "disabled" | "loading"} [props.state] trigger input state
+ * @property {boolean} [props.block] trigger width 100% 여부
+ * @property {"full" | "fit" | "fill" | "auto" | number | string} [props.width] trigger width preset 또는 custom width
+ * @property {(event: FocusEvent<HTMLInputElement>) => void} [props.onFocus] trigger focus 핸들러
+ * @property {(event: FocusEvent<HTMLInputElement>) => void} [props.onBlur] trigger blur 핸들러
+ * @property {string} [props.id] input id
+ * @property {string} [props.name] form name
+ * @property {UseFormRegisterReturn} [props.register] RHF register
+ * @desc Date 값을 직접 편집하지 않고 Calendar 선택값을 표시하는 기본 trigger다.
  */
 const InputDateTrigger = forwardRef<
   HTMLInputElement,
@@ -44,7 +50,12 @@ const InputDateTrigger = forwardRef<
       disabled,
       readOnly,
       priority,
+      size,
       state,
+      block,
+      width,
+      onFocus,
+      onBlur,
       id,
       name,
       register,
@@ -90,7 +101,7 @@ const InputDateTrigger = forwardRef<
       triggerInputRef.current?.click();
     };
 
-    // 변경: Date trigger는 기본적으로 직접 타이핑을 막고, 달력 선택을 단일 입력 경로로 유지한다.
+    // Date trigger는 직접 타이핑을 막아 달력 선택을 단일 입력 경로로 유지한다.
     const shouldBlockTyping = !disabled && !readOnly;
 
     const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
@@ -170,9 +181,14 @@ const InputDateTrigger = forwardRef<
         name={name ?? register?.name}
         register={register}
         priority={priority}
+        size={size}
         state={state}
+        block={block}
+        width={width}
         placeholder={placeholder}
         className={clsx("input-date-trigger-input", className)}
+        onFocus={onFocus}
+        onBlur={onBlur}
         onClick={handleInputClick}
         onKeyDown={handleKeyDown}
         onBeforeInput={handleBeforeInput}