@uniai-fe/uds-primitives 0.0.1

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

@@ -0,0 +1,71 @@
+import { forwardRef, useMemo, useState } from "react";
+import type { InputProps } from "../../types";
+import { Text } from "./Base";
+import HideOffIcon from "../../img/hide-off.svg";
+import HideOnIcon from "../../img/hide-on.svg";
+
+export interface PasswordInputProps extends Omit<
+  InputProps,
+  "type" | "defaultValue"
+> {
+  defaultVisible?: boolean;
+  toggleLabel?: {
+    show: string;
+    hide: string;
+  };
+  defaultValue?: string;
+}
+
+/**
+ * PasswordInput — 기본 Text 입력을 비밀번호 토글 UX로 확장.
+ * @param props.defaultVisible 최초 노출 여부.
+ * @param props.toggleLabel 토글 버튼의 라벨 텍스트.
+ */
+const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      defaultVisible = false,
+      toggleLabel = { show: "보기", hide: "숨김" },
+      suffix,
+      defaultValue,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const [visible, setVisible] = useState(defaultVisible);
+
+    const toggleButton = useMemo(
+      () => (
+        <button
+          type="button"
+          className="input-password-toggle"
+          onClick={() => setVisible(prev => !prev)}
+          aria-pressed={visible}
+          aria-label={visible ? toggleLabel.hide : toggleLabel.show}
+        >
+          {/* 토글 상태에 따라 hide-on/off 아이콘을 교체한다. */}
+          {visible ? (
+            <HideOffIcon aria-hidden="true" />
+          ) : (
+            <HideOnIcon aria-hidden="true" />
+          )}
+        </button>
+      ),
+      [toggleLabel.hide, toggleLabel.show, visible],
+    );
+
+    return (
+      <Text
+        {...restProps}
+        ref={forwardedRef}
+        type={visible ? "text" : "password"}
+        defaultValue={defaultValue}
+        suffix={suffix ?? toggleButton}
+      />
+    );
+  },
+);
+
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

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

@@ -0,0 +1,115 @@
+import { maskPhone } from "@uniai-fe/util-functions";
+import type { ChangeEvent, ComponentPropsWithoutRef } from "react";
+import { forwardRef, useCallback, useMemo, useState } from "react";
+import type { InputProps } from "../../types";
+import { Text } from "./Base";
+
+export interface PhoneInputProps extends Omit<
+  InputProps,
+  | "type"
+  | "prefix"
+  | "inputMode"
+  | "pattern"
+  | "onChange"
+  | "value"
+  | "defaultValue"
+> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string, digits: string) => void;
+  onChange?: ComponentPropsWithoutRef<"input">["onChange"];
+  onRequestCode?: () => void;
+  requestButtonLabel?: string;
+  requestButtonDisabled?: boolean;
+}
+
+const MAX_DIGITS = 11;
+
+const normalizeDigits = (value?: string) => (value ?? "").replace(/\D/g, "");
+
+// util-functions의 maskPhone 규칙으로 자리수/패턴을 일원화한다.
+const formatPhoneNumber = (digits: string) => maskPhone(digits);
+
+/**
+ * PhoneInput — 휴대폰 번호 마스킹과 인증번호 요청 버튼을 제공하는 입력.
+ * @param props.onValueChange 포맷팅된 값 + 숫자만 별도로 전달.
+ * @param props.onRequestCode 인증번호 요청 버튼 클릭 핸들러.
+ */
+const PhoneInput = forwardRef<HTMLInputElement, PhoneInputProps>(
+  (
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      onChange,
+      onRequestCode,
+      requestButtonLabel = "인증번호 요청",
+      requestButtonDisabled,
+      suffix,
+      ...restProps
+    },
+    forwardedRef,
+  ) => {
+    const isControlled = value !== undefined;
+    const [digitsState, setDigitsState] = useState(() =>
+      normalizeDigits(defaultValue),
+    );
+    const digits = isControlled ? normalizeDigits(value) : digitsState;
+    const formattedValue = useMemo(
+      () => formatPhoneNumber(digits.slice(0, MAX_DIGITS)),
+      [digits],
+    );
+
+    const handleChange = useCallback(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        const digitsOnly = normalizeDigits(event.currentTarget.value).slice(
+          0,
+          MAX_DIGITS,
+        );
+        if (!isControlled) {
+          setDigitsState(digitsOnly);
+        }
+        const formatted = formatPhoneNumber(digitsOnly);
+        if (event.currentTarget.value !== formatted) {
+          event.currentTarget.value = formatted;
+        }
+        onValueChange?.(formatted, digitsOnly);
+        onChange?.(event);
+      },
+      [isControlled, onChange, onValueChange],
+    );
+
+    const actionButton = useMemo(() => {
+      if (!onRequestCode) {
+        return null;
+      }
+      // 휴대폰 인증 입력은 우측 suffix에 인증 버튼을 둔다.
+      return (
+        <button
+          type="button"
+          className="input-action-button"
+          onClick={onRequestCode}
+          disabled={requestButtonDisabled}
+        >
+          {requestButtonLabel}
+        </button>
+      );
+    }, [onRequestCode, requestButtonDisabled, requestButtonLabel]);
+
+    return (
+      <Text
+        {...restProps}
+        ref={forwardedRef}
+        type="tel"
+        inputMode="tel"
+        value={formattedValue}
+        onChange={handleChange}
+        suffix={suffix ?? actionButton}
+      />
+    );
+  },
+);
+
+PhoneInput.displayName = "PhoneInput";
+
+export { PhoneInput };

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

