@uniai-fe/uds-primitives 0.2.9 → 0.2.11

package/src/components/table/types/foundation.ts

@@ -0,0 +1,250 @@
+import type { ComponentPropsWithoutRef } from "react";
+
+export const TABLE_CELL_ALIGN_OPTIONS = ["left", "center", "right"] as const;
+export const TABLE_CELL_ALIGN_Y_OPTIONS = ["top", "center", "bottom"] as const;
+export const TABLE_CELL_PADDING_OPTIONS = ["default", "none"] as const;
+export const TABLE_SECTIONS = ["head", "body", "foot"] as const;
+export const TABLE_LAYOUT_OPTIONS = ["line", "grid"] as const;
+
+/**
+ * Table Types; Cell 정렬 값 타입
+ * @typedef {"left" | "center" | "right"} TableCellAlign
+ */
+export type TableCellAlign = (typeof TABLE_CELL_ALIGN_OPTIONS)[number];
+/**
+ * Table Types; Cell 세로 정렬 값 타입
+ * @typedef {"top" | "center" | "bottom"} TableCellAlignY
+ */
+export type TableCellAlignY = (typeof TABLE_CELL_ALIGN_Y_OPTIONS)[number];
+/**
+ * Table Types; Cell padding 제어 타입
+ * @typedef {"default" | "none"} TableCellPadding
+ */
+export type TableCellPadding = (typeof TABLE_CELL_PADDING_OPTIONS)[number];
+/**
+ * Table Types; section 식별 타입
+ * @typedef {"head" | "body" | "foot"} TableSection
+ */
+export type TableSection = (typeof TABLE_SECTIONS)[number];
+/**
+ * Table Types; layout 식별 타입
+ * @typedef {"line" | "grid"} TableLayout
+ */
+export type TableLayout = (typeof TABLE_LAYOUT_OPTIONS)[number];
+
+/**
+ * Table Types; Root props
+ * @property {string} [className] table 루트 className
+ * @property {"line" | "grid"} [layout] 테이블 스타일 축
+ * @property {React.ReactNode} [children] table 내부 콘텐츠
+ */
+export interface TableRootProps extends ComponentPropsWithoutRef<"table"> {
+  /**
+   * 테이블 스타일 축
+   */
+  layout?: TableLayout;
+}
+
+/**
+ * Table Types; Colgroup props
+ * @property {string} [className] colgroup className
+ * @property {React.ReactNode} [children] col 목록
+ */
+export interface TableColgroupProps extends ComponentPropsWithoutRef<"colgroup"> {}
+
+/**
+ * Table Types; Colgroup column item
+ * @property {string} key column 고유 key
+ * @property {number | string} [width] width 값
+ * @property {string} [dataKey] data-key attr 값
+ * @property {string} [className] col className
+ * @property {number} [span] col span 값
+ */
+export interface TableColgroupColumn {
+  /**
+   * column 고유 key
+   */
+  key: string;
+  /**
+   * width 값
+   */
+  width?: number | string;
+  /**
+   * data-key attr 값
+   */
+  dataKey?: string;
+  /**
+   * col className
+   */
+  className?: string;
+  /**
+   * col span 값
+   */
+  span?: number;
+}
+
+/**
+ * Table Types; Template column item
+ * @property {string} key column 고유 key
+ * @property {number | string} [width] width 값
+ * @property {string} [dataKey] data-key attr 값
+ * @property {string} [dataName] 헤더 식별자
+ * @property {React.ReactNode} [headContent] 헤더 셀 콘텐츠
+ * @property {React.ReactNode} [cellContents] ui-legacy 호환 헤더 콘텐츠
+ * @property {React.ReactNode} [cellChildren] 서비스 호환 헤더 콘텐츠
+ * @property {"left" | "center" | "right"} [align] 헤더 정렬
+ */
+export interface TableTemplateColumn extends TableColgroupColumn {
+  /**
+   * 헤더 식별자
+   */
+  dataName?: string;
+  /**
+   * 헤더 셀 콘텐츠
+   */
+  headContent?: React.ReactNode;
+  /**
+   * ui-legacy 호환 헤더 콘텐츠
+   */
+  cellContents?: React.ReactNode;
+  /**
+   * 서비스 호환 헤더 콘텐츠
+   */
+  cellChildren?: React.ReactNode;
+  /**
+   * 헤더 정렬
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; Template props
+ * @property {TableTemplateColumn[]} [columns] colgroup/head 자동 렌더링용 column 데이터
+ * @property {boolean} [isCustomBody] true면 body wrapper 없이 children을 직접 렌더링
+ * @property {"legacy-rem" | "raw"} [widthMode] number width 해석 방식
+ * @property {React.ReactNode} [footer] footer 노드
+ * @property {React.ReactNode} [children] body 콘텐츠
+ */
+export interface TableTemplateProps extends TableRootProps {
+  /**
+   * colgroup/head 자동 렌더링용 column 데이터
+   */
+  columns?: TableTemplateColumn[];
+  /**
+   * true면 body wrapper 없이 children을 직접 렌더링
+   */
+  isCustomBody?: boolean;
+  /**
+   * number width 해석 방식
+   */
+  widthMode?: "legacy-rem" | "raw";
+  /**
+   * footer 노드
+   */
+  footer?: React.ReactNode;
+}
+
+/**
+ * Table Types; Col props
+ * @property {string} [className] col className
+ */
+export interface TableColProps extends ComponentPropsWithoutRef<"col"> {}
+
+/**
+ * Table Types; Thead props
+ * @property {string} [className] thead className
+ * @property {React.ReactNode} [children] thead 내부 콘텐츠
+ */
+export interface TableHeadProps extends ComponentPropsWithoutRef<"thead"> {}
+
+/**
+ * Table Types; Tbody props
+ * @property {string} [className] tbody className
+ * @property {React.ReactNode} [children] tbody 내부 콘텐츠
+ */
+export interface TableBodyProps extends ComponentPropsWithoutRef<"tbody"> {}
+
+/**
+ * Table Types; Tfoot props
+ * @property {string} [className] tfoot className
+ * @property {React.ReactNode} [children] tfoot 내부 콘텐츠
+ */
+export interface TableFootProps extends ComponentPropsWithoutRef<"tfoot"> {}
+
+/**
+ * Table Types; Tr props
+ * @property {"head" | "body" | "foot"} [section] row 상위 섹션
+ * @property {string} [className] tr className
+ * @property {React.ReactNode} [children] row 내부 콘텐츠
+ */
+export interface TableRowProps extends ComponentPropsWithoutRef<"tr"> {
+  /**
+   * row 상위 섹션
+   */
+  section?: TableSection;
+}
+
+/**
+ * Table Types; Th props
+ * @property {string} [className] th className
+ * @property {React.ReactNode} [children] header cell 콘텐츠
+ */
+export interface TableThProps extends ComponentPropsWithoutRef<"th"> {}
+
+/**
+ * Table Types; Td props
+ * @property {string} [className] td className
+ * @property {React.ReactNode} [children] body cell 콘텐츠
+ */
+export interface TableTdProps extends ComponentPropsWithoutRef<"td"> {}
+
+/**
+ * Table Types; Cell content props
+ * @property {"head" | "body" | "foot"} [section] cell 상위 섹션
+ * @property {"left" | "center" | "right"} [alignX] cell 콘텐츠 가로 정렬
+ * @property {"top" | "center" | "bottom"} [alignY] cell 콘텐츠 세로 정렬
+ * @property {boolean} [noPadding] true면 cell 내부 padding 제거
+ * @property {"default" | "none"} [padding] cell 내부 padding 제어
+ * @property {"left" | "center" | "right"} [align] cell 콘텐츠 가로 정렬(호환 alias)
+ * @property {string} [className] cell content className
+ * @property {React.ReactNode} [children] cell 내부 콘텐츠
+ */
+export interface TableCellContentProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * cell 상위 섹션
+   */
+  section?: TableSection;
+  /**
+   * cell 콘텐츠 가로 정렬
+   */
+  alignX?: TableCellAlign;
+  /**
+   * cell 콘텐츠 세로 정렬
+   */
+  alignY?: TableCellAlignY;
+  /**
+   * true면 cell 내부 padding 제거
+   */
+  noPadding?: boolean;
+  /**
+   * cell 내부 padding 제어
+   */
+  padding?: TableCellPadding;
+  /**
+   * cell 콘텐츠 가로 정렬(호환 alias)
+   * @deprecated `alignX` 사용을 권장한다.
+   */
+  align?: TableCellAlign;
+}
+
+/**
+ * Table Types; HeadCell props (deprecated alias)
+ * @deprecated `TableThProps` 사용을 권장한다.
+ */
+export interface TableHeadCellProps extends TableThProps {}
+
+/**
+ * Table Types; Body Cell props (deprecated alias)
+ * @deprecated `TableTdProps` 사용을 권장한다.
+ */
+export interface TableCellProps extends TableTdProps {}

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

