podo-ui 0.5.2 → 0.5.3

package/dist/index.d.ts

@@ -4,7 +4,6 @@ import Editor from './react/atom/editor';
 import EditorView from './react/atom/editor-view';
 import Avatar from './react/atom/avatar';
 import Chip from './react/atom/chip';
-import Tooltip from './react/atom/tooltip';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 declare const Form: {
@@ -15,5 +14,5 @@ declare const Form: {
     Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Pagination, Field };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,QAAA,MAAM,IAAI;;;;;;CAMT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC"}

package/dist/index.js

@@ -4,7 +4,6 @@ import Editor from './react/atom/editor';
 import EditorView from './react/atom/editor-view';
 import Avatar from './react/atom/avatar';
 import Chip from './react/atom/chip';
-import Tooltip from './react/atom/tooltip';
 import Pagination from './react/molecule/pagination';
 import Field from './react/molecule/field';
 const Form = {
@@ -15,4 +14,4 @@ const Form = {
     Field,
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Pagination, Field };

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.5.3",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",

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

@@ -1,15 +0,0 @@
-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 interface TooltipProps {
-    children: React.ReactElement;
-    content: React.ReactNode;
-    placement?: TooltipPlacement;
-    theme?: TooltipTheme;
-    trigger?: 'hover' | 'focus' | 'both';
-    delay?: number;
-    className?: string;
-}
-declare const Tooltip: React.FC<TooltipProps>;
-export default Tooltip;
-//# sourceMappingURL=tooltip.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

package/dist/react/atom/tooltip.js

@@ -1,122 +0,0 @@
-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,
-        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;

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