@seamapi/react 2.0.2 → 2.1.0

package/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { getSystemTimeZone } from '../../../lib/dates.js';
+import { ClimateSettingScheduleFormClimateSetting } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js';
 import { ClimateSettingScheduleFormDeviceSelect } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js';
 import { ClimateSettingScheduleFormNameAndSchedule } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.js';
 import { ClimateSettingScheduleFormTimeZonePicker } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimeZonePicker.js';
@@ -10,13 +11,18 @@ export function ClimateSettingScheduleForm({ className, ...props }) {
     return (_jsx("div", { className: classNames('seam-climate-setting-schedule-form', className), children: _jsx(Content, { ...props }) }));
 }
 function Content({ onBack, }) {
-    const { control, watch } = useForm({
+    const { control, watch, resetField } = useForm({
         defaultValues: {
             deviceId: '',
             name: '',
             startDate: '',
             endDate: '',
             timeZone: getSystemTimeZone(),
+            hvacModeSetting: 'heat_cool',
+            setPoints: {
+                heatingSetPoint: 70,
+                coolingSetPoint: 75,
+            },
         },
     });
     const deviceId = watch('deviceId');
@@ -41,6 +47,11 @@ function Content({ onBack, }) {
                 setPage('name_and_schedule');
             } }));
     }
+    if (page === 'climate_setting') {
+        return (_jsx(ClimateSettingScheduleFormClimateSetting, { title: t.addNewClimateSettingSchedule, control: control, watch: watch, resetField: resetField, deviceId: deviceId, onBack: () => {
+                setPage('name_and_schedule');
+            }, onCancel: onBack, onSave: () => { } }));
+    }
     return _jsx(_Fragment, {});
 }
 export const t = {

package/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ClimateSettingScheduleForm.js","sourceRoot":"","sources":["../../../src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAGzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,sCAAsC,EAAE,MAAM,qEAAqE,CAAA;AAC5H,OAAO,EAAE,yCAAyC,EAAE,MAAM,wEAAwE,CAAA;AAClI,OAAO,EAAE,wCAAwC,EAAE,MAAM,uEAAuE,CAAA;AA0BhI,MAAM,UAAU,0BAA0B,CAAC,EACzC,SAAS,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACL,cACE,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,SAAS,CAAC,YAEtE,KAAC,OAAO,OAAK,KAAK,GAAI,GAClB,CACP,CAAA;AACH,CAAC;AAED,SAAS,OAAO,CAAC,EACf,MAAM,GAC6C;IACnD,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC;QACjC,aAAa,EAAE;YACb,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,EAAE;YACR,SAAS,EAAE,EAAE;YACb,OAAO,EAAE,EAAE;YACX,QAAQ,EAAE,iBAAiB,EAAE;SAC9B;KACF,CAAC,CAAA;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;IAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAA;IAElC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAM9B,eAAe,CAAC,CAAA;IAElB,IAAI,IAAI,KAAK,eAAe,EAAE;QAC5B,OAAO,CACL,KAAC,sCAAsC,IACrC,KAAK,EAAE,CAAC,CAAC,4BAA4B,EACrC,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,GAAG,EAAE;gBACb,OAAO,CAAC,mBAAmB,CAAC,CAAA;YAC9B,CAAC,GACD,CACH,CAAA;KACF;IAED,IAAI,IAAI,KAAK,mBAAmB,EAAE;QAChC,OAAO,CACL,KAAC,yCAAyC,IACxC,KAAK,EAAE,CAAC,CAAC,4BAA4B,EACrC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,GAAG,EAAE;gBACX,OAAO,CAAC,eAAe,CAAC,CAAA;YAC1B,CAAC,EACD,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,GAAG,EAAE;gBACX,OAAO,CAAC,iBAAiB,CAAC,CAAA;YAC5B,CAAC,EACD,gBAAgB,EAAE,GAAG,EAAE;gBACrB,OAAO,CAAC,kBAAkB,CAAC,CAAA;YAC7B,CAAC,EACD,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;KACF;IAED,IAAI,IAAI,KAAK,kBAAkB,EAAE;QAC/B,OAAO,CACL,KAAC,wCAAwC,IACvC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE;gBACZ,OAAO,CAAC,mBAAmB,CAAC,CAAA;YAC9B,CAAC,GACD,CACH,CAAA;KACF;IAED,OAAO,mBAAK,CAAA;AACd,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,GAAG;IACf,4BAA4B,EAAE,gCAAgC;CAC/D,CAAA"}
+{"version":3,"file":"ClimateSettingScheduleForm.js","sourceRoot":"","sources":["../../../src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx"],"names":[],"mappings":"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"}

package/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type Control, type UseFormResetField, type UseFormWatch } from 'react-hook-form';
+import type { ClimateSettingScheduleFormFields } from '../../../lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js';
+interface ClimateSettingScheduleFormClimateSettingProps {
+    title: string;
+    control: Control<ClimateSettingScheduleFormFields>;
+    watch: UseFormWatch<ClimateSettingScheduleFormFields>;
+    resetField: UseFormResetField<ClimateSettingScheduleFormFields>;
+    deviceId: string;
+    onBack: () => void;
+    onCancel: (() => void) | undefined;
+    onSave: () => void;
+}
+export declare function ClimateSettingScheduleFormClimateSetting({ title, control, watch, resetField, deviceId, onBack, onCancel, onSave, }: ClimateSettingScheduleFormClimateSettingProps): JSX.Element;
+export {};