@@ -1,4 +1 @@
-/**
- * TODO(table): variant/slot 타입 정의를 작성한다.
- */
-export {};
+export * from "./foundation";

package/src/components/tooltip/img/info.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00004 6.7998C8.29459 6.7998 8.53324 7.03846 8.53324 7.33301V10.6663C8.53324 10.9609 8.29459 11.1995 8.00004 11.1995C7.70549 11.1995 7.46684 10.9609 7.46684 10.6663V7.33301C7.46684 7.03846 7.70549 6.7998 8.00004 6.7998Z" fill="#94989E"/>
+<path d="M8.00004 4.66634C8.36823 4.66634 8.66671 4.96482 8.66671 5.33301C8.66671 5.7012 8.36823 5.99967 8.00004 5.99967C7.63185 5.99967 7.33337 5.7012 7.33337 5.33301C7.33337 4.96482 7.63185 4.66634 8.00004 4.66634Z" fill="#94989E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00004 1.33301C11.6819 1.33301 14.6667 4.31778 14.6667 7.99967C14.6667 11.6816 11.6819 14.6663 8.00004 14.6663C4.31814 14.6663 1.33337 11.6816 1.33337 7.99967C1.33337 4.31778 4.31814 1.33301 8.00004 1.33301ZM8.00004 2.39941C4.90725 2.39941 2.39978 4.90688 2.39978 7.99967C2.39978 11.0925 4.90725 13.5999 8.00004 13.5999C11.0928 13.5999 13.6003 11.0925 13.6003 7.99967C13.6003 4.90688 11.0928 2.39941 8.00004 2.39941Z" fill="#94989E"/>
+</svg>

