@jobber/components 8.2.0 → 8.4.0

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;
 }

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.2.0",
+  "version": "8.4.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": "95eed3cf18c0348874ee50b17bd3d927f392242d"
+  "gitHead": "7b859533f0b0482ad30654fb0fde5d41c2d918ba"
 }

package/dist/InputText/InputText.rebuilt.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-import type { InputTextRebuiltProps } from "./InputText.types";
-export declare const InputTextSPAR: React.ForwardRefExoticComponent<InputTextRebuiltProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;