podo-ui 0.5.2 → 0.6.0

package/dist/react/atom/tooltip.d.ts

@@ -1,15 +1,19 @@
 import React from 'react';
-export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-export type TooltipTheme = 'default' | 'info' | 'light';
+export type TooltipVariant = 'default' | 'info';
+export type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
 export interface TooltipProps {
-    children: React.ReactElement;
+    /** Trigger element (button, icon, etc.) */
+    children: React.ReactNode;
+    /** Tooltip content (can include any JSX) */
     content: React.ReactNode;
-    placement?: TooltipPlacement;
-    theme?: TooltipTheme;
-    trigger?: 'hover' | 'focus' | 'both';
-    delay?: number;
+    /** Tooltip visual variant */
+    variant?: TooltipVariant;
+    /** Arrow position */
+    position?: TooltipPosition;
+    /** Distance from trigger element in pixels */
+    offset?: number;
+    /** Additional CSS class */
     className?: string;
 }
-declare const Tooltip: React.FC<TooltipProps>;
-export default Tooltip;
+export default function Tooltip({ children, content, variant, position, offset, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/react/atom/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../react/atom/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GACxB,KAAK,GACL,WAAW,GACX,SAAS,GACT,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,OAAO,GACP,aAAa,GACb,WAAW,CAAC;AAEhB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAExD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA0JnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../react/atom/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,CAAC;AAEhD,MAAM,MAAM,eAAe,GACvB,KAAK,GACL,SAAS,GACT,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,MAAM,GACN,SAAS,GACT,YAAY,GACZ,OAAO,GACP,UAAU,GACV,aAAa,CAAC;AAElB,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,QAAgB,EAChB,MAAU,EACV,SAAc,GACf,EAAE,YAAY,2CA+Bd"}

package/dist/react/atom/tooltip.js

@@ -1,122 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
-const Tooltip = ({ children, content, placement = 'top', theme = 'default', trigger = 'hover', delay = 0, className = '', }) => {
-    const [visible, setVisible] = useState(false);
-    const [position, setPosition] = useState({ top: 0, left: 0 });
-    const wrapperRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const timeoutRef = useRef(null);
-    const calculatePosition = () => {
-        if (!wrapperRef.current || !tooltipRef.current)
-            return;
-        const wrapperRect = wrapperRef.current.getBoundingClientRect();
-        const tooltipRect = tooltipRef.current.getBoundingClientRect();
-        const gap = 8; // 화살표 높이 + 여유 공간
-        let top = 0;
-        let left = 0;
-        switch (placement) {
-            case 'top':
-                top = -tooltipRect.height - gap;
-                left = (wrapperRect.width - tooltipRect.width) / 2;
-                break;
-            case 'top-start':
-                top = -tooltipRect.height - gap;
-                left = 0;
-                break;
-            case 'top-end':
-                top = -tooltipRect.height - gap;
-                left = wrapperRect.width - tooltipRect.width;
-                break;
-            case 'bottom':
-                top = wrapperRect.height + gap;
-                left = (wrapperRect.width - tooltipRect.width) / 2;
-                break;
-            case 'bottom-start':
-                top = wrapperRect.height + gap;
-                left = 0;
-                break;
-            case 'bottom-end':
-                top = wrapperRect.height + gap;
-                left = wrapperRect.width - tooltipRect.width;
-                break;
-            case 'left':
-                top = (wrapperRect.height - tooltipRect.height) / 2;
-                left = -tooltipRect.width - gap;
-                break;
-            case 'left-start':
-                top = 0;
-                left = -tooltipRect.width - gap;
-                break;
-            case 'left-end':
-                top = wrapperRect.height - tooltipRect.height;
-                left = -tooltipRect.width - gap;
-                break;
-            case 'right':
-                top = (wrapperRect.height - tooltipRect.height) / 2;
-                left = wrapperRect.width + gap;
-                break;
-            case 'right-start':
-                top = 0;
-                left = wrapperRect.width + gap;
-                break;
-            case 'right-end':
-                top = wrapperRect.height - tooltipRect.height;
-                left = wrapperRect.width + gap;
-                break;
-        }
-        setPosition({ top, left });
-    };
-    const showTooltip = () => {
-        if (delay > 0) {
-            timeoutRef.current = setTimeout(() => {
-                setVisible(true);
-            }, delay);
-        }
-        else {
-            setVisible(true);
-        }
-    };
-    const hideTooltip = () => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = null;
-        }
-        setVisible(false);
-    };
-    useEffect(() => {
-        if (visible) {
-            calculatePosition();
-        }
-    }, [visible]);
-    useEffect(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const tooltipClasses = [
-        'tooltip',
-        placement,
-        theme !== 'default' && theme,
+import { useState } from 'react';
+import styles from './tooltip.module.scss';
+export default function Tooltip({ children, content, variant = 'default', position = 'top', offset = 8, className = '', }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const variantClass = variant === 'default' ? styles.variantDefault : styles.variantInfo;
+    const tooltipClassNames = [
+        styles.tooltipBox,
+        variantClass,
+        styles[position],
         className,
     ]
         .filter(Boolean)
         .join(' ');
-    const handlers = {};
-    if (trigger === 'hover' || trigger === 'both') {
-        handlers.onMouseEnter = showTooltip;
-        handlers.onMouseLeave = hideTooltip;
-    }
-    if (trigger === 'focus' || trigger === 'both') {
-        handlers.onFocus = showTooltip;
-        handlers.onBlur = hideTooltip;
-    }
-    return (_jsxs("div", { className: "tooltip-wrapper", ref: wrapperRef, ...handlers, children: [children, _jsx("div", { ref: tooltipRef, className: tooltipClasses, style: {
-                    top: `${position.top}px`,
-                    left: `${position.left}px`,
-                    opacity: visible ? 1 : 0,
-                    visibility: visible ? 'visible' : 'hidden',
-                }, children: content })] }));
-};
-export default Tooltip;
+    return (_jsxs("div", { className: styles.tooltipWrapper, onMouseEnter: () => setIsVisible(true), onMouseLeave: () => setIsVisible(false), children: [children, isVisible && (_jsx("div", { className: tooltipClassNames, style: { '--tooltip-offset': `${offset}px` }, children: content }))] }));
+}

package/dist/react/atom/tooltip.module.scss

@@ -0,0 +1,227 @@
+@use '../../../mixin.scss' as *;
+
+.tooltipWrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltipBox {
+  position: absolute;
+  padding: s(2) s(4);
+  border-radius: r(3);
+  font-family: 'Pretendard', -apple-system, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22.4px;
+  white-space: nowrap;
+  z-index: 1000;
+
+  // Default variant
+  &.variantDefault {
+    background-color: color(default-deep);
+    color: color(text-action-reverse) !important;
+  }
+
+  // Info variant
+  &.variantInfo {
+    background-color: color(info);
+    color: color(text-action-reverse) !important;
+  }
+
+  // Arrow styles
+  &::before {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    transform-origin: center;
+  }
+
+  // Top positions
+  &.top,
+  &.topLeft,
+  &.topRight {
+    bottom: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      bottom: -6px;
+      border-radius: 0 0 2px 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.top {
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &.topLeft {
+    left: 0;
+
+    &::before {
+      left: 8px;
+    }
+  }
+
+  &.topRight {
+    right: 0;
+
+    &::before {
+      right: 8px;
+    }
+  }
+
+  // Bottom positions
+  &.bottom,
+  &.bottomLeft,
+  &.bottomRight {
+    top: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      top: -6px;
+      border-radius: 2px 0 0 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.bottom {
+    left: 50%;
+    transform: translateX(-50%);
+
+    &::before {
+      left: 50%;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &.bottomLeft {
+    left: 0;
+
+    &::before {
+      left: 8px;
+    }
+  }
+
+  &.bottomRight {
+    right: 0;
+
+    &::before {
+      right: 8px;
+    }
+  }
+
+  // Left positions
+  &.left,
+  &.leftTop,
+  &.leftBottom {
+    right: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      right: -6px;
+      border-radius: 0 2px 0 0;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.left {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before {
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  &.leftTop {
+    top: 0;
+
+    &::before {
+      top: 8px;
+    }
+  }
+
+  &.leftBottom {
+    bottom: 0;
+
+    &::before {
+      bottom: 8px;
+    }
+  }
+
+  // Right positions
+  &.right,
+  &.rightTop,
+  &.rightBottom {
+    left: calc(100% + var(--tooltip-offset, 8px));
+
+    &::before {
+      left: -6px;
+      border-radius: 0 0 0 2px;
+      transform: rotate(45deg);
+    }
+
+    &.variantDefault::before {
+      background-color: color(default-deep);
+    }
+
+    &.variantInfo::before {
+      background-color: color(info);
+    }
+  }
+
+  &.right {
+    top: 50%;
+    transform: translateY(-50%);
+
+    &::before {
+      top: 50%;
+      transform: translateY(-50%) rotate(45deg);
+    }
+  }
+
+  &.rightTop {
+    top: 0;
+
+    &::before {
+      top: 8px;
+    }
+  }
+
+  &.rightBottom {
+    bottom: 0;
+
+    &::before {
+      bottom: 8px;
+    }
+  }
+}

package/global.scss

@@ -43,7 +43,6 @@
   Atom
 */
 @forward './scss/atom/chip';
-@forward './scss/atom/tooltip';
 
 /*
   Form

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

package/scss/atom/tooltip.scss

@@ -1,273 +0,0 @@
-@use '../color/function' as *;
-@use '../layout/bg-elevation' as *;
-
-.tooltip {
-  position: absolute;
-  z-index: 1000;
-  padding: 4px 8px;
-  font-family: var(--font-family);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.6;
-  border-radius: 4px;
-  white-space: nowrap;
-  box-shadow: shadow(2);
-  pointer-events: none;
-
-  // Default theme (dark gray)
-  background-color: color('default-deep');
-  color: color('default-deep-reverse');
-
-  // Arrow (화살표)
-  &::before {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border: 4px solid transparent;
-  }
-
-  // Theme: info (blue)
-  &.info {
-    background-color: color('info');
-    color: color('info-reverse');
-  }
-
-  // Theme: light (white with border)
-  &.light {
-    background-color: color('bg');
-    color: color('text-body');
-    border: 1px solid color('border');
-    box-shadow: shadow(1);
-  }
-
-  // Direction: top
-  &.top {
-    &::before {
-      bottom: -8px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-top-color: color('default-deep');
-      border-bottom: none;
-    }
-
-    &.info::before {
-      border-top-color: color('info');
-    }
-
-    &.light::before {
-      border-top-color: color('border');
-    }
-  }
-
-  &.top-start {
-    &::before {
-      bottom: -8px;
-      left: 12px;
-      border-top-color: color('default-deep');
-      border-bottom: none;
-    }
-
-    &.info::before {
-      border-top-color: color('info');
-    }
-
-    &.light::before {
-      border-top-color: color('border');
-    }
-  }
-
-  &.top-end {
-    &::before {
-      bottom: -8px;
-      right: 12px;
-      border-top-color: color('default-deep');
-      border-bottom: none;
-    }
-
-    &.info::before {
-      border-top-color: color('info');
-    }
-
-    &.light::before {
-      border-top-color: color('border');
-    }
-  }
-
-  // Direction: bottom
-  &.bottom {
-    &::before {
-      top: -8px;
-      left: 50%;
-      transform: translateX(-50%);
-      border-bottom-color: color('default-deep');
-      border-top: none;
-    }
-
-    &.info::before {
-      border-bottom-color: color('info');
-    }
-
-    &.light::before {
-      border-bottom-color: color('border');
-    }
-  }
-
-  &.bottom-start {
-    &::before {
-      top: -8px;
-      left: 12px;
-      border-bottom-color: color('default-deep');
-      border-top: none;
-    }
-
-    &.info::before {
-      border-bottom-color: color('info');
-    }
-
-    &.light::before {
-      border-bottom-color: color('border');
-    }
-  }
-
-  &.bottom-end {
-    &::before {
-      top: -8px;
-      right: 12px;
-      border-bottom-color: color('default-deep');
-      border-top: none;
-    }
-
-    &.info::before {
-      border-bottom-color: color('info');
-    }
-
-    &.light::before {
-      border-bottom-color: color('border');
-    }
-  }
-
-  // Direction: left
-  &.left {
-    &::before {
-      right: -8px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-left-color: color('default-deep');
-      border-right: none;
-    }
-
-    &.info::before {
-      border-left-color: color('info');
-    }
-
-    &.light::before {
-      border-left-color: color('border');
-    }
-  }
-
-  &.left-start {
-    &::before {
-      right: -8px;
-      top: 8px;
-      border-left-color: color('default-deep');
-      border-right: none;
-    }
-
-    &.info::before {
-      border-left-color: color('info');
-    }
-
-    &.light::before {
-      border-left-color: color('border');
-    }
-  }
-
-  &.left-end {
-    &::before {
-      right: -8px;
-      bottom: 8px;
-      border-left-color: color('default-deep');
-      border-right: none;
-    }
-
-    &.info::before {
-      border-left-color: color('info');
-    }
-
-    &.light::before {
-      border-left-color: color('border');
-    }
-  }
-
-  // Direction: right
-  &.right {
-    &::before {
-      left: -8px;
-      top: 50%;
-      transform: translateY(-50%);
-      border-right-color: color('default-deep');
-      border-left: none;
-    }
-
-    &.info::before {
-      border-right-color: color('info');
-    }
-
-    &.light::before {
-      border-right-color: color('border');
-    }
-  }
-
-  &.right-start {
-    &::before {
-      left: -8px;
-      top: 8px;
-      border-right-color: color('default-deep');
-      border-left: none;
-    }
-
-    &.info::before {
-      border-right-color: color('info');
-    }
-
-    &.light::before {
-      border-right-color: color('border');
-    }
-  }
-
-  &.right-end {
-    &::before {
-      left: -8px;
-      bottom: 8px;
-      border-right-color: color('default-deep');
-      border-left: none;
-    }
-
-    &.info::before {
-      border-right-color: color('info');
-    }
-
-    &.light::before {
-      border-right-color: color('border');
-    }
-  }
-}
-
-// Tooltip wrapper for hover/focus trigger
-.tooltip-wrapper {
-  position: relative;
-  display: inline-flex;
-
-  .tooltip {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.2s, visibility 0.2s;
-  }
-
-  &:hover .tooltip,
-  &:focus-within .tooltip {
-    opacity: 1;
-    visibility: visible;
-  }
-}