@jobber/components 8.3.0 → 8.5.0

package/dist/index.esm-es.js

@@ -709,4 +709,4 @@ var isTabbable = function isTabbable(node, options) {
   return isNodeMatchingSelectorTabbable(options, node);
 };
 
-export { focusable as a, getSideAxis as b, getOppositePlacement as c, getExpandedPlacements as d, evaluate as e, floor as f, getSide as g, getOppositeAxisPlacements as h, isTabbable as i, getAlignmentSides as j, getAlignment as k, max as l, min as m, getAlignmentAxis as n, getPaddingObject as o, clamp as p, getAxisLength as q, rectToClientRect as r, sides as s, tabbable as t, getOppositeAxis as u, placements as v, getOppositeAlignmentPlacement as w, createCoords as x, round as y };
+export { focusable as a, getAlignmentAxis as b, getSide as c, getAlignment as d, evaluate as e, floor as f, getSideAxis as g, getPaddingObject as h, isTabbable as i, getOppositePlacement as j, getExpandedPlacements as k, getOppositeAxisPlacements as l, getAlignmentSides as m, clamp as n, min as o, max as p, getAxisLength as q, rectToClientRect as r, sides as s, tabbable as t, getOppositeAxis as u, placements as v, getOppositeAlignmentPlacement as w, createCoords as x, round as y };

package/dist/index.mjs

@@ -1,9 +1,10 @@
+export { A as ActivityIndicator } from './ActivityIndicator-es.js';
 export { A as AnimatedPresence } from './AnimatedPresence-es.js';
 export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
 export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, u as useAtlantisTheme } from './AtlantisThemeContext-es.js';
 export { u as updateTheme } from './updateTheme-es.js';
-export { Autocomplete } from './Autocomplete/index.mjs';
+export { A as Autocomplete } from './Autocomplete-es.js';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
 export { B as Box } from './Box-es.js';
@@ -91,6 +92,7 @@ export { T as Tiles } from './Tiles-es.js';
 export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
+import 'classnames';
 import 'framer-motion';
 import '@jobber/design';
 import './_commonjsHelpers-es.js';
@@ -108,7 +110,6 @@ import './index.esm-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
 import './floating-ui.react-dom-es.js';
-import 'classnames';
 import './maxHeight-es.js';
 import './tslib.es6-es.js';
 import 'react-hook-form';

package/dist/styles.css

