@uniai-fe/uds-primitives 0.4.7 → 0.4.8

package/src/components/badge/styles/badge.scss

@@ -0,0 +1,244 @@
+.badge {
+  --badge-height: var(--theme-badge-height-xsmall);
+  --badge-padding-inline: var(--theme-badge-padding-inline-xsmall);
+  --badge-radius: var(--theme-badge-radius-xsmall);
+  --badge-font-size: var(--theme-badge-font-size-xsmall);
+  --badge-font-weight: var(--theme-badge-font-weight-xsmall);
+  --badge-line-height: var(--theme-badge-line-height-xsmall);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-xsmall);
+  --badge-dot-size: var(--theme-badge-dot-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--theme-badge-gap);
+  width: fit-content;
+  height: var(--badge-height);
+  margin: 0;
+  padding-inline: var(--badge-padding-inline);
+  padding-block: 0;
+  border: 0;
+  box-sizing: border-box;
+  border-radius: var(--badge-radius);
+  white-space: nowrap;
+  font-family: var(--theme-badge-font-family);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
+  letter-spacing: var(--badge-letter-spacing);
+}
+
+.badge:where([data-size="small"]) {
+  --badge-height: var(--theme-badge-height-small);
+  --badge-padding-inline: var(--theme-badge-padding-inline-small);
+  --badge-radius: var(--theme-badge-radius-small);
+  --badge-font-size: var(--theme-badge-font-size-small);
+  --badge-font-weight: var(--theme-badge-font-weight-small);
+  --badge-line-height: var(--theme-badge-line-height-small);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-small);
+}
+
+.badge:where([data-size="medium"]) {
+  --badge-height: var(--theme-badge-height-medium);
+  --badge-padding-inline: var(--theme-badge-padding-inline-medium);
+  --badge-radius: var(--theme-badge-radius-medium);
+  --badge-font-size: var(--theme-badge-font-size-medium);
+  --badge-font-weight: var(--theme-badge-font-weight-medium);
+  --badge-line-height: var(--theme-badge-line-height-medium);
+  --badge-letter-spacing: var(--theme-badge-letter-spacing-medium);
+}
+
+/* 변경: 새 color props를 기본 계약으로 삼고, semantic preset은 style별 selector에서 보정한다. */
+.badge:where([data-style="fill"]) {
+  background-color: var(
+    --badge-background-color,
+    var(--theme-badge-fill-background-default)
+  );
+  color: var(--badge-text-color, var(--theme-badge-fill-text-default));
+  border-color: transparent;
+}
+
+.badge:where([data-style="outlined"]) {
+  background-color: var(
+    --badge-background-color,
+    var(--theme-badge-outlined-background-default)
+  );
+  color: var(--badge-text-color, var(--theme-badge-outlined-text-default));
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(
+    --badge-border-color,
+    var(--theme-badge-outlined-border-default)
+  );
+}
+
+.badge:where([data-style="count"]) {
+  background-color: var(
+    --badge-background-color,
+    var(--theme-badge-count-background-default)
+  );
+  color: var(--badge-text-color, var(--theme-badge-count-text-default));
+  border-color: transparent;
+  border-radius: calc(var(--badge-height) / 2);
+}
+
+.badge:where([data-style="count"][data-size="xsmall"]) {
+  border-radius: var(--theme-badge-count-radius-xsmall);
+}
+
+.badge:where([data-style="dot"]) {
+  width: var(--badge-dot-size);
+  min-width: 0;
+  height: var(--badge-dot-size);
+  padding: 0;
+  border-width: 0;
+  border-radius: var(--badge-dot-size);
+  background-color: transparent;
+}
+
+.badge:where([data-style="dot"]) .badge-dot {
+  width: var(--badge-dot-size);
+  height: var(--badge-dot-size);
+  flex-shrink: 0;
+  border-radius: 999px;
+  background-color: var(
+    --badge-background-color,
+    var(--theme-badge-dot-background-default)
+  );
+}
+
+.badge :where(.badge-label) {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  line-height: inherit;
+}
+
+.badge:where([data-style="dot"]) .badge-label {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  font-size: 0;
+  line-height: 0;
+}
+
+.badge:where([data-style="fill"][data-preset="primary"]) {
+  --badge-background-color: var(--color-primary-default);
+  --badge-text-color: var(--color-common-100);
+}
+
+.badge:where([data-style="fill"][data-preset="secondary"]) {
+  --badge-background-color: var(--color-secondary-default);
+  --badge-text-color: var(--color-primary-default);
+}
+
+.badge:where([data-style="fill"][data-preset="tertiary"]) {
+  --badge-background-color: var(--color-cool-gray-10);
+  --badge-text-color: var(--color-common-100);
+}
+
+.badge:where([data-style="fill"][data-preset="gray"]) {
+  --badge-background-color: var(--color-surface-neutral);
+  --badge-text-color: var(--color-label-neutral);
+}
+
+.badge:where([data-style="fill"][data-preset="green"]) {
+  --badge-background-color: var(--color-green-95);
+  --badge-text-color: var(--color-green-45);
+}
+
+.badge:where([data-style="fill"][data-preset="yellow"]) {
+  --badge-background-color: var(--color-yellow-95);
+  --badge-text-color: var(--color-yellow-45);
+}
+
+.badge:where([data-style="fill"][data-preset="orange"]) {
+  --badge-background-color: var(--color-orange-95);
+  --badge-text-color: var(--color-orange-55);
+}
+
+.badge:where([data-style="fill"][data-preset="red"]) {
+  --badge-background-color: var(--color-red-95);
+  --badge-text-color: var(--color-red-55);
+}
+
+.badge:where([data-style="outlined"][data-preset="primary"]) {
+  --badge-border-color: var(--color-primary-default);
+  --badge-text-color: var(--color-primary-default);
+}
+
+.badge:where([data-style="outlined"][data-preset="secondary"]) {
+  --badge-border-color: var(--color-border-standard-blue);
+  --badge-text-color: var(--color-primary-strong);
+}
+
+.badge:where([data-style="outlined"][data-preset="tertiary"]) {
+  --badge-border-color: var(--color-border-heavy);
+  --badge-text-color: var(--color-label-strong);
+}
+
+.badge:where([data-style="outlined"][data-preset="gray"]) {
+  --badge-border-color: var(--color-border-assistive);
+  --badge-text-color: var(--color-label-standard);
+}
+
+.badge:where([data-style="outlined"][data-preset="green"]) {
+  --badge-border-color: var(--color-green-45);
+  --badge-text-color: var(--color-green-45);
+}
+
+.badge:where([data-style="outlined"][data-preset="yellow"]) {
+  --badge-border-color: var(--color-yellow-60);
+  --badge-text-color: var(--color-yellow-45);
+}
+
+.badge:where([data-style="outlined"][data-preset="orange"]) {
+  --badge-border-color: var(--color-orange-70);
+  --badge-text-color: var(--color-orange-55);
+}
+
+.badge:where([data-style="outlined"][data-preset="red"]) {
+  --badge-border-color: var(--color-red-70);
+  --badge-text-color: var(--color-red-55);
+}
+
+.badge:where([data-style="count"][data-preset="primary"]) {
+  --badge-background-color: var(--color-primary-default);
+  --badge-text-color: var(--color-common-100);
+}
+
+.badge:where([data-style="count"][data-preset="gray"]) {
+  --badge-background-color: var(--color-cool-gray-90);
+  --badge-text-color: var(--color-label-standard);
+}
+
+.badge:where([data-style="dot"][data-preset="primary"]) {
+  --badge-background-color: var(--color-primary-default);
+}
+
+.badge:where([data-style="dot"][data-preset="secondary"]) {
+  --badge-background-color: var(--color-secondary-default);
+}
+
+.badge:where([data-style="dot"][data-preset="tertiary"]) {
+  --badge-background-color: var(--color-cool-gray-10);
+}
+
+.badge:where([data-style="dot"][data-preset="gray"]) {
+  --badge-background-color: var(--color-cool-gray-90);
+}
+
+.badge:where([data-style="dot"][data-preset="green"]) {
+  --badge-background-color: var(--color-green-45);
+}
+
+.badge:where([data-style="dot"][data-preset="yellow"]) {
+  --badge-background-color: var(--color-yellow-45);
+}
+
+.badge:where([data-style="dot"][data-preset="orange"]) {
+  --badge-background-color: var(--color-orange-55);
+}
+
+.badge:where([data-style="dot"][data-preset="red"]) {
+  --badge-background-color: var(--color-red-55);
+}

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

