@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist-cjs/calendar/useSelection.js

@@ -0,0 +1,240 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var isPlainObject = require('../utils/isPlainObject.js');
+require('react');
+var CalendarContext = require('./internal/CalendarContext.js');
+var date = require('@internationalized/date');
+
+function addOrRemoveFromArray(array = [], item) {
+  if (Array.isArray(array)) {
+    if (array.find((element) => date.isSameDay(element, item))) {
+      return array.filter((element) => !date.isSameDay(element, item));
+    }
+    return array.concat(item);
+  }
+  return [item];
+}
+const defaultOffset = (date) => date;
+function isRangeOrOffsetSelectionValue(selectionValue) {
+  return selectionValue != null && isPlainObject.isPlainObject(selectionValue);
+}
+const withBaseName = core.makePrefixer("saltCalendarDay");
+function useSelectionCalendar(props) {
+  const {
+    hoveredDate: hoveredDateProp,
+    selectedDate: selectedDateProp,
+    defaultSelectedDate,
+    onHoveredDateChange,
+    isDaySelectable,
+    selectionVariant
+  } = props;
+  const [selectedDate, setSelectedDateState] = core.useControlled({
+    controlled: selectedDateProp,
+    default: defaultSelectedDate,
+    name: "Calendar",
+    state: "selectedDate"
+  });
+  const getStartDateOffset = (date) => {
+    if (props.selectionVariant === "offset" && props.startDateOffset) {
+      return props.startDateOffset(date);
+    } else {
+      return defaultOffset(date);
+    }
+  };
+  const getEndDateOffset = (date) => {
+    if (props.selectionVariant === "offset" && props.endDateOffset) {
+      return props.endDateOffset(date);
+    } else {
+      return defaultOffset(date);
+    }
+  };
+  const setSelectedDate = (event, newSelectedDate) => {
+    var _a, _b, _c, _d;
+    if (isDaySelectable(newSelectedDate)) {
+      switch (props.selectionVariant) {
+        case "default":
+          setSelectedDateState(newSelectedDate);
+          (_a = props.onSelectedDateChange) == null ? void 0 : _a.call(props, event, newSelectedDate);
+          break;
+        case "multiselect":
+          const newDates = addOrRemoveFromArray(selectedDate, newSelectedDate);
+          setSelectedDateState(newDates);
+          (_b = props.onSelectedDateChange) == null ? void 0 : _b.call(props, event, newDates);
+          break;
+        case "range":
+          let base = selectedDate;
+          if (isRangeOrOffsetSelectionValue(base)) {
+            if ((base == null ? void 0 : base.startDate) && (base == null ? void 0 : base.endDate)) {
+              base = { startDate: newSelectedDate };
+            } else if ((base == null ? void 0 : base.startDate) && newSelectedDate.compare(base.startDate) > 0) {
+              base = { ...base, endDate: newSelectedDate };
+            } else {
+              base = { startDate: newSelectedDate };
+            }
+          } else {
+            base = { startDate: newSelectedDate };
+          }
+          setSelectedDateState(base);
+          (_c = props.onSelectedDateChange) == null ? void 0 : _c.call(props, event, base);
+          break;
+        case "offset":
+          const newRange = {
+            startDate: getStartDateOffset(newSelectedDate),
+            endDate: getEndDateOffset(newSelectedDate)
+          };
+          setSelectedDateState(newRange);
+          (_d = props.onSelectedDateChange) == null ? void 0 : _d.call(props, event, newRange);
+      }
+    }
+  };
+  const isSelected = (date$1) => {
+    switch (selectionVariant) {
+      case "default":
+        return selectedDate instanceof date.CalendarDate && date.isSameDay(selectedDate, date$1);
+      case "multiselect":
+        return Array.isArray(selectedDate) && !!selectedDate.find((element) => date.isSameDay(element, date$1));
+      default:
+        return false;
+    }
+  };
+  const [hoveredDate, setHoveredDateState] = core.useControlled({
+    controlled: hoveredDateProp,
+    default: void 0,
+    name: "Calendar",
+    state: "hoveredDate"
+  });
+  const setHoveredDate = (event, date) => {
+    setHoveredDateState(date);
+    onHoveredDateChange == null ? void 0 : onHoveredDateChange(event, date);
+  };
+  const isHovered = (date$1) => {
+    return !!hoveredDate && date.isSameDay(date$1, hoveredDate);
+  };
+  const isSelectedSpan = (date) => {
+    if ((selectionVariant === "range" || selectionVariant === "offset") && isRangeOrOffsetSelectionValue(selectedDate) && (selectedDate == null ? void 0 : selectedDate.startDate) && (selectedDate == null ? void 0 : selectedDate.endDate)) {
+      return date.compare(selectedDate.startDate) > 0 && date.compare(selectedDate.endDate) < 0;
+    }
+    return false;
+  };
+  const isHoveredSpan = (date$1) => {
+    if ((selectionVariant === "range" || selectionVariant === "offset") && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.startDate && !selectedDate.endDate && hoveredDate) {
+      const isForwardRange = hoveredDate.compare(selectedDate.startDate) > 0 && (date$1.compare(selectedDate.startDate) > 0 && date$1.compare(hoveredDate) < 0 || date.isSameDay(date$1, hoveredDate));
+      const isValidDayHovered = isDaySelectable(hoveredDate);
+      return isForwardRange && isValidDayHovered;
+    }
+    return false;
+  };
+  const isSelectedStart = (date$1) => {
+    if ((selectionVariant === "range" || selectionVariant === "offset") && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.startDate) {
+      return date.isSameDay(selectedDate.startDate, date$1);
+    }
+    return false;
+  };
+  const isSelectedEnd = (date$1) => {
+    if ((selectionVariant === "range" || selectionVariant === "offset") && isRangeOrOffsetSelectionValue(selectedDate) && selectedDate.endDate) {
+      return date.isSameDay(selectedDate.endDate, date$1);
+    }
+    return false;
+  };
+  const isHoveredOffset = (date) => {
+    if (hoveredDate && selectionVariant === "offset") {
+      const startDate = getStartDateOffset(hoveredDate);
+      const endDate = getEndDateOffset(hoveredDate);
+      return date.compare(startDate) >= 0 && date.compare(endDate) <= 0 && isDaySelectable(date);
+    }
+    return false;
+  };
+  return {
+    state: {
+      selectedDate,
+      hoveredDate
+    },
+    helpers: {
+      setSelectedDate,
+      isSelected,
+      setHoveredDate,
+      isHovered,
+      isSelectedSpan,
+      isHoveredSpan,
+      isSelectedStart,
+      isSelectedEnd,
+      isHoveredOffset
+    }
+  };
+}
+function useSelectionDay({ date }) {
+  const {
+    helpers: {
+      setSelectedDate,
+      isSelected,
+      setHoveredDate,
+      isSelectedSpan,
+      isHoveredSpan,
+      isSelectedStart,
+      isSelectedEnd,
+      isHovered,
+      isHoveredOffset,
+      isDayUnselectable
+    }
+  } = CalendarContext.useCalendarContext();
+  const handleClick = (event) => {
+    setSelectedDate(event, date);
+  };
+  const handleKeyDown = (event) => {
+    switch (event.key) {
+      case "Space":
+      case "Enter":
+        setSelectedDate(event, date);
+        event.preventDefault();
+    }
+  };
+  const handleMouseOver = (event) => {
+    setHoveredDate(event, date);
+  };
+  const handleMouseLeave = (event) => {
+    setHoveredDate(event, null);
+  };
+  const selected = isSelected(date);
+  const selectedSpan = isSelectedSpan(date);
+  const hoveredSpan = isHoveredSpan(date);
+  const selectedStart = isSelectedStart(date);
+  const selectedEnd = isSelectedEnd(date);
+  const hovered = isHovered(date);
+  const hoveredOffset = isHoveredOffset(date);
+  return {
+    handleClick,
+    handleKeyDown,
+    handleMouseOver,
+    handleMouseLeave,
+    status: {
+      selected,
+      selectedSpan,
+      hoveredSpan,
+      selectedStart,
+      selectedEnd,
+      hovered,
+      hoveredOffset
+    },
+    dayProps: {
+      className: clsx.clsx({
+        [withBaseName("selected")]: selected,
+        [withBaseName("selectedSpan")]: selectedSpan,
+        [withBaseName("hoveredSpan")]: hoveredSpan,
+        [withBaseName("selectedStart")]: selectedStart,
+        [withBaseName("selectedEnd")]: selectedEnd,
+        [withBaseName("hovered")]: hovered,
+        [withBaseName("hoveredOffset")]: hoveredOffset
+      }),
+      "aria-pressed": selected || selectedEnd || selectedStart || selectedSpan ? "true" : void 0,
+      "aria-disabled": !!isDayUnselectable(date) ? "true" : void 0
+    }
+  };
+}
+
+exports.useSelectionCalendar = useSelectionCalendar;
+exports.useSelectionDay = useSelectionDay;
+//# sourceMappingURL=useSelection.js.map