package/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Controller, } from 'react-hook-form';
+import { useDevice } from '../../../lib/seam/devices/use-device.js';
+import { Button } from '../../../lib/ui/Button.js';
+import { FormField } from '../../../lib/ui/FormField.js';
+import { InputLabel } from '../../../lib/ui/InputLabel.js';
+import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
+import { ClimateModeMenu } from '../../../lib/ui/thermostat/ClimateModeMenu.js';
+import { TemperatureControlGroup } from '../../../lib/ui/thermostat/TemperatureControlGroup.js';
+export function ClimateSettingScheduleFormClimateSetting({ title, control, watch, resetField, deviceId, onBack, onCancel, onSave, }) {
+    const { device } = useDevice({
+        device_id: deviceId,
+    });
+    const hvacModeSetting = watch('hvacModeSetting');
+    return (_jsxs(_Fragment, { children: [_jsx(ContentHeader, { title: title, onBack: onBack, subheading: device?.properties.name }), _jsxs("div", { className: 'seam-main', children: [_jsx("div", { className: 'seam-climate-setting-schedule-form-climate-setting', children: _jsxs("div", { className: 'seam-content', children: [_jsxs("div", { children: [_jsx(InputLabel, { children: t.climateSetting }), _jsx("span", { className: 'seam-label', children: t.climateSettingSubHeading })] }), _jsx(FormContent, { control: control, resetField: resetField, hvacModeSetting: hvacModeSetting })] }) }), _jsxs("div", { className: 'seam-actions', children: [_jsx(Button, { onClick: onCancel, children: t.cancel }), _jsx(Button, { variant: 'solid', onClick: onSave, children: t.save })] })] })] }));
+}
+function FormContent({ control, resetField, hvacModeSetting, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(FormField, { children: _jsx(Controller, { name: 'hvacModeSetting', control: control, render: ({ field: { value, onChange } }) => {
+                        return (_jsx(ClimateModeMenu, { mode: value, onChange: (mode) => {
+                                resetField('setPoints');
+                                onChange(mode);
+                            } }));
+                    } }) }), hvacModeSetting !== 'off' && (_jsx(FormField, { className: 'seam-climate-setting-slider-container', children: _jsx(Controller, { name: 'setPoints', control: control, render: ({ field: { value, onChange } }) => (_jsx(TemperatureControlGroup, { coolValue: value.coolingSetPoint, heatValue: value.heatingSetPoint, delta: 5, maxCool: 90, maxHeat: 100, minCool: 50, minHeat: 70, mode: hvacModeSetting, onCoolValueChange: (coolingSetPoint) => {
+                            onChange({
+                                ...value,
+                                coolingSetPoint,
+                            });
+                        }, onHeatValueChange: (heatingSetPoint) => {
+                            onChange({
+                                ...value,
+                                heatingSetPoint,
+                            });
+                        } })) }) }))] }));
+}
+const t = {
+    climateSetting: 'Climate setting',
+    climateSettingSubHeading: 'Choose mode and adjust the climate',
+    cancel: 'Cancel',
+    save: 'Save',
+    next: 'Next',
+};
+//# sourceMappingURL=ClimateSettingScheduleFormClimateSetting.js.map

