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

package/dist-cjs/CarouselCard.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CarouselCard$1 = require('./CarouselCard.css.js');
+
+const withBaseName = core.makePrefixer("saltCarouselCard");
+const CarouselCard = react.forwardRef(
+  function CarouselCard2({ actions, appearance, children, className, header, media, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel-slide",
+      css: CarouselCard$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tabpanel",
+        "aria-roledescription": "slide",
+        className: clsx.clsx(withBaseName(), className),
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: clsx.clsx(withBaseName("content"), {
+              [withBaseName("bordered")]: appearance === "bordered"
+            }),
+            children: [
+              media,
+              children && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("body"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+                actions
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+exports.CarouselCard = CarouselCard;
+//# sourceMappingURL=CarouselCard.js.map

package/dist-cjs/CarouselCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselCard.js","sources":["../src/CarouselCard.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentProps, type ReactNode, forwardRef } from \"react\";\nimport saltCarouselCardCss from \"./CarouselCard.css\";\n\nconst withBaseName = makePrefixer(\"saltCarouselCard\");\n\n/**\n * Props for the CarouselCard component.\n */\nexport interface CarouselCardProps extends ComponentProps<\"div\"> {\n  /**\n   * Actions to be displayed in the content footer.\n   * This can include buttons or any other interactive elements.\n   */\n  actions?: ReactNode;\n\n  /**\n   * Media content to be displayed inside the slide.\n   * This could include images, videos, etc., that are visually prominent.\n   * It differs from children in that media is intended to be the main visual element of the slide.\n   */\n  media?: ReactNode;\n\n  /**\n   * The appearance of the slide. Options are 'bordered', and 'transparent'.\n   * 'transparent' is the default value.\n   **/\n  appearance?: \"bordered\" | \"transparent\";\n\n  /**\n   * Header content to be displayed at the top of the slide.\n   * This can be text or any other React node.\n   */\n  header?: ReactNode;\n\n  /**\n   * Carousel slide id.\n   * This can be used to uniquely identify the slide.\n   */\n  id?: string;\n}\n\nexport const CarouselCard = forwardRef<HTMLDivElement, CarouselCardProps>(\n  function CarouselCard(\n    { actions, appearance, children, className, header, media, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slide\",\n      css: saltCarouselCardCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        className={clsx(withBaseName(), className)}\n        {...rest}\n        ref={ref}\n      >\n        <div\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"bordered\")]: appearance === \"bordered\",\n          })}\n        >\n          {media}\n          {children && (\n            <div className={withBaseName(\"body\")}>\n              <div>{header}</div>\n              <div>{children}</div>\n              {actions}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselCard","useWindow","useComponentCssInjection","saltCarouselCardCss","jsx","clsx","jsxs"],"mappings":";;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAsC7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,OAAA,EAAS,UAAY,EAAA,QAAA,EAAU,SAAW,EAAA,MAAA,EAAQ,KAAO,EAAA,GAAG,IAAK,EAAA,EACnE,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,sBAAqB,EAAA,OAAA;AAAA,QACrB,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,kBAAAC,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAD,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,UAAe,KAAA;AAAA,aAC5C,CAAA;AAAA,YAEA,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,4BACEC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,MAAM,CACjC,EAAA,QAAA,EAAA;AAAA,gCAAAF,cAAA,CAAC,SAAK,QAAO,EAAA,MAAA,EAAA,CAAA;AAAA,gCACbA,cAAA,CAAC,SAAK,QAAS,EAAA,CAAA;AAAA,gBACd;AAAA,eACH,EAAA;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/CarouselContext.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const CarouselContext = core.createContext(
+  "CarouselContext",
+  void 0
+);
+const useCarouselContext = () => {
+  const context = react.useContext(CarouselContext);
+  if (!context) {
+    throw new Error(
+      "useCarouselContext must be used within a CarouselProvider"
+    );
+  }
+  return context;
+};
+
+exports.CarouselContext = CarouselContext;
+exports.useCarouselContext = useCarouselContext;
+//# sourceMappingURL=CarouselContext.js.map

package/dist-cjs/CarouselContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselContext.js","sources":["../src/CarouselContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport type { CarouselEmblaApiType, CarouselEmblaRefType } from \"./Carousel\";\n\n/**\n * Type definition for the Carousel context.\n * Provides access to the Embla Carousel API and reference.\n */\ninterface CarouselContextType {\n  /**\n   * The API instance of the Embla Carousel.\n   * Provides methods to control the carousel programmatically.\n   */\n  emblaApi?: CarouselEmblaApiType;\n\n  /**\n   * The reference to the Embla Carousel viewport.\n   * Used to directly interact with the carousel DOM element.\n   */\n  emblaRef?: CarouselEmblaRefType;\n}\n\nexport const CarouselContext = createContext<CarouselContextType | undefined>(\n  \"CarouselContext\",\n  undefined,\n);\n\nexport const useCarouselContext = (): CarouselContextType => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error(\n      \"useCarouselContext must be used within a CarouselProvider\",\n    );\n  }\n  return context;\n};\n"],"names":["createContext","useContext"],"mappings":";;;;;AAsBO,MAAM,eAAkB,GAAAA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,MAAM,qBAAqB,MAA2B;AAC3D,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA;AAC1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;;"}

