@uniai-fe/uds-primitives 0.4.6 → 0.4.8

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

@@ -1,9 +1,9 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
-import { forwardRef, useEffect, useMemo } from "react";
+import { forwardRef } from "react";
 import type { CSSProperties } from "react";
 import type { TabListProps } from "../types";
-import { useTabContext, DEFAULT_TAB_CONTEXT_VALUE } from "../utils";
+import { DEFAULT_TAB_CONTEXT_VALUE, TabContext, useTabContext } from "../utils";
 
 /**
  * TabList: Tab trigger container with variant/tone propagation.
@@ -38,36 +38,34 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(
       scale ?? parentContext.scale ?? DEFAULT_TAB_CONTEXT_VALUE.scale;
     const resolvedColor =
       color ?? parentContext.color ?? DEFAULT_TAB_CONTEXT_VALUE.color;
-
-    useEffect(() => {
-      parentContext.setSharedConfig?.(
-        resolvedVariant,
-        resolvedColor,
-        resolvedScale,
-      );
-    }, [parentContext, resolvedVariant, resolvedColor, resolvedScale]);
-
-    const listStyle = useMemo<CSSProperties>(
-      () => ({
-        ...(style ?? {}),
-        "--tab-color-active": resolvedColor,
-      }),
-      [style, resolvedColor],
-    );
+    // 변경: List-local override는 nearest provider로만 전달해 Root state 역주입을 제거한다.
+    const listStyle = color
+      ? ({
+          ...(style ?? {}),
+          "--tab-color-active": resolvedColor,
+        } as CSSProperties)
+      : style;
 
     return (
-      <TabsPrimitive.List
-        {...restProps}
-        ref={forwardedRef}
-        className={clsx("tab-list", className)}
-        data-variant={resolvedVariant}
-        data-scale={resolvedScale}
-        data-full-width={fullWidth ? "true" : undefined}
-        data-color={resolvedColor}
-        style={listStyle}
+      <TabContext.Provider
+        value={{
+          variant: resolvedVariant,
+          color: resolvedColor,
+          scale: resolvedScale,
+        }}
       >
-        {children}
-      </TabsPrimitive.List>
+        <TabsPrimitive.List
+          {...restProps}
+          ref={forwardedRef}
+          className={clsx("tab-list", className)}
+          data-variant={resolvedVariant}
+          data-scale={resolvedScale}
+          data-full-width={fullWidth ? "true" : undefined}
+          style={listStyle}
+        >
+          {children}
+        </TabsPrimitive.List>
+      </TabContext.Provider>
     );
   },
 );

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

@@ -1,31 +1,10 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
-import { forwardRef, useEffect, useMemo, useState } from "react";
+import { forwardRef } from "react";
 import type { CSSProperties } from "react";
-import type { TabRootProps, TabScale } from "../types";
+import type { TabRootProps } 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
@@ -43,9 +22,9 @@ const TAB_SCALE_STYLES: Record<TabScale, Record<string, string>> = {
 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,
+      variant: variantProp,
+      scale: scaleProp,
+      color: colorProp,
       className,
       children,
       style,
@@ -53,53 +32,19 @@ const TabRoot = forwardRef<HTMLDivElement, TabRootProps>(
     },
     forwardedRef,
   ) => {
-    const [variant, setVariant] = useState(variantProp);
-    const [color, setColor] = useState(colorProp);
-    const [scale, setScale] = useState(scaleProp);
-
-    useEffect(() => {
-      setVariant(variantProp);
-    }, [variantProp]);
-
-    useEffect(() => {
-      setColor(colorProp);
-    }, [colorProp]);
-
-    useEffect(() => {
-      setScale(scaleProp);
-    }, [scaleProp]);
-
-    const contextValue = useMemo(
-      () => ({
-        variant,
-        color,
-        scale,
-        setSharedConfig: (
-          nextVariant: typeof variant,
-          nextColor: typeof color,
-          nextScale: typeof scale,
-        ) => {
-          setVariant(nextVariant);
-          setColor(nextColor);
-          setScale(nextScale);
-        },
-      }),
-      [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, resolvedScaleStyle],
-    );
+    const variant = variantProp ?? DEFAULT_TAB_CONTEXT_VALUE.variant;
+    const scale = scaleProp ?? DEFAULT_TAB_CONTEXT_VALUE.scale;
+    const color = colorProp ?? DEFAULT_TAB_CONTEXT_VALUE.color;
+    // 변경: runtime color prop만 CSS 변수로 주입하고, size 토큰은 styles/variables.scss에서 관리한다.
+    const rootStyle = colorProp
+      ? ({
+          ...(style ?? {}),
+          "--tab-color-active": colorProp,
+        } as CSSProperties)
+      : style;
 
     return (
-      <TabContext.Provider value={contextValue}>
+      <TabContext.Provider value={{ variant, color, scale }}>
         <TabsPrimitive.Root
           {...restProps}
           ref={forwardedRef}

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

@@ -1,21 +1,9 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import type { ReactNode } from "react";
 import type { TabTriggerProps } from "../types";
 import { useTabContext } from "../utils";
-
-const wrapLabel = (children: ReactNode) => {
-  if (children === null || children === undefined) {
-    return null;
-  }
-
-  if (typeof children === "string" || typeof children === "number") {
-    return <span className="tab-trigger-label">{children}</span>;
-  }
-
-  return children;
-};
+import { TabLabel } from "./Label";
 
 /**
  * TabTrigger: 개별 탭 버튼. icon slot을 지원한다.
@@ -31,7 +19,6 @@ const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
   ({ icon, children, className, ...restProps }, forwardedRef) => {
     const { variant, scale } = useTabContext();
     const hasIcon = Boolean(icon);
-    const normalizedChildren = wrapLabel(children);
 
     return (
       <TabsPrimitive.Trigger
@@ -44,7 +31,7 @@ const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(
         data-disabled={restProps.disabled ? "true" : undefined}
       >
         {icon ? <span className="tab-trigger-icon">{icon}</span> : null}
-        {normalizedChildren}
+        <TabLabel>{children}</TabLabel>
       </TabsPrimitive.Trigger>
     );
   },

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

@@ -1,198 +1,2 @@
-.tab-root {
-  /* 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: 1.4;
-  --tab-label-letter-spacing: 0px;
-  --tab-gap: var(--spacing-gap-2, 8px);
-  --tab-padding-y: 10px;
-  --tab-padding-x: var(--spacing-padding-8, 24px);
-  --tab-icon-gap: 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);
-  --tab-color-hover: color-mix(in srgb, var(--tab-color-active), #000 15%);
-  --tab-line-hover-color: var(--tab-color-hover, var(--tab-color-active));
-  --tab-fill-hover-bg: var(--color-bg-alternative-cool-gray, #f2f2f3);
-  --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;
-  gap: var(--tab-gap);
-  width: fit-content;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.tab-list::-webkit-scrollbar {
-  display: none;
-}
-
-.tab-list:where([data-full-width="true"]) {
-  width: 100%;
-}
-
-.tab-trigger {
-  position: relative;
-  display: flex;
-  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;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.tab-trigger:where(:focus-visible) {
-  outline: 2px solid var(--color-focus-ring, var(--color-primary-default));
-  outline-offset: 2px;
-}
-
-.tab-trigger:where([data-disabled="true"]) {
-  cursor: not-allowed;
-  opacity: var(--tab-disabled-opacity);
-}
-
-.tab-trigger-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.tab-trigger-label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--tab-label-font-size);
-  font-weight: var(--tab-label-font-weight);
-  line-height: var(--tab-label-line-height);
-  letter-spacing: var(--tab-label-letter-spacing);
-  color: var(--tab-inactive-color);
-  transition: color 0.2s ease;
-}
-
-.tab-list:where([data-variant="line"]) {
-  position: relative;
-  width: 100%;
-}
-
-.tab-list:where([data-variant="line"])::before {
-  content: "";
-  position: absolute;
-  inset: auto 0 0;
-  height: var(--tab-line-track-height, 1px);
-  background: var(--tab-line-track-color);
-  z-index: 0;
-}
-
-.tab-list:where([data-variant="line"][data-full-width="true"]) > .tab-trigger {
-  flex: 1;
-}
-
-.tab-trigger:where([data-variant="line"])::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: -1px;
-  height: var(--tab-line-indicator-height, 2px);
-  background: transparent;
-  transform: scaleX(0);
-  transform-origin: center;
-  z-index: 1;
-  transition:
-    transform 0.2s ease,
-    background-color 0.2s ease;
-}
-
-.tab-trigger:where([data-variant="line"][data-state="active"])
-  .tab-trigger-label {
-  color: var(--tab-color-active);
-}
-
-.tab-trigger:where([data-variant="line"][data-state="active"])::after {
-  background: var(--tab-color-active);
-  transform: scaleX(1);
-}
-
-.tab-trigger:where([data-variant="line"]):where(
-    :not([data-state="active"])
-  ):hover
-  .tab-trigger-label {
-  color: var(--tab-line-hover-color);
-}
-
-.tab-list:where([data-variant="fill"]) {
-  width: fit-content;
-  border: none;
-  background: transparent;
-  border-radius: 0;
-  gap: 0;
-}
-
-.tab-list:where([data-variant="fill"][data-full-width="true"]) {
-  width: 100%;
-}
-
-.tab-list:where([data-variant="fill"][data-full-width="true"]) > .tab-trigger {
-  flex: 1;
-}
-
-.tab-trigger:where([data-variant="fill"]) {
-  border-radius: 12px;
-  min-width: 0;
-}
-
-.tab-trigger:where([data-variant="fill"][data-state="active"]) {
-  background: var(--tab-color-active);
-}
-
-.tab-trigger:where([data-variant="fill"][data-state="active"])
-  .tab-trigger-label {
-  color: var(--tab-fill-active-color);
-}
-
-.tab-trigger:where([data-variant="fill"]):where(
-    :not([data-state="active"])
-  ):hover {
-  background: var(--tab-fill-hover-bg);
-}
-
-.tab-content {
-  display: block;
-  padding: var(--spacing-padding-6) 0;
-}
+@use "./variables";
+@use "./tab";

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

@@ -0,0 +1,190 @@
+.tab-root {
+  --tab-height: var(--tab-height-medium);
+  --tab-label-font-size: var(--tab-label-font-size-medium);
+  --tab-label-font-weight: var(--tab-label-font-weight-medium);
+  --tab-label-line-height: var(--tab-label-line-height-medium);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-medium);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--tab-root-gap);
+}
+
+.tab-root:where([data-scale="small"]) {
+  --tab-height: var(--tab-height-small);
+  --tab-label-font-size: var(--tab-label-font-size-small);
+  --tab-label-font-weight: var(--tab-label-font-weight-small);
+  --tab-label-line-height: var(--tab-label-line-height-small);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-small);
+  --tab-padding-x: var(--tab-padding-x-small);
+}
+
+.tab-root:where([data-scale="medium"]) {
+  --tab-height: var(--tab-height-medium);
+  --tab-label-font-size: var(--tab-label-font-size-medium);
+  --tab-label-font-weight: var(--tab-label-font-weight-medium);
+  --tab-label-line-height: var(--tab-label-line-height-medium);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-medium);
+  --tab-padding-x: var(--spacing-padding-8);
+}
+
+.tab-root:where([data-scale="large"]) {
+  --tab-height: var(--tab-height-large);
+  --tab-label-font-size: var(--tab-label-font-size-large);
+  --tab-label-font-weight: var(--tab-label-font-weight-large);
+  --tab-label-line-height: var(--tab-label-line-height-large);
+  --tab-label-letter-spacing: var(--tab-label-letter-spacing-large);
+  --tab-padding-x: var(--spacing-padding-8);
+}
+
+.tab-list {
+  display: flex;
+  align-items: stretch;
+  gap: var(--tab-gap);
+  width: fit-content;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-list:where([data-full-width="true"]) {
+  width: 100%;
+}
+
+.tab-trigger {
+  position: relative;
+  display: flex;
+  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;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.tab-trigger:where(:focus-visible) {
+  outline: 2px solid var(--color-primary-default);
+  outline-offset: 2px;
+}
+
+.tab-trigger:where([data-disabled="true"]) {
+  cursor: not-allowed;
+  opacity: var(--tab-disabled-opacity);
+}
+
+.tab-trigger-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-trigger-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--tab-label-font-size);
+  font-weight: var(--tab-label-font-weight);
+  line-height: var(--tab-label-line-height);
+  letter-spacing: var(--tab-label-letter-spacing);
+  color: var(--tab-inactive-color);
+  transition: color 0.2s ease;
+}
+
+.tab-list:where([data-variant="line"]) {
+  position: relative;
+  width: 100%;
+}
+
+.tab-list:where([data-variant="line"])::before {
+  content: "";
+  position: absolute;
+  inset: auto 0 0;
+  height: var(--tab-line-track-height);
+  background: var(--tab-line-track-color);
+  z-index: 0;
+}
+
+.tab-list:where([data-variant="line"][data-full-width="true"]) > .tab-trigger {
+  flex: 1;
+}
+
+.tab-trigger:where([data-variant="line"])::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  /* 변경: scroll container에서 vertical overflow clip 리스크를 피하기 위해 indicator를 내부 바닥에 붙인다. */
+  bottom: 0;
+  height: var(--tab-line-indicator-height);
+  background: transparent;
+  transform: scaleX(0);
+  transform-origin: center;
+  z-index: 1;
+  transition:
+    transform 0.2s ease,
+    background-color 0.2s ease;
+}
+
+.tab-trigger:where([data-variant="line"][data-state="active"])
+  .tab-trigger-label {
+  color: var(--tab-color-active);
+}
+
+.tab-trigger:where([data-variant="line"][data-state="active"])::after {
+  background: var(--tab-color-active);
+  transform: scaleX(1);
+}
+
+.tab-trigger:where([data-variant="line"]):where(
+    :not([data-state="active"])
+  ):hover
+  .tab-trigger-label {
+  color: var(--tab-color-hover);
+}
+
+.tab-list:where([data-variant="fill"]) {
+  width: fit-content;
+  border: none;
+  background: transparent;
+  border-radius: 0;
+  gap: 0;
+}
+
+.tab-list:where([data-variant="fill"][data-full-width="true"]) {
+  width: 100%;
+}
+
+.tab-list:where([data-variant="fill"][data-full-width="true"]) > .tab-trigger {
+  flex: 1;
+}
+
+.tab-trigger:where([data-variant="fill"]) {
+  min-width: 0;
+  border-radius: 12px;
+}
+
+.tab-trigger:where([data-variant="fill"][data-state="active"]) {
+  background: var(--tab-color-active);
+}
+
+.tab-trigger:where([data-variant="fill"][data-state="active"])
+  .tab-trigger-label {
+  color: var(--tab-fill-active-color);
+}
+
+.tab-trigger:where([data-variant="fill"]):where(
+    :not([data-state="active"])
+  ):hover {
+  background: var(--tab-fill-hover-bg);
+}
+
+.tab-content {
+  display: block;
+  padding: var(--spacing-padding-6) 0;
+}

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

