@seamapi/react 0.23.0 → 0.25.0

package/lib/ui/DeviceTable/DeviceHealthBar.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from '../../../lib/icons/Check.js';
+import { ExclamationCircleOutlineIcon } from '../../../lib/icons/ExclamationCircleOutline.js';
+import { TableFilterBar } from '../../../lib/ui/Table/TableFilterBar/TableFilterBar.js';
+import { TableFilterItem } from '../../../lib/ui/Table/TableFilterBar/TableFilterItem.js';
+export function DeviceHealthBar({ devices, filter, onFilterSelect, }) {
+    const erroredDevices = devices.filter((device) => device.errors.length > 0);
+    const issueCount = erroredDevices.length;
+    const toggle = (target) => () => {
+        const newFilter = target === filter ? null : target;
+        onFilterSelect(newFilter);
+    };
+    const isPlural = issueCount === 0 || issueCount > 1;
+    const label = isPlural
+        ? `${issueCount} ${t.deviceIssues}`
+        : `${issueCount} ${t.deviceIssue}`;
+    if (issueCount === 0) {
+        return (_jsx(TableFilterBar, { children: _jsxs(TableFilterItem, { children: [_jsx(CheckIcon, {}), t.devicesOk] }) }));
+    }
+    return (_jsx(TableFilterBar, { isFilterCleared: filter == null, onFilterClear: () => {
+            onFilterSelect(null);
+        }, children: _jsxs(TableFilterItem, { onClick: toggle('device_issues'), selected: filter === 'device_issues', children: [_jsx(ExclamationCircleOutlineIcon, {}), label] }) }));
+}
+const t = {
+    devicesOk: 'Devices OK',
+    deviceIssue: 'device issue',
+    deviceIssues: 'device issues',
+};
+//# sourceMappingURL=DeviceHealthBar.js.map

package/lib/ui/DeviceTable/DeviceHealthBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceHealthBar.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceHealthBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAA;AAEpF,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAA;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,gDAAgD,CAAA;AAUhF,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,MAAM,EACN,cAAc,GACO;IACrB,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;IAC3E,MAAM,UAAU,GAAG,cAAc,CAAC,MAAM,CAAA;IAExC,MAAM,MAAM,GAAG,CAAC,MAAoB,EAAE,EAAE,CAAC,GAAG,EAAE;QAC5C,MAAM,SAAS,GAAG,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;QACnD,cAAc,CAAC,SAAS,CAAC,CAAA;IAC3B,CAAC,CAAA;IAED,MAAM,QAAQ,GAAG,UAAU,KAAK,CAAC,IAAI,UAAU,GAAG,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,QAAQ;QACpB,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,YAAY,EAAE;QACnC,CAAC,CAAC,GAAG,UAAU,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;IAEpC,IAAI,UAAU,KAAK,CAAC,EAAE;QACpB,OAAO,CACL,KAAC,cAAc,cACb,MAAC,eAAe,eACd,KAAC,SAAS,KAAG,EACZ,CAAC,CAAC,SAAS,IACI,GACH,CAClB,CAAA;KACF;IAED,OAAO,CACL,KAAC,cAAc,IACb,eAAe,EAAE,MAAM,IAAI,IAAI,EAC/B,aAAa,EAAE,GAAG,EAAE;YAClB,cAAc,CAAC,IAAI,CAAC,CAAA;QACtB,CAAC,YAED,MAAC,eAAe,IACd,OAAO,EAAE,MAAM,CAAC,eAAe,CAAC,EAChC,QAAQ,EAAE,MAAM,KAAK,eAAe,aAEpC,KAAC,4BAA4B,KAAG,EAC/B,KAAK,IACU,GACH,CAClB,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,SAAS,EAAE,YAAY;IACvB,WAAW,EAAE,cAAc;IAC3B,YAAY,EAAE,eAAe;CAC9B,CAAA"}

package/lib/ui/DeviceTable/DeviceRow.d.ts