package/dist-cjs/calendar/useSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.js","sources":["../src/calendar/useSelection.ts"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from \"react\";\nimport { isPlainObject } from \"../utils\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { CalendarDate, DateValue, isSameDay } from \"@internationalized/date\";\n\ninterface BaseUseSelectionCalendarProps<SelectionVariantType> {\n  hoveredDate?: DateValue | null;\n  selectedDate?: SelectionVariantType | null;\n  defaultSelectedDate?: SelectionVariantType;\n  onSelectedDateChange?: (\n    event: SyntheticEvent,\n    selectedDate: SelectionVariantType\n  ) => void;\n  isDaySelectable: (date?: DateValue) => boolean;\n  onHoveredDateChange?: (\n    event: SyntheticEvent,\n    hoveredDate: DateValue | null\n  ) => void;\n}\n\ntype SingleSelectionValueType = DateValue;\ntype MultiSelectionValueType = DateValue[];\ntype RangeSelectionValueType = {\n  startDate?: DateValue;\n  endDate?: DateValue;\n};\ntype OffsetSelectionValueType = {\n  startDate?: DateValue;\n  endDate?: DateValue;\n};\n\ntype AllSelectionValueType =\n  | SingleSelectionValueType\n  | MultiSelectionValueType\n  | RangeSelectionValueType\n  | OffsetSelectionValueType\n  | null;\n\nexport interface UseOffsetSelectionCalendarProps\n  extends Omit<\n    BaseUseSelectionCalendarProps<OffsetSelectionValueType>,\n    \"startDateOffset\" | \"endDateOffset\"\n  > {\n  selectionVariant: \"offset\";\n  startDateOffset?: (date: DateValue) => DateValue;\n  endDateOffset?: (date: DateValue) => DateValue;\n}\n\nexport interface UseRangeSelectionCalendarProps\n  extends BaseUseSelectionCalendarProps<RangeSelectionValueType> {\n  selectionVariant: \"range\";\n}\n\nexport interface UseMultiSelectionCalendarProps\n  extends BaseUseSelectionCalendarProps<MultiSelectionValueType> {\n  selectionVariant: \"multiselect\";\n}\n\nexport interface UseSingleSelectionCalendarProps\n  extends BaseUseSelectionCalendarProps<SingleSelectionValueType> {\n  selectionVariant: \"default\";\n}\n\nexport type useSelectionCalendarProps =\n  | UseSingleSelectionCalendarProps\n  | UseMultiSelectionCalendarProps\n  | UseRangeSelectionCalendarProps\n  | UseOffsetSelectionCalendarProps;\n\nfunction addOrRemoveFromArray(\n  array: AllSelectionValueType | null = [],\n  item: DateValue\n) {\n  if (Array.isArray(array)) {\n    if (array.find((element) => isSameDay(element, item))) {\n      return array.filter((element) => !isSameDay(element, item));\n    }\n    return array.concat(item);\n  }\n  return [item];\n}\n\nconst defaultOffset = (date: DateValue) => date;\n\nfunction isRangeOrOffsetSelectionValue(\n  selectionValue?: AllSelectionValueType\n): selectionValue is RangeSelectionValueType | OffsetSelectionValueType {\n  return selectionValue != null && isPlainObject(selectionValue);\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport function useSelectionCalendar(props: useSelectionCalendarProps) {\n  const {\n    hoveredDate: hoveredDateProp,\n    selectedDate: selectedDateProp,\n    defaultSelectedDate,\n    // onSelectedDateChange,\n    onHoveredDateChange,\n    isDaySelectable,\n    selectionVariant,\n    // startDateOffset,\n    // endDateOffset,\n  } = props;\n  const [selectedDate, setSelectedDateState] = useControlled({\n    controlled: selectedDateProp,\n    default: defaultSelectedDate,\n    name: \"Calendar\",\n    state: \"selectedDate\",\n  });\n\n  const getStartDateOffset = (date: DateValue) => {\n    if (props.selectionVariant === \"offset\" && props.startDateOffset) {\n      return props.startDateOffset(date);\n    } else {\n      return defaultOffset(date);\n    }\n  };\n\n  const getEndDateOffset = (date: DateValue) => {\n    if (props.selectionVariant === \"offset\" && props.endDateOffset) {\n      return props.endDateOffset(date);\n    } else {\n      return defaultOffset(date);\n    }\n  };\n\n  const setSelectedDate = (\n    event: SyntheticEvent<HTMLButtonElement>,\n    newSelectedDate: DateValue\n  ) => {\n    if (isDaySelectable(newSelectedDate)) {\n      switch (props.selectionVariant) {\n        case \"default\":\n          setSelectedDateState(newSelectedDate);\n          props.onSelectedDateChange?.(event, newSelectedDate);\n          break;\n        case \"multiselect\":\n          const newDates = addOrRemoveFromArray(selectedDate, newSelectedDate);\n          setSelectedDateState(newDates);\n          props.onSelectedDateChange?.(event, newDates);\n          break;\n        case \"range\":\n          let base = selectedDate;\n          if (isRangeOrOffsetSelectionValue(base)) {\n            if (base?.startDate && base?.endDate) {\n              base = { startDate: newSelectedDate };\n            } else if (\n              base?.startDate &&\n              newSelectedDate.compare(base.startDate) > 0\n            ) {\n              base = { ...base, endDate: newSelectedDate };\n            } else {\n              base = { startDate: newSelectedDate };\n            }\n          } else {\n            base = { startDate: newSelectedDate };\n          }\n          setSelectedDateState(base);\n          props.onSelectedDateChange?.(event, base);\n          break;\n        case \"offset\":\n          const newRange = {\n            startDate: getStartDateOffset(newSelectedDate),\n            endDate: getEndDateOffset(newSelectedDate),\n          };\n          setSelectedDateState(newRange);\n          props.onSelectedDateChange?.(event, newRange);\n      }\n    }\n  };\n\n  const isSelected = (date: DateValue) => {\n    switch (selectionVariant) {\n      case \"default\":\n        return (\n          selectedDate instanceof CalendarDate && isSameDay(selectedDate, date)\n        );\n      case \"multiselect\":\n        return (\n          Array.isArray(selectedDate) &&\n          !!selectedDate.find((element) => isSameDay(element, date))\n        );\n      default:\n        return false;\n    }\n  };\n\n  const [hoveredDate, setHoveredDateState] = useControlled({\n    controlled: hoveredDateProp,\n    default: undefined,\n    name: \"Calendar\",\n    state: \"hoveredDate\",\n  });\n\n  const setHoveredDate = (event: SyntheticEvent, date: DateValue | null) => {\n    setHoveredDateState(date);\n    onHoveredDateChange?.(event, date);\n  };\n\n  const isHovered = (date: DateValue) => {\n    return !!hoveredDate && isSameDay(date, hoveredDate);\n  };\n\n  const isSelectedSpan = (date: DateValue) => {\n    if (\n      (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n      isRangeOrOffsetSelectionValue(selectedDate) &&\n      selectedDate?.startDate &&\n      selectedDate?.endDate\n    ) {\n      return (\n        date.compare(selectedDate.startDate) > 0 &&\n        date.compare(selectedDate.endDate) < 0\n      );\n    }\n    return false;\n  };\n  const isHoveredSpan = (date: DateValue) => {\n    if (\n      (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n      isRangeOrOffsetSelectionValue(selectedDate) &&\n      selectedDate.startDate &&\n      !selectedDate.endDate &&\n      hoveredDate\n    ) {\n      const isForwardRange =\n        hoveredDate.compare(selectedDate.startDate) > 0 &&\n        ((date.compare(selectedDate.startDate) > 0 &&\n          date.compare(hoveredDate) < 0) ||\n          isSameDay(date, hoveredDate));\n\n      const isValidDayHovered = isDaySelectable(hoveredDate);\n\n      return isForwardRange && isValidDayHovered;\n    }\n    return false;\n  };\n\n  const isSelectedStart = (date: DateValue) => {\n    if (\n      (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n      isRangeOrOffsetSelectionValue(selectedDate) &&\n      selectedDate.startDate\n    ) {\n      return isSameDay(selectedDate.startDate, date);\n    }\n    return false;\n  };\n\n  const isSelectedEnd = (date: DateValue) => {\n    if (\n      (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n      isRangeOrOffsetSelectionValue(selectedDate) &&\n      selectedDate.endDate\n    ) {\n      return isSameDay(selectedDate.endDate, date);\n    }\n    return false;\n  };\n\n  const isHoveredOffset = (date: DateValue) => {\n    if (hoveredDate && selectionVariant === \"offset\") {\n      const startDate = getStartDateOffset(hoveredDate);\n      const endDate = getEndDateOffset(hoveredDate);\n\n      return (\n        date.compare(startDate) >= 0 &&\n        date.compare(endDate) <= 0 &&\n        isDaySelectable(date)\n      );\n    }\n\n    return false;\n  };\n\n  return {\n    state: {\n      selectedDate,\n      hoveredDate,\n    },\n    helpers: {\n      setSelectedDate,\n      isSelected,\n      setHoveredDate,\n      isHovered,\n      isSelectedSpan,\n      isHoveredSpan,\n      isSelectedStart,\n      isSelectedEnd,\n      isHoveredOffset,\n    },\n  };\n}\n\nexport function useSelectionDay({ date }: { date: DateValue }) {\n  const {\n    helpers: {\n      setSelectedDate,\n      isSelected,\n      setHoveredDate,\n      isSelectedSpan,\n      isHoveredSpan,\n      isSelectedStart,\n      isSelectedEnd,\n      isHovered,\n      isHoveredOffset,\n      isDayUnselectable,\n    },\n  } = useCalendarContext();\n\n  const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setSelectedDate(event, date);\n  };\n\n  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n    switch (event.key) {\n      case \"Space\":\n      case \"Enter\":\n        setSelectedDate(event, date);\n        event.preventDefault();\n    }\n  };\n\n  const handleMouseOver: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, date);\n  };\n\n  const handleMouseLeave: MouseEventHandler<HTMLButtonElement> = (event) => {\n    setHoveredDate(event, null);\n  };\n\n  const selected = isSelected(date);\n  const selectedSpan = isSelectedSpan(date);\n  const hoveredSpan = isHoveredSpan(date);\n  const selectedStart = isSelectedStart(date);\n  const selectedEnd = isSelectedEnd(date);\n  const hovered = isHovered(date);\n  const hoveredOffset = isHoveredOffset(date);\n\n  return {\n    handleClick,\n    handleKeyDown,\n    handleMouseOver,\n    handleMouseLeave,\n    status: {\n      selected,\n      selectedSpan,\n      hoveredSpan,\n      selectedStart,\n      selectedEnd,\n      hovered,\n      hoveredOffset,\n    },\n    dayProps: {\n      className: clsx({\n        [withBaseName(\"selected\")]: selected,\n        [withBaseName(\"selectedSpan\")]: selectedSpan,\n        [withBaseName(\"hoveredSpan\")]: hoveredSpan,\n        [withBaseName(\"selectedStart\")]: selectedStart,\n        [withBaseName(\"selectedEnd\")]: selectedEnd,\n        [withBaseName(\"hovered\")]: hovered,\n        [withBaseName(\"hoveredOffset\")]: hoveredOffset,\n      }),\n      \"aria-pressed\":\n        selected || selectedEnd || selectedStart || selectedSpan\n          ? \"true\"\n          : undefined,\n      \"aria-disabled\": !!isDayUnselectable(date) ? \"true\" : undefined,\n    },\n  };\n}\n"],"names":["isSameDay","isPlainObject","makePrefixer","useControlled","date","CalendarDate","useCalendarContext","clsx"],"mappings":"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"}

