@caseparts-org/caseblocks 0.0.86 → 0.0.87

package/dist/molecules/Tooltip/Tooltip.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
 import { Tooltip } from './Tooltip';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('./Tooltip').TooltipProps>;
+    component: typeof Tooltip;
     parameters: {
         layout: string;
         controls: {
@@ -16,8 +16,8 @@ declare const meta: {
     };
     tags: string[];
     args: {
-        on: "hover";
-        position: "top center";
+        on: "mouseenter focus";
+        placement: "top";
         mouseEnterDelay: number;
         mouseLeaveDelay: number;
         arrow: true;
@@ -28,7 +28,7 @@ declare const meta: {
             options: string[];
             description: string;
         };
-        position: {
+        placement: {
             control: "select";
             options: string[];
             description: string;
@@ -41,22 +41,14 @@ declare const meta: {
             control: "number";
             description: string;
         };
-        arrow: {
-            control: "boolean";
-            description: string;
-        };
-        open: {
-            control: "boolean";
-            description: string;
+        delay: {
+            control: false;
             table: {
                 category: string;
             };
-        };
-        closeOnDocumentClick: {
-            control: "boolean";
             description: string;
         };
-        closeOnEscape: {
+        arrow: {
             control: "boolean";
             description: string;
         };

package/dist/molecules/Tooltip/Tooltip.stories.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Tooltip as t } from "./Tooltip.js";
 import { Button as o } from "../../atoms/Button/Button.js";
-const l = {
+const s = {
   title: "Case Parts/Molecules/Tooltip",
   component: t,
   parameters: {
@@ -9,14 +9,14 @@ const l = {
     controls: { sort: "requiredFirst" },
     docs: {
       description: {
-        component: "Wrapper around reactjs-popup providing consistent styling. Use `interactive` for focusable content. `on` can be a string or an array of trigger events."
+        component: "Wrapper around @tippyjs/react. Use mouseEnterDelay/mouseLeaveDelay or pass `delay` directly. `on` maps to Tippy trigger."
       }
     }
   },
   tags: ["autodocs"],
   args: {
-    on: "hover",
-    position: "top center",
+    on: "mouseenter focus",
+    placement: "top",
     mouseEnterDelay: 100,
     mouseLeaveDelay: 80,
     arrow: !0
@@ -24,52 +24,43 @@ const l = {
   argTypes: {
     on: {
       control: "select",
-      options: ["hover", "click", "focus", "right-click"],
-      description: "Event(s) that trigger the tooltip. Accepts a single string or an array."
+      options: ["mouseenter focus", "click"],
+      description: "Trigger events passed to Tippy `trigger`."
     },
-    position: {
+    placement: {
       control: "select",
       options: [
-        "top left",
-        "top center",
-        "top right",
-        "right top",
-        "right center",
-        "right bottom",
-        "bottom left",
-        "bottom center",
-        "bottom right",
-        "left top",
-        "left center",
-        "left bottom",
-        "center center"
+        "top",
+        "top-start",
+        "top-end",
+        "right",
+        "right-start",
+        "right-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end"
       ],
-      description: "Popup position passed to reactjs-popup."
+      description: "Popper placement used by Tippy."
     },
     mouseEnterDelay: {
       control: "number",
-      description: "Delay (ms) before opening on hover."
+      description: "Show delay (ms) mapped to delay[0]."
     },
     mouseLeaveDelay: {
       control: "number",
-      description: "Delay (ms) before closing after mouse leaves."
+      description: "Hide delay (ms) mapped to delay[1]."
     },
-    arrow: {
-      control: "boolean",
-      description: "Show popup arrow."
-    },
-    open: {
-      control: "boolean",
-      description: "Controlled open state (overrides triggers). Leave undefined for uncontrolled.",
-      table: { category: "Advanced" }
+    delay: {
+      control: !1,
+      table: { category: "Advanced" },
+      description: "Override both delays (number or [show, hide])."
     },
-    closeOnDocumentClick: {
-      control: "boolean",
-      description: "Close when clicking outside (uncontrolled modes)."
-    },
-    closeOnEscape: {
+    arrow: {
       control: "boolean",
-      description: "Close on Escape key."
+      description: "Show tooltip arrow."
     },
     contentClassName: { table: { disable: !0 } },
     tooltipClassName: { table: { disable: !0 } },
@@ -81,9 +72,9 @@ const l = {
       description: "Tooltip content."
     }
   }
-}, c = {
+}, a = {
   args: {
-    position: "top center",
+    placement: "top",
     mouseEnterDelay: 0,
     mouseLeaveDelay: 0
   },
@@ -103,13 +94,12 @@ const l = {
         {
           ...r,
           trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "primary", children: "Hover me" }) }),
-          on: "hover",
-          children: "This tooltip appears on hover (top center)."
+          children: "This tooltip appears on hover (top)."
         }
       )
     }
   )
-}, a = {
+}, c = {
   render: () => /* @__PURE__ */ e(
     "div",
     {
@@ -126,13 +116,15 @@ const l = {
         {
           trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Click me" }) }),
           on: "click",
-          position: "bottom center",
-          children: "This tooltip appears on click (bottom center)."
+          placement: "bottom",
+          mouseEnterDelay: 0,
+          mouseLeaveDelay: 0,
+          children: "This tooltip appears on click (bottom)."
         }
       )
     }
   )
-}, p = {
+}, d = {
   render: () => /* @__PURE__ */ e(
     "div",
     {
@@ -148,14 +140,13 @@ const l = {
         t,
         {
           trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
-          on: "hover",
-          position: "right center",
+          placement: "right",
           children: "Tooltip on the right."
         }
       )
     }
   )
-}, d = {
+}, p = {
   render: () => /* @__PURE__ */ e(
     "div",
     {
@@ -171,14 +162,13 @@ const l = {
         t,
         {
           trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Hover left" }) }),
-          on: "hover",
-          position: "left center",
+          placement: "left",
           children: "Tooltip on the left."
         }
       )
     }
   )
-}, h = {
+}, m = {
   render: () => /* @__PURE__ */ e(
     "div",
     {
@@ -195,8 +185,7 @@ const l = {
         t,
         {
           trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
-          on: "hover",
-          position: "right center",
+          placement: "right",
           children: "Tooltip on the right."
         }
       )
@@ -204,10 +193,10 @@ const l = {
   )
 };
 export {
-  h as AbsolutelyPositioned,
-  a as OnClick,
-  c as OnHover,
-  d as PositionLeft,
-  p as PositionRight,
-  l as default
+  m as AbsolutelyPositioned,
+  c as OnClick,
+  a as OnHover,
+  p as PositionLeft,
+  d as PositionRight,
+  s as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.86",
+  "version": "0.0.87",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -34,15 +34,16 @@
   "dependencies": {
     "@fontsource-variable/roboto-condensed": "^5.1.1",
     "@fontsource/roboto": "^5.1.0",
+    "@tippyjs/react": "^4.2.6",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "reactjs-popup": "^2.0.6"
   },
   "peerDependencies": {
-    "react": ">=18.3.1 <20.0.0",
-    "react-dom": ">=18.3.1 <20.0.0",
     "embla-carousel-autoplay": "^8.0.0",
-    "embla-carousel-react": "^8.0.0"
+    "embla-carousel-react": "^8.0.0",
+    "react": ">=18.3.1 <20.0.0",
+    "react-dom": ">=18.3.1 <20.0.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",