@uniai-fe/uds-primitives 0.0.7 → 0.0.9

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

@@ -1,5 +1,8 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 
+/**
+ * Navigation 항목 key 타입.
+ */
 export type NavigationItemKey = string;
 
 interface NavigationItemBase {
@@ -10,11 +13,19 @@ interface NavigationItemBase {
   ariaLabel?: string;
 }
 
+/**
+ * href로 라우팅되는 navigation item.
+ * @property {string} href 이동 경로.
+ */
 export type NavigationHrefItem = NavigationItemBase & {
   href: string;
   onSelect?: never;
 };
 
+/**
+ * 클릭 시 onSelect를 실행하는 action item.
+ * @property {(key: NavigationItemKey) => void} onSelect 선택 콜백.
+ */
 export type NavigationActionItem = NavigationItemBase & {
   onSelect: (key: NavigationItemKey) => void;
   href?: never;
@@ -22,6 +33,14 @@ export type NavigationActionItem = NavigationItemBase & {
 
 export type NavigationItem = NavigationHrefItem | NavigationActionItem;
 
+/**
+ * BottomNavigation props. 모바일 하단 내비게이션에서 사용한다.
+ * @property {NavigationItem[]} items 렌더링할 항목 배열.
+ * @property {NavigationItemKey | null} activeKey 현재 활성 key.
+ * @property {(key: NavigationItemKey) => void} [onActiveChange] active 변경 콜백.
+ * @property {string} [ariaLabel] nav 라벨. 없으면 `aria-label` prop을 사용한다.
+ * @property {boolean} [fixed=false] true면 뷰포트 하단 고정 스타일.
+ */
 export interface BottomNavigationProps extends Omit<
   ComponentPropsWithoutRef<"nav">,
   "children"
@@ -37,6 +56,9 @@ export interface NavigationClassNameOptions {
   className?: string;
 }
 
+/**
+ * 내비게이션 sitemap 옵션. 팝업, auth, page 스타일 등 메타데이터.
+ */
 export interface NavigationSitemapOptions {
   popup?: boolean;
   auth?: string[];

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

@@ -16,6 +16,7 @@ import {
  * @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.
  */
 const PaginationCarousel = forwardRef<
   HTMLUListElement,

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

@@ -13,6 +13,7 @@ import {
  * @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.
  */
 const PaginationCount = forwardRef<HTMLDivElement, PaginationCountProps>(
   ({ total, current = 1, size = "small", className, ...restProps }, ref) => {

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

@@ -16,6 +16,8 @@ import {
  * @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에 전달될 기타 속성.
  * @example
  * ```tsx
  * <Pagination total={10} current={3} onPageChange={setPage} />

package/src/components/radio/markup/Radio.tsx

@@ -17,7 +17,12 @@ const RADIO_HELPER_CLASSNAME = "radio-helper";
  * Radio component; Radix RadioGroup item thin wrapper
  * @component
  * @param {RadioProps} props
- * @param {"medium" | "large"} [props.size]
+ * @param {"medium" | "large"} [props.size="medium"] indicator/spacing 크기.
+ * @param {string} [props.className] root className.
+ * @param {boolean} [props.disabled] disabled 상태.
+ * @param {string} [props.id] 외부 id.
+ * @param {string} [props.value] option value.
+ * @param {(value: string) => void} [props.onClick] native click handler.
  * @example
  * <Radio value="option" />
  */
@@ -48,7 +53,16 @@ export const Radio = forwardRef<HTMLButtonElement, RadioProps>(function Radio(
  * RadioField component; label/helper wrapper for single radioItem
  * @component
  * @param {RadioFieldProps} props
- * @param {"medium" | "large"} [props.size]
+ * @param {"medium" | "large"} [props.size="medium"] indicator/spacing 크기.
+ * @param {React.ReactNode} [props.label] `<label>` 텍스트/노드.
+ * @param {React.ReactNode} [props.helperText] helper 텍스트.
+ * @param {ComponentPropsWithoutRef<"label">} [props.labelProps] label attr.
+ * @param {ComponentPropsWithoutRef<"p">} [props.helperTextProps] helper attr.
+ * @param {string} [props.fieldClassName] `.radio-field` className.
+ * @param {string} [props.labelWrapperClassName] 라벨 wrapper className.
+ * @param {boolean} [props.disabled] disabled 상태.
+ * @param {string} [props.value] option value.
+ * @param {(value: string) => void} [props.onClick] native click handler.
  * @example
  * <RadioField label="옵션" helperText="필수" value="option" />
  */

package/src/components/radio/markup/RadioCard.tsx

@@ -19,6 +19,14 @@ const RADIO_CARD_INDICATOR_CLASSNAME = "radio-card-indicator";
  * RadioCard component; entire card acts as radio trigger
  * @component
  * @param {RadioCardProps} props
+ * @param {React.ReactNode} props.title 카드 타이틀.
+ * @param {React.ReactNode} [props.description] 상세 설명.
+ * @param {React.ReactNode} [props.badge] 오른쪽 상단 배지 슬롯.
+ * @param {"medium" | "large"} [props.size="medium"] 카드 높이/spacing.
+ * @param {boolean} [props.disabled] disabled 상태.
+ * @param {string} [props.className] root className.
+ * @param {string} [props.value] option value.
+ * @param {(value: string) => void} [props.onClick] native click handler.
  * @example
  * <RadioCard title="행복1농장" value="farm-1" />
  */

package/src/components/radio/markup/RadioCardGroup.tsx

@@ -11,6 +11,14 @@ const RADIO_CARD_GROUP_CLASSNAME = "radio-card-group";
  * RadioCardGroup component; renders RadioCard list with internal Radix Root
  * @component
  * @param {RadioCardGroupProps} props
+ * @param {RadioCardGroupOption[]} props.options 렌더링할 카드 옵션 배열.
+ * @param {"medium" | "large"} [props.size="medium"] 모든 카드 기본 size.
+ * @param {string} [props.highlightedValue] 강조 스타일을 적용할 option id.
+ * @param {RadioCardBadgeRender} [props.renderBadge] 옵션/상태 기반 badge 렌더 함수.
+ * @param {string} [props.className] root className.
+ * @param {string} [props.value] 제어형 value.
+ * @param {string} [props.defaultValue] 비제어 초기 value.
+ * @param {(value: string) => void} [props.onValueChange] value 변경 콜백.
  * @example
  * <RadioCardGroup options={[{ id: "farm-1", title: "농장" }]} value="farm-1" />
  */

package/src/components/radio/types/radio.ts

@@ -1,12 +1,22 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import type * as RadixRadioGroup from "@radix-ui/react-radio-group";
 
+/**
+ * 지원하는 radio size.
+ */
 export type RadioSize = "medium" | "large";
 
 export type RadioPrimitiveProps = ComponentPropsWithoutRef<
   typeof RadixRadioGroup.Item
 >;
 
+/**
+ * Radix Radio item에 size/className/id 확장을 더한 props.
+ * @property {"medium" | "large"} [size="medium"] indicator/spacing 크기.
+ * @property {string} [className] root className.
+ * @property {boolean} [disabled] disabled 상태.
+ * @property {string} [id] 외부 id.
+ */
 export interface RadioProps extends RadioPrimitiveProps {
   size?: RadioSize;
   className?: string;
@@ -14,6 +24,15 @@ export interface RadioProps extends RadioPrimitiveProps {
   id?: string;
 }
 
+/**
+ * label/helperText wrapper를 포함한 RadioField props.
+ * @property {React.ReactNode} [label] `<label>` 텍스트/노드.
+ * @property {React.ReactNode} [helperText] helper 텍스트.
+ * @property {ComponentPropsWithoutRef<"p">} [helperTextProps] helper attr.
+ * @property {ComponentPropsWithoutRef<"label">} [labelProps] label attr.
+ * @property {string} [fieldClassName] `.radio-field` className.
+ * @property {string} [labelWrapperClassName] 라벨 wrapper className.
+ */
 export interface RadioFieldProps extends RadioProps {
   label?: ReactNode;
   helperText?: ReactNode;
@@ -31,11 +50,24 @@ interface RadioCardDisplayProps {
   badge?: ReactNode;
 }
 
+/**
+ * 카드 형태 Radio item props. title/description/badge를 포함한다.
+ */
 export interface RadioCardProps
   extends
     Omit<RadioProps, keyof RadioCardDisplayProps>,
     RadioCardDisplayProps {}
 
+/**
+ * RadioCardGroup 옵션 정의.
+ * @property {string} id 옵션 value/id.
+ * @property {React.ReactNode} title 카드 상단 텍스트.
+ * @property {React.ReactNode} [description] 설명 텍스트.
+ * @property {React.ReactNode} [badge] 오른쪽 배지 슬롯.
+ * @property {"medium" | "large"} [size] 개별 size override.
+ * @property {boolean} [disabled] 옵션 disabled.
+ * @property {string} [className] 카드 className.
+ */
 export interface RadioCardGroupOption extends RadioCardDisplayProps {
   id: string;
   size?: RadioSize;
@@ -53,6 +85,13 @@ export type RadioCardBadgeRender = (
   context: RadioCardBadgeRenderContext,
 ) => ReactNode;
 
+/**
+ * RadioCardGroup props. Radix RadioGroup Root props + 옵션 리스트/배지 렌더러를 받는다.
+ * @property {RadioCardGroupOption[]} options 렌더링할 카드 옵션 배열.
+ * @property {"medium" | "large"} [size="medium"] 전체 size 기본값.
+ * @property {string} [highlightedValue] 강조(스타일)할 option id.
+ * @property {RadioCardBadgeRender} [renderBadge] 옵션/상태 기반 badge 렌더 함수.
+ */
 export interface RadioCardGroupProps extends ComponentPropsWithoutRef<
   typeof RadixRadioGroup.Root
 > {

package/src/components/segmented-control/markup/SegmentedControl.tsx

@@ -13,6 +13,18 @@ import type { SegmentedControlProps, SegmentedControlValue } from "../types";
 const toNullableValue = (value?: SegmentedControlValue) =>
   value === undefined || value === "" ? undefined : value;
 
+/**
+ * SegmentedControl — Radix SegmentedControl wrapper with keepSelected toggle.
+ * @component
+ * @param {SegmentedControlProps} props
+ * @param {SegmentedControlOption[]} props.options 렌더링할 옵션 배열.
+ * @param {string} props.ariaLabel 스크린리더용 라벨(필수).
+ * @param {boolean} [props.keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
+ * @param {SegmentedControlValue} [props.value] 제어형 value.
+ * @param {SegmentedControlValue} [props.defaultValue] 비제어 초기 value.
+ * @param {(value: SegmentedControlValue) => void} [props.onValueChange] 값 변경 콜백.
+ * @param {string} [props.className] root className.
+ */
 const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
   (
     {

package/src/components/segmented-control/types/index.ts

@@ -1,8 +1,17 @@
 import type { ComponentPropsWithoutRef } from "react";
 import type { SegmentedControl as RadixSegmentedControlNamespace } from "@radix-ui/themes";
 
+/**
+ * SegmentedControl value 타입. 문자열 value를 사용한다.
+ */
 export type SegmentedControlValue = string;
 
+/**
+ * SegmentedControl 옵션 정의.
+ * @property {SegmentedControlValue} value 고유 value.
+ * @property {string} label 표시 텍스트.
+ * @property {boolean} [disabled] 비활성화 여부.
+ */
 export interface SegmentedControlOption {
   value: SegmentedControlValue;
   label: string;
@@ -12,6 +21,13 @@ export interface SegmentedControlOption {
 type RadixSegmentedControlRootProps = ComponentPropsWithoutRef<
   typeof RadixSegmentedControlNamespace.Root
 >;
+
+/**
+ * SegmentedControl props. Radix Root props에서 children을 제거하고 options/ariaLabel을 강제한다.
+ * @property {SegmentedControlOption[]} options 렌더할 옵션 배열.
+ * @property {string} ariaLabel 스크린리더용 라벨. 필수.
+ * @property {boolean} [keepSelected=true] 선택된 항목을 다시 클릭했을 때 해제하지 않고 유지할지 여부.
+ */
 export interface SegmentedControlProps extends Omit<
   RadixSegmentedControlRootProps,
   "children"

package/src/components/tab/markup/TabContent.tsx

@@ -6,6 +6,11 @@ import { useTabContext } from "../utils";
 
 /**
  * TabContent: trigger와 동일한 data attr을 전달해 스타일 일관성을 유지한다.
+ * @component
+ * @param {TabContentProps} props
+ * @param {string} props.value 매칭되는 trigger value.
+ * @param {string} [props.className] content className.
+ * @param {React.ReactNode} [props.children] 컨텐츠 영역.
  */
 const TabContent = forwardRef<HTMLDivElement, TabContentProps>(
   ({ className, children, ...restProps }, forwardedRef) => {

package/src/components/tab/markup/TabList.tsx

@@ -7,11 +7,21 @@ import { useTabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
 
 /**
  * TabList: Tab trigger container with variant/tone propagation.
+ * @component
+ * @param {TabListProps} props
+ * @param {"line" | "fill"} [props.variant] 루트 override variant.
+ * @param {"small" | "medium" | "large"} [props.scale] 루트 override scale.
+ * @param {string} [props.color] 활성 색상 override.
+ * @param {boolean} [props.fullWidth=false] trigger들을 flex:1로 확장할지 여부.
+ * @param {string} [props.className] 리스트 className.
+ * @param {React.ReactNode} [props.children] TabTrigger 모음.
+ * @param {React.CSSProperties} [props.style] 추가 style.
  */
 const TabList = forwardRef<HTMLDivElement, TabListProps>(
   (
     {
       variant,
+      scale,
       color,
       fullWidth = false,
       className,
@@ -24,12 +34,18 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(
     const parentContext = useTabContext();
     const resolvedVariant =
       variant ?? parentContext.variant ?? DEFAULT_TAB_CONTEXT_VALUE.variant;
+    const resolvedScale =
+      scale ?? parentContext.scale ?? DEFAULT_TAB_CONTEXT_VALUE.scale;
     const resolvedColor =
       color ?? parentContext.color ?? DEFAULT_TAB_CONTEXT_VALUE.color;
 
     useEffect(() => {
-      parentContext.setVariantColor?.(resolvedVariant, resolvedColor);
-    }, [parentContext, resolvedVariant, resolvedColor]);
+      parentContext.setSharedConfig?.(
+        resolvedVariant,
+        resolvedColor,
+        resolvedScale,
+      );
+    }, [parentContext, resolvedVariant, resolvedColor, resolvedScale]);
 
     const listStyle = useMemo<CSSProperties>(
       () => ({
@@ -45,6 +61,7 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(
         ref={forwardedRef}
         className={clsx("tab-list", className)}
         data-variant={resolvedVariant}
+        data-scale={resolvedScale}
         data-full-width={fullWidth ? "true" : undefined}
         data-color={resolvedColor}
         style={listStyle}

package/src/components/tab/markup/TabRoot.tsx

@@ -2,16 +2,49 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
 import { forwardRef, useEffect, useMemo, useState } from "react";
 import type { CSSProperties } from "react";
-import type { TabRootProps } from "../types";
+import type { TabRootProps, TabScale } from "../types";
 import { TabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
 
+const TAB_SCALE_STYLES: Record<TabScale, Record<string, string>> = {
+  small: {
+    "--tab-label-font-size": "var(--font-heading-xxsmall-size, 15px)",
+    "--tab-label-font-weight": "var(--font-heading-xxsmall-weight, 600)",
+    "--tab-height": "40px",
+    "--tab-padding-x": "var(--spacing-padding-4, 8px)",
+  },
+  medium: {
+    "--tab-label-font-size": "var(--font-heading-xsmall-size, 17px)",
+    "--tab-label-font-weight": "var(--font-heading-xsmall-weight, 600)",
+    "--tab-height": "48px",
+    "--tab-padding-x": "var(--spacing-padding-8, 24px)",
+  },
+  large: {
+    "--tab-label-font-size": "var(--font-heading-small-size, 19px)",
+    "--tab-label-font-weight": "var(--font-heading-small-weight, 600)",
+    "--tab-height": "56px",
+    "--tab-padding-x": "var(--spacing-padding-8, 24px)",
+  },
+};
+
 /**
  * TabRoot: TabsPrimitive.Root thin wrapper with tab data context.
+ * @component
+ * @param {TabRootProps} props
+ * @param {"line" | "fill"} [props.variant="line"] 스타일 토글.
+ * @param {"small" | "medium" | "large"} [props.scale="medium"] 높이/타이포 스케일.
+ * @param {string} [props.color] 활성 indicator 색상(CSS 변수 포함).
+ * @param {string} [props.className] 루트 className.
+ * @param {React.ReactNode} [props.children] TabList/Trigger/Content 구조.
+ * @param {React.CSSProperties} [props.style] 추가 style.
+ * @param {string} [props.value] 제어형 active value.
+ * @param {string} [props.defaultValue] 비제어 초기 value.
+ * @param {(value: string) => void} [props.onValueChange] 탭 변경 콜백.
  */
 const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
   (
     {
       variant: variantProp = DEFAULT_TAB_CONTEXT_VALUE.variant,
+      scale: scaleProp = DEFAULT_TAB_CONTEXT_VALUE.scale,
       color: colorProp = DEFAULT_TAB_CONTEXT_VALUE.color,
       className,
       children,
@@ -22,6 +55,7 @@ const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
   ) => {
     const [variant, setVariant] = useState(variantProp);
     const [color, setColor] = useState(colorProp);
+    const [scale, setScale] = useState(scaleProp);
 
     useEffect(() => {
       setVariant(variantProp);
@@ -31,26 +65,37 @@ const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
       setColor(colorProp);
     }, [colorProp]);
 
+    useEffect(() => {
+      setScale(scaleProp);
+    }, [scaleProp]);
+
     const contextValue = useMemo(
       () => ({
         variant,
         color,
-        setVariantColor: (
+        scale,
+        setSharedConfig: (
           nextVariant: typeof variant,
           nextColor: typeof color,
+          nextScale: typeof scale,
         ) => {
           setVariant(nextVariant);
           setColor(nextColor);
+          setScale(nextScale);
         },
       }),
-      [variant, color],
+      [variant, color, scale],
     );
+
+    const resolvedScaleStyle =
+      TAB_SCALE_STYLES[scale] ?? TAB_SCALE_STYLES.medium;
     const rootStyle = useMemo<CSSProperties>(
       () => ({
         ...(style ?? {}),
         "--tab-color-active": color,
+        ...resolvedScaleStyle,
       }),
-      [style, color],
+      [style, color, resolvedScaleStyle],
     );
 
     return (
@@ -60,6 +105,7 @@ const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
           ref={forwardedRef}
           className={clsx("tab-root", className)}
           data-variant={variant}
+          data-scale={scale}
           style={rootStyle}
         >
           {children}

package/src/components/tab/markup/TabTrigger.tsx

@@ -19,10 +19,17 @@ const wrapLabel = (children: ReactNode) => {
 
 /**
  * TabTrigger: 개별 탭 버튼. icon slot을 지원한다.
+ * @component
+ * @param {TabTriggerProps} props
+ * @param {React.ReactNode} [props.icon] 라벨 앞 슬롯.
+ * @param {React.ReactNode} [props.children] 라벨 콘텐츠.
+ * @param {string} [props.className] trigger className.
+ * @param {string} props.value 탭 value.
+ * @param {boolean} [props.disabled] disabled 상태.
  */
 const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
   ({ icon, children, className, ...restProps }, forwardedRef) => {
-    const { variant } = useTabContext();
+    const { variant, scale } = useTabContext();
     const hasIcon = Boolean(icon);
     const normalizedChildren = wrapLabel(children);
 
@@ -32,6 +39,7 @@ const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
         ref={forwardedRef}
         className={clsx("tab-trigger", className)}
         data-variant={variant}
+        data-scale={scale}
         data-has-icon={hasIcon ? "true" : undefined}
         data-disabled={restProps.disabled ? "true" : undefined}
       >

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

@@ -4,17 +4,14 @@
   /* Figma node 694:4619 측정값을 CSS 변수로 고정해 Storybook과 실 서비스 간 시각 편차를 줄인다. */
   --tab-label-font-size: var(--font-heading-xsmall-size, 17px);
   --tab-label-font-weight: var(--font-heading-xsmall-weight, 600);
-  --tab-label-line-height: var(--font-heading-xsmall-line-height, 1.5em);
-  --tab-label-letter-spacing: var(--font-heading-xsmall-letter-spacing, 0px);
-  --tab-gap: 10px;
+  --tab-label-line-height: 1.4;
+  --tab-label-letter-spacing: 0px;
+  --tab-gap: var(--spacing-gap-2, 8px);
   --tab-padding-y: 10px;
-  --tab-padding-x: 20px;
+  --tab-padding-x: var(--spacing-padding-8, 24px);
   --tab-icon-gap: 6px;
-  --tab-line-track-color: var(
-    --color-border-divider,
-    var(--color-cool-gray-85)
-  );
-  --tab-line-track-height: 1.6px;
+  --tab-line-track-color: var(--color-border-divider, #f2f2f3);
+  --tab-line-track-height: 1px;
   --tab-line-indicator-height: 2px;
   --tab-color-active-default: #1a6aff;
   --tab-color-active: var(--tab-color-active-default);
@@ -24,12 +21,33 @@
   --tab-fill-active-color: var(--color-common-100, #ffffff);
   --tab-inactive-color: var(--color-label-alternative, #afb1b6);
   --tab-disabled-opacity: 0.4;
+  --tab-height: 48px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-3);
 }
 
+.tab-root:where([data-scale="small"]) {
+  --tab-label-font-size: var(--font-heading-xxsmall-size, 15px);
+  --tab-label-font-weight: var(--font-heading-xxsmall-weight, 600);
+  --tab-height: 40px;
+  --tab-padding-x: var(--spacing-padding-4, 8px);
+}
+
+.tab-root:where([data-scale="medium"]) {
+  --tab-label-font-size: var(--font-heading-xsmall-size, 17px);
+  --tab-label-font-weight: var(--font-heading-xsmall-weight, 600);
+  --tab-height: 48px;
+}
+
+.tab-root:where([data-scale="large"]) {
+  --tab-label-font-size: var(--font-heading-small-size, 19px);
+  --tab-label-font-weight: var(--font-heading-small-weight, 600);
+  --tab-height: 56px;
+  --tab-padding-x: var(--spacing-padding-8, 24px);
+}
+
 .tab-list {
   display: flex;
   align-items: stretch;
@@ -53,6 +71,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--tab-icon-gap);
+  min-height: var(--tab-height);
   padding: var(--tab-padding-y) var(--tab-padding-x);
   background: transparent;
   border: none;
@@ -158,7 +177,6 @@
 .tab-trigger:where([data-variant="fill"]) {
   border-radius: 12px;
   min-width: 0;
-  padding: var(--tab-padding-y) var(--tab-padding-x);
 }
 
 .tab-trigger:where([data-variant="fill"][data-state="active"]) {

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

@@ -7,14 +7,20 @@ import type {
 import type { ReactNode } from "react";
 
 export const TAB_VARIANTS = ["line", "fill"] as const;
+export const TAB_SCALES = ["small", "medium", "large"] as const;
 
 export type TabVariant = (typeof TAB_VARIANTS)[number];
+export type TabScale = (typeof TAB_SCALES)[number];
 
 export interface TabRootProps extends TabsProps {
   /**
    * line / fill 스타일 토글. 기본 line.
    */
   variant?: TabVariant;
+  /**
+   * small / medium / large 스케일. 기본 medium.
+   */
+  scale?: TabScale;
   /**
    * 활성 색상(hex, rgba, css 변수 등). 지정하지 않으면 기본 블루.
    */
@@ -26,6 +32,10 @@ export interface TabListProps extends TabsListProps {
    * 루트와 동일한 variant를 재지정할 수 있다.
    */
   variant?: TabVariant;
+  /**
+   * 루트와 동일한 scale을 재지정할 수 있다.
+   */
+  scale?: TabScale;
   /**
    * 리스트 단위 활성 색상 지정.
    */

package/src/components/tab/utils/tab-context.ts

@@ -1,15 +1,21 @@
 import { createContext, useContext } from "react";
-import type { TabVariant } from "../types";
+import type { TabScale, TabVariant } from "../types";
 
 interface TabContextValue {
   variant: TabVariant;
   color: string;
-  setVariantColor?: (nextVariant: TabVariant, nextColor: string) => void;
+  scale: TabScale;
+  setSharedConfig?: (
+    nextVariant: TabVariant,
+    nextColor: string,
+    nextScale: TabScale,
+  ) => void;
 }
 
 const DEFAULT_TAB_CONTEXT_VALUE: TabContextValue = {
   variant: "line",
   color: "var(--tab-color-active-default, #1a6aff)",
+  scale: "medium",
 };
 
 const TabContext = createContext<TabContextValue>(DEFAULT_TAB_CONTEXT_VALUE);