@uniai-fe/uds-primitives 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -14,7 +14,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.26.0",
+  "packageManager": "pnpm@10.26.1",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -91,8 +91,8 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.68.0",
-    "sass": "^1.97.0",
+    "react-hook-form": "^7.69.0",
+    "sass": "^1.97.1",
     "typescript": "~5.9.3"
   }
 }

package/src/components/input/markup/text/Base.tsx

@@ -62,7 +62,7 @@ const setForwardedRef = <T,>(ref: ForwardedRef<T>, value: T | null): void => {
  * @param {string} [props.className] root `.input` className
  * @param {UseFormRegisterReturn} [props.register] react-hook-form register 반환값
  * @param {string} [props.name] native name. register 사용 시 자동으로 병합
- * @param {InputProps["data-simulated-state"]} [props.data-simulated-state] Storybook 등에서 시각 상태 강제용
+ * @param {InputState} [props.data-simulated-state] Storybook 등에서 시각 상태 강제용
  * @param {(event: ChangeEvent<HTMLInputElement>) => void} [props.onChange] change 핸들러
  * @param {(event: FocusEvent<HTMLInputElement>) => void} [props.onFocus] focus 핸들러
  * @param {(event: FocusEvent<HTMLInputElement>) => void} [props.onBlur] blur 핸들러
@@ -79,9 +79,9 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
       block = false,
       left,
       right,
-      clearIcon,
-      successIcon,
-      errorIcon,
+      clear,
+      success,
+      error,
       label,
       helper,
       hideHelper,
@@ -167,13 +167,13 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
 
     const statusSlot = useMemo(() => {
       if (resolvedState === "success") {
-        return successIcon ?? defaultStatusIcon;
+        return success ?? defaultStatusIcon;
       }
       if (resolvedState === "error") {
-        return errorIcon ?? defaultStatusIcon;
+        return error ?? defaultStatusIcon;
       }
       return null;
-    }, [defaultStatusIcon, errorIcon, resolvedState, successIcon]);
+    }, [defaultStatusIcon, error, resolvedState, success]);
 
     const defaultClearIcon = useMemo(() => {
       if (visualState === "active") {
@@ -182,7 +182,7 @@ const Text = forwardRef<HTMLInputElement, InputProps>(
       return null;
     }, [visualState]);
 
-    const effectiveClearIcon = clearIcon ?? defaultClearIcon;
+    const effectiveClearIcon = clear ?? defaultClearIcon;
     const showClearIcon = Boolean(
       effectiveClearIcon && hasValue && resolvedState !== "disabled",
     );

package/src/components/input/markup/text/Identification.tsx

@@ -4,26 +4,27 @@ import {
   forwardRef,
   useImperativeHandle,
   KeyboardEvent,
+  ReactNode,
   useCallback,
   useMemo,
   useRef,
   useState,
 } from "react";
-import type { InputProps } from "../../types";
+import type { InputState } from "../../types";
 
 /**
  * IdentificationInput props. 고정 길이 숫자 코드 입력에 필요한 label/helper/state/onComplete를 제공한다.
  * @property {number} [length=6] 입력칸 개수(4~8 사이로 자동 보정).
- * @property {InputProps["label"]} [label] 상단 라벨.
- * @property {InputProps["helper"]} [helper] helper 텍스트.
- * @property {InputProps["state"]} [state="default"] 시각 상태.
+ * @property {ReactNode} [label] 상단 라벨.
+ * @property {ReactNode} [helper] helper 텍스트.
+ * @property {InputState} [state="default"] 시각 상태.
  * @property {(code: string) => void} [onComplete] 모든 셀이 채워졌을 때 호출.
  */
 export interface IdentificationInputProps {
   length?: number;
-  label?: InputProps["label"];
-  helper?: InputProps["helper"];
-  state?: InputProps["state"];
+  label?: ReactNode;
+  helper?: ReactNode;
+  state?: InputState;
   onComplete?: (code: string) => void;
 }
 
@@ -32,9 +33,9 @@ export interface IdentificationInputProps {
  * @component
  * @param {IdentificationInputProps} props
  * @param {number} [props.length=6] 입력 필드 길이. 4~8 범위로 자동 보정된다.
- * @param {InputProps["label"]} [props.label] 상단 label 콘텐츠.
- * @param {InputProps["helper"]} [props.helper] helper 텍스트.
- * @param {InputProps["state"]} [props.state] 시각 상태.
+ * @param {ReactNode} [props.label] 상단 label 콘텐츠.
+ * @param {ReactNode} [props.helper] helper 텍스트.
+ * @param {InputState} [props.state] 시각 상태.
  * @param {(code: string) => void} [props.onComplete] 모든 셀이 채워졌을 때 호출되는 콜백.
  */
 const IdentificationInput = forwardRef<

package/src/components/input/markup/text/Password.tsx

@@ -9,7 +9,7 @@ import HideOnIcon from "../../img/hide-on.svg";
  * @property {boolean} [defaultVisible=false] 초기 렌더 시 비밀번호를 드러낼지 여부.
  * @property {{show: string; hide: string}} [toggleLabel] 토글 버튼에 사용할 라벨 텍스트 집합.
  */
-export interface PasswordInputProps extends Omit<InputProps, "type"> {
+export interface InputPasswordProps extends Omit<InputProps, "type"> {
   defaultVisible?: boolean;
   toggleLabel?: {
     show: string;
@@ -20,12 +20,12 @@ export interface PasswordInputProps extends Omit<InputProps, "type"> {
 /**
  * PasswordInput — 기본 Text 입력을 비밀번호 토글 UX로 확장한다.
  * @component
- * @param {PasswordInputProps} props
+ * @param {InputPasswordProps} props
  * @param {boolean} [props.defaultVisible=false] 초기 노출 여부.
  * @param {{show: string; hide: string}} [props.toggleLabel={show:"보기",hide:"숨김"}] 토글 버튼 라벨.
  * 나머지 props는 Text Input과 동일하다.
  */
-const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+const PasswordInput = forwardRef<HTMLInputElement, InputPasswordProps>(
   (
     {
       defaultVisible = false,

package/src/components/input/markup/text/index.ts

@@ -4,7 +4,7 @@ export { PasswordInput } from "./Password";
 export { PhoneInput } from "./Phone";
 export { SearchInput } from "./Search";
 export { IdentificationInput } from "./Identification";
-export type { PasswordInputProps } from "./Password";
+export type { InputPasswordProps } from "./Password";
 export type { PhoneInputProps } from "./Phone";
 export type { SearchInputProps } from "./Search";
 export type { IdentificationInputProps } from "./Identification";

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

@@ -30,12 +30,12 @@ type NativeInputProps = ComponentPropsWithoutRef<"input">;
 /**
  * 좌우 슬롯과 status 아이콘 정의.
  */
-export interface InputSlots {
+export interface InputIcon {
   left?: ReactNode;
   right?: ReactNode;
-  clearIcon?: ReactNode;
-  successIcon?: ReactNode;
-  errorIcon?: ReactNode;
+  clear?: ReactNode;
+  success?: ReactNode;
+  error?: ReactNode;
 }
 
 /**
@@ -51,7 +51,7 @@ export interface InputFeedback {
  * 텍스트 입력의 핵심 props. native input 속성에서 size는 제외하고 left/right 등 슬롯을 별도로 정의한다.
  */
 export interface InputProps
-  extends Omit<NativeInputProps, "size">, InputSlots, InputFeedback {
+  extends Omit<NativeInputProps, "size">, InputIcon, InputFeedback {
   /** semantic color/token 세트 */
   priority?: InputPriority;
   /** 높이/타이포 세트 */

package/src/index.tsx

@@ -25,3 +25,4 @@ export * from "./components/spinner";
 export * from "./components/alternate";
 export * from "./components/segmented-control";
 export * from "./components/divider";
+export * from "./types";

package/src/types/form-field.ts

@@ -0,0 +1,80 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+import type { InputProps } from "../components/input/types";
+
+/**
+ * Input Field Attr; HTML native 속성 래핑
+ * @typedef {InputFieldAttr}
+ * @template FieldElement
+ * @desc
+ * - InputHTMLAttributes를 그대로 재사용해 네이티브 속성을 전달한다.
+ */
+export type InputFieldAttr<
+  FieldElement extends HTMLElement = HTMLInputElement,
+> = InputHTMLAttributes<FieldElement>;
+
+/**
+ * Input Field Style; 레이아웃 래퍼 스타일
+ * @interface InputFieldStyle
+ * @desc
+ * - className/block 등 래퍼 스타일만 관리한다.
+ */
+export interface InputFieldStyle {
+  /**
+   * 필드 컨테이너 className
+   */
+  className?: string;
+  /**
+   * label 컨테이너 className
+   */
+  labelClassName?: string;
+  /**
+   * helper 컨테이너 className
+   */
+  helperClassName?: string;
+  /**
+   * true면 block 레이아웃
+   */
+  block?: boolean;
+}
+
+/**
+ * Input Field Options; UX 텍스트/설명
+ * @interface InputFieldOptions
+ * @desc
+ * - label/helper/description 등 사용자-facing 정보를 정의한다.
+ */
+export interface InputFieldOptions {
+  /**
+   * 라벨 텍스트 또는 노드
+   */
+  label?: ReactNode;
+  /**
+   * helper 텍스트
+   */
+  helper?: ReactNode;
+  /**
+   * 접근성 안내/설명
+   */
+  description?: ReactNode;
+}
+
+/**
+ * Input Field Config; attr + style + options + props
+ * @interface InputFieldConfig
+ * @template TProps
+ * @template FieldElement
+ */
+export interface InputFieldConfig<
+  TProps extends InputProps = InputProps,
+  FieldElement extends HTMLElement = HTMLInputElement,
+>
+  extends InputFieldStyle, InputFieldOptions {
+  /**
+   * HTML native attr
+   */
+  attr?: InputFieldAttr<FieldElement>;
+  /**
+   * primitives Input 계열 props
+   */
+  props?: TProps;
+}

package/src/types/index.ts

@@ -1,4 +1,4 @@
 /**
  * shared types placeholder: variant/slot 타입을 정의하고 각 카테고리에서 import한다.
  */
-export {};
+export * from "./form-field";