@uniai-fe/uds-primitives 0.0.16 → 0.0.18

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

@@ -12,6 +12,8 @@
   --theme-input-radius-tertiary: var(--theme-radius-large-2);
   --theme-input-label-color: var(--color-label-standard);
   --theme-input-helper-color: var(--color-label-neutral);
+  --theme-input-helper-success-color: var(--color-success);
+  --theme-input-helper-error-color: var(--color-error);
   --theme-input-helper-disabled-color: var(--color-label-disabled);
   --theme-input-label-accent-color: var(--color-primary-default);
   --theme-input-label-error-color: var(--color-error);
@@ -104,18 +106,52 @@
     padding-inline: 0;
     padding-block: var(--spacing-padding-4);
     background-color: transparent;
+
+    &[data-state="active"],
+    &[data-state="focused"] {
+      border-bottom-color: var(--theme-input-border-active);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="success"] {
+      border-bottom-color: var(--theme-input-border-success);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="error"] {
+      border-bottom-color: var(--theme-input-border-error);
+      border-bottom-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="disabled"] {
+      border-bottom-color: var(--theme-input-border-underline-disabled);
+      border-bottom-width: var(--theme-input-border-width-default);
+    }
   }
 
   &[data-priority="tertiary"] {
     border-radius: var(--theme-input-radius-tertiary);
     background-color: var(--theme-input-surface);
     min-height: var(--theme-input-height-tertiary);
-    flex-wrap: wrap;
     row-gap: var(--spacing-gap-1);
     column-gap: var(--theme-input-gap);
+    flex-wrap: wrap;
+    align-items: center;
+
+    .input-field__control {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr);
+      column-gap: var(--theme-input-gap);
+      row-gap: var(--spacing-gap-1);
+      align-items: center;
+      flex: 1 1 auto;
+      min-width: 0;
+    }
 
     .input-inline-label {
-      flex-basis: 100%;
+      grid-column: 1 / -1;
+      margin: 0;
+      align-self: flex-start;
     }
 
     .input-element {
@@ -124,9 +160,9 @@
       flex: 1 1 auto;
     }
 
-    .input-element + .input-affix {
-      // inline label 다음 줄에서 input 오른쪽 끝으로 아이콘을 밀어낸다.
-      margin-left: auto;
+    .input-field__utilities {
+      align-self: center;
+      margin-left: 0;
     }
   }
 
@@ -188,6 +224,26 @@
   }
 }
 
+.input-field__control {
+  display: flex;
+  align-items: center;
+  gap: var(--theme-input-gap);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.input-field__utilities {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-2, 8px);
+  flex-shrink: 0;
+  margin-left: var(--spacing-gap-3, 12px);
+
+  .input-affix {
+    margin-left: 0;
+  }
+}
+
 .input-inline-label {
   order: -2;
   flex-basis: 100%;
@@ -213,13 +269,17 @@
     color: var(--theme-input-border-error);
   }
 
+  // [data-state="success"] & {
+  //   color: var(--theme-input-helper-success-color);
+  // }
+
   [data-state="disabled"] & {
     color: var(--theme-input-helper-disabled-color);
   }
 }
 
 .input-affix {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   min-width: 20px;
@@ -313,8 +373,7 @@
   }
 }
 
-.input-password-toggle,
-.input-action-button {
+.input-password-toggle {
   border: none;
   background: transparent;
   color: var(--theme-input-label-accent-color);
@@ -374,14 +433,46 @@
   color: var(--theme-input-helper-color);
 }
 
-.email-verification {
+.email-verification,
+.phone-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);
+.auth-code-input__actions,
+.email-verification__code-actions,
+.phone-verification__code-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-gap-3);
+  min-width: 0;
+}
+
+.auth-code-input__countdown,
+.email-verification__countdown,
+.phone-verification__countdown {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  font-style: normal;
+  font-size: 13px;
+  line-height: 1em;
+  letter-spacing: -0.0025em;
+  color: var(--color-primary-default);
+  flex-shrink: 0;
+}
+
+.button.input-utility-button {
+  min-height: 32px;
+  padding: var(--spacing-padding-2, 4px) var(--spacing-padding-6, 24px);
+  border-radius: var(--shape-rounded-1, 8px);
+
+  .button-label {
+    font-size: var(--font-body-xxsmall-size);
+    line-height: var(--font-body-xxsmall-line-height);
+    letter-spacing: var(--font-body-xxsmall-letter-spacing);
+    font-weight: var(--font-body-xxsmall-weight);
+  }
 }

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

@@ -19,6 +19,7 @@ export const INPUT_STATES = [
   "success",
   "error",
   "disabled",
+  "loading",
 ] as const;
 
 export type InputPriority = (typeof INPUT_PRIORITIES)[number];

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

