@seamapi/react 2.8.7 → 2.10.0

package/lib/temperature-bounds.d.ts

@@ -1,4 +1,4 @@
-import type { HvacModeSetting } from 'seamapi';
+import type { HvacModeSetting, ThermostatDevice } from 'seamapi';
 export interface ControlBounds {
     mode: Exclude<HvacModeSetting, 'off'>;
     minHeat: number;
@@ -18,4 +18,5 @@ interface TemperatureBounds {
 export declare const getHeatBounds: ({ mode, minHeat, maxHeat, maxCool, delta, }: Omit<ControlBounds, 'minCool'>) => MinMax;
 export declare const getCoolBounds: ({ mode, minHeat, minCool, maxCool, delta, }: Omit<ControlBounds, 'maxHeat'>) => MinMax;
 export declare const getTemperatureBounds: (controlBounds: ControlBounds) => TemperatureBounds;
+export declare const getSupportedThermostatModes: (device: ThermostatDevice) => HvacModeSetting[];
 export {};

package/lib/temperature-bounds.js

@@ -10,4 +10,20 @@ export const getTemperatureBounds = (controlBounds) => ({
     heat: getHeatBounds(controlBounds),
     cool: getCoolBounds(controlBounds),
 });
+export const getSupportedThermostatModes = (device) => {
+    const allModes = ['heat', 'cool', 'heat_cool', 'off'];
+    return allModes.filter((mode) => {
+        switch (mode) {
+            case 'cool':
+                return device.properties.is_cooling_available;
+            case 'heat':
+                return device.properties.is_heating_available;
+            case 'heat_cool':
+                return (device.properties.is_heating_available &&
+                    device.properties.is_cooling_available);
+            default:
+                return true;
+        }
+    });
+};
 //# sourceMappingURL=temperature-bounds.js.map

package/lib/temperature-bounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"temperature-bounds.js","sourceRoot":"","sources":["../src/lib/temperature-bounds.ts"],"names":[],"mappings":"AAqBA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,GAC0B,EAAU,EAAE;IAC3C,MAAM,aAAa,GACjB,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7E,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,GAC0B,EAAU,EAAE;IAC3C,MAAM,aAAa,GACjB,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7E,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,aAA4B,EACT,EAAE,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC;CACnC,CAAC,CAAA"}
+{"version":3,"file":"temperature-bounds.js","sourceRoot":"","sources":["../src/lib/temperature-bounds.ts"],"names":[],"mappings":"AAqBA,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,GAC0B,EAAU,EAAE;IAC3C,MAAM,aAAa,GACjB,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7E,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,KAAK,GAC0B,EAAU,EAAE;IAC3C,MAAM,aAAa,GACjB,IAAI,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7E,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,EAAE,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,aAA4B,EACT,EAAE,CAAC,CAAC;IACvB,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC;IAClC,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC;CACnC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,MAAwB,EACL,EAAE;IACrB,MAAM,QAAQ,GAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAA;IAExE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;QAC9B,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAA;YAC/C,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAA;YAC/C,KAAK,WAAW;gBACd,OAAO,CACL,MAAM,CAAC,UAAU,CAAC,oBAAoB;oBACtC,MAAM,CAAC,UAAU,CAAC,oBAAoB,CACvC,CAAA;YACH;gBACE,OAAO,IAAI,CAAA;QACf,CAAC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/lib/ui/layout/AccordionRow.d.ts

@@ -1,7 +1,8 @@
 import type { PropsWithChildren } from 'react';
 interface AccordionRowProps extends PropsWithChildren {
     label: string;
+    leftContent?: JSX.Element;
     rightCollapsedContent?: JSX.Element;
 }
-export declare function AccordionRow({ label, rightCollapsedContent, children, }: AccordionRowProps): JSX.Element;
+export declare function AccordionRow({ label, leftContent, rightCollapsedContent, children, }: AccordionRowProps): JSX.Element;
 export {};

package/lib/ui/layout/AccordionRow.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronWideIcon } from '../../../lib/icons/ChevronWide.js';
 import { useToggle } from '../../../lib/ui/use-toggle.js';
-export function AccordionRow({ label, rightCollapsedContent, children, }) {
+export function AccordionRow({ label, leftContent, rightCollapsedContent, children, }) {
     const [isExpanded, toggle] = useToggle();
-    return (_jsxs("div", { className: 'seam-accordion-row', "aria-expanded": isExpanded, children: [_jsxs("button", { className: 'seam-accordion-row-trigger', onClick: toggle, children: [_jsx("p", { className: 'seam-row-label', children: label }), _jsxs("div", { className: 'seam-row-inner-wrap', children: [_jsx("div", { className: 'seam-row-trigger-right-content', children: rightCollapsedContent }), _jsx("div", { className: 'seam-accordion-icon-wrap', children: _jsx(ChevronWideIcon, {}) })] })] }), _jsx("div", { className: 'seam-accordion-row-content', children: _jsx("div", { className: 'seam-accordion-row-inner-content', children: children }) })] }));
+    return (_jsxs("div", { className: 'seam-accordion-row', "aria-expanded": isExpanded, children: [_jsxs("button", { className: 'seam-accordion-row-trigger', onClick: toggle, children: [_jsxs("div", { className: 'seam-row-inner-wrap', children: [_jsx("p", { className: 'seam-row-label', children: label }), _jsx("div", { className: 'seam-row-trigger-left-content', children: leftContent })] }), _jsxs("div", { className: 'seam-row-inner-wrap', children: [_jsx("div", { className: 'seam-row-trigger-right-content', children: rightCollapsedContent }), _jsx("div", { className: 'seam-accordion-icon-wrap', children: _jsx(ChevronWideIcon, {}) })] })] }), _jsx("div", { className: 'seam-accordion-row-content', children: _jsx("div", { className: 'seam-accordion-row-inner-content', children: children }) })] }));
 }
 //# sourceMappingURL=AccordionRow.js.map

package/lib/ui/layout/AccordionRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionRow.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/AccordionRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAOhD,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,qBAAqB,EACrB,QAAQ,GACU;IAClB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,SAAS,EAAE,CAAA;IAExC,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,mBAAgB,UAAU,aAC3D,kBAAQ,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,aAC5D,YAAG,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAK,EACzC,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,gCAAgC,YAC5C,qBAAqB,GAClB,EACN,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,eAAe,KAAG,GACf,IACF,IACC,EACT,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,kCAAkC,YAAE,QAAQ,GAAO,GAC9D,IACF,CACP,CAAA;AACH,CAAC"}
+{"version":3,"file":"AccordionRow.js","sourceRoot":"","sources":["../../../src/lib/ui/layout/AccordionRow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAQhD,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,qBAAqB,EACrB,QAAQ,GACU;IAClB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,SAAS,EAAE,CAAA;IAExC,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,mBAAgB,UAAU,aAC3D,kBAAQ,SAAS,EAAC,4BAA4B,EAAC,OAAO,EAAE,MAAM,aAC5D,eAAK,SAAS,EAAC,qBAAqB,aAClC,YAAG,SAAS,EAAC,gBAAgB,YAAE,KAAK,GAAK,EACzC,cAAK,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAO,IAC9D,EACN,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,gCAAgC,YAC5C,qBAAqB,GAClB,EACN,cAAK,SAAS,EAAC,0BAA0B,YACvC,KAAC,eAAe,KAAG,GACf,IACF,IACC,EACT,cAAK,SAAS,EAAC,4BAA4B,YACzC,cAAK,SAAS,EAAC,kCAAkC,YAAE,QAAQ,GAAO,GAC9D,IACF,CACP,CAAA;AACH,CAAC"}

package/lib/ui/thermostat/ClimateModeMenu.d.ts

@@ -3,6 +3,7 @@ import type { HvacModeSetting } from 'seamapi';
 interface ClimateModeMenuProps {
     mode: HvacModeSetting;
     onChange: (mode: HvacModeSetting) => void;
+    supportedModes?: HvacModeSetting[];
 }
-export declare function ClimateModeMenu({ mode, onChange, }: ClimateModeMenuProps): JSX.Element;
+export declare function ClimateModeMenu({ mode, onChange, supportedModes, }: ClimateModeMenuProps): JSX.Element;
 export {};

package/lib/ui/thermostat/ClimateModeMenu.js

@@ -6,11 +6,10 @@ import { ThermostatHeatIcon } from '../../../lib/icons/ThermostatHeat.js';
 import { ThermostatHeatCoolIcon } from '../../../lib/icons/ThermostatHeatCool.js';
 import { Menu } from '../../../lib/ui/Menu/Menu.js';
 import { ThermoModeMenuOption } from '../../../lib/ui/thermostat/ThermoModeMenuOption.js';
-const modes = ['heat', 'cool', 'heat_cool', 'off'];
-export function ClimateModeMenu({ mode, onChange, }) {
+export function ClimateModeMenu({ mode, onChange, supportedModes = ['heat', 'cool', 'heat_cool', 'off'], }) {
     return (_jsx(Menu, { renderButton: ({ onOpen }) => (_jsxs("button", { onClick: onOpen, className: 'seam-climate-mode-menu-button', children: [_jsx("div", { className: 'seam-climate-mode-menu-button-icon', children: _jsx(ModeIcon, { mode: mode }) }), _jsx(ChevronDownIcon, {})] })), verticalOffset: -180, horizontalOffset: -32, backgroundProps: {
             className: 'seam-thermo-mode-menu',
-        }, children: modes.map((m) => (_jsx(ThermoModeMenuOption, { label: t[m], icon: _jsx(ModeIcon, { mode: m }), isSelected: mode === m, onClick: () => {
+        }, children: supportedModes.map((m) => (_jsx(ThermoModeMenuOption, { label: t[m], icon: _jsx(ModeIcon, { mode: m }), isSelected: mode === m, onClick: () => {
                 onChange(m);
             } }, m))) }));
 }

package/lib/ui/thermostat/ClimateModeMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClimateModeMenu.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/ClimateModeMenu.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAA;AAEhF,MAAM,KAAK,GAAsB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,CAAA;AAOrE,MAAM,UAAU,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,GACa;IACrB,OAAO,CACL,KAAC,IAAI,IACH,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC5B,kBAAQ,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,+BAA+B,aAChE,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,GACpB,EACN,KAAC,eAAe,KAAG,IACZ,CACV,EACD,cAAc,EAAE,CAAC,GAAG,EACpB,gBAAgB,EAAE,CAAC,EAAE,EACrB,eAAe,EAAE;YACf,SAAS,EAAE,uBAAuB;SACnC,YAEA,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAChB,KAAC,oBAAoB,IAEnB,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EACX,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,CAAC,GAAI,EAC3B,UAAU,EAAE,IAAI,KAAK,CAAC,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,CAAC,CAAC,CAAA;YACb,CAAC,IANI,CAAC,CAON,CACH,CAAC,GACG,CACR,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAgC;IAChD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,MAAM;YACT,OAAO,KAAC,kBAAkB,KAAG,CAAA;QAC/B,KAAK,MAAM;YACT,OAAO,KAAC,kBAAkB,KAAG,CAAA;QAC/B,KAAK,WAAW;YACd,OAAO,KAAC,sBAAsB,KAAG,CAAA;QACnC,KAAK,KAAK;YACR,OAAO,KAAC,OAAO,KAAG,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,aAAa;IACxB,GAAG,EAAE,KAAK;CACX,CAAA"}
+{"version":3,"file":"ClimateModeMenu.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/ClimateModeMenu.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAA;AAQhF,MAAM,UAAU,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,GAChC;IACrB,OAAO,CACL,KAAC,IAAI,IACH,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAC5B,kBAAQ,OAAO,EAAE,MAAM,EAAE,SAAS,EAAC,+BAA+B,aAChE,cAAK,SAAS,EAAC,oCAAoC,YACjD,KAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,GAAI,GACpB,EACN,KAAC,eAAe,KAAG,IACZ,CACV,EACD,cAAc,EAAE,CAAC,GAAG,EACpB,gBAAgB,EAAE,CAAC,EAAE,EACrB,eAAe,EAAE;YACf,SAAS,EAAE,uBAAuB;SACnC,YAEA,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACzB,KAAC,oBAAoB,IAEnB,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,EACX,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,CAAC,GAAI,EAC3B,UAAU,EAAE,IAAI,KAAK,CAAC,EACtB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,CAAC,CAAC,CAAA;YACb,CAAC,IANI,CAAC,CAON,CACH,CAAC,GACG,CACR,CAAA;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,KAAgC;IAChD,QAAQ,KAAK,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,MAAM;YACT,OAAO,KAAC,kBAAkB,KAAG,CAAA;QAC/B,KAAK,MAAM;YACT,OAAO,KAAC,kBAAkB,KAAG,CAAA;QAC/B,KAAK,WAAW;YACd,OAAO,KAAC,sBAAsB,KAAG,CAAA;QACnC,KAAK,KAAK;YACR,OAAO,KAAC,OAAO,KAAG,CAAA;IACtB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,aAAa;IACxB,GAAG,EAAE,KAAK;CACX,CAAA"}

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "2.8.7";
+declare const seamapiReactVersion = "2.10.0";
 export default seamapiReactVersion;

package/lib/version.js

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.8.7';
+const seamapiReactVersion = '2.10.0';
 export default seamapiReactVersion;
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG,OAAO,CAAA;AAEnC,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,mBAAmB,GAAG,QAAQ,CAAA;AAEpC,eAAe,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "2.8.7",
+  "version": "2.10.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",
@@ -132,7 +132,7 @@
     "luxon": "^3.3.0",
     "queue": "^7.0.0",
     "react-hook-form": "^7.46.1",
-    "seamapi": "^8.19.0",
+    "seamapi": "^8.21.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
@@ -141,7 +141,7 @@
     "@mui/material": "^5.12.2",
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.6.0",
-    "@seamapi/fake-seam-connect": "^1.44.3",
+    "@seamapi/fake-seam-connect": "^1.60.2",
     "@seamapi/http": "^0.19.0",
     "@seamapi/types": "^1.122.0",
     "@storybook/addon-designs": "^7.0.1",

package/src/lib/debounce.ts

@@ -0,0 +1,33 @@
+type Procedure = (...args: any[]) => void
+
+export function debounce<F extends Procedure>(
+  func: F,
+  waitMilliseconds: number
+): {
+  (this: ThisParameterType<F>, ...args: Parameters<F>): void
+  cancel: () => void
+} {
+  let timeoutId: ReturnType<typeof globalThis.setTimeout> | null = null
+
+  const debouncedFunction = function (
+    this: ThisParameterType<F>,
+    ...args: Parameters<F>
+  ): void {
+    if (timeoutId !== null) {
+      globalThis.clearTimeout(timeoutId)
+    }
+    timeoutId = globalThis.setTimeout(() => {
+      timeoutId = null
+      func.apply(this, args)
+    }, waitMilliseconds)
+  }
+
+  debouncedFunction.cancel = (): void => {
+    if (timeoutId !== null) {
+      globalThis.clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  return debouncedFunction
+}

package/src/lib/element.tsx

@@ -46,6 +46,7 @@ const commonProps: R2wcProps<CommonProps> = {
   disableEditAccessCode: 'boolean',
   disableDeleteAccessCode: 'boolean',
   disableResourceIds: 'boolean',
+  disableClimateSettingSchedules: 'boolean',
   onBack: 'object',
   className: 'string',
 }

package/src/lib/seam/components/AccessCodeDetails/AccessCodeDetails.tsx

@@ -43,6 +43,7 @@ export function AccessCodeDetails({
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableClimateSettingSchedules,
   onBack,
   className,
 }: AccessCodeDetailsProps): JSX.Element | null {
@@ -69,6 +70,7 @@ export function AccessCodeDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           selectDevice(null)
         }}

package/src/lib/seam/components/AccessCodeTable/AccessCodeTable.tsx

@@ -84,6 +84,7 @@ export function AccessCodeTable({
   disableLockUnlock = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableClimateSettingSchedules,
 }: AccessCodeTableProps): JSX.Element {
   useComponentTelemetry('AccessCodeTable')
 
@@ -147,6 +148,7 @@ export function AccessCodeTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedEditAccessCodeId(null)
         }}
@@ -182,6 +184,7 @@ export function AccessCodeTable({
           disableEditAccessCode={disableEditAccessCode}
           disableDeleteAccessCode={disableDeleteAccessCode}
           disableResourceIds={disableResourceIds}
+          disableClimateSettingSchedules={disableClimateSettingSchedules}
           onBack={() => {
             setSelectedViewAccessCodeId(null)
           }}
@@ -202,6 +205,7 @@ export function AccessCodeTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={toggleAddAccessCodeForm}
         className={className}
         onSuccess={() => {

package/src/lib/seam/components/ClimateSettingScheduleDetails/ClimateSettingScheduleDetails.tsx

@@ -38,6 +38,7 @@ export function ClimateSettingScheduleDetails({
   disableCreateAccessCode,
   disableEditAccessCode,
   disableResourceIds = false,
+  disableClimateSettingSchedules,
 }: ClimateSettingScheduleDetailsProps): JSX.Element | null {
   useComponentTelemetry('ClimateSettingScheduleDetails')
 
@@ -65,6 +66,7 @@ export function ClimateSettingScheduleDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           selectDevice(null)
         }}

package/src/lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.tsx

@@ -72,6 +72,7 @@ export function ClimateSettingScheduleTable({
   disableCreateAccessCode,
   disableEditAccessCode,
   disableResourceIds = false,
+  disableClimateSettingSchedules,
 }: ClimateSettingScheduleTableProps): JSX.Element {
   useComponentTelemetry('ClimateSettingScheduleTable')
 
@@ -125,6 +126,7 @@ export function ClimateSettingScheduleTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedViewClimateSettingScheduleId(null)
         }}

package/src/lib/seam/components/DeviceDetails/DeviceDetails.tsx

@@ -23,6 +23,7 @@ export function DeviceDetails({
   disableResourceIds = false,
   disableCreateAccessCode = false,
   disableEditAccessCode = false,
+  disableClimateSettingSchedules = false,
   onBack,
   className,
 }: DeviceDetailsProps): JSX.Element | null {
@@ -36,12 +37,13 @@ export function DeviceDetails({
     return null
   }
 
-  const props = {
+  const props: Omit<DeviceDetailsProps, 'deviceId'> = {
     disableLockUnlock,
     disableDeleteAccessCode,
     disableResourceIds,
     disableCreateAccessCode,
     disableEditAccessCode,
+    disableClimateSettingSchedules,
     onBack,
     className,
   }

package/src/lib/seam/components/DeviceDetails/LockDeviceDetails.tsx

@@ -32,6 +32,7 @@ export function LockDeviceDetails(
     disableEditAccessCode,
     disableDeleteAccessCode,
     disableResourceIds,
+    disableClimateSettingSchedules,
     onBack,
     className,
   } = props
@@ -62,6 +63,7 @@ export function LockDeviceDetails(
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={toggleAccessCodesOpen}
         className={className}
       />

package/src/lib/seam/components/DeviceDetails/ThermostatDeviceDetails.tsx

@@ -1,23 +1,33 @@
 import classNames from 'classnames'
-import { useState } from 'react'
-import type { ThermostatDevice } from 'seamapi'
+import { useEffect, useState } from 'react'
+import type { HvacModeSetting, ThermostatDevice } from 'seamapi'
 
+import { debounce } from 'lib/debounce.js'
 import { BeeIcon } from 'lib/icons/Bee.js'
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
 import { ChevronWideIcon } from 'lib/icons/ChevronWide.js'
 import { NestedClimateSettingScheduleTable } from 'lib/seam/components/ClimateSettingScheduleTable/ClimateSettingScheduleTable.js'
 import type { CommonProps } from 'lib/seam/components/common-props.js'
 import { useConnectedAccount } from 'lib/seam/connected-accounts/use-connected-account.js'
 import { useClimateSettingSchedules } from 'lib/seam/thermostats/climate-setting-schedules/use-climate-setting-schedules.js'
+import { useCoolThermostat } from 'lib/seam/thermostats/use-cool-thermostat.js'
+import { useHeatCoolThermostat } from 'lib/seam/thermostats/use-heat-cool-thermostat.js'
+import { useHeatThermostat } from 'lib/seam/thermostats/use-heat-thermostat.js'
+import { useSetThermostatOff } from 'lib/seam/thermostats/use-set-thermostat-off.js'
 import { useUpdateFanMode } from 'lib/seam/thermostats/use-update-fan-mode.js'
 import { useUpdateThermostat } from 'lib/seam/thermostats/use-update-thermostat.js'
+import { getSupportedThermostatModes } from 'lib/temperature-bounds.js'
+import { AccordionRow } from 'lib/ui/layout/AccordionRow.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { DetailRow } from 'lib/ui/layout/DetailRow.js'
 import { DetailSection } from 'lib/ui/layout/DetailSection.js'
 import { DetailSectionGroup } from 'lib/ui/layout/DetailSectionGroup.js'
 import { Snackbar } from 'lib/ui/Snackbar/Snackbar.js'
 import { Switch } from 'lib/ui/Switch/Switch.js'
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
 import { ClimateSettingStatus } from 'lib/ui/thermostat/ClimateSettingStatus.js'
 import { FanModeMenu } from 'lib/ui/thermostat/FanModeMenu.js'
+import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
 import { ThermostatCard } from 'lib/ui/thermostat/ThermostatCard.js'
 
 interface ThermostatDeviceDetailsProps extends CommonProps {
@@ -35,6 +45,7 @@ export function ThermostatDeviceDetails({
   disableEditAccessCode,
   disableDeleteAccessCode,
   disableResourceIds = false,
+  disableClimateSettingSchedules = false,
 }: ThermostatDeviceDetailsProps): JSX.Element | null {
   const [climateSettingsOpen, setClimateSettingsOpen] = useState(false)
 
@@ -55,6 +66,7 @@ export function ThermostatDeviceDetails({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setClimateSettingsOpen(false)
         }}
@@ -81,36 +93,33 @@ export function ThermostatDeviceDetails({
 
         <div className='seam-thermostat-device-details'>
           <DetailSectionGroup>
-            <DetailSection
-              label={t.scheduledClimates}
-              tooltipContent={t.scheduledClimatesTooltip}
-            >
-              <DetailRow
-                label={
-                  climateSettingSchedules == null
-                    ? t.viewingClimateSchedules
-                    : `${climateSettingSchedules.length} ${climateSettingSchedulesLabel}`
-                }
-                onClick={() => {
-                  setClimateSettingsOpen(true)
-                }}
+            {!disableClimateSettingSchedules && (
+              <DetailSection
+                label={t.scheduledClimates}
+                tooltipContent={t.scheduledClimatesTooltip}
               >
-                <div className='seam-detail-row-rotated-icon'>
-                  <ChevronWideIcon />
-                </div>
-              </DetailRow>
-            </DetailSection>
+                <DetailRow
+                  label={
+                    climateSettingSchedules == null
+                      ? t.viewingClimateSchedules
+                      : `${climateSettingSchedules.length} ${climateSettingSchedulesLabel}`
+                  }
+                  onClick={() => {
+                    setClimateSettingsOpen(true)
+                  }}
+                >
+                  <div className='seam-detail-row-rotated-icon'>
+                    <ChevronWideIcon />
+                  </div>
+                </DetailRow>
+              </DetailSection>
+            )}
 
             <DetailSection
               label={t.currentSettings}
               tooltipContent={t.currentSettingsTooltip}
             >
-              <DetailRow label={t.climate}>
-                <ClimateSettingStatus
-                  climateSetting={device.properties.current_climate_setting}
-                  temperatureUnit='fahrenheit'
-                />
-              </DetailRow>
+              <ClimateSettingRow device={device} />
               <FanModeRow device={device} />
             </DetailSection>
 
@@ -239,6 +248,191 @@ function FanModeRow({ device }: { device: ThermostatDevice }): JSX.Element {
   )
 }
 
+function ClimateSettingRow({
+  device,
+}: {
+  device: ThermostatDevice
+}): JSX.Element {
+  const deviceHeatValue =
+    device.properties.current_climate_setting.heating_set_point_fahrenheit
+  const deviceCoolValue =
+    device.properties.current_climate_setting.cooling_set_point_fahrenheit
+
+  const supportedModes = getSupportedThermostatModes(device)
+
+  const [showSuccess, setShowSuccess] = useState(false)
+  const [mode, setMode] = useState<HvacModeSetting>(
+    (supportedModes.includes('heat_cool') ? 'heat_cool' : supportedModes[0]) ??
+      'off'
+  )
+
+  const [heatValue, setHeatValue] = useState(
+    device.properties.current_climate_setting.heating_set_point_fahrenheit ?? 0
+  )
+
+  const [coolValue, setCoolValue] = useState(
+    device.properties.current_climate_setting.cooling_set_point_fahrenheit ?? 0
+  )
+
+  const {
+    mutate: heatCoolThermostat,
+    isSuccess: isHeatCoolSuccess,
+    isError: isHeatCoolError,
+  } = useHeatCoolThermostat()
+
+  const {
+    mutate: heatThermostat,
+    isSuccess: isHeatSuccess,
+    isError: isHeatError,
+  } = useHeatThermostat()
+
+  const {
+    mutate: coolThermostat,
+    isSuccess: isCoolSuccess,
+    isError: isCoolError,
+  } = useCoolThermostat()
+
+  const {
+    mutate: setThermostatOff,
+    isSuccess: isSetOffSuccess,
+    isError: isSetOffError,
+  } = useSetThermostatOff()
+
+  useEffect(() => {
+    const handler = debounce(() => {
+      switch (mode) {
+        case 'heat_cool':
+          heatCoolThermostat({
+            device_id: device.device_id,
+            heating_set_point_fahrenheit: heatValue,
+            cooling_set_point_fahrenheit: coolValue,
+          })
+          break
+        case 'heat':
+          heatThermostat({
+            device_id: device.device_id,
+            heating_set_point_fahrenheit: heatValue,
+          })
+          break
+        case 'cool':
+          coolThermostat({
+            device_id: device.device_id,
+            cooling_set_point_fahrenheit: coolValue,
+          })
+          break
+        case 'off':
+          setThermostatOff({
+            device_id: device.device_id,
+          })
+          break
+      }
+    }, 2000)
+
+    if (
+      heatValue !== deviceHeatValue ||
+      coolValue !== deviceCoolValue ||
+      mode === 'off'
+    ) {
+      handler()
+    }
+
+    return () => {
+      handler.cancel()
+    }
+  }, [
+    heatValue,
+    coolValue,
+    mode,
+    deviceHeatValue,
+    deviceCoolValue,
+    device,
+    heatThermostat,
+    coolThermostat,
+    heatCoolThermostat,
+    setThermostatOff,
+  ])
+
+  useEffect(() => {
+    if (
+      isHeatCoolSuccess ||
+      isHeatSuccess ||
+      isCoolSuccess ||
+      isSetOffSuccess
+    ) {
+      setShowSuccess(true)
+
+      const timeout = globalThis.setTimeout(() => {
+        setShowSuccess(false)
+      }, 3000)
+
+      return () => {
+        globalThis.clearTimeout(timeout)
+      }
+    }
+
+    return () => {}
+  }, [isHeatCoolSuccess, isHeatSuccess, isCoolSuccess, isSetOffSuccess])
+
+  return (
+    <>
+      <AccordionRow
+        label={t.climate}
+        leftContent={
+          <div
+            className={classNames('seam-thermostat-mutation-status', {
+              'is-visible': showSuccess,
+            })}
+          >
+            <div className='seam-thermostat-mutation-status-icon'>
+              <CheckBlackIcon />
+            </div>
+            <div className='seam-thermostat-mutation-status-label'>
+              {t.saved}
+            </div>
+          </div>
+        }
+        rightCollapsedContent={
+          <ClimateSettingStatus
+            climateSetting={device.properties.current_climate_setting}
+            temperatureUnit='fahrenheit'
+          />
+        }
+      >
+        <div className='seam-detail-row-end-alignment'>
+          {mode !== 'off' && (
+            <TemperatureControlGroup
+              mode={mode}
+              heatValue={heatValue}
+              coolValue={coolValue}
+              onHeatValueChange={setHeatValue}
+              onCoolValueChange={setCoolValue}
+              delta={
+                Number(
+                  'min_heating_cooling_delta_fahrenheit' in device.properties &&
+                    device.properties.min_heating_cooling_delta_fahrenheit
+                ) ?? 0
+              }
+            />
+          )}
+
+          <ClimateModeMenu
+            mode={mode}
+            onChange={setMode}
+            supportedModes={supportedModes}
+          />
+        </div>
+      </AccordionRow>
+
+      <Snackbar
+        message={t.climateSettingError}
+        variant='error'
+        visible={isHeatCoolError || isHeatError || isCoolError || isSetOffError}
+        automaticVisibility
+      />
+    </>
+  )
+}
+
 const t = {
   thermostat: 'Thermostat',
   climateSchedule: 'scheduled climate',
@@ -266,4 +460,6 @@ const t = {
   fanModeError: 'Error updating fan mode. Please try again.',
   manualOverrideSuccess: 'Successfully updated manual override!',
   manualOverrideError: 'Error updating manual override. Please try again.',
+  climateSettingError: 'Error updating climate setting. Please try again.',
+  saved: 'Saved',
 }

package/src/lib/seam/components/DeviceTable/DeviceTable.tsx

@@ -70,6 +70,7 @@ export function DeviceTable({
   disableEditAccessCode = false,
   disableDeleteAccessCode = false,
   disableResourceIds = false,
+  disableClimateSettingSchedules = false,
   onBack,
   className,
 }: DeviceTableProps = {}): JSX.Element {
@@ -112,6 +113,7 @@ export function DeviceTable({
         disableEditAccessCode={disableEditAccessCode}
         disableDeleteAccessCode={disableDeleteAccessCode}
         disableResourceIds={disableResourceIds}
+        disableClimateSettingSchedules={disableClimateSettingSchedules}
         onBack={() => {
           setSelectedDeviceId(null)
         }}

package/src/lib/seam/components/common-props.tsx

@@ -18,6 +18,7 @@ export interface RequiredCommonProps {
   disableEditAccessCode: boolean | undefined
   disableLockUnlock: boolean | undefined
   disableResourceIds: boolean | undefined
+  disableClimateSettingSchedules: boolean | undefined
 }
 
 export type CommonProps = Partial<RequiredCommonProps>