@procaaso/alphinity-ui-components 1.0.8 → 1.0.10

package/dist/index.cjs

@@ -998,7 +998,12 @@ function DeviceControlPanel({
   binding,
   onClose,
   position = "bottom",
+  align = "center",
   touchOptimized = true,
+  compact = false,
+  fontScale = 1,
+  maxHeight,
+  maxWidth,
   onModeChange,
   onParameterChange,
   onStart,
@@ -1020,6 +1025,20 @@ function DeviceControlPanel({
   const currentMode = binding.state.currentMode;
   const currentParams = binding.parameters[currentMode] || [];
   const touchSize = touchOptimized ? 56 : 40;
+  const spacing = {
+    padding: compact ? "12px" : "20px",
+    gap: compact ? "6px" : "8px",
+    marginBottom: compact ? "10px" : "16px",
+    itemPadding: compact ? "8px 10px" : "10px 12px"
+  };
+  const fontSize = {
+    title: Math.round(14 * fontScale),
+    label: Math.round(11 * fontScale),
+    value: Math.round(13 * fontScale),
+    input: Math.round(14 * fontScale),
+    button: Math.round(12 * fontScale),
+    status: Math.round(10 * fontScale)
+  };
   const currentModeObj = binding.modes.find((m) => m.value === currentMode);
   const activeCapabilities = currentModeObj?.capabilities ?? binding.capabilities ?? {};
   const backgroundColor = binding.theme?.backgroundColor || "#edeeef";
@@ -1058,9 +1077,9 @@ function DeviceControlPanel({
     position: "fixed",
     ...position === "bottom" ? {
       bottom: 0,
-      left: 0,
-      right: 0,
-      animation: "slideUp 0.3s ease-out"
+      ...align === "left" ? { left: 0, right: "auto" } : align === "right" ? { right: 0, left: "auto" } : { left: 0, right: 0, marginLeft: "auto", marginRight: "auto" },
+      animation: "slideUp 0.3s ease-out",
+      maxWidth
     } : {
       right: 0,
       top: 0,
@@ -1073,9 +1092,9 @@ function DeviceControlPanel({
     borderRadius: position === "bottom" ? "8px 8px 0 0" : "8px 0 0 8px",
     boxShadow: "none",
     border: `2px solid ${borderColor}`,
-    padding: "20px",
+    padding: spacing.padding,
     zIndex: 9999,
-    maxHeight: position === "bottom" ? "70vh" : "100vh",
+    maxHeight: maxHeight || (position === "bottom" ? "70vh" : "100vh"),
     overflowY: "auto",
     ...binding.display?.style
   };
@@ -1099,7 +1118,7 @@ function DeviceControlPanel({
               {
                 style: {
                   margin: 0,
-                  fontSize: "14px",
+                  fontSize: `${fontSize.title}px`,
                   fontWeight: 600,
                   fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
@@ -1151,11 +1170,11 @@ function DeviceControlPanel({
           display: "flex",
           alignItems: "center",
           gap: "12px",
-          padding: "10px 12px",
+          padding: spacing.itemPadding,
           backgroundColor: surfaceColor,
           border: `1px solid ${borderColor}`,
           borderRadius: "6px",
-          marginBottom: "16px"
+          marginBottom: spacing.marginBottom
         },
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1177,7 +1196,7 @@ function DeviceControlPanel({
                 style: {
                   fontWeight: 600,
                   textTransform: "uppercase",
-                  fontSize: "11px",
+                  fontSize: `${fontSize.label}px`,
                   fontFamily: "Arial, sans-serif",
                   letterSpacing: "0.5px",
                   color: textColor
@@ -1235,7 +1254,7 @@ function DeviceControlPanel({
           children: "Mode"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: binding.modes.map((mode) => {
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { display: "flex", gap: spacing.gap, flexWrap: "wrap" }, children: binding.modes.map((mode) => {
         const isSelected = mode.value === currentMode;
         const isEnabled = mode.enabled !== false;
         return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
@@ -1251,7 +1270,7 @@ function DeviceControlPanel({
               color: isSelected ? "#000000" : textColor,
               border: `1px solid ${isSelected ? "#b4d0fe" : borderColor}`,
               borderRadius: "6px",
-              fontSize: "11px",
+              fontSize: `${fontSize.label}px`,
               fontWeight: 600,
               fontFamily: "Arial, sans-serif",
               letterSpacing: "0.5px",
@@ -1265,14 +1284,14 @@ function DeviceControlPanel({
         );
       }) })
     ] }),
-    currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: "16px" }, children: [
+    currentParams.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { marginBottom: spacing.marginBottom }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "label",
         {
           style: {
             display: "block",
-            marginBottom: "8px",
-            fontSize: "11px",
+            marginBottom: spacing.gap,
+            fontSize: `${fontSize.label}px`,
             fontWeight: 600,
             textTransform: "uppercase",
             letterSpacing: "0.5px",
@@ -1286,8 +1305,8 @@ function DeviceControlPanel({
         "div",
         {
           style: {
-            marginBottom: "10px",
-            padding: "10px",
+            marginBottom: spacing.gap,
+            padding: spacing.itemPadding,
             backgroundColor: surfaceColor,
             border: `1px solid ${borderColor}`,
             borderRadius: "6px"
@@ -1296,13 +1315,17 @@ function DeviceControlPanel({
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "div",
               {
-                style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" },
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  marginBottom: spacing.gap
+                },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                     "span",
                     {
                       style: {
-                        fontSize: "11px",
+                        fontSize: `${fontSize.label}px`,
                         fontWeight: 600,
                         textTransform: "uppercase",
                         letterSpacing: "0.5px",
@@ -1316,7 +1339,7 @@ function DeviceControlPanel({
                     "span",
                     {
                       style: {
-                        fontSize: "13px",
+                        fontSize: `${fontSize.value}px`,
                         fontWeight: 700,
                         fontFamily: "Arial, sans-serif",
                         color: textColor
@@ -1401,7 +1424,7 @@ function DeviceControlPanel({
                   border: `1px solid ${borderColor}`,
                   borderRadius: "6px",
                   padding: "0 12px",
-                  fontSize: "14px",
+                  fontSize: `${fontSize.input}px`,
                   fontFamily: "Arial, sans-serif",
                   fontWeight: 600
                 }
@@ -1412,7 +1435,7 @@ function DeviceControlPanel({
         param.id
       ))
     ] }),
-    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: "8px", marginBottom: "16px" }, children: [
+    binding.display?.showStartStop !== false && (activeCapabilities?.canStart || activeCapabilities?.canStop) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", gap: spacing.gap, marginBottom: spacing.marginBottom }, children: [
       activeCapabilities?.canStart && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "button",
         {