@helpwave/hightide 0.1.24 → 0.1.26

package/dist/components/user-action/MultiSelect.mjs

@@ -1,1410 +0,0 @@
-// src/components/user-action/MultiSelect.tsx
-import { useCallback as useCallback5 } from "react";
-import { useEffect as useEffect10, useState as useState10 } from "react";
-
-// 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 } 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/user-action/MultiSelect.tsx
-import clsx10 from "clsx";
-
-// src/components/user-action/Label.tsx
-import clsx from "clsx";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var styleMapping = {
-  labelSmall: "textstyle-label-sm",
-  labelMedium: "textstyle-label-md",
-  labelBig: "textstyle-label-lg"
-};
-var Label = ({
-  children,
-  name,
-  labelType = "labelSmall",
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx2("label", { ...props, className: clsx(styleMapping[labelType], className), children: children ? children : name });
-};
-
-// src/components/user-action/Button.tsx
-import { forwardRef } from "react";
-import clsx2 from "clsx";
-import { jsx as jsx3, 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,
-  disabled = false,
-  color = "primary",
-  size = "medium",
-  startIcon,
-  endIcon,
-  onClick,
-  className,
-  ...restProps
-}, ref) {
-  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];
-  const iconColorClasses = {
-    primary: "text-button-solid-primary-icon",
-    secondary: "text-button-solid-secondary-icon",
-    tertiary: "text-button-solid-tertiary-icon",
-    positive: "text-button-solid-positive-icon",
-    warning: "text-button-solid-warning-icon",
-    negative: "text-button-solid-negative-icon",
-    neutral: "text-button-solid-neutral-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      ref,
-      onClick,
-      disabled,
-      className: clsx2(
-        "font-semibold",
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled,
-          [clsx2(colorClasses, "hover:brightness-90")]: !disabled
-        },
-        ButtonUtil.paddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children: [
-        startIcon && /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: clsx2({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: startIcon
-          }
-        ),
-        children,
-        endIcon && /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: clsx2({
-              [iconColorClasses]: !disabled,
-              [`text-disabled-icon`]: disabled
-            }),
-            children: endIcon
-          }
-        )
-      ]
-    }
-  );
-});
-var IconButton = ({
-  children,
-  disabled = false,
-  color = "primary",
-  size = "medium",
-  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",
-    transparent: "bg-transparent"
-  }[color];
-  return /* @__PURE__ */ jsx3(
-    "button",
-    {
-      disabled,
-      className: clsx2(
-        {
-          "text-disabled-text bg-disabled-background cursor-not-allowed": disabled && color !== "transparent",
-          "text-disabled-text cursor-not-allowed opacity-70": disabled && color === "transparent",
-          "hover:bg-button-text-hover-background": !disabled && color === "transparent",
-          [clsx2(colorClasses, "hover:brightness-90")]: !disabled
-        },
-        ButtonUtil.iconPaddingMapping[size],
-        className
-      ),
-      ...restProps,
-      children
-    }
-  );
-};
-
-// src/components/layout-and-navigation/Chip.tsx
-import clsx3 from "clsx";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var Chip = ({
-  children,
-  trailingIcon,
-  color = "default",
-  variant = "normal",
-  className = "",
-  ...restProps
-}) => {
-  const colorMapping = {
-    default: "text-tag-default-text bg-tag-default-background",
-    dark: "text-tag-dark-text bg-tag-dark-background",
-    red: "text-tag-red-text bg-tag-red-background",
-    yellow: "text-tag-yellow-text bg-tag-yellow-background",
-    green: "text-tag-green-text bg-tag-green-background",
-    blue: "text-tag-blue-text bg-tag-blue-background",
-    pink: "text-tag-pink-text bg-tag-pink-background"
-  }[color];
-  const colorMappingIcon = {
-    default: "text-tag-default-icon",
-    dark: "text-tag-dark-icon",
-    red: "text-tag-red-icon",
-    yellow: "text-tag-yellow-icon",
-    green: "text-tag-green-icon",
-    blue: "text-tag-blue-icon",
-    pink: "text-tag-pink-icon"
-  }[color];
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      ...restProps,
-      className: clsx3(
-        `row w-fit px-2 py-1 font-semibold`,
-        colorMapping,
-        {
-          "rounded-md": variant === "normal",
-          "rounded-full": variant === "fullyRounded"
-        },
-        className
-      ),
-      children: [
-        children,
-        trailingIcon && /* @__PURE__ */ jsx4("span", { className: colorMappingIcon, children: trailingIcon })
-      ]
-    }
-  );
-};
-var ChipList = ({
-  list,
-  className = ""
-}) => {
-  return /* @__PURE__ */ jsx4("div", { className: clsx3("flex flex-wrap gap-x-2 gap-y-2", className), children: list.map((value, index) => /* @__PURE__ */ jsx4(
-    Chip,
-    {
-      ...value,
-      color: value.color ?? "default",
-      variant: value.variant ?? "normal",
-      children: value.children
-    },
-    index
-  )) });
-};
-
-// src/localization/defaults/form.ts
-var formTranslation = {
-  en: {
-    add: "Add",
-    all: "All",
-    apply: "Apply",
-    back: "Back",
-    cancel: "Cancel",
-    change: "Change",
-    clear: "Clear",
-    click: "Click",
-    clickToCopy: "Click to Copy",
-    close: "Close",
-    confirm: "Confirm",
-    copy: "Copy",
-    copied: "Copied",
-    create: "Create",
-    decline: "Decline",
-    delete: "Delete",
-    discard: "Discard",
-    discardChanges: "Discard Changes",
-    done: "Done",
-    edit: "Edit",
-    enterText: "Enter text here",
-    error: "Error",
-    exit: "Exit",
-    fieldRequiredError: "This field is required.",
-    invalidEmailError: "Please enter a valid email address.",
-    less: "Less",
-    loading: "Loading",
-    maxLengthError: "Maximum length exceeded.",
-    minLengthError: "Minimum length not met.",
-    more: "More",
-    next: "Next",
-    no: "No",
-    none: "None",
-    of: "of",
-    optional: "Optional",
-    pleaseWait: "Please wait...",
-    previous: "Previous",
-    remove: "Remove",
-    required: "Required",
-    reset: "Reset",
-    save: "Save",
-    saved: "Saved",
-    search: "Search",
-    select: "Select",
-    selectOption: "Select an option",
-    show: "Show",
-    showMore: "Show more",
-    showLess: "Show less",
-    submit: "Submit",
-    success: "Success",
-    update: "Update",
-    unsavedChanges: "Unsaved Changes",
-    unsavedChangesSaveQuestion: "Do you want to save your changes?",
-    yes: "Yes"
-  },
-  de: {
-    add: "Hinzuf\xFCgen",
-    all: "Alle",
-    apply: "Anwenden",
-    back: "Zur\xFCck",
-    cancel: "Abbrechen",
-    change: "\xC4ndern",
-    clear: "L\xF6schen",
-    click: "Klicken",
-    clickToCopy: "Zum kopieren klicken",
-    close: "Schlie\xDFen",
-    confirm: "Best\xE4tigen",
-    copy: "Kopieren",
-    copied: "Kopiert",
-    create: "Erstellen",
-    decline: "Ablehnen",
-    delete: "L\xF6schen",
-    discard: "Verwerfen",
-    discardChanges: "\xC4nderungen Verwerfen",
-    done: "Fertig",
-    edit: "Bearbeiten",
-    enterText: "Text hier eingeben",
-    error: "Fehler",
-    exit: "Beenden",
-    fieldRequiredError: "Dieses Feld ist erforderlich.",
-    invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
-    less: "Weniger",
-    loading: "L\xE4dt",
-    maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
-    minLengthError: "Mindestl\xE4nge nicht erreicht.",
-    more: "Mehr",
-    next: "Weiter",
-    no: "Nein",
-    none: "Nichts",
-    of: "von",
-    optional: "Optional",
-    pleaseWait: "Bitte warten...",
-    previous: "Vorherige",
-    remove: "Entfernen",
-    required: "Erforderlich",
-    reset: "Zur\xFCcksetzen",
-    save: "Speichern",
-    saved: "Gespeichert",
-    search: "Suche",
-    select: "Select",
-    selectOption: "Option ausw\xE4hlen",
-    show: "Anzeigen",
-    showMore: "Mehr anzeigen",
-    showLess: "Weniger anzeigen",
-    submit: "Abschicken",
-    success: "Erfolg",
-    update: "Update",
-    unsavedChanges: "Ungespeicherte \xC4nderungen",
-    unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
-    yes: "Ja"
-  }
-};
-
-// src/components/user-action/Menu.tsx
-import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
-import clsx4 from "clsx";
-
-// src/hooks/useOutsideClick.ts
-import { useEffect as useEffect2 } from "react";
-var useOutsideClick = (refs, handler) => {
-  useEffect2(() => {
-    const listener = (event) => {
-      if (event.target === null) return;
-      if (refs.some((ref) => !ref.current || ref.current.contains(event.target))) {
-        return;
-      }
-      handler();
-    };
-    document.addEventListener("mousedown", listener);
-    document.addEventListener("touchstart", listener);
-    return () => {
-      document.removeEventListener("mousedown", listener);
-      document.removeEventListener("touchstart", listener);
-    };
-  }, [refs, handler]);
-};
-
-// src/hooks/useHoverState.ts
-import { useEffect as useEffect3, useState as useState3 } from "react";
-var defaultUseHoverStateProps = {
-  closingDelay: 200,
-  isDisabled: false
-};
-var useHoverState = (props = void 0) => {
-  const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props };
-  const [isHovered, setIsHovered] = useState3(false);
-  const [timer, setTimer] = useState3();
-  const onMouseEnter = () => {
-    if (isDisabled) {
-      return;
-    }
-    clearTimeout(timer);
-    setIsHovered(true);
-  };
-  const onMouseLeave = () => {
-    if (isDisabled) {
-      return;
-    }
-    setTimer(setTimeout(() => {
-      setIsHovered(false);
-    }, closingDelay));
-  };
-  useEffect3(() => {
-    if (timer) {
-      return () => {
-        clearTimeout(timer);
-      };
-    }
-  });
-  useEffect3(() => {
-    if (timer) {
-      clearTimeout(timer);
-    }
-  }, [isDisabled]);
-  return {
-    isHovered,
-    setIsHovered,
-    handlers: { onMouseEnter, onMouseLeave }
-  };
-};
-
-// src/util/PropsWithFunctionChildren.ts
-var resolve = (children, bag) => {
-  if (typeof children === "function") {
-    return children(bag);
-  }
-  return children ?? void 0;
-};
-var BagFunctionUtil = {
-  resolve
-};
-
-// src/hooks/usePopoverPosition.ts
-var defaultPopoverPositionOptions = {
-  edgePadding: 16,
-  outerGap: 4,
-  horizontalAlignment: "leftInside",
-  verticalAlignment: "bottomOutside",
-  disabled: false
-};
-var usePopoverPosition = (trigger, options) => {
-  const {
-    edgePadding,
-    outerGap,
-    verticalAlignment,
-    horizontalAlignment,
-    disabled
-  } = { ...defaultPopoverPositionOptions, ...options };
-  if (disabled || !trigger) {
-    return {};
-  }
-  const left = {
-    leftOutside: trigger.left - outerGap,
-    leftInside: trigger.left,
-    rightOutside: trigger.right + outerGap,
-    rightInside: trigger.right,
-    center: trigger.left + trigger.width / 2
-  }[horizontalAlignment];
-  const top = {
-    topOutside: trigger.top - outerGap,
-    topInside: trigger.top,
-    bottomOutside: trigger.bottom + outerGap,
-    bottomInside: trigger.bottom,
-    center: trigger.top + trigger.height / 2
-  }[verticalAlignment];
-  const translateX = {
-    leftOutside: "-100%",
-    leftInside: void 0,
-    rightOutside: void 0,
-    rightInside: "-100%",
-    center: "-50%"
-  }[horizontalAlignment];
-  const translateY = {
-    topOutside: "-100%",
-    topInside: void 0,
-    bottomOutside: void 0,
-    bottomInside: "-100%",
-    center: "-50%"
-  }[verticalAlignment];
-  return {
-    left: Math.max(left, edgePadding),
-    top: Math.max(top, edgePadding),
-    translate: [translateX ?? "0", translateY ?? "0"].join(" ")
-  };
-};
-
-// src/components/user-action/Menu.tsx
-import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function getScrollableParents(element) {
-  const scrollables = [];
-  let parent = element.parentElement;
-  while (parent) {
-    scrollables.push(parent);
-    parent = parent.parentElement;
-  }
-  return scrollables;
-}
-var Menu = ({
-  trigger,
-  children,
-  alignmentHorizontal = "leftInside",
-  alignmentVertical = "bottomOutside",
-  showOnHover = false,
-  disabled = false,
-  menuClassName = ""
-}) => {
-  const { isHovered: isOpen, setIsHovered: setIsOpen } = useHoverState({ isDisabled: !showOnHover || disabled });
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
-  useOutsideClick([triggerRef, menuRef], () => setIsOpen(false));
-  const [isHidden, setIsHidden] = useState4(true);
-  const bag = {
-    isOpen,
-    close: () => setIsOpen(false),
-    toggleOpen: () => setIsOpen((prevState) => !prevState),
-    disabled
-  };
-  const menuPosition = usePopoverPosition(
-    triggerRef.current?.getBoundingClientRect(),
-    { verticalAlignment: alignmentVertical, horizontalAlignment: alignmentHorizontal, disabled }
-  );
-  useEffect4(() => {
-    if (!isOpen) return;
-    const triggerEl = triggerRef.current;
-    if (!triggerEl) return;
-    const scrollableParents = getScrollableParents(triggerEl);
-    const close = () => setIsOpen(false);
-    scrollableParents.forEach((parent) => {
-      parent.addEventListener("scroll", close);
-    });
-    window.addEventListener("resize", close);
-    return () => {
-      scrollableParents.forEach((parent) => {
-        parent.removeEventListener("scroll", close);
-      });
-      window.removeEventListener("resize", close);
-    };
-  }, [isOpen, setIsOpen]);
-  useEffect4(() => {
-    if (isOpen) {
-      setIsHidden(false);
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    trigger(bag, triggerRef),
-    createPortal(/* @__PURE__ */ jsx5(
-      "div",
-      {
-        ref: menuRef,
-        onClick: (e) => e.stopPropagation(),
-        className: clsx4(
-          "absolute rounded-md bg-menu-background text-menu-text shadow-around-lg shadow-strong z-[300]",
-          {
-            "animate-pop-in": isOpen,
-            "animate-pop-out": !isOpen,
-            "hidden": isHidden
-          },
-          menuClassName
-        ),
-        onAnimationEnd: () => {
-          if (!isOpen) {
-            setIsHidden(true);
-          }
-        },
-        style: {
-          ...menuPosition
-        },
-        children: BagFunctionUtil.resolve(children, bag)
-      }
-    ), document.body)
-  ] });
-};
-
-// src/components/layout-and-navigation/Expandable.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback2, useEffect as useEffect5, useState as useState5 } from "react";
-import { ChevronDown } from "lucide-react";
-import clsx5 from "clsx";
-
-// src/util/noop.ts
-var noop = () => void 0;
-
-// src/components/layout-and-navigation/Expandable.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var ExpansionIcon = ({ isExpanded, className }) => {
-  return /* @__PURE__ */ jsx6(
-    ChevronDown,
-    {
-      className: clsx5(
-        "min-w-6 w-6 min-h-6 h-6 transition-transform duration-200 ease-in-out",
-        { "rotate-180": isExpanded },
-        className
-      )
-    }
-  );
-};
-var Expandable = forwardRef2(function Expandable2({
-  children,
-  label,
-  icon,
-  isExpanded = false,
-  onChange = noop,
-  clickOnlyOnHeader = true,
-  disabled = false,
-  className,
-  headerClassName,
-  contentClassName,
-  contentExpandedClassName
-}, ref) {
-  const defaultIcon = useCallback2((expanded) => /* @__PURE__ */ jsx6(ExpansionIcon, { isExpanded: expanded }), []);
-  icon ??= defaultIcon;
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ref,
-      className: clsx5("flex-col-0 bg-surface text-on-surface group rounded-lg shadow-sm", { "cursor-pointer": !clickOnlyOnHeader && !disabled }, className),
-      onClick: () => !clickOnlyOnHeader && !disabled && onChange(!isExpanded),
-      children: [
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            className: clsx5(
-              "flex-row-2 py-2 px-4 rounded-lg justify-between items-center bg-surface text-on-surface select-none",
-              {
-                "group-hover:brightness-97": !isExpanded,
-                "hover:brightness-97": isExpanded && !disabled,
-                "cursor-pointer": clickOnlyOnHeader && !disabled
-              },
-              headerClassName
-            ),
-            onClick: () => clickOnlyOnHeader && !disabled && onChange(!isExpanded),
-            children: [
-              label,
-              icon(isExpanded)
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx6(
-          "div",
-          {
-            className: clsx5(
-              "flex-col-2 px-4 transition-all duration-300 ease-in-out",
-              {
-                [clsx5("max-h-96 opacity-100 pb-2 overflow-y-auto", contentExpandedClassName)]: isExpanded,
-                "max-h-0 opacity-0 overflow-hidden": !isExpanded
-              },
-              contentClassName
-            ),
-            children
-          }
-        )
-      ]
-    }
-  );
-});
-var ExpandableUncontrolled = forwardRef2(function ExpandableUncontrolled2({
-  isExpanded,
-  onChange = noop,
-  ...props
-}, ref) {
-  const [usedIsExpanded, setUsedIsExpanded] = useState5(isExpanded);
-  useEffect5(() => {
-    setUsedIsExpanded(isExpanded);
-  }, [isExpanded]);
-  return /* @__PURE__ */ jsx6(
-    Expandable,
-    {
-      ...props,
-      ref,
-      isExpanded: usedIsExpanded,
-      onChange: (value) => {
-        onChange(value);
-        setUsedIsExpanded(value);
-      }
-    }
-  );
-});
-
-// src/components/user-action/Input.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect8, useImperativeHandle, useRef as useRef2, useState as useState7 } from "react";
-import clsx6 from "clsx";
-
-// src/hooks/useDelay.ts
-import { useEffect as useEffect6, useState as useState6 } from "react";
-var defaultOptions = {
-  delay: 3e3,
-  disabled: false
-};
-function useDelay(options) {
-  const [timer, setTimer] = useState6(void 0);
-  const { delay, disabled } = {
-    ...defaultOptions,
-    ...options
-  };
-  const clearTimer = () => {
-    clearTimeout(timer);
-    setTimer(void 0);
-  };
-  const restartTimer = (onDelayFinish) => {
-    if (disabled) {
-      return;
-    }
-    clearTimeout(timer);
-    setTimer(setTimeout(() => {
-      onDelayFinish();
-      setTimer(void 0);
-    }, delay));
-  };
-  useEffect6(() => {
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [timer]);
-  useEffect6(() => {
-    if (disabled) {
-      clearTimeout(timer);
-      setTimer(void 0);
-    }
-  }, [disabled, timer]);
-  return { restartTimer, clearTimer, hasActiveTimer: !!timer };
-}
-
-// src/hooks/useFocusManagement.ts
-import { useCallback as useCallback3 } from "react";
-function useFocusManagement() {
-  const getFocusableElements = useCallback3(() => {
-    return Array.from(
-      document.querySelectorAll(
-        'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])'
-      )
-    ).filter(
-      (el) => el instanceof HTMLElement && !el.hasAttribute("disabled") && !el.hasAttribute("hidden") && el.tabIndex !== -1
-    );
-  }, []);
-  const getNextFocusElement = useCallback3(() => {
-    const elements = getFocusableElements();
-    if (elements.length === 0) {
-      return void 0;
-    }
-    let nextElement = elements[0];
-    if (document.activeElement instanceof HTMLElement) {
-      const currentIndex = elements.indexOf(document.activeElement);
-      nextElement = elements[(currentIndex + 1) % elements.length];
-    }
-    return nextElement;
-  }, [getFocusableElements]);
-  const focusNext = useCallback3(() => {
-    const nextElement = getNextFocusElement();
-    nextElement?.focus();
-  }, [getNextFocusElement]);
-  const getPreviousFocusElement = useCallback3(() => {
-    const elements = getFocusableElements();
-    if (elements.length === 0) {
-      return void 0;
-    }
-    let previousElement = elements[0];
-    if (document.activeElement instanceof HTMLElement) {
-      const currentIndex = elements.indexOf(document.activeElement);
-      if (currentIndex === 0) {
-        previousElement = elements[elements.length - 1];
-      } else {
-        previousElement = elements[currentIndex - 1];
-      }
-    }
-    return previousElement;
-  }, [getFocusableElements]);
-  const focusPrevious = useCallback3(() => {
-    const previousElement = getPreviousFocusElement();
-    if (previousElement) previousElement.focus();
-  }, [getPreviousFocusElement]);
-  return {
-    getFocusableElements,
-    getNextFocusElement,
-    getPreviousFocusElement,
-    focusNext,
-    focusPrevious
-  };
-}
-
-// src/hooks/useFocusOnceVisible.ts
-import React, { useEffect as useEffect7 } from "react";
-var useFocusOnceVisible = (ref, disable = false) => {
-  const [hasUsedFocus, setHasUsedFocus] = React.useState(false);
-  useEffect7(() => {
-    if (disable || hasUsedFocus) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      if (entry.isIntersecting && !hasUsedFocus) {
-        ref.current?.focus();
-        setHasUsedFocus(hasUsedFocus);
-      }
-    }, {
-      threshold: 0.1
-    });
-    if (ref.current) {
-      observer.observe(ref.current);
-    }
-    return () => observer.disconnect();
-  }, [disable, hasUsedFocus, ref]);
-};
-
-// src/components/user-action/Input.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var getInputClassName = ({ disabled = false, hasError = false }) => {
-  return clsx6(
-    "px-2 py-1.5 rounded-md border-2",
-    {
-      "bg-input-background text-input-text hover:border-primary focus:border-primary": !disabled && !hasError,
-      "bg-on-negative text-negative border-negative-border hover:border-negative-border-hover": !disabled && hasError,
-      "bg-disabled-background text-disabled-text border-disabled-border": disabled
-    }
-  );
-};
-var defaultEditCompleteOptions = {
-  onBlur: true,
-  afterDelay: true,
-  delay: 2500
-};
-var Input = forwardRef3(function Input2({
-  id,
-  type = "text",
-  value,
-  label,
-  onChange = noop,
-  onChangeText = noop,
-  onEditCompleted,
-  className = "",
-  allowEnterComplete = true,
-  expanded = true,
-  autoFocus = false,
-  onBlur,
-  editCompleteOptions,
-  containerClassName,
-  disabled,
-  ...restProps
-}, forwardedRef) {
-  const { onBlur: allowEditCompleteOnBlur, afterDelay, delay } = { ...defaultEditCompleteOptions, ...editCompleteOptions };
-  const {
-    restartTimer,
-    clearTimer
-  } = useDelay({ delay, disabled: !afterDelay });
-  const innerRef = useRef2(null);
-  const { focusNext } = useFocusManagement();
-  useFocusOnceVisible(innerRef, !autoFocus);
-  useImperativeHandle(forwardedRef, () => innerRef.current);
-  const handleKeyDown = (e) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      innerRef.current?.blur();
-      focusNext();
-    }
-  };
-  return /* @__PURE__ */ jsxs5("div", { className: clsx6({ "w-full": expanded }, containerClassName), children: [
-    label && /* @__PURE__ */ jsx7(Label, { ...label, htmlFor: id, className: clsx6("mb-1", label.className) }),
-    /* @__PURE__ */ jsx7(
-      "input",
-      {
-        ...restProps,
-        ref: innerRef,
-        value,
-        id,
-        type,
-        disabled,
-        className: clsx6(getInputClassName({ disabled }), className),
-        onKeyDown: allowEnterComplete ? handleKeyDown : void 0,
-        onBlur: (event) => {
-          onBlur?.(event);
-          if (onEditCompleted && allowEditCompleteOnBlur) {
-            onEditCompleted(event.target.value);
-            clearTimer();
-          }
-        },
-        onChange: (e) => {
-          const value2 = e.target.value;
-          if (onEditCompleted) {
-            restartTimer(() => {
-              if (innerRef.current) {
-                innerRef.current.blur();
-                if (!allowEditCompleteOnBlur) {
-                  onEditCompleted(value2);
-                }
-              } else {
-                onEditCompleted(value2);
-              }
-            });
-          }
-          onChange(e);
-          onChangeText(value2);
-        }
-      }
-    )
-  ] });
-});
-var FormInput = forwardRef3(function FormInput2({
-  id,
-  labelText,
-  errorText,
-  className,
-  labelClassName,
-  errorClassName,
-  containerClassName,
-  required,
-  disabled,
-  ...restProps
-}, ref) {
-  const input = /* @__PURE__ */ jsx7(
-    "input",
-    {
-      ...restProps,
-      ref,
-      id,
-      disabled,
-      className: clsx6(
-        getInputClassName({ disabled, hasError: !!errorText }),
-        className
-      )
-    }
-  );
-  return /* @__PURE__ */ jsxs5("div", { className: clsx6("flex flex-col gap-y-1", containerClassName), children: [
-    labelText && /* @__PURE__ */ jsxs5("label", { htmlFor: id, className: clsx6("textstyle-label-md", labelClassName), children: [
-      labelText,
-      required && /* @__PURE__ */ jsx7("span", { className: "text-primary font-bold", children: "*" })
-    ] }),
-    input,
-    errorText && /* @__PURE__ */ jsx7("label", { htmlFor: id, className: clsx6("text-negative", errorClassName), children: errorText })
-  ] });
-});
-
-// src/components/user-action/SearchBar.tsx
-import { Search } from "lucide-react";
-import { clsx as clsx7 } from "clsx";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-var SearchBar = ({
-  placeholder,
-  onSearch,
-  disableOnSearch,
-  containerClassName,
-  ...inputProps
-}) => {
-  const translation = useTranslation([formTranslation]);
-  return /* @__PURE__ */ jsxs6("div", { className: clsx7("flex-row-2 justify-between items-center", containerClassName), children: [
-    /* @__PURE__ */ jsx8(
-      Input,
-      {
-        ...inputProps,
-        placeholder: placeholder ?? translation("search")
-      }
-    ),
-    onSearch && /* @__PURE__ */ jsx8(IconButton, { color: "neutral", disabled: disableOnSearch, onClick: onSearch, children: /* @__PURE__ */ jsx8(Search, { className: "w-full h-full" }) })
-  ] });
-};
-
-// src/hooks/useSearch.ts
-import { useCallback as useCallback4, useEffect as useEffect9, useMemo, useState as useState8 } from "react";
-
-// src/util/simpleSearch.ts
-var MultiSubjectSearchWithMapping = (search, objects, mapping) => {
-  return objects.filter((object) => {
-    const mappedSearchKeywords = mapping(object)?.map((value) => value.toLowerCase().trim());
-    if (!mappedSearchKeywords) {
-      return true;
-    }
-    return search.every((searchValue) => !!mappedSearchKeywords.find((value) => !!value && value.includes(searchValue.toLowerCase().trim())));
-  });
-};
-
-// src/hooks/useSearch.ts
-var useSearch = ({
-  list,
-  initialSearch,
-  searchMapping,
-  additionalSearchTags,
-  isSearchInstant = true,
-  sortingFunction,
-  filter,
-  disabled = false
-}) => {
-  const [search, setSearch] = useState8(initialSearch ?? "");
-  const [result, setResult] = useState8(list);
-  const searchTags = useMemo(() => additionalSearchTags ?? [], [additionalSearchTags]);
-  const updateSearch = useCallback4((newSearch) => {
-    const usedSearch = newSearch ?? search;
-    if (newSearch) {
-      setSearch(search);
-    }
-    setResult(MultiSubjectSearchWithMapping([usedSearch, ...searchTags], list, searchMapping));
-  }, [searchTags, list, search, searchMapping]);
-  useEffect9(() => {
-    if (isSearchInstant) {
-      setResult(MultiSubjectSearchWithMapping([search, ...searchTags], list, searchMapping));
-    }
-  }, [searchTags, isSearchInstant, list, search, searchMapping, additionalSearchTags]);
-  const filteredResult = useMemo(() => {
-    if (!filter) {
-      return result;
-    }
-    return result.filter(filter);
-  }, [result, filter]);
-  const sortedAndFilteredResult = useMemo(() => {
-    if (!sortingFunction) {
-      return filteredResult;
-    }
-    return filteredResult.sort(sortingFunction);
-  }, [filteredResult, sortingFunction]);
-  const usedResult = useMemo(() => {
-    if (!disabled) {
-      return sortedAndFilteredResult;
-    }
-    return list;
-  }, [disabled, list, sortedAndFilteredResult]);
-  return {
-    result: usedResult,
-    hasResult: usedResult.length > 0,
-    allItems: list,
-    updateSearch,
-    search,
-    setSearch
-  };
-};
-
-// src/components/user-action/Checkbox.tsx
-import { useState as useState9 } from "react";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { Check, Minus } from "lucide-react";
-import clsx8 from "clsx";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var checkboxSizeMapping = {
-  small: "size-5",
-  medium: "size-6",
-  large: "size-8"
-};
-var checkboxIconSizeMapping = {
-  small: "size-4",
-  medium: "size-5",
-  large: "size-7"
-};
-var Checkbox = ({
-  id,
-  label,
-  checked,
-  disabled,
-  onChange,
-  onChangeTristate,
-  size = "medium",
-  className = "",
-  containerClassName
-}) => {
-  const usedSizeClass = checkboxSizeMapping[size];
-  const innerIconSize = checkboxIconSizeMapping[size];
-  const propagateChange = (checked2) => {
-    if (onChangeTristate) {
-      onChangeTristate(checked2);
-    }
-    if (onChange) {
-      onChange(checked2 === "indeterminate" ? false : checked2);
-    }
-  };
-  const changeValue = () => {
-    const newValue = checked === "indeterminate" ? false : !checked;
-    propagateChange(newValue);
-  };
-  return /* @__PURE__ */ jsxs7("div", { className: clsx8("group flex-row-2 items-center cursor-pointer", containerClassName), onClick: changeValue, children: [
-    /* @__PURE__ */ jsx9(
-      CheckboxPrimitive.Root,
-      {
-        onCheckedChange: propagateChange,
-        checked,
-        disabled,
-        id,
-        className: clsx8(usedSizeClass, `items-center border-2 rounded outline-none `, {
-          "text-disabled-text border-disabled-outline bg-disabled-background cursor-not-allowed": disabled,
-          "focus:border-primary group-hover:border-primary ": !disabled,
-          "bg-input-background": !disabled && !checked,
-          "bg-primary/30 border-primary text-primary": !disabled && checked === true || checked === "indeterminate"
-        }, className),
-        children: /* @__PURE__ */ jsxs7(CheckboxPrimitive.Indicator, { children: [
-          checked === true && /* @__PURE__ */ jsx9(Check, { className: innerIconSize }),
-          checked === "indeterminate" && /* @__PURE__ */ jsx9(Minus, { className: innerIconSize })
-        ] })
-      }
-    ),
-    label && /* @__PURE__ */ jsx9(Label, { ...label, className: clsx8(label.className), htmlFor: id })
-  ] });
-};
-
-// src/components/user-action/MultiSelect.tsx
-import { Plus } from "lucide-react";
-
-// src/components/layout-and-navigation/Tile.tsx
-import clsx9 from "clsx";
-import { Check as Check2 } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-var Tile = ({
-  title,
-  titleClassName,
-  description,
-  descriptionClassName,
-  onClick,
-  isSelected = false,
-  disabled = false,
-  prefix,
-  suffix,
-  normalClassName = "hover:bg-primary/40 cursor-pointer",
-  selectedClassName = "bg-primary/20",
-  disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
-  className
-}) => {
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: clsx9(
-        "flex-row-2 w-full items-center",
-        {
-          [normalClassName]: onClick && !disabled,
-          [selectedClassName]: isSelected && !disabled,
-          [disabledClassName]: disabled
-        },
-        className
-      ),
-      onClick: disabled ? void 0 : onClick,
-      children: [
-        prefix,
-        /* @__PURE__ */ jsxs8("div", { className: "flex-col-0 w-full", children: [
-          /* @__PURE__ */ jsx10("span", { className: clsx9(titleClassName ?? "textstyle-title-normal"), children: title }),
-          !!description && /* @__PURE__ */ jsx10("span", { className: clsx9(descriptionClassName ?? "textstyle-description"), children: description })
-        ] }),
-        suffix ?? (isSelected ? /* @__PURE__ */ jsx10(Check2, { size: 24 }) : void 0)
-      ]
-    }
-  );
-};
-var ListTile = ({
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx10(
-    Tile,
-    {
-      ...props,
-      titleClassName: props.titleClassName ?? "font-semibold",
-      className: clsx9("px-2 py-1 rounded-md", props.className),
-      disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
-    }
-  );
-};
-
-// src/components/user-action/MultiSelect.tsx
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var defaultMultiSelectTranslation = {
-  en: {
-    selected: `{{amount}} selected`
-  },
-  de: {
-    selected: `{{amount}} ausgew\xE4hlt`
-  }
-};
-var MultiSelect = ({
-  overwriteTranslation,
-  label,
-  options,
-  onChange,
-  hintText,
-  selectedDisplayOverwrite,
-  searchOptions,
-  additionalItems,
-  useChipDisplay = false,
-  className,
-  triggerClassName,
-  hintTextClassName,
-  ...menuProps
-}) => {
-  const translation = useTranslation([formTranslation, defaultMultiSelectTranslation], overwriteTranslation);
-  const { result, search, setSearch } = useSearch({
-    list: options,
-    searchMapping: useCallback5((item) => item.searchTags, []),
-    ...searchOptions
-  });
-  const selectedItems = options.filter((value) => value.selected);
-  const isShowingHint = !selectedDisplayOverwrite && selectedItems.length === 0;
-  return /* @__PURE__ */ jsxs9("div", { className: clsx10(className), children: [
-    label && /* @__PURE__ */ jsx11(
-      Label,
-      {
-        ...label,
-        htmlFor: label.name,
-        className: clsx10(" mb-1", label.className),
-        labelType: label.labelType ?? "labelBig"
-      }
-    ),
-    /* @__PURE__ */ jsx11(
-      Menu,
-      {
-        ...menuProps,
-        trigger: ({ toggleOpen, isOpen, disabled }, ref) => /* @__PURE__ */ jsx11(
-          "button",
-          {
-            ref,
-            className: clsx10(
-              "group btn-md justify-between w-full border-2 h-auto",
-              {
-                "min-h-14": useChipDisplay,
-                "bg-input-background text-input-text hover:border-primary": !disabled,
-                "bg-disabled-background text-disabled-text border-disabled-background cursor-not-allowed": disabled
-              },
-              triggerClassName
-            ),
-            onClick: toggleOpen,
-            disabled,
-            children: useChipDisplay ? /* @__PURE__ */ jsx11(Fragment2, { children: isShowingHint ? /* @__PURE__ */ jsx11(
-              "div",
-              {
-                className: clsx10(
-                  "icon-btn-sm ",
-                  {
-                    "bg-button-solid-neutral-background text-button-solid-neutral-text hover:brightness-90 group-hover:brightness-90": !disabled,
-                    "bg-disabled-background text-disabled-text": disabled
-                  }
-                ),
-                children: /* @__PURE__ */ jsx11(Plus, {})
-              }
-            ) : /* @__PURE__ */ jsx11(ChipList, { list: selectedItems.map((value) => ({ children: value.label })) }) }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
-              !isShowingHint && /* @__PURE__ */ jsx11("span", { className: "font-semibold", children: selectedDisplayOverwrite ?? translation("selected", { replacements: { amount: selectedItems.length.toString() } }) }),
-              isShowingHint && /* @__PURE__ */ jsx11("span", { className: clsx10("textstyle-description", hintTextClassName), children: hintText ?? translation("select") }),
-              /* @__PURE__ */ jsx11(ExpansionIcon, { isExpanded: isOpen })
-            ] })
-          }
-        ),
-        menuClassName: clsx10("flex-col-2 p-2 max-h-96 overflow-hidden", menuProps.menuClassName),
-        children: (bag) => {
-          const { close } = bag;
-          return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-            !searchOptions?.disabled && /* @__PURE__ */ jsx11(
-              SearchBar,
-              {
-                value: search,
-                onChangeText: setSearch,
-                autoFocus: true
-              }
-            ),
-            /* @__PURE__ */ jsxs9("div", { className: "flex-col-2 overflow-y-auto", children: [
-              result.map((option, index) => {
-                const update = () => {
-                  onChange(options.map((value) => value.value === option.value ? {
-                    ...option,
-                    selected: !value.selected
-                  } : value));
-                };
-                return /* @__PURE__ */ jsx11(
-                  ListTile,
-                  {
-                    prefix: /* @__PURE__ */ jsx11(
-                      Checkbox,
-                      {
-                        checked: option.selected,
-                        onChange: update,
-                        size: "small",
-                        disabled: option.disabled
-                      }
-                    ),
-                    title: option.label,
-                    onClick: update,
-                    disabled: option.disabled
-                  },
-                  index
-                );
-              }),
-              additionalItems && additionalItems({ ...bag, search })
-            ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex-row-2 justify-between", children: [
-              /* @__PURE__ */ jsxs9("div", { className: "flex-row-2", children: [
-                /* @__PURE__ */ jsx11(
-                  SolidButton,
-                  {
-                    color: "neutral",
-                    size: "small",
-                    onClick: () => {
-                      onChange(options.map((option) => ({
-                        ...option,
-                        selected: !option.disabled
-                      })));
-                    },
-                    disabled: options.every((value) => value.selected || value.disabled),
-                    children: translation("all")
-                  }
-                ),
-                /* @__PURE__ */ jsx11(
-                  SolidButton,
-                  {
-                    color: "neutral",
-                    size: "small",
-                    onClick: () => {
-                      onChange(options.map((option) => ({
-                        ...option,
-                        selected: false
-                      })));
-                    },
-                    children: translation("none")
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx11(SolidButton, { size: "small", onClick: close, children: "Done" })
-            ] })
-          ] });
-        }
-      }
-    )
-  ] });
-};
-var MultiSelectUncontrolled = ({
-  options,
-  onChange,
-  ...props
-}) => {
-  const [usedOptions, setUsedOptions] = useState10(options);
-  useEffect10(() => {
-    setUsedOptions(options);
-  }, [options]);
-  return /* @__PURE__ */ jsx11(
-    MultiSelect,
-    {
-      ...props,
-      options: usedOptions,
-      onChange: (options2) => {
-        setUsedOptions(options2);
-        onChange(options2);
-      }
-    }
-  );
-};
-export {
-  MultiSelect,
-  MultiSelectUncontrolled
-};
-//# sourceMappingURL=MultiSelect.mjs.map