package/dist-cjs/carousel/Carousel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltGridLayout.saltCarousel {\n  grid-template-columns: min-content auto min-content;\n  grid-template-areas: \"prev-button slider next-button\" \"dots dots dots\";\n}\n\n.saltCarousel.saltCarousel-compact {\n  grid-template-areas: \"slider slider slider\" \"prev-button dots next-button\";\n}\n\n.saltCarousel-prev-button {\n  grid-area: prev-button;\n  height: 100%;\n}\n\n.saltCarousel-next-button {\n  grid-area: next-button;\n  height: 100%;\n}\n\n.saltCarousel-slider {\n  grid-area: slider;\n}\n\n.saltCarousel-dots {\n  grid-area: dots;\n  justify-self: center;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Carousel.css.js.map

package/dist-cjs/carousel/Carousel.css.js.map

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

package/dist-cjs/carousel/Carousel.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var React = require('react');
+var icons = require('@salt-ds/icons');
+var DeckLayout = require('../deck-layout/DeckLayout.js');
+var clsx = require('clsx');
+var useSlideSelection = require('../utils/useSlideSelection.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Carousel$1 = require('./Carousel.css.js');
+
+const withBaseName = core.makePrefixer("saltCarousel");
+const Carousel = React.forwardRef(
+  function Carousel2({
+    initialIndex,
+    animation = "slide",
+    carouselDescription,
+    children,
+    className,
+    compact,
+    id: idProp,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel",
+      css: Carousel$1,
+      window: targetWindow
+    });
+    const id = core.useId(idProp);
+    const slidesCount = React.Children.count(children);
+    const [_, selectedSlide, handleSlideSelection] = useSlideSelection.useSlideSelection(initialIndex);
+    const moveSlide = (direction) => {
+      const moveLeft = selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;
+      const moveRight = selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;
+      const newSelection = direction === "left" ? moveLeft : moveRight;
+      const newTransition = direction === "left" ? "decrease" : "increase";
+      handleSlideSelection(newSelection, newTransition);
+    };
+    const handleRadioChange = ({
+      target: { value }
+    }) => {
+      handleSlideSelection(Number(value));
+    };
+    React.useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        if (slidesCount < 1) {
+          console.warn(
+            "Carousel component requires more than one children to render. At least two elements should be provided."
+          );
+        }
+      }
+    }, [slidesCount]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.GridLayout, {
+      "aria-label": carouselDescription,
+      "aria-roledescription": "carousel",
+      id,
+      role: "region",
+      ref,
+      gap: 0,
+      columns: 3,
+      className: clsx.clsx(
+        withBaseName(),
+        compact && withBaseName("compact"),
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          className: withBaseName("prev-button"),
+          onClick: () => moveSlide("left"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {
+            size: 2
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(DeckLayout.DeckLayout, {
+          activeIndex: selectedSlide,
+          animation,
+          className: withBaseName("slider"),
+          children
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          className: withBaseName("next-button"),
+          onClick: () => moveSlide("right"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
+            size: 2
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("dots"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(core.RadioButtonGroup, {
+            "aria-label": "Carousel buttons",
+            onChange: handleRadioChange,
+            value: `${selectedSlide}`,
+            direction: "horizontal",
+            children: Array.from({ length: slidesCount }, (_2, index) => ({
+              value: `${index}`
+            })).map((radio) => /* @__PURE__ */ jsxRuntime.jsx(core.RadioButton, {
+              ...radio
+            }))
+          })
+        })
+      ]
+    });
+  }
+);
+
+exports.Carousel = Carousel;
+//# sourceMappingURL=Carousel.js.map

package/dist-cjs/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n  Button,\n  GridLayout,\n  makePrefixer,\n  RadioButton,\n  RadioButtonGroup,\n  useId,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEventHandler,\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\n\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport carouselCss from \"./Carousel.css\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  initialIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   * Optional. Defaults to `slide`\n   **/\n  animation?: \"slide\" | \"fade\";\n  /**\n   * If this props is passed it will set the aria-label with value to the carousel container.\n   * Optional. Defaults to undefined\n   */\n  carouselDescription?: string;\n  /**\n   * Collection of slides to render\n   * Component must implement CarouselSlideProps. Mandatory.\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * This prop will enable compact / reduced width mode.\n   * The navigation buttons would be part of indicators\n   * Optional. Defaults to false\n   **/\n  compact?: boolean;\n  /**\n   * It sets the id for the Carousel Container.\n   * String. Optional\n   */\n  id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      initialIndex,\n      animation = \"slide\",\n      carouselDescription,\n      children,\n      className,\n      compact,\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n    const slidesCount = Children.count(children);\n\n    const [_, selectedSlide, handleSlideSelection] =\n      useSlideSelection(initialIndex);\n\n    const moveSlide = (direction: \"left\" | \"right\") => {\n      const moveLeft =\n        selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n      const moveRight =\n        selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n      const newSelection = direction === \"left\" ? moveLeft : moveRight;\n      const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n      handleSlideSelection(newSelection, newTransition);\n    };\n\n    const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n      target: { value },\n    }) => {\n      handleSlideSelection(Number(value));\n    };\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (slidesCount < 1) {\n          console.warn(\n            \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n          );\n        }\n      }\n    }, [slidesCount]);\n\n    return (\n      <GridLayout\n        aria-label={carouselDescription}\n        aria-roledescription=\"carousel\"\n        id={id}\n        role=\"region\"\n        ref={ref}\n        gap={0}\n        columns={3}\n        className={clsx(\n          withBaseName(),\n          compact && withBaseName(\"compact\"),\n          className\n        )}\n        {...rest}\n      >\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"prev-button\")}\n          onClick={() => moveSlide(\"left\")}\n        >\n          <ChevronLeftIcon size={2} />\n        </Button>\n        <DeckLayout\n          activeIndex={selectedSlide}\n          animation={animation}\n          className={withBaseName(\"slider\")}\n        >\n          {children}\n        </DeckLayout>\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"next-button\")}\n          onClick={() => moveSlide(\"right\")}\n        >\n          <ChevronRightIcon size={2} />\n        </Button>\n        <div className={withBaseName(\"dots\")}>\n          <RadioButtonGroup\n            aria-label=\"Carousel buttons\"\n            onChange={handleRadioChange}\n            value={`${selectedSlide}`}\n            direction={\"horizontal\"}\n          >\n            {Array.from({ length: slidesCount }, (_, index) => ({\n              value: `${index}`,\n            })).map((radio) => (\n              <RadioButton {...radio} />\n            ))}\n          </RadioButtonGroup>\n        </div>\n      </GridLayout>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useId","Children","useSlideSelection","useEffect","jsxs","GridLayout","clsx","jsx","Button","ChevronLeftIcon","DeckLayout","ChevronRightIcon","RadioButtonGroup","_","RadioButton"],"mappings":"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"}

