@helpwave/hightide 0.1.21 → 0.1.23

package/dist/components/properties/SelectProperty.mjs

@@ -156,6 +156,7 @@ var SolidButton = forwardRef(function SolidButton2({
       onClick,
       disabled,
       className: clsx(
+        "font-semibold",
         {
           "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
           [clsx(colorClasses, "hover:brightness-90")]: !disabled
@@ -198,6 +199,7 @@ var TextButton = ({
   startIcon,
   endIcon,
   onClick,
+  coloredHoverBackground = true,
   className,
   ...restProps
 }) => {
@@ -206,6 +208,11 @@ var TextButton = ({
     negative: "bg-transparent text-button-text-negative-text",
     neutral: "bg-transparent text-button-text-neutral-text"
   }[color];
+  const backgroundColor = {
+    primary: "hover:bg-button-text-primary-text/20",
+    negative: "hover:bg-button-text-negative-text/20",
+    neutral: "hover:bg-button-text-neutral-text/20"
+  }[color];
   const iconColorClasses = {
     primary: "text-button-text-primary-icon",
     negative: "text-button-text-negative-icon",
@@ -217,9 +224,12 @@ var TextButton = ({
       onClick,
       disabled,
       className: clsx(
+        "font-semibold",
         {
           "text-disabled-text cursor-not-allowed": disabled,
-          [clsx(colorClasses, "hover:bg-button-text-hover-background")]: !disabled
+          [colorClasses]: !disabled,
+          [backgroundColor]: !disabled && coloredHoverBackground,
+          "hover:bg-button-text-hover-background": !disabled && !coloredHoverBackground
         },
         ButtonUtil.paddingMapping[size],
         className
@@ -433,7 +443,7 @@ var PropertyBase = ({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx3("div", { className: "max-w-6 min-w-6 text-text-default", children: icon }),
+          /* @__PURE__ */ jsx3("div", { className: "max-w-6 min-w-6 text-text-primary", children: icon }),
           /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: name })
         ]
       }
@@ -444,7 +454,7 @@ var PropertyBase = ({
         className: clsx2(
           "flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15",
           {
-            "bg-surface group-hover:border-primary": !requiredAndNoValue,
+            "bg-input-background text-input-text group-hover:border-primary": !requiredAndNoValue,
             "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
           },
           className
@@ -497,14 +507,16 @@ import { Check } from "lucide-react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Tile = ({
   title,
+  titleClassName,
   description,
+  descriptionClassName,
   onClick,
   isSelected = false,
   disabled = false,
   prefix,
   suffix,
   normalClassName = "hover:bg-primary/40 cursor-pointer",
-  selectedClassName = " bg-primary/20",
+  selectedClassName = "bg-primary/20",
   disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
   className
 }) => {
@@ -514,7 +526,7 @@ var Tile = ({
       className: clsx4(
         "flex-row-2 w-full items-center",
         {
-          [normalClassName]: !!onClick && !disabled,
+          [normalClassName]: onClick && !disabled,
           [selectedClassName]: isSelected && !disabled,
           [disabledClassName]: disabled
         },
@@ -524,14 +536,27 @@ var Tile = ({
       children: [
         prefix,
         /* @__PURE__ */ jsxs3("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ jsx5("h4", { className: clsx4(title.className ?? "textstyle-title-normal"), children: title.value }),
-          !!description && /* @__PURE__ */ jsx5("span", { className: clsx4(description.className ?? "textstyle-description"), children: description.value })
+          /* @__PURE__ */ jsx5("span", { className: clsx4(titleClassName ?? "textstyle-title-normal"), children: title }),
+          !!description && /* @__PURE__ */ jsx5("span", { className: clsx4(descriptionClassName ?? "textstyle-description"), children: description })
         ] }),
         suffix ?? (isSelected ? /* @__PURE__ */ jsx5(Check, { size: 24 }) : void 0)
       ]
     }
   );
 };
+var ListTile = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(
+    Tile,
+    {
+      ...props,
+      titleClassName: props.titleClassName ?? "font-semibold",
+      className: clsx4("px-2 py-1 rounded-md", props.className),
+      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
+    }
+  );
+};
 
 // src/components/layout-and-navigation/Expandable.tsx
 import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect3, useState as useState3 } from "react";
@@ -638,11 +663,7 @@ var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
 });
 
 // src/components/user-action/Menu.tsx
-import {
-  useEffect as useEffect6,
-  useRef,
-  useState as useState5
-} from "react";
+import { useEffect as useEffect6, useRef, useState as useState5 } from "react";
 import clsx6 from "clsx";
 
 // src/hooks/useOutsideClick.ts
@@ -840,7 +861,7 @@ var Menu = ({
         ref: menuRef,
         onClick: (e) => e.stopPropagation(),
         className: clsx6(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg z-[300]",
+          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
           {
             "animate-pop-in": isOpen,
             "animate-pop-out": !isOpen,
@@ -992,7 +1013,7 @@ var getInputClassName = ({ disabled = false, hasError = false }) => {
   return clsx7(
     "px-2 py-1.5 rounded-md border-2",
     {
-      "bg-surface text-on-surface hover:border-primary focus:border-primary": !disabled && !hasError,
+      "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !hasError,
       "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover": !disabled && hasError,
       "bg-disabled-background text-disabled-text border-disabled-border": disabled
     }
@@ -1207,22 +1228,6 @@ var useSearch = ({
 
 // src/components/user-action/Select.tsx
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var SelectTile = ({
-  className,
-  disabledClassName,
-  title,
-  ...restProps
-}) => {
-  return /* @__PURE__ */ jsx10(
-    Tile,
-    {
-      ...restProps,
-      className: clsx9("px-2 py-1 rounded-md", className),
-      disabledClassName: disabledClassName ?? "text-disabled-text cursor-not-allowed",
-      title: { ...title, className: title.className ?? "font-semibold" }
-    }
-  );
-};
 var Select = ({
   value,
   label,
@@ -1261,7 +1266,7 @@ var Select = ({
               "btn-md justify-between w-full border-2",
               {
                 "rounded-b-lg": !open,
-                "bg-menu-background text-menu-text border-menu-border hover:border-primary": !disabled,
+                "bg-input-background text-input-text hover:border-primary": !disabled,
                 "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
               },
               triggerClassName
@@ -1289,10 +1294,10 @@ var Select = ({
             ),
             /* @__PURE__ */ jsxs8("div", { className: "flex-col-2 overflow-y-auto", children: [
               result.map((option, index) => /* @__PURE__ */ jsx10(
-                SelectTile,
+                ListTile,
                 {
                   isSelected: option === selectedOption,
-                  title: { value: option.label },
+                  title: option.label,
                   onClick: () => {
                     onChange(option.value);
                     close();
@@ -1352,10 +1357,10 @@ var SingleSelectProperty = ({
               return void 0;
             }
             return /* @__PURE__ */ jsx11(
-              SelectTile,
+              ListTile,
               {
                 prefix: /* @__PURE__ */ jsx11(Plus, {}),
-                title: { value: `${translation("add")} ${search.trim()}` },
+                title: `${translation("add")} ${search.trim()}`,
                 onClick: () => {
                   onAddNew(search);
                   close();