@uniai-fe/uds-primitives 0.3.59 → 0.4.0

package/src/components/select/markup/foundation/Selected.tsx

@@ -4,14 +4,7 @@ import clsx from "clsx";
 import { useEffect, useRef } from "react";
 import type { ReactNode } from "react";
 import type { SelectSelectedProps } from "../../types/trigger";
-
-const toInputText = (value?: ReactNode): string => {
-  if (typeof value === "string" || typeof value === "number") {
-    return String(value);
-  }
-
-  return "";
-};
+import { toSelectInputText } from "../../utils";
 
 /**
  * Select trigger value renderer; trigger 내부 label/value input 렌더링 컴포넌트
@@ -56,31 +49,38 @@ const SelectTriggerSelected = ({
   const labelInputRef = useRef<HTMLInputElement>(null);
 
   // 2) placeholder/label은 text input에 들어갈 수 있는 문자열로 정규화한다.
-  const resolvedPlaceholder = toInputText(placeholder);
+  const resolvedPlaceholder = toSelectInputText(placeholder);
   // 변경 설명: readOnly + customOptions 조합에서 valueText가 비어도 inputProps.value를 표시 문자열로 사용한다.
-  const resolvedInputValueText = toInputText(inputProps?.value as ReactNode);
+  const resolvedInputValueText = toSelectInputText(
+    inputProps?.value as ReactNode,
+  );
   const resolvedLabelText =
-    valueText || resolvedInputValueText || toInputText(label);
+    valueText || resolvedInputValueText || toSelectInputText(label);
   // 변경 설명: 색상 계약은 hidden value 또는 label value 중 지정된 source를 기준으로 계산한다.
   const resolvedHiddenValueText =
     typeof valueFieldValue === "string" || typeof valueFieldValue === "number"
       ? String(valueFieldValue)
       : "";
+  const hasReadonlyLabelNode =
+    readOnly &&
+    !isPlaceholder &&
+    label !== undefined &&
+    label !== null &&
+    !resolvedLabelText;
   const hasDisplayValue =
     valueStateSource === "hidden"
       ? resolvedHiddenValueText.length > 0
-      : resolvedLabelText.length > 0;
+      : resolvedLabelText.length > 0 || hasReadonlyLabelNode;
   const isLabelTextLike =
     typeof label === "string" || typeof label === "number";
   const shouldUsePlaceholderStyle = !hasDisplayValue;
-  // 변경 설명: readOnly에서 non-text label을 직접 렌더링하되, placeholder 상태일 때는 input placeholder 경로를 유지한다.
-  // custom mode처럼 valueText가 있는 경우에는 input 렌더 경로를 유지해 값 표시를 보장한다.
-  const shouldRenderReadonlyLabelNode =
-    readOnly &&
-    !isLabelTextLike &&
-    !isPlaceholder &&
-    !shouldUsePlaceholderStyle &&
-    !resolvedLabelText;
+  // 변경 설명: readOnly 경로는 input 대신 표시 노드를 직접 렌더링해 fit-content가 실제 콘텐츠 폭을 기준으로 계산되게 한다.
+  const shouldRenderReadonlyView = readOnly;
+  const readonlyContent = shouldUsePlaceholderStyle
+    ? resolvedPlaceholder
+    : !isLabelTextLike && !resolvedLabelText
+      ? label
+      : resolvedLabelText;
 
   // 3) custom mode 활성 시에만 label input focus를 부여한다.
   useEffect(() => {
@@ -96,15 +96,20 @@ const SelectTriggerSelected = ({
       className="select-value"
       data-has-value={hasDisplayValue ? "true" : "false"}
     >
-      {shouldRenderReadonlyLabelNode ? (
-        // 변경 설명: readonly + ReactNode label일 때는 문자열 변환 없이 label 노드를 직접 렌더링한다.
+      {shouldRenderReadonlyView ? (
+        // 변경 설명: readOnly 표시 경로는 text/ReactNode를 그대로 유지해 trigger width가 실제 표시 콘텐츠에 맞춰지도록 한다.
         <div
-          className={clsx("select-input-label", inputProps?.className, {
-            "select-input-label-placeholder": shouldUsePlaceholderStyle,
-          })}
+          className={clsx(
+            "select-input-label",
+            "select-input-label-readonly",
+            inputProps?.className,
+            {
+              "select-input-label-placeholder": shouldUsePlaceholderStyle,
+            },
+          )}
           data-has-value={hasDisplayValue ? "true" : "false"}
         >
-          {label}
+          {readonlyContent}
         </div>
       ) : (
         <input

package/src/components/select/markup/index.tsx

@@ -4,7 +4,7 @@ import { SelectTriggerBase, SelectTriggerSelected } from "./foundation";
 import SelectContainer from "./foundation/Container";
 
 /**
- * Selec; 컴포넌트 모듈
+ * Select; 컴포넌트 모듈
  * @namespace Select
  * - <Select.Default />: Select 기본
  * - <Select.Multiple />: Select multi select

package/src/components/select/markup/multiple/Multiple.tsx

@@ -11,6 +11,7 @@ import type { SelectDropdownOption } from "../../types/option";
 import { SelectMultipleSelectedChip } from "./SelectedChip";
 import { SelectTriggerBase, SelectTriggerSelected } from "../foundation";
 import { useSelectDropdownOpenState } from "../../hooks";
+import { renderCommaSeparatedSelectLabels } from "../../utils";
 import {
   isSameSelectedValue,
   isSameSelectedValueList,
@@ -26,8 +27,8 @@ const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
  * @param {string} [props.className] container className
  * @param {SelectMultipleTag[]} [props.tags] 선택된 tag 리스트
  * @param {SelectDropdownOption[]} [props.items] dropdown item 목록
- * @param {SelectCallbackParams} [props.onSelectOption] option 선택 액션 콜백
- * @param {SelectCallbackParams} [props.onSelectChange] 선택값 변경 콜백
+ * @param {SelectCallbackParams} [props.onSelectOption] option 선택 액션 콜백(legacy)
+ * @param {SelectCallbackParams} [props.onSelectChange] 권장 선택값 변경 콜백
  * @param {React.ReactNode} [props.displayLabel] fallback 라벨
  * @param {React.ReactNode} [props.placeholder] placeholder 텍스트
  * @param {"primary" | "secondary" | "table"} [props.priority="primary"] priority scale
@@ -45,6 +46,7 @@ const SELECT_MULTIPLE_ALL_OPTION_BASE_ID = "__select_multiple_all__";
  * @param {(open: boolean) => void} [props.onOpen] open 상태 변경 콜백
  * @param {boolean} [props.showSelectAllOption] dropdown 첫 번째에 "전체" 옵션 노출 여부
  * @param {React.ReactNode} [props.selectAllLabel="전체"] 전체 옵션 라벨
+ * @param {"chip" | "text"} [props.displayMode="chip"] 선택값 표시 방식
  */
 export function SelectMultipleTrigger<OptionData = unknown>({
   className,
@@ -67,6 +69,7 @@ export function SelectMultipleTrigger<OptionData = unknown>({
   onOpen,
   showSelectAllOption,
   selectAllLabel = "전체",
+  displayMode = "chip",
   triggerProps,
 }: SelectMultipleComponentProps<OptionData>) {
   /**
@@ -208,11 +211,22 @@ export function SelectMultipleTrigger<OptionData = unknown>({
    * - tags가 비어 있을 때 fallback label 용도로 사용한다.
    * - 외부 displayLabel 우선, 없으면 첫 선택 option label을 사용한다.
    */
+  const selectedOptions = useMemo(
+    () =>
+      resolvedSelectedValues
+        .map(selectedValue => optionMap.get(toSelectedValueKey(selectedValue)))
+        .filter((option): option is NonNullable<typeof option> =>
+          Boolean(option),
+        ),
+    [optionMap, resolvedSelectedValues],
+  );
   const resolvedDisplayLabel =
     displayLabel ??
-    (resolvedSelectedValues.length > 0
-      ? optionMap.get(toSelectedValueKey(resolvedSelectedValues[0]))?.label
-      : undefined);
+    (displayMode === "text"
+      ? renderCommaSeparatedSelectLabels(selectedOptions)
+      : selectedOptions.length > 0
+        ? selectedOptions[0]?.label
+        : undefined);
 
   /**
    * 9) tag 파생 계산
@@ -224,24 +238,23 @@ export function SelectMultipleTrigger<OptionData = unknown>({
       return tags;
     }
 
-    if (optionMap.size === 0 || resolvedSelectedValues.length === 0) {
+    if (selectedOptions.length === 0) {
       return [];
     }
 
-    return resolvedSelectedValues
-      .map(selectedValue => optionMap.get(toSelectedValueKey(selectedValue)))
-      .filter((option): option is NonNullable<typeof option> => Boolean(option))
-      .map(option => ({
-        label: option.label,
-        removable: false,
-      }));
-  }, [tags, resolvedSelectedValues, optionMap]);
+    return selectedOptions.map(option => ({
+      label: option.label,
+      removable: false,
+    }));
+  }, [tags, selectedOptions]);
 
   /**
    * 10) placeholder/label 표시 상태 계산
    * - label 값이 비어 있으면 placeholder 표시로 간주한다.
    */
   const hasTags = derivedTags.length > 0;
+  const shouldRenderTextDisplay =
+    displayMode === "text" && selectedOptions.length > 0;
 
   /**
    * 11) dropdown open 상태 관리
@@ -361,6 +374,9 @@ export function SelectMultipleTrigger<OptionData = unknown>({
       className={clsx("select-trigger-multiple", className)}
       block={resolvedBlock}
       width={width}
+      priority={priority}
+      size={resolvedSize}
+      state={disabled ? "disabled" : state}
     >
       <Dropdown.Root
         open={dropdownOpen}
@@ -382,7 +398,7 @@ export function SelectMultipleTrigger<OptionData = unknown>({
             as="div"
             {...triggerProps}
           >
-            {hasTags ? (
+            {hasTags && !shouldRenderTextDisplay ? (
               <div className="select-tags">
                 {visibleTags.map(
                   ({ label, suffix, removable, onRemove }, index) => (
@@ -422,6 +438,7 @@ export function SelectMultipleTrigger<OptionData = unknown>({
           {...dropdown?.containerProps}
           size={dropdown?.size ?? resolvedSize}
           width={dropdown?.width ?? "match"}
+          minWidth={dropdown?.minWidth}
         >
           <Dropdown.Menu.List {...dropdown?.menuListProps}>
             {hasOptions ? (

package/src/components/select/styles/select.scss

@@ -26,7 +26,10 @@
   --select-flex: 1 1 0%;
 }
 
-.select[data-width="full"],
+.select:where([data-width="full"]) {
+  --select-width: 100%;
+  --select-flex: 0 0 100%;
+}
 .select-block {
   --select-width: 100%;
   --select-flex: 0 0 100%;
@@ -177,13 +180,14 @@
     border-color: var(--select-primary-color-border-disabled);
     background-color: var(--select-primary-color-surface-disabled);
     cursor: default;
-    --select-icon-fill: var(--select-icon-color-disabled);
+    --select-icon-fill: var(--select-icon-color-readonly);
   }
 
   &:where([data-priority="secondary"]):where([data-readonly="true"]) {
-    border-color: transparent;
-    background-color: var(--select-color-surface-secondary-disabled);
+    border-color: var(--select-secondary-color-border-readonly);
+    background-color: var(--select-color-surface-secondary-readonly);
     cursor: default;
+    --select-icon-fill: var(--select-icon-color-readonly);
 
     &::after {
       background-color: var(--select-color-border-secondary-disabled);
@@ -195,7 +199,7 @@
     border-color: var(--select-table-border-readonly-color);
     background-color: var(--select-table-surface-readonly-color);
     cursor: not-allowed;
-    --select-icon-fill: var(--select-table-icon-color-disabled);
+    --select-icon-fill: var(--select-table-icon-color-readonly);
   }
 
   // &:not([data-priority="secondary"]):hover:not(:disabled) {
@@ -211,7 +215,7 @@
 
   &:where([data-priority="secondary"]):where([data-state="disabled"]),
   &:where([data-priority="secondary"]):disabled {
-    border-color: transparent;
+    border-color: var(--select-secondary-color-border-disabled);
     background-color: var(--select-color-surface-secondary-disabled);
 
     &::after {
@@ -297,6 +301,11 @@
   }
 }
 
+.select-input-label-readonly {
+  width: auto;
+  max-width: 100%;
+}
+
 .select-button:where(:not([data-state="disabled"]))
   .select-value[data-has-value="true"]
   .select-input-label {

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

@@ -120,6 +120,8 @@
   --select-secondary-color-text-readonly: var(
     --select-primary-color-text-readonly
   );
+  --select-secondary-color-border-disabled: var(--color-label-disabled);
+  --select-secondary-color-border-readonly: transparent;
   --select-secondary-color-placeholder: var(--color-label-alternative);
   --select-secondary-color-placeholder-disabled: var(--color-label-disabled);
   --select-secondary-color-placeholder-readonly: var(
@@ -129,10 +131,12 @@
   --select-color-surface-secondary-hover: var(--color-surface-static-cool-gray);
   --select-color-surface-secondary-active: var(--color-surface-standard);
   --select-color-surface-secondary-disabled: var(--color-surface-neutral);
+  --select-color-surface-secondary-readonly: transparent;
 
   --select-icon-color-default: var(--color-cool-gray-75);
   --select-icon-color-focused: var(--color-cool-gray-20);
   --select-icon-color-disabled: var(--color-cool-gray-85);
+  --select-icon-color-readonly: transparent;
 
   /* Multi select chip */
   --select-multiple-chip-gap: var(--spacing-gap-2);

package/src/components/select/types/multiple.ts

@@ -1,5 +1,24 @@
 import type { ReactNode } from "react";
 
+/**
+ * Select multiple display mode
+ * @typedef {"chip" | "text"} SelectMultipleDisplayMode
+ */
+export type SelectMultipleDisplayMode = "chip" | "text";
+
+/**
+ * Select multiple display props
+ * @property {SelectMultipleDisplayMode} [displayMode] 선택값 표시 방식
+ */
+export interface SelectMultipleDisplayProps {
+  /**
+   * 선택값 표시 방식
+   * - chip: 기존 chip list 표시
+   * - text: comma-separated text 표시
+   */
+  displayMode?: SelectMultipleDisplayMode;
+}
+
 /**
  * Select multiple chip props
  * @property {ReactNode} label 표시할 라벨

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

@@ -9,6 +9,7 @@ import type { UseFormRegisterReturn } from "react-hook-form";
 import type {
   DropdownContainerProps,
   DropdownMenuListProps,
+  DropdownPanelMinWidth,
   DropdownPanelWidth,
 } from "../../dropdown/types";
 import type { FormFieldWidth } from "../../form/types";
@@ -19,7 +20,7 @@ import type {
   SelectState,
   SelectTriggerButtonType,
 } from "./base";
-import type { SelectMultipleTag } from "./multiple";
+import type { SelectMultipleDisplayProps, SelectMultipleTag } from "./multiple";
 import type { SelectDropdownOption } from "./option";
 import type {
   SelectTriggerBaseFoundationProps,
@@ -192,8 +193,9 @@ export type SelectCallbackParams<
  * Select dropdown 확장 props
  * @property {SelectSize} [size] dropdown surface size 스케일
  * @property {DropdownPanelWidth} [width] dropdown panel width 옵션
+ * @property {DropdownPanelMinWidth} [minWidth] dropdown panel 최소 너비 옵션
  * @property {Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">} [rootProps] Dropdown.Root 전달 props
- * @property {Omit<DropdownContainerProps, "children" | "size" | "width">} [containerProps] Dropdown.Container 전달 props
+ * @property {Omit<DropdownContainerProps, "children" | "size" | "width" | "minWidth">} [containerProps] Dropdown.Container 전달 props
  * @property {DropdownMenuListProps} [menuListProps] Dropdown.Menu.List 전달 props
  * @property {ReactNode} [alt] option이 비어 있을 때 렌더링할 alternate 콘텐츠
  */
@@ -206,14 +208,21 @@ export interface SelectDropdownExtension {
    * dropdown panel width 옵션
    */
   width?: DropdownPanelWidth;
+  /**
+   * dropdown panel 최소 너비 옵션
+   */
+  minWidth?: DropdownPanelMinWidth;
   /**
    * Dropdown.Root 전달 props(제어 props 제외)
    */
   rootProps?: Omit<DropdownMenuProps, "open" | "defaultOpen" | "onOpenChange">;
   /**
-   * Dropdown.Container 전달 props(children/size/width 제외)
+   * Dropdown.Container 전달 props(children/size/width/minWidth 제외)
    */
-  containerProps?: Omit<DropdownContainerProps, "children" | "size" | "width">;
+  containerProps?: Omit<
+    DropdownContainerProps,
+    "children" | "size" | "width" | "minWidth"
+  >;
   /**
    * Dropdown.Menu.List 전달 props
    */
@@ -227,7 +236,7 @@ export interface SelectDropdownExtension {
 /**
  * Select dropdown 옵션 구성 props
  * @property {SelectDropdownOption<OptionData, DataOptionality>[]} [items] dropdown item 리스트(권장: items[].selected 초기값)
- * @property {SelectCallbackParams<OptionData, DataOptionality>} [onSelectOption] option 선택 액션 콜백
+ * @property {SelectCallbackParams<OptionData, DataOptionality>} [onSelectOption] option 선택 액션 콜백(legacy)
  * @property {SelectCallbackParams<OptionData, DataOptionality>} [onSelectChange] 선택값 변경 콜백
  * @property {SelectDropdownExtension} [dropdown] dropdown 확장 옵션
  * @example
@@ -244,6 +253,8 @@ export interface SelectDropdownConfigProps<
   items?: SelectDropdownOption<OptionData, DataOptionality>[];
   /**
    * option 선택 액션 콜백
+   * @deprecated
+   * legacy 호환용이며, 신규 계약은 `onSelectChange`를 권장한다.
    */
   onSelectOption?: SelectCallbackParams<OptionData, DataOptionality>;
   /**
@@ -447,6 +458,7 @@ export interface SelectMultipleAllOptionProps {
  * @property {(open: boolean) => void} [onOpen] open state change 콜백
  * @property {boolean} [showSelectAllOption] dropdown 첫 행에 "전체" 옵션 노출 여부
  * @property {ReactNode} [selectAllLabel] "전체" 옵션 라벨 커스터마이징
+ * @property {"chip" | "text"} [displayMode] 선택값 표시 방식
  * @example
  * type MultipleProps = SelectMultipleComponentProps<{ metaKey: number }>;
  * type RequiredChange = SelectCallbackParams<{ metaKey: number }, "required">;
@@ -458,4 +470,5 @@ export type SelectMultipleComponentProps<OptionData = unknown> =
     SelectDropdownConfigProps<OptionData> &
     SelectDropdownBehaviorProps &
     SelectWidthOption &
-    SelectMultipleAllOptionProps;
+    SelectMultipleAllOptionProps &
+    SelectMultipleDisplayProps;

package/src/components/select/utils/display.tsx

@@ -0,0 +1,41 @@
+import { Fragment, type ReactNode } from "react";
+
+import type { SelectDropdownOption } from "../types/option";
+
+/**
+ * Select Utils; 표시 텍스트 정규화 유틸
+ * @param {ReactNode} [value] 문자열화 가능한 표시값
+ * @returns {string} input/value 경로에서 사용할 문자열
+ * @example
+ * toSelectInputText("농장 A");
+ * toSelectInputText(12);
+ */
+export const toSelectInputText = (value?: ReactNode): string => {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+
+  return "";
+};
+
+/**
+ * Select Utils; comma-separated label 렌더 유틸
+ * @template OptionData
+ * @param {SelectDropdownOption<OptionData>[]} options 선택된 option 목록
+ * @returns {ReactNode} comma-separated label node
+ * @example
+ * renderCommaSeparatedSelectLabels([
+ *   { id: "a", value: "A", label: "1동" },
+ *   { id: "b", value: "B", label: "2동" },
+ * ]);
+ */
+export const renderCommaSeparatedSelectLabels = <OptionData,>(
+  options: SelectDropdownOption<OptionData>[],
+): ReactNode => {
+  return options.map((option, index) => (
+    <Fragment key={`${option.id}/selected`}>
+      {option.label}
+      {index < options.length - 1 ? ", " : null}
+    </Fragment>
+  ));
+};

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

@@ -1,4 +1 @@
-/**
- * TODO(select): 토큰 매핑과 클래스명 유틸을 구현한다.
- */
-export {};
+export { renderCommaSeparatedSelectLabels, toSelectInputText } from "./display";

package/src/components/slot/index.tsx

@@ -1,2 +1,9 @@
+/**
+ * Slot; polymorphic/text slot 카테고리 배럴
+ * @desc
+ * - `Slot.Base`: as 기반 polymorphic 마크업 래퍼다.
+ * - `Slot.Text`: 텍스트 children만 래핑하는 공통 슬롯이다.
+ * - `SlotComponentProps`, `SlotTextProps`: public type 계약이다.
+ */
 export * from "./markup";
 export type * from "./types";

package/src/components/slot/markup/index.tsx

@@ -1,6 +1,12 @@
 import SlotBase from "./Base";
 import SlotText from "./Text";
 
+/**
+ * Slot; polymorphic/text slot namespace
+ * @desc
+ * - `Slot.Base`: as 기반 polymorphic 마크업 래퍼다.
+ * - `Slot.Text`: 텍스트 children만 래핑하는 공통 슬롯이다.
+ */
 export const Slot = {
   Base: SlotBase,
   Text: SlotText,

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

@@ -1,4 +1,4 @@
 /**
- * TODO(spinner): 접근성/상태 계산 hook을 정의한다.
+ * Spinner Hooks; 현재 공개된 훅이 없는 placeholder 엔트리
  */
 export {};

package/src/components/spinner/index.tsx

@@ -1,4 +1,4 @@
 /**
- * spinner 카테고리 배럴 placeholder: 실제 구현은 markup/ 하위에 추가한다.
+ * Spinner; 현재 public export가 없는 placeholder 카테고리 배럴
  */
 export * from "./markup";

package/src/components/spinner/markup/index.tsx

@@ -1,4 +1,4 @@
 /**
- * TODO(spinner): SOT 및 사용자 제약에 따라 컴포넌트를 구현한다.
+ * Spinner Markup; 현재 공개된 컴포넌트가 없는 placeholder 엔트리
  */
 export {};

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

@@ -1,4 +1,4 @@
 /**
- * TODO(spinner): variant/slot 타입 정의를 작성한다.
+ * Spinner Types; 현재 공개된 타입이 없는 placeholder 엔트리
  */
 export {};

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

@@ -1,4 +1,4 @@
 /**
- * TODO(spinner): 토큰 매핑과 클래스명 유틸을 구현한다.
+ * Spinner Utils; 현재 공개된 유틸이 없는 placeholder 엔트리
  */
 export {};

package/src/components/tab/index.tsx

@@ -1,5 +1,9 @@
 /**
- * tab 카테고리 배럴: 실제 구현은 markup/ 하위에서 관리한다.
+ * Tab; line/fill tabs 카테고리 배럴
+ * @desc
+ * - `TabRoot`: tabs value 상태를 관리하는 루트다.
+ * - `TabList`, `TabTrigger`, `TabContent`: tabs anatomy 도구다.
+ * - `TabContext`, `useTabContext`: tab 스타일 context util이다.
  */
 import "./index.scss";
 

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

@@ -1,3 +1,11 @@
+/**
+ * Tab; line/fill tabs markup export 배럴
+ * @desc
+ * - `TabRoot`: tabs value 상태를 관리하는 루트다.
+ * - `TabList`: trigger 리스트 컨테이너다.
+ * - `TabTrigger`: 개별 탭 버튼이다.
+ * - `TabContent`: 선택된 탭 패널이다.
+ */
 export { TabRoot } from "./TabRoot";
 export { TabList } from "./TabList";
 export { TabTrigger } from "./TabTrigger";

package/src/components/table/index.tsx

@@ -1,5 +1,8 @@
 import "./index.scss";
 
+/**
+ * Table; foundation 조립과 container preset을 함께 제공하는 table 엔트리
+ */
 export * from "./markup";
 export * from "./hooks";
 export type * from "./types";

package/src/components/tooltip/index.tsx

@@ -1,3 +1,10 @@
+/**
+ * Tooltip; namespace 배럴 export
+ * @desc
+ * - `Tooltip.Root`, `Tooltip.Trigger`, `Tooltip.Message`: foundation 레이어
+ * - `Tooltip.Text`: 메시지 텍스트 wrapper
+ * - `Tooltip.Template`: info icon preset
+ */
 import "./index.scss";
 
 export * from "./markup";

package/src/components/tooltip/markup/index.tsx

@@ -5,12 +5,13 @@ import TooltipText from "./Text";
 import TooltipTrigger from "./Trigger";
 
 /**
- * Tooltip namespace.
- * - Message
- * - Text
- * - Trigger
- * - Root
- * - Template
+ * Tooltip; 컴포넌트 모듈
+ * @namespace Tooltip
+ * - `Tooltip.Message`
+ * - `Tooltip.Text`
+ * - `Tooltip.Trigger`
+ * - `Tooltip.Root`
+ * - `Tooltip.Template`
  */
 export const Tooltip = {
   Message: TooltipMessage,