package/dist-cjs/CarouselNextButton.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var usePrevNextButtons = require('./usePrevNextButtons.js');
+
+const CarouselNextButton = react.forwardRef(function CarouselNextButton2({ className, onClick, ...rest }, ref) {
+  const { NextIcon } = core.useIcon();
+  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons.usePrevNextButtons();
+  const handleClick = react.useCallback(
+    (event) => {
+      onNextButtonClick();
+      onClick == null ? void 0 : onClick(event);
+    },
+    [onNextButtonClick, onClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      onClick: handleClick,
+      disabled: nextBtnDisabled,
+      focusableWhenDisabled: true,
+      appearance: "bordered",
+      sentiment: "neutral",
+      "aria-label": "Next slide",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(NextIcon, { "aria-hidden": true })
+    }
+  );
+});
+
+exports.CarouselNextButton = CarouselNextButton;
+//# sourceMappingURL=CarouselNextButton.js.map

package/dist-cjs/CarouselNextButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselNextButton.js","sources":["../src/CarouselNextButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselNextButton component.\n */\nexport interface CarouselNextButtonProps extends ButtonProps {}\n\nexport const CarouselNextButton = forwardRef<\n  HTMLButtonElement,\n  CarouselNextButtonProps\n>(function CarouselNextButton({ className, onClick, ...rest }, ref) {\n  const { NextIcon } = useIcon();\n  const { nextBtnDisabled, onNextButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      onNextButtonClick();\n      onClick?.(event);\n    },\n    [onNextButtonClick, onClick],\n  );\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={nextBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Next slide\"\n      ref={ref}\n      {...rest}\n    >\n      <NextIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselNextButton","useIcon","usePrevNextButtons","useCallback","jsx","Button"],"mappings":";;;;;;;AASa,MAAA,kBAAA,GAAqBA,gBAGhC,CAAA,SAASC,mBAAmB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AAClE,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,YAAQ,EAAA;AAC7B,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAA,MAAM,WAAoD,GAAAC,iBAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,YAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,QAAS,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACxB;AAEJ,CAAC;;;;"}

package/dist-cjs/CarouselPreviousButton.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var react = require('react');
+var usePrevNextButtons = require('./usePrevNextButtons.js');
+
+const CarouselPreviousButton = react.forwardRef(function CarouselPreviousButton2({ className, onClick, ...rest }, ref) {
+  const { PreviousIcon } = core.useIcon();
+  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons.usePrevNextButtons();
+  const handleClick = react.useCallback(
+    (event) => {
+      onPrevButtonClick();
+      onClick == null ? void 0 : onClick(event);
+    },
+    [onPrevButtonClick, onClick]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Button,
+    {
+      onClick: handleClick,
+      disabled: prevBtnDisabled,
+      focusableWhenDisabled: true,
+      appearance: "bordered",
+      sentiment: "neutral",
+      "aria-label": "Previous slide",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx(PreviousIcon, { "aria-hidden": true })
+    }
+  );
+});
+
+exports.CarouselPreviousButton = CarouselPreviousButton;
+//# sourceMappingURL=CarouselPreviousButton.js.map

