podo-ui 0.5.3 → 0.7.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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: {
@@ -14,5 +15,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, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, 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,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"}
+{"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"}

package/dist/index.js

@@ -4,6 +4,7 @@ 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 = {
@@ -14,4 +15,4 @@ const Form = {
     Field,
 };
 export default Form;
-export { Input, Textarea, Editor, EditorView, Avatar, Chip, Pagination, Field };
+export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type TooltipVariant = 'default' | 'info';
+export type TooltipPosition = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
+export interface TooltipProps {
+    /** Trigger element (button, icon, etc.) */
+    children: React.ReactNode;
+    /** Tooltip content (can include any JSX) */
+    content: React.ReactNode;
+    /** Tooltip visual variant */
+    variant?: TooltipVariant;
+    /** Arrow position */
+    position?: TooltipPosition;
+    /** Distance from trigger element in pixels */
+    offset?: number;
+    /** Control visibility externally (overrides hover state) */
+    isVisible?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+export default function Tooltip({ children, content, variant, position, offset, isVisible: controlledIsVisible, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +1 @@
+{"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,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,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,SAAS,EAAE,mBAAmB,EAC9B,SAAc,GACf,EAAE,YAAY,2CAkCd"}

package/dist/react/atom/tooltip.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import styles from './tooltip.module.scss';
+export default function Tooltip({ children, content, variant = 'default', position = 'top', offset = 8, isVisible: controlledIsVisible, className = '', }) {
+    const [hoverIsVisible, setHoverIsVisible] = useState(false);
+    const variantClass = variant === 'default' ? styles.variantDefault : styles.variantInfo;
+    const tooltipClassNames = [
+        styles.tooltipBox,
+        variantClass,
+        styles[position],
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    // Show tooltip if controlled visibility is true OR hover state is true
+    const shouldShowTooltip = controlledIsVisible === true || hoverIsVisible;
+    return (_jsxs("div", { className: styles.tooltipWrapper, onMouseEnter: () => setHoverIsVisible(true), onMouseLeave: () => setHoverIsVisible(false), children: [children, shouldShowTooltip && (_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/package.json

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