@phillips/seldon 1.115.0 → 1.115.1

package/dist/components/Carousel/CarouselDots.d.ts

@@ -14,13 +14,5 @@ export interface CarouselDotsProps extends ComponentProps<'div'> {
      */
     numberOfSlides?: number;
 }
-/**
- * ## Overview
- *
- * Carousel dots component that displays pagination for the carousel.
- * It supports a maximum number of visible dots
- * The dots animate left to right as the user navigates through the carousel.
- *
- */
 declare const CarouselDots: import('react').ForwardRefExoticComponent<Omit<CarouselDotsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default CarouselDots;

package/dist/components/Carousel/CarouselDots.js

@@ -1,31 +1,31 @@
 import { jsx as u } from "react/jsx-runtime";
-import B from "../../node_modules/classnames/index.js";
-import { forwardRef as E, useId as L, useState as S, useRef as M, useCallback as c, useEffect as W, useMemo as q } from "react";
-import { useCarousel as z } from "./utils.js";
-import { getCommonProps as A } from "../../utils/index.js";
-import { CarouselDot as F } from "./CarouselDot.js";
-const G = E(
-  ({ className: w, maxDots: h = 9, position: N = "inline", numberOfSlides: v = 0, ...C }, V) => {
-    const { className: a, ...b } = A(C, "CarouselDots"), k = L(), { api: o, onSlideChange: s } = z(), [y, R] = S(0), [i, T] = S(
-      Array.from({ length: v }, (e, t) => t)
+import E from "../../node_modules/classnames/index.js";
+import { forwardRef as G, useId as L, useState as S, useRef as M, useCallback as c, useEffect as q, useMemo as z } from "react";
+import { useCarousel as A } from "./utils.js";
+import { getCommonProps as F } from "../../utils/index.js";
+import { CarouselDot as H } from "./CarouselDot.js";
+const w = 10, N = 10, J = 11, K = G(
+  ({ className: v, maxDots: h = 9, position: V = "inline", numberOfSlides: b = 0, ...C }, k) => {
+    const { className: a, ...y } = F(C, "CarouselDots"), R = L(), { api: o, onSlideChange: s } = A(), [T, O] = S(0), [i, P] = S(
+      Array.from({ length: b }, (e, t) => t)
     ), l = M(null), [D, $] = S([]), g = c((e) => {
       var t, m;
       l.current && ((m = (t = l.current).scrollTo) == null || m.call(t, {
         // 8px width + 12px gap
-        left: e * 20 - l.current.offsetWidth / 2 + 10,
+        left: e * (w + N) - l.current.offsetWidth / 2 + J,
         // Center dot in container
         behavior: "smooth"
       }));
-    }, []), O = c(
+    }, []), W = c(
       (e) => {
         o && (o.scrollTo(e, !0), s == null || s(e));
       },
       [o, s]
     ), f = c((e) => {
-      T(e.scrollSnapList());
+      P(e.scrollSnapList());
     }, []), n = c(
       (e) => {
-        R(e.selectedScrollSnap()), g(e.selectedScrollSnap());
+        O(e.selectedScrollSnap()), g(e.selectedScrollSnap());
       },
       [g]
     ), d = c(
@@ -34,31 +34,31 @@ const G = E(
       },
       [s]
     );
-    W(() => {
+    q(() => {
       if (o)
         return f(o), n(o), o.on("reInit", f).on("reInit", n).on("select", n).on("settle", d), () => {
           o.off("reInit", f).off("reInit", n).off("select", n).off("settle", d);
         };
     }, [o, f, n, d]);
-    const r = q(() => D.sort((e, t) => e - t), [D]);
+    const r = z(() => D.sort((e, t) => e - t), [D]);
     return /* @__PURE__ */ u(
       "div",
       {
-        ref: V,
+        ref: k,
         role: "group",
         "aria-roledescription": "pagination",
         "aria-label": "pagination",
-        className: B(`${a}`, w, `${a}-${N}`),
+        className: E(`${a}`, v, `${a}-${V}`),
         ...C,
-        ...b,
+        ...y,
         children: /* @__PURE__ */ u("div", { className: `${a}-container`, children: /* @__PURE__ */ u(
           "div",
           {
-            style: { "--max-width": `${h * 8 + (h - 1) * 12}px` },
+            style: { "--max-width": `${h * w + (h - 1) * N}px` },
             className: `${a}-container-inner`,
             ref: l,
             children: i.map((e, t) => {
-              const m = y === t, p = r.indexOf(t), P = (
+              const m = T === t, p = r.indexOf(t), _ = (
                 // The dot is out of view
                 p === -1 || // The dot must be either among the first two or last two visible dots
                 (p <= 1 || p >= r.length - 2) && // Don't shrink if we're showing the first two dots (index 0,1) and both are visible
@@ -66,17 +66,17 @@ const G = E(
                 !(t >= i.length - 2 && r.includes(i.length - 1) && r.includes(i.length - 2))
               );
               return /* @__PURE__ */ u(
-                F,
+                H,
                 {
-                  onClick: () => O(t),
+                  onClick: () => W(t),
                   isSelected: m,
                   scrollableContainerRef: l,
-                  onInViewChange: (_) => {
-                    $(_ ? (I) => [...I, t] : (I) => I.filter((j) => j !== t));
+                  onInViewChange: (j) => {
+                    $(j ? (I) => [...I, t] : (I) => I.filter((B) => B !== t));
                   },
-                  variant: P ? "sm" : "md"
+                  variant: _ ? "sm" : "md"
                 },
-                `${k}-dot-${t}`
+                `${R}-dot-${t}`
               );
             })
           }
@@ -85,7 +85,7 @@ const G = E(
     );
   }
 );
-G.displayName = "CarouselDots";
+K.displayName = "CarouselDots";
 export {
-  G as default
+  K as default
 };

package/dist/scss/components/Carousel/_carousel.scss

@@ -62,7 +62,7 @@
     &-container-inner {
       align-items: center;
       display: flex;
-      gap: 12px;
+      gap: 10px;
       max-width: var(--max-width);
       overflow: auto;
       -webkit-overflow-scrolling: touch;
@@ -79,17 +79,31 @@
   &-dot__container {
     align-items: center;
     display: flex;
-    height: 8px;
+    height: 10px;
     justify-content: center;
-    min-width: 8px;
+    margin: 2px;
+    min-width: 10px;
     padding: 1px;
     scroll-snap-align: center;
-    width: 8px;
+    width: 10px;
+
+    &:focus-visible {
+      border-radius: 50%;
+      outline: 0.5px solid #000;
+
+      &-dot {
+        &:hover {
+          background-color: transparent;
+          outline: 1px solid #000;
+        }
+      }
+    }
   }
 
   &-dot {
+    background-color: #eceae7;
     border-radius: 50%;
-    outline: 1px solid #adadad;
+    outline-color: #eceae7;
 
     &--md {
       height: 100%;
@@ -101,9 +115,19 @@
       width: 50%;
     }
 
+    &:hover {
+      background-color: transparent;
+      outline: 1px solid #000;
+    }
+
     &--selected {
-      background-color: #525050;
-      outline-color: #525050;
+      background-color: #000;
+      outline-color: #000;
+
+      &:hover {
+        background-color: #000;
+        outline: none;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.115.0",
+  "version": "1.115.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"