@@ -1,3 +1,282 @@
+/*
+ * ActivityIndicator
+ *
+ * Indeterminate three-layer ring, following Material Web's canonical
+ * SVG-based pattern:
+ *   1. The <svg> rotates continuously at a constant linear speed (Layer 1).
+ *   2. The active <circle> rotates through 8 discrete phases per cycle
+ *      (Layer 2).
+ *   3. The active <circle>'s stroke-dasharray expands and contracts so the
+ *      visible arc length grows and shrinks (Layer 3); stroke-dashoffset
+ *      slides the arc around the ring across the cycle.
+ */
+
+.YST686vLR3c- {
+  position: relative;
+  width: 32px;
+  width: var(--space-larger);
+  height: 32px;
+  height: var(--space-larger);
+}
+
+/*
+ * Visually hide an element from sighted users while keeping it in the
+ * accessibility tree and the live-region text content. Used for the
+ * mount-time "Loading" announcement on role=\"status\". Mirrors the
+ * .screenReaderOnly pattern already used elsewhere in @jobber/components.
+ */
+
+.MmNHh-oCyxc- {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+._888S5Y2IeZ8- {
+  width: 16px;
+  width: var(--space-base);
+  height: 16px;
+  height: var(--space-base);
+}
+
+/*
+ * Layer 1 — continuous linear rotation on the SVG.
+ *
+ * The three indicator durations (1568ms outer rotation, 5332ms inner
+ * 8-phase cycle, 1333ms arc expand/contract) are taken from Material
+ * Web's published progress-motion spec. They are tuned against each
+ * other to produce the canonical Material rhythm and are intentionally
+ * inlined as literals because no other component currently consumes
+ * them; promote them to design tokens once a second consumer (e.g. a
+ * future `ProgressIndicator`) needs the same values.
+ */
+
+.Av9z-aLocss- {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -webkit-animation: WvHFS--Nm80- 1568ms linear infinite;
+          animation: WvHFS--Nm80- 1568ms linear infinite;
+  will-change: transform;
+}
+
+/* Static background ring drawn beneath the moving arc. */
+
+.VDTWabJptKI- {
+  fill: none;
+  stroke: hsl(0, 0%, 93%);
+  stroke: var(--color-disabled--secondary);
+  stroke-width: 4;
+}
+
+._888S5Y2IeZ8- .VDTWabJptKI- {
+  stroke-width: 6;
+}
+
+/*
+ * Layer 2 + 3 — the active arc.
+ *
+ * The circle has circumference 2π·20 ≈ 125.66 (SVG units). The dasharray
+ * (visible, gap) interpolates so the visible portion grows from ~1 unit to
+ * ~95 units, while the dashoffset slides the arc around the ring. The
+ * combined cycle is the canonical Material rhythm.
+ *
+ * stroke-linecap: round produces the soft pill-shaped tips on the arc.
+ */
+
+._9XO0290QNCY- {
+  fill: none;
+  stroke: hsl(198, 35%, 21%);
+  stroke: var(--color-interactive--subtle);
+  stroke-width: 4;
+  stroke-linecap: round;
+  -webkit-transform-origin: center;
+          transform-origin: center;
+  -webkit-animation:
+    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
+    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+          animation:
+    SHHICknKvqA- 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both,
+    _0m0Nzc5awnA- 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+._888S5Y2IeZ8- ._9XO0290QNCY- {
+  stroke-width: 6;
+}
+
+@-webkit-keyframes WvHFS--Nm80- {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+@keyframes WvHFS--Nm80- {
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+/* Layer 2 — 8-phase 1080° rotation on the active arc. */
+
+@-webkit-keyframes SHHICknKvqA- {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  25% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  37.5% {
+    -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+  }
+  50% {
+    -webkit-transform: rotate(540deg);
+            transform: rotate(540deg);
+  }
+  62.5% {
+    -webkit-transform: rotate(675deg);
+            transform: rotate(675deg);
+  }
+  75% {
+    -webkit-transform: rotate(810deg);
+            transform: rotate(810deg);
+  }
+  87.5% {
+    -webkit-transform: rotate(945deg);
+            transform: rotate(945deg);
+  }
+  100% {
+    -webkit-transform: rotate(1080deg);
+            transform: rotate(1080deg);
+  }
+}
+
+@keyframes SHHICknKvqA- {
+  12.5% {
+    -webkit-transform: rotate(135deg);
+            transform: rotate(135deg);
+  }
+  25% {
+    -webkit-transform: rotate(270deg);
+            transform: rotate(270deg);
+  }
+  37.5% {
+    -webkit-transform: rotate(405deg);
+            transform: rotate(405deg);
+  }
+  50% {
+    -webkit-transform: rotate(540deg);
+            transform: rotate(540deg);
+  }
+  62.5% {
+    -webkit-transform: rotate(675deg);
+            transform: rotate(675deg);
+  }
+  75% {
+    -webkit-transform: rotate(810deg);
+            transform: rotate(810deg);
+  }
+  87.5% {
+    -webkit-transform: rotate(945deg);
+            transform: rotate(945deg);
+  }
+  100% {
+    -webkit-transform: rotate(1080deg);
+            transform: rotate(1080deg);
+  }
+}
+
+/*
+ * Layer 3 — expand/contract the visible arc length via stroke-dasharray
+ * while shifting it around the ring via stroke-dashoffset. The "200" gap
+ * value exceeds the circle's circumference, ensuring only one stroke
+ * segment is visible at a time.
+ */
+
+@-webkit-keyframes _0m0Nzc5awnA- {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -125;
+  }
+}
+
+@keyframes _0m0Nzc5awnA- {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -125;
+  }
+}
+
+@-webkit-keyframes _4dXQsbprq3s- {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.35;
+  }
+}
+
+@keyframes _4dXQsbprq3s- {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.35;
+  }
+}
+
+/*
+ * Reduced motion fallback. Hide the active arc entirely; repaint the static
+ * track in the icon foreground colour and pulse its opacity so the
+ * indicator still reads as "busy" without rotational motion.
+ *
+ * A naive `animation: none` would freeze a partial arc mid-cycle and lose
+ * the busy affordance.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  .Av9z-aLocss-,
+  ._9XO0290QNCY- {
+    -webkit-animation: none;
+            animation: none;
+  }
+
+  ._9XO0290QNCY- {
+    display: none;
+  }
+
+  .VDTWabJptKI- {
+    stroke: hsl(198, 35%, 21%);
+    stroke: var(--color-interactive--subtle);
+    -webkit-animation: _4dXQsbprq3s- 2s ease-in-out infinite alternate;
+            animation: _4dXQsbprq3s- 2s ease-in-out infinite alternate;
+  }
+}
+
 .P6HrDSaI0Ac- {
   display: contents;
 }
@@ -6,7 +285,7 @@
   display: contents;
 }
 
-._37kZB-nYE08- {
+.w5g7qggGrr4- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -29,7 +308,7 @@
   scroll-behavior: smooth;
 }
 
-.ULib3TUQja0- {
+.ELlB2Kio7q8- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-direction: column;
@@ -40,7 +319,7 @@
   padding: var(--space-small) var(--space-base);
 }
 
-.h5-1Pp0eRyo- {
+.y9zhi8Wr8QA- {
   width: 100%;
   box-sizing: border-box;
   padding: 8px;
@@ -51,7 +330,7 @@
   cursor: pointer;
 }
 
-.iBkyj85vd-E- {
+.adJv-3bhYOQ- {
   display: -ms-flexbox;
   display: flex;
   text-align: left;
@@ -67,7 +346,7 @@
       align-items: center;
 }
 
-.h5-1Pp0eRyo- .I6wAbSJJHNQ- {
+.y9zhi8Wr8QA- .K2phy6IC3TY- {
   -ms-flex: 0 1 auto;
       flex: 0 1 auto;
   -ms-flex-item-align: auto;
@@ -76,13 +355,13 @@
   width: var(--space-large);
 }
 
-._4yhnonWAWRY-,
-.oGLMF6n8C74- {
+.p2CY3TGCdRc-,
+.-tyLeCnCEUI- {
   background: hsl(43, 18%, 92%);
   background: var(--color-surface--hover);
 }
 
-.LBrwH6TEUYA- {
+.dXIHuZjqX84- {
   box-sizing: border-box;
   padding: 8px;
   padding: var(--space-small);
@@ -90,13 +369,13 @@
   cursor: pointer;
 }
 
-.h5-1Pp0eRyo-:hover,
-.LBrwH6TEUYA-:hover {
+.y9zhi8Wr8QA-:hover,
+.dXIHuZjqX84-:hover {
   background: hsl(43, 18%, 92%);
   background: var(--color-surface--hover);
 }
 
-.DDOv4DR8bJQ- {
+.gQ86NtBHt-Y- {
   padding: 8px 0 4px 8px;
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
   border-bottom: 1px solid hsl(200, 13%, 87%);
@@ -104,13 +383,13 @@
   cursor: default;
 }
 
-.Twgjn26oldE- {
+.uElGEScjH68- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
   cursor: default;
 }
 
-.mc1-CEwZtHE- {
+.nXvoRgKgoz8- {
   position: sticky;
   top: 0;
   z-index: 1;
@@ -119,21 +398,21 @@
   background: var(--color-surface);
 }
 
-.kOR88SFNOn0- {
+.Ey1zL5E-c74- {
   overflow: auto;
 }
 
-._0O-kEf3h9ZI- {
+.ei36u5racbA- {
   border-bottom: 1px solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
 }
 
-.rQ9ZS7Rb7Z4- {
+.IDIz9ZHykRw- {
   border-top: 1px solid hsl(200, 13%, 87%);
   border-top: var(--border-base) solid var(--color-border);
 }
 
-.vxk57ZhP8GU- {
+.Wx--khA61eA- {
   padding: 8px 0 4px 8px;
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
   cursor: default;
@@ -141,12 +420,12 @@
 
 /* Multiple mode: FormFieldWrapper-based container */
 
