@helpwave/hightide 0.1.26 → 0.1.28

package/dist/components/layout/Carousel.mjs

@@ -0,0 +1,659 @@
+// src/components/layout/Carousel.tsx
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId,
+  useMemo,
+  useRef,
+  useState as useState3
+} 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/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/localization/LanguageProvider.tsx
+import { createContext, useContext, useEffect, useState as useState2 } from "react";
+
+// src/hooks/useLocalStorage.ts
+import { useCallback, useState } from "react";
+
+// src/localization/util.ts
+var languages = ["en", "de"];
+var languagesLocalNames = {
+  en: "English",
+  de: "Deutsch"
+};
+var DEFAULT_LANGUAGE = "en";
+var LanguageUtil = {
+  languages,
+  DEFAULT_LANGUAGE,
+  languagesLocalNames
+};
+
+// src/localization/LanguageProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var LanguageContext = createContext({
+  language: LanguageUtil.DEFAULT_LANGUAGE,
+  setLanguage: (v) => v
+});
+var useLanguage = () => useContext(LanguageContext);
+
+// src/localization/useTranslation.ts
+var TranslationPluralCount = {
+  zero: 0,
+  one: 1,
+  two: 2,
+  few: 3,
+  many: 11,
+  other: -1
+};
+var useTranslation = (translations, overwriteTranslation = {}) => {
+  const { language: languageProp, translation: overwrite } = overwriteTranslation;
+  const { language: inferredLanguage } = useLanguage();
+  const usedLanguage = languageProp ?? inferredLanguage;
+  const usedTranslations = [...translations];
+  if (overwrite) {
+    usedTranslations.push(overwrite);
+  }
+  return (key, options) => {
+    const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
+    try {
+      for (let i = translations.length - 1; i >= 0; i--) {
+        const translation = translations[i];
+        const localizedTranslation = translation[usedLanguage];
+        if (!localizedTranslation) {
+          continue;
+        }
+        const value = localizedTranslation[key];
+        if (!value) {
+          continue;
+        }
+        let forProcessing;
+        if (typeof value !== "string") {
+          if (count === TranslationPluralCount.zero && value?.zero) {
+            forProcessing = value.zero;
+          } else if (count === TranslationPluralCount.one && value?.one) {
+            forProcessing = value.one;
+          } else if (count === TranslationPluralCount.two && value?.two) {
+            forProcessing = value.two;
+          } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
+            forProcessing = value.few;
+          } else if (count > TranslationPluralCount.many && value?.many) {
+            forProcessing = value.many;
+          } else {
+            forProcessing = value.other;
+          }
+        } else {
+          forProcessing = value;
+        }
+        forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
+          return replacements[placeholder] ?? `{{key:${placeholder}}}`;
+        });
+        return forProcessing;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return `{{${usedLanguage}:${key}}}`;
+  };
+};
+
+// src/components/layout/Carousel.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var CarouselContext = createContext2(null);
+var useCarouselContext = () => {
+  const context = useContext2(CarouselContext);
+  if (!context) {
+    console.error("useCarouselContext must be used within CarouselContext");
+  }
+  return context;
+};
+var defaultCarouselTabTranslationType = {
+  en: {
+    showSlide: `Show Slide {{index}}`,
+    slideNavigation: "Slide navigation"
+  },
+  de: {
+    showSlide: "Zeige Slide {{index}}",
+    slideNavigation: "Slide Navigation"
+  }
+};
+function CarouselTabs({
+  onChange
+}) {
+  const translation = useTranslation([
+    defaultCarouselTabTranslationType
+  ]);
+  const { id, slideCount, currentIndex, isLooping } = useCarouselContext();
+  const tabRefs = useRef([]);
+  const handleKeyDown = (event, index) => {
+    let newIndex = index;
+    if (event.key === "ArrowRight") {
+      newIndex = isLooping ? (index + 1) % slideCount : Math.max(index + 1, slideCount - 1);
+    } else if (event.key === "ArrowLeft") {
+      newIndex = isLooping ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0);
+    } else {
+      return;
+    }
+    event.preventDefault();
+    onChange(newIndex);
+    tabRefs.current[newIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "flex-row-1 items-center justify-center w-full my-2",
+      role: "tablist",
+      "aria-label": translation("slideNavigation"),
+      id: `${id}-tablist`,
+      children: range(slideCount).map((index) => {
+        const isSelected = currentIndex === index;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            id: `${id}-tab-${index}`,
+            ref: (el) => tabRefs.current[index] = el,
+            onClick: () => onChange(index),
+            onKeyDown: (e) => handleKeyDown(e, index),
+            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
+              }
+            ),
+            role: "tab",
+            tabIndex: isSelected ? 0 : -1,
+            "aria-label": translation("showSlide", { replacements: { index: (index + 1).toString() } }),
+            "aria-selected": isSelected,
+            "aria-controls": `slide-${index}`,
+            "aria-disabled": isSelected
+          },
+          index
+        );
+      })
+    }
+  );
+}
+var defaultCarouselSlideTranslationType = {
+  en: {
+    slide: "Slide",
+    slideOf: `Slide {{index}} of {{length}} slides`
+  },
+  de: {
+    slide: "Slide",
+    slideOf: `Slide {{index}} von {{length}} slides`
+  }
+};
+var CarouselSlide = forwardRef2(
+  function CarouselSlide2({
+    index,
+    ...props
+  }, ref) {
+    const translation = useTranslation([defaultCarouselSlideTranslationType]);
+    const { id, currentIndex, slideCount } = useCarouselContext();
+    const isSelected = currentIndex === index;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ...props,
+        ref,
+        id: `${id}-slide-${index}`,
+        className: clsx2("focus-style-none group/slide", props.className),
+        tabIndex: isSelected ? 0 : void 0,
+        role: "group",
+        "aria-roledescription": translation("slide"),
+        "aria-label": translation("slideOf", {
+          replacements: {
+            index: (index + 1).toString(),
+            length: slideCount.toString()
+          }
+        }),
+        "aria-hidden": isSelected ? void 0 : true
+      }
+    );
+  }
+);
+var defaultCarouselTranslationType = {
+  en: {
+    slide: "Slide",
+    carousel: "Carousel",
+    slideOf: `Slide {{index}} of {{length}} slides`,
+    chooseSlide: "Choose slide to display"
+  },
+  de: {
+    slide: "Slide",
+    carousel: "Karussell",
+    slideOf: `Slide {{index}} von {{length}} slides`,
+    chooseSlide: "W\xE4hle die angezeigte Slide aus"
+  }
+};
+var Carousel = ({
+  children,
+  animationTime = 200,
+  isLooping = false,
+  isAutoPlaying = false,
+  autoLoopingTimeOut = 5e3,
+  autoLoopAnimationTime = 1e3,
+  hintNext = false,
+  arrows = false,
+  dots = true,
+  blurColor = "from-background",
+  heightClassName = "h-96",
+  widthClassName = "w-[70%] desktop:w-1/2",
+  slideContainerProps,
+  ...props
+}) => {
+  const translation = useTranslation([defaultCarouselTranslationType]);
+  const slideRefs = useRef([]);
+  const [currentIndex, setCurrentIndex] = useState3(0);
+  const [hasFocus, setHasFocus] = useState3(false);
+  const [dragState, setDragState] = useState3();
+  const isPaused = hasFocus;
+  const carouselContainerRef = useRef(null);
+  const [disableClick, setDisableClick] = useState3(false);
+  const timeOut = useRef(void 0);
+  const length = useMemo(() => children.length, [children]);
+  const paddingItemCount = 3;
+  const generatedId = "carousel" + useId();
+  const id = props.id ?? generatedId;
+  if (isAutoPlaying && !isLooping) {
+    console.error("When isAutoLooping is true, isLooping should also be true");
+    isLooping = true;
+  }
+  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
+  animationTime = Math.max(100, animationTime);
+  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
+  useEffect2(() => {
+    const carousel = carouselContainerRef.current;
+    if (carousel) {
+      let onFocus = function() {
+        setHasFocus(true);
+      }, onBlur = function() {
+        setHasFocus(false);
+      };
+      carousel?.addEventListener("focusin", onFocus);
+      carousel?.addEventListener("focusout", onBlur);
+      return () => {
+        carousel?.removeEventListener("focusin", onFocus);
+        carousel?.removeEventListener("focusin", onFocus);
+      };
+    }
+  }, []);
+  const getStyleOffset = (index) => {
+    const baseOffset = -50 + (index - currentIndex) * 100;
+    return `${baseOffset}%`;
+  };
+  const canGoLeft = () => {
+    return isLooping || currentIndex !== 0;
+  };
+  const canGoRight = useCallback2(() => {
+    return isLooping || currentIndex !== length - 1;
+  }, [currentIndex, isLooping, length]);
+  const left = () => {
+    if (canGoLeft()) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  };
+  const right = useCallback2(() => {
+    if (canGoRight()) {
+      setCurrentIndex((currentIndex + length + 1) % length);
+    }
+  }, [canGoRight, currentIndex, length]);
+  useEffect2(() => {
+    if (!timeOut.current && !isPaused) {
+      if (autoLoopingTimeOut > 0) {
+        timeOut.current = setTimeout(() => {
+          right();
+          timeOut.current = void 0;
+        }, autoLoopingTimeOut);
+      } else {
+        right();
+      }
+    }
+    if ((isPaused || !!dragState) && timeOut.current) {
+      clearTimeout(timeOut.current);
+      timeOut.current = void 0;
+    }
+  }, [right, isPaused, autoLoopingTimeOut, dragState]);
+  let items = children.map((item, index) => ({
+    index,
+    item
+  }));
+  let before = [];
+  let after = [];
+  if (isLooping) {
+    before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
+      index,
+      item
+    }));
+    after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
+      index,
+      item
+    }));
+    items = [...before, ...items, ...after];
+  }
+  const handlePointerDown = (e) => {
+    setDragState({
+      dragOffsetX: 0,
+      dragStartX: e.clientX
+    });
+  };
+  const handlePointerMove = (e) => {
+    if (!dragState) return;
+    setDragState((prevState) => ({ dragStartX: prevState.dragStartX, dragOffsetX: e.clientX - prevState.dragStartX }));
+  };
+  const handlePointerUp = () => {
+    if (!dragState) return;
+    if (dragState.dragOffsetX > 50) {
+      left();
+    } else if (dragState.dragOffsetX < -50) {
+      right();
+    }
+    setDragState(void 0);
+  };
+  useEffect2(() => {
+    setDisableClick(!dragState);
+  }, [dragState]);
+  return /* @__PURE__ */ jsx3(CarouselContext.Provider, { value: { id, currentIndex, slideCount: length, isLooping }, children: /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: carouselContainerRef,
+      ...props,
+      className: clsx2("flex-col-2 items-center w-full", props.className),
+      id,
+      role: "region",
+      "aria-roledescription": translation("slide"),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            ...slideContainerProps,
+            className: clsx2(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className),
+            children: [
+              hintNext ? /* @__PURE__ */ jsxs2(
+                "div",
+                {
+                  onPointerDown: handlePointerDown,
+                  onPointerMove: handlePointerMove,
+                  onPointerUp: handlePointerUp,
+                  onPointerLeave: handlePointerUp,
+                  className: clsx2(`flex-row-2 relative h-full`, heightClassName),
+                  children: [
+                    /* @__PURE__ */ jsx3("div", { className: "flex-row-2 relative h-full w-full px-2 overflow-hidden", children: items.map(({
+                      item,
+                      index
+                    }, listIndex) => {
+                      const isInItems = before.length <= listIndex && listIndex < items.length - after.length;
+                      return /* @__PURE__ */ jsx3(
+                        CarouselSlide,
+                        {
+                          ref: isInItems ? slideRefs[index] : void 0,
+                          index,
+                          className: clsx2(
+                            `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
+                            widthClassName
+                          ),
+                          onClick: () => !disableClick && setCurrentIndex(index),
+                          style: {
+                            translate: `calc(${getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0))} + ${dragState ? dragState.dragOffsetX : 0}px)`,
+                            transitionDuration: dragState ? "0ms" : (isAutoPlaying && !isPaused ? autoLoopAnimationTime : animationTime) + "ms"
+                          },
+                          children: item
+                        },
+                        listIndex
+                      );
+                    }) }),
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: clsx2(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx3(
+                      "div",
+                      {
+                        className: clsx2(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)
+                      }
+                    )
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  ref: slideRefs[currentIndex],
+                  className: clsx2("px-16 h-full"),
+                  tabIndex: 0,
+                  role: "group",
+                  "aria-roledescription": translation("slide"),
+                  "aria-label": translation("slideOf", {
+                    replacements: {
+                      index: (currentIndex + 1).toString(),
+                      length: items.length.toString()
+                    }
+                  }),
+                  children: children[currentIndex]
+                }
+              ),
+              arrows && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx3(
+                  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__ */ jsx3(ChevronLeft, { size: 24 })
+                  }
+                ),
+                /* @__PURE__ */ jsx3(
+                  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__ */ jsx3(ChevronRight, { size: 24 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        dots && /* @__PURE__ */ jsx3(CarouselTabs, { onChange: setCurrentIndex })
+      ]
+    }
+  ) });
+};
+export {
+  Carousel,
+  CarouselSlide,
+  CarouselTabs as default
+};
+//# sourceMappingURL=Carousel.mjs.map