@salt-ds/embla-carousel 0.0.0-snapshot-20250627090641 → 0.1.0

package/dist-es/CarouselTabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType, makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useRef } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabProps & { render?: CarouselTabListProps[\"render\"] }\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi } = useCarouselContext();\n    const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);\n\n    const slideNodes = emblaApi?.slideNodes();\n    const numberOfSlides = slideNodes?.length ?? 0;\n    const slidesPerTransition = numberOfSlides\n      ? Math.ceil(numberOfSlides / scrollSnaps.length)\n      : 0;\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (\n      event,\n    ) => {\n      let newIndex = selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex =\n          (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;\n      } else if (event.key === \"Home\") {\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== selectedIndex) {\n        onClick(newIndex);\n        buttonRefs.current[newIndex]?.focus();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        role=\"tablist\"\n        aria-label=\"Choose slide\"\n        tabIndex={0}\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, tabIndex) => {\n          const startSlideNumber = tabIndex * slidesPerTransition + 1;\n          const endSlideNumber = Math.min(\n            startSlideNumber + slidesPerTransition - 1,\n            numberOfSlides,\n          );\n          const label =\n            startSlideNumber === endSlideNumber\n              ? `Slide ${startSlideNumber}`\n              : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;\n\n          const selected = selectedIndex === tabIndex;\n\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${tabIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[tabIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              onClick={() => onClick(tabIndex)}\n              aria-selected={selected}\n              selected={selected}\n              tabIndex={selected ? 0 : -1}\n              aria-label={label}\n              aria-labelledby={ariaControls}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselTabList","carouselControlsCss"],"mappings":"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"}
+{"version":3,"file":"CarouselTabList.js","sources":["../src/CarouselTabList.tsx"],"sourcesContent":["import { type RenderPropsType, makePrefixer, renderProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport {\n  CarouselTab,\n  type CarouselTabProps,\n  useCarouselTab,\n} from \"./CarouselTab\";\nimport carouselControlsCss from \"./CarouselTabList.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\n/**\n * Props for the CarouselTabList component.\n */\nexport interface CarouselTabListProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render prop to enable customisation of tab button.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nconst CarouselTabRenderer = forwardRef<\n  HTMLButtonElement,\n  CarouselTabProps & { render?: CarouselTabListProps[\"render\"] }\n>((props, ref) => {\n  return renderProps(CarouselTab, { ...props, ref });\n});\n\nexport const CarouselTabList = forwardRef<HTMLDivElement, CarouselTabListProps>(\n  function CarouselTabList({ className, render, onKeyDown, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-controls\",\n      css: carouselControlsCss,\n      window: targetWindow,\n    });\n\n    const { emblaApi } = useCarouselContext();\n    const { selectedIndex, scrollSnaps, onClick } = useCarouselTab(emblaApi);\n\n    const slideNodes = emblaApi?.slideNodes();\n    const numberOfSlides = slideNodes?.length ?? 0;\n    const slidesPerTransition = numberOfSlides\n      ? Math.ceil(numberOfSlides / scrollSnaps.length)\n      : 0;\n\n    const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      let newIndex = selectedIndex;\n\n      if (event.key === \"ArrowLeft\" || event.key === \"ArrowRight\") {\n        const direction = event.key === \"ArrowLeft\" ? -1 : 1;\n        newIndex =\n          (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;\n      } else if (event.key === \"Home\") {\n        newIndex = 0;\n      } else if (event.key === \"End\") {\n        newIndex = scrollSnaps.length - 1;\n      }\n\n      if (newIndex !== selectedIndex) {\n        onClick(newIndex);\n        buttonRefs.current[newIndex]?.focus();\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        role=\"tablist\"\n        aria-label=\"Choose slide\"\n        tabIndex={0}\n        className={clsx(withBaseName(), className)}\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        {...rest}\n      >\n        {scrollSnaps.map((_, tabIndex) => {\n          const startSlideNumber = tabIndex * slidesPerTransition + 1;\n          const endSlideNumber = Math.min(\n            startSlideNumber + slidesPerTransition - 1,\n            numberOfSlides,\n          );\n          const label =\n            startSlideNumber === endSlideNumber\n              ? `Slide ${startSlideNumber}`\n              : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;\n\n          const selected = selectedIndex === tabIndex;\n\n          const ariaControls = slideNodes?.length\n            ? slideNodes[startSlideNumber - 1].id\n            : undefined;\n          return (\n            <CarouselTabRenderer\n              key={`carouselTab-${tabIndex}}`}\n              ref={(element: HTMLButtonElement) => {\n                buttonRefs.current[tabIndex] = element;\n              }}\n              render={render}\n              role={\"tab\"}\n              onClick={() => onClick(tabIndex)}\n              aria-selected={selected}\n              selected={selected}\n              tabIndex={selected ? 0 : -1}\n              aria-label={label}\n              aria-labelledby={ariaControls}\n              aria-controls={ariaControls}\n            />\n          );\n        })}\n      </div>\n    );\n  },\n);\n"],"names":["CarouselTabList","carouselControlsCss"],"mappings":"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"}