package/dist-cjs/CarouselPreviousButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselPreviousButton.js","sources":["../src/CarouselPreviousButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, useIcon } from \"@salt-ds/core\";\nimport { type MouseEventHandler, forwardRef, useCallback } from \"react\";\nimport { usePrevNextButtons } from \"./usePrevNextButtons\";\n\n/**\n * Props for the CarouselPreviousButton component.\n */\nexport interface CarouselPreviousButtonProps extends ButtonProps {}\n\nexport const CarouselPreviousButton = forwardRef<\n  HTMLButtonElement,\n  CarouselPreviousButtonProps\n>(function CarouselPreviousButton({ className, onClick, ...rest }, ref) {\n  const { PreviousIcon } = useIcon();\n  const { prevBtnDisabled, onPrevButtonClick } = usePrevNextButtons();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (event) => {\n      onPrevButtonClick();\n      onClick?.(event);\n    },\n    [onPrevButtonClick, onClick],\n  );\n\n  return (\n    <Button\n      onClick={handleClick}\n      disabled={prevBtnDisabled}\n      focusableWhenDisabled\n      appearance=\"bordered\"\n      sentiment=\"neutral\"\n      aria-label=\"Previous slide\"\n      ref={ref}\n      {...rest}\n    >\n      <PreviousIcon aria-hidden />\n    </Button>\n  );\n});\n"],"names":["forwardRef","CarouselPreviousButton","useIcon","usePrevNextButtons","useCallback","jsx","Button"],"mappings":";;;;;;;AASa,MAAA,sBAAA,GAAyBA,gBAGpC,CAAA,SAASC,uBAAuB,CAAA,EAAE,WAAW,OAAS,EAAA,GAAG,IAAK,EAAA,EAAG,GAAK,EAAA;AACtE,EAAM,MAAA,EAAE,YAAa,EAAA,GAAIC,YAAQ,EAAA;AACjC,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIC,qCAAmB,EAAA;AAElE,EAAA,MAAM,WAAoD,GAAAC,iBAAA;AAAA,IACxD,CAAC,KAAU,KAAA;AACT,MAAkB,iBAAA,EAAA;AAClB,MAAU,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAA,KAAA,CAAA;AAAA,KACZ;AAAA,IACA,CAAC,mBAAmB,OAAO;AAAA,GAC7B;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,WAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,eAAA;AAAA,MACV,qBAAqB,EAAA,IAAA;AAAA,MACrB,UAAW,EAAA,UAAA;AAAA,MACX,SAAU,EAAA,SAAA;AAAA,MACV,YAAW,EAAA,gBAAA;AAAA,MACX,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAAD,cAAA,CAAC,YAAa,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GAC5B;AAEJ,CAAC;;;;"}

package/dist-cjs/CarouselProgressLabel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCarouselTabList.saltText {\n  font-weight: var(--salt-palette-text-body-fontWeight-strong);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CarouselProgressLabel.css.js.map

package/dist-cjs/CarouselProgressLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselProgressLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/CarouselProgressLabel.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CarouselContext = require('./CarouselContext.js');
+var CarouselProgressLabel$1 = require('./CarouselProgressLabel.css.js');
+
+const withBaseName = core.makePrefixer("saltCarouselTabList");
+function CarouselProgressLabel({
+  className,
+  styleAs = "label",
+  children,
+  ...props
+}) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-carousel-progress-label",
+    css: CarouselProgressLabel$1,
+    window: targetWindow
+  });
+  const { emblaApi } = CarouselContext.useCarouselContext();
+  const [currentSlide, setCurrentSlide] = react.useState("");
+  const [totalSlides, setTotalSlides] = react.useState(0);
+  const handleSettle = react.useCallback((emblaApi2) => {
+    const slideIndexInView = (emblaApi2 == null ? void 0 : emblaApi2.selectedScrollSnap()) ?? 0;
+    const numberOfSlides = (emblaApi2 == null ? void 0 : emblaApi2.slideNodes().length) ?? 0;
+    const scrollSnaps = (emblaApi2 == null ? void 0 : emblaApi2.scrollSnapList()) ?? [];
+    const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+    const startSlideNumber = Math.min(
+      slideIndexInView * slidesPerTransition + 1,
+      numberOfSlides - (slidesPerTransition - 1)
+    );
+    const endSlideNumber = Math.min(
+      startSlideNumber + slidesPerTransition - 1,
+      numberOfSlides
+    );
+    if (startSlideNumber === endSlideNumber) {
+      setCurrentSlide(startSlideNumber.toString(10));
+    } else {
+      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);
+    }
+    setTotalSlides(numberOfSlides);
+  }, []);
+  react.useEffect(() => {
+    if (!emblaApi) return;
+    emblaApi.on("init", handleSettle).on("reInit", handleSettle).on("settle", handleSettle);
+    handleSettle(emblaApi);
+    return () => {
+      emblaApi.off("init", handleSettle).off("reInit", handleSettle).off("settle", handleSettle);
+    };
+  }, [emblaApi, handleSettle]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Text, { className: clsx.clsx(withBaseName(), className), ...props, children: [
+    "Slide ",
+    currentSlide,
+    " of ",
+    totalSlides
+  ] });
+}
+
+exports.CarouselProgressLabel = CarouselProgressLabel;
+//# sourceMappingURL=CarouselProgressLabel.js.map

