@procaaso/alphinity-ui-components 1.16.0 → 1.17.0

package/dist/index.cjs

@@ -1266,6 +1266,20 @@ var DISABLED_BUTTON_BG = "#e5e7eb";
 var DISABLED_BUTTON_TEXT = "#4b5563";
 var DISABLED_BUTTON_BORDER = "#6b7280";
 var DISABLED_BUTTON_HATCH = "repeating-linear-gradient(135deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 4px, transparent 4px, transparent 10px)";
+var START_BUTTON_BG = "#10b981";
+var STOP_BUTTON_BG = "#ef4444";
+var COMMAND_VARIANT_STYLES = {
+  start: { backgroundColor: START_BUTTON_BG, color: "#ffffff" },
+  hold: { backgroundColor: "#f59e0b", color: "#1f1300" },
+  cancel: { backgroundColor: "#64748b", color: "#ffffff" }
+};
+var COMPLETE_VARIANT_STYLE = {
+  backgroundColor: "#d1fae5",
+  color: "#065f46",
+  border: `2px solid ${START_BUTTON_BG}`,
+  cursor: "default",
+  opacity: 1
+};
 function DeviceControlPanelImpl({
   binding,
   onClose,
@@ -2165,7 +2179,7 @@ function DeviceControlPanelImpl({
                 },
                 disabled: !startEnabledNow,
                 "aria-busy": startPending || void 0,
-                style: startStopButtonStyle(startEnabledNow, "#10b981"),
+                style: startStopButtonStyle(startEnabledNow, START_BUTTON_BG),
                 children: startPending ? "STARTING\u2026" : "START"
               }
             ),
@@ -2180,7 +2194,7 @@ function DeviceControlPanelImpl({
                 },
                 disabled: !stopEnabledNow,
                 "aria-busy": stopPending || void 0,
-                style: startStopButtonStyle(stopEnabledNow, "#ef4444"),
+                style: startStopButtonStyle(stopEnabledNow, STOP_BUTTON_BG),
                 children: stopPending ? "STOPPING\u2026" : "STOP"
               }
             )
@@ -2196,32 +2210,61 @@ function DeviceControlPanelImpl({
             gap: "8px"
           },
           children: activeCapabilities.customActions.map((action) => {
-            const actionDisabled = action.disabled === true;
+            const isComplete = action.variant === "complete";
+            const actionDisabled = action.disabled === true || isComplete;
+            const commandStyle = action.variant === "start" || action.variant === "hold" || action.variant === "cancel" ? COMMAND_VARIANT_STYLES[action.variant] : void 0;
+            let variantStyle;
+            if (isComplete) {
+              variantStyle = COMPLETE_VARIANT_STYLE;
+            } else if (commandStyle && actionDisabled) {
+              variantStyle = {
+                backgroundColor: DISABLED_BUTTON_BG,
+                backgroundImage: DISABLED_BUTTON_HATCH,
+                color: DISABLED_BUTTON_TEXT,
+                border: `2px dashed ${DISABLED_BUTTON_BORDER}`,
+                cursor: "not-allowed",
+                opacity: 1
+              };
+            } else if (commandStyle) {
+              variantStyle = {
+                ...commandStyle,
+                border: "2px solid transparent",
+                cursor: "pointer",
+                opacity: 1
+              };
+            } else {
+              variantStyle = {
+                backgroundColor: surfaceColor,
+                color: textColor,
+                border: `1px solid ${borderColor}`,
+                cursor: actionDisabled ? "not-allowed" : "pointer",
+                opacity: actionDisabled ? 0.4 : 1
+              };
+            }
             return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
               "button",
               {
+                type: "button",
+                "data-variant": action.variant,
                 onClick: () => {
                   if (!actionDisabled) onCustomAction?.(action.id);
                 },
                 disabled: actionDisabled,
-                title: actionDisabled ? action.disabledReason : void 0,
+                title: action.disabled === true ? action.disabledReason : void 0,
                 style: {
                   ...customActionsInRow ? { flex: "1 1 0px", minWidth: 0, paddingLeft: "4px", paddingRight: "4px" } : { flex: 1, minWidth: "120px" },
                   height: touchSize,
-                  backgroundColor: surfaceColor,
-                  color: textColor,
-                  border: `1px solid ${borderColor}`,
                   borderRadius: "6px",
                   fontSize: "11px",
                   fontWeight: 600,
                   fontFamily: "monospace",
                   letterSpacing: "0.5px",
                   textTransform: "uppercase",
-                  cursor: actionDisabled ? "not-allowed" : "pointer",
-                  opacity: actionDisabled ? 0.4 : 1,
-                  transition: "all 0.15s"
+                  transition: "all 0.15s",
+                  ...variantStyle
                 },
                 children: [
+                  isComplete && !action.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": "true", style: { marginRight: "6px" }, children: "\u2713" }),
                   action.icon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { marginRight: "6px" }, children: action.icon }),
                   action.label
                 ]