package/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClimateSettingScheduleFormClimateSetting.js","sourceRoot":"","sources":["../../../src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" resolution-mode="require"/>
+import type { HvacModeSetting } from 'seamapi';
+import { type TemperatureControlGroupProps } from '../../../lib/ui/thermostat/TemperatureControlGroup.js';
+type ClimateSettingControlGroupProps = Omit<TemperatureControlGroupProps, 'mode'> & {
+    mode: HvacModeSetting;
+    onModeChange: (mode: HvacModeSetting) => void;
+};
+export declare function ClimateSettingControlGroup(props: ClimateSettingControlGroupProps): JSX.Element;
+export {};

package/lib/ui/thermostat/ClimateSettingControlGroup.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ClimateModeMenu } from '../../../lib/ui/thermostat/ClimateModeMenu.js';
+import { TemperatureControlGroup, } from '../../../lib/ui/thermostat/TemperatureControlGroup.js';
+export function ClimateSettingControlGroup(props) {
+    const { mode, onModeChange, ...rest } = props;
+    return (_jsxs("div", { className: 'seam-climate-setting-control-group', children: [_jsx(ClimateModeMenu, { mode: mode, onChange: onModeChange }), mode !== 'off' && (_jsx("div", { className: 'seam-climate-setting-slider-container', children: _jsx(TemperatureControlGroup, { mode: mode, ...rest }) }))] }));
+}
+//# sourceMappingURL=ClimateSettingControlGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClimateSettingControlGroup.js","sourceRoot":"","sources":["../../../src/lib/ui/thermostat/ClimateSettingControlGroup.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,OAAO,EACL,uBAAuB,GAExB,MAAM,8CAA8C,CAAA;AAUrD,MAAM,UAAU,0BAA0B,CACxC,KAAsC;IAEtC,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC7C,OAAO,CACL,eAAK,SAAS,EAAC,oCAAoC,aACjD,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,GAAI,EAEtD,IAAI,KAAK,KAAK,IAAI,CACjB,cAAK,SAAS,EAAC,uCAAuC,YACpD,KAAC,uBAAuB,IAAC,IAAI,EAAE,IAAI,KAAM,IAAI,GAAI,GAC7C,CACP,IACG,CACP,CAAA;AACH,CAAC"}

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

@@ -1,6 +1,6 @@
 /// <reference types="react" resolution-mode="require"/>
 import type { HvacModeSetting } from 'seamapi';
