@uniai-fe/uds-primitives 0.2.9 → 0.2.10

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";

package/src/index.tsx

@@ -14,6 +14,7 @@ export * from "./components/tab";
 export * from "./components/navigation";
 export * from "./components/dropdown";
 export * from "./components/pop-over";
+export * from "./components/tooltip";
 export * from "./components/drawer";
 export * from "./components/scrollbar";
 export * from "./components/calendar";