package/dist-cjs/CarouselProgressLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselProgressLabel.js","sources":["../src/CarouselProgressLabel.tsx"],"sourcesContent":["import { Text, type TextProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport { useCallback, useEffect, useState } from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselProgressLabelCss from \"./CarouselProgressLabel.css\";\n\n/**\n * Props for the CarouselProgressLabel component.\n */\nexport interface CarouselProgressLabelProps extends TextProps<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselTabList\");\n\nexport function CarouselProgressLabel({\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: CarouselProgressLabelProps) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-carousel-progress-label\",\n    css: carouselProgressLabelCss,\n    window: targetWindow,\n  });\n\n  const { emblaApi } = useCarouselContext();\n\n  const [currentSlide, setCurrentSlide] = useState(\"\");\n  const [totalSlides, setTotalSlides] = useState(0);\n\n  const handleSettle = useCallback((emblaApi: EmblaCarouselType) => {\n    const slideIndexInView = emblaApi?.selectedScrollSnap() ?? 0;\n    const numberOfSlides = emblaApi?.slideNodes().length ?? 0;\n    const scrollSnaps = emblaApi?.scrollSnapList() ?? [];\n    const slidesPerTransition = numberOfSlides\n      ? Math.ceil(numberOfSlides / scrollSnaps.length)\n      : 0;\n    const startSlideNumber = Math.min(\n      slideIndexInView * slidesPerTransition + 1,\n      numberOfSlides - (slidesPerTransition - 1),\n    );\n    const endSlideNumber = Math.min(\n      startSlideNumber + slidesPerTransition - 1,\n      numberOfSlides,\n    );\n\n    if (startSlideNumber === endSlideNumber) {\n      setCurrentSlide(startSlideNumber.toString(10));\n    } else {\n      setCurrentSlide(`${startSlideNumber}-${endSlideNumber}`);\n    }\n    setTotalSlides(numberOfSlides);\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n    emblaApi\n      .on(\"init\", handleSettle)\n      .on(\"reInit\", handleSettle)\n      .on(\"settle\", handleSettle);\n    handleSettle(emblaApi);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi\n        .off(\"init\", handleSettle)\n        .off(\"reInit\", handleSettle)\n        .off(\"settle\", handleSettle);\n    };\n  }, [emblaApi, handleSettle]);\n\n  return (\n    <Text className={clsx(withBaseName(), className)} {...props}>\n      Slide {currentSlide} of {totalSlides}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","carouselProgressLabelCss","useCarouselContext","useState","useCallback","emblaApi","useEffect","jsxs","Text","clsx"],"mappings":";;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA;AAEhD,SAAS,qBAAsB,CAAA;AAAA,EACpC,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAA+B,EAAA;AAC7B,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,8BAAA;AAAA,IACR,GAAK,EAAAC,uBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAExC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,eAAS,EAAE,CAAA;AACnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAAS,CAAC,CAAA;AAEhD,EAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAA,MAAM,gBAAmBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,kBAAwB,EAAA,KAAA,CAAA;AAC3D,IAAA,MAAM,cAAiBA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,aAAa,MAAU,KAAA,CAAA;AACxD,IAAA,MAAM,WAAcA,GAAAA,CAAAA,SAAAA,IAAA,IAAAA,GAAAA,MAAAA,GAAAA,SAAAA,CAAU,qBAAoB,EAAC;AACnD,IAAA,MAAM,sBAAsB,cACxB,GAAA,IAAA,CAAK,KAAK,cAAiB,GAAA,WAAA,CAAY,MAAM,CAC7C,GAAA,CAAA;AACJ,IAAA,MAAM,mBAAmB,IAAK,CAAA,GAAA;AAAA,MAC5B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC,kBAAkB,mBAAsB,GAAA,CAAA;AAAA,KAC1C;AACA,IAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,MAC1B,mBAAmB,mBAAsB,GAAA,CAAA;AAAA,MACzC;AAAA,KACF;AAEA,IAAA,IAAI,qBAAqB,cAAgB,EAAA;AACvC,MAAgB,eAAA,CAAA,gBAAA,CAAiB,QAAS,CAAA,EAAE,CAAC,CAAA;AAAA,KACxC,MAAA;AACL,MAAA,eAAA,CAAgB,CAAG,EAAA,gBAAgB,CAAI,CAAA,EAAA,cAAc,CAAE,CAAA,CAAA;AAAA;AAEzD,IAAA,cAAA,CAAe,cAAc,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AACf,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,YAAY,CACvB,CAAA,EAAA,CAAG,UAAU,YAAY,CAAA,CACzB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAC5B,IAAA,YAAA,CAAa,QAAQ,CAAA;AAErB,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,EACE,uBAAAC,eAAA,CAACC,aAAK,SAAW,EAAAC,SAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,KAAO,EAAA,QAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACpD,YAAA;AAAA,IAAa,MAAA;AAAA,IAAK;AAAA,GAC3B,EAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/CarouselSlides.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCarouselSlides {\n  overflow: hidden;\n}\n.saltCarouselSlides-container {\n  display: flex;\n  touch-action: pan-y pinch-zoom;\n  margin-left: calc(var(--saltCarousel-slide-spacing) * -1);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CarouselSlides.css.js.map