package/dist-es/createCustomSettle.js

@@ -0,0 +1,12 @@
+const settlePixelThreshold = 10;
+const createCustomSettle = (callback) => function fireCustomSettle(emblaApi) {
+  const { dragHandler, location, target } = emblaApi.internalEngine();
+  if (dragHandler.pointerDown()) return;
+  const displacement = target.get() - location.get();
+  if (Math.abs(displacement) < settlePixelThreshold) {
+    callback(emblaApi);
+  }
+};
+
+export { createCustomSettle };
+//# sourceMappingURL=createCustomSettle.js.map

package/dist-es/createCustomSettle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCustomSettle.js","sources":["../src/createCustomSettle.ts"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\n\nconst settlePixelThreshold = 10;\n\nexport type SettleCallback = (emblaApi: EmblaCarouselType) => void;\nexport type CreateCustomSettle = (callback: SettleCallback) => SettleCallback;\n\nexport const createCustomSettle: CreateCustomSettle = (callback) =>\n  function fireCustomSettle(emblaApi: EmblaCarouselType) {\n    const { dragHandler, location, target } = emblaApi.internalEngine();\n    if (dragHandler.pointerDown()) return;\n    const displacement = target.get() - location.get();\n    if (Math.abs(displacement) < settlePixelThreshold) {\n      callback(emblaApi);\n    }\n  };\n"],"names":[],"mappings":"AAEA,MAAM,oBAAuB,GAAA,EAAA;AAKtB,MAAM,kBAAyC,GAAA,CAAC,QACrD,KAAA,SAAS,iBAAiB,QAA6B,EAAA;AACrD,EAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,MAAO,EAAA,GAAI,SAAS,cAAe,EAAA;AAClE,EAAI,IAAA,WAAA,CAAY,aAAe,EAAA;AAC/B,EAAA,MAAM,YAAe,GAAA,MAAA,CAAO,GAAI,EAAA,GAAI,SAAS,GAAI,EAAA;AACjD,EAAA,IAAI,IAAK,CAAA,GAAA,CAAI,YAAY,CAAA,GAAI,oBAAsB,EAAA;AACjD,IAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;AAErB;;;;"}

package/dist-es/usePrevNextButtons.js

