@helpwave/hightide 0.9.4 → 0.9.5

package/dist/index.js

@@ -20199,24 +20199,52 @@ var PropertyBase = ({
   const isClearEnabled = allowClear && !readOnly;
   const isRemoveEnabled = allowRemove && !readOnly;
   const showActionsContainer = isClearEnabled || isRemoveEnabled;
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+  const renderActionButtons = () => /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(import_jsx_runtime104.Fragment, { children: [
+    isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      IconButton,
+      {
+        tooltip: translation("clearValue"),
+        onClick: onValueClear,
+        disabled: !hasValue,
+        color: "negative",
+        coloringStyle: "text",
+        size: "sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.X, { className: "size-force-5" })
+      }
+    ),
+    isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      IconButton,
+      {
+        tooltip: translation("removeProperty"),
+        onClick: onRemove,
+        color: "negative",
+        coloringStyle: "text",
+        size: "sm",
+        children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Trash, { className: "size-force-5" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "div",
     {
-      className: (0, import_clsx41.default)("group/property", className),
+      className: (0, import_clsx41.default)("group/property min-w-0 w-full", className),
       "data-name": "property-root",
       "data-invalid": PropsUtil.dataAttributes.bool(invalid),
-      children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { "data-name": "property-inner", children: [
         /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
           "div",
           {
             "data-name": "property-title",
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 items-center", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-icon", children: icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { "data-name": "property-title-text", children: name })
-              ] }) }),
-              invalid && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.AlertTriangle, { className: "size-force-6" })
+              /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex min-w-0 flex-1 flex-row items-center justify-between gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(Tooltip, { tooltip: name, containerClassName: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { className: "flex-row-1 items-center", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-icon", children: icon }),
+                  /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("span", { "data-name": "property-title-text", children: name })
+                ] }) }),
+                invalid && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.AlertTriangle, { className: "size-force-6 shrink-0" })
+              ] }),
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-title-actions", children: renderActionButtons() })
             ]
           }
         ),
@@ -20227,35 +20255,11 @@ var PropertyBase = ({
             "data-invalid": PropsUtil.dataAttributes.bool(invalid),
             children: [
               children({ required, hasValue, invalid }),
-              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)("div", { "data-name": "property-actions", children: [
-                isClearEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-                  IconButton,
-                  {
-                    tooltip: translation("clearValue"),
-                    onClick: onValueClear,
-                    disabled: !hasValue,
-                    color: "negative",
-                    coloringStyle: "text",
-                    size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.X, { className: "size-force-5" })
-                  }
-                ),
-                isRemoveEnabled && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
-                  IconButton,
-                  {
-                    tooltip: translation("removeProperty"),
-                    onClick: onRemove,
-                    color: "negative",
-                    coloringStyle: "text",
-                    size: "sm",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_lucide_react31.Trash, { className: "size-force-5" })
-                  }
-                )
-              ] })
+              showActionsContainer && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-name": "property-actions", children: renderActionButtons() })
             ]
           }
         )
-      ]
+      ] })
     }
   );
 };