package/dist-cjs/carousel/CarouselSlide.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+
+const withBaseName = core.makePrefixer("saltCarouselSlide");
+const CarouselSlide = React.forwardRef(
+  function CarouselSlide2({ ButtonBar, Media, description, title, contentAlignment }, ref) {
+    const buttonBarRef = React.useRef(null);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ref,
+      children: [
+        Media && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("mediaContainer"),
+          children: Media
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: withBaseName("fixedContainer"),
+          ref: buttonBarRef,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              className: clsx.clsx({
+                [withBaseName("textContainer")]: contentAlignment === "center",
+                [withBaseName("textContainerLeft")]: contentAlignment === "left"
+              }),
+              children: [
+                title && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  "aria-level": 1,
+                  className: withBaseName("titleContainer"),
+                  role: "heading",
+                  children: title
+                }),
+                description && /* @__PURE__ */ jsxRuntime.jsx("div", {
+                  className: withBaseName("descriptionContainer"),
+                  children: description
+                })
+              ]
+            }),
+            ButtonBar && /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: clsx.clsx({
+                [withBaseName("buttonBarOverride")]: contentAlignment === "center",
+                [withBaseName("buttonBarOverrideLeft")]: contentAlignment === "left"
+              }),
+              children: /* @__PURE__ */ jsxRuntime.jsx(ButtonBar, {
+                className: clsx.clsx({
+                  [withBaseName("buttonBarContainer")]: contentAlignment === "center",
+                  [withBaseName("buttonBarContainerLeft")]: contentAlignment === "left"
+                })
+              })
+            })
+          ]
+        })
+      ]
+    });
+  }
+);
+
+exports.CarouselSlide = CarouselSlide;
+//# sourceMappingURL=CarouselSlide.js.map

