@spark-ui/components 10.11.14 → 10.13.0

package/dist/carousel/index.d.mts

@@ -51,6 +51,10 @@ interface UseCarouselProps {
     scrollBehavior?: 'instant' | 'smooth';
     onPageChange?: (pageIndex: number) => void;
     pagePickerInset?: boolean;
+    /**
+     * Maximum number of dots to display in the page picker.
+     */
+    maxDots?: number;
 }
 interface ComputedRootProps {
     id: string;
@@ -120,7 +124,7 @@ interface ComputedIndicatorProps {
     'data-part': 'indicator';
     'data-orientation': 'horizontal';
     'data-index': number;
-    'data-state': 'active' | 'inactive';
+    'data-state': 'active' | 'edge' | 'hidden' | 'idle';
     tabIndex: 0 | -1;
     onClick: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
@@ -159,6 +163,7 @@ interface CarouselAPI extends AnatomyPropsSetters {
     snapType: UseCarouselProps['snapType'];
     snapStop: UseCarouselProps['snapStop'];
     scrollBehavior: UseCarouselProps['scrollBehavior'];
+    maxDots: number;
 }
 
 interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {
@@ -166,7 +171,7 @@ interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {
     className?: string;
 }
 declare const Carousel$1: {
-    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, pagePickerInset, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, pagePickerInset, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, maxDots, ...props }: Props$4): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/carousel/index.d.ts

@@ -51,6 +51,10 @@ interface UseCarouselProps {
     scrollBehavior?: 'instant' | 'smooth';
     onPageChange?: (pageIndex: number) => void;
     pagePickerInset?: boolean;
+    /**
+     * Maximum number of dots to display in the page picker.
+     */
+    maxDots?: number;
 }
 interface ComputedRootProps {
     id: string;
@@ -120,7 +124,7 @@ interface ComputedIndicatorProps {
     'data-part': 'indicator';
     'data-orientation': 'horizontal';
     'data-index': number;
-    'data-state': 'active' | 'inactive';
+    'data-state': 'active' | 'edge' | 'hidden' | 'idle';
     tabIndex: 0 | -1;
     onClick: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
@@ -159,6 +163,7 @@ interface CarouselAPI extends AnatomyPropsSetters {
     snapType: UseCarouselProps['snapType'];
     snapStop: UseCarouselProps['snapStop'];
     scrollBehavior: UseCarouselProps['scrollBehavior'];
+    maxDots: number;
 }
 
 interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {
@@ -166,7 +171,7 @@ interface Props$4 extends UseCarouselProps, ComponentProps<'div'> {
     className?: string;
 }
 declare const Carousel$1: {
-    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, pagePickerInset, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, ...props }: Props$4): react_jsx_runtime.JSX.Element;
+    ({ className, snapType, snapStop, scrollBehavior, slidesPerMove, pagePickerInset, slidesPerPage, loop, children, gap, defaultPage, page, onPageChange, maxDots, ...props }: Props$4): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/carousel/index.js

@@ -163,6 +163,35 @@ function getSnapPositions({
     });
   }).map((slide) => slide.offsetLeft);
 }
+function computeDotState({
+  dotIndex,
+  pageState,
+  totalPages,
+  maxDots = 5
+}) {
+  if (totalPages <= maxDots) {
+    return dotIndex === pageState ? "active" : "idle";
+  }
+  if (pageState <= Math.floor(maxDots / 2)) {
+    if (dotIndex > maxDots - 1) return "hidden";
+    if (dotIndex === pageState) return "active";
+    if (dotIndex === maxDots - 1) return "edge";
+    return "idle";
+  }
+  if (pageState >= totalPages - Math.ceil(maxDots / 2)) {
+    const startIndex2 = totalPages - maxDots;
+    if (dotIndex < startIndex2) return "hidden";
+    if (dotIndex === pageState) return "active";
+    if (dotIndex === startIndex2) return "edge";
+    return "idle";
+  }
+  const startIndex = pageState - Math.floor(maxDots / 2);
+  const endIndex = pageState + Math.floor(maxDots / 2);
+  if (dotIndex < startIndex || dotIndex > endIndex) return "hidden";
+  if (dotIndex === pageState) return "active";
+  if (dotIndex === startIndex || dotIndex === endIndex) return "edge";
+  return "idle";
+}
 
 // src/carousel/useSnapPoints.ts
 function useSnapPoints(initialSnapPoints = [], {
@@ -199,6 +228,7 @@ var useCarousel = ({
   scrollBehavior = "smooth",
   loop = false,
   pagePickerInset = false,
+  maxDots = 5,
   // state control
   page: controlledPage,
   onPageChange: onPageChangeProp
@@ -301,6 +331,7 @@ var useCarousel = ({
     scrollBehavior,
     loop,
     pagePickerInset,
+    maxDots,
     // computed state
     page: pageState,
     pageSnapPoints,
@@ -409,17 +440,22 @@ var useCarousel = ({
       dir: DIRECTION
     }),
     getIndicatorProps: ({ index }) => {
-      const isActivePage = index === pageState;
+      const dotState = computeDotState({
+        dotIndex: index,
+        pageState,
+        totalPages: pageSnapPoints.length,
+        maxDots
+      });
       return {
         role: "radio",
         id: `carousel::${carouselId}::indicator:${index}`,
-        "aria-checked": isActivePage,
+        "aria-checked": index === pageState,
         "data-scope": DATA_SCOPE,
         "data-part": "indicator",
         "data-orientation": "horizontal",
         "data-index": index,
-        "data-state": isActivePage ? "active" : "inactive",
-        tabIndex: isActivePage ? 0 : -1,
+        "data-state": dotState,
+        tabIndex: index === pageState ? 0 : -1,
         onClick: () => {
           scrollTo(index, scrollBehavior);
         },
@@ -456,6 +492,7 @@ var Carousel = ({
   defaultPage,
   page,
   onPageChange,
+  maxDots = 5,
   ...props
 }) => {
   const carouselApi = useCarousel({
@@ -469,7 +506,8 @@ var Carousel = ({
     snapType,
     page,
     pagePickerInset,
-    onPageChange
+    onPageChange,
+    maxDots
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     CarouselContext.Provider,
@@ -1576,28 +1614,26 @@ var CarouselPageIndicator = ({
       ctx.pageIndicatorsRefs.current[index] = ref.current;
     }
   });
-  const styles = (0, import_class_variance_authority8.cx)(
-    "group h-sz-16 relative flex",
-    "hover:cursor-pointer",
-    "w-sz-16 data-[state=active]:w-sz-44"
-  );
-  const dotsStyles = (0, import_class_variance_authority8.cx)(
-    "before:rounded-sm before:block before:size-md",
-    "before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2",
-    "data-[state=active]:before:w-sz-32",
-    intent === "surface" ? "data-[state=active]:before:bg-surface data-[state=inactive]:before:bg-surface/dim-2" : "data-[state=active]:before:bg-basic data-[state=inactive]:before:bg-on-surface/dim-2"
-  );
+  const indicatorProps = ctx.getIndicatorProps({ index });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "button",
     {
       "data-spark-component": "carousel-page-indicator",
       ref,
-      ...ctx.getIndicatorProps({ index }),
+      ...indicatorProps,
       "aria-label": ariaLabel,
       className: (0, import_class_variance_authority8.cx)(
         {
-          [styles]: !unstyled,
-          [dotsStyles]: !unstyled
+          [(0, import_class_variance_authority8.cx)(
+            "border-outline group relative flex justify-center border-0 hover:cursor-pointer",
+            "m-sm rounded-sm transition-all duration-[200ms] ease-linear",
+            "w-sz-8 h-sz-8",
+            "data-[state=active]:w-sz-32 data-[state=active]:h-sz-8",
+            "data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4",
+            "data-[state=hidden]:size-0",
+            intent === "surface" ? "data-[state=active]:bg-surface bg-surface/dim-2" : "data-[state=active]:bg-basic bg-on-surface/dim-2"
+          )]: !unstyled
+          // [dotsStyles]: !unstyled,
         },
         className
       ),
@@ -1619,7 +1655,8 @@ var CarouselPagePicker = ({ children, className }) => {
       "data-spark-component": "carousel-page-picker",
       ...ctx.getIndicatorGroupProps(),
       className: (0, import_class_variance_authority9.cx)(
-        "default:min-h-sz-16 flex w-full flex-wrap items-center justify-center",
+        "flex-wrap items-center justify-center",
+        "default:min-h-sz-16 flex",
         ctx.pagePickerInset && "bottom-sz-12 absolute inset-x-0",
         className
       ),