package/dist-cjs/CarouselSlides.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlides.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/CarouselSlides.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CarouselContext = require('./CarouselContext.js');
+var CarouselSlides$1 = require('./CarouselSlides.css.js');
+
+const withBaseName = core.makePrefixer("saltCarouselSlides");
+const CarouselSlides = react.forwardRef(
+  function CarouselSlides2({ children, className, onKeyDown, ...rest }, propRef) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel-slides",
+      css: CarouselSlides$1,
+      window: targetWindow
+    });
+    const { emblaApi, emblaRef } = CarouselContext.useCarouselContext();
+    const ref = core.useForkRef(propRef, emblaRef);
+    const handleKeyDown = (event) => {
+      if (event.repeat) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowLeft": {
+          event.preventDefault();
+          emblaApi == null ? void 0 : emblaApi.scrollPrev();
+          break;
+        }
+        case "ArrowRight": {
+          event.preventDefault();
+          emblaApi == null ? void 0 : emblaApi.scrollNext();
+          break;
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        onKeyDown: handleKeyDown,
+        ref,
+        className: clsx.clsx(withBaseName(), className),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("container"), children })
+      }
+    );
+  }
+);
+
+exports.CarouselSlides = CarouselSlides;
+//# sourceMappingURL=CarouselSlides.js.map

package/dist-cjs/CarouselSlides.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlides.js","sources":["../src/CarouselSlides.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type Ref,\n  forwardRef,\n} from \"react\";\nimport { useCarouselContext } from \"./CarouselContext\";\nimport carouselSlidesCss from \"./CarouselSlides.css\";\n\n/**\n * Props for the CarouselSlides component.\n */\nexport interface CarouselSlidesProps extends ComponentPropsWithoutRef<\"div\"> {}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlides\");\n\nexport const CarouselSlides = forwardRef<HTMLDivElement, CarouselSlidesProps>(\n  function CarouselSlides(\n    { children, className, onKeyDown, ...rest },\n    propRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-slides\",\n      css: carouselSlidesCss,\n      window: targetWindow,\n    });\n    const { emblaApi, emblaRef } = useCarouselContext();\n\n    const ref = useForkRef(propRef, emblaRef) as Ref<HTMLDivElement>;\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (event.repeat) {\n        return;\n      }\n      switch (event.key) {\n        case \"ArrowLeft\": {\n          event.preventDefault();\n          emblaApi?.scrollPrev();\n          break;\n        }\n        case \"ArrowRight\": {\n          event.preventDefault();\n          emblaApi?.scrollNext();\n          break;\n        }\n      }\n      onKeyDown?.(event);\n    };\n\n    return (\n      <div\n        onKeyDown={handleKeyDown}\n        ref={ref}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        <div className={withBaseName(\"container\")}>{children}</div>\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlides","useWindow","useComponentCssInjection","carouselSlidesCss","useCarouselContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAE/C,MAAM,cAAiB,GAAAC,gBAAA;AAAA,EAC5B,SAASC,gBACP,EAAE,QAAA,EAAU,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC1C,OACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,gBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAE,QAAA,EAAU,QAAS,EAAA,GAAIC,kCAAmB,EAAA;AAElD,IAAM,MAAA,GAAA,GAAMC,eAAW,CAAA,OAAA,EAAS,QAAQ,CAAA;AAExC,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AAC9D,MAAA,IAAI,MAAM,MAAQ,EAAA;AAChB,QAAA;AAAA;AAEF,MAAA,QAAQ,MAAM,GAAK;AAAA,QACjB,KAAK,WAAa,EAAA;AAChB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF,QACA,KAAK,YAAc,EAAA;AACjB,UAAA,KAAA,CAAM,cAAe,EAAA;AACrB,UAAU,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,UAAA,EAAA;AACV,UAAA;AAAA;AACF;AAEF,MAAY,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAAA,KACd;AAEA,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,aAAA;AAAA,QACX,GAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEJ,yCAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,GAAI,QAAS,EAAA;AAAA;AAAA,KACvD;AAAA;AAGN;;;;"}