@@ -0,0 +1,11 @@
+import { type UseDevicesData, type UseDevicesParams } from '../../../lib/seam/devices/use-devices.js';
+export type DeviceTableProps = Props & UseDevicesParams;
+interface Props {
+    onBack?: () => void;
+}
+export interface DeviceRowProps {
+    device: UseDevicesData[number];
+    onClick: () => void;
+}
+export declare function DeviceRow({ device, onClick, }: DeviceRowProps): JSX.Element | null;
+export {};

package/lib/ui/DeviceTable/DeviceRow.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isLockDevice } from '../../../lib/seam/devices/types.js';
+import {} from '../../../lib/seam/devices/use-devices.js';
+import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
+import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
+import { LockStatus } from '../../../lib/ui/device/LockStatus.js';
+import { OnlineStatus } from '../../../lib/ui/device/OnlineStatus.js';
+import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
+import { TableCell } from '../../../lib/ui/Table/TableCell.js';
+import { TableRow } from '../../../lib/ui/Table/TableRow.js';
+import { Title } from '../../../lib/ui/typography/Title.js';
+export function DeviceRow({ device, onClick, }) {
+    if (!isLockDevice(device)) {
+        return null;
+    }
+    const deviceModel = getDeviceModel(device) ?? t.unknownLock;
+    return (_jsxs(TableRow, { onClick: onClick, children: [_jsx(TableCell, { className: 'seam-image-cell', children: _jsx(DeviceImage, { device: device }) }), _jsxs(TableCell, { className: 'seam-body-cell', children: [_jsx(Title, { children: device.properties.name }), _jsxs("div", { className: 'seam-bottom', children: [_jsx("span", { className: 'seam-device-model', children: deviceModel }), _jsxs("div", { className: 'seam-device-statuses', children: [_jsx(OnlineStatus, { device: device }), _jsx(BatteryStatus, { device: device }), _jsx(LockStatus, { device: device })] })] })] })] }, device.device_id));
+}
+const t = {
+    devices: 'Devices',
+    unknownLock: 'Unknown Lock',
+    noDevicesMessage: 'Sorry, no devices were found',
+};
+//# sourceMappingURL=DeviceRow.js.map

package/lib/ui/DeviceTable/DeviceRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceRow.js","sourceRoot":"","sources":["../../../src/lib/ui/DeviceTable/DeviceRow.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAA;AACxD,OAAO,EAGN,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAA;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAA;AAalD,MAAM,UAAU,SAAS,CAAC,EACxB,MAAM,EACN,OAAO,GACQ;IACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;QACzB,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,WAAW,CAAA;IAE3D,OAAO,CACL,MAAC,QAAQ,IAAwB,OAAO,EAAE,OAAO,aAC/C,KAAC,SAAS,IAAC,SAAS,EAAC,iBAAiB,YACpC,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,GAAI,GACrB,EACZ,MAAC,SAAS,IAAC,SAAS,EAAC,gBAAgB,aACnC,KAAC,KAAK,cAAE,MAAM,CAAC,UAAU,CAAC,IAAI,GAAS,EACvC,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAM,SAAS,EAAC,mBAAmB,YAAE,WAAW,GAAQ,EACxD,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,GAAI,EAChC,KAAC,aAAa,IAAC,MAAM,EAAE,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,GAAI,IAC1B,IACF,IACI,KAdC,MAAM,CAAC,SAAS,CAepB,CACZ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,GAAG;IACR,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,cAAc;IAC3B,gBAAgB,EAAE,8BAA8B;CACjD,CAAA"}

package/lib/ui/DeviceTable/DeviceTable.js

@@ -1,21 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import { isLockDevice } from '../../../lib/seam/devices/types.js';
 import { useDevices, } from '../../../lib/seam/devices/use-devices.js';
-import { BatteryStatus } from '../../../lib/ui/device/BatteryStatus.js';
-import { DeviceImage } from '../../../lib/ui/device/DeviceImage.js';
-import { LockStatus } from '../../../lib/ui/device/LockStatus.js';
-import { OnlineStatus } from '../../../lib/ui/device/OnlineStatus.js';
 import { DeviceDetails } from '../../../lib/ui/DeviceDetails/DeviceDetails.js';