package/src/components/tooltip/img/information.svg

@@ -0,0 +1,9 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon/Information/Line">
+<g id="Union">
+<path d="M8 6.80013C8.29455 6.80013 8.5332 7.03878 8.5332 7.33333V10.6667C8.5332 10.9612 8.29455 11.1999 8 11.1999C7.70545 11.1999 7.4668 10.9612 7.4668 10.6667V7.33333C7.4668 7.03878 7.70545 6.80013 8 6.80013Z" fill="var(--fill-0, #94989E)"/>
+<path d="M8 4.66667C8.36819 4.66667 8.66667 4.96514 8.66667 5.33333C8.66667 5.70152 8.36819 6 8 6C7.63181 6 7.33333 5.70152 7.33333 5.33333C7.33333 4.96514 7.63181 4.66667 8 4.66667Z" fill="var(--fill-0, #94989E)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 1.33333C11.6819 1.33333 14.6667 4.3181 14.6667 8C14.6667 11.6819 11.6819 14.6667 8 14.6667C4.3181 14.6667 1.33333 11.6819 1.33333 8C1.33333 4.3181 4.3181 1.33333 8 1.33333ZM8 2.39974C4.90721 2.39974 2.39974 4.90721 2.39974 8C2.39974 11.0928 4.90721 13.6003 8 13.6003C11.0928 13.6003 13.6003 11.0928 13.6003 8C13.6003 4.90721 11.0928 2.39974 8 2.39974Z" fill="var(--fill-0, #94989E)"/>
+</g>
+</g>
+</svg>

package/src/components/tooltip/index.scss

@@ -0,0 +1 @@
+@use "./styles/index.scss";

package/src/components/tooltip/index.tsx

@@ -0,0 +1,4 @@
+import "./index.scss";
+
+export * from "./markup";
+export type * from "./types";

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

