@helpwave/hightide 0.12.6 → 0.12.7

package/dist/index.js

@@ -7322,6 +7322,125 @@ function Visibility({ children, isVisible }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: isVisible && children });
 }
 
+// src/components/display-and-visualization/Avatar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react2 = require("react");
+var Avatar = ({
+  image: initialImage,
+  name,
+  size = "md",
+  ...props
+}) => {
+  const [hasError, setHasError] = (0, import_react.useState)(false);
+  const [hasLoaded, setHasLoaded] = (0, import_react.useState)(false);
+  const [image, setImage] = (0, import_react.useState)(initialImage);
+  const displayName = (0, import_react.useMemo)(() => {
+    const maxLetters = size === "sm" ? 1 : 2;
+    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
+  }, [name, size]);
+  const isShowingImage = !!image && (!hasError || !hasLoaded);
+  (0, import_react.useEffect)(() => {
+    if (initialImage?.avatarUrl !== image?.avatarUrl) {
+      setHasError(false);
+      setHasLoaded(false);
+    }
+    setImage(initialImage);
+  }, [image?.avatarUrl, initialImage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ...props,
+      "data-name": "avatar",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "img",
+          {
+            src: image?.avatarUrl,
+            alt: image?.alt,
+            "data-name": "avatar-image",
+            onLoad: () => setHasLoaded(true),
+            onError: () => setHasError(true),
+            "data-error": hasError ? "" : void 0,
+            "data-loaded": hasLoaded ? "" : void 0
+          },
+          image?.avatarUrl
+        ) }),
+        name ? displayName : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.UserIcon, {})
+      ]
+    }
+  );
+};
+var AvatarGroup = ({
+  avatars,
+  showTotalNumber = true,
+  size = "md",
+  ...props
+}) => {
+  const maxShownProfiles = 5;
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+  const notDisplayedProfiles = avatars.length - maxShownProfiles;
+  const group = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_react2.createElement)(
+    Avatar,
+    {
+      ...avatar,
+      key: index,
+      size,
+      "data-group": ""
+    }
+  )) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      ...props,
+      "data-name": props["data-name"] ?? "avatar-group",
+      "data-size": size ?? void 0,
+      children: [
+        group,
+        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "span",
+          {
+            "data-name": "avatar-group-more",
+            "data-size": size,
+            children: `+ ${notDisplayedProfiles}`
+          }
+        )
+      ]
+    }
+  );
+};
+var AvatarWithStatus = ({
+  status = "unknown",
+  className,
+  size = "md",
+  ...avatarProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: (0, import_clsx3.default)(className),
+      "data-name": "avatar-with-status",
+      "data-size": size ?? void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { ...avatarProps, size }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "div",
+          {
+            "data-name": "avatar-with-status-dot",
+            "data-size": size ?? void 0,
+            "data-status": status
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/display-and-visualization/Card.tsx
+var import_react3 = require("react");
+var import_clsx4 = __toESM(require("clsx"));
+var import_lucide_react2 = require("lucide-react");
+
 // src/utils/array.ts
 var equalSizeGroups = (array, groupSize) => {
   if (groupSize <= 0) {
@@ -7587,130 +7706,24 @@ var PropsUtil = {
   mergeProps
 };
 
-// src/components/display-and-visualization/Avatar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var import_react2 = require("react");
-var Avatar = ({
-  image: initialImage,
-  name,
-  size = "md",
-  ...props
-}) => {
-  const [hasError, setHasError] = (0, import_react.useState)(false);
-  const [hasLoaded, setHasLoaded] = (0, import_react.useState)(false);
-  const [image, setImage] = (0, import_react.useState)(initialImage);
-  const displayName = (0, import_react.useMemo)(() => {
-    const maxLetters = size === "sm" ? 1 : 2;
-    return (name ?? "").split(" ").filter((_, index) => index < maxLetters).map((value) => value[0]).join("").toUpperCase();
-  }, [name, size]);
-  const isShowingImage = !!image && (!hasError || !hasLoaded);
-  (0, import_react.useEffect)(() => {
-    if (initialImage?.avatarUrl !== image?.avatarUrl) {
-      setHasError(false);
-      setHasLoaded(false);
-    }
-    setImage(initialImage);
-  }, [image?.avatarUrl, initialImage]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar",
-      "data-size": props["data-size"] ?? size ?? void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Visibility, { isVisible: isShowingImage, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "img",
-          {
-            src: image?.avatarUrl,
-            alt: image?.alt,
-            "data-name": "avatar-image",
-            onLoad: () => setHasLoaded(true),
-            onError: () => setHasError(true),
-            "data-error": hasError ? "" : void 0,
-            "data-loaded": hasLoaded ? "" : void 0
-          },
-          image?.avatarUrl
-        ) }),
-        name ? displayName : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.UserIcon, {})
-      ]
-    }
-  );
-};
-var AvatarGroup = ({
-  avatars,
-  showTotalNumber = true,
-  size = "md",
-  ...props
-}) => {
-  const maxShownProfiles = 5;
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
-  const notDisplayedProfiles = avatars.length - maxShownProfiles;
-  const group = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "avatar-group-container", children: displayedProfiles.map((avatar, index) => /* @__PURE__ */ (0, import_react2.createElement)(
-    Avatar,
-    {
-      ...avatar,
-      key: index,
-      size,
-      "data-group": ""
-    }
-  )) });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      ...props,
-      "data-name": props["data-name"] ?? "avatar-group",
-      "data-size": size ?? void 0,
-      children: [
-        group,
-        showTotalNumber && notDisplayedProfiles > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "span",
-          {
-            "data-name": "avatar-group-more",
-            "data-size": size,
-            children: `+ ${notDisplayedProfiles}`
-          }
-        )
-      ]
-    }
-  );
-};
-var AvatarWithStatus = ({
-  isOnline,
-  className,
-  size = "md",
-  ...avatarProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: (0, import_clsx3.default)(className),
-      "data-name": "avatar-with-status",
-      "data-size": size ?? void 0,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { ...avatarProps, size }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
-          {
-            "data-name": "avatar-with-status-dot",
-            "data-size": size ?? void 0,
-            "data-online": PropsUtil.dataAttributes.bool(isOnline),
-            "aria-label": isOnline ? "Online" : "Offline"
-          }
-        )
-      ]
-    }
-  );
-};
-
 // src/components/display-and-visualization/Card.tsx