-import { getDeviceModel } from '../../../lib/ui/DeviceDetails/DeviceModel.js';
+import { DeviceHealthBar, } from '../../../lib/ui/DeviceTable/DeviceHealthBar.js';
+import { DeviceRow } from '../../../lib/ui/DeviceTable/DeviceRow.js';
 import { ContentHeader } from '../../../lib/ui/layout/ContentHeader.js';
+import { EmptyPlaceholder } from '../../../lib/ui/Table/EmptyPlaceholder.js';
 import { TableBody } from '../../../lib/ui/Table/TableBody.js';
-import { TableCell } from '../../../lib/ui/Table/TableCell.js';
 import { TableHeader } from '../../../lib/ui/Table/TableHeader.js';
-import { TableRow } from '../../../lib/ui/Table/TableRow.js';
 import { TableTitle } from '../../../lib/ui/Table/TableTitle.js';
 import { Caption } from '../../../lib/ui/typography/Caption.js';
-import { Title } from '../../../lib/ui/typography/Title.js';
 export function DeviceTable({ onBack, ...props }) {
     const { devices, isLoading, isError, error } = useDevices(props);
     const [selectedDeviceId, selectDevice] = useState(null);
@@ -34,20 +28,30 @@ export function DeviceTable({ onBack, ...props }) {
         return null;
     }
     const deviceCount = devices.length;
-    return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: devices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
-                        selectDevice(device.device_id);
-                    } }, device.device_id))) })] }));
+    return (_jsxs("div", { className: 'seam-device-table', children: [_jsx(ContentHeader, { onBack: onBack }), _jsx(TableHeader, { children: _jsxs(TableTitle, { children: [t.devices, " ", _jsxs(Caption, { children: ["(", deviceCount, ")"] })] }) }), _jsx(TableBody, { children: _jsx(Body, { devices: devices, selectDevice: selectDevice }) })] }));
 }
-function DeviceRow(props) {
-    const { device, onClick } = props;
-    if (!isLockDevice(device)) {
-        return null;
+function Body(props) {
+    const { devices, selectDevice } = props;
+    const [filter, setFilter] = useState(null);
+    if (devices.length === 0) {
+        return _jsx(EmptyPlaceholder, { children: t.noDevicesMessage });
     }
-    const deviceModel = getDeviceModel(device) ?? t.unknownLock;
-    return (_jsxs(TableRow, { onClick: onClick, children: [_jsx(TableCell, { className: 'seam-image-cell', children: _jsx(DeviceImage, { device: device }) }), _jsxs(TableCell, { className: 'seam-body-cell', children: [_jsx(Title, { children: device.properties.name }), _jsxs("div", { className: 'seam-bottom', children: [_jsx("span", { className: 'seam-device-model', children: deviceModel }), _jsxs("div", { className: 'seam-device-statuses', children: [_jsx(OnlineStatus, { device: device }), _jsx(BatteryStatus, { device: device }), _jsx(LockStatus, { device: device })] })] })] })] }, device.device_id));
+    const filteredDevices = devices.filter((device) => {
+        if (filter === null) {
+            return true;
+        }
+        if (filter === 'device_issues') {
+            return device.errors.length > 0;
+        }
+        return true;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(DeviceHealthBar, { devices: devices, filter: filter, onFilterSelect: setFilter }), filteredDevices.map((device) => (_jsx(DeviceRow, { device: device, onClick: () => {
+                    selectDevice(device.device_id);
+                } }, device.device_id)))] }));
 }
 const t = {
     devices: 'Devices',
     unknownLock: 'Unknown Lock',
+    noDevicesMessage: 'Sorry, no devices were found',
 };
 //# sourceMappingURL=DeviceTable.js.map

package/lib/ui/DeviceTable/DeviceTable.js.map

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

