@helpwave/hightide 0.1.7 → 0.1.9

package/dist/components/layout-and-navigation/Carousel.js

@@ -33,7 +33,7 @@ __export(Carousel_exports, {
 });
 module.exports = __toCommonJS(Carousel_exports);
 var import_react = require("react");
-var import_clsx = __toESM(require("clsx"));
+var import_clsx2 = __toESM(require("clsx"));
 var import_lucide_react = require("lucide-react");
 
 // src/util/array.ts
@@ -167,8 +167,62 @@ var LoopingArrayCalculator = class _LoopingArrayCalculator {
   }
 };
 
-// src/components/layout-and-navigation/Carousel.tsx
+// src/components/user-action/Button.tsx
+var import_clsx = __toESM(require("clsx"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var paddingMapping = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var iconPaddingMapping = {
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
+var IconButton = ({
+  children,
+  disabled = false,
+  color = "primary",
+  size = "medium",
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
+    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
+    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
+    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
+    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+  }[color];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: (0, import_clsx.default)(
+        {
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
+          [(0, import_clsx.default)(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+};
+
+// src/components/layout-and-navigation/Carousel.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Carousel = ({
   children,
   animationTime = 200,
@@ -180,7 +234,7 @@ var Carousel = ({
   arrows = false,
   dots = true,
   overScrollThreshold = 0.1,
-  blurColor = "from-white",
+  blurColor = "from-background",
   className = "",
   heightClassName = "h-[24rem]",
   widthClassName = "w-[70%] desktop:w-1/2"
@@ -408,34 +462,38 @@ var Carousel = ({
     onTouchEnd: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width),
     onTouchCancel: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width)
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "col items-center w-full gap-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(`relative w-full overflow-hidden`, heightClassName, className), children: [
-      arrows && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "col items-center w-full gap-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)(`relative w-full overflow-hidden`, heightClassName, className), children: [
+      arrows && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          IconButton,
           {
-            className: (0, import_clsx.default)("absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoLeft() }),
+            color: "neutral",
+            className: (0, import_clsx2.default)("absolute z-10 left-0 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+            disabled: !canGoLeft(),
             onClick: () => left(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronLeft, { size: 32 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronLeft, { size: 24 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "div",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          IconButton,
           {
-            className: (0, import_clsx.default)("absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoRight() }),
+            color: "neutral",
+            className: (0, import_clsx2.default)("absolute z-10 right-0 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+            disabled: !canGoRight(),
             onClick: () => right(),
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ChevronRight, { size: 32 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.ChevronRight, { size: 24 })
           }
         )
       ] }),
-      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(`relative row h-full`, heightClassName), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
+      hintNext ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_clsx2.default)(`relative row h-full`, heightClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
           item,
           index
-        }, listIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        }, listIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
-            className: (0, import_clsx.default)(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
+            className: (0, import_clsx2.default)(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
             style: { translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) },
             ...dragHandlers,
             onClick: () => startAnimation(index),
@@ -443,30 +501,30 @@ var Carousel = ({
           },
           listIndex
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
-            className: (0, import_clsx.default)(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+            className: (0, import_clsx2.default)(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
-            className: (0, import_clsx.default)(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+            className: (0, import_clsx2.default)(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
           }
         )
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: (0, import_clsx2.default)("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
     ] }),
-    dots && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    dots && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: range(0, length - 1).map((index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
-            className: (0, import_clsx.default)("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md", {
-              "bg-gray-200": currentIndex !== index,
-              "bg-primary": currentIndex === index
+            className: (0, import_clsx2.default)("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md", {
+              "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
+              "bg-carousel-dot-active hover:brightness-90": currentIndex === index
             }),
             onClick: () => startAnimation(index)
           },

package/dist/components/layout-and-navigation/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout-and-navigation/Carousel.tsx","../../../src/util/array.ts","../../../src/util/math.ts","../../../src/util/easeFunctions.ts","../../../src/util/loopingArray.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createLoopingListWithIndex, range } from '../../util/array'\nimport { clamp } from '../../util/math'\nimport { EaseFunctions } from '../../util/easeFunctions'\nimport type { Direction } from '../../util/loopingArray'\nimport { LoopingArrayCalculator } from '../../util/loopingArray'\n\n\ntype CarouselProps = {\n  children: ReactNode[],\n  animationTime?: number,\n  isLooping?: boolean,\n  isAutoLooping?: boolean,\n  autoLoopingTimeOut?: number,\n  autoLoopAnimationTime?: number,\n  hintNext?: boolean,\n  arrows?: boolean,\n  dots?: boolean,\n  /**\n   * Percentage that is allowed to be scrolled further\n   */\n  overScrollThreshold?: number,\n  blurColor?: string,\n  className?: string,\n  heightClassName?: string,\n  widthClassName?: string,\n}\n\ntype ItemType = {\n  item: ReactNode,\n  index: number,\n}\n\ntype CarouselAnimationState = {\n  targetPosition: number,\n  /**\n   * Value of either 1 or -1, 1 is forwards -1 is backwards\n   */\n  direction: Direction,\n  startPosition: number,\n  startTime?: number,\n  lastUpdateTime?: number,\n  isAutoLooping: boolean,\n}\n\ntype DragState = {\n  startX: number,\n  startTime: number,\n  lastX: number,\n  startIndex: number,\n}\n\ntype CarouselInformation = {\n  currentPosition: number,\n  dragState?: DragState,\n  animationState?: CarouselAnimationState,\n}\n\nexport const Carousel = ({\n                           children,\n                           animationTime = 200,\n                           isLooping = false,\n                           isAutoLooping = false,\n                           autoLoopingTimeOut = 5000,\n                           autoLoopAnimationTime = 500,\n                           hintNext = false,\n                           arrows = false,\n                           dots = true,\n                           overScrollThreshold = 0.1,\n                           blurColor = 'from-white',\n                           className = '',\n                           heightClassName = 'h-[24rem]',\n                           widthClassName = 'w-[70%] desktop:w-1/2',\n                         }: CarouselProps) => {\n  if (isAutoLooping && !isLooping) {\n    console.error('When isAutoLooping is true, isLooping should also be true')\n    isLooping = true\n  }\n\n  const [{\n    currentPosition,\n    dragState,\n    animationState,\n  }, setCarouselInformation] = useState<CarouselInformation>({\n    currentPosition: 0,\n  })\n  const animationId = useRef<number | undefined>(undefined)\n  const timeOut = useRef<NodeJS.Timeout | undefined>(undefined)\n  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut)\n\n  const length = children.length\n  const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping\n\n  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold])\n  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition))\n  animationTime = Math.max(200, animationTime) // in ms, must be > 0\n  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)\n\n  const getStyleOffset = (index: number) => {\n    const baseOffset = -50 + (index - currentPosition) * 100\n    return `${baseOffset}%`\n  }\n\n  const animation = useCallback((time: number) => {\n    let keepAnimating: boolean = true\n\n    // Other calculation in the setState call to avoid updating the useCallback to often\n    setCarouselInformation((state) => {\n      const {\n        animationState,\n        dragState\n      } = state\n      if (animationState === undefined || dragState !== undefined) {\n        keepAnimating = false\n        return state\n      }\n      if (!animationState.startTime || !animationState.lastUpdateTime) {\n        return {\n          ...state,\n          animationState: {\n            ...animationState,\n            startTime: time,\n            lastUpdateTime: time\n          }\n        }\n      }\n      const useAnimationTime = animationState.isAutoLooping ? autoLoopAnimationTime : animationTime\n      const progress = clamp((time - animationState.startTime) / useAnimationTime) // progress\n      const easedProgress = EaseFunctions.easeInEaseOut(progress)\n      const distance = util.getDistanceDirectional(animationState.startPosition, animationState.targetPosition, animationState.direction)\n      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState.direction + animationState.startPosition)\n\n      if (animationState.targetPosition === newPosition || progress === 1) {\n        keepAnimating = false\n        return ({\n          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),\n          animationState: undefined\n        })\n      }\n      return ({\n        currentPosition: newPosition,\n        animationState: {\n          ...animationState!,\n          lastUpdateTime: time\n        }\n      })\n    })\n    if (keepAnimating) {\n      animationId.current = requestAnimationFrame(time1 => animation(time1))\n    }\n  }, [animationTime, autoLoopAnimationTime, util])\n\n  useEffect(() => {\n    if (animationState) {\n      animationId.current = requestAnimationFrame(animation)\n    }\n    return () => {\n      if (animationId.current) {\n        cancelAnimationFrame(animationId.current)\n        animationId.current = 0\n      }\n    }\n  }, [animationState]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAutoLoop = () => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: prevState.dragState,\n    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {\n      startPosition: currentPosition,\n      targetPosition: (currentPosition + 1) % length,\n      direction: 1, // always move forward\n      isAutoLooping: true\n    }\n  }))\n\n  useEffect(() => {\n    if (!animationId.current && !animationState && !dragState && !timeOut.current) {\n      if (autoLoopingTimeOut > 0) {\n        timeOut.current = setTimeout(() => {\n          startAutoLoop()\n          timeOut.current = undefined\n        }, autoLoopingTimeOut)\n      } else {\n        startAutoLoop()\n      }\n    }\n  }, [animationState, dragState, animationId.current, timeOut.current]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAnimation = (targetPosition?: number) => {\n    if (targetPosition === undefined) {\n      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition)\n    }\n    if (targetPosition === currentPosition) {\n      return // we are exactly where we want to be\n    }\n\n    // find target index and fastest path to it\n    const direction = util.getBestDirection(currentPosition, targetPosition)\n    clearTimeout(timeOut.current)\n    timeOut.current = undefined\n    if (animationId.current) {\n      cancelAnimationFrame(animationId.current)\n      animationId.current = undefined\n    }\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      dragState: undefined,\n      animationState: {\n        targetPosition: targetPosition!,\n        direction,\n        startPosition: currentPosition,\n        isAutoLooping: false\n      },\n      timeOut: undefined\n    }))\n  }\n\n  const canGoLeft = () => {\n    return isLooping || currentPosition !== 0\n  }\n\n  const canGoRight = () => {\n    return isLooping || currentPosition !== length - 1\n  }\n\n  const left = () => {\n    if (canGoLeft()) {\n      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1))\n    }\n  }\n\n  const right = () => {\n    if (canGoRight()) {\n      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length))\n    }\n  }\n\n  let items: ItemType[] = children.map((item, index) => ({\n    index,\n    item\n  }))\n\n  if (isLooping) {\n    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({\n      index,\n      item\n    }))\n    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({\n      index,\n      item\n    }))\n    items = [\n      ...before,\n      ...items,\n      ...after\n    ]\n  }\n\n  const onDragStart = (x: number) => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: {\n      lastX: x,\n      startX: x,\n      startTime: Date.now(),\n      startIndex: currentPosition,\n    },\n    animationState: undefined // cancel animation\n  }))\n\n  const onDrag = (x: number, width: number) => {\n    // For some weird reason the clientX is 0 on the last dragUpdate before drag end causing issues\n    if (!dragState || x === 0) {\n      return\n    }\n    const offsetUpdate = (dragState.lastX - x) / width\n    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate)\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      currentPosition: newPosition,\n      dragState: {\n        ...dragState,\n        lastX: x\n      },\n    }))\n  }\n\n  const onDragEnd = (x: number, width: number) => {\n    if (!dragState) {\n      return\n    }\n    const distance = dragState.startX - x\n    const relativeDistance = distance / width\n    const duration = (Date.now() - dragState.startTime) // in milliseconds\n    const velocity = distance / (Date.now() - dragState.startTime)\n\n    const isSlide = Math.abs(velocity) > 2 || (duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50))\n    if (isSlide) {\n      if (distance > 0 && canGoRight()) {\n        right()\n        return\n      } else if (distance < 0 && canGoLeft()) {\n        left()\n        return\n      }\n    }\n    startAnimation()\n  }\n\n  const dragHandlers = {\n    draggable: true,\n    onDragStart: (event: React.DragEvent<HTMLDivElement>) => {\n      onDragStart(event.clientX)\n      event.dataTransfer.setDragImage(document.createElement('div'), 0, 0)\n    },\n    onDrag: (event: React.DragEvent<HTMLDivElement>) => onDrag(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onDragEnd: (event: React.DragEvent<HTMLDivElement>) => onDragEnd(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => onDragStart(event.touches[0]!.clientX),\n    onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => onDrag(event.touches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchCancel: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n  }\n\n  return (\n    <div className=\"col items-center w-full gap-y-2\">\n      <div className={clsx(`relative w-full overflow-hidden`, heightClassName, className)}>\n        {arrows && (\n          <>\n            <div\n              className={clsx('absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2', { hidden: !canGoLeft() })}\n              onClick={() => left()}\n            >\n              <ChevronLeft size={32}/>\n            </div>\n            <div\n              className={clsx('absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2', { hidden: !canGoRight() })}\n              onClick={() => right()}\n            >\n              <ChevronRight size={32}/>\n            </div>\n          </>\n        )}\n        {hintNext ? (\n          <div className={clsx(`relative row h-full`, heightClassName)}>\n            <div className=\"relative row h-full w-full px-2 overflow-hidden\">\n              {items.map(({\n                            item,\n                            index\n                          }, listIndex) => (\n                <div\n                  key={listIndex}\n                  className={clsx(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { '!cursor-grabbing': !!dragState })}\n                  style={{ translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) }}\n                  {...dragHandlers}\n                  onClick={() => startAnimation(index)}\n                >\n                  {item}\n                </div>\n              ))}\n            </div>\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)}\n            />\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)}\n            />\n          </div>\n        ) : (\n          <div className={clsx('px-16 h-full', { '!cursor-grabbing': !!dragState })} {...dragHandlers}>\n            {children[currentIndex]}\n          </div>\n        )}\n      </div>\n      {dots && (\n        <div\n          className=\"row items-center justify-center w-full my-2\">\n          {range(0, length - 1).map(index => (\n            <button\n              key={index}\n              className={clsx('w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md', {\n                'bg-gray-200': currentIndex !== index,\n                'bg-primary': currentIndex === index\n              })}\n              onClick={() => startAnimation(index)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","export const clamp = (value: number, min: number = 0, max: number = 1): number => {\n  return Math.min(Math.max(value, min), max)\n}\n","import { clamp } from './math'\n\nexport type EaseFunction = (t: number) => number\n\nexport class EaseFunctions {\n  static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): { x: EaseFunction, y: EaseFunction } {\n    // Calculate the x and y coordinates using the cubic Bézier formula\n    const cx = 3 * x1\n    const bx = 3 * (x2 - x1) - cx\n    const ax = 1 - cx - bx\n\n    const cy = 3 * y1\n    const by = 3 * (y2 - y1) - cy\n    const ay = 1 - cy - by\n\n    // Compute x and y values at parameter t\n    const x = (t: number) => ((ax * t + bx) * t + cx) * t\n    const y = (t: number) => ((ay * t + by) * t + cy) * t\n\n    return {\n      x,\n      y\n    }\n  }\n\n  static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction {\n    const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2)\n    return (t: number) => {\n      t = clamp(t)\n      return y(t) // <= equal to x(t) * 0 + y(t) * 1\n    }\n  }\n\n  static easeInEaseOut(t: number): number {\n    return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t)\n  };\n}\n","/**\n *  1 is forwards\n *\n * -1 is backwards\n */\nexport type Direction = 1 | -1\n\nexport class LoopingArrayCalculator {\n  length: number\n  isLooping: boolean\n  allowedOverScroll: number\n\n  constructor(length: number, isLooping: boolean = true, allowedOverScroll: number = 0.1) {\n    if (allowedOverScroll < 0 || length < 1) {\n      throw new Error('Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true')\n    }\n\n    this.length = length\n    this.isLooping = isLooping\n    this.allowedOverScroll = allowedOverScroll\n  }\n\n  getCorrectedPosition(position: number): number {\n    if (!this.isLooping) {\n      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position))\n    }\n    if (position >= this.length) {\n      return position % this.length\n    }\n    if (position < 0) {\n      return this.length - (Math.abs(position) % this.length)\n    }\n    return position\n  }\n\n  static withoutOffset(position: number): number {\n    return position + LoopingArrayCalculator.getOffset(position)\n  }\n\n  static getOffset(position: number): number {\n    return Math.round(position) - position // For example: 45.5 => 46 - 45.5 = 0.5\n  }\n\n  /**\n   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)\n   */\n  getDistanceDirectional(position: number, target: number, direction: Direction): number {\n    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {\n      throw new Error('Invalid parameters: position is out of bounds.')\n    }\n\n    const isForwardInvalid = (direction === 1 && position > target)\n    const isBackwardInvalid = (direction === -1 && target < position)\n\n    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {\n      return Infinity\n    }\n\n    if (direction === -1) {\n      return this.getDistanceDirectional(target, position, 1)\n    }\n\n    position = this.getCorrectedPosition(position)\n    target = this.getCorrectedPosition(target)\n\n    let distance = (target - position) * direction\n    if (distance < 0) {\n      distance = this.length - (Math.abs(position) % this.length) + target\n    }\n\n    return distance\n  }\n\n  getDistanceForward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, 1)\n  }\n\n  getDistanceBackward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, -1)\n  }\n\n  getDistance(position: number, target: number): number {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n\n    return Math.min(forwardDistance, backwardDistance)\n  }\n\n  getBestDirection(position: number, target: number): Direction {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n    return forwardDistance < backwardDistance ? 1 : -1\n  }\n}\n"],"mappings":"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","names":["animationState","dragState","clsx"]}
+{"version":3,"sources":["../../../src/components/layout-and-navigation/Carousel.tsx","../../../src/util/array.ts","../../../src/util/math.ts","../../../src/util/easeFunctions.ts","../../../src/util/loopingArray.ts","../../../src/components/user-action/Button.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport clsx from 'clsx'\nimport { ChevronLeft, ChevronRight } from 'lucide-react'\nimport { createLoopingListWithIndex, range } from '../../util/array'\nimport { clamp } from '../../util/math'\nimport { EaseFunctions } from '../../util/easeFunctions'\nimport type { Direction } from '../../util/loopingArray'\nimport { LoopingArrayCalculator } from '../../util/loopingArray'\nimport { IconButton } from '../user-action/Button'\n\n\nexport type CarouselProps = {\n  children: ReactNode[],\n  animationTime?: number,\n  isLooping?: boolean,\n  isAutoLooping?: boolean,\n  autoLoopingTimeOut?: number,\n  autoLoopAnimationTime?: number,\n  hintNext?: boolean,\n  arrows?: boolean,\n  dots?: boolean,\n  /**\n   * Percentage that is allowed to be scrolled further\n   */\n  overScrollThreshold?: number,\n  blurColor?: string,\n  className?: string,\n  heightClassName?: string,\n  widthClassName?: string,\n}\n\ntype ItemType = {\n  item: ReactNode,\n  index: number,\n}\n\ntype CarouselAnimationState = {\n  targetPosition: number,\n  /**\n   * Value of either 1 or -1, 1 is forwards -1 is backwards\n   */\n  direction: Direction,\n  startPosition: number,\n  startTime?: number,\n  lastUpdateTime?: number,\n  isAutoLooping: boolean,\n}\n\ntype DragState = {\n  startX: number,\n  startTime: number,\n  lastX: number,\n  startIndex: number,\n}\n\ntype CarouselInformation = {\n  currentPosition: number,\n  dragState?: DragState,\n  animationState?: CarouselAnimationState,\n}\n\nexport const Carousel = ({\n                           children,\n                           animationTime = 200,\n                           isLooping = false,\n                           isAutoLooping = false,\n                           autoLoopingTimeOut = 5000,\n                           autoLoopAnimationTime = 500,\n                           hintNext = false,\n                           arrows = false,\n                           dots = true,\n                           overScrollThreshold = 0.1,\n                           blurColor = 'from-background',\n                           className = '',\n                           heightClassName = 'h-[24rem]',\n                           widthClassName = 'w-[70%] desktop:w-1/2',\n                         }: CarouselProps) => {\n  if (isAutoLooping && !isLooping) {\n    console.error('When isAutoLooping is true, isLooping should also be true')\n    isLooping = true\n  }\n\n  const [{\n    currentPosition,\n    dragState,\n    animationState,\n  }, setCarouselInformation] = useState<CarouselInformation>({\n    currentPosition: 0,\n  })\n  const animationId = useRef<number | undefined>(undefined)\n  const timeOut = useRef<NodeJS.Timeout | undefined>(undefined)\n  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut)\n\n  const length = children.length\n  const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping\n\n  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold])\n  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition))\n  animationTime = Math.max(200, animationTime) // in ms, must be > 0\n  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)\n\n  const getStyleOffset = (index: number) => {\n    const baseOffset = -50 + (index - currentPosition) * 100\n    return `${baseOffset}%`\n  }\n\n  const animation = useCallback((time: number) => {\n    let keepAnimating: boolean = true\n\n    // Other calculation in the setState call to avoid updating the useCallback to often\n    setCarouselInformation((state) => {\n      const {\n        animationState,\n        dragState\n      } = state\n      if (animationState === undefined || dragState !== undefined) {\n        keepAnimating = false\n        return state\n      }\n      if (!animationState.startTime || !animationState.lastUpdateTime) {\n        return {\n          ...state,\n          animationState: {\n            ...animationState,\n            startTime: time,\n            lastUpdateTime: time\n          }\n        }\n      }\n      const useAnimationTime = animationState.isAutoLooping ? autoLoopAnimationTime : animationTime\n      const progress = clamp((time - animationState.startTime) / useAnimationTime) // progress\n      const easedProgress = EaseFunctions.easeInEaseOut(progress)\n      const distance = util.getDistanceDirectional(animationState.startPosition, animationState.targetPosition, animationState.direction)\n      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState.direction + animationState.startPosition)\n\n      if (animationState.targetPosition === newPosition || progress === 1) {\n        keepAnimating = false\n        return ({\n          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),\n          animationState: undefined\n        })\n      }\n      return ({\n        currentPosition: newPosition,\n        animationState: {\n          ...animationState!,\n          lastUpdateTime: time\n        }\n      })\n    })\n    if (keepAnimating) {\n      animationId.current = requestAnimationFrame(time1 => animation(time1))\n    }\n  }, [animationTime, autoLoopAnimationTime, util])\n\n  useEffect(() => {\n    if (animationState) {\n      animationId.current = requestAnimationFrame(animation)\n    }\n    return () => {\n      if (animationId.current) {\n        cancelAnimationFrame(animationId.current)\n        animationId.current = 0\n      }\n    }\n  }, [animationState]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAutoLoop = () => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: prevState.dragState,\n    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {\n      startPosition: currentPosition,\n      targetPosition: (currentPosition + 1) % length,\n      direction: 1, // always move forward\n      isAutoLooping: true\n    }\n  }))\n\n  useEffect(() => {\n    if (!animationId.current && !animationState && !dragState && !timeOut.current) {\n      if (autoLoopingTimeOut > 0) {\n        timeOut.current = setTimeout(() => {\n          startAutoLoop()\n          timeOut.current = undefined\n        }, autoLoopingTimeOut)\n      } else {\n        startAutoLoop()\n      }\n    }\n  }, [animationState, dragState, animationId.current, timeOut.current]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  const startAnimation = (targetPosition?: number) => {\n    if (targetPosition === undefined) {\n      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition)\n    }\n    if (targetPosition === currentPosition) {\n      return // we are exactly where we want to be\n    }\n\n    // find target index and fastest path to it\n    const direction = util.getBestDirection(currentPosition, targetPosition)\n    clearTimeout(timeOut.current)\n    timeOut.current = undefined\n    if (animationId.current) {\n      cancelAnimationFrame(animationId.current)\n      animationId.current = undefined\n    }\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      dragState: undefined,\n      animationState: {\n        targetPosition: targetPosition!,\n        direction,\n        startPosition: currentPosition,\n        isAutoLooping: false\n      },\n      timeOut: undefined\n    }))\n  }\n\n  const canGoLeft = () => {\n    return isLooping || currentPosition !== 0\n  }\n\n  const canGoRight = () => {\n    return isLooping || currentPosition !== length - 1\n  }\n\n  const left = () => {\n    if (canGoLeft()) {\n      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1))\n    }\n  }\n\n  const right = () => {\n    if (canGoRight()) {\n      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length))\n    }\n  }\n\n  let items: ItemType[] = children.map((item, index) => ({\n    index,\n    item\n  }))\n\n  if (isLooping) {\n    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({\n      index,\n      item\n    }))\n    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({\n      index,\n      item\n    }))\n    items = [\n      ...before,\n      ...items,\n      ...after\n    ]\n  }\n\n  const onDragStart = (x: number) => setCarouselInformation(prevState => ({\n    ...prevState,\n    dragState: {\n      lastX: x,\n      startX: x,\n      startTime: Date.now(),\n      startIndex: currentPosition,\n    },\n    animationState: undefined // cancel animation\n  }))\n\n  const onDrag = (x: number, width: number) => {\n    // For some weird reason the clientX is 0 on the last dragUpdate before drag end causing issues\n    if (!dragState || x === 0) {\n      return\n    }\n    const offsetUpdate = (dragState.lastX - x) / width\n    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate)\n\n    setCarouselInformation(prevState => ({\n      ...prevState,\n      currentPosition: newPosition,\n      dragState: {\n        ...dragState,\n        lastX: x\n      },\n    }))\n  }\n\n  const onDragEnd = (x: number, width: number) => {\n    if (!dragState) {\n      return\n    }\n    const distance = dragState.startX - x\n    const relativeDistance = distance / width\n    const duration = (Date.now() - dragState.startTime) // in milliseconds\n    const velocity = distance / (Date.now() - dragState.startTime)\n\n    const isSlide = Math.abs(velocity) > 2 || (duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50))\n    if (isSlide) {\n      if (distance > 0 && canGoRight()) {\n        right()\n        return\n      } else if (distance < 0 && canGoLeft()) {\n        left()\n        return\n      }\n    }\n    startAnimation()\n  }\n\n  const dragHandlers = {\n    draggable: true,\n    onDragStart: (event: React.DragEvent<HTMLDivElement>) => {\n      onDragStart(event.clientX)\n      event.dataTransfer.setDragImage(document.createElement('div'), 0, 0)\n    },\n    onDrag: (event: React.DragEvent<HTMLDivElement>) => onDrag(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onDragEnd: (event: React.DragEvent<HTMLDivElement>) => onDragEnd(event.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchStart: (event: React.TouchEvent<HTMLDivElement>) => onDragStart(event.touches[0]!.clientX),\n    onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => onDrag(event.touches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n    onTouchCancel: (event: React.TouchEvent<HTMLDivElement>) => onDragEnd(event.changedTouches[0]!.clientX, (event.target as HTMLDivElement).getBoundingClientRect().width),\n  }\n\n  return (\n    <div className=\"col items-center w-full gap-y-2\">\n      <div className={clsx(`relative w-full overflow-hidden`, heightClassName, className)}>\n        {arrows && (\n          <>\n            <IconButton\n              color=\"neutral\"\n              className={clsx('absolute z-10 left-0 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoLeft() })}\n              disabled={!canGoLeft()}\n              onClick={() => left()}\n            >\n              <ChevronLeft size={24}/>\n            </IconButton>\n            <IconButton\n              color=\"neutral\"\n              className={clsx('absolute z-10 right-0 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoRight() })}\n              disabled={!canGoRight()}\n              onClick={() => right()}\n            >\n              <ChevronRight size={24}/>\n            </IconButton>\n          </>\n        )}\n        {hintNext ? (\n          <div className={clsx(`relative row h-full`, heightClassName)}>\n            <div className=\"relative row h-full w-full px-2 overflow-hidden\">\n              {items.map(({\n                            item,\n                            index\n                          }, listIndex) => (\n                <div\n                  key={listIndex}\n                  className={clsx(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { '!cursor-grabbing': !!dragState })}\n                  style={{ translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) }}\n                  {...dragHandlers}\n                  onClick={() => startAnimation(index)}\n                >\n                  {item}\n                </div>\n              ))}\n            </div>\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)}\n            />\n            <div\n              className={clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)}\n            />\n          </div>\n        ) : (\n          <div className={clsx('px-16 h-full', { '!cursor-grabbing': !!dragState })} {...dragHandlers}>\n            {children[currentIndex]}\n          </div>\n        )}\n      </div>\n      {dots && (\n        <div\n          className=\"row items-center justify-center w-full my-2\">\n          {range(0, length - 1).map(index => (\n            <button\n              key={index}\n              className={clsx('w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md', {\n                'bg-carousel-dot-disabled hover:bg-carousel-dot-active': currentIndex !== index,\n                'bg-carousel-dot-active hover:brightness-90': currentIndex === index\n              })}\n              onClick={() => startAnimation(index)}\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n","export const equalSizeGroups = <T>(array: T[], groupSize: number): T[][] => {\n  if (groupSize <= 0) {\n    console.warn(`group size should be greater than 0: groupSize = ${groupSize}`)\n    return [[...array]]\n  }\n\n  const groups = []\n  for (let i = 0; i < array.length; i += groupSize) {\n    groups.push(array.slice(i, Math.min(i + groupSize, array.length)))\n  }\n  return groups\n}\n\n/**\n * @param start\n * @param end inclusive\n * @param allowEmptyRange Whether the range can be defined empty via end < start\n */\nexport const range = (start: number, end: number, allowEmptyRange: boolean = false): number[] => {\n  if (end < start) {\n    if (!allowEmptyRange) {\n      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set allowEmptyRange to true`)\n    }\n    return []\n  }\n  return Array.from({ length: end - start + 1 }, (_, index) => index + start)\n}\n\n/** Finds the closest match\n * @param list The list of all possible matches\n * @param firstCloser Return whether item1 is closer than item2\n */\nexport const closestMatch = <T>(list: T[], firstCloser: (item1: T, item2: T) => boolean) => {\n  return list.reduce((item1, item2) => {\n    return firstCloser(item1, item2) ? item1 : item2\n  })\n}\n\n/**\n * returns the item in middle of a list and its neighbours before and after\n * e.g. [1,2,3,4,5,6] for item = 1 would return [5,6,1,2,3]\n */\nexport const getNeighbours = <T>(list: T[], item: T, neighbourDistance: number = 2) => {\n  const index = list.indexOf(item)\n  const totalItems = neighbourDistance * 2 + 1\n  if (list.length < totalItems) {\n    console.warn('List is to short')\n    return list\n  }\n\n  if (index === -1) {\n    console.error('item not found in list')\n    return list.splice(0, totalItems)\n  }\n\n  let start = index - neighbourDistance\n  if (start < 0) {\n    start += list.length\n  }\n  const end = (index + neighbourDistance + 1) % list.length\n\n  const result: T[] = []\n  let ignoreOnce = list.length === totalItems\n  for (let i = start; i !== end || ignoreOnce; i = (i + 1) % list.length) {\n    result.push(list[i]!)\n    if (end === i && ignoreOnce) {\n      ignoreOnce = false\n    }\n  }\n  return result\n}\n\nexport const createLoopingListWithIndex = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  if (length < 0) {\n    console.warn(`createLoopingList: length must be >= 0, given ${length}`)\n  } else if (length === 0) {\n    length = list.length\n  }\n\n  const returnList: [number, T][] = []\n\n  if (forwards) {\n    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {\n      returnList.push([i, list[i]!])\n    }\n  } else {\n    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {\n      returnList.push([i, list[i]!])\n    }\n  }\n\n  return returnList\n}\n\nexport const createLoopingList = <T>(list: T[], startIndex: number = 0, length: number = 0, forwards: boolean = true) => {\n  return createLoopingListWithIndex(list, startIndex, length, forwards).map(([_, item]) => item)\n}\n\nexport const ArrayUtil = {\n  unique: <T>(list: T[]): T[] => {\n    const seen = new Set<T>()\n    return list.filter((item) => {\n      if (seen.has(item)) {\n        return false\n      }\n      seen.add(item)\n      return true\n    })\n  },\n\n  difference: <T>(list: T[], removeList: T[]): T[] => {\n    const remove = new Set<T>(removeList)\n    return list.filter((item) => !remove.has(item))\n  }\n}\n","export const clamp = (value: number, min: number = 0, max: number = 1): number => {\n  return Math.min(Math.max(value, min), max)\n}\n","import { clamp } from './math'\n\nexport type EaseFunction = (t: number) => number\n\nexport class EaseFunctions {\n  static cubicBezierGeneric(x1: number, y1: number, x2: number, y2: number): { x: EaseFunction, y: EaseFunction } {\n    // Calculate the x and y coordinates using the cubic Bézier formula\n    const cx = 3 * x1\n    const bx = 3 * (x2 - x1) - cx\n    const ax = 1 - cx - bx\n\n    const cy = 3 * y1\n    const by = 3 * (y2 - y1) - cy\n    const ay = 1 - cy - by\n\n    // Compute x and y values at parameter t\n    const x = (t: number) => ((ax * t + bx) * t + cx) * t\n    const y = (t: number) => ((ay * t + by) * t + cy) * t\n\n    return {\n      x,\n      y\n    }\n  }\n\n  static cubicBezier(x1: number, y1: number, x2: number, y2: number): EaseFunction {\n    const { y } = EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2)\n    return (t: number) => {\n      t = clamp(t)\n      return y(t) // <= equal to x(t) * 0 + y(t) * 1\n    }\n  }\n\n  static easeInEaseOut(t: number): number {\n    return EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t)\n  };\n}\n","/**\n *  1 is forwards\n *\n * -1 is backwards\n */\nexport type Direction = 1 | -1\n\nexport class LoopingArrayCalculator {\n  length: number\n  isLooping: boolean\n  allowedOverScroll: number\n\n  constructor(length: number, isLooping: boolean = true, allowedOverScroll: number = 0.1) {\n    if (allowedOverScroll < 0 || length < 1) {\n      throw new Error('Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true')\n    }\n\n    this.length = length\n    this.isLooping = isLooping\n    this.allowedOverScroll = allowedOverScroll\n  }\n\n  getCorrectedPosition(position: number): number {\n    if (!this.isLooping) {\n      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position))\n    }\n    if (position >= this.length) {\n      return position % this.length\n    }\n    if (position < 0) {\n      return this.length - (Math.abs(position) % this.length)\n    }\n    return position\n  }\n\n  static withoutOffset(position: number): number {\n    return position + LoopingArrayCalculator.getOffset(position)\n  }\n\n  static getOffset(position: number): number {\n    return Math.round(position) - position // For example: 45.5 => 46 - 45.5 = 0.5\n  }\n\n  /**\n   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)\n   */\n  getDistanceDirectional(position: number, target: number, direction: Direction): number {\n    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {\n      throw new Error('Invalid parameters: position is out of bounds.')\n    }\n\n    const isForwardInvalid = (direction === 1 && position > target)\n    const isBackwardInvalid = (direction === -1 && target < position)\n\n    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {\n      return Infinity\n    }\n\n    if (direction === -1) {\n      return this.getDistanceDirectional(target, position, 1)\n    }\n\n    position = this.getCorrectedPosition(position)\n    target = this.getCorrectedPosition(target)\n\n    let distance = (target - position) * direction\n    if (distance < 0) {\n      distance = this.length - (Math.abs(position) % this.length) + target\n    }\n\n    return distance\n  }\n\n  getDistanceForward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, 1)\n  }\n\n  getDistanceBackward(position: number, target: number): number {\n    return this.getDistanceDirectional(position, target, -1)\n  }\n\n  getDistance(position: number, target: number): number {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n\n    return Math.min(forwardDistance, backwardDistance)\n  }\n\n  getBestDirection(position: number, target: number): Direction {\n    const forwardDistance = this.getDistanceForward(position, target)\n    const backwardDistance = this.getDistanceBackward(position, target)\n    return forwardDistance < backwardDistance ? 1 : -1\n  }\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n  solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n  text: ['primary', 'negative', 'neutral'] as const,\n  outline: ['primary'] as const,\n}\n\n\n/**\n * The allowed colors for the SolidButton and IconButton\n */\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/**\n * The allowed colors for the OutlineButton\n */\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/**\n * The allowed colors for the TextButton\n */\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/**\n * The different sizes for a button\n */\ntype ButtonSizes = 'small' | 'medium' | 'large'\n\n/**\n * The shard properties between all button types\n */\nexport type ButtonProps = PropsWithChildren<{\n  /**\n   * @default 'medium'\n   */\n  size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n  small: 'btn-sm',\n  medium: 'btn-md',\n  large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n  small: 'icon-btn-sm',\n  medium: 'icon-btn-md',\n  large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n  paddingMapping,\n  iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n  startIcon?: ReactNode,\n  endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n  color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n  color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n  color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n  color?: SolidButtonColor,\n}\n\n/**\n * A button with a solid background and different sizes\n */\nconst SolidButton = ({\n                       children,\n                       disabled = false,\n                       color = 'primary',\n                       size = 'medium',\n                       startIcon,\n                       endIcon,\n                       onClick,\n                       className,\n                       ...restProps\n                     }: SolidButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-solid-primary-icon',\n    secondary: 'text-button-solid-secondary-icon',\n    tertiary: 'text-button-solid-tertiary-icon',\n    positive: 'text-button-solid-positive-icon',\n    warning: 'text-button-solid-warning-icon',\n    negative: 'text-button-solid-negative-icon',\n    neutral: 'text-button-solid-neutral-icon',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A button with an outline border and different sizes\n */\nconst OutlineButton = ({\n                         children,\n                         disabled = false,\n                         color = 'primary',\n                         size = 'medium',\n                         startIcon,\n                         endIcon,\n                         onClick,\n                         className,\n                         ...restProps\n                       }: OutlineButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-outline-primary-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n/**\n * A text that is a button that can have different sizes\n */\nconst TextButton = ({\n                      children,\n                      disabled = false,\n                      color = 'neutral',\n                      size = 'medium',\n                      startIcon,\n                      endIcon,\n                      onClick,\n                      className,\n                      ...restProps\n                    }: TextButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-transparent text-button-text-primary-text',\n    negative: 'bg-transparent text-button-text-negative-text',\n    neutral: 'bg-transparent text-button-text-neutral-text',\n  }[color]\n\n  const iconColorClasses = {\n    primary: 'text-button-text-primary-icon',\n    negative: 'text-button-text-negative-icon',\n    neutral: 'text-button-text-neutral-icon',\n  }[color]\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n        },\n        ButtonUtil.paddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {startIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {startIcon}\n      </span>\n      )}\n      {children}\n      {endIcon && (\n        <span\n          className={clsx({\n            [iconColorClasses]: !disabled,\n            [`text-disabled-icon`]: disabled\n          })}\n        >\n        {endIcon}\n      </span>\n      )}\n    </button>\n  )\n}\n\n\n/**\n * A button for icons with a solid background and different sizes\n */\nconst IconButton = ({\n                      children,\n                      disabled = false,\n                      color = 'primary',\n                      size = 'medium',\n                      onClick,\n                      className,\n                      ...restProps\n                    }: IconButtonProps) => {\n  const colorClasses = {\n    primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n    secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n    tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n    positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n    warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n    negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n    neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n  }[color]\n\n  return (\n    <button\n      onClick={disabled ? undefined : onClick}\n      disabled={disabled || onClick === undefined}\n      className={clsx(\n        {\n          'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n          [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n        },\n        ButtonUtil.iconPaddingMapping[size],\n        className\n      )}\n      {...restProps}\n    >\n      {children}\n    </button>\n  )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n"],"mappings":"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","names":["import_clsx","clsx","import_jsx_runtime","animationState","dragState","clsx"]}

package/dist/components/layout-and-navigation/Carousel.mjs

@@ -1,6 +1,6 @@
 // src/components/layout-and-navigation/Carousel.tsx
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import clsx from "clsx";
+import clsx2 from "clsx";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
 // src/util/array.ts
@@ -134,8 +134,62 @@ var LoopingArrayCalculator = class _LoopingArrayCalculator {
   }
 };
 
+// src/components/user-action/Button.tsx
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+var paddingMapping = {
+  small: "btn-sm",
+  medium: "btn-md",
+  large: "btn-lg"
+};
+var iconPaddingMapping = {
+  small: "icon-btn-sm",
+  medium: "icon-btn-md",
+  large: "icon-btn-lg"
+};
+var ButtonUtil = {
+  paddingMapping,
+  iconPaddingMapping
+};
+var IconButton = ({
+  children,
+  disabled = false,
+  color = "primary",
+  size = "medium",
+  onClick,
+  className,
+  ...restProps
+}) => {
+  const colorClasses = {
+    primary: "bg-button-solid-primary-background text-button-solid-primary-text",
+    secondary: "bg-button-solid-secondary-background text-button-solid-secondary-text",
+    tertiary: "bg-button-solid-tertiary-background text-button-solid-tertiary-text",
+    positive: "bg-button-solid-positive-background text-button-solid-positive-text",
+    warning: "bg-button-solid-warning-background text-button-solid-warning-text",
+    negative: "bg-button-solid-negative-background text-button-solid-negative-text",
+    neutral: "bg-button-solid-neutral-background text-button-solid-neutral-text"
+  }[color];
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: disabled ? void 0 : onClick,
+      disabled: disabled || onClick === void 0,
+      className: clsx(
+        {
+          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
+          [clsx(colorClasses, "hover:brightness-90")]: !disabled
+        },
+        ButtonUtil.iconPaddingMapping[size],
+        className
+      ),
+      ...restProps,
+      children
+    }
+  );
+};
+
 // src/components/layout-and-navigation/Carousel.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var Carousel = ({
   children,
   animationTime = 200,
@@ -147,7 +201,7 @@ var Carousel = ({
   arrows = false,
   dots = true,
   overScrollThreshold = 0.1,
-  blurColor = "from-white",
+  blurColor = "from-background",
   className = "",
   heightClassName = "h-[24rem]",
   widthClassName = "w-[70%] desktop:w-1/2"
@@ -375,34 +429,38 @@ var Carousel = ({
     onTouchEnd: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width),
     onTouchCancel: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width)
   };
-  return /* @__PURE__ */ jsxs("div", { className: "col items-center w-full gap-y-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: clsx(`relative w-full overflow-hidden`, heightClassName, className), children: [
-      arrows && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs2("div", { className: "col items-center w-full gap-y-2", children: [
+    /* @__PURE__ */ jsxs2("div", { className: clsx2(`relative w-full overflow-hidden`, heightClassName, className), children: [
+      arrows && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2(
+          IconButton,
           {
-            className: clsx("absolute z-10 left-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoLeft() }),
+            color: "neutral",
+            className: clsx2("absolute z-10 left-0 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
+            disabled: !canGoLeft(),
             onClick: () => left(),
-            children: /* @__PURE__ */ jsx(ChevronLeft, { size: 32 })
+            children: /* @__PURE__ */ jsx2(ChevronLeft, { size: 24 })
           }
         ),
-        /* @__PURE__ */ jsx(
-          "div",
+        /* @__PURE__ */ jsx2(
+          IconButton,
           {
-            className: clsx("absolute z-10 right-0 top-1/2 -translate-y-1/2 bg-gray-200 hover:bg-gray-300 rounded-lg cursor-pointer border-black border-2", { hidden: !canGoRight() }),
+            color: "neutral",
+            className: clsx2("absolute z-10 right-0 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
+            disabled: !canGoRight(),
             onClick: () => right(),
-            children: /* @__PURE__ */ jsx(ChevronRight, { size: 32 })
+            children: /* @__PURE__ */ jsx2(ChevronRight, { size: 24 })
           }
         )
       ] }),
-      hintNext ? /* @__PURE__ */ jsxs("div", { className: clsx(`relative row h-full`, heightClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
+      hintNext ? /* @__PURE__ */ jsxs2("div", { className: clsx2(`relative row h-full`, heightClassName), children: [
+        /* @__PURE__ */ jsx2("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({
           item,
           index
-        }, listIndex) => /* @__PURE__ */ jsx(
+        }, listIndex) => /* @__PURE__ */ jsx2(
           "div",
           {
-            className: clsx(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
+            className: clsx2(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
             style: { translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) },
             ...dragHandlers,
             onClick: () => startAnimation(index),
@@ -410,30 +468,30 @@ var Carousel = ({
           },
           listIndex
         )) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
-            className: clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+            className: clsx2(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
           }
         ),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx2(
           "div",
           {
-            className: clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+            className: clsx2(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
           }
         )
-      ] }) : /* @__PURE__ */ jsx("div", { className: clsx("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
+      ] }) : /* @__PURE__ */ jsx2("div", { className: clsx2("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
     ] }),
-    dots && /* @__PURE__ */ jsx(
+    dots && /* @__PURE__ */ jsx2(
       "div",
       {
         className: "row items-center justify-center w-full my-2",
-        children: range(0, length - 1).map((index) => /* @__PURE__ */ jsx(
+        children: range(0, length - 1).map((index) => /* @__PURE__ */ jsx2(
           "button",
           {
-            className: clsx("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] hover:bg-primary hover:brightness-90 first:rounded-l-md last:rounded-r-md", {
-              "bg-gray-200": currentIndex !== index,
-              "bg-primary": currentIndex === index
+            className: clsx2("w-[2rem] min-w-[2rem] h-[0.75rem] min-h-[0.75rem] first:rounded-l-md last:rounded-r-md", {
+              "bg-carousel-dot-disabled hover:bg-carousel-dot-active": currentIndex !== index,
+              "bg-carousel-dot-active hover:brightness-90": currentIndex === index
             }),
             onClick: () => startAnimation(index)
           },