-.AWoK6-P8fFE- [data-testid="Form-Field-Wrapper"] > div:first-child {
+.COW3V1gDtwI- [data-testid="Form-Field-Wrapper"] > div:first-child {
   height: auto;
   min-height: var(--field--height);
 }
 
-.zJm0oR5x4qY- {
+._1iRpnGn3PaA- {
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: wrap;
@@ -162,7 +441,7 @@
   cursor: text;
 }
 
-.Oa26ZaVEi3g- {
+.bHaScorkEaQ- {
   min-width: 80px;
   padding: 0;
   border: none;
@@ -176,16 +455,16 @@
       flex: 1 1 auto;
 }
 
-.Oa26ZaVEi3g-:focus {
+.bHaScorkEaQ-:focus {
   outline: none;
 }
 
-.Oa26ZaVEi3g-:disabled {
+.bHaScorkEaQ-:disabled {
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);
 }
 
-.IarOrfyYExE- {
+.sFMc1SJPOSM- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   padding: 2px 8px;
@@ -207,12 +486,12 @@
   gap: var(--space-small);
 }
 
-.pmtAk9HEhF4- {
+._9Ljs17OW-QM- {
   background-color: hsl(43, 5%, 72%);
   background-color: var(--color-interactive--background--hover);
 }
 
-.nmXqlAV-DJo- {
+.QYUKkbmNjLE- {
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--border-base) solid var(--color-border);
   color: hsl(0, 0%, 58%);
@@ -222,7 +501,7 @@
   cursor: default;
 }
 
-.SmrmwoOlZDo- {
+.Wv6D8g2MKPo- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   position: relative;
@@ -239,7 +518,7 @@
   cursor: pointer;
 }
 
-.SmrmwoOlZDo-::before {
+.Wv6D8g2MKPo-::before {
   content: "";
   position: absolute;
   top: calc(-1 * 24px);
@@ -253,12 +532,12 @@
   z-index: -1;
 }
 
-.SmrmwoOlZDo-:hover::before {
+.Wv6D8g2MKPo-:hover::before {
   background-color: hsl(43, 5%, 72%);
   background-color: var(--color-interactive--background--hover);
 }
 
-.pqwAJ8VczCU- {
+.UAegmMck3-U- {
   display: -ms-inline-flexbox;
   display: inline-flex;
   -ms-flex-align: center;
@@ -2015,130 +2294,6 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   vertical-align: middle;
 }
 
-._7mObJiwfPh4- {
-  position: relative;
-  width: 100%;
-}
-
-.dL5JShAJlKM- {
-  visibility: hidden;
-  z-index: calc(6 + 1001);
-  z-index: calc(var(--elevation-menu) + var(--elevation-modal));
-  width: 0;
-  height: 0;
-  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--shadow-base);
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 1px solid var(--color-color-border);
-  border: var(--border-base) solid var(--color-color-border);
-  border-radius: 8px;
-  border-radius: var(--radius-base);
-  overflow: auto;
-  background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
-  scroll-behavior: smooth;
-  opacity: 0;
-}
-
-.dL5JShAJlKM- .PWZL-94hH7k- {
-  padding: 8px 0 4px 8px;
-  padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
-  border-bottom: 1px solid hsl(200, 13%, 87%);
-  border-bottom: var(--border-base) solid var(--color-border);
-}
-
-.dL5JShAJlKM-._2RzcnTdaPyc- {
-  visibility: visible;
-  width: 100%;
-  height: auto;
-  opacity: 1;
-}
-
-.dL5JShAJlKM-._2RzcnTdaPyc-:empty {
-  visibility: hidden;
-  opacity: 0;
-}
-
-.y9zhi8Wr8QA- {
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  -ms-flex-direction: row;
-      flex-direction: row;
-  -ms-flex-wrap: nowrap;
-      flex-wrap: nowrap;
-  -ms-flex-pack: start;
-      justify-content: flex-start;
-  -ms-flex-line-pack: stretch;
-      align-content: stretch;
-  -ms-flex-align: center;
-      align-items: center;
-  padding: 8px;
-  padding: var(--space-small);
-  border: none;
-  text-align: left;
-  list-style: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.y9zhi8Wr8QA-:hover,
-.y9zhi8Wr8QA-:focus,
-.y9zhi8Wr8QA-._3Xg49dtL1Q8- {
-  background-color: hsl(43, 18%, 92%);
-  background-color: var(--color-surface--hover);
-  outline-color: hsl(198, 12%, 57%);
-  outline-color: var(--color-focus);
-}
-
-.y9zhi8Wr8QA-.LIeh390F3W8-:not(:last-child) {
-  border-bottom: 1px solid hsl(200, 13%, 87%);
-  border-bottom: var(--border-base) solid var(--color-border);
-}
-
-.dL5JShAJlKM-:hover .y9zhi8Wr8QA-._3Xg49dtL1Q8-:not(:hover) {
-  background-color: transparent;
-  outline-color: transparent;
-}
-
-.dL5JShAJlKM- .PWZL-94hH7k-:not(:first-child) {
-  padding-top: 16px;
-  padding-top: var(--space-base);
-}
-
-.y9zhi8Wr8QA- .K2phy6IC3TY- {
-  -ms-flex: 0 1 auto;
-      flex: 0 1 auto;
-  -ms-flex-item-align: auto;
-      align-self: auto;
-  width: 24px;
-  width: var(--space-large);
-}
-
-.y9zhi8Wr8QA- .a6-LbUm5WnY- {
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -ms-flex: 1 100%;
-      flex: 1 100%;
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}
-
-.y9zhi8Wr8QA- .tQNbuxcE9nU- {
-  -ms-flex: 2;
-      flex: 2;
-}
-
-.y9zhi8Wr8QA- .qacStG9-XbE- {
-  -ms-flex: 1;
-      flex: 1;
-  -ms-flex-item-align: end;
-      align-self: flex-end;
-  text-align: right;
-}
-
 :root {
   --public--avatar-size: 32px;
 }

package/dist/utils/meta/meta.json

@@ -1,5 +1,6 @@
 {
   "exportedComponents": [
+    "ActivityIndicator",
     "AffixIcon",
     "AffixLabel",
     "AnimatedPresence",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.3.0",
+  "version": "8.5.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -25,6 +25,11 @@
       "import": "./dist/unstyledPrimitives/index.mjs",
       "require": "./dist/unstyledPrimitives/index.cjs"
     },
+    "./ActivityIndicator": {
+      "types": "./dist/ActivityIndicator/index.d.ts",
+      "import": "./dist/ActivityIndicator/index.mjs",
+      "require": "./dist/ActivityIndicator/index.cjs"
+    },
     "./AnimatedPresence": {
       "types": "./dist/AnimatedPresence/index.d.ts",
       "import": "./dist/AnimatedPresence/index.mjs",
@@ -508,7 +513,7 @@
   "devDependencies": {
     "@apollo/client": "^3.7.10",
     "@csstools/postcss-global-data": "^1.0.3",
-    "@jobber/design": "0.101.0",
+    "@jobber/design": "0.101.1",
     "@jobber/hooks": "2.20.1",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -563,5 +568,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2829a8684a94528cf087b63fa471c531c95d01c8"
+  "gitHead": "472d98075bdd3372f54004b48df2569c2354b7d3"
 }

package/dist/Autocomplete/Autocomplete.rebuilt.d.ts

@@ -1,8 +0,0 @@
-import type { Ref } from "react";
-import React from "react";
-import type { AutocompleteRebuiltProps, OptionLike } from "./Autocomplete.types";
-export declare const AutocompleteRebuilt: <Value extends OptionLike = OptionLike, Multiple extends boolean = false>(props: AutocompleteRebuiltProps<Value, Multiple> & {
-    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
-}) => ReturnType<typeof AutocompleteRebuiltInternal>;
-declare function AutocompleteRebuiltInternal<Value extends OptionLike, Multiple extends boolean = false>(props: AutocompleteRebuiltProps<Value, Multiple>, forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
-export {};