@helpwave/hightide 0.9.4 → 0.9.5

package/dist/index.mjs

@@ -19938,7 +19938,7 @@ import { Check as Check5 } from "lucide-react";
 // src/components/user-interaction/properties/PropertyBase.tsx
 import clsx41 from "clsx";
 import { AlertTriangle, Trash, X as X3 } from "lucide-react";
-import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var PropertyBase = ({
   name,
   children,
@@ -19957,24 +19957,52 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ jsxs65(
+  const renderActionButtons = () => /* @__PURE__ */ jsxs65(Fragment13, { children: [
+    isClearEnabled && /* @__PURE__ */ jsx103(
+      IconButton,
+      {
+        tooltip: translation("clearValue"),
+        onClick: onValueClear,
+        disabled: !hasValue,
+        color: "negative",
+        coloringStyle: "text",
+        size: "sm",
+        children: /* @__PURE__ */ jsx103(X3, { className: "size-force-5" })
+      }
+    ),
+    isRemoveEnabled && /* @__PURE__ */ jsx103(
+      IconButton,
+      {
+        tooltip: translation("removeProperty"),
+        onClick: onRemove,
+        color: "negative",
+        coloringStyle: "text",
+        size: "sm",
+        children: /* @__PURE__ */ jsx103(Trash, { className: "size-force-5" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx103(
     "div",
     {
-      className: clsx41("group/property", className),
+      className: clsx41("group/property min-w-0 w-full", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-      children: [
+      children: /* @__PURE__ */ jsxs65("div", { "data-name": "property-inner", children: [
         /* @__PURE__ */ jsxs65(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ jsx103(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ jsx103("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ jsx103("span", { "data-name": "property-title-text", children: name })
-              ] }) }),
-              invalid && /* @__PURE__ */ jsx103(AlertTriangle, { className: "size-force-6" })
+              /* @__PURE__ */ jsxs65("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
+                /* @__PURE__ */ jsx103(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ jsxs65("div", { className: "flex-row-1 items-center", children: [
+                  /* @__PURE__ */ jsx103("div", { "data-name": "property-title-icon", children: icon }),
+                  /* @__PURE__ */ jsx103("span", { "data-name": "property-title-text", children: name })
+                ] }) }),
+                invalid && /* @__PURE__ */ jsx103(AlertTriangle, { className: "size-force-6 shrink-0" })
+              ] }),
+              showActionsContainer && /* @__PURE__ */ jsx103("div", { "data-name": "property-title-actions", children: renderActionButtons() })
             ]
           }
         ),
@@ -19985,35 +20013,11 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ jsxs65("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ jsx103(
-                  IconButton,
-                  {
-                    tooltip: translation("clearValue"),
-                    onClick: onValueClear,
-                    disabled: !hasValue,
-                    color: "negative",
-                    coloringStyle: "text",
-                    size: "sm",
-                    children: /* @__PURE__ */ jsx103(X3, { className: "size-force-5" })
-                  }
-                ),
-                isRemoveEnabled && /* @__PURE__ */ jsx103(
-                  IconButton,
-                  {
-                    tooltip: translation("removeProperty"),
-                    onClick: onRemove,
-                    color: "negative",
-                    coloringStyle: "text",
-                    size: "sm",
-                    children: /* @__PURE__ */ jsx103(Trash, { className: "size-force-5" })
-                  }
-                )
-              ] })
+              showActionsContainer && /* @__PURE__ */ jsx103("div", { "data-name": "property-actions", children: renderActionButtons() })
             ]
           }
         )
-      ]
+      ] })
     }
   );
 };