@jobber/components 8.8.0 → 8.9.0

package/dist/LightBox/LightBox.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { LightBoxNavigationProps, LightBoxProps } from "./LightBox.types";
+import type { LightBoxNavigationProps, LightBoxProps, LightBoxThumbnailBarProps, LightBoxThumbnailImageProps, LightBoxThumbnailProps } from "./LightBox.types";
 import { LightBoxProvider } from "./LightBoxContext";
 export declare function LightBoxContent(): React.JSX.Element;
 /**
@@ -75,7 +75,25 @@ declare function LightBoxCaption(): React.JSX.Element | null;
 /**
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
-declare function LightBoxThumbnails(): React.JSX.Element | null;
+declare function LightBoxThumbnails(): React.JSX.Element;
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+declare function LightBoxThumbnailBar({ children, className, }: LightBoxThumbnailBarProps): React.JSX.Element | null;
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+declare function LightBoxThumbnail({ index, children, className, }: LightBoxThumbnailProps): React.JSX.Element;
+/**
+ * A thumbnail using our default styling.
+ */
+declare function LightBoxThumbnailImage({ src, alt, className, }: LightBoxThumbnailImageProps): React.JSX.Element;
 /**
  * LightBox displays images in a fullscreen overlay.
  *
@@ -128,5 +146,8 @@ declare namespace LightBox {
     var Navigation: typeof LightBoxNavigation;
     var Caption: typeof LightBoxCaption;
     var Thumbnails: typeof LightBoxThumbnails;
+    var ThumbnailBar: typeof LightBoxThumbnailBar;
+    var Thumbnail: typeof LightBoxThumbnail;
+    var ThumbnailImage: typeof LightBoxThumbnailImage;
 }
 export { LightBox };

package/dist/LightBox/LightBox.types.d.ts

@@ -92,3 +92,44 @@ export interface LightBoxNavigationProps {
      */
     readonly nextButtonClassName?: string;
 }
+export interface LightBoxThumbnailBarProps {
+    /**
+     * The thumbnails to render inside the scrollable bar, typically one
+     * `LightBox.Thumbnail` per image.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail bar wrapper.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailProps {
+    /**
+     * The index of the image this thumbnail represents. Used to derive the
+     * selected state and to navigate to the image when activated.
+     */
+    readonly index: number;
+    /**
+     * The content rendered inside the selectable thumbnail cell, typically a
+     * `LightBox.ThumbnailImage`.
+     */
+    readonly children: ReactNode;
+    /**
+     * Additional class name to apply to the thumbnail cell.
+     */
+    readonly className?: string;
+}
+export interface LightBoxThumbnailImageProps {
+    /**
+     * The image source to render.
+     */
+    readonly src: string;
+    /**
+     * The alternative text for the image.
+     */
+    readonly alt: string;
+    /**
+     * Additional class name to apply to the image.
+     */
+    readonly className?: string;
+}

package/dist/LightBox-cjs.js