@@ -1,23 +1,21 @@
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useCarouselContext } from './CarouselContext.js';
 
 const usePrevNextButtons = () => {
   const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
   const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
   const { emblaApi } = useCarouselContext();
-  const handlePrevButtonClick = useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollPrev();
-  }, [emblaApi]);
-  const handleNextButtonClick = useCallback(() => {
-    if (!emblaApi) return;
-    emblaApi.scrollNext();
-  }, [emblaApi]);
-  const handleSelect = useCallback((emblaApi2) => {
-    setPrevBtnDisabled(!emblaApi2.canScrollPrev());
-    setNextBtnDisabled(!emblaApi2.canScrollNext());
-  }, []);
+  const handlePrevButtonClick = () => {
+    emblaApi == null ? void 0 : emblaApi.scrollPrev();
+  };
+  const handleNextButtonClick = () => {
+    emblaApi == null ? void 0 : emblaApi.scrollNext();
+  };
   useEffect(() => {
+    const handleSelect = (emblaApi2) => {
+      setPrevBtnDisabled(!emblaApi2.canScrollPrev());
+      setNextBtnDisabled(!emblaApi2.canScrollNext());
+    };
     if (!emblaApi) {
       return;
     }
@@ -26,7 +24,7 @@ const usePrevNextButtons = () => {
     return () => {
       emblaApi.off("init", handleSelect).off("reInit", handleSelect).off("select", handleSelect);
     };
-  }, [emblaApi, handleSelect]);
+  }, [emblaApi]);
   return {
     prevBtnDisabled,
     nextBtnDisabled,

package/dist-es/usePrevNextButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi } = useCarouselContext();\n\n  const handlePrevButtonClick = useCallback(() => {\n    if (!emblaApi) return;\n    emblaApi.scrollPrev();\n  }, [emblaApi]);\n\n  const handleNextButtonClick = useCallback(() => {\n    if (!emblaApi) return;\n    emblaApi.scrollNext();\n  }, [emblaApi]);\n\n  const handleSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setPrevBtnDisabled(!emblaApi.canScrollPrev());\n    setNextBtnDisabled(!emblaApi.canScrollNext());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi, handleSelect]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IAAA,QAAA,CAAS,UAAW,EAAA;AAAA,GACtB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,qBAAA,GAAwB,YAAY,MAAM;AAC9C,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IAAA,QAAA,CAAS,UAAW,EAAA;AAAA,GACtB,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAACA,SAAgC,KAAA;AAChE,IAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAC5C,IAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAAA,GAC9C,EAAG,EAAE,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA;AAAA;AAEF,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,YAAY,CAAC,CAAA;AAE3B,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAmB,EAAA,qBAAA;AAAA,IACnB,iBAAmB,EAAA;AAAA,GACrB;AACF;;;;"}
+{"version":3,"file":"usePrevNextButtons.js","sources":["../src/usePrevNextButtons.tsx"],"sourcesContent":["import type { EmblaCarouselType } from \"embla-carousel\";\nimport { useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\n\ntype UsePrevNextButtonsType = {\n  /**\n   * Indicates whether the previous button is disabled.\n   */\n  prevBtnDisabled: boolean;\n  /**\n   * Indicates whether the next button is disabled.\n   */\n  nextBtnDisabled: boolean;\n  /**\n   * Handles the click event for the previous button.\n   */\n  onPrevButtonClick: () => void;\n  /**\n   * Handles the click event for the next button.\n   */\n  onNextButtonClick: () => void;\n};\n\nexport const usePrevNextButtons = (): UsePrevNextButtonsType => {\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);\n\n  const { emblaApi } = useCarouselContext();\n\n  const handlePrevButtonClick = () => {\n    emblaApi?.scrollPrev();\n  };\n\n  const handleNextButtonClick = () => {\n    emblaApi?.scrollNext();\n  };\n\n  useEffect(() => {\n    const handleSelect = (emblaApi: EmblaCarouselType) => {\n      setPrevBtnDisabled(!emblaApi.canScrollPrev());\n      setNextBtnDisabled(!emblaApi.canScrollNext());\n    };\n\n    if (!emblaApi) {\n      return;\n    }\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleSelect)\n      .on(\"reInit\", handleSelect)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSelect)\n        .off(\"reInit\", handleSelect)\n        .off(\"select\", handleSelect);\n    };\n  }, [emblaApi]);\n\n  return {\n    prevBtnDisabled,\n    nextBtnDisabled,\n    onPrevButtonClick: handlePrevButtonClick,\n    onNextButtonClick: handleNextButtonClick,\n  };\n};\n"],"names":["emblaApi"],"mappings":";;;AAuBO,MAAM,qBAAqB,MAA8B;AAC9D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,kBAAmB,EAAA;AAExC,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAA,MAAM,wBAAwB,MAAM;AAClC,IAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AAAA,GACZ;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,YAAA,GAAe,CAACA,SAAgC,KAAA;AACpD,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAC5C,MAAmB,kBAAA,CAAA,CAACA,SAAS,CAAA,aAAA,EAAe,CAAA;AAAA,KAC9C;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA;AAAA;AAEF,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MACG,QAAA,CAAA,GAAA,CAAI,MAAQ,EAAA,YAAY,CACxB,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA,CAC1B,GAAI,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KAC/B;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,IACA,iBAAmB,EAAA,qBAAA;AAAA,IACnB,iBAAmB,EAAA;AAAA,GACrB;AACF;;;;"}

package/dist-types/Carousel.d.ts

@@ -20,7 +20,7 @@ export interface CarouselProps extends ComponentPropsWithoutRef<"section"> {
      * These options are passed directly to the Embla Carousel instance.
      */
     emblaPlugins?: CarouselPlugin;
-    /** Get embla API as ref, use this to manage the state of the Carousel */
+    /** Get embla API instance, use this to manage the state of the Carousel */
     getEmblaApi?: (embla: CarouselEmblaApiType) => void;
 }
 export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/CarouselAnnouncementPlugin.d.ts

