@uniai-fe/uds-primitives 0.4.7 → 0.5.0

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;
+}

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

@@ -5,13 +5,17 @@ import type {
   TabsTriggerProps,
 } from "@radix-ui/react-tabs";
 import type { ReactNode } from "react";
+import type { SlotTextProps } from "../../slot";
 
-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 type TabVariant = "line" | "fill";
+export type TabScale = "small" | "medium" | "large";
 
+/**
+ * Tab Types; Root props
+ * @property {TabVariant} [variant] line / fill 스타일 변형
+ * @property {TabScale} [scale] small / medium / large 스케일
+ * @property {string} [color] 활성 색상(CSS 변수 포함)
+ */
 export interface TabRootProps extends TabsProps {
   /**
    * line / fill 스타일 토글. 기본 line.
@@ -27,6 +31,13 @@ export interface TabRootProps extends TabsProps {
   color?: string;
 }
 
+/**
+ * Tab Types; List props
+ * @property {TabVariant} [variant] 루트 variant override
+ * @property {TabScale} [scale] 루트 scale override
+ * @property {string} [color] 리스트 단위 활성 색상 override
+ * @property {boolean} [fullWidth] true면 trigger를 균등 분배
+ */
 export interface TabListProps extends TabsListProps {
   /**
    * 루트와 동일한 variant를 재지정할 수 있다.
@@ -46,6 +57,10 @@ export interface TabListProps extends TabsListProps {
   fullWidth?: boolean;
 }
 
+/**
+ * Tab Types; Trigger props
+ * @property {React.ReactNode} [icon] 라벨 앞에 표시할 아이콘
+ */
 export interface TabTriggerProps extends TabsTriggerProps {
   /**
    * label 앞에 표시할 아이콘.
@@ -53,4 +68,12 @@ export interface TabTriggerProps extends TabsTriggerProps {
   icon?: ReactNode;
 }
 
-export type TabContentProps = TabsContentProps;
+/**
+ * Tab Types; Content props
+ */
+export interface TabContentProps extends TabsContentProps {}
+
+/**
+ * Tab Types; Label props
+ */
+export type TabLabelProps = SlotTextProps;

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

@@ -5,16 +5,11 @@ interface TabContextValue {
   variant: TabVariant;
   color: string;
   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)",
+  color: "var(--tab-color-active-default)",
   scale: "medium",
 };
 

package/src/index.scss

@@ -19,6 +19,7 @@
 @use "./components/segmented-control";
 @use "./components/select";
 @use "./components/spinner";
+@use "./components/switch";
 @use "./components/tab";
 @use "./components/table";
 @use "./components/tooltip";

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from "./components/segmented-control";
 export * from "./components/select";
 export * from "./components/slot";
 export * from "./components/spinner";
+export * from "./components/switch";
 export * from "./components/tab";
 export * from "./components/table";
 export * from "./components/tooltip";

package/src/components/badge/hooks/index.ts

@@ -1,4 +0,0 @@
-/**
- * TODO(badge): 접근성/상태 계산 hook을 정의한다.
- */
-export {};

package/src/components/badge/utils/index.ts

@@ -1,21 +0,0 @@
-import clsx from "clsx";
-import type { BadgeClassNameOptions } from "../types";
-
-const BADGE_CLASSNAME = "badge";
-
-/**
- * Badge 데이터 축을 className 구조로 묶어서 Story/override 시 일관되게 쓴다.
- */
-const composeBadgeClassName = ({
-  size,
-  style,
-  className,
-}: BadgeClassNameOptions) =>
-  clsx(
-    BADGE_CLASSNAME,
-    `${BADGE_CLASSNAME}--size-${size}`,
-    `${BADGE_CLASSNAME}--style-${style}`,
-    className,
-  );
-
-export { BADGE_CLASSNAME, composeBadgeClassName };

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

@@ -1,4 +0,0 @@
-/**
- * TODO(tab-menu): 접근성/상태 계산 hook을 정의한다.
- */
-export {};