@caseparts-org/caseblocks 0.0.51 → 0.0.53

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

@@ -5,20 +5,62 @@ declare const meta: {
     component: import('react').FC<import('./Tooltip').TooltipProps>;
     parameters: {
         layout: string;
+        controls: {
+            sort: string;
+        };
+        docs: {
+            description: {
+                component: string;
+            };
+        };
     };
     tags: string[];
+    args: {
+        on: "hover";
+        position: "top center";
+        mouseEnterDelay: number;
+        mouseLeaveDelay: number;
+        arrow: true;
+    };
     argTypes: {
+        on: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
         position: {
             control: "select";
             options: string[];
+            description: string;
+        };
+        mouseEnterDelay: {
+            control: "number";
+            description: string;
         };
-        delay: {
+        mouseLeaveDelay: {
             control: "number";
+            description: string;
+        };
+        arrow: {
+            control: "boolean";
+            description: string;
         };
-        allowEnter: {
+        open: {
             control: "boolean";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        closeOnDocumentClick: {
+            control: "boolean";
+            description: string;
+        };
+        closeOnEscape: {
+            control: "boolean";
+            description: string;
         };
-        wrapperClassName: {
+        contentClassName: {
             table: {
                 disable: true;
             };
@@ -28,6 +70,15 @@ declare const meta: {
                 disable: true;
             };
         };
+        trigger: {
+            table: {
+                disable: true;
+            };
+            description: string;
+        };
+        children: {
+            description: string;
+        };
     };
 };
 export default meta;

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

@@ -1,14 +1,32 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Tooltip as e } from "./Tooltip.js";
-import { Button as i } from "../../atoms/Button/Button.js";
-const s = {
+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 = {
   title: "Case Parts/Molecules/Tooltip",
-  component: e,
+  component: t,
   parameters: {
-    layout: "centered"
+    layout: "centered",
+    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."
+      }
+    }
   },
   tags: ["autodocs"],
+  args: {
+    on: "hover",
+    position: "top center",
+    mouseEnterDelay: 100,
+    mouseLeaveDelay: 80,
+    arrow: !0
+  },
   argTypes: {
+    on: {
+      control: "select",
+      options: ["hover", "click", "focus", "right-click"],
+      description: "Event(s) that trigger the tooltip. Accepts a single string or an array."
+    },
     position: {
       control: "select",
       options: [
@@ -25,20 +43,51 @@ const s = {
         "left center",
         "left bottom",
         "center center"
-      ]
+      ],
+      description: "Popup position passed to reactjs-popup."
+    },
+    mouseEnterDelay: {
+      control: "number",
+      description: "Delay (ms) before opening on hover."
+    },
+    mouseLeaveDelay: {
+      control: "number",
+      description: "Delay (ms) before closing after mouse leaves."
+    },
+    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: "number" },
-    allowEnter: { control: "boolean" },
-    wrapperClassName: { table: { disable: !0 } },
-    tooltipClassName: { table: { disable: !0 } }
+    closeOnDocumentClick: {
+      control: "boolean",
+      description: "Close when clicking outside (uncontrolled modes)."
+    },
+    closeOnEscape: {
+      control: "boolean",
+      description: "Close on Escape key."
+    },
+    contentClassName: { table: { disable: !0 } },
+    tooltipClassName: { table: { disable: !0 } },
+    trigger: {
+      table: { disable: !0 },
+      description: "React element that triggers the tooltip."
+    },
+    children: {
+      description: "Tooltip content."
+    }
   }
 }, c = {
   args: {
-    position: "top",
-    delay: 0,
-    allowEnter: !0
+    position: "top center",
+    mouseEnterDelay: 0,
+    mouseLeaveDelay: 0
   },
-  render: (o) => /* @__PURE__ */ t(
+  render: (r) => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -49,11 +98,11 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          ...o,
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "primary", children: "Hover me" }) }),
+          ...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)."
         }
@@ -61,7 +110,7 @@ const s = {
     }
   )
 }, a = {
-  render: () => /* @__PURE__ */ t(
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -72,19 +121,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "secondary", children: "Click me" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "secondary", children: "Click me" }) }),
           on: "click",
-          position: "bottom",
+          position: "bottom center",
           children: "This tooltip appears on click (bottom center)."
         }
       )
     }
   )
-}, h = {
-  render: () => /* @__PURE__ */ t(
+}, p = {
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -95,19 +144,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
           on: "hover",
-          position: "right",
+          position: "right center",
           children: "Tooltip on the right."
         }
       )
     }
   )
 }, d = {
-  render: () => /* @__PURE__ */ t(
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -118,19 +167,19 @@ const s = {
         alignItems: "center",
         justifyContent: "center"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "tertiary", children: "Hover left" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "tertiary", children: "Hover left" }) }),
           on: "hover",
-          position: "left",
+          position: "left center",
           children: "Tooltip on the left."
         }
       )
     }
   )
-}, p = {
-  render: () => /* @__PURE__ */ t(
+}, h = {
+  render: () => /* @__PURE__ */ e(
     "div",
     {
       style: {
@@ -142,12 +191,12 @@ const s = {
         position: "absolute",
         right: "300px"
       },
-      children: /* @__PURE__ */ t(
-        e,
+      children: /* @__PURE__ */ e(
+        t,
         {
-          trigger: /* @__PURE__ */ t("div", { className: "tooltip-story", children: /* @__PURE__ */ t(i, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
+          trigger: /* @__PURE__ */ e("div", { className: "tooltip-story", children: /* @__PURE__ */ e(o, { size: "md", variant: "cta-primary", children: "Hover right" }) }),
           on: "hover",
-          position: "right",
+          position: "right center",
           children: "Tooltip on the right."
         }
       )
@@ -155,10 +204,10 @@ const s = {
   )
 };
 export {
-  p as AbsolutelyPositioned,
+  h as AbsolutelyPositioned,
   a as OnClick,
   c as OnHover,
   d as PositionLeft,
-  h as PositionRight,
-  s as default
+  p as PositionRight,
+  l as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -35,7 +35,8 @@
     "@fontsource-variable/roboto-condensed": "^5.1.1",
     "@fontsource/roboto": "^5.1.0",
     "clsx": "^2.1.1",
-    "csstype": "^3.1.3"
+    "csstype": "^3.1.3",
+    "reactjs-popup": "^2.0.6"
   },
   "peerDependencies": {
     "react": ">=18.3.1 <20.0.0",