package/lib/ui/IconButton.d.ts

@@ -1,2 +1,2 @@
 import type { ButtonProps } from '../../lib/ui/types.js';
-export declare function IconButton(props: ButtonProps): JSX.Element;
+export declare function IconButton({ className, ...props }: ButtonProps): JSX.Element;

package/lib/ui/IconButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export function IconButton(props) {
-    return _jsx("button", { ...props, className: 'seam-icon-btn' });
+import classNames from 'classnames';
+export function IconButton({ className, ...props }) {
+    return (_jsx("button", { ...props, className: classNames('seam-icon-btn', className) }));
 }
 //# sourceMappingURL=IconButton.js.map

package/lib/ui/IconButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/lib/ui/IconButton.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,UAAU,CAAC,KAAkB;IAC3C,OAAO,oBAAY,KAAK,EAAE,SAAS,EAAC,eAAe,GAAG,CAAA;AACxD,CAAC"}
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../src/lib/ui/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAInC,MAAM,UAAU,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe;IAC7D,OAAO,CACL,oBAAY,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,GAAI,CACzE,CAAA;AACH,CAAC"}

package/lib/ui/SupportedDevices/SupportedDevices.d.ts

@@ -1 +1 @@
-export default function SupportedDevices(): import("react/jsx-runtime").JSX.Element;
+export declare function SupportedDevices(): import("react/jsx-runtime").JSX.Element;

package/lib/ui/SupportedDevices/SupportedDevices.js

@@ -4,7 +4,7 @@ import axios from 'axios';
 import { Button } from '../../../lib/ui/Button.js';
 import SupportedDeviceRow from './SupportedDeviceRow.js';
 import SupportedDevicesHeader from './SupportedDevicesHeader.js';
-export default function SupportedDevices() {
+export function SupportedDevices() {
     const { data, isLoading, isError, refetch } = useQuery({
         queryKey: ['supported_devices'],
         queryFn: async () => {

package/lib/ui/SupportedDevices/SupportedDevices.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,kBAAkB,MAAM,yBAAyB,CAAA;AACxD,OAAO,sBAAsB,MAAM,6BAA6B,CAAA;AAEhE,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,CAInD;QACD,QAAQ,EAAE,CAAC,mBAAmB,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAA;QAC3E,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,mCAAmC,aAC/C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,0CAA0C,YACvD,mDAA+B,GAC3B,CACP,EAEA,OAAO,IAAI,CACV,eAAK,SAAS,EAAC,0CAA0C,aACvD,qEAAiD,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,OAAO,EAAE,CAAA;4BAChB,CAAC,sBAGM,IACL,CACP,EAEA,CAAC,SAAS;oBACT,CAAC,OAAO;oBACR,IAAI,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,CAC1C,iBAAO,SAAS,EAAC,8BAA8B,aAC7C,KAAC,sBAAsB,KAAG,EAC1B,0BACG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,qBAAqB,CAEtC,CACH,CAAC,GACI,IACF,CACT,IACC,GACL,CACJ,CAAA;AACH,CAAC"}
+{"version":3,"file":"SupportedDevices.js","sourceRoot":"","sources":["../../../src/lib/ui/SupportedDevices/SupportedDevices.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAGzC,OAAO,kBAAkB,MAAM,yBAAyB,CAAA;AACxD,OAAO,sBAAsB,MAAM,6BAA6B,CAAA;AAEhE,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,QAAQ,CAInD;QACD,QAAQ,EAAE,CAAC,mBAAmB,CAAC;QAC/B,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,OAAO,MAAM,KAAK,CAAC,GAAG,CAAC,iDAAiD,CAAC,CAAA;QAC3E,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,CACL,4BACE,eAAK,SAAS,EAAC,mCAAmC,aAC/C,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,0CAA0C,YACvD,mDAA+B,GAC3B,CACP,EAEA,OAAO,IAAI,CACV,eAAK,SAAS,EAAC,0CAA0C,aACvD,qEAAiD,EACjD,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,GAAG,EAAE;gCACZ,KAAK,OAAO,EAAE,CAAA;4BAChB,CAAC,sBAGM,IACL,CACP,EAEA,CAAC,SAAS;oBACT,CAAC,OAAO;oBACR,IAAI,EAAE,IAAI,EAAE,aAAa,KAAK,IAAI;oBAClC,KAAK,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,IAAI,CAC1C,iBAAO,SAAS,EAAC,8BAA8B,aAC7C,KAAC,sBAAsB,KAAG,EAC1B,0BACG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,kBAAkB,IAEjB,WAAW,EAAE,WAAW,IADnB,WAAW,CAAC,qBAAqB,CAEtC,CACH,CAAC,GACI,IACF,CACT,IACC,GACL,CACJ,CAAA;AACH,CAAC"}

package/lib/ui/Table/EmptyPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import type { DivProps } from '../../../lib/ui/types.js';
+export declare function EmptyPlaceholder({ children, ...props }: DivProps): JSX.Element;

package/lib/ui/Table/EmptyPlaceholder.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function EmptyPlaceholder({ children, ...props }) {
+    return (_jsx("div", { className: 'seam-table-empty-placeholder', ...props, children: children }));
+}
+//# sourceMappingURL=EmptyPlaceholder.js.map

package/lib/ui/Table/EmptyPlaceholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPlaceholder.js","sourceRoot":"","sources":["../../../src/lib/ui/Table/EmptyPlaceholder.tsx"],"names":[],"mappings":";AAEA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,GAAG,KAAK,EACC;IACT,OAAO,CACL,cAAK,SAAS,EAAC,8BAA8B,KAAK,KAAK,YACpD,QAAQ,GACL,CACP,CAAA;AACH,CAAC"}

package/lib/ui/Table/TableFilterBar/TableFilterBar.d.ts

@@ -0,0 +1,6 @@
+import type { DivProps } from '../../../../lib/ui/types.js';
+export interface TableFiltersProps extends DivProps {
+    isFilterCleared?: boolean;
+    onFilterClear?: () => void;
+}
+export declare function TableFilterBar({ isFilterCleared, onFilterClear, children, ...props }: TableFiltersProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/Table/TableFilterBar/TableFilterBar.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowRestartIcon } from '../../../../lib/icons/ArrowRestart.js';
+import { IconButton } from '../../../../lib/ui/IconButton.js';
+export function TableFilterBar({ isFilterCleared, onFilterClear, children, ...props }) {
+    const showClearFilterButton = isFilterCleared === false;
+    return (_jsxs("div", { className: 'seam-table-filter-bar', ...props, children: [children, ' ', showClearFilterButton && _jsx(ClearFiltersButton, { onClick: onFilterClear })] }));
+}
+function ClearFiltersButton(props) {
+    return (_jsx(IconButton, { ...props, className: 'seam-clear-filters-button', children: _jsx(ArrowRestartIcon, {}) }));
+}
+//# sourceMappingURL=TableFilterBar.js.map

package/lib/ui/Table/TableFilterBar/TableFilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterBar.js","sourceRoot":"","sources":["../../../../src/lib/ui/Table/TableFilterBar/TableFilterBar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAQjD,MAAM,UAAU,cAAc,CAAC,EAC7B,eAAe,EACf,aAAa,EACb,QAAQ,EACR,GAAG,KAAK,EACU;IAClB,MAAM,qBAAqB,GAAG,eAAe,KAAK,KAAK,CAAA;IACvD,OAAO,CACL,eAAK,SAAS,EAAC,uBAAuB,KAAK,KAAK,aAC7C,QAAQ,EAAE,GAAG,EACb,qBAAqB,IAAI,KAAC,kBAAkB,IAAC,OAAO,EAAE,aAAa,GAAI,IACpE,CACP,CAAA;AACH,CAAC;AAED,SAAS,kBAAkB,CAAC,KAAkB;IAC5C,OAAO,CACL,KAAC,UAAU,OAAK,KAAK,EAAE,SAAS,EAAC,2BAA2B,YAC1D,KAAC,gBAAgB,KAAG,GACT,CACd,CAAA;AACH,CAAC"}

package/lib/ui/Table/TableFilterBar/TableFilterItem.d.ts

@@ -0,0 +1,5 @@
+import type { DivProps } from '../../../../lib/ui/types.js';
+export interface TableFilterItemProps extends DivProps {
+    selected?: boolean;
+}
+export declare function TableFilterItem({ onClick, selected, ...props }: TableFilterItemProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/Table/TableFilterBar/TableFilterItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+export function TableFilterItem({ onClick, selected, ...props }) {
+    return (_jsx("div", { onClick: onClick, className: classNames('seam-table-filter-item', {
+            'seam-clickable': onClick !== undefined,
+            'seam-selected': selected,
+        }), ...props }));
+}
+//# sourceMappingURL=TableFilterItem.js.map

package/lib/ui/Table/TableFilterBar/TableFilterItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFilterItem.js","sourceRoot":"","sources":["../../../../src/lib/ui/Table/TableFilterBar/TableFilterItem.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACa;IACrB,OAAO,CACL,cACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE;YAC9C,gBAAgB,EAAE,OAAO,KAAK,SAAS;YACvC,eAAe,EAAE,QAAQ;SAC1B,CAAC,KACE,KAAK,GACT,CACH,CAAA;AACH,CAAC"}

package/lib/ui/index.d.ts

@@ -2,3 +2,4 @@ export * from './AccessCodeDetails/AccessCodeDetails.js';
 export * from './AccessCodeTable/AccessCodeTable.js';
 export * from './DeviceDetails/DeviceDetails.js';
 export * from './DeviceTable/DeviceTable.js';
+export * from './SupportedDevices/SupportedDevices.js';

package/lib/ui/index.js

@@ -2,4 +2,5 @@ export * from './AccessCodeDetails/AccessCodeDetails.js';
 export * from './AccessCodeTable/AccessCodeTable.js';
 export * from './DeviceDetails/DeviceDetails.js';
 export * from './DeviceTable/DeviceTable.js';
+export * from './SupportedDevices/SupportedDevices.js';
 //# sourceMappingURL=index.js.map

package/lib/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAA;AACxD,cAAc,sCAAsC,CAAA;AACpD,cAAc,kCAAkC,CAAA;AAChD,cAAc,8BAA8B,CAAA;AAC5C,cAAc,wCAAwC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamapi/react",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Seam React component library.",
   "type": "module",
   "main": "index.js",

package/src/lib/icons/ArrowRestart.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const ArrowRestartIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='arrow-restart_svg__a'
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+    </mask>
+    <g mask='url(#arrow-restart_svg__a)'>
+      <path
+        fill='#232B3A'
+        d='M12 20c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-1.15 0-2.25.238-3.3.713A7.617 7.617 0 0 0 6 6.75V4H4v7h7V9H6.8a5.838 5.838 0 0 1 2.187-2.2A5.93 5.93 0 0 1 12 6c1.667 0 3.083.583 4.25 1.75C17.417 8.917 18 10.333 18 12c0 1.667-.583 3.083-1.75 4.25C15.083 17.417 13.667 18 12 18a5.863 5.863 0 0 1-3.475-1.1A5.809 5.809 0 0 1 6.35 14h-2.1c.467 1.767 1.417 3.208 2.85 4.325S10.167 20 12 20Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/Check.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react'
+export const CheckIcon = (props: SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={25}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <path
+      fill='#27AE60'
+      d='m9.5 15.73-3.936-4.038-1.895 1.872L9.5 19.476l12.765-12.92-1.82-1.87L9.5 15.73Z'
+    />
+  </svg>
+)

package/src/lib/icons/ExclamationCircle.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const ExclamationCircleIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='exclamation-circle_svg__a'
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+    </mask>
+    <g mask='url(#exclamation-circle_svg__a)'>
+      <path
+        fill='#E36857'
+        d='M12 17a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 16a.97.97 0 0 0-.287-.713A.97.97 0 0 0 12 15a.967.967 0 0 0-.712.287A.968.968 0 0 0 11 16c0 .283.096.52.288.712A.965.965 0 0 0 12 17Zm-1-4h2V7h-2v6Zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.733 9.733 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138A9.743 9.743 0 0 1 12 2c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175A9.733 9.733 0 0 1 22 12a9.733 9.733 0 0 1-.788 3.9 10.092 10.092 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137A9.733 9.733 0 0 1 12 22Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/ExclamationCircleOutline.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const ExclamationCircleOutlineIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={25}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='exclamation-circle-outline_svg__a'
+      width={24}
+      height={25}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 .018h24v24H0z' />
+    </mask>
+    <g mask='url(#exclamation-circle-outline_svg__a)'>
+      <path
+        fill='#E36857'
+        d='M12 17.018a.968.968 0 0 0 .713-.288.967.967 0 0 0 .287-.712.97.97 0 0 0-.287-.713.97.97 0 0 0-.713-.287.967.967 0 0 0-.712.287.968.968 0 0 0-.288.713c0 .283.096.52.288.712a.965.965 0 0 0 .712.288Zm-1-4h2v-6h-2v6Zm1 9a9.733 9.733 0 0 1-3.9-.788 10.092 10.092 0 0 1-3.175-2.137c-.9-.9-1.612-1.959-2.137-3.175a9.733 9.733 0 0 1-.788-3.9c0-1.384.263-2.684.788-3.9a10.092 10.092 0 0 1 2.137-3.175c.9-.9 1.958-1.613 3.175-2.138a9.743 9.743 0 0 1 3.9-.787c1.383 0 2.683.262 3.9.787a10.105 10.105 0 0 1 3.175 2.138c.9.9 1.612 1.958 2.137 3.175a9.733 9.733 0 0 1 .788 3.9 9.733 9.733 0 0 1-.788 3.9 10.093 10.093 0 0 1-2.137 3.175c-.9.9-1.958 1.612-3.175 2.137a9.733 9.733 0 0 1-3.9.788Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.143 20 14.25 20 12.018c0-2.234-.775-4.125-2.325-5.675-1.55-1.55-3.442-2.325-5.675-2.325-2.233 0-4.125.775-5.675 2.325C4.775 7.893 4 9.784 4 12.018c0 2.233.775 4.125 2.325 5.675 1.55 1.55 3.442 2.325 5.675 2.325Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/icons/TriangleWarning.tsx

@@ -0,0 +1,32 @@
+import type { SVGProps } from 'react'
+export const TriangleWarningIcon = (
+  props: SVGProps<SVGSVGElement>
+): JSX.Element => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    width={24}
+    height={24}
+    fill='none'
+    {...props}
+  >
+    <mask
+      id='triangle-warning_svg__a'
+      width={24}
+      height={24}
+      x={0}
+      y={0}
+      maskUnits='userSpaceOnUse'
+      style={{
+        maskType: 'alpha',
+      }}
+    >
+      <path fill='#D9D9D9' d='M0 0h24v24H0z' />
+    </mask>
+    <g mask='url(#triangle-warning_svg__a)'>
+      <path
+        fill='#F3980F'
+        d='M1 21 12 2l11 19H1Zm11-3a.968.968 0 0 0 .713-.288A.967.967 0 0 0 13 17a.967.967 0 0 0-.287-.712A.968.968 0 0 0 12 16a.965.965 0 0 0-.712.288A.965.965 0 0 0 11 17c0 .283.096.52.288.712A.965.965 0 0 0 12 18Zm-1-3h2v-5h-2v5Z'
+      />
+    </g>
+  </svg>
+)

package/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx

@@ -4,12 +4,16 @@ import type { AccessCode } from 'seamapi'
 import { copy } from 'lib/copy.js'
 import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js'
 import { CopyIcon } from 'lib/icons/Copy.js'
-import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js'
+import {
+  useAccessCodes,
+  type UseAccessCodesData,
+} from 'lib/seam/access-codes/use-access-codes.js'
 import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js'
 import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js'
 import { ContentHeader } from 'lib/ui/layout/ContentHeader.js'
 import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
 import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js'
+import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js'
 import { TableBody } from 'lib/ui/Table/TableBody.js'
 import { TableCell } from 'lib/ui/Table/TableCell.js'
 import { TableHeader } from 'lib/ui/Table/TableHeader.js'
@@ -59,52 +63,81 @@ export function AccessCodeTable(
         </TableTitle>
       </TableHeader>
       <TableBody>
-        {accessCodes.map((code) => (
-          <TableRow
-            key={code.access_code_id}
+        <Body accessCodes={accessCodes} selectAccessCode={selectAccessCode} />
+      </TableBody>
+    </div>
+  )
+}
+
+function Body(props: {
+  accessCodes: Array<UseAccessCodesData[number]>
+  selectAccessCode: (accessCode: AccessCode) => void
+}) {
+  const { accessCodes, selectAccessCode } = props
+
+  if (accessCodes.length === 0) {
+    return <EmptyPlaceholder>{t.noAccessCodesMessage}</EmptyPlaceholder>
+  }
+
+  return (
+    <>
+      {accessCodes.map((accessCode) => (
+        <AccessCodeRow
+          key={accessCode.access_code_id}
+          accessCode={accessCode}
+          onClick={() => {
+            selectAccessCode(accessCode)
+          }}
+        />
+      ))}
+    </>
+  )
+}
+
+function AccessCodeRow(props: {
+  accessCode: UseAccessCodesData[number]
+  onClick: () => void
+}) {
+  const { onClick, accessCode } = props
+  return (
+    <TableRow key={accessCode.access_code_id} onClick={onClick}>
+      <TableCell className='seam-icon-cell'>
+        <div>
+          <AccessCodeKeyIcon />
+        </div>
+      </TableCell>
+      <TableCell className='seam-name-cell'>
+        <Title>{accessCode.name}</Title>
+        <CodeDetails accessCode={accessCode} />
+      </TableCell>
+      <TableCell className='seam-action-cell'>
+        <MoreActionsMenu
+          MenuProps={{
+            BackgroundProps: {
+              className: 'seam-access-code-table-action-menu',
+            },
+          }}
+        >
+          <MenuItem
             onClick={() => {
-              selectAccessCode(code)
+              void copy(accessCode.code ?? '')
             }}
           >
-            <TableCell className='seam-icon-cell'>
-              <div>
-                <AccessCodeKeyIcon />
-              </div>
-            </TableCell>
-            <TableCell className='seam-name-cell'>
-              <Title>{code.name}</Title>
-              <CodeDetails accessCode={code} />
-            </TableCell>
-            <TableCell className='seam-action-cell'>
-              <MoreActionsMenu
-                MenuProps={{
-                  BackgroundProps: {
-                    className: 'seam-access-code-table-action-menu',
-                  },
-                }}
-              >
-                <MenuItem
-                  onClick={() => {
-                    void copy(code.code ?? '')
-                  }}
-                >
-                  <div className='menu-item-copy'>
-                    <span>
-                      {t.copyCode} - {code.code}
-                    </span>
-                    <CopyIcon />
-                  </div>
-                </MenuItem>
-              </MoreActionsMenu>
-            </TableCell>
-          </TableRow>
-        ))}
-      </TableBody>
-    </div>
+            <div className='menu-item-copy'>
+              <span>
+                {t.copyCode} - {accessCode.code}
+              </span>
+              <CopyIcon />
+            </div>
+          </MenuItem>
+        </MoreActionsMenu>
+      </TableCell>
+    </TableRow>
   )
 }
 
 const t = {
   accessCodes: 'Access Codes',
   copyCode: 'Copy code',
+  noAccessCodesMessage: 'Sorry, no access codes were found',
 }