@seamapi/react 0.16.1 → 0.17.0

package/src/styles/_access-code-table.scss

@@ -1,54 +1,50 @@
+@use './colors';
+
 @mixin all {
   .seam-access-code-table {
-    .seam-content-header {
-      margin: 0 16px;
-    }
-
-    .seam-table-header {
-      margin-bottom: 16px;
-      height: 56px;
-      padding: 0 16px;
-    }
+    .seam-table-row {
+      cursor: pointer;
 
-    .seam-icon-cell {
-      flex: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > div {
-        width: 40px;
-        height: 40px;
+      .seam-icon-cell {
+        flex: 0;
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > div {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
-    }
 
-    .seam-name-cell {
-      flex: 1;
-      flex-direction: column;
-      justify-content: center;
-      align-items: flex-start;
-      gap: 2px;
+      .seam-name-cell {
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
 
-      .seam-access-code-details {
-        font-size: 14px;
-        line-height: 134%;
-        color: var(--text-gray-1);
+        .seam-code-details {
+          font-size: 14px;
+          line-height: 134%;
+          color: colors.$text-gray-1;
 
-        .seam-dot-divider {
-          margin: 0 4px;
-          color: var(--text-gray-3);
+          .seam-dot-divider {
+            margin: 0 4px;
+            color: colors.$text-gray-3;
+          }
         }
       }
-    }
 
-    .seam-action-cell {
-      margin-right: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      .seam-action-cell {
+        margin-right: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
   }
 }

package/src/styles/_buttons.scss

@@ -1,17 +1,134 @@
-@mixin all {
-  .seam-button {
+@use './typography';
+@use './colors';
+
+@mixin icon-button {
+  .seam-icon-btn {
     border-radius: 6px;
     border: 1px solid rgb(0 122 252 / 50%);
     cursor: pointer;
+    background: #fff;
+    padding: 6px;
+    line-height: 0;
+
+    &:hover {
+      background: rgb(0 122 252 / 8%);
+    }
+  }
+}
+
+@mixin text-button {
+  .seam-text-btn {
+    color: colors.$primary;
+    padding: 0;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
+      text-decoration: none;
+    }
+  }
+}
+
+@mixin button-size {
+  &.seam-btn-small {
+    font-size: 14px;
+    line-height: 22px;
+    border-radius: 6px;
+    padding: 4px 10px;
+  }
+
+  &.seam-btn-medium {
+    font-size: 16px;
+    line-height: 26px;
+    border-radius: 7px;
+    padding: 6px 16px;
+  }
+
+  &.seam-btn-large {
+    font-size: 19px;
+    line-height: 30px;
+    border-radius: 8px;
+    padding: 8px 22px;
+  }
+}
+
+@mixin button-variant {
+  &.seam-btn-solid {
+    background: colors.$primary;
+    color: #fff;
+    border: 1px solid colors.$primary;
 
-    &.seam-icon-button {
+    &:hover {
+      background: colors.$primary-dark;
+      border-color: colors.$primary-dark;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: colors.$primary-dim;
+      border-color: colors.$primary-dim;
+    }
+  }
+
+  &.seam-btn-outline {
+    color: colors.$primary;
+    border: 1px solid colors.$primary-50;
+    background: transparent;
+
+    &:hover {
+      background: colors.$primary-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      background: transparent;
+      color: colors.$primary-50;
+    }
+  }
+
+  &.seam-btn-neutral {
+    color: colors.$text-gray-1;
+    border: 1px solid colors.$text-gray-2-5;
+
+    &:hover {
+      background: colors.$bg-a;
+      border-color: colors.$text-gray-2-5;
+    }
+
+    &.seam-btn-disabled,
+    &:disabled {
+      color: colors.$text-gray-2-5;
+      border-color: colors.$text-gray-3;
       background: #fff;
-      padding: 6px;
-      line-height: 0;
+    }
+  }
+}
+
+@mixin button {
+  .seam-btn {
+    @include typography.font-family;
+    @include button-size;
+    @include button-variant;
 
-      &:hover {
-        background: rgb(0 122 252 / 8%);
-      }
+    font-weight: 600;
+    cursor: pointer;
+
+    &.seam-btn-disabled,
+    &:disabled {
+      cursor: not-allowed;
     }
   }
 }
+
+@mixin all {
+  @include button;
+  @include icon-button;
+  @include text-button;
+}

package/src/styles/_colors.scss

@@ -0,0 +1,30 @@
+@use 'sass:color';
+
+$primary: #007afc !default;
+$primary-50: color.scale($primary, $lightness: 50%);
+$primary-30: color.scale($primary, $lightness: 70%);
+$primary-15: color.scale($primary, $lightness: 85%);
+$primary-8: color.scale($primary, $lightness: 92%);
+$primary-5: color.scale($primary, $lightness: 95%);
+$primary-dark: color.scale($primary, $lightness: -10%);
+$primary-dim: color.scale($primary-15, $lightness: -5%);
+$text-default: #232b3a;
+$text-gray-1: #6e7179;
+$text-gray-2: #9da1a9;
+$text-gray-2-5: #b9bec5;
+$text-gray-3: #d5d8dc;
+$divider-stroke-light: #eee;
+$bg-d: #cbd0d3;
+$bg-c: #dde0e2;
+$bg-b: #e9edef;
+$bg-a: #f1f3f4;
+$status-red: #e36857;
+$status-orange: #f3980f;
+$status-green: #27ae60;
+$alert-error-dark: #cb7d7d;
+$alert-error-line: #f1d4d4;
+$alert-error-fill: #ffefef;
+$alert-warn-dark: #ca8852;
+$alert-warn-line: #f8d8be;
+$alert-warn-fill: #fff2e0;
+$item-hover-bg: #f4f6f8;

package/src/styles/_device-details.scss

@@ -1,14 +1,15 @@
+@use './colors';
+
 @mixin all {
   .seam-device-details {
-    padding: 0 24px 24px;
-
     .seam-body {
       display: flex;
       flex-direction: column;
       gap: 16px;
+      margin: 0 24px 24px;
 
       .seam-box {
-        border: 1px solid var(--input-border);
+        border: 1px solid colors.$text-gray-3;
         border-radius: 8px;
 
         .seam-content {
@@ -22,18 +23,28 @@
             cursor: pointer;
 
             &:hover {
-              background: var(--item-hover-bg);
+              background: colors.$item-hover-bg;
             }
           }
 
           &.seam-access-code-length {
-            border-top: 1px solid var(--input-border);
+            border-top: 1px solid colors.$text-gray-3;
+          }
+
+          &.seam-lock-status {
+            display: flex;
+            justify-content: space-between;
+
+            > .seam-right {
+              display: flex;
+              align-items: center;
+            }
           }
 
           .seam-label {
             font-size: 14px;
             line-height: 134%;
-            color: var(--text-gray-1);
+            color: colors.$text-gray-1;
           }
 
           .seam-value {
@@ -48,7 +59,7 @@
       .seam-summary {
         padding: 24px 16px;
         border-radius: 16px;
-        background: var(--bg-a);
+        background: colors.$bg-a;
 
         .seam-content {
           display: flex;
@@ -68,7 +79,7 @@
 
           .seam-info {
             > .seam-label {
-              color: var(--text-gray-1);
+              color: colors.$text-gray-1;
               font-weight: 600;
               font-size: 14px;
               line-height: 134%;
@@ -92,11 +103,11 @@
               column-gap: 28px;
 
               .seam-label {
-                color: var(--text-gray-2);
+                color: colors.$text-gray-2;
               }
 
               .seam-status-text {
-                color: var(--text-gray-1);
+                color: colors.$text-gray-1;
               }
 
               svg {

package/src/styles/_device-table.scss

@@ -0,0 +1,63 @@
+@use './colors';
+
+@mixin all {
+  .seam-device-table {
+    .seam-table-row {
+      cursor: pointer;
+
+      .seam-image-cell {
+        width: 64px;
+        height: 64px;
+        padding: 4px;
+
+        img {
+          width: 100%;
+        }
+      }
+
+      .seam-body-cell {
+        flex: 1;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        gap: 2px;
+
+        .seam-bottom {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+
+          .seam-device-model {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 134%;
+            color: colors.$text-gray-1;
+            flex: 0 1 190px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          .seam-device-statuses {
+            display: flex;
+            align-items: center;
+            color: colors.$text-gray-1;
+            font-size: 14px;
+            line-height: 134%;
+
+            > div {
+              display: flex;
+              align-items: center;
+              margin-right: 16px;
+
+              svg {
+                scale: 0.75;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/_icons.scss

@@ -0,0 +1,9 @@
+@use './colors';
+
+@mixin all {
+  .seam-lock-icon {
+    * {
+      fill: colors.$text-gray-1;
+    }
+  }
+}

package/src/styles/_inputs.scss

@@ -1,8 +1,10 @@
+@use './colors';
+
 @mixin text-field {
   .seam-text-field {
     padding: 0 8px;
     height: 40px;
-    border: 1px solid var(--input-border);
+    border: 1px solid colors.$text-gray-3;
     border-radius: 8px;
   }
 }

package/src/styles/_layout.scss

@@ -1,3 +1,5 @@
+@use './colors';
+
 @mixin header {
   .seam-content-header {
     height: 56px;
@@ -5,11 +7,12 @@
     align-items: center;
     position: relative;
     justify-content: center;
+    margin: 0 16px;
 
     .seam-back-icon {
       position: absolute;
       top: 50%;
-      transform: translate(0, -25%);
+      transform: translate(4px, -25%);
       left: 0;
       cursor: pointer;
     }
@@ -17,6 +20,7 @@
     .seam-title {
       font-size: 16px;
       line-height: 134%;
+      color: colors.$text-gray-1;
     }
   }
 }

package/src/styles/_main.scss

@@ -5,22 +5,13 @@
 @use './buttons';
 @use './layout';
 @use './access-code-table';
+@use './colors';
+@use './icons';
 @use './device-details';
+@use './device-table';
+@use './access-code-details';
 
 .seam-components {
-  font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
-    sans-serif;
-
-  --primary: #007afc;
-  --text-gray-1: #6e7179;
-  --text-gray-2: #9da1a9;
-  --text-gray-3: #d5d8dc;
-  --input-border: #d5d8dc;
-  --bg-a: #f1f3f4;
-  --status-red-alert: #e36857;
-  --item-hover-bg: #f4f6f8;
-
   // Reset
   @include reset.all;
 
@@ -30,8 +21,11 @@
   @include inputs.all;
   @include buttons.all;
   @include layout.all;
+  @include icons.all;
 
   // Components
-  @include access-code-table.all;
   @include device-details.all;
+  @include device-table.all;
+  @include access-code-table.all;
+  @include access-code-details.all;
 }

package/src/styles/_tables.scss

@@ -1,8 +1,12 @@
+@use './colors';
+
 @mixin header {
   .seam-table-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: 56px;
+    padding: 0 16px;
   }
 
   .seam-table-title {
@@ -21,6 +25,7 @@
     display: flex;
     padding: 4px;
     height: 72px;
+    border-bottom: 1px solid colors.$divider-stroke-light;
 
     &:hover {
       background: rgb(244 246 248 / 100%);
@@ -29,6 +34,7 @@
     .seam-title {
       font-weight: 600;
       font-size: 18px;
+      line-height: 132%;
     }
   }
 }

package/src/styles/_typography.scss

@@ -1,3 +1,11 @@
+@use './colors';
+
+@mixin font-family {
+  font-family: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
 @mixin headers {
   h1,
   h2,
@@ -11,13 +19,19 @@
 
 @mixin caption {
   .seam-caption {
-    color: var(--text-gray-2);
+    color: colors.$text-gray-2;
   }
 }
 
 @mixin danger-text {
   .seam-text-danger {
-    color: var(--status-red-alert);
+    color: colors.$status-red;
+  }
+}
+
+@mixin defaults {
+  html {
+    color: colors.$text-default;
   }
 }
 
@@ -25,4 +39,6 @@
   @include headers;
   @include caption;
   @include danger-text;
+  @include font-family;
+  @include defaults;
 }

package/lib/hooks/use-access-codes.d.ts

@@ -1,5 +0,0 @@
-import type { AccessCode } from 'seamapi';
-import type { UseSeamQueryResult } from '../../lib/types/use-seam-query-result.js';
-export declare function useAccessCodes(params: {
-    device_id: string;
-}): UseSeamQueryResult<'accessCodes', AccessCode[]>;

package/lib/hooks/use-access-codes.js

@@ -1,16 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useSeamClient } from '../../lib/seam/use-seam-client.js';
-export function useAccessCodes(params) {
-    const { client } = useSeamClient();
-    const { data, ...rest } = useQuery({
-        enabled: client != null,
-        queryKey: ['access_codes', 'list', params],
-        queryFn: async () => {
-            if (client == null)
-                return [];
-            return await client?.accessCodes.list(params);
-        },
-    });
-    return { ...rest, accessCodes: data };
-}
-//# sourceMappingURL=use-access-codes.js.map

package/lib/hooks/use-access-codes.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-access-codes.js","sourceRoot":"","sources":["../../src/lib/hooks/use-access-codes.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAG3D,MAAM,UAAU,cAAc,CAAC,MAE9B;IACC,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAiB;QACjD,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,cAAc,EAAE,MAAM,EAAE,MAAM,CAAC;QAC1C,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAC/C,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,CAAA;AACvC,CAAC"}

package/lib/hooks/use-device.d.ts

@@ -1,5 +0,0 @@
-import type { Device } from 'seamapi';
-import type { UseSeamQueryResult } from '../../lib/types/use-seam-query-result.js';
-export declare function useDevice(params: {
-    device_id: string;
-} | string): UseSeamQueryResult<'device', Device<any>>;

package/lib/hooks/use-device.js

@@ -1,17 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-import { useSeamClient } from '../../lib/seam/use-seam-client.js';
-export function useDevice(params) {
-    const objParams = typeof params === 'string' ? { device_id: params } : params;
-    const { client } = useSeamClient();
-    const { data, ...rest } = useQuery({
-        enabled: client != null,
-        queryKey: ['devices', 'get', params],
-        queryFn: async () => {
-            if (client == null)
-                return [];
-            return await client?.devices.get(objParams);
-        },
-    });
-    return { ...rest, device: data };
-}
-//# sourceMappingURL=use-device.js.map

package/lib/hooks/use-device.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-device.js","sourceRoot":"","sources":["../../src/lib/hooks/use-device.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAGhD,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAG3D,MAAM,UAAU,SAAS,CACvB,MAIU;IAEV,MAAM,SAAS,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;IAC7E,MAAM,EAAE,MAAM,EAAE,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,QAAQ,CAAiB;QACjD,OAAO,EAAE,MAAM,IAAI,IAAI;QACvB,QAAQ,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,MAAM,CAAC;QACpC,OAAO,EAAE,KAAK,IAAI,EAAE;YAClB,IAAI,MAAM,IAAI,IAAI;gBAAE,OAAO,EAAE,CAAA;YAC7B,OAAO,MAAM,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;QAC7C,CAAC;KACF,CAAC,CAAA;IAEF,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAA;AAClC,CAAC"}

package/lib/hooks/use-devices.d.ts

@@ -1 +0,0 @@
-export { useDevices } from '../../lib/seam/devices/use-devices.js';

package/lib/hooks/use-devices.js

@@ -1,2 +0,0 @@
-export { useDevices } from '../../lib/seam/devices/use-devices.js';
-//# sourceMappingURL=use-devices.js.map

package/lib/hooks/use-devices.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-devices.js","sourceRoot":"","sources":["../../src/lib/hooks/use-devices.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAA"}

package/lib/hooks/use-seam-client.d.ts

@@ -1 +0,0 @@
-export { useSeamClient } from '../../lib/seam/use-seam-client.js';

package/lib/hooks/use-seam-client.js

@@ -1,2 +0,0 @@
-export { useSeamClient } from '../../lib/seam/use-seam-client.js';
-//# sourceMappingURL=use-seam-client.js.map

package/lib/hooks/use-seam-client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-seam-client.js","sourceRoot":"","sources":["../../src/lib/hooks/use-seam-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA"}

package/lib/seam/devices/index.d.ts

@@ -1 +0,0 @@
-export * from './use-devices.js';

package/lib/seam/devices/index.js

@@ -1,2 +0,0 @@
-export * from './use-devices.js';
-//# sourceMappingURL=index.js.map

package/lib/seam/devices/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/seam/devices/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA"}

package/lib/types/use-seam-query-result.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-seam-query-result.js","sourceRoot":"","sources":["../../src/lib/types/use-seam-query-result.ts"],"names":[],"mappings":""}

package/lib/ui/AccessCodeTable/index.d.ts

@@ -1,2 +0,0 @@
-export * from './AccessCodeTable.js';
-export * from './CodeDetails.js';

package/lib/ui/AccessCodeTable/index.js

@@ -1,3 +0,0 @@
-export * from './AccessCodeTable.js';
-export * from './CodeDetails.js';
-//# sourceMappingURL=index.js.map

package/lib/ui/AccessCodeTable/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/ui/AccessCodeTable/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA"}

package/lib/ui/DeviceDetails/BatteryStatus.d.ts

@@ -1,4 +0,0 @@
-import type { LockDevice } from 'seamapi';
-export declare function BatteryStatus(props: {
-    device: LockDevice;
-}): JSX.Element | null;