@@ -0,0 +1,70 @@
+"use client";
+
+import clsx from "clsx";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef } from "react";
+import type { TooltipMessageProps } from "../types";
+
+/**
+ * Tooltip Message.
+ * @component
+ * @param {TooltipMessageProps} props Message props
+ * @param {React.ReactNode} props.children Tooltip 메시지 콘텐츠
+ * @param {string} [props.className] Content className
+ * @param {boolean} [props.withPortal=true] Portal 사용 여부
+ * @param {HTMLElement | null} [props.portalContainer] Portal 컨테이너
+ * @param {boolean} [props.withArrow=true] Arrow 렌더링 여부
+ * @param {string} [props.arrowClassName] Arrow className
+ * @example
+ * <Tooltip.Message sideOffset={8}>툴팁 메시지</Tooltip.Message>
+ */
+const TooltipMessage = forwardRef<HTMLDivElement, TooltipMessageProps>(
+  (
+    {
+      children,
+      className,
+      withPortal = true,
+      portalContainer,
+      withArrow = true,
+      arrowClassName,
+      arrowProps,
+      sideOffset = 6,
+      ...restProps
+    },
+    ref,
+  ) => {
+    // 변경: Message는 Content+Arrow를 기본으로 제공해 호출부에서 반복 마크업을 줄인다.
+    const contentNode = (
+      <TooltipPrimitive.Content
+        ref={ref}
+        className={clsx("tooltip-message", className)}
+        sideOffset={sideOffset}
+        {...restProps}
+      >
+        <span className="tooltip-message-text">{children}</span>
+        {withArrow ? (
+          <TooltipPrimitive.Arrow
+            className={clsx("tooltip-message-arrow", arrowClassName)}
+            width={7}
+            height={9}
+            {...arrowProps}
+          />
+        ) : null}
+      </TooltipPrimitive.Content>
+    );
+
+    if (!withPortal) {
+      return contentNode;
+    }
+
+    return (
+      <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+        {contentNode}
+      </TooltipPrimitive.Portal>
+    );
+  },
+);
+
+TooltipMessage.displayName = "TooltipMessage";
+
+export default TooltipMessage;

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

@@ -0,0 +1,32 @@
+"use client";
+
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import type { TooltipRootProps } from "../types";
+
+/**
+ * Tooltip Root.
+ * @component
+ * @param {TooltipRootProps} props Root props
+ * @param {React.ReactNode} props.children Tooltip 하위 노드
+ * @param {TooltipProviderProps} [props.providerProps] Provider 전달 props
+ * @param {boolean} [props.open] 제어형 open 상태
+ * @param {boolean} [props.defaultOpen] 비제어 초기 open 상태
+ * @param {(open: boolean) => void} [props.onOpenChange] open 상태 변경 핸들러
+ * @example
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger asChild><button>trigger</button></Tooltip.Trigger>
+ *   <Tooltip.Message>메시지</Tooltip.Message>
+ * </Tooltip.Root>
+ */
+export default function TooltipRoot({
+  children,
+  providerProps,
+  ...restProps
+}: TooltipRootProps) {
+  // 변경: 기본 hover delay를 0으로 고정해 즉시 표시를 기본 동작으로 제공한다.
+  return (
+    <TooltipPrimitive.Provider delayDuration={0} {...providerProps}>
+      <TooltipPrimitive.Root {...restProps}>{children}</TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}

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

@@ -0,0 +1,46 @@
+"use client";
+
+// 변경: Tooltip 기본 아이콘 에셋을 info.svg로 교체한다.
+import InformationIcon from "../img/info.svg";
+import type { TooltipTemplateProps } from "../types";
+import TooltipMessage from "./Message";
+import TooltipRoot from "./Root";
+import TooltipTrigger from "./Trigger";
+
+/**
+ * Tooltip Template.
+ * @component
+ * @param {TooltipTemplateProps} props Template props
+ * @param {React.ReactNode} props.message Tooltip 메시지 콘텐츠
+ * @param {string} [props.triggerAriaLabel="정보 툴팁"] 기본 Trigger aria-label
+ * @param {TooltipRootProps} [props.rootProps] Tooltip.Root 전달 props
+ * @param {TooltipTriggerProps} [props.triggerProps] Tooltip.Trigger 전달 props
+ * @param {TooltipMessageProps} [props.messageProps] Tooltip.Message 전달 props
+ * @example
+ * <Tooltip.Template message="사육 공간을 제외한 나머지 공간의 크기 입니다." />
+ */
+const TooltipTemplate = ({
+  message,
+  triggerAriaLabel = "정보 툴팁",
+  rootProps,
+  triggerProps,
+  messageProps,
+}: TooltipTemplateProps) => {
+  return (
+    <TooltipRoot {...rootProps}>
+      <TooltipTrigger asChild {...triggerProps}>
+        {/* 변경: Template은 Figma 기준 정보 아이콘 trigger를 기본 제공한다. */}
+        <button
+          type="button"
+          aria-label={triggerAriaLabel}
+          className="tooltip-template-trigger"
+        >
+          <InformationIcon aria-hidden />
+        </button>
+      </TooltipTrigger>
+      <TooltipMessage {...messageProps}>{message}</TooltipMessage>
+    </TooltipRoot>
+  );
+};
+
+export default TooltipTemplate;

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

@@ -0,0 +1,32 @@
+"use client";
+
+import clsx from "clsx";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef } from "react";
+import type { TooltipTriggerProps } from "../types";
+
+/**
+ * Tooltip Trigger.
+ * @component
+ * @param {TooltipTriggerProps} props Trigger props
+ * @param {React.ReactNode} [props.children] Trigger 콘텐츠
+ * @param {boolean} [props.asChild] child를 trigger로 사용할지 여부
+ * @param {string} [props.className] Trigger className
+ * @example
+ * <Tooltip.Trigger asChild><button>trigger</button></Tooltip.Trigger>
+ */
+const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(
+  ({ children, className, ...restProps }, ref) => (
+    <TooltipPrimitive.Trigger
+      ref={ref}
+      className={clsx("tooltip-trigger", className)}
+      {...restProps}
+    >
+      {children}
+    </TooltipPrimitive.Trigger>
+  ),
+);
+
+TooltipTrigger.displayName = "TooltipTrigger";
+
+export default TooltipTrigger;

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

