@uniai-fe/uds-primitives 0.0.14 → 0.0.16

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;
@@ -2875,6 +2626,10 @@ figure.chip {
   --pagination-dot-size: 8px;
   --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
   --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
+  --pagination-dot-active-bg-secondary: var(
+    --color-bg-surface-heavy,
+    #313235
+  );
   --pagination-carousel-height: 8px;
   --pagination-carousel-dot-width: 8px;
   --pagination-carousel-active-width: 20px;
@@ -2950,6 +2705,13 @@ figure.chip {
   align-items: center;
 }
 
+.pagination--variant-carousel[data-priority=secondary] {
+  --pagination-dot-active-bg: var(
+    --pagination-dot-active-bg-secondary,
+    var(--color-secondary-strong, #ccdeff)
+  );
+}
+
 .pagination--variant-carousel .pagination-button {
   width: auto;
   height: var(--pagination-carousel-height);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,

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/pagination/markup/Carousel.tsx

@@ -9,68 +9,86 @@ import {
 } from "../utils";
 
 /**
- * Carousel indicator Pagination. 점 형태로 현재 위치만 표시한다.
- * @component
- * @param {PaginationCarouselProps} props
- * @param {number} props.total 전체 step 수.
+ * @component PaginationCarousel
+ * @description
+ *  Carousel(dot) indicator를 렌더한다. total/current는 normalizePaginationState로 보정하고,
+ *  onPageChange가 없으면 버튼을 disabled 처리해 pointer/cursor를 제거한다.
+ *  priority prop은 data attribute로 노출되어 SCSS에서 primary/secondary(active color) 토큰을 분기한다.
+ * @param {PaginationCarouselProps} props Carousel 구성 옵션.
+ * @param {number} props.total 전체 step 개수.
  * @param {number} [props.current=1] 현재 step index(1-indexed).
- * @param {(page: number) => void} [props.onPageChange]
- *  전달 시 dot를 클릭해 이동할 수 있고, 생략하면 모든 dot가 disabled 된다.
- * @param {string} [props.className] `.pagination` root className.
+ * @param {(page: number) => void} [props.onPageChange] dot를 클릭해 이동시키는 핸들러. 미제공 시 인터랙션이 비활성화된다.
+ * @param {string} [props.className] `.pagination` 루트 className merge 용도.
+ * @param {PaginationCarouselProps["priority"]} [props.priority=\"primary\"] active dot 색상 priority.
+ * @returns {JSX.Element} dot indicator `<ul>`.
  */
 const PaginationCarousel = forwardRef<
   HTMLUListElement,
   PaginationCarouselProps
->(({ total, current = 1, onPageChange, className, ...restProps }, ref) => {
-  const { total: normalizedTotal, current: normalizedCurrent } =
-    normalizePaginationState({ total, current });
-  const pages = createPaginationPages(normalizedTotal);
-  const allowInteraction = typeof onPageChange === "function";
-  const rootClassName = composePaginationClassName({
-    variant: "carousel",
-    className,
-  });
+>(
+  (
+    {
+      total,
+      current = 1,
+      onPageChange,
+      className,
+      priority = "primary",
+      ...restProps
+    },
+    ref,
+  ) => {
+    const { total: normalizedTotal, current: normalizedCurrent } =
+      normalizePaginationState({ total, current });
+    const pages = createPaginationPages(normalizedTotal);
+    const allowInteraction = typeof onPageChange === "function";
+    const rootClassName = composePaginationClassName({
+      variant: "carousel",
+      className,
+    });
 
-  const handleClick = (page: number) => {
-    if (!allowInteraction || page === normalizedCurrent) {
-      return;
-    }
-    onPageChange?.(page);
-  };
+    const handleClick = (page: number) => {
+      if (!allowInteraction || page === normalizedCurrent) {
+        return;
+      }
+      onPageChange?.(page);
+    };
 
-  return (
-    <ul
-      {...restProps}
-      ref={ref}
-      className={rootClassName}
-      data-variant="carousel"
-      data-interactive={allowInteraction ? "true" : "false"}
-    >
-      {pages.map(page => {
-        const isActive = page === normalizedCurrent;
-        return (
-          <li
-            key={page}
-            className={PAGINATION_ITEM_CLASSNAME}
-            data-active={isActive ? "true" : undefined}
-          >
-            <button
-              type="button"
-              className={PAGINATION_BUTTON_CLASSNAME}
+    // priority data attr는 primary/secondary dot 색상을 분기한다.
+    return (
+      <ul
+        {...restProps}
+        ref={ref}
+        className={rootClassName}
+        data-variant="carousel"
+        data-interactive={allowInteraction ? "true" : "false"}
+        data-priority={priority}
+      >
+        {pages.map(page => {
+          const isActive = page === normalizedCurrent;
+          return (
+            <li
+              key={page}
+              className={PAGINATION_ITEM_CLASSNAME}
               data-active={isActive ? "true" : undefined}
-              aria-label={`Step ${page}`}
-              disabled={!allowInteraction}
-              tabIndex={allowInteraction ? 0 : -1}
-              onClick={allowInteraction ? () => handleClick(page) : undefined}
             >
-              <span className="pagination-dot" aria-hidden="true" />
-            </button>
-          </li>
-        );
-      })}
-    </ul>
-  );
-});
+              <button
+                type="button"
+                className={PAGINATION_BUTTON_CLASSNAME}
+                data-active={isActive ? "true" : undefined}
+                aria-label={`Step ${page}`}
+                disabled={!allowInteraction}
+                tabIndex={allowInteraction ? 0 : -1}
+                onClick={allowInteraction ? () => handleClick(page) : undefined}
+              >
+                <span className="pagination-dot" aria-hidden="true" />
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    );
+  },
+);
 
 PaginationCarousel.displayName = "PaginationCarousel";
 

package/src/components/pagination/markup/Count.tsx

@@ -7,13 +7,16 @@ import {
 } from "../utils";
 
 /**
- * Count(step) indicator; `1/5` 형태로 현재 위치만 표시한다.
- * @component
- * @param {PaginationCountProps} props
+ * @component PaginationCount
+ * @description
+ *  Count(step) indicator를 `current/total` pill 형태로 렌더한다. 실제로는 disabled button을 사용해
+ *  시각적 일관성을 유지하고, normalizePaginationState로 total/current를 보정한다.
+ * @param {PaginationCountProps} props Count variant 구성 옵션.
  * @param {number} props.total 전체 step 수.
- * @param {number} [props.current=1] 현재 step position.
- * @param {"small" | "xsmall"} [props.size="small"] 높이/타이포 크기 옵션.
- * @param {string} [props.className] `.pagination` root className.
+ * @param {number} [props.current=1] 현재 위치(1-indexed).
+ * @param {PaginationCountProps["size"]} [props.size=\"small\"] 높이/타이포 크기.
+ * @param {string} [props.className] `.pagination` 루트 className merge 용도.
+ * @returns {JSX.Element} count indicator `<div>`.
  */
 const PaginationCount = forwardRef<HTMLDivElement, PaginationCountProps>(
   ({ total, current = 1, size = "small", className, ...restProps }, ref) => {

package/src/components/pagination/markup/Pagination.tsx

@@ -9,15 +9,17 @@ import {
 } from "../utils";
 
 /**
- * 숫자 페이지형 Pagination.
- * @component
- * @param {PaginationProps} props
- * @param {number} props.total 전체 페이지 개수(1 이상으로 자동 보정).
- * @param {number} [props.current=1] 현재 페이지. total 범위를 벗어나면 자동 조정된다.
- * @param {(page: number) => void} [props.onPageChange]
- *  페이지 버튼 클릭 핸들러. 전달되지 않으면 모든 버튼이 disabled 처리되어 cursor가 제거된다.
- * @param {string} [props.className] `.pagination` root className.
- * @param {React.AriaAttributes} [props.aria-*] ul element에 전달될 기타 속성.
+ * @component Pagination
+ * @description
+ *  List variant pagination을 구현한다. total/current 값을 보정해 최소 1~total 범위의 페이지 버튼을 렌더하고,
+ *  onPageChange가 없으면 data-interactive 값을 false로 지정해 전부 disabled 상태로 노출한다.
+ * @param {PaginationProps} props Pagination 구성 옵션.
+ * @param {number} props.total 전체 페이지 개수. 1 미만이면 자동으로 1로 보정된다.
+ * @param {number} [props.current=1] 현재 활성 페이지(1-indexed). total 범위를 벗어나면 자동 조정된다.
+ * @param {(page: number) => void} [props.onPageChange] 페이지 변경 핸들러. 미제공 시 버튼은 disabled 처리되고 tabIndex가 -1이 된다.
+ * @param {string} [props.className] `.pagination` 루트 className merge 용도.
+ * @param {React.AriaAttributes} [props.aria-*] ARIA 속성은 그대로 `<ul>`에 전달된다.
+ * @returns {JSX.Element} 페이지 네비게이터 `<ul>`.
  * @example
  * ```tsx
  * <Pagination total={10} current={3} onPageChange={setPage} />

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

@@ -13,6 +13,10 @@
   --pagination-dot-size: 8px;
   --pagination-dot-bg: var(--color-cool-gray-85, #d2d3d7);
   --pagination-dot-active-bg: var(--color-primary-default, #0061ff);
+  --pagination-dot-active-bg-secondary: var(
+    --color-bg-surface-heavy,
+    #313235
+  ); // semantic surface heavy
   --pagination-carousel-height: 8px;
   --pagination-carousel-dot-width: 8px;
   --pagination-carousel-active-width: 20px;
@@ -94,6 +98,14 @@
   align-items: center;
 }
 
+// secondary priority일 때 active dot 컬러를 재정의한다.
+.pagination--variant-carousel[data-priority="secondary"] {
+  --pagination-dot-active-bg: var(
+    --pagination-dot-active-bg-secondary,
+    var(--color-secondary-strong, #ccdeff)
+  );
+}
+
 .pagination--variant-carousel .pagination-button {
   width: auto;
   height: var(--pagination-carousel-height);

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

@@ -2,9 +2,12 @@ import type { ComponentPropsWithoutRef } from "react";
 
 export const PAGINATION_VARIANTS = ["list", "carousel", "count"] as const;
 export const PAGINATION_COUNT_SIZES = ["small", "xsmall"] as const;
+export const PAGINATION_CAROUSEL_PRIORITIES = ["primary", "secondary"] as const;
 
 export type PaginationVariant = (typeof PAGINATION_VARIANTS)[number];
 export type PaginationCountSize = (typeof PAGINATION_COUNT_SIZES)[number];
+export type PaginationCarouselPriority =
+  (typeof PAGINATION_CAROUSEL_PRIORITIES)[number];
 
 type NativeListProps = ComponentPropsWithoutRef<"ul">;
 type NativeDivProps = ComponentPropsWithoutRef<"div">;
@@ -28,7 +31,9 @@ interface PaginationInteractiveProps {
 }
 
 /**
- * 숫자 페이지용 Pagination props
+ * 숫자 페이지용 Pagination props.
+ * native `<ul>` 속성과 state/interaction 옵션(total/current/onPageChange)을 함께 받는다.
+ * onPageChange가 전달되지 않으면 버튼이 disabled 상태가 되며 focus 방지를 위해 tabIndex가 -1로 설정된다.
  */
 export interface PaginationProps
   extends
@@ -37,16 +42,24 @@ export interface PaginationProps
     PaginationInteractiveProps {}
 
 /**
- * Carousel 점 indicator props
+ * Carousel(dot) indicator props.
+ * native `<ul>` 속성과 total/current/onPageChange + priority 옵션을 함께 받아 dot 상태를 제어한다.
+ * priority는 SCSS data attribute 기반으로 semantic primary/secondary active 색상을 선택한다.
  */
 export interface PaginationCarouselProps
   extends
     Omit<NativeListProps, "children" | "onChange">,
     PaginationBaseProps,
-    PaginationInteractiveProps {}
+    PaginationInteractiveProps {
+  /**
+   * dot active 색상 priority. primary(semantic primary standard) 또는 secondary(semantic surface heavy) 옵션을 제공한다.
+   */
+  priority?: PaginationCarouselPriority;
+}
 
 /**
- * Count(step) indicator props
+ * Count(step) indicator props.
+ * `<div>` 래퍼에 disabled button을 내장해 `current/total` 텍스트만 출력하며 size로 높이/타이포를 전환한다.
  */
 export interface PaginationCountProps
   extends Omit<NativeDivProps, "children">, PaginationBaseProps {

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,
 >