@@ -0,0 +1,35 @@
+import { forwardRef, useMemo } from "react";
+import type { InputProps } from "../../types";
+import { Text } from "./Base";
+import SearchIcon from "../../img/search.svg";
+
+export interface SearchInputProps extends Omit<InputProps, "type"> {}
+
+/**
+ * SearchInput — 기본 Text 입력에 검색 아이콘 prefix를 제공한다.
+ * @param props.prefix prefix slot. 정의하지 않으면 검색 아이콘이 자동 배치된다.
+ */
+const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ prefix, ...restProps }, forwardedRef) => {
+    const prefixNode = useMemo(() => {
+      if (prefix) {
+        return prefix;
+      }
+      // 검색 input은 기본적으로 돋보기 아이콘 prefix를 노출한다.
+      return <SearchIcon aria-hidden="true" />;
+    }, [prefix]);
+
+    return (
+      <Text
+        {...restProps}
+        ref={forwardedRef}
+        type="search"
+        prefix={prefixNode}
+      />
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };

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

@@ -0,0 +1,10 @@
+export { Text } from "./Base";
+export { Text as Input } from "./Base";
+export { PasswordInput } from "./Password";
+export { PhoneInput } from "./Phone";
+export { SearchInput } from "./Search";
+export { IdentificationInput } from "./Identification";
+export type { PasswordInputProps } from "./Password";
+export type { PhoneInputProps } from "./Phone";
+export type { SearchInputProps } from "./Search";
+export type { IdentificationInputProps } from "./Identification";

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

@@ -0,0 +1,375 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :root) {
+  --theme-input-height-small: var(--theme-size-medium-1);
+  --theme-input-height-medium: var(--theme-size-medium-2);
+  --theme-input-height-large: var(--theme-size-medium-3);
+  --theme-input-height-teritary: calc(var(--theme-size-medium-2) + 24px);
+  --theme-input-padding-x: var(--spacing-padding-6);
+  --theme-input-padding-y: var(--spacing-padding-4);
+  --theme-input-gap: var(--spacing-gap-4);
+  --theme-input-radius-default: var(--theme-radius-large-1);
+  --theme-input-radius-teritary: var(--theme-radius-large-2);
+  --theme-input-label-color: var(--color-label-standard);
+  --theme-input-helper-color: var(--color-label-neutral);
+  --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);
+  --theme-input-placeholder-color: var(--color-label-alternative);
+  --theme-input-text-color: var(--color-label-strong);
+  --theme-input-border-color: var(--color-border-standard-cool-gray);
+  --theme-input-border-width-default: 1px;
+  --theme-input-border-width-emphasis: 1.4px;
+  --theme-input-border-active: #99bdff;
+  // success 상태는 파란색 보더(blue-80) 사용
+  --theme-input-border-success: #99bdff;
+  // error 상태는 Figma 기준 44% alpha 레드 보더 사용
+  --theme-input-border-error: rgba(218, 29, 11, 0.44);
+  --theme-input-border-disabled: var(--color-border-standard-cool-gray);
+  --theme-input-border-underline-disabled: var(
+    --color-border-standard-assistive
+  );
+  --theme-input-surface: var(--color-common-100);
+  --theme-input-surface-muted: var(--color-neutral-99);
+  --theme-input-surface-disabled: var(--color-neutral-95);
+}
+
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-3);
+  width: 100%;
+
+  &[data-block="true"],
+  &--block {
+    width: 100%;
+  }
+}
+
+.input-label {
+  color: var(--theme-input-label-color);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+}
+
+.input-label--visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.input-box {
+  width: 100%;
+}
+
+.input-field {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--theme-input-gap);
+  border-radius: var(--theme-input-radius-default);
+  border: var(--theme-input-border-width-default) solid
+    var(--theme-input-border-color);
+  background-color: var(--theme-input-surface);
+  padding: var(--theme-input-padding-y) var(--theme-input-padding-x);
+  min-height: var(--theme-input-height-medium);
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+  box-sizing: border-box;
+  outline: none;
+  box-shadow: none;
+
+  &[data-size="small"] {
+    min-height: var(--theme-input-height-small);
+  }
+
+  &[data-size="large"] {
+    min-height: var(--theme-input-height-large);
+  }
+
+  &[data-appearance="secondary"] {
+    border: none;
+    border-bottom: var(--theme-input-border-width-default) solid
+      var(--theme-input-border-color);
+    border-radius: 0;
+    padding-inline: 0;
+    padding-block: var(--spacing-padding-4);
+    background-color: transparent;
+  }
+
+  &[data-appearance="teritary"] {
+    border-radius: var(--theme-input-radius-teritary);
+    background-color: var(--theme-input-surface);
+    min-height: var(--theme-input-height-teritary);
+    flex-wrap: wrap;
+    row-gap: var(--spacing-gap-1);
+    column-gap: var(--theme-input-gap);
+
+    .input-inline-label {
+      flex-basis: 100%;
+    }
+
+    .input-element {
+      min-height: var(--theme-size-medium-2);
+      width: auto;
+      flex: 1 1 auto;
+    }
+
+    .input-element + .input-affix {
+      // inline label 다음 줄에서 input 오른쪽 끝으로 아이콘을 밀어낸다.
+      margin-left: auto;
+    }
+  }
+
+  &:not([data-appearance="secondary"]) {
+    &[data-state="active"],
+    &[data-state="focused"] {
+      border-color: var(--theme-input-border-active);
+      border-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="success"] {
+      border-color: var(--theme-input-border-success);
+      border-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="error"] {
+      border-color: var(--theme-input-border-error);
+      border-width: var(--theme-input-border-width-emphasis);
+    }
+
+    &[data-state="disabled"] {
+      border-color: var(--theme-input-border-disabled);
+      border-width: var(--theme-input-border-width-default);
+      background-color: var(--theme-input-surface-disabled);
+    }
+  }
+
+  .input-element {
+    flex: 1 1 auto;
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: var(--theme-input-text-color);
+    font-size: var(--font-body-medium-size);
+    line-height: var(--font-body-medium-line-height);
+    font-weight: var(--font-body-medium-weight);
+    outline: none;
+    box-shadow: none;
+    min-width: 0;
+
+    &::placeholder {
+      color: var(--theme-input-placeholder-color);
+    }
+
+    &:disabled {
+      color: var(--color-label-disabled);
+
+      &::placeholder {
+        color: var(--color-label-disabled);
+      }
+    }
+
+    &:focus,
+    &:focus-visible,
+    &:focus-within {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}
+
+.input-inline-label {
+  order: -2;
+  flex-basis: 100%;
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  color: var(--theme-input-label-color);
+}
+
+.input-field[data-appearance="secondary"] .input-element {
+  padding-inline: 0;
+}
+
+.input-field[data-appearance="teritary"] .input-element {
+  min-height: var(--theme-size-medium-2);
+}
+
+.input-helper-text {
+  color: var(--theme-input-helper-color);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+
+  [data-state="error"] & {
+    color: var(--theme-input-border-error);
+  }
+
+  [data-state="disabled"] & {
+    color: var(--theme-input-helper-disabled-color);
+  }
+}
+
+.input-affix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  color: var(--theme-input-helper-color);
+
+  &--prefix {
+    order: -1;
+    margin-right: var(--spacing-gap-3);
+  }
+
+  &--suffix,
+  &--reset,
+  &--status {
+    margin-left: var(--spacing-gap-3);
+  }
+
+  &--reset,
+  &--status {
+    color: var(--theme-input-text-color);
+  }
+
+  // 상태별 아이콘 컬러는 디자인 토큰으로 직접 지정한다.
+  &--status[data-state="error"] {
+    color: var(--color-error);
+  }
+
+  &--status[data-state="success"] {
+    color: var(--color-primary-default);
+  }
+}
+.input-field[data-appearance="secondary"] {
+  border-bottom-width: var(--theme-input-border-width-default);
+
+  &[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);
+  }
+}
+
+.input[data-state="active"],
+.input[data-state="focused"],
+.input[data-state="success"] {
+  .input-label,
+  .input-inline-label {
+    color: var(--theme-input-label-accent-color);
+  }
+}
+
+.input[data-state="error"] {
+  .input-label,
+  .input-inline-label {
+    color: var(--theme-input-label-error-color);
+  }
+
+  .input-helper-text {
+    color: var(--theme-input-label-error-color);
+  }
+}
+
+.input[data-state="disabled"] {
+  .input-label,
+  .input-inline-label,
+  .input-helper-text,
+  .input-affix {
+    color: var(--theme-input-helper-disabled-color);
+  }
+
+  .input-field {
+    border-color: var(--theme-input-border-color);
+    background-color: var(--theme-input-surface-disabled);
+
+    &[data-appearance="secondary"] {
+      background-color: transparent;
+    }
+  }
+}
+
+.input-password-toggle,
+.input-action-button {
+  border: none;
+  background: transparent;
+  color: var(--theme-input-label-accent-color);
+  font-size: var(--font-label-small-size);
+  line-height: var(--font-label-small-line-height);
+  font-weight: var(--font-label-small-weight);
+  padding: 0;
+  cursor: pointer;
+
+  &:disabled {
+    color: var(--theme-input-helper-disabled-color);
+    cursor: not-allowed;
+  }
+}
+
+.input-search-icon {
+  font-size: var(--font-label-large-size);
+  line-height: 1;
+}
+
+.one-time-code {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2);
+}
+
+.one-time-code__label {
+  font-size: var(--font-label-small-size);
+  color: var(--theme-input-label-color);
+}
+
+.one-time-code__fields {
+  display: flex;
+  gap: var(--spacing-gap-3);
+}
+
+.one-time-code__input {
+  width: 44px;
+  height: 56px;
+  border-radius: var(--theme-input-radius-default);
+  border: var(--theme-input-border-width-default) solid
+    var(--theme-input-border-color);
+  text-align: center;
+  font-size: var(--font-heading-medium-size);
+  font-weight: var(--font-heading-medium-weight);
+  color: var(--theme-input-text-color);
+
+  &:focus {
+    outline: none;
+    border-color: var(--theme-input-border-active);
+    border-width: var(--theme-input-border-width-emphasis);
+  }
+}
+
+.one-time-code__helper {
+  font-size: var(--font-label-small-size);
+  color: var(--theme-input-helper-color);
+}

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