@@ -1,187 +1,2 @@
-:root {
-  --theme-badge-height-xsmall: var(--theme-size-small-1, 20px);
-  --theme-badge-height-small: var(--theme-size-small-2, 24px);
-  --theme-badge-padding-inline-xsmall: var(--spacing-padding-3, 6px);
-  --theme-badge-padding-inline-small: var(--spacing-padding-4, 8px);
-  --theme-badge-radius: var(--theme-radius-medium-1, 6px);
-  --theme-badge-font-family: var(--font-caption-medium-family, inherit);
-  --theme-badge-font-size: var(--font-caption-medium-size, 11px);
-  // 변경: Badge label font-weight는 디자인 규칙에 맞춰 400으로 고정한다.
-  --theme-badge-font-weight: 400;
-  --theme-badge-line-height: var(--font-caption-medium-line-height, 1.5);
-  --theme-badge-letter-spacing: var(--font-caption-medium-letter-spacing, 0);
-  --theme-badge-dot-size: var(--spacing-gap-3, 8px);
-}
-
-.badge {
-  --badge-height: var(--theme-badge-height-xsmall);
-  --badge-padding-inline: var(--theme-badge-padding-inline-xsmall);
-  --badge-gap: var(--spacing-gap-1, 4px);
-  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
-  --badge-fill-label-color: var(--color-common-100, #ffffff);
-  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
-  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
-  --badge-dot-color: var(--color-primary-default, #1a6aff);
-  --badge-dot-size: var(--theme-badge-dot-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--badge-gap);
-  height: var(--badge-height);
-  padding-inline: var(--badge-padding-inline);
-  padding-block: 0;
-  border-radius: var(--theme-badge-radius);
-  border: 0;
-  font-family: var(--theme-badge-font-family);
-  font-size: var(--theme-badge-font-size);
-  font-weight: var(--theme-badge-font-weight);
-  line-height: 1;
-  letter-spacing: var(--theme-badge-letter-spacing);
-  white-space: nowrap;
-  box-sizing: border-box;
-  margin: 0;
-  width: fit-content;
-}
-
-.badge:where([data-size="small"]) {
-  --badge-height: var(--theme-badge-height-small);
-  --badge-padding-inline: var(--theme-badge-padding-inline-small);
-}
-
-.badge:where([data-style="fill"]) {
-  background-color: var(--badge-fill-bg-color);
-  color: var(--badge-fill-label-color);
-  border-color: transparent;
-}
-
-.badge:where([data-style="outlined"]) {
-  background-color: var(--color-surface-static-white, #ffffff);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--badge-outline-border-color);
-  color: var(--badge-outline-label-color);
-}
-
-.badge:where([data-style="dot"]) {
-  padding: 0;
-  border-width: 0;
-  width: var(--badge-dot-size);
-  height: var(--badge-dot-size);
-  min-width: 0;
-  border-radius: var(--badge-dot-size);
-  background-color: transparent;
-}
-
-.badge-dot {
-  width: var(--badge-dot-size);
-  height: var(--badge-dot-size);
-  border-radius: 999px;
-  background-color: var(--badge-dot-color);
-  flex-shrink: 0;
-}
-
-.badge-label {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  line-height: 1;
-}
-
-.badge:where([data-style="dot"]) .badge-label {
-  font-size: 0;
-  line-height: 0;
-  height: 0;
-  width: 0;
-  overflow: hidden;
-}
-
-/* fill intent 별 배경/라벨 컬러 정의 */
-.badge:where([data-style="fill"][data-intent="primary"]) {
-  --badge-fill-bg-color: var(--color-primary-default, #1a6aff);
-  --badge-fill-label-color: var(--color-common-100, #ffffff);
-}
-
-.badge:where([data-style="fill"][data-intent="secondary"]) {
-  --badge-fill-bg-color: var(--color-secondary-default, #e5eeff);
-  --badge-fill-label-color: var(--color-primary-default, #1a6aff);
-}
-
-.badge:where([data-style="fill"][data-intent="tertiary"]) {
-  --badge-fill-bg-color: var(--color-cool-gray-10, #18191b);
-  --badge-fill-label-color: var(--color-common-100, #ffffff);
-}
-
-.badge:where([data-style="fill"][data-intent="gray"]) {
-  --badge-fill-bg-color: var(--color-surface-neutral, #f2f2f2);
-  --badge-fill-label-color: var(--color-label-neutral, #797e86);
-}
-
-.badge:where([data-style="fill"][data-intent="green"]) {
-  --badge-fill-bg-color: var(--color-green-95, #e9fcef);
-  --badge-fill-label-color: var(--color-green-45, #1dc956);
-}
-
-.badge:where([data-style="fill"][data-intent="yellow"]) {
-  --badge-fill-bg-color: var(--color-yellow-95, #fefae7);
-  --badge-fill-label-color: var(--color-yellow-45, #dab80b);
-}
-
-.badge:where([data-style="fill"][data-intent="orange"]) {
-  --badge-fill-bg-color: var(--color-orange-95, #ffeee5);
-  --badge-fill-label-color: var(--color-orange-55, #ff661a);
-}
-
-.badge:where([data-style="fill"][data-intent="red"]) {
-  --badge-fill-bg-color: var(--color-red-95, #fde8e7);
-  --badge-fill-label-color: var(--color-red-55, #f43625);
-}
-
-/* outlined intent 별 border/label 컬러 정의 */
-.badge:where([data-style="outlined"][data-intent="primary"]) {
-  --badge-outline-border-color: var(--color-primary-default, #1a6aff);
-  --badge-outline-label-color: var(--color-primary-default, #1a6aff);
-}
-
-.badge:where([data-style="outlined"][data-intent="secondary"]) {
-  --badge-outline-border-color: var(--color-border-standard-blue, #ccdeff);
-  --badge-outline-label-color: var(--color-primary-strong, #0050e5);
-}
-
-.badge:where([data-style="outlined"][data-intent="tertiary"]) {
-  --badge-outline-border-color: var(--color-border-heavy, #313235);
-  --badge-outline-label-color: var(--color-label-strong, #18191b);
-}
-
-.badge:where([data-style="outlined"][data-intent="gray"]) {
-  --badge-outline-border-color: var(--color-border-assistive, #e4e5e7);
-  --badge-outline-label-color: var(--color-label-standard, #3d3f43);
-}
-
-.badge:where([data-style="outlined"][data-intent="green"]) {
-  --badge-outline-border-color: var(--color-green-45, #1dc956);
-  --badge-outline-label-color: var(--color-green-45, #1dc956);
-}
-
-.badge:where([data-style="outlined"][data-intent="yellow"]) {
-  --badge-outline-border-color: var(--color-yellow-60, #f5d63d);
-  --badge-outline-label-color: var(--color-yellow-45, #dab80b);
-}
-
-.badge:where([data-style="outlined"][data-intent="orange"]) {
-  --badge-outline-border-color: var(--color-orange-70, #ff9966);
-  --badge-outline-label-color: var(--color-orange-55, #ff661a);
-}
-
-.badge:where([data-style="outlined"][data-intent="red"]) {
-  --badge-outline-border-color: var(--color-red-70, #f7796e);
-  --badge-outline-label-color: var(--color-red-55, #f43625);
-}
-
-/* dot tone 별 포인트 컬러 */
-.badge:where([data-style="dot"][data-tone="primary"]) {
-  --badge-dot-color: var(--color-primary-default, #1a6aff);
-}
-
-.badge:where([data-style="dot"][data-tone="feedback"]) {
-  --badge-dot-color: var(--color-red-55, #f43625);
-}
+@use "./variables.scss";
+@use "./badge.scss";

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

@@ -0,0 +1,41 @@
+/* Badge 기본 토큰 래핑 */
+:root {
+  --theme-badge-height-xsmall: var(--theme-size-small-1);
+  --theme-badge-height-small: var(--theme-size-small-2);
+  /* 변경: Figma 2421:619 기준 medium 배지 높이 32px를 추가한다. */
+  --theme-badge-height-medium: var(--theme-size-small-3);
+  --theme-badge-padding-inline-xsmall: var(--spacing-padding-3);
+  --theme-badge-padding-inline-small: var(--spacing-padding-4);
+  --theme-badge-padding-inline-medium: var(--spacing-padding-5);
+  --theme-badge-radius-xsmall: var(--theme-radius-medium-1);
+  --theme-badge-radius-small: var(--theme-radius-medium-1);
+  --theme-badge-radius-medium: var(--theme-radius-medium-3);
+  --theme-badge-font-family: var(--font-caption-medium-family);
+  --theme-badge-font-size-xsmall: var(--font-caption-medium-size);
+  --theme-badge-font-size-small: var(--font-caption-large-size);
+  --theme-badge-font-size-medium: var(--font-body-xsmall-size);
+  /* 변경: Figma badge size 축은 모두 Regular(400) 기준으로 고정한다. */
+  --theme-badge-font-weight-xsmall: 400;
+  --theme-badge-font-weight-small: 400;
+  --theme-badge-font-weight-medium: 400;
+  --theme-badge-line-height-xsmall: var(--font-caption-medium-line-height);
+  --theme-badge-line-height-small: var(--font-caption-large-line-height);
+  --theme-badge-line-height-medium: var(--font-body-xsmall-line-height);
+  --theme-badge-letter-spacing-xsmall: var(
+    --font-caption-medium-letter-spacing
+  );
+  --theme-badge-letter-spacing-small: var(--font-caption-large-letter-spacing);
+  --theme-badge-letter-spacing-medium: var(--font-body-xsmall-letter-spacing);
+  /* 변경: Count xsmall은 Figma 1620:844 기준으로 radius 10px를 사용한다. */
+  --theme-badge-count-radius-xsmall: var(--theme-radius-medium-4);
+  --theme-badge-dot-size: var(--spacing-gap-3);
+  --theme-badge-gap: var(--spacing-gap-1);
+  --theme-badge-fill-background-default: var(--color-primary-default);
+  --theme-badge-fill-text-default: var(--color-common-100);
+  --theme-badge-outlined-background-default: var(--color-surface-static-white);
+  --theme-badge-outlined-border-default: var(--color-primary-default);
+  --theme-badge-outlined-text-default: var(--color-primary-default);
+  --theme-badge-dot-background-default: var(--color-primary-default);
+  --theme-badge-count-background-default: var(--color-primary-default);
+  --theme-badge-count-text-default: var(--color-common-100);
+}

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

@@ -1,79 +1,5 @@
-import type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
-
-export const BADGE_SIZES = ["xsmall", "small"] as const;
-export const BADGE_STYLES = ["fill", "outlined", "dot"] as const;
-export const BADGE_INTENTS = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "gray",
-  "green",
-  "yellow",
-  "orange",
-  "red",
-] as const;
-export const BADGE_TONES = ["primary", "feedback"] as const;
-
-export type BadgeSize = (typeof BADGE_SIZES)[number];
-export type BadgeStyle = (typeof BADGE_STYLES)[number];
-export type BadgeIntent = (typeof BADGE_INTENTS)[number];
-export type BadgeTone = (typeof BADGE_TONES)[number];
-
-type NativeFigureProps = Omit<ComponentPropsWithoutRef<"figure">, "style">;
-
 /**
- * Badge Props; status/info label badge public props
- * @property {ReactNode} [children] 표시할 라벨이다. 생략하면 dot만 렌더링한다.
- * @property {"xsmall" | "small"} [size] Figma size 축이다.
- * @property {"fill" | "outlined" | "dot"} [style] badge 시각 스타일 축이다.
- * @property {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [intent] fill/outlined 변형의 색상 의도다.
- * @property {"primary" | "feedback"} [tone] dot 변형 전용 tone 축이다.
- * @property {CSSProperties} [inlineStyle] 원본 figure 요소에 적용할 inline style이다.
+ * Badge Types; barrel export 전용 파일
  */
-export interface BadgeProps extends Omit<NativeFigureProps, "children"> {
-  /**
-   * 표시할 라벨. 생략하면 dot 스타일만 렌더링된다.
-   */
-  children?: ReactNode;
-  /**
-   * Figma size 축 (xsmall/small)
-   */
-  size?: BadgeSize;
-  /**
-   * style 축 (fill/outlined/dot)
-   */
-  style?: BadgeStyle;
-  /**
-   * fill/outlined 변형의 intent 축. dot 스타일에는 tone을 사용한다.
-   */
-  intent?: BadgeIntent;
-  /**
-   * dot 변형 전용 tone 축(primary/feedback).
-   */
-  tone?: BadgeTone;
-  /**
-   * 원본 figure 요소에 적용할 인라인 스타일.
-   */
-  inlineStyle?: CSSProperties;
-}
-
-/**
- * Badge ClassName Options; badge root className 조합 입력값
- * @property {"xsmall" | "small"} size badge size 축이다.
- * @property {"fill" | "outlined" | "dot"} style badge style 축이다.
- * @property {string} [className] 외부 className override다.
- */
-export interface BadgeClassNameOptions {
-  /**
-   * badge size 축이다.
-   */
-  size: BadgeSize;
-  /**
-   * badge style 축이다.
-   */
-  style: BadgeStyle;
-  /**
-   * 외부 className override다.
-   */
-  className?: string;
-}
+export type * from "./options";
+export type * from "./props";

package/src/components/badge/types/options.ts

@@ -0,0 +1,25 @@
+/**
+ * Badge Types; size 옵션
+ * @typedef {"xsmall" | "small" | "medium"} BadgeSize
+ */
+export type BadgeSize = "xsmall" | "small" | "medium";
+
+/**
+ * Badge Types; style 옵션
+ * @typedef {"fill" | "outlined" | "dot" | "count"} BadgeStyle
+ */
+export type BadgeStyle = "fill" | "outlined" | "dot" | "count";
+
+/**
+ * Badge Types; preset 옵션
+ * @typedef {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} BadgePreset
+ */
+export type BadgePreset =
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "gray"
+  | "green"
+  | "yellow"
+  | "orange"
+  | "red";

package/src/components/badge/types/props.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties, ComponentPropsWithoutRef, ReactNode } from "react";
+import type { BadgePreset, BadgeSize, BadgeStyle } from "./options";
+
+type NativeFigureProps = Omit<ComponentPropsWithoutRef<"figure">, "style">;
+
+/**
+ * Badge Props; status/info label badge public props
+ * @property {ReactNode} [children] 표시할 라벨이다. 생략하면 dot만 렌더링한다.
+ * @property {"xsmall" | "small" | "medium"} [size] Figma size 축이다.
+ * @property {"fill" | "outlined" | "dot" | "count"} [style] badge 시각 스타일 축이다.
+ * @property {"primary" | "secondary" | "tertiary" | "gray" | "green" | "yellow" | "orange" | "red"} [preset] style에 대응하는 semantic 색상 preset이다.
+ * @property {string} [textColor] 라벨 텍스트 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {string} [backgroundColor] 배경 또는 dot 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {string} [borderColor] 외곽선 색상 CSS 값 또는 토큰 참조 문자열이다.
+ * @property {CSSProperties} [inlineStyle] 원본 figure 요소에 적용할 inline style이다.
+ */
+export interface BadgeProps extends Omit<NativeFigureProps, "children"> {
+  /**
+   * 표시할 라벨. 생략하면 dot 스타일만 렌더링된다.
+   */
+  children?: ReactNode;
+  /**
+   * Figma size 축 (xsmall/small/medium)
+   */
+  size?: BadgeSize;
+  /**
+   * style 축 (fill/outlined/dot/count)
+   */
+  style?: BadgeStyle;
+  /**
+   * style에 대응하는 semantic 색상 preset이다.
+   */
+  preset?: BadgePreset;
+  /**
+   * 라벨 텍스트 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-common-100)`
+   */
+  textColor?: string;
+  /**
+   * 배경 또는 dot 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-primary-default)`
+   */
+  backgroundColor?: string;
+  /**
+   * 외곽선 색상 CSS 값 또는 토큰 참조 문자열이다.
+   * 예: `var(--color-border-assistive)`
+   */
+  borderColor?: string;
+  /**
+   * 원본 figure 요소에 적용할 인라인 스타일.
+   */
+  inlineStyle?: CSSProperties;
+}

package/src/components/tab/index.tsx

@@ -3,11 +3,10 @@
  * @desc
  * - `TabRoot`: tabs value 상태를 관리하는 루트다.
  * - `TabList`, `TabTrigger`, `TabContent`: tabs anatomy 도구다.
- * - `TabContext`, `useTabContext`: tab 스타일 context util이다.
+ * - `TabContext`, `useTabContext`: tab 스타일 공유 context util이다.
  */
 import "./index.scss";
 
 export * from "./markup";
-export * from "./hooks";
 export type * from "./types";
 export * from "./utils";

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

@@ -0,0 +1,22 @@
+import clsx from "clsx";
+import { Slot } from "../../slot";
+import type { TabLabelProps } from "../types";
+
+/**
+ * Tab Label; trigger label className 고정 텍스트 슬롯
+ * @component
+ * @param {TabLabelProps} props
+ * @param {React.ElementType} [props.as] 렌더링할 요소. 기본값은 span.
+ * @param {React.ReactNode} [props.children] 라벨 콘텐츠.
+ * @param {string} [props.className] 라벨 className.
+ */
+const TabLabel = ({ className, ...restProps }: TabLabelProps) => {
+  return (
+    <Slot.Text
+      className={clsx("tab-trigger-label", className)}
+      {...restProps}
+    />
+  );
+};
+
+export { TabLabel };