@helpwave/hightide 0.1.26 → 0.1.28

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

@@ -1,609 +0,0 @@
-// src/components/layout-and-navigation/Carousel.tsx
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import clsx2 from "clsx";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-
-// src/utils/array.ts
-var defaultRangeOptions = {
-  allowEmptyRange: false,
-  stepSize: 1,
-  exclusiveStart: false,
-  exclusiveEnd: true
-};
-var range = (endOrRange, options) => {
-  const { allowEmptyRange, stepSize, exclusiveStart, exclusiveEnd } = { ...defaultRangeOptions, ...options };
-  let start = 0;
-  let end;
-  if (typeof endOrRange === "number") {
-    end = endOrRange;
-  } else {
-    start = endOrRange[0];
-    end = endOrRange[1];
-  }
-  if (!exclusiveEnd) {
-    end -= 1;
-  }
-  if (exclusiveStart) {
-    start += 1;
-  }
-  if (end - 1 < start) {
-    if (!allowEmptyRange) {
-      console.warn(`range: end (${end}) < start (${start}) should be allowed explicitly, set options.allowEmptyRange to true`);
-    }
-    return [];
-  }
-  return Array.from({ length: end - start }, (_, index) => index * stepSize + start);
-};
-var createLoopingListWithIndex = (list, startIndex = 0, length = 0, forwards = true) => {
-  if (length < 0) {
-    console.warn(`createLoopingList: length must be >= 0, given ${length}`);
-  } else if (length === 0) {
-    length = list.length;
-  }
-  const returnList = [];
-  if (forwards) {
-    for (let i = startIndex; returnList.length < length; i = (i + 1) % list.length) {
-      returnList.push([i, list[i]]);
-    }
-  } else {
-    for (let i = startIndex; returnList.length < length; i = i === 0 ? i = list.length - 1 : i - 1) {
-      returnList.push([i, list[i]]);
-    }
-  }
-  return returnList;
-};
-
-// src/utils/math.ts
-var clamp = (value, range2 = [0, 1]) => {
-  const [min, max] = range2;
-  return Math.min(Math.max(value, min), max);
-};
-
-// src/utils/easeFunctions.ts
-var EaseFunctions = class _EaseFunctions {
-  static cubicBezierGeneric(x1, y1, x2, y2) {
-    const cx = 3 * x1;
-    const bx = 3 * (x2 - x1) - cx;
-    const ax = 1 - cx - bx;
-    const cy = 3 * y1;
-    const by = 3 * (y2 - y1) - cy;
-    const ay = 1 - cy - by;
-    const x = (t) => ((ax * t + bx) * t + cx) * t;
-    const y = (t) => ((ay * t + by) * t + cy) * t;
-    return {
-      x,
-      y
-    };
-  }
-  static cubicBezier(x1, y1, x2, y2) {
-    const { y } = _EaseFunctions.cubicBezierGeneric(x1, y1, x2, y2);
-    return (t) => {
-      t = clamp(t);
-      return y(t);
-    };
-  }
-  static easeInEaseOut(t) {
-    return _EaseFunctions.cubicBezier(0.65, 0, 0.35, 1)(t);
-  }
-};
-
-// src/utils/loopingArray.ts
-var LoopingArrayCalculator = class _LoopingArrayCalculator {
-  constructor(length, isLooping = true, allowedOverScroll = 0.1) {
-    if (allowedOverScroll < 0 || length < 1) {
-      throw new Error("Invalid parameters: allowedOverScroll >= 0 and length >= 1 must be true");
-    }
-    this.length = length;
-    this.isLooping = isLooping;
-    this.allowedOverScroll = allowedOverScroll;
-  }
-  getCorrectedPosition(position) {
-    if (!this.isLooping) {
-      return Math.max(-this.allowedOverScroll, Math.min(this.allowedOverScroll + this.length - 1, position));
-    }
-    if (position >= this.length) {
-      return position % this.length;
-    }
-    if (position < 0) {
-      return this.length - Math.abs(position) % this.length;
-    }
-    return position;
-  }
-  static withoutOffset(position) {
-    return position + _LoopingArrayCalculator.getOffset(position);
-  }
-  static getOffset(position) {
-    return Math.round(position) - position;
-  }
-  /**
-   * @return absolute distance forwards or Infinity when the target cannot be reached (only possible when not isLooping)
-   */
-  getDistanceDirectional(position, target, direction) {
-    if (!this.isLooping && (position < -this.allowedOverScroll || position > this.allowedOverScroll + this.length - 1)) {
-      throw new Error("Invalid parameters: position is out of bounds.");
-    }
-    const isForwardInvalid = direction === 1 && position > target;
-    const isBackwardInvalid = direction === -1 && target < position;
-    if (!this.isLooping && (isForwardInvalid || isBackwardInvalid)) {
-      return Infinity;
-    }
-    if (direction === -1) {
-      return this.getDistanceDirectional(target, position, 1);
-    }
-    position = this.getCorrectedPosition(position);
-    target = this.getCorrectedPosition(target);
-    let distance = (target - position) * direction;
-    if (distance < 0) {
-      distance = this.length - Math.abs(position) % this.length + target;
-    }
-    return distance;
-  }
-  getDistanceForward(position, target) {
-    return this.getDistanceDirectional(position, target, 1);
-  }
-  getDistanceBackward(position, target) {
-    return this.getDistanceDirectional(position, target, -1);
-  }
-  getDistance(position, target) {
-    const forwardDistance = this.getDistanceForward(position, target);
-    const backwardDistance = this.getDistanceBackward(position, target);
-    return Math.min(forwardDistance, backwardDistance);
-  }
-  getBestDirection(position, target) {
-    const forwardDistance = this.getDistanceForward(position, target);
-    const backwardDistance = this.getDistanceBackward(position, target);
-    return forwardDistance < backwardDistance ? 1 : -1;
-  }
-};
-
-// src/components/user-action/Button.tsx
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var ButtonColorUtil = {
-  solid: ["primary", "secondary", "tertiary", "positive", "warning", "negative", "neutral"],
-  text: ["primary", "negative", "neutral"],
-  outline: ["primary"]
-};
-var IconButtonUtil = {
-  icon: [...ButtonColorUtil.solid, "transparent"]
-};
-var paddingMapping = {
-  small: "btn-sm",
-  medium: "btn-md",
-  large: "btn-lg"
-};
-var iconPaddingMapping = {
-  tiny: "icon-btn-xs",
-  small: "icon-btn-sm",
-  medium: "icon-btn-md",
-  large: "icon-btn-lg"
-};
-var ButtonUtil = {
-  paddingMapping,
-  iconPaddingMapping
-};
-var SolidButton = forwardRef(function SolidButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text"
-  }[color];
-  const iconColorClasses = {
-    primary: "not-group-disabled:text-button-solid-primary-icon",
-    secondary: "not-group-disabled:text-button-solid-secondary-icon",
-    tertiary: "not-group-disabled:text-button-solid-tertiary-icon",
-    positive: "not-group-disabled:text-button-solid-positive-icon",
-    warning: "not-group-disabled:text-button-solid-warning-icon",
-    negative: "not-group-disabled:text-button-solid-negative-icon",
-    neutral: "not-group-disabled:text-button-solid-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      onClick,
-      className: clsx(
-        "group font-semibold",
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled-text disabled:bg-disabled-background",
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: clsx(
-              iconColorClasses,
-              "group-disabled:text-disabled-icon"
-            ),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-});
-var IconButton = forwardRef(function IconButton2({
-  children,
-  color = "primary",
-  size = "medium",
-  className,
-  ...restProps
-}, ref) {
-  const colorClasses = {
-    primary: "not-disabled:bg-button-solid-primary-background not-disabled:text-button-solid-primary-text",
-    secondary: "not-disabled:bg-button-solid-secondary-background not-disabled:text-button-solid-secondary-text",
-    tertiary: "not-disabled:bg-button-solid-tertiary-background not-disabled:text-button-solid-tertiary-text",
-    positive: "not-disabled:bg-button-solid-positive-background not-disabled:text-button-solid-positive-text",
-    warning: "not-disabled:bg-button-solid-warning-background not-disabled:text-button-solid-warning-text",
-    negative: "not-disabled:bg-button-solid-negative-background not-disabled:text-button-solid-negative-text",
-    neutral: "not-disabled:bg-button-solid-neutral-background not-disabled:text-button-solid-neutral-text",
-    transparent: "not-disabled:bg-transparent"
-  }[color];
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      className: clsx(
-        colorClasses,
-        "not-disabled:hover:brightness-90",
-        "disabled:text-disabled-text",
-        {
-          "disabled:bg-disabled-background": color !== "transparent",
-          "disabled:opacity-70": color === "transparent",
-          "not-disabled:hover:bg-button-text-hover-background": color === "transparent"
-        },
-        ButtonUtil.iconPaddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children
-    }
-  );
-});
-
-// src/components/layout-and-navigation/Carousel.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Carousel = ({
-  children,
-  animationTime = 200,
-  isLooping = false,
-  isAutoLooping = false,
-  autoLoopingTimeOut = 5e3,
-  autoLoopAnimationTime = 500,
-  hintNext = false,
-  arrows = false,
-  dots = true,
-  overScrollThreshold = 0.1,
-  blurColor = "from-background",
-  className = "",
-  heightClassName = "h-96",
-  widthClassName = "w-[70%] desktop:w-1/2"
-}) => {
-  if (isAutoLooping && !isLooping) {
-    console.error("When isAutoLooping is true, isLooping should also be true");
-    isLooping = true;
-  }
-  const [{
-    currentPosition,
-    dragState,
-    animationState
-  }, setCarouselInformation] = useState({
-    currentPosition: 0
-  });
-  const animationId = useRef(void 0);
-  const timeOut = useRef(void 0);
-  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
-  const length = children.length;
-  const paddingItemCount = 3;
-  const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
-  const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
-  animationTime = Math.max(200, animationTime);
-  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
-  const getStyleOffset = (index) => {
-    const baseOffset = -50 + (index - currentPosition) * 100;
-    return `${baseOffset}%`;
-  };
-  const animation = useCallback((time) => {
-    let keepAnimating = true;
-    setCarouselInformation((state) => {
-      const {
-        animationState: animationState2,
-        dragState: dragState2
-      } = state;
-      if (animationState2 === void 0 || dragState2 !== void 0) {
-        keepAnimating = false;
-        return state;
-      }
-      if (!animationState2.startTime || !animationState2.lastUpdateTime) {
-        return {
-          ...state,
-          animationState: {
-            ...animationState2,
-            startTime: time,
-            lastUpdateTime: time
-          }
-        };
-      }
-      const useAnimationTime = animationState2.isAutoLooping ? autoLoopAnimationTime : animationTime;
-      const progress = clamp((time - animationState2.startTime) / useAnimationTime);
-      const easedProgress = EaseFunctions.easeInEaseOut(progress);
-      const distance = util.getDistanceDirectional(animationState2.startPosition, animationState2.targetPosition, animationState2.direction);
-      const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState2.direction + animationState2.startPosition);
-      if (animationState2.targetPosition === newPosition || progress === 1) {
-        keepAnimating = false;
-        return {
-          currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),
-          animationState: void 0
-        };
-      }
-      return {
-        currentPosition: newPosition,
-        animationState: {
-          ...animationState2,
-          lastUpdateTime: time
-        }
-      };
-    });
-    if (keepAnimating) {
-      animationId.current = requestAnimationFrame((time1) => animation(time1));
-    }
-  }, [animationTime, autoLoopAnimationTime, util]);
-  useEffect(() => {
-    if (animationState) {
-      animationId.current = requestAnimationFrame(animation);
-    }
-    return () => {
-      if (animationId.current) {
-        cancelAnimationFrame(animationId.current);
-        animationId.current = 0;
-      }
-    };
-  }, [animationState]);
-  const startAutoLoop = () => setCarouselInformation((prevState) => ({
-    ...prevState,
-    dragState: prevState.dragState,
-    animationState: prevState.animationState || prevState.dragState ? prevState.animationState : {
-      startPosition: currentPosition,
-      targetPosition: (currentPosition + 1) % length,
-      direction: 1,
-      // always move forward
-      isAutoLooping: true
-    }
-  }));
-  useEffect(() => {
-    if (!animationId.current && !animationState && !dragState && !timeOut.current) {
-      if (autoLoopingTimeOut > 0) {
-        timeOut.current = setTimeout(() => {
-          startAutoLoop();
-          timeOut.current = void 0;
-        }, autoLoopingTimeOut);
-      } else {
-        startAutoLoop();
-      }
-    }
-  }, [animationState, dragState, animationId.current, timeOut.current]);
-  const startAnimation = (targetPosition) => {
-    if (targetPosition === void 0) {
-      targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition);
-    }
-    if (targetPosition === currentPosition) {
-      return;
-    }
-    const direction = util.getBestDirection(currentPosition, targetPosition);
-    clearTimeout(timeOut.current);
-    timeOut.current = void 0;
-    if (animationId.current) {
-      cancelAnimationFrame(animationId.current);
-      animationId.current = void 0;
-    }
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      dragState: void 0,
-      animationState: {
-        targetPosition,
-        direction,
-        startPosition: currentPosition,
-        isAutoLooping: false
-      },
-      timeOut: void 0
-    }));
-  };
-  const canGoLeft = () => {
-    return isLooping || currentPosition !== 0;
-  };
-  const canGoRight = () => {
-    return isLooping || currentPosition !== length - 1;
-  };
-  const left = () => {
-    if (canGoLeft()) {
-      startAnimation(currentPosition === 0 ? length - 1 : LoopingArrayCalculator.withoutOffset(currentPosition - 1));
-    }
-  };
-  const right = () => {
-    if (canGoRight()) {
-      startAnimation(LoopingArrayCalculator.withoutOffset((currentPosition + 1) % length));
-    }
-  };
-  let items = children.map((item, index) => ({
-    index,
-    item
-  }));
-  if (isLooping) {
-    const before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
-      index,
-      item
-    }));
-    const after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
-      index,
-      item
-    }));
-    items = [
-      ...before,
-      ...items,
-      ...after
-    ];
-  }
-  const onDragStart = (x) => setCarouselInformation((prevState) => ({
-    ...prevState,
-    dragState: {
-      lastX: x,
-      startX: x,
-      startTime: Date.now(),
-      startIndex: currentPosition
-    },
-    animationState: void 0
-    // cancel animation
-  }));
-  const onDrag = (x, width) => {
-    if (!dragState || x === 0) {
-      return;
-    }
-    const offsetUpdate = (dragState.lastX - x) / width;
-    const newPosition = util.getCorrectedPosition(currentPosition + offsetUpdate);
-    setCarouselInformation((prevState) => ({
-      ...prevState,
-      currentPosition: newPosition,
-      dragState: {
-        ...dragState,
-        lastX: x
-      }
-    }));
-  };
-  const onDragEnd = (x, width) => {
-    if (!dragState) {
-      return;
-    }
-    const distance = dragState.startX - x;
-    const relativeDistance = distance / width;
-    const duration = Date.now() - dragState.startTime;
-    const velocity = distance / (Date.now() - dragState.startTime);
-    const isSlide = Math.abs(velocity) > 2 || duration < 200 && (Math.abs(relativeDistance) > 0.2 || Math.abs(distance) > 50);
-    if (isSlide) {
-      if (distance > 0 && canGoRight()) {
-        right();
-        return;
-      } else if (distance < 0 && canGoLeft()) {
-        left();
-        return;
-      }
-    }
-    startAnimation();
-  };
-  const dragHandlers = {
-    draggable: true,
-    onDragStart: (event) => {
-      onDragStart(event.clientX);
-      event.dataTransfer.setDragImage(document.createElement("div"), 0, 0);
-    },
-    onDrag: (event) => onDrag(event.clientX, event.target.getBoundingClientRect().width),
-    onDragEnd: (event) => onDragEnd(event.clientX, event.target.getBoundingClientRect().width),
-    onTouchStart: (event) => onDragStart(event.touches[0].clientX),
-    onTouchMove: (event) => onDrag(event.touches[0].clientX, event.target.getBoundingClientRect().width),
-    onTouchEnd: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width),
-    onTouchCancel: (event) => onDragEnd(event.changedTouches[0].clientX, event.target.getBoundingClientRect().width)
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: "flex-col-2 items-center w-full", children: [
-    /* @__PURE__ */ jsxs2("div", { className: clsx2(`relative w-full overflow-hidden`, heightClassName, className), children: [
-      arrows && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx2(
-          IconButton,
-          {
-            color: "neutral",
-            className: clsx2("absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoLeft() }),
-            disabled: !canGoLeft(),
-            onClick: () => left(),
-            children: /* @__PURE__ */ jsx2(ChevronLeft, { size: 24 })
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          IconButton,
-          {
-            color: "neutral",
-            className: clsx2("absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md", { hidden: !canGoRight() }),
-            disabled: !canGoRight(),
-            onClick: () => right(),
-            children: /* @__PURE__ */ jsx2(ChevronRight, { size: 24 })
-          }
-        )
-      ] }),
-      hintNext ? /* @__PURE__ */ jsxs2("div", { className: clsx2(`flex-row-2 relative h-full`, heightClassName), children: [
-        /* @__PURE__ */ jsx2("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
-          item,
-          index
-        }, listIndex) => /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: clsx2(`absolute left-[50%] h-full overflow-hidden`, widthClassName, { "!cursor-grabbing": !!dragState }),
-            style: { translate: getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0)) },
-            ...dragHandlers,
-            onClick: () => startAnimation(index),
-            children: item
-          },
-          listIndex
-        )) }),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: clsx2(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
-          }
-        ),
-        /* @__PURE__ */ jsx2(
-          "div",
-          {
-            className: clsx2(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx2("div", { className: clsx2("px-16 h-full", { "!cursor-grabbing": !!dragState }), ...dragHandlers, children: children[currentIndex] })
-    ] }),
-    dots && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "flex-row-2 items-center justify-center w-full my-2",
-        children: range(length).map((index) => /* @__PURE__ */ jsx2(
-          "button",
-          {
-            className: clsx2("w-8 min-w-8 h-3 min-h-3 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)
-          },
-          index
-        ))
-      }
-    )
-  ] });
-};
-export {
-  Carousel
-};
-//# sourceMappingURL=Carousel.mjs.map