package/dist-cjs/CarouselTab.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCarouselTab {\n  position: relative;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border: none;\n  box-shadow: inset 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor);\n  -webkit-tap-highlight-color: var(--salt-selectable-borderColor-hover);\n  -webkit-appearance: none;\n  appearance: none;\n  background-color: transparent;\n  touch-action: manipulation;\n  display: inline-flex;\n  text-decoration: none;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--salt-palette-corner-strongest);\n  transition: box-shadow var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltCarouselTab:after {\n  content: \"\";\n  position: absolute;\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  background-color: transparent;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.saltCarouselTab:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--salt-selectable-background-hover);\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltCarouselTab-selected {\n  box-shadow: inset 0 0 0 var(--salt-size-selectable) var(--salt-selectable-borderColor-selected);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CarouselTab.css.js.map

package/dist-cjs/CarouselTab.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselTab.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/CarouselTab.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CarouselTab$1 = require('./CarouselTab.css.js');
+
+const withBaseName = core.makePrefixer("saltCarouselTab");
+const useCarouselTab = (emblaApi) => {
+  const [selectedIndex, setSelectedIndex] = react.useState(0);
+  const [scrollSnaps, setScrollSnaps] = react.useState([]);
+  const handleClick = react.useCallback(
+    (index) => {
+      if (!emblaApi) return;
+      emblaApi.scrollTo(index);
+    },
+    [emblaApi]
+  );
+  const handleInit = react.useCallback((emblaApi2) => {
+    setScrollSnaps(emblaApi2.scrollSnapList());
+  }, []);
+  const handleSelect = react.useCallback((emblaApi2) => {
+    setSelectedIndex(emblaApi2.selectedScrollSnap());
+  }, []);
+  react.useEffect(() => {
+    if (!emblaApi) return;
+    handleInit(emblaApi);
+    handleSelect(emblaApi);
+    emblaApi.on("init", handleInit).on("reInit", handleInit).on("select", handleSelect);
+    return () => {
+      emblaApi.off("init", handleInit);
+      emblaApi.off("reInit", handleInit);
+      emblaApi.off("settle", handleSelect);
+    };
+  }, [emblaApi, handleInit, handleSelect]);
+  return {
+    selectedIndex,
+    scrollSnaps,
+    onClick: handleClick
+  };
+};
+const CarouselTab = react.forwardRef(
+  function CarouselTab2({ children, className, selected = false, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel-tab",
+      css: CarouselTab$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: clsx.clsx(
+          withBaseName(),
+          { [withBaseName("selected")]: selected },
+          className
+        ),
+        ref,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+exports.CarouselTab = CarouselTab;
+exports.useCarouselTab = useCarouselTab;
+//# sourceMappingURL=CarouselTab.js.map

package/dist-cjs/CarouselTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselTab.js","sources":["../src/CarouselTab.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { EmblaCarouselType } from \"embla-carousel\";\nimport {\n  type ComponentPropsWithRef,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport carouselTabCss from \"./CarouselTab.css\";\n\n/**\n * Type definition for the UseCarouselTab hook.\n * Provides state and handlers for tablist navigation in a carousel.\n */\ntype UseCarouselTabProps = {\n  /**\n   * The index of the currently selected slide.\n   */\n  selectedIndex: number;\n\n  /**\n   * An array of scroll snap positions for the carousel slides.\n   */\n  scrollSnaps: number[];\n\n  /**\n   * Handler function for clicking a tab button to navigate to a specific slide.\n   *\n   * @param index - The index of the slide to navigate to.\n   */\n  onClick: (index: number) => void;\n};\n\nconst withBaseName = makePrefixer(\"saltCarouselTab\");\n\nexport const useCarouselTab = (\n  emblaApi: EmblaCarouselType | undefined,\n): UseCarouselTabProps => {\n  const [selectedIndex, setSelectedIndex] = useState(0);\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);\n\n  const handleClick = useCallback(\n    (index: number) => {\n      if (!emblaApi) return;\n      emblaApi.scrollTo(index);\n    },\n    [emblaApi],\n  );\n\n  const handleInit = useCallback((emblaApi: EmblaCarouselType) => {\n    setScrollSnaps(emblaApi.scrollSnapList());\n  }, []);\n\n  const handleSelect = useCallback((emblaApi: EmblaCarouselType) => {\n    setSelectedIndex(emblaApi.selectedScrollSnap());\n  }, []);\n\n  useEffect(() => {\n    if (!emblaApi) return;\n\n    handleInit(emblaApi);\n    handleSelect(emblaApi);\n    emblaApi\n      .on(\"init\", handleInit)\n      .on(\"reInit\", handleInit)\n      .on(\"select\", handleSelect);\n    // Cleanup listener on component unmount\n    return () => {\n      emblaApi.off(\"init\", handleInit);\n      emblaApi.off(\"reInit\", handleInit);\n      emblaApi.off(\"settle\", handleSelect);\n    };\n  }, [emblaApi, handleInit, handleSelect]);\n\n  return {\n    selectedIndex,\n    scrollSnaps,\n    onClick: handleClick,\n  };\n};\n\n/**\n * Props for the CarouselTab component.\n */\nexport interface CarouselTabProps extends ComponentPropsWithRef<\"button\"> {\n  /**\n   * Is the selected slide\n   */\n  selected?: boolean;\n}\n\nexport const CarouselTab = forwardRef<HTMLButtonElement, CarouselTabProps>(\n  function CarouselTab(\n    { children, className, selected = false, ...rest },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel-tab\",\n      css: carouselTabCss,\n      window: targetWindow,\n    });\n\n    return (\n      <button\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"selected\")]: selected },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","useState","useCallback","emblaApi","useEffect","forwardRef","CarouselTab","useWindow","useComponentCssInjection","carouselTabCss","jsx","clsx"],"mappings":";;;;;;;;;;AAqCA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAEtC,MAAA,cAAA,GAAiB,CAC5B,QACwB,KAAA;AACxB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,CAAC,CAAA;AACpD,EAAA,MAAM,CAAC,WAAa,EAAA,cAAc,CAAI,GAAAA,cAAA,CAAmB,EAAE,CAAA;AAE3D,EAAA,MAAM,WAAc,GAAAC,iBAAA;AAAA,IAClB,CAAC,KAAkB,KAAA;AACjB,MAAA,IAAI,CAAC,QAAU,EAAA;AACf,MAAA,QAAA,CAAS,SAAS,KAAK,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAM,MAAA,UAAA,GAAaA,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAC9D,IAAeA,cAAAA,CAAAA,SAAAA,CAAS,gBAAgB,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAeD,iBAAY,CAAA,CAACC,SAAgC,KAAA;AAChE,IAAiBA,gBAAAA,CAAAA,SAAAA,CAAS,oBAAoB,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA;AAEL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,QAAU,EAAA;AAEf,IAAA,UAAA,CAAW,QAAQ,CAAA;AACnB,IAAA,YAAA,CAAa,QAAQ,CAAA;AACrB,IACG,QAAA,CAAA,EAAA,CAAG,MAAQ,EAAA,UAAU,CACrB,CAAA,EAAA,CAAG,UAAU,UAAU,CAAA,CACvB,EAAG,CAAA,QAAA,EAAU,YAAY,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAS,QAAA,CAAA,GAAA,CAAI,QAAQ,UAAU,CAAA;AAC/B,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,UAAU,CAAA;AACjC,MAAS,QAAA,CAAA,GAAA,CAAI,UAAU,YAAY,CAAA;AAAA,KACrC;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,YAAY,CAAC,CAAA;AAEvC,EAAO,OAAA;AAAA,IACL,aAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAS,EAAA;AAAA,GACX;AACF;AAYO,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YACP,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,WAAW,KAAO,EAAA,GAAG,IAAK,EAAA,EACjD,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,EAAE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAS,EAAA;AAAA,UACvC;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;;"}

package/dist-cjs/CarouselTabList.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCarouselTabList {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  align-items: center;\n  gap: var(--salt-spacing-200);\n}\n\n.saltCarouselTabList:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CarouselTabList.css.js.map

package/dist-cjs/CarouselTabList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselTabList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/CarouselTabList.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var CarouselContext = require('./CarouselContext.js');
+var CarouselTab = require('./CarouselTab.js');
+var CarouselTabList$1 = require('./CarouselTabList.css.js');
+
+const withBaseName = core.makePrefixer("saltCarouselTabList");
+const CarouselTabRenderer = react.forwardRef((props, ref) => {
+  return core.renderProps(CarouselTab.CarouselTab, { ...props, ref });
+});
+const CarouselTabList = react.forwardRef(
+  function CarouselTabList2({ className, render, onKeyDown, ...rest }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel-controls",
+      css: CarouselTabList$1,
+      window: targetWindow
+    });
+    const { emblaApi } = CarouselContext.useCarouselContext();
+    const { selectedIndex, scrollSnaps, onClick } = CarouselTab.useCarouselTab(emblaApi);
+    const slideNodes = emblaApi == null ? void 0 : emblaApi.slideNodes();
+    const numberOfSlides = (slideNodes == null ? void 0 : slideNodes.length) ?? 0;
+    const slidesPerTransition = numberOfSlides ? Math.ceil(numberOfSlides / scrollSnaps.length) : 0;
+    const buttonRefs = react.useRef([]);
+    const handleKeyDown = (event) => {
+      var _a;
+      let newIndex = selectedIndex;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        const direction = event.key === "ArrowLeft" ? -1 : 1;
+        newIndex = (selectedIndex + direction + scrollSnaps.length) % scrollSnaps.length;
+      } else if (event.key === "Home") {
+        newIndex = 0;
+      } else if (event.key === "End") {
+        newIndex = scrollSnaps.length - 1;
+      }
+      if (newIndex !== selectedIndex) {
+        onClick(newIndex);
+        (_a = buttonRefs.current[newIndex]) == null ? void 0 : _a.focus();
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tablist",
+        "aria-label": "Choose slide",
+        tabIndex: 0,
+        className: clsx.clsx(withBaseName(), className),
+        onKeyDown: handleKeyDown,
+        ref,
+        ...rest,
+        children: scrollSnaps.map((_, tabIndex) => {
+          const startSlideNumber = tabIndex * slidesPerTransition + 1;
+          const endSlideNumber = Math.min(
+            startSlideNumber + slidesPerTransition - 1,
+            numberOfSlides
+          );
+          const label = startSlideNumber === endSlideNumber ? `Slide ${startSlideNumber}` : `Slides ${startSlideNumber}-${endSlideNumber} of ${numberOfSlides}`;
+          const selected = selectedIndex === tabIndex;
+          const ariaControls = (slideNodes == null ? void 0 : slideNodes.length) ? slideNodes[startSlideNumber - 1].id : void 0;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            CarouselTabRenderer,
+            {
+              ref: (element) => {
+                buttonRefs.current[tabIndex] = element;
+              },
+              render,
+              role: "tab",
+              onClick: () => onClick(tabIndex),
+              "aria-selected": selected,
+              selected,
+              tabIndex: selected ? 0 : -1,
+              "aria-label": label,
+              "aria-labelledby": ariaControls,
+              "aria-controls": ariaControls
+            },
+            `carouselTab-${tabIndex}}`
+          );
+        })
+      }
+    );
+  }
+);
+
+exports.CarouselTabList = CarouselTabList;
+//# sourceMappingURL=CarouselTabList.js.map