package/dist-cjs/carousel/CarouselSlide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import {\n  ElementType,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useRef,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\n\nexport interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {\n  ButtonBar?: ElementType;\n  Media: ReactElement;\n  description?: string;\n  title?: string;\n  contentAlignment?: \"center\" | \"left\" | \"right\";\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n  function CarouselSlide(\n    { ButtonBar, Media, description, title, contentAlignment },\n    ref\n  ) {\n    const buttonBarRef = useRef(null);\n\n    return (\n      <div ref={ref}>\n        {Media && <div className={withBaseName(\"mediaContainer\")}>{Media}</div>}\n        <div className={withBaseName(\"fixedContainer\")} ref={buttonBarRef}>\n          <div\n            className={clsx({\n              [withBaseName(\"textContainer\")]: contentAlignment === \"center\",\n              [withBaseName(\"textContainerLeft\")]: contentAlignment === \"left\",\n            })}\n          >\n            {title && (\n              <div\n                aria-level={1}\n                className={withBaseName(\"titleContainer\")}\n                role=\"heading\"\n              >\n                {title}\n              </div>\n            )}\n            {description && (\n              <div className={withBaseName(\"descriptionContainer\")}>\n                {description}\n              </div>\n            )}\n          </div>\n          {ButtonBar && (\n            <div\n              className={clsx({\n                [withBaseName(\"buttonBarOverride\")]:\n                  contentAlignment === \"center\",\n                [withBaseName(\"buttonBarOverrideLeft\")]:\n                  contentAlignment === \"left\",\n              })}\n            >\n              <ButtonBar\n                className={clsx({\n                  [withBaseName(\"buttonBarContainer\")]:\n                    contentAlignment === \"center\",\n                  [withBaseName(\"buttonBarContainerLeft\")]:\n                    contentAlignment === \"left\",\n                })}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlide","useRef","jsxs","jsx","clsx"],"mappings":";;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,eACP,EAAE,SAAA,EAAW,OAAO,WAAa,EAAA,KAAA,EAAO,gBAAiB,EAAA,EACzD,GACA,EAAA;AACA,IAAM,MAAA,YAAA,GAAeC,aAAO,IAAI,CAAA,CAAA;AAEhC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAA;AAAA,MACF,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAUC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBAChED,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAG,GAAK,EAAA,YAAA;AAAA,UACnD,QAAA,EAAA;AAAA,4BAACA,eAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWE,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,gBAAqB,KAAA,QAAA;AAAA,gBACtD,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAAI,gBAAqB,KAAA,MAAA;AAAA,eAC3D,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gBAAA,KAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AAAA,kBACC,YAAY,EAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,kBACxC,IAAK,EAAA,SAAA;AAAA,kBAEJ,QAAA,EAAA,KAAA;AAAA,iBACH,CAAA;AAAA,gBAED,+BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,kBAChD,QAAA,EAAA,WAAA;AAAA,iBACH,CAAA;AAAA,eAAA;AAAA,aAEJ,CAAA;AAAA,YACC,6BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWC,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAC/B,gBAAqB,KAAA,QAAA;AAAA,gBACvB,CAAC,YAAA,CAAa,uBAAuB,CAAA,GACnC,gBAAqB,KAAA,MAAA;AAAA,eACxB,CAAA;AAAA,cAED,QAAC,kBAAAD,cAAA,CAAA,SAAA,EAAA;AAAA,gBACC,WAAWC,SAAK,CAAA;AAAA,kBACd,CAAC,YAAA,CAAa,oBAAoB,CAAA,GAChC,gBAAqB,KAAA,QAAA;AAAA,kBACvB,CAAC,YAAA,CAAa,wBAAwB,CAAA,GACpC,gBAAqB,KAAA,MAAA;AAAA,iBACxB,CAAA;AAAA,eACH,CAAA;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}