@@ -0,0 +1,18 @@
+import TooltipMessage from "./Message";
+import TooltipRoot from "./Root";
+import TooltipTemplate from "./Template";
+import TooltipTrigger from "./Trigger";
+
+/**
+ * Tooltip namespace.
+ * - Message
+ * - Trigger
+ * - Root
+ * - Template
+ */
+export const Tooltip = {
+  Message: TooltipMessage,
+  Trigger: TooltipTrigger,
+  Root: TooltipRoot,
+  Template: TooltipTemplate,
+};

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

@@ -0,0 +1,2 @@
+@use "./variables.scss";
+@use "./tooltip.scss";

package/src/components/tooltip/styles/tooltip.scss

@@ -0,0 +1,47 @@
+.tooltip-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-template-trigger {
+  display: inline-flex;
+  width: var(--tooltip-trigger-icon-size);
+  height: var(--tooltip-trigger-icon-size);
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+  color: var(--tooltip-trigger-icon-color);
+  cursor: pointer;
+}
+
+.tooltip-template-trigger svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.tooltip-message {
+  max-width: min(20rem, calc(100vw - 1.5rem));
+  box-sizing: border-box;
+  border-radius: var(--tooltip-message-radius);
+  background-color: var(--tooltip-message-background);
+  padding: var(--tooltip-message-padding-block)
+    var(--tooltip-message-padding-inline);
+}
+
+.tooltip-message-text {
+  display: block;
+  color: var(--tooltip-message-foreground);
+  font-size: var(--tooltip-message-font-size);
+  line-height: var(--tooltip-message-line-height);
+  letter-spacing: var(--tooltip-message-letter-spacing);
+  font-weight: var(--tooltip-message-font-weight);
+  white-space: normal;
+}
+
+.tooltip-message-arrow {
+  fill: var(--tooltip-message-background);
+}

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

@@ -0,0 +1,14 @@
+:root {
+  --tooltip-message-background: var(--color-cool-gray-20);
+  --tooltip-message-foreground: var(--color-common-100);
+  --tooltip-message-radius: var(--theme-radius-medium-3);
+  --tooltip-message-padding-inline: var(--spacing-padding-5);
+  --tooltip-message-padding-block: var(--spacing-padding-4);
+  --tooltip-message-font-size: var(--font-caption-large-size);
+  --tooltip-message-line-height: var(--font-caption-large-line-height);
+  --tooltip-message-letter-spacing: var(--font-caption-large-letter-spacing);
+  --tooltip-message-font-weight: 400;
+
+  --tooltip-trigger-icon-size: 16px;
+  --tooltip-trigger-icon-color: var(--color-label-alternative);
+}

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