-var import_react3 = require("react");
-var import_clsx4 = __toESM(require("clsx"));
-var import_lucide_react2 = require("lucide-react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function CardHeaderContent({ title, description, leading, trailing }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    leading != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-leading", children: leading }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
+    ] }),
+    trailing != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-trailing", children: trailing })
+  ] });
+}
 var Card = ({
   title,
   description,
   size = "md",
+  leading,
+  trailing,
   children,
   className,
   ...props
@@ -7723,8 +7736,15 @@ var Card = ({
       "data-name": props["data-name"] ?? "card",
       "data-size": size,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7734,7 +7754,8 @@ var ActionCard = (0, import_react3.forwardRef)(function ActionCard2({
   title,
   description,
   size = "md",
-  action,
+  leading,
+  trailing,
   disabled = false,
   children,
   className,
@@ -7770,13 +7791,15 @@ var ActionCard = (0, import_react3.forwardRef)(function ActionCard2({
       role: onClick ? "button" : void 0,
       tabIndex: onClick && !disabled ? 0 : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
-          ] }),
-          action != null && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-action", children: action })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { "data-name": "card-header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          CardHeaderContent,
+          {
+            title,
+            description,
+            leading,
+            trailing
+          }
+        ) }),
         children
       ]
     }
@@ -7786,6 +7809,7 @@ var NavigationCard = (0, import_react3.forwardRef)(function NavigationCard2({
   title,
   description,
   size = "md",
+  leading,
   href,
   isExternal = false,
   children,
@@ -7831,10 +7855,14 @@ var NavigationCard = (0, import_react3.forwardRef)(function NavigationCard2({
       tabIndex: 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-header", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-name": "card-content", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-title", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Visibility, { isVisible: !!description, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-name": "card-description", children: description }) })
-          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            CardHeaderContent,
+            {
+              title,
+              description,
+              leading
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "a",
             {
@@ -14885,32 +14913,19 @@ function VerticalNavigationItem({
   const handleHeaderActivate = (0, import_react59.useCallback)(() => {
     toggleExpansion(id, { isFocusing: true });
   }, [id, toggleExpansion]);
-  const handleLeafActivate = (0, import_react59.useCallback)((event) => {
-    if (event.target.closest('[data-name="vertical-navigation-item-link"]')) return;
+  const handleLeafActivate = (0, import_react59.useCallback)(() => {
     navigateTo(id);
-  }, [id, navigateTo]);
-  const labelContent = url == null ? label : external ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
-    "a",
-    {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
-      ]
-    }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-    "a",
-    {
-      href: url,
-      "data-name": "vertical-navigation-item-link",
-      tabIndex: -1,
-      children: label
+    if (url == null) return;
+    if (external) {
+      window.open(url, "_blank", "noopener,noreferrer");
+      return;
     }
-  );
+    window.location.assign(url);
+  }, [external, id, navigateTo, url]);
+  const labelContent = url == null ? label : external ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { "data-name": "vertical-navigation-item-link", children: [
+    label,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react9.ExternalLink, { className: "vertical-navigation-item-link-external-icon" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { "data-name": "vertical-navigation-item-link", children: label });
   if (!hasChildren) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "li",
@@ -16009,7 +16024,7 @@ var Navigation = ({ ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       IconButton,
       {
-        tooltip: translation("openNavigation"),
+        tooltip: translation("menu"),
         coloringStyle: "text",
         color: "neutral",
         onClick: () => setIsMobileOpen(true),
@@ -18343,7 +18358,7 @@ var DatePicker = ({
         Button,
         {
           size: "sm",
-          coloringStyle: "text",
+          color: "neutral",
           className: (0, import_clsx29.default)("flex-row-1 items-center cursor-pointer select-none", {
             "text-disabled": displayMode !== "day"
           }),
@@ -19193,6 +19208,9 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
   const focusField = () => {
     fieldRef.current?.querySelector('[data-name="date-time-segment"]')?.focus();
   };
+  const hasClear = !required && allowClear && !readOnly && !disabled && state !== null;
+  const hasTimePicker = !readOnly;
+  const hasActions = hasClear || hasTimePicker || actions.length > 0;
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { ...containerProps, className: (0, import_clsx31.default)("relative w-full", containerProps?.className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
       "div",
@@ -19210,6 +19228,7 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
         className: (0, import_clsx31.default)("cursor-text", props.className),
         "data-name": props["data-name"] ?? "date-time-input",
         "data-value": PropsUtil.dataAttributes.bool(!!state),
+        "data-has-actions": PropsUtil.dataAttributes.bool(hasActions),
         ...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required }),
         ...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props),
         children: [
@@ -19228,13 +19247,12 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
               onValueChange: (next) => setState(fromZoned(next)),
               onEditComplete: (next) => onEditComplete?.(fromZoned(next)),
               "aria-labelledby": props["aria-labelledby"],
-              "aria-describedby": props["aria-describedby"],
-              className: "grow"
+              "aria-describedby": props["aria-describedby"]
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex-row-1 items-center", children: [
             actions,
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: !required && allowClear && !readOnly && !disabled && state !== null, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: hasClear, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               IconButton,
               {
                 tooltip: translation("clearValue"),
@@ -19248,7 +19266,7 @@ var DateTimeInput = (0, import_react84.forwardRef)(function DateTimeInput2({
                 children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react22.X, { className: "size-5" })
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: !readOnly, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Visibility, { isVisible: hasTimePicker, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               IconButton,
               {
                 tooltip: translation("sDateTimeSelect", { datetimeMode: mode }),
@@ -20973,7 +20991,7 @@ var TableHeader = ({ isSticky = false }) => {
           "data-name": "table-header-cell",
           className: (0, import_clsx35.default)("group/table-header-cell", header.column.columnDef.meta?.className),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex-row-1 items-center truncate", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: !header.isPlaceholder, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "table-header-cell-content", children: [
               /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Visibility, { isVisible: header.column.getCanSort(), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
                 TableSortButton,
                 {
@@ -23397,6 +23415,7 @@ var DateProperty = ({
           onValueChange,
           onEditComplete,
           "data-name": "property-input",
+          className: "flex-row-4 pr-0",
           "data-invalid": PropsUtil.dataAttributes.bool(invalid)
         }
       )