@@ -305,13 +305,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React.createElement(LightBoxThumbnail, { key: index, index: index },
+        React.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (React.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-            [styles.selected]: index === currentImageIndex,
-        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-        React.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+    return (React.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -367,6 +394,9 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 exports.LightBox = LightBox;
 exports.useLightBoxContext = useLightBoxContext;

package/dist/LightBox-es.js

@@ -303,13 +303,40 @@ function LightBoxCaption() {
  * Scrollable thumbnail strip. Only renders when there are two or more images.
  */
 function LightBoxThumbnails() {
-    const { images, currentImageIndex, boxSizing, selectedThumbnailRef, handleThumbnailClick, } = useLightBoxContext();
+    const { images } = useLightBoxContext();
+    return (React__default.createElement(LightBoxThumbnailBar, null, images.map((image, index) => (React__default.createElement(LightBoxThumbnail, { key: index, index: index },
+        React__default.createElement(LightBoxThumbnailImage, { src: image.url, alt: image.alt || image.title || "" }))))));
+}
+/**
+ * Scrollable container for the thumbnail strip. Owns the scroll chrome and
+ * box-sizing, and only renders when there are two or more images.
+ *
+ * Pass one `LightBox.Thumbnail` per image as `children` to own the thumbnail
+ * loop.
+ */
+function LightBoxThumbnailBar({ children, className, }) {
+    const { images, boxSizing } = useLightBoxContext();
     if (images.length <= 1)
         return null;
-    return (React__default.createElement("div", { className: styles.thumbnailBar, style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, images.map((image, index) => (React__default.createElement("div", { key: index, className: classnames(styles.thumbnail, {
-            [styles.selected]: index === currentImageIndex,
-        }), onClick: () => handleThumbnailClick(index), ref: index === currentImageIndex ? selectedThumbnailRef : null },
-        React__default.createElement("img", { key: index, src: image.url, alt: image.alt || image.title || "", className: styles.thumbnailImage }))))));
+    return (React__default.createElement("div", { className: classnames(styles.thumbnailBar, className), style: { "--lightbox--box-sizing": boxSizing }, "data-testid": "ATL-Thumbnail-Bar" }, children));
+}
+/**
+ * A selectable thumbnail cell identified by its `index`. Owns the selected
+ * styling, click-to-navigate behaviour, and renders consumer-provided
+ * `children` (typically a `LightBox.ThumbnailImage`).
+ */
+function LightBoxThumbnail({ index, children, className, }) {
+    const { currentImageIndex, selectedThumbnailRef, handleThumbnailClick } = useLightBoxContext();
+    const selected = index === currentImageIndex;
+    return (React__default.createElement("div", { className: classnames(styles.thumbnail, className, {
+            [styles.selected]: selected,
+        }), onClick: () => handleThumbnailClick(index), ref: selected ? selectedThumbnailRef : null }, children));
+}
+/**
+ * A thumbnail using our default styling.
+ */
+function LightBoxThumbnailImage({ src, alt, className, }) {
+    return (React__default.createElement("img", { src: src, alt: alt, className: classnames(styles.thumbnailImage, className) }));
 }
 /**
  * LightBox displays images in a fullscreen overlay.
@@ -365,5 +392,8 @@ LightBox.Slides = LightBoxSlides;
 LightBox.Navigation = LightBoxNavigation;
 LightBox.Caption = LightBoxCaption;
 LightBox.Thumbnails = LightBoxThumbnails;
+LightBox.ThumbnailBar = LightBoxThumbnailBar;
+LightBox.Thumbnail = LightBoxThumbnail;
+LightBox.ThumbnailImage = LightBoxThumbnailImage;
 
 export { LightBox as L, useLightBoxContext as u };

package/dist/docs/LightBox/LightBox.md

@@ -43,6 +43,10 @@ LightBox exposes its internal building blocks as subcomponents:
 `LightBox.Navigation`, `LightBox.Caption`, and `LightBox.Thumbnails`. This gives
 you more control over the LightBox's appearance and behaviour.
 
+The thumbnail strip is itself composed of smaller subcomponents you can use
+directly: `LightBox.ThumbnailBar`, `LightBox.Thumbnail`, and
+`LightBox.ThumbnailImage`. See [Custom thumbnails](#custom-thumbnails) below.
+
 Here's a basic example of how the non-composable LightBox is used:
 
 ```tsx
@@ -157,6 +161,33 @@ function CustomControls() {
 }
 ```
 
+### Custom thumbnails
+
+`LightBox.Thumbnails` renders the default thumbnail strip and requires no
+configuration. When you need to control how each thumbnail renders, compose the
+thumbnail subcomponents yourself:
+
+```tsx
+import { LightBox, useLightBoxContext } from "@jobber/components";
+
+function CustomThumbnails() {
+  const { images } = useLightBoxContext();
+
+  return (
+    <LightBox.ThumbnailBar>
+      {images.map((image, index) => (
+        <LightBox.Thumbnail key={index} index={index}>
+          <LightBox.ThumbnailImage
+            src={image.url}
+            alt={image.alt ?? image.title ?? ""}
+          />
+        </LightBox.Thumbnail>
+      ))}
+    </LightBox.ThumbnailBar>
+  );
+}
+```
+
 ## Testing
 
 When using Jest to test LightBox implementations, you will need to include this
@@ -223,3 +254,26 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `className` | `string` | No | — |  |
+
+#### LightBox.Thumbnail
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The content rendered inside the selectable thumbnail cell, typically a `LightBox.ThumbnailImage`. |
+| `index` | `number` | Yes | — | The index of the image this thumbnail represents. Used to derive the selected state and to navigate to the image when... |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail cell. |
+
+#### LightBox.ThumbnailBar
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `children` | `ReactNode` | Yes | — | The thumbnails to render inside the scrollable bar, typically one `LightBox.Thumbnail` per image. |
+| `className` | `string` | No | — | Additional class name to apply to the thumbnail bar wrapper. |
+
+#### LightBox.ThumbnailImage
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `alt` | `string` | Yes | — | The alternative text for the image. |
+| `src` | `string` | Yes | — | The image source to render. |
+| `className` | `string` | No | — | Additional class name to apply to the image. |

package/dist/styles.css

@@ -9,6 +9,14 @@
  *   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.
+ *
+ * Durations are Material's spec scaled by 1.15× for a calmer pace
+ * (Material: 1568 / 5332 / 1333). The cycle:arc ratio is held at exactly
+ * 4:1 (6132 = 4 × 1533) so the four blooms per rotation stay evenly spaced.
+ *
+ * The `small` variant uses only Layer 1 — a fixed-length arc spun at a
+ * constant speed (~1.8× faster than base) — because the layered
+ * expand/rotate motion reads as too busy at the smaller size.
  */
 
 .YST686vLR3c- {
@@ -43,24 +51,14 @@
   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.
- */
+/* Layer 1 — continuous linear rotation on the SVG. */
 
 .Av9z-aLocss- {
   display: block;
   width: 100%;
   height: 100%;
-  -webkit-animation: WvHFS--Nm80- 1568ms linear infinite;
-          animation: WvHFS--Nm80- 1568ms linear infinite;
+  -webkit-animation: WvHFS--Nm80- 1803ms linear infinite;
+          animation: WvHFS--Nm80- 1803ms linear infinite;
   will-change: transform;
 }
 
@@ -78,14 +76,12 @@
 }
 
 /*
- * Layer 2 + 3 — the active arc.
+ * Layer 2 + 3 — the active arc. The circle has circumference 2π·20 ≈ 125.66
+ * (SVG units); the "200" gap exceeds it so only one segment shows at a time.
+ * stroke-linecap: round gives the soft pill-shaped tips.
  *
- * 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.
+ * The expand animation is delayed by half its period so it starts fully
+ * bloomed and its phase is offset from the rotation start.
  */
 
 ._9XO0290QNCY- {
@@ -96,16 +92,35 @@
   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;
+  -webkit-animation: SHHICknKvqA- 6132ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+      both,
+    _0m0Nzc5awnA- 1533ms linear infinite both;
+          animation: SHHICknKvqA- 6132ms cubic-bezier(0.4, 0, 0.2, 1) infinite
+      both,
+    _0m0Nzc5awnA- 1533ms linear infinite both;
+  -webkit-animation-delay: 0s, -766.5ms;
+          animation-delay: 0s, -766.5ms;
+}
+
+/*
+ * Small renders as a simple fixed-length arc spun only by the SVG
+ * (Layer 1). The 8-phase rotation (Layer 2) and the tail-chasing expand
+ * (Layer 3) read as too busy at this size, so both are disabled and the
+ * arc is given a constant length instead. It also spins ~1.8× faster
+ * (1803ms ÷ 1.8 ≈ 1000ms) so the simpler single arc still feels lively.
+ */
+
+._888S5Y2IeZ8- .Av9z-aLocss- {
+  -webkit-animation-duration: 1000ms;
+          animation-duration: 1000ms;
 }
 
 ._888S5Y2IeZ8- ._9XO0290QNCY- {
   stroke-width: 6;
+  stroke-dasharray: 40, 200;
+  stroke-dashoffset: 0;
+  -webkit-animation: none;
+          animation: none;
 }
 
 @-webkit-keyframes WvHFS--Nm80- {
@@ -196,38 +211,53 @@
 
 /*
  * 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.
+ * while sliding it around the ring via stroke-dashoffset.
+ *
+ * Rhythm (cycle = 4 × arc, so one breath = two rotation phases):
+ *   - bloom open  0 → 50%   (one full rotation phase)
+ *   - deflate     50 → 80%  (tail catches the head)
+ *   - hold        80 → 100% (a beat before re-blooming)
+ *
+ * The minimum length stays at 8 (not ~0) so the arc never pinches to a dot,
+ * and the 100% keyframe matches 0% with the offset advanced one full
+ * circumference (≈125.66) so the loop is seamless — no catch-up blink.
  */
 
 @-webkit-keyframes _0m0Nzc5awnA- {
   0% {
-    stroke-dasharray: 1, 200;
+    stroke-dasharray: 8, 200;
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 90, 200;
     stroke-dashoffset: -35;
   }
+  80% {
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
+  }
   100% {
-    stroke-dasharray: 90, 200;
-    stroke-dashoffset: -125;
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
   }
 }
 
 @keyframes _0m0Nzc5awnA- {
   0% {
-    stroke-dasharray: 1, 200;
+    stroke-dasharray: 8, 200;
     stroke-dashoffset: 0;
   }
   50% {
     stroke-dasharray: 90, 200;
     stroke-dashoffset: -35;
   }
+  80% {
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
+  }
   100% {
-    stroke-dasharray: 90, 200;
-    stroke-dashoffset: -125;
+    stroke-dasharray: 8, 200;
+    stroke-dashoffset: -125.66;
   }
 }
 

package/dist/utils/meta/meta.json

@@ -138,6 +138,9 @@
     "LightBox.Overlay",
     "LightBox.Provider",
     "LightBox.Slides",
+    "LightBox.Thumbnail",
+    "LightBox.ThumbnailBar",
+    "LightBox.ThumbnailImage",
     "LightBox.Thumbnails",
     "LightBox.Toolbar",
     "Link",
@@ -226,4 +229,4 @@
     "Tooltip",
     "Typography"
   ]
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -556,5 +556,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "954f61ec1d4a5015f706979a120c55af6115a711"
+  "gitHead": "e38cc8fc9387c2d0152349bfed2b16cfddb31037"
 }