@@ -1,159 +0,0 @@
-import {
-  ClipboardEvent,
-  ChangeEvent,
-  forwardRef,
-  useImperativeHandle,
-  KeyboardEvent,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { InputState } from "../../types";
-
-/**
- * IdentificationInput props. 고정 길이 숫자 코드 입력에 필요한 label/helper/state/onComplete를 제공한다.
- * @property {number} [length=6] 입력칸 개수(4~8 사이로 자동 보정).
- * @property {ReactNode} [label] 상단 라벨.
- * @property {ReactNode} [helper] helper 텍스트.
- * @property {InputState} [state="default"] 시각 상태.
- * @property {(code: string) => void} [onComplete] 모든 셀이 채워졌을 때 호출.
- */
-export interface IdentificationInputProps {
-  length?: number;
-  label?: ReactNode;
-  helper?: ReactNode;
-  state?: InputState;
-  onComplete?: (code: string) => void;
-}
-
-/**
- * IdentificationInput — 인증번호 입력 UI. 개별 입력칸을 제공하고 focus 이동/붙여넣기 등을 처리한다.
- * @component
- * @param {IdentificationInputProps} props
- * @param {number} [props.length=6] 입력 필드 길이. 4~8 범위로 자동 보정된다.
- * @param {ReactNode} [props.label] 상단 label 콘텐츠.
- * @param {ReactNode} [props.helper] helper 텍스트.
- * @param {InputState} [props.state] 시각 상태.
- * @param {(code: string) => void} [props.onComplete] 모든 셀이 채워졌을 때 호출되는 콜백.
- */
-const IdentificationInput = forwardRef<
-  HTMLInputElement[],
-  IdentificationInputProps
->(({ length = 6, label, helper, state, onComplete }, forwardedRef) => {
-  const safeLength = Math.max(4, Math.min(8, length));
-  const [values, setValues] = useState(() =>
-    Array.from({ length: safeLength }, () => ""),
-  );
-  const inputRefs = useRef<Array<HTMLInputElement | null>>(
-    Array(safeLength).fill(null),
-  );
-
-  const focusCell = useCallback((index: number) => {
-    const ref = inputRefs.current[index];
-    ref?.focus();
-    ref?.select();
-  }, []);
-
-  const updateValues = useCallback(
-    (index: number, digit: string) => {
-      setValues(prev => {
-        const next = [...prev];
-        next[index] = digit;
-        if (!next.includes("")) {
-          onComplete?.(next.join(""));
-        }
-        return next;
-      });
-    },
-    [onComplete],
-  );
-
-  const handleChange = useCallback(
-    (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
-      const digit = event.target.value.replace(/\D/g, "").slice(-1);
-      updateValues(index, digit);
-      if (digit && index < safeLength - 1) {
-        focusCell(index + 1);
-      }
-    },
-    [focusCell, safeLength, updateValues],
-  );
-
-  const handleKeyDown = useCallback(
-    (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {
-      if (event.key === "Backspace" && !values[index] && index > 0) {
-        updateValues(index - 1, "");
-        focusCell(index - 1);
-        event.preventDefault();
-      }
-    },
-    [focusCell, updateValues, values],
-  );
-
-  const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLInputElement>) => {
-      const digits = event.clipboardData.getData("text").replace(/\D/g, "");
-      if (!digits) {
-        return;
-      }
-      event.preventDefault();
-      setValues(prev => {
-        const next = [...prev];
-        for (let i = 0; i < safeLength; i += 1) {
-          next[i] = digits[i] ?? next[i];
-        }
-        if (!next.includes("")) {
-          onComplete?.(next.join(""));
-        }
-        return next;
-      });
-    },
-    [onComplete, safeLength],
-  );
-
-  const helperNode = useMemo(() => helper, [helper]);
-
-  // forwardRef 사용자는 각 셀 DOM 배열을 직접 제어할 수 있도록 노출한다.
-  useImperativeHandle(
-    forwardedRef,
-    () =>
-      inputRefs.current.filter((element): element is HTMLInputElement =>
-        Boolean(element),
-      ),
-    [],
-  );
-
-  return (
-    <div className="one-time-code" data-state={state}>
-      {label ? <div className="one-time-code__label">{label}</div> : null}
-      <div className="one-time-code__fields">
-        {values.map((value, index) => (
-          <input
-            key={`identification-${index}`}
-            ref={element => {
-              inputRefs.current[index] = element;
-            }}
-            type="text"
-            inputMode="numeric"
-            className="one-time-code__input"
-            maxLength={1}
-            value={value}
-            onChange={handleChange(index)}
-            onKeyDown={handleKeyDown(index)}
-            onPaste={handlePaste}
-            aria-label={`${index + 1}번째 인증번호 숫자`}
-          />
-        ))}
-      </div>
-      {helperNode ? (
-        <div className="one-time-code__helper">{helperNode}</div>
-      ) : null}
-    </div>
-  );
-});
-
-IdentificationInput.displayName = "IdentificationInput";
-
-export { IdentificationInput };