-interface TemperatureControlGroupProps {
+export interface TemperatureControlGroupProps {
     mode: Exclude<HvacModeSetting, 'off'>;
     heatValue: number;
     onHeatValueChange: (temperature: number) => void;
@@ -13,4 +13,3 @@ interface TemperatureControlGroupProps {
     maxCool: number;
 }
 export declare function TemperatureControlGroup({ mode, heatValue, onHeatValueChange, coolValue, onCoolValueChange, delta, minHeat, maxHeat, minCool, maxCool, }: TemperatureControlGroupProps): JSX.Element;
-export {};

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const seamapiReactVersion = "2.0.2";
+declare const seamapiReactVersion = "2.1.0";
 export default seamapiReactVersion;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Seam Components.",
   "type": "module",
   "main": "index.js",

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.ts

@@ -0,0 +1,9 @@
+import type { ElementProps } from 'lib/element.js'
+
+import type { SupportedDeviceTableManufacturerKeysProps } from './SupportedDeviceTableManufacturerKeys.js'
+
+export const name = 'seam-supported-device-table-manufacturer-keys'
+
+export const props: ElementProps<SupportedDeviceTableManufacturerKeysProps> = {}
+
+export { SupportedDeviceTableManufacturerKeys as Component } from './SupportedDeviceTableManufacturerKeys.js'

package/src/lib/seam/components/SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.tsx

@@ -0,0 +1,65 @@
+import type { Manufacturer } from '@seamapi/types/devicedb'
+import classNames from 'classnames'
+
+import { useComponentTelemetry } from 'lib/telemetry/index.js'
+
+import { CopyIcon } from 'lib/icons/Copy.js'
+import {
+  type CommonProps,
+  withRequiredCommonProps,
+} from 'lib/seam/components/common-props.js'
+import { copyToClipboard } from 'lib/ui/clipboard.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+import { useManufacturers } from './use-manufacturers.js'
+
+export interface SupportedDeviceTableManufacturerKeysProps
+  extends CommonProps {}
+
+export const NestedSupportedDeviceTableManufacturerKeys =
+  withRequiredCommonProps(SupportedDeviceTableManufacturerKeys)
+
+export function SupportedDeviceTableManufacturerKeys({
+  className,
+}: SupportedDeviceTableManufacturerKeysProps = {}): JSX.Element {
+  useComponentTelemetry('SupportedDeviceTableManufacturerKeys')
+
+  const { manufacturers } = useManufacturers()
+
+  return (
+    <div
+      className={classNames(
+        'supported-device-table-manufacturer-keys',
+        className
+      )}
+    >
+      {manufacturers?.map((manufacturer) => (
+        <ManufacturerKey
+          key={manufacturer.manufacturer_id}
+          manufacturer={manufacturer}
+        />
+      ))}
+    </div>
+  )
+}
+
+function ManufacturerKey({
+  manufacturer,
+}: {
+  manufacturer: Manufacturer
+}): JSX.Element {
+  const key = manufacturer.display_name
+  return (
+    <div className='seam-manufacturer-key'>
+      <div className='seam-manufacturer-key-value'>{key}</div>
+      <MenuItem
+        className='seam-copy-button'
+        onClick={() => {
+          void copyToClipboard(key)
+        }}
+      >
+        <CopyIcon />
+      </MenuItem>
+    </div>
+  )
+}

package/src/lib/seam/components/elements.ts

@@ -8,3 +8,4 @@ export * as DeviceDetails from './DeviceDetails/DeviceDetails.element.js'
 export * as DeviceTable from './DeviceTable/DeviceTable.element.js'
 export * as EditAccessCodeForm from './EditAccessCodeForm/EditAccessCodeForm.element.js'
 export * as SupportedDeviceTable from './SupportedDeviceTable/SupportedDeviceTable.element.js'
+export * as SupportedDeviceTableManufacturerKeys from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.element.js'

package/src/lib/seam/components/index.ts

@@ -9,3 +9,4 @@ export * from './DeviceDetails/DeviceDetails.js'
 export * from './DeviceTable/DeviceTable.js'
 export * from './EditAccessCodeForm/EditAccessCodeForm.js'
 export * from './SupportedDeviceTable/SupportedDeviceTable.js'
+export * from './SupportedDeviceTable/SupportedDeviceTableManufacturerKeys.js'

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
-import type { ClimateSetting } from 'seamapi'
+import type { ClimateSetting, HvacModeSetting } from 'seamapi'
 
 import { getSystemTimeZone } from 'lib/dates.js'
+import { ClimateSettingScheduleFormClimateSetting } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.js'
 import { ClimateSettingScheduleFormDeviceSelect } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormDeviceSelect.js'
 import { ClimateSettingScheduleFormNameAndSchedule } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormNameAndSchedule.js'
 import { ClimateSettingScheduleFormTimeZonePicker } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleFormTimeZonePicker.js'
@@ -30,6 +31,11 @@ export interface ClimateSettingScheduleFormFields {
   startDate: string
   endDate: string
   timeZone: string
+  hvacModeSetting: HvacModeSetting
+  setPoints: {
+    heatingSetPoint: number
+    coolingSetPoint: number
+  }
 }
 
 export function ClimateSettingScheduleForm({
@@ -48,13 +54,18 @@ export function ClimateSettingScheduleForm({
 function Content({
   onBack,
 }: Omit<ClimateSettingScheduleFormProps, 'className'>): JSX.Element {
-  const { control, watch } = useForm({
+  const { control, watch, resetField } = useForm({
     defaultValues: {
       deviceId: '',
       name: '',
       startDate: '',
       endDate: '',
       timeZone: getSystemTimeZone(),
+      hvacModeSetting: 'heat_cool' as HvacModeSetting,
+      setPoints: {
+        heatingSetPoint: 70,
+        coolingSetPoint: 75,
+      },
     },
   })
 
@@ -114,6 +125,23 @@ function Content({
     )
   }
 
+  if (page === 'climate_setting') {
+    return (
+      <ClimateSettingScheduleFormClimateSetting
+        title={t.addNewClimateSettingSchedule}
+        control={control}
+        watch={watch}
+        resetField={resetField}
+        deviceId={deviceId}
+        onBack={() => {
+          setPage('name_and_schedule')
+        }}
+        onCancel={onBack}
+        onSave={() => {}}
+      />
+    )
+  }
+
   return <></>
 }
 

package/src/lib/ui/ClimateSettingForm/ClimateSettingScheduleFormClimateSetting.tsx

@@ -0,0 +1,149 @@
+import {
+  type Control,
+  Controller,
+  type UseFormResetField,
+  type UseFormWatch,
+} from 'react-hook-form'
+import type { HvacModeSetting } from 'seamapi'
+
+import { useDevice } from 'lib/seam/devices/use-device.js'
+import { Button } from 'lib/ui/Button.js'
+import type { ClimateSettingScheduleFormFields } from 'lib/ui/ClimateSettingForm/ClimateSettingScheduleForm.js'
+import { FormField } from 'lib/ui/FormField.js'
+import { InputLabel } from 'lib/ui/InputLabel.js'
+import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import { TemperatureControlGroup } from 'lib/ui/thermostat/TemperatureControlGroup.js'
+
+interface ClimateSettingScheduleFormClimateSettingProps {
+  title: string
+  control: Control<ClimateSettingScheduleFormFields>
+  watch: UseFormWatch<ClimateSettingScheduleFormFields>
+  resetField: UseFormResetField<ClimateSettingScheduleFormFields>
+  deviceId: string
+  onBack: () => void
+  onCancel: (() => void) | undefined
+  onSave: () => void
+}
+
+export function ClimateSettingScheduleFormClimateSetting({
+  title,
+  control,
+  watch,
+  resetField,
+  deviceId,
+  onBack,
+  onCancel,
+  onSave,
+}: ClimateSettingScheduleFormClimateSettingProps): JSX.Element {
+  const { device } = useDevice({
+    device_id: deviceId,
+  })
+
+  const hvacModeSetting = watch('hvacModeSetting')
+
+  return (
+    <>
+      <ContentHeader
+        title={title}
+        onBack={onBack}
+        subheading={device?.properties.name}
+      />
+      <div className='seam-main'>
+        <div className='seam-climate-setting-schedule-form-climate-setting'>
+          <div className='seam-content'>
+            <div>
+              <InputLabel>{t.climateSetting}</InputLabel>
+              <span className='seam-label'>{t.climateSettingSubHeading}</span>
+            </div>
+            <FormContent
+              control={control}
+              resetField={resetField}
+              hvacModeSetting={hvacModeSetting}
+            />
+          </div>
+        </div>
+        <div className='seam-actions'>
+          <Button onClick={onCancel}>{t.cancel}</Button>
+          <Button variant='solid' onClick={onSave}>
+            {t.save}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+interface FormContentProps {
+  control: Control<ClimateSettingScheduleFormFields>
+  resetField: UseFormResetField<ClimateSettingScheduleFormFields>
+  hvacModeSetting: HvacModeSetting
+}
+
+function FormContent({
+  control,
+  resetField,
+  hvacModeSetting,
+}: FormContentProps): JSX.Element {
+  return (
+    <>
+      <FormField>
+        <Controller
+          name='hvacModeSetting'
+          control={control}
+          render={({ field: { value, onChange } }) => {
+            return (
+              <ClimateModeMenu
+                mode={value}
+                onChange={(mode) => {
+                  resetField('setPoints')
+                  onChange(mode)
+                }}
+              />
+            )
+          }}
+        />
+      </FormField>
+      {hvacModeSetting !== 'off' && (
+        <FormField className='seam-climate-setting-slider-container'>
+          <Controller
+            name='setPoints'
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TemperatureControlGroup
+                coolValue={value.coolingSetPoint}
+                heatValue={value.heatingSetPoint}
+                delta={5}
+                maxCool={90}
+                maxHeat={100}
+                minCool={50}
+                minHeat={70}
+                mode={hvacModeSetting}
+                onCoolValueChange={(coolingSetPoint) => {
+                  onChange({
+                    ...value,
+                    coolingSetPoint,
+                  })
+                }}
+                onHeatValueChange={(heatingSetPoint) => {
+                  onChange({
+                    ...value,
+                    heatingSetPoint,
+                  })
+                }}
+              />
+            )}
+          />
+        </FormField>
+      )}
+    </>
+  )
+}
+
+const t = {
+  climateSetting: 'Climate setting',
+  climateSettingSubHeading: 'Choose mode and adjust the climate',
+  cancel: 'Cancel',
+  save: 'Save',
+  next: 'Next',
+}

package/src/lib/ui/thermostat/ClimateSettingControlGroup.tsx

@@ -0,0 +1,32 @@
+import type { HvacModeSetting } from 'seamapi'
+
+import { ClimateModeMenu } from 'lib/ui/thermostat/ClimateModeMenu.js'
+import {
+  TemperatureControlGroup,
+  type TemperatureControlGroupProps,
+} from 'lib/ui/thermostat/TemperatureControlGroup.js'
+
+type ClimateSettingControlGroupProps = Omit<
+  TemperatureControlGroupProps,
+  'mode'
+> & {
+  mode: HvacModeSetting
+  onModeChange: (mode: HvacModeSetting) => void
+}
+
+export function ClimateSettingControlGroup(
+  props: ClimateSettingControlGroupProps
+): JSX.Element {
+  const { mode, onModeChange, ...rest } = props
+  return (
+    <div className='seam-climate-setting-control-group'>
+      <ClimateModeMenu mode={mode} onChange={onModeChange} />
+
+      {mode !== 'off' && (
+        <div className='seam-climate-setting-slider-container'>
+          <TemperatureControlGroup mode={mode} {...rest} />
+        </div>
+      )}
+    </div>
+  )
+}

package/src/lib/ui/thermostat/TemperatureControlGroup.tsx

@@ -10,7 +10,7 @@ import {
 } from 'lib/temperature-bounds.js'
 import { TemperatureControl } from 'lib/ui/thermostat/TemperatureControl.js'
 
-interface TemperatureControlGroupProps {
+export interface TemperatureControlGroupProps {
   mode: Exclude<HvacModeSetting, 'off'>
   heatValue: number
   onHeatValueChange: (temperature: number) => void

package/src/lib/version.ts

@@ -1,3 +1,3 @@
-const seamapiReactVersion = '2.0.2'
+const seamapiReactVersion = '2.1.0'
 
 export default seamapiReactVersion

package/src/styles/_climate-setting-schedule-form.scss

@@ -4,6 +4,7 @@
   .seam-climate-setting-schedule-form {
     @include main;
     @include name-and-schedule;
+    @include climate-setting;
   }
 }
 
@@ -55,3 +56,26 @@
     }
   }
 }
+
+@mixin climate-setting {
+  .seam-climate-setting-schedule-form-climate-setting {
+    .seam-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+      width: 100%;
+      margin-top: 24px;
+      margin-bottom: 24px;
+
+      .seam-label {
+        color: colors.$text-gray-2;
+        font-size: 14px;
+      }
+
+      .seam-climate-setting-slider-container {
+        display: flex;
+        justify-content: center;
+      }
+    }
+  }
+}

package/src/styles/_main.scss

@@ -13,6 +13,7 @@
 @use './device-table';
 @use './access-code-details';
 @use './supported-device-table';
+@use './supported-device-table-manufacturer-keys';
 @use './access-code-form';
 @use './input-label';
 @use './form-field';
@@ -59,6 +60,7 @@
   @include climate-setting-schedule-form.all;
   @include alert.all;
   @include supported-device-table.all;
+  @include supported-device-table-manufacturer-keys.all;
   @include thermostat.all;
   @include seam-table.all;
   @include climate-setting-schedule-details.all;

package/src/styles/_supported-device-table-manufacturer-keys.scss

@@ -0,0 +1,19 @@
+@mixin all {
+  .supported-device-table-manufacturer-keys {
+    font-size: 18px;
+
+    .seam-manufacturer-key {
+      display: table-row;
+    }
+
+    .seam-manufacturer-key-value {
+      display: table-cell;
+    }
+
+    .seam-copy-button {
+      display: table-cell;
+      cursor: pointer;
+      padding-left: 10px;
+    }
+  }
+}

package/src/styles/_thermostat.scss

@@ -1,5 +1,19 @@
 @use './colors';
 
+@mixin climate-setting-control-group {
+  .seam-climate-setting-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+
+    .seam-climate-setting-slider-container {
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
 @mixin temperature-control-group {
   .seam-temperature-control-group {
     display: flex;
@@ -690,6 +704,7 @@
 }
 
 @mixin all {
+  @include climate-setting-control-group;
   @include temperature-control-group;
   @include temperature-control;
   @include climate-setting-status;