@umami/react-zen 0.11.0 → 0.12.0

package/dist/index.css

@@ -620,6 +620,15 @@
 .Text_wider {
   letter-spacing: 0.05em;
 }
+.Text_left {
+  text-align: left;
+}
+.Text_center {
+  text-align: center;
+}
+.Text_right {
+  text-align: right;
+}
 
 /* src/components/form/FormField.module.css */
 .FormField_field {
@@ -1360,6 +1369,8 @@
 
 /* src/components/HoverTrigger.module.css */
 .HoverTrigger_wrapper {
+  transform: translateY(-10px);
+  border-top: 10px solid transparent;
 }
 
 /* src/components/InlineEditField.module.css */

package/dist/index.d.ts

@@ -704,11 +704,12 @@ declare module '@umami/react-zen/Text' {
         spacing?: 'tighter' | 'tight' | 'wide' | 'wider';
         type?: 'muted' | 'faded';
         weight?: 'lighter' | 'light' | 'bold' | 'bolder';
+        align?: 'left' | 'center' | 'right';
         asChild?: boolean;
         className?: string;
         children?: ReactNode;
     }
-    function Text({ children, type, size, spacing, weight, asChild, className, ...props }: TextProps): import("react").JSX.Element;
+    function Text({ children, type, size, spacing, weight, align, asChild, className, ...props }: TextProps): import("react").JSX.Element;
     export { Text };
     export type { TextProps };
 }

package/dist/index.js

@@ -25152,12 +25152,25 @@ var Text_default = {
   tighter: "Text_tighter",
   tight: "Text_tight",
   wide: "Text_wide",
-  wider: "Text_wider"
+  wider: "Text_wider",
+  left: "Text_left",
+  center: "Text_center",
+  right: "Text_right"
 };
 
 // src/components/Text.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function Text({ children, type, size, spacing, weight, asChild, className, ...props }) {
+function Text({
+  children,
+  type,
+  size,
+  spacing,
+  weight,
+  align,
+  asChild,
+  className,
+  ...props
+}) {
   const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "span";
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Component,
@@ -25169,7 +25182,8 @@ function Text({ children, type, size, spacing, weight, asChild, className, ...pr
         size && Text_default[size],
         spacing && Text_default[spacing],
         type && Text_default[type],
-        weight && Text_default[weight]
+        weight && Text_default[weight],
+        align && Text_default[align]
       ),
       children
     }
@@ -26940,7 +26954,7 @@ var Heading_default = {
 // src/components/Heading.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function Heading({ size = 5, className, children, asChild, ...props }) {
-  const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "h1";
+  const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "div";
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Component,
     {
@@ -26965,25 +26979,34 @@ var CLOSE_DELAY = 500;
 function HoverTrigger({ closeDelay = CLOSE_DELAY, children }) {
   const [triggerElement, popupElement] = children;
   const [show, setShow] = (0, import_react164.useState)(false);
-  const overMenu = (0, import_react164.useRef)(false);
+  const isOverMenu = (0, import_react164.useRef)(false);
+  const isOverButton = (0, import_react164.useRef)(false);
+  const timeout = (0, import_react164.useRef)();
   const handleHoverStart = () => {
-    overMenu.current = false;
+    isOverMenu.current = false;
+    isOverButton.current = true;
     setShow(true);
   };
   const handleHoverEnd = () => {
-    setTimeout(() => {
-      if (!overMenu.current) {
-        setShow(false);
-        overMenu.current = false;
-      }
-    }, closeDelay);
+    isOverButton.current = false;
+    checkHoverState();
   };
   const handleMenuEnter = () => {
-    overMenu.current = true;
+    isOverMenu.current = true;
   };
   const handleMenuLeave = () => {
-    overMenu.current = false;
-    setShow(false);
+    isOverMenu.current = false;
+    checkHoverState();
+  };
+  const checkHoverState = () => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      if (!isOverMenu.current && !isOverButton.current) {
+        setShow(false);
+        isOverMenu.current = false;
+        isOverButton.current = false;
+      }
+    }, closeDelay);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
     (0, import_react164.cloneElement)(triggerElement, { onHoverStart: handleHoverStart, onHoverEnd: handleHoverEnd }),

package/dist/index.mjs

@@ -25162,12 +25162,25 @@ var Text_default = {
   tighter: "Text_tighter",
   tight: "Text_tight",
   wide: "Text_wide",
-  wider: "Text_wider"
+  wider: "Text_wider",
+  left: "Text_left",
+  center: "Text_center",
+  right: "Text_right"
 };
 
 // src/components/Text.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-function Text({ children, type, size, spacing, weight, asChild, className, ...props }) {
+function Text({
+  children,
+  type,
+  size,
+  spacing,
+  weight,
+  align,
+  asChild,
+  className,
+  ...props
+}) {
   const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "span";
   return /* @__PURE__ */ jsx6(
     Component,
@@ -25179,7 +25192,8 @@ function Text({ children, type, size, spacing, weight, asChild, className, ...pr
         size && Text_default[size],
         spacing && Text_default[spacing],
         type && Text_default[type],
-        weight && Text_default[weight]
+        weight && Text_default[weight],
+        align && Text_default[align]
       ),
       children
     }
@@ -26953,7 +26967,7 @@ var Heading_default = {
 // src/components/Heading.tsx
 import { jsx as jsx32 } from "react/jsx-runtime";
 function Heading({ size = 5, className, children, asChild, ...props }) {
-  const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "h1";
+  const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : "div";
   return /* @__PURE__ */ jsx32(
     Component,
     {
@@ -26978,25 +26992,34 @@ var CLOSE_DELAY = 500;
 function HoverTrigger({ closeDelay = CLOSE_DELAY, children }) {
   const [triggerElement, popupElement] = children;
   const [show, setShow] = useState6(false);
-  const overMenu = useRef2(false);
+  const isOverMenu = useRef2(false);
+  const isOverButton = useRef2(false);
+  const timeout = useRef2();
   const handleHoverStart = () => {
-    overMenu.current = false;
+    isOverMenu.current = false;
+    isOverButton.current = true;
     setShow(true);
   };
   const handleHoverEnd = () => {
-    setTimeout(() => {
-      if (!overMenu.current) {
-        setShow(false);
-        overMenu.current = false;
-      }
-    }, closeDelay);
+    isOverButton.current = false;
+    checkHoverState();
   };
   const handleMenuEnter = () => {
-    overMenu.current = true;
+    isOverMenu.current = true;
   };
   const handleMenuLeave = () => {
-    overMenu.current = false;
-    setShow(false);
+    isOverMenu.current = false;
+    checkHoverState();
+  };
+  const checkHoverState = () => {
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
+      if (!isOverMenu.current && !isOverButton.current) {
+        setShow(false);
+        isOverMenu.current = false;
+        isOverButton.current = false;
+      }
+    }, closeDelay);
   };
   return /* @__PURE__ */ jsxs18($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
     cloneElement3(triggerElement, { onHoverStart: handleHoverStart, onHoverEnd: handleHoverEnd }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "React components built by Umami",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",