@@ -1,4 +1,4 @@
-import type { CreateOptionsType, CreatePluginType } from "embla-carousel";
+import type { CreateOptionsType, CreatePluginType, EmblaCarouselType } from "embla-carousel";
 declare module "embla-carousel" {
     interface EmblaPluginsType {
         announcement: CarouselAnnouncementType;
@@ -6,24 +6,14 @@ declare module "embla-carousel" {
 }
 /**
  * Type definition for the parameters of the getSlideLabel function.
+ * @returns A string that describes the slide, including its index and total count.
  */
-export type GetSlideLabelProps = (
-/**
- * The HTML element representing the slide.
- */
-slideElement: HTMLElement, 
-/**
- * The index of the slide within the carousel.
- */
-slideIndex: number, 
-/**
- * The total number of slides in the carousel.
- */
-slideCount: number) => string;
-/**
- * Generates a label for a carousel slide based on ARIA attributes.
- *
- * @param props - The properties required to generate the slide description.
+export type GetSlideLabelProps = (emblaApi: EmblaCarouselType) => string;
+/** * Generates a label for a carousel slide based on ARIA attributes.
+ * This function retrieves the slide's ARIA label or text content and formats it into a descriptive string.
+ * @param slideElement
+ * @param slideIndex
+ * @param slideCount
  * @returns A string description of the slide, including its position and ARIA label or text content.
  */
 export declare const getSlideLabel: GetSlideLabelProps;

package/dist-types/CarouselAutoplayIndicator.d.ts

@@ -12,5 +12,9 @@ export interface CarouselAutoplayIndicatorProps extends ComponentPropsWithoutRef
      * If `true`, the indicator is animated to visualize the time until the next slide.
      */
     isPlaying: boolean;
+    /**
+     * If `true`, the animation is paused.
+     */
+    isPaused?: boolean;
 }
 export declare const CarouselAutoplayIndicator: import("react").ForwardRefExoticComponent<CarouselAutoplayIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/CarouselAutoplayIndicatorSVG.d.ts

@@ -1,4 +1,4 @@
-import { type SVGAttributes } from "react";
+import { type Ref, type SVGAttributes } from "react";
 export interface CarouselAutoplayIndicatorSVGProps extends SVGAttributes<SVGSVGElement> {
     /**
      * Class name to apply to the SVG element.
@@ -7,7 +7,7 @@ export interface CarouselAutoplayIndicatorSVGProps extends SVGAttributes<SVGSVGE
     /**
      * Ref to attach to progress indicator element
      */
-    barRef: React.Ref<SVGCircleElement>;
+    barRef: Ref<SVGCircleElement>;
     /**
      * Size of the SVG in pixels.
      */

package/dist-types/CarouselNextButton.d.ts

@@ -2,6 +2,6 @@ import { type ButtonProps } from "@salt-ds/core";
 /**
  * Props for the CarouselNextButton component.
  */
-export interface CarouselNextButtonProps extends ButtonProps {
+export interface CarouselNextButtonProps extends Omit<ButtonProps, "variant" | "loading" | "loadingAnnouncement"> {
 }
 export declare const CarouselNextButton: import("react").ForwardRefExoticComponent<CarouselNextButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/CarouselPreviousButton.d.ts

@@ -2,6 +2,6 @@ import { type ButtonProps } from "@salt-ds/core";
 /**
  * Props for the CarouselPreviousButton component.
  */
-export interface CarouselPreviousButtonProps extends ButtonProps {
+export interface CarouselPreviousButtonProps extends Omit<ButtonProps, "variant" | "loading" | "loadingAnnouncement"> {
 }
 export declare const CarouselPreviousButton: import("react").ForwardRefExoticComponent<CarouselPreviousButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist-types/createCustomSettle.d.ts

@@ -0,0 +1,4 @@
+import type { EmblaCarouselType } from "embla-carousel";
+export type SettleCallback = (emblaApi: EmblaCarouselType) => void;
+export type CreateCustomSettle = (callback: SettleCallback) => SettleCallback;
+export declare const createCustomSettle: CreateCustomSettle;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/embla-carousel",
-  "version": "0.0.0-snapshot-20250627090641",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -20,7 +20,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@salt-ds/core": "^0.0.0-snapshot-20250627090641",
+    "@salt-ds/core": "^1.47.1",
     "clsx": "^2.0.0"
   },
   "devDependencies": {