package/dist-cjs/CarouselTabList.js.map

@@ -0,0 +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":["makePrefixer","forwardRef","renderProps","CarouselTab","CarouselTabList","useWindow","useComponentCssInjection","carouselControlsCss","useCarouselContext","useCarouselTab","useRef","jsx","clsx"],"mappings":"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"}

package/dist-cjs/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var Carousel = require('./Carousel.js');
+var CarouselAnnouncementPlugin = require('./CarouselAnnouncementPlugin.js');
+var CarouselCard = require('./CarouselCard.js');
+var CarouselContext = require('./CarouselContext.js');
+var CarouselTab = require('./CarouselTab.js');
+var CarouselTabList = require('./CarouselTabList.js');
+var CarouselAutoplayIndicator = require('./CarouselAutoplayIndicator.js');
+var CarouselPreviousButton = require('./CarouselPreviousButton.js');
+var CarouselNextButton = require('./CarouselNextButton.js');
+var CarouselSlides = require('./CarouselSlides.js');
+var CarouselProgressLabel = require('./CarouselProgressLabel.js');
+
+
+
+exports.Carousel = Carousel.Carousel;
+exports.CarouselAnnouncement = CarouselAnnouncementPlugin.CarouselAnnouncement;
+exports.getSlideLabel = CarouselAnnouncementPlugin.getSlideLabel;
+exports.CarouselCard = CarouselCard.CarouselCard;
+exports.CarouselContext = CarouselContext.CarouselContext;
+exports.useCarouselContext = CarouselContext.useCarouselContext;
+exports.CarouselTab = CarouselTab.CarouselTab;
+exports.useCarouselTab = CarouselTab.useCarouselTab;
+exports.CarouselTabList = CarouselTabList.CarouselTabList;
+exports.CarouselAutoplayIndicator = CarouselAutoplayIndicator.CarouselAutoplayIndicator;
+exports.CarouselPreviousButton = CarouselPreviousButton.CarouselPreviousButton;
+exports.CarouselNextButton = CarouselNextButton.CarouselNextButton;
+exports.CarouselSlides = CarouselSlides.CarouselSlides;
+exports.CarouselProgressLabel = CarouselProgressLabel.CarouselProgressLabel;
+//# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}