@uniai-fe/uds-primitives 0.0.13 → 0.0.15

package/dist/styles.css

@@ -721,14 +721,18 @@
     --font-body-medium-line-height: 1.5em;
     --font-body-medium-letter-spacing: 0px;
     --font-body-medium-weight: 500;
-    --font-body-small-size: 15px;
+    --font-body-small-size: 16px;
     --font-body-small-line-height: 1.5em;
     --font-body-small-letter-spacing: 0px;
     --font-body-small-weight: 400;
-    --font-body-xsmall-size: 13px;
+    --font-body-xsmall-size: 15px;
     --font-body-xsmall-line-height: 1.5em;
     --font-body-xsmall-letter-spacing: 0px;
     --font-body-xsmall-weight: 400;
+    --font-body-xxsmall-size: 13px;
+    --font-body-xxsmall-line-height: 1.5em;
+    --font-body-xxsmall-letter-spacing: 0px;
+    --font-body-xxsmall-weight: 400;
   }
 }
 @layer theme.tokens.typography {
@@ -1928,271 +1932,6 @@ figure.chip {
   height: 100%;
 }
 
-:where(.radix-themes, .theme-root, :root) {
-  /* dialog essentials */
-  --dialog-overlay-bg: rgba(5, 6, 12, 0.55);
-  --dialog-panel-width: 360px;
-  --dialog-panel-max-width: calc(100vw - var(--spacing-padding-10) * 2);
-  --dialog-panel-bg: var(--color-bg-surface-static-white);
-  --dialog-panel-radius: var(--theme-radius-large-1);
-  --dialog-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --dialog-border-color: var(--color-border-standard-cool-gray);
-  --dialog-title-color: var(--color-label-strong);
-  --dialog-title-font-size: var(--font-heading-xsmall-size);
-  --dialog-title-line-height: var(--font-heading-xsmall-line-height);
-  --dialog-title-weight: var(--font-heading-xsmall-weight);
-  --dialog-body-color: var(--color-label-standard);
-  --dialog-body-font-size: var(--font-body-small-size);
-  --dialog-body-line-height: var(--font-body-small-line-height);
-  --dialog-description-color: var(--color-label-standard);
-  --dialog-description-font-size: var(--font-body-small-size);
-  --dialog-description-line-height: var(--font-body-small-line-height);
-  /* alert(notice) defaults */
-  --notice-dialog-section-padding-x: var(--spacing-padding-8);
-  --notice-dialog-section-padding-y: var(--spacing-padding-10);
-  --notice-dialog-action-height: 52px;
-  /* confirm defaults */
-  --confirm-dialog-header-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-header-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-body-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-body-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-footer-padding-x: var(--spacing-padding-6);
-  --confirm-dialog-footer-padding-y: var(--spacing-padding-7);
-  --confirm-dialog-actions-gap: var(--spacing-gap-5);
-}
-
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--dialog-overlay-bg);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-  will-change: opacity;
-}
-.dialog-overlay[data-state=open] {
-  opacity: 1;
-}
-.dialog-overlay[data-state=closed] {
-  opacity: 0;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-overlay {
-    transition: none;
-  }
-}
-.dialog-content {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: min(var(--dialog-panel-width), var(--dialog-panel-max-width));
-  max-width: var(--dialog-panel-max-width);
-  max-height: calc(100vh - var(--spacing-padding-10) * 2);
-  background-color: var(--dialog-panel-bg);
-  border-radius: var(--dialog-panel-radius);
-  box-shadow: var(--dialog-panel-shadow);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  outline: none;
-  border: none;
-  gap: 0;
-  opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-.dialog-content[data-state=open] {
-  opacity: 1;
-  transform: translate(-50%, -50%);
-}
-.dialog-content[data-state=closed] {
-  opacity: 0;
-  transform: translate(-50%, calc(-50% + 12px));
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-content {
-    transition: none;
-  }
-}
-.dialog-section {
-  padding: 0;
-}
-.dialog-section[data-section=actions] {
-  flex-shrink: 0;
-}
-
-.dialog-title {
-  margin: 0;
-  color: var(--dialog-title-color);
-  font-size: var(--dialog-title-font-size);
-  line-height: var(--dialog-title-line-height);
-  font-weight: var(--dialog-title-weight);
-}
-
-.dialog-description {
-  margin: 0;
-  color: var(--dialog-description-color);
-  font-size: var(--dialog-description-font-size);
-  line-height: var(--dialog-description-line-height);
-}
-
-.dialog-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-label-strong);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.dialog-button[data-native-element=true] {
-  appearance: none;
-}
-
-.notice-dialog-header,
-.notice-dialog-body {
-  padding: var(--notice-dialog-section-padding-y) var(--notice-dialog-section-padding-x);
-}
-
-.notice-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-3);
-  text-align: center;
-}
-
-.notice-dialog-body {
-  text-align: center;
-}
-
-.notice-dialog-body p {
-  margin: 0 0 var(--spacing-gap-2);
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.notice-dialog-body p:last-child {
-  margin-bottom: 0;
-}
-
-.notice-dialog-actions {
-  border-top: 1px solid var(--dialog-border-color);
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: 0;
-  gap: 0;
-  justify-content: center;
-  overflow: hidden;
-  --button-min-height: var(--notice-dialog-action-height);
-  --button-padding-inline: 0;
-  --button-padding-block: 0;
-  --button-border-radius: 0;
-}
-
-.notice-dialog-actions > * {
-  flex: 1;
-}
-
-.notice-dialog-actions .button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  margin: 0;
-  padding: 0;
-  font-size: var(--font-body-medium-size);
-  line-height: var(--font-body-medium-line-height);
-  font-weight: var(--font-body-medium-weight);
-  cursor: pointer;
-  background: transparent;
-  color: var(--color-label-strong);
-  transition: background-color 0.15s ease, color 0.15s ease;
-  background-color: var(--color-common-100);
-  color: var(--color-primary-default);
-}
-.notice-dialog-actions .button:hover {
-  background-color: var(--color-bg-surface-static-cool-gray);
-}
-
-.notice-dialog-actions .button:not(:first-child),
-.notice-dialog-actions [data-native-element=true]:not(:first-child) {
-  border-left: 1px solid var(--dialog-border-color);
-}
-
-.confirm-dialog-header {
-  padding: var(--confirm-dialog-header-padding-y) var(--confirm-dialog-header-padding-x);
-}
-
-.confirm-dialog-body {
-  padding: var(--confirm-dialog-body-padding-y) var(--confirm-dialog-body-padding-x);
-}
-
-.confirm-dialog-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-
-.confirm-dialog-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--spacing-gap-2);
-  text-align: center;
-}
-
-.confirm-dialog-body p {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.confirm-dialog-description {
-  margin: 0;
-  color: var(--dialog-body-color);
-  font-size: var(--dialog-body-font-size);
-  line-height: 1.5em;
-  font-weight: var(--font-body-small-weight);
-  word-break: keep-all;
-}
-
-.confirm-dialog-actions {
-  display: flex;
-  align-items: stretch;
-  flex-direction: row;
-  padding: var(--confirm-dialog-footer-padding-y) var(--confirm-dialog-footer-padding-x);
-  gap: var(--confirm-dialog-actions-gap);
-  justify-content: center;
-}
-
-.confirm-dialog-actions > * {
-  flex: 1;
-}
-
 :where(.radix-themes, .theme-root, :root) {
   --drawer-overlay-bg: rgba(0, 0, 0, 0.44);
   --drawer-surface-bg: var(--color-bg-surface-static-white);
@@ -2734,6 +2473,18 @@ figure.chip {
   color: var(--theme-input-helper-color);
 }
 
+.email-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4);
+}
+
+.email-verification__countdown {
+  font-size: var(--font-caption-medium-size);
+  line-height: var(--font-caption-medium-line-height);
+  color: var(--theme-input-helper-color);
+}
+
 /* TODO(label): 스타일을 SOT 토큰 값으로 정의한다. */
 :where(.radix-themes, .theme-root, :root) {
   --theme-navigation-height: 86px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -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

@@ -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/EmailVerification.tsx

@@ -0,0 +1,144 @@
+import type { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from "react";
+import { forwardRef, useCallback, useMemo } from "react";
+import type { InputProps, InputState } from "../../types";
+import { Text } from "./Base";
+import { IdentificationInput } from "./Identification";
+
+/**
+ * EmailVerificationInput props. 이메일 입력 + 인증 요청/코드 입력 옵션을 정의한다.
+ * @property {string} [value] 제어형 값.
+ * @property {string} [defaultValue] 비제어 초기값.
+ * @property {(value: string) => void} [onValueChange] 값 변경 시 호출.
+ * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
+ * @property {() => void} [onRequestCode] 인증 요청 버튼 클릭 시 호출(optional).
+ * @property {string} [requestButtonLabel="인증번호 요청"] 인증 요청 버튼 라벨(optional).
+ * @property {boolean} [requestButtonDisabled] 인증 요청 버튼 disabled(optional).
+ * @property {ReactNode} [countdownText] 인증 제한 시간 안내 텍스트(optional).
+ * @property {boolean} [codeVisible] 인증번호 입력 UI 노출 여부(optional).
+ * @property {number} [codeLength=6] 인증번호 길이(optional).
+ * @property {ReactNode} [codeLabel] 인증번호 입력 label(optional).
+ * @property {ReactNode} [codeHelper] 인증번호 helper(optional).
+ * @property {InputState} [codeState] 인증번호 입력 상태(optional).
+ * @property {(code: string) => void} [onCodeComplete] 인증번호 입력 완료 시 호출(optional).
+ */
+export interface EmailVerificationInputProps extends Omit<
+  InputProps,
+  "type" | "inputMode" | "pattern" | "onChange" | "value" | "defaultValue"
+> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onRequestCode?: () => void;
+  requestButtonLabel?: string;
+  requestButtonDisabled?: boolean;
+  countdownText?: ReactNode;
+  codeVisible?: boolean;
+  codeLength?: number;
+  codeLabel?: ReactNode;
+  codeHelper?: ReactNode;
+  codeState?: InputState;
+  onCodeComplete?: (code: string) => void;
+}
+
+/**
+ * 이메일 인증 입력 컴포넌트; 이메일 입력 + 인증요청 버튼 + OneTimeCode 입력을 옵션으로 제공한다.
+ * @component
+ * @param {EmailVerificationInputProps} props 이메일 인증 props
+ * @param {string} [props.value] 제어형 이메일 값
+ * @param {string} [props.defaultValue] 비제어 이메일 초기값
+ * @param {(value: string) => void} [props.onValueChange] 이메일 변경 콜백
+ * @param {ComponentPropsWithoutRef<"input">["onChange"]} [props.onChange] native onChange override
+ * @param {() => void} [props.onRequestCode] 인증요청 버튼 클릭 시 호출
+ * @param {string} [props.requestButtonLabel] 인증요청 버튼 라벨
+ * @param {boolean} [props.requestButtonDisabled] 인증요청 버튼 disabled
+ * @param {ReactNode} [props.countdownText] 제한 시간 안내 텍스트
+ * @param {boolean} [props.codeVisible] 인증번호 입력 UI 노출 여부
+ * @param {number} [props.codeLength] 인증번호 길이
+ * @param {ReactNode} [props.codeLabel] 인증번호 label
+ * @param {ReactNode} [props.codeHelper] 인증번호 helper
+ * @param {InputState} [props.codeState] 인증번호 입력 상태
+ * @param {(code: string) => void} [props.onCodeComplete] 인증번호 입력 완료 시 호출
+ */
+const EmailVerificationInput = forwardRef<
+  HTMLInputElement,
+  EmailVerificationInputProps
+>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      onChange,
+      onRequestCode,
+      requestButtonLabel = "인증번호 요청",
+      requestButtonDisabled,
+      countdownText,
+      codeVisible,
+      codeLength = 6,
+      codeLabel,
+      codeHelper,
+      codeState,
+      onCodeComplete,
+      right,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        onValueChange?.(event.currentTarget.value);
+        onChange?.(event);
+      },
+      [onChange, onValueChange],
+    );
+
+    const actionButton = useMemo(() => {
+      if (!onRequestCode) {
+        return null;
+      }
+
+      return (
+        <button
+          type="button"
+          className="input-action-button"
+          onClick={onRequestCode}
+          disabled={requestButtonDisabled}
+        >
+          {requestButtonLabel}
+        </button>
+      );
+    }, [onRequestCode, requestButtonDisabled, requestButtonLabel]);
+
+    return (
+      <div className="email-verification">
+        <Text
+          {...restProps}
+          ref={forwardedRef}
+          type="email"
+          inputMode="email"
+          value={value}
+          defaultValue={defaultValue}
+          onChange={handleChange}
+          right={right ?? actionButton}
+        />
+        {countdownText ? (
+          <div className="email-verification__countdown">{countdownText}</div>
+        ) : null}
+        {codeVisible ? (
+          <IdentificationInput
+            length={codeLength}
+            label={codeLabel}
+            helper={codeHelper}
+            state={codeState}
+            onComplete={onCodeComplete}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+EmailVerificationInput.displayName = "EmailVerificationInput";
+
+export { EmailVerificationInput };

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

@@ -10,9 +10,9 @@ import { Text } from "./Base";
  * @property {string} [defaultValue] 비제어 초기값(숫자/포맷 모두 허용).
  * @property {(value: string, digits: string) => void} [onValueChange] 포맷팅 값/숫자만 값을 함께 전달.
  * @property {ComponentPropsWithoutRef<"input">["onChange"]} [onChange] native onChange override.
- * @property {() => void} [onRequestCode] right 슬롯 버튼 클릭 시 호출.
- * @property {string} [requestButtonLabel="인증번호 요청"] right 슬롯 버튼 라벨.
- * @property {boolean} [requestButtonDisabled] right 슬롯 버튼 disabled 여부.
+ * @property {() => void} [onRequestCode] 인증 요청 버튼 클릭 시 호출(optional).
+ * @property {string} [requestButtonLabel="인증번호 요청"] 인증 요청 버튼 라벨(optional).
+ * @property {boolean} [requestButtonDisabled] 인증 요청 버튼 disabled(optional).
  */
 export interface PhoneInputProps extends Omit<
   InputProps,
@@ -35,10 +35,16 @@ const normalizeDigits = (value?: string) => (value ?? "").replace(/\D/g, "");
 const formatPhoneNumber = (digits: string) => maskPhone(digits);
 
 /**
- * PhoneInput — 휴대폰 번호 마스킹과 인증번호 요청 버튼을 제공하는 입력.
+ * 휴대폰 번호 입력 컴포넌트; 기본은 마스킹만 제공하고 인증 UI는 optional props로 노출한다.
  * @component
- * @param {PhoneInputProps} props Phone 전용 props.
- * 나머지 Text Input 공통 props(priority/size/state/helper 등)도 동일하게 사용할 수 있다.
+ * @param {PhoneInputProps} props 휴대폰 입력 props
+ * @param {string} [props.value] 제어형 포맷 값
+ * @param {string} [props.defaultValue] 비제어 초기값
+ * @param {(value: string, digits: string) => void} [props.onValueChange] 포맷/숫자 변경 콜백
+ * @param {ComponentPropsWithoutRef<"input">["onChange"]} [props.onChange] native onChange override
+ * @param {() => void} [props.onRequestCode] 인증 요청 버튼 클릭 시 호출
+ * @param {string} [props.requestButtonLabel] 인증 요청 버튼 라벨
+ * @param {boolean} [props.requestButtonDisabled] 인증 요청 버튼 disabled
  */
 const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
   (

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

@@ -2,9 +2,11 @@ export { Text } from "./Base";
 export { Text as Input } from "./Base";
 export { PasswordInput } from "./Password";
 export { PhoneInput } from "./Phone";
+export { EmailVerificationInput } from "./EmailVerification";
 export { SearchInput } from "./Search";
 export { IdentificationInput } from "./Identification";
 export type { InputPasswordProps } from "./Password";
 export type { PhoneInputProps } from "./Phone";
+export type { EmailVerificationInputProps } from "./EmailVerification";
 export type { SearchInputProps } from "./Search";
 export type { IdentificationInputProps } from "./Identification";

package/src/components/input/styles/index.scss

@@ -373,3 +373,15 @@
   font-size: var(--font-label-small-size);
   color: var(--theme-input-helper-color);
 }
+
+.email-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-4);
+}
+
+.email-verification__countdown {
+  font-size: var(--font-caption-medium-size);
+  line-height: var(--font-caption-medium-line-height);
+  color: var(--theme-input-helper-color);
+}

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.scss

@@ -8,7 +8,6 @@
 @use "./components/calendar";
 @use "./components/checkbox";
 @use "./components/chip";
-@use "./components/dialog";
 @use "./components/drawer";
 @use "./components/dropdown";
 @use "./components/input";

package/src/index.tsx

@@ -12,7 +12,6 @@ export * from "./components/radio";
 export * from "./components/select";
 export * from "./components/tab";
 export * from "./components/navigation";
-export * from "./components/dialog";
 export * from "./components/dropdown";
 export * from "./components/drawer";
 export * from "./components/scrollbar";

package/src/types/form-field.ts

@@ -59,12 +59,12 @@ export interface InputFieldOptions {
 }
 
 /**
- * Input Field Config; attr + style + options + props
- * @interface InputFieldConfig
+ * Input Field Props; attr + style + options + control props
+ * @interface InputFieldProps
  * @template TProps
  * @template FieldElement
  */
-export interface InputFieldConfig<
+export interface InputFieldProps<
   TProps extends InputProps = InputProps,
   FieldElement extends HTMLElement = HTMLInputElement,
 >