@@ -0,0 +1,39 @@
+:root {
+  --tab-height-small: 40px;
+  --tab-height-medium: 48px;
+  --tab-height-large: 56px;
+
+  /* 변경: Figma node 1176:834/781/739 기준으로 tab label typography를 exact spec으로 다시 고정한다. */
+  --tab-label-font-size-small: var(--font-label-medium-size);
+  --tab-label-font-weight-small: 700;
+  --tab-label-line-height-small: 1.4;
+  --tab-label-letter-spacing-small: 0px;
+
+  --tab-label-font-size-medium: var(--font-label-large-size);
+  --tab-label-font-weight-medium: 700;
+  --tab-label-line-height-medium: 1.4;
+  --tab-label-letter-spacing-medium: 0px;
+
+  --tab-label-font-size-large: var(--font-heading-small-size);
+  --tab-label-font-weight-large: 700;
+  --tab-label-line-height-large: 1.4;
+  --tab-label-letter-spacing-large: 0px;
+
+  --tab-gap: var(--spacing-gap-2);
+  --tab-root-gap: var(--spacing-gap-3);
+  --tab-padding-y: 10px;
+  --tab-padding-x: var(--spacing-padding-8);
+  --tab-padding-x-small: var(--spacing-padding-4);
+  --tab-icon-gap: 6px;
+  /* 변경: line track은 foundation에 존재하는 assistive border token(#f2f2f3)을 사용한다. */
+  --tab-line-track-color: var(--color-border-assistive);
+  --tab-line-track-height: 1px;
+  --tab-line-indicator-height: 2px;
+  --tab-color-active-default: var(--color-primary-default);
+  --tab-color-active: var(--tab-color-active-default);
+  --tab-color-hover: color-mix(in srgb, var(--tab-color-active), #000 15%);
+  --tab-fill-hover-bg: var(--color-bg-alternative-cool-gray);
+  --tab-fill-active-color: var(--color-common-100);
+  --tab-inactive-color: var(--color-label-alternative);
+  --tab-disabled-opacity: 0.4;
+}