@@ -0,0 +1 @@
+export type * from "./props";

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

@@ -0,0 +1,118 @@
+import type {
+  TooltipArrowProps as RadixTooltipArrowProps,
+  TooltipContentProps as RadixTooltipContentProps,
+  TooltipProps as RadixTooltipProps,
+  TooltipProviderProps as RadixTooltipProviderProps,
+  TooltipTriggerProps as RadixTooltipTriggerProps,
+} from "@radix-ui/react-tooltip";
+import type { ReactNode } from "react";
+
+/**
+ * Tooltip Root props.
+ * @property {ReactNode} children Tooltip 하위 노드
+ * @property {RadixTooltipProviderProps} [providerProps] Radix Tooltip Provider 전달 props
+ * @see Radix TooltipProps
+ */
+export interface TooltipRootProps extends RadixTooltipProps {
+  /**
+   * Tooltip 하위 노드
+   */
+  children: ReactNode;
+  /**
+   * Radix Tooltip Provider 전달 props
+   */
+  providerProps?: RadixTooltipProviderProps;
+}
+
+/**
+ * Tooltip Trigger props.
+ * @property {ReactNode} [children] Trigger 내부 콘텐츠
+ * @property {string} [className] Trigger className
+ * @see Radix TooltipTriggerProps
+ */
+export interface TooltipTriggerProps extends RadixTooltipTriggerProps {
+  /**
+   * Trigger 내부 콘텐츠
+   */
+  children?: ReactNode;
+  /**
+   * Trigger className
+   */
+  className?: string;
+}
+
+/**
+ * Tooltip Message props.
+ * @property {ReactNode} children Tooltip 본문 콘텐츠
+ * @property {string} [className] Content className
+ * @property {boolean} [withPortal=true] Portal 사용 여부
+ * @property {HTMLElement | null} [portalContainer] Portal 컨테이너
+ * @property {boolean} [withArrow=true] Arrow 렌더링 여부
+ * @property {string} [arrowClassName] Arrow className
+ * @property {RadixTooltipArrowProps} [arrowProps] Arrow 전달 props
+ * @see Radix TooltipContentProps
+ */
+export interface TooltipMessageProps extends Omit<
+  RadixTooltipContentProps,
+  "children"
+> {
+  /**
+   * Tooltip 본문 콘텐츠
+   */
+  children: ReactNode;
+  /**
+   * Content className
+   */
+  className?: string;
+  /**
+   * Portal 사용 여부
+   */
+  withPortal?: boolean;
+  /**
+   * Portal 컨테이너
+   */
+  portalContainer?: HTMLElement | null;
+  /**
+   * Arrow 렌더링 여부
+   */
+  withArrow?: boolean;
+  /**
+   * Arrow className
+   */
+  arrowClassName?: string;
+  /**
+   * Arrow 전달 props
+   */
+  arrowProps?: RadixTooltipArrowProps;
+}
+
+/**
+ * Tooltip Template props.
+ * @property {ReactNode} message Tooltip 메시지 콘텐츠
+ * @property {string} [triggerAriaLabel="정보 툴팁"] 기본 Trigger aria-label
+ * @property {TooltipRootProps} [rootProps] Tooltip.Root 전달 props
+ * @property {TooltipTriggerProps} [triggerProps] Tooltip.Trigger 전달 props
+ * @property {TooltipMessageProps} [messageProps] Tooltip.Message 전달 props
+ */
+export interface TooltipTemplateProps {
+  /**
+   * Tooltip 메시지 콘텐츠
+   */
+  message: ReactNode;
+  /**
+   * 기본 Trigger aria-label
+   */
+  triggerAriaLabel?: string;
+  /**
+   * Tooltip.Root 전달 props
+   */
+  rootProps?: Omit<TooltipRootProps, "children">;
+  /**
+   * Tooltip.Trigger 전달 props
+   */
+  triggerProps?: Omit<TooltipTriggerProps, "children" | "asChild">;
+  /**
+   * Tooltip.Message 전달 props
+   */
+  messageProps?: Omit<TooltipMessageProps, "children">;
+}

package/src/index.scss

@@ -7,6 +7,7 @@
 @use "./components/drawer";
 @use "./components/dropdown";
 @use "./components/pop-over";
+@use "./components/tooltip";
 @use "./components/label";
 @use "./components/input";
 @use "./components/select";