@@ -0,0 +1,56 @@
+import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+
+export const INPUT_APPEARANCES = ["primary", "secondary", "teritary"] as const;
+export const INPUT_SIZES = ["small", "medium", "large"] as const;
+export const INPUT_STATES = [
+  "default",
+  "active",
+  "focused",
+  "success",
+  "error",
+  "disabled",
+] as const;
+
+export type InputAppearance = (typeof INPUT_APPEARANCES)[number];
+export type InputSize = (typeof INPUT_SIZES)[number];
+export type InputState = (typeof INPUT_STATES)[number];
+
+type NativeInputProps = ComponentPropsWithoutRef<"input">;
+
+export interface InputAffix {
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  resetSlot?: ReactElement;
+  successIcon?: ReactNode;
+  errorIcon?: ReactNode;
+}
+
+export interface InputFeedback {
+  label?: ReactNode;
+  helperText?: ReactNode;
+  hideHelperText?: boolean;
+}
+
+export interface InputProps
+  extends
+    Omit<NativeInputProps, "prefix" | "suffix" | "size">,
+    InputAffix,
+    InputFeedback {
+  appearance?: InputAppearance;
+  size?: InputSize;
+  state?: InputState;
+  block?: boolean;
+  inputClassName?: string;
+  wrapperClassName?: string;
+  labelProps?: ComponentPropsWithoutRef<"label">;
+  helperTextProps?: ComponentPropsWithoutRef<"div">;
+  "data-simulated-state"?: InputState;
+}
+
+export interface InputClassNameOptions {
+  appearance: InputAppearance;
+  size: InputSize;
+  state: InputState;
+  block: boolean;
+  className?: string;
+}