@helpwave/hightide 0.0.9 → 0.0.12

package/dist/components/layout/Carousel.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { createLoopingListWithIndex, range } from '../../util/array';
+import { clamp } from '../../util/math';
+import { EaseFunctions } from '../../util/easeFunctions';
+import { LoopingArrayCalculator } from '../../util/loopingArray';
+export const Carousel = ({ children, animationTime = 200, isLooping = false, isAutoLooping = false, autoLoopingTimeOut = 5000, autoLoopAnimationTime = 500, hintNext = false, arrows = false, dots = true, overScrollThreshold = 0.1, blurColor = 'from-white', className = '', heightClassName = 'h-[24rem]', 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(undefined);
+    const timeOut = useRef(undefined);
+    autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut);
+    const length = children.length;
+    const paddingItemCount = 3; // The number of items to append left and right of the list to allow for clean transition when looping
+    const util = useMemo(() => new LoopingArrayCalculator(length, isLooping, overScrollThreshold), [length, isLooping, overScrollThreshold]);
+    const currentIndex = util.getCorrectedPosition(LoopingArrayCalculator.withoutOffset(currentPosition));
+    animationTime = Math.max(200, animationTime); // in ms, must be > 0
+    autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime);
+    const getStyleOffset = (index) => {
+        const baseOffset = -50 + (index - currentPosition) * 100;
+        return `${baseOffset}%`;
+    };
+    const animation = useCallback((time) => {
+        let keepAnimating = true;
+        // Other calculation in the setState call to avoid updating the useCallback to often
+        setCarouselInformation((state) => {
+            const { animationState, dragState } = state;
+            if (animationState === undefined || dragState !== undefined) {
+                keepAnimating = false;
+                return state;
+            }
+            if (!animationState.startTime || !animationState.lastUpdateTime) {
+                return {
+                    ...state,
+                    animationState: {
+                        ...animationState,
+                        startTime: time,
+                        lastUpdateTime: time
+                    }
+                };
+            }
+            const useAnimationTime = animationState.isAutoLooping ? autoLoopAnimationTime : animationTime;
+            const progress = clamp((time - animationState.startTime) / useAnimationTime); // progress
+            const easedProgress = EaseFunctions.easeInEaseOut(progress);
+            const distance = util.getDistanceDirectional(animationState.startPosition, animationState.targetPosition, animationState.direction);
+            const newPosition = util.getCorrectedPosition(easedProgress * distance * animationState.direction + animationState.startPosition);
+            if (animationState.targetPosition === newPosition || progress === 1) {
+                keepAnimating = false;
+                return ({
+                    currentPosition: LoopingArrayCalculator.withoutOffset(newPosition),
+                    animationState: undefined
+                });
+            }
+            return ({
+                currentPosition: newPosition,
+                animationState: {
+                    ...animationState,
+                    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]); // eslint-disable-line react-hooks/exhaustive-deps
+    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 = undefined;
+                }, autoLoopingTimeOut);
+            }
+            else {
+                startAutoLoop();
+            }
+        }
+    }, [animationState, dragState, animationId.current, timeOut.current]); // eslint-disable-line react-hooks/exhaustive-deps
+    const startAnimation = (targetPosition) => {
+        if (targetPosition === undefined) {
+            targetPosition = LoopingArrayCalculator.withoutOffset(currentPosition);
+        }
+        if (targetPosition === currentPosition) {
+            return; // we are exactly where we want to be
+        }
+        // find target index and fastest path to it
+        const direction = util.getBestDirection(currentPosition, targetPosition);
+        clearTimeout(timeOut.current);
+        timeOut.current = undefined;
+        if (animationId.current) {
+            cancelAnimationFrame(animationId.current);
+            animationId.current = undefined;
+        }
+        setCarouselInformation(prevState => ({
+            ...prevState,
+            dragState: undefined,
+            animationState: {
+                targetPosition: targetPosition,
+                direction,
+                startPosition: currentPosition,
+                isAutoLooping: false
+            },
+            timeOut: undefined
+        }));
+    };
+    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: undefined // cancel animation
+    }));
+    const onDrag = (x, width) => {
+        // For some weird reason the clientX is 0 on the last dragUpdate before drag end causing issues
+        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); // in milliseconds
+        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 (_jsxs("div", { className: "col items-center w-full gap-y-2", children: [_jsxs("div", { className: clsx(`relative w-full overflow-hidden`, heightClassName, className), children: [arrows && (_jsxs(_Fragment, { children: [_jsx("div", { 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() }), onClick: () => left(), children: _jsx(ChevronLeft, { size: 32 }) }), _jsx("div", { 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() }), onClick: () => right(), children: _jsx(ChevronRight, { size: 32 }) })] })), hintNext ? (_jsxs("div", { className: clsx(`relative row h-full`, heightClassName), children: [_jsx("div", { className: "relative row h-full w-full px-2 overflow-hidden", children: items.map(({ item, index }, listIndex) => (_jsx("div", { className: clsx(`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))) }), _jsx("div", { className: clsx(`hidden pointer-events-none desktop:block absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor) }), _jsx("div", { className: clsx(`hidden pointer-events-none desktop:block absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor) })] })) : (_jsx("div", { className: clsx('px-16 h-full', { '!cursor-grabbing': !!dragState }), ...dragHandlers, children: children[currentIndex] }))] }), dots && (_jsx("div", { className: "row items-center justify-center w-full my-2", children: range(0, length - 1).map(index => (_jsx("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
+                    }), onClick: () => startAnimation(index) }, index))) }))] }));
+};

package/dist/components/layout/DividerInserter.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type DividerInserterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    children: ReactNode[];
+    divider: (index: number) => ReactNode;
+};
+/**
+ * A Component for inserting a divider in the middle of each child element
+ *
+ *  undefined elements are removed
+ */
+export declare const DividerInserter: ({ children, divider, className, ...restProps }: DividerInserterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/DividerInserter.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+/**
+ * A Component for inserting a divider in the middle of each child element
+ *
+ *  undefined elements are removed
+ */
+export const DividerInserter = ({ children, divider, className, ...restProps }) => {
+    const nodes = [];
+    for (let index = 0; index < children.length; index++) {
+        const element = children[index];
+        if (element !== undefined) {
+            nodes.push(element);
+            if (index < children.length - 1) {
+                nodes.push(divider(index));
+            }
+        }
+    }
+    return (_jsx("div", { className: clsx(className), ...restProps, children: nodes }));
+};

package/dist/components/layout/FAQSection.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { ExpandableProps } from '../Expandable';
+type ContentType = {
+    type: 'markdown';
+    value: string;
+} | {
+    type: 'custom';
+    value: ReactNode;
+};
+export type FAQItem = Pick<ExpandableProps, 'initialExpansion' | 'className'> & {
+    id: string;
+    title: string;
+    content: ContentType;
+};
+export type FAQSectionProps = {
+    entries: FAQItem[];
+    expandableClassName?: string;
+};
+/**
+ * Description
+ */
+export declare const FAQSection: ({ entries, expandableClassName }: FAQSectionProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/FAQSection.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Expandable } from '../Expandable';
+import { MarkdownInterpreter } from '../MarkdownInterpreter';
+/**
+ * Description
+ */
+export const FAQSection = ({ entries, expandableClassName }) => {
+    const chevronSize = 28;
+    return (_jsx("div", { className: "col gap-y-4", children: entries.map(({ id, title, content, ...restProps }) => (_jsx(Expandable, { ...restProps, label: (_jsx("h3", { id: id, className: "textstyle-title-md", children: title })), clickOnlyOnHeader: false, icon: (expanded) => expanded ?
+                (_jsx(ChevronUp, { size: chevronSize, className: "text-primary", style: { minWidth: `${chevronSize}px` } })) :
+                (_jsx(ChevronDown, { size: chevronSize, className: "text-primary" })), className: clsx('rounded-xl', expandableClassName), headerClassName: "px-6 py-4", children: _jsx("div", { className: "mt-2 px-6 pb-4", children: content.type === 'markdown' ? (_jsx(MarkdownInterpreter, { text: content.value })) : content.value }) }, id))) }));
+};

package/dist/components/layout/Tile.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type TileProps = {
+    title: {
+        value: string;
+        className?: string;
+    };
+    description?: {
+        value: string;
+        className?: string;
+    };
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    className?: string;
+};
+/**
+ * A component for creating a tile similar to the flutter ListTile
+ */
+export declare const Tile: ({ title, description, prefix, suffix, className }: TileProps) => import("react/jsx-runtime").JSX.Element;
+type ImageLocation = 'prefix' | 'suffix';
+type ImageSize = {
+    width: number;
+    height: number;
+};
+export type TileWithImageProps = Omit<TileProps, 'suffix' | 'prefix'> & {
+    url: string;
+    imageLocation?: ImageLocation;
+    imageSize?: ImageSize;
+    imageClassName?: string;
+};
+/**
+ * A Tile with an image as prefix or suffix
+ */
+export declare const TileWithImage: ({ url, imageLocation, imageSize, imageClassName, ...tileProps }: TileWithImageProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/layout/Tile.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from 'next/image';
+import clsx from 'clsx';
+/**
+ * A component for creating a tile similar to the flutter ListTile
+ */
+export const Tile = ({ title, description, prefix, suffix, className }) => {
+    var _a;
+    return (_jsxs("div", { className: clsx('row gap-x-4 w-full items-center', className), children: [prefix, _jsxs("div", { className: "col w-full", children: [_jsx("span", { className: clsx(title.className), children: title.value }), !!description &&
+                        _jsx("span", { className: clsx((_a = description.className) !== null && _a !== void 0 ? _a : 'textstyle-description'), children: description.value })] }), suffix] }));
+};
+/**
+ * A Tile with an image as prefix or suffix
+ */
+export const TileWithImage = ({ url, imageLocation = 'prefix', imageSize = { width: 24, height: 24 }, imageClassName = '', ...tileProps }) => {
+    const image = _jsx(Image, { src: url, alt: "", ...imageSize, className: clsx(imageClassName) });
+    return (_jsx(Tile, { ...tileProps, prefix: imageLocation === 'prefix' ? image : undefined, suffix: imageLocation === 'suffix' ? image : undefined }));
+};

package/dist/components/modals/ConfirmDialog.d.ts

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react';
+import type { SolidButtonColor } from '../Button';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import { type ModalProps } from './Modal';
+type ConfirmDialogTranslation = {
+    confirm: string;
+    cancel: string;
+    decline: string;
+};
+export type ConfirmDialogType = 'positive' | 'negative' | 'neutral';
+export type ButtonOverwriteType = {
+    text?: string;
+    color?: SolidButtonColor;
+    disabled?: boolean;
+};
+export type ConfirmDialogProps = ModalProps & {
+    isShowingDecline?: boolean;
+    requireAnswer?: boolean;
+    onCancel?: () => void;
+    onConfirm: () => void;
+    onDecline?: () => void;
+    confirmType?: ConfirmDialogType;
+    /**
+     * Order: Cancel, Decline, Confirm
+     */
+    buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType];
+};
+/**
+ * A Dialog for asking the user for Confirmation
+ *
+ * To require an answer omit the onBackgroundClick
+ */
+export declare const ConfirmDialog: ({ overwriteTranslation, children, onCancel, onConfirm, onDecline, confirmType, buttonOverwrites, ...restProps }: PropsForTranslation<ConfirmDialogTranslation, PropsWithChildren<ConfirmDialogProps>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/ConfirmDialog.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidButton } from '../Button';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Modal } from './Modal';
+const defaultConfirmDialogTranslation = {
+    en: {
+        confirm: 'Confirm',
+        cancel: 'Cancel',
+        decline: 'Decline'
+    },
+    de: {
+        confirm: 'Bestätigen',
+        cancel: 'Abbrechen',
+        decline: 'Ablehnen'
+    }
+};
+/**
+ * A Dialog for asking the user for Confirmation
+ *
+ * To require an answer omit the onBackgroundClick
+ */
+export const ConfirmDialog = ({ overwriteTranslation, children, onCancel, onConfirm, onDecline, confirmType = 'positive', buttonOverwrites, ...restProps }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation);
+    const mapping = {
+        neutral: 'primary',
+        negative: 'negative',
+        positive: 'positive'
+    };
+    return (_jsxs(Modal, { ...restProps, children: [children, _jsxs("div", { className: "row mt-3 gap-x-4 justify-end", children: [onCancel && (_jsx(SolidButton, { color: (_a = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[0].color) !== null && _a !== void 0 ? _a : 'primary', onClick: onCancel, disabled: (_b = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[0].disabled) !== null && _b !== void 0 ? _b : false, children: (_c = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[0].text) !== null && _c !== void 0 ? _c : translation.cancel })), onDecline && (_jsx(SolidButton, { color: (_d = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[1].color) !== null && _d !== void 0 ? _d : 'negative', onClick: onDecline, disabled: (_e = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[1].disabled) !== null && _e !== void 0 ? _e : false, children: (_f = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[1].text) !== null && _f !== void 0 ? _f : translation.decline })), _jsx(SolidButton, { autoFocus: true, color: (_g = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[2].color) !== null && _g !== void 0 ? _g : mapping[confirmType], onClick: onConfirm, disabled: (_h = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[2].disabled) !== null && _h !== void 0 ? _h : false, children: (_j = buttonOverwrites === null || buttonOverwrites === void 0 ? void 0 : buttonOverwrites[2].text) !== null && _j !== void 0 ? _j : translation.confirm })] })] }));
+};

package/dist/components/modals/DiscardChangesDialog.d.ts

@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from 'react';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import { type ModalProps } from './Modal';
+type DiscardChangesDialogTranslation = {
+    save: string;
+    cancel: string;
+    dontSave: string;
+    title: string;
+    description: string;
+};
+type DiscardChangesDialogProps = ModalProps & {
+    isShowingDecline?: boolean;
+    requireAnswer?: boolean;
+    onCancel: () => void;
+    onSave: () => void;
+    onDontSave: () => void;
+};
+export declare const DiscardChangesDialog: ({ overwriteTranslation, children, title, description, onCancel, onSave, onDontSave, ...modalProps }: PropsForTranslation<DiscardChangesDialogTranslation, PropsWithChildren<DiscardChangesDialogProps>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/DiscardChangesDialog.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SolidButton } from '../Button';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Modal } from './Modal';
+const defaultDiscardChangesDialogTranslation = {
+    en: {
+        save: 'Save',
+        cancel: 'Cancel',
+        dontSave: 'Don\'t save',
+        title: 'Unsaved Changes',
+        description: 'Do you want to save your changes?'
+    },
+    de: {
+        save: 'Speichern',
+        cancel: 'Abbrechen',
+        dontSave: 'Nicht Speichern',
+        title: 'Ungespeicherte Änderungen',
+        description: 'Möchtest du die Änderungen speichern?'
+    }
+};
+export const DiscardChangesDialog = ({ overwriteTranslation, children, title, description, onCancel, onSave, onDontSave, ...modalProps }) => {
+    const translation = useTranslation(defaultDiscardChangesDialogTranslation, overwriteTranslation);
+    return (_jsxs(Modal, { title: title !== null && title !== void 0 ? title : translation.title, description: description !== null && description !== void 0 ? description : translation.description, ...modalProps, children: [children, _jsxs("div", { className: "row mt-3 gap-x-4 justify-end", children: [_jsx(SolidButton, { color: "positive", onClick: onSave, children: translation.save }), _jsx(SolidButton, { color: "negative", onClick: onDontSave, children: translation.dontSave }), _jsx(SolidButton, { autoFocus: true, color: "primary", onClick: onCancel, children: translation.cancel })] })] }));
+};

package/dist/components/modals/InputModal.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from '../user-input/Input';
+import type { ConfirmDialogProps } from './ConfirmDialog';
+export type InputModalProps = ConfirmDialogProps & {
+    inputs: InputProps[];
+};
+/**
+ * A modal for receiving multiple inputs
+ */
+export declare const InputModal: ({ inputs, buttonOverwrites, ...restProps }: InputModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/InputModal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../user-input/Input';
+import { ConfirmDialog } from './ConfirmDialog';
+/**
+ * A modal for receiving multiple inputs
+ */
+export const InputModal = ({ inputs, buttonOverwrites, ...restProps }) => {
+    return (_jsx(ConfirmDialog, { buttonOverwrites: buttonOverwrites, ...restProps, children: inputs.map((inputProps, index) => _jsx(Input, { ...inputProps }, `input ${index}`)) }));
+};

package/dist/components/modals/LanguageModal.d.ts

@@ -0,0 +1,17 @@
+import { type PropsWithChildren } from 'react';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import { type ModalProps } from './Modal';
+type LanguageModalTranslation = {
+    message: string;
+    done: string;
+};
+type LanguageModalProps = ModalProps & {
+    onDone: () => void;
+};
+/**
+ * A Modal for selecting the Language
+ *
+ * The State of open needs to be managed by the parent
+ */
+export declare const LanguageModal: ({ overwriteTranslation, onDone, onBackgroundClick, ...modalProps }: PropsForTranslation<LanguageModalTranslation, PropsWithChildren<LanguageModalProps>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/modals/LanguageModal.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../../hooks/useTranslation';
+import { Select } from '../user-input/Select';
+import { useLanguage } from '../../hooks/useLanguage';
+import { SolidButton } from '../Button';
+import { Modal } from './Modal';
+const languageDetails = {
+    en: 'English',
+    de: 'Deutsch'
+};
+const defaultConfirmDialogTranslation = {
+    en: {
+        message: 'Choose your language',
+        done: 'Done',
+    },
+    de: {
+        message: 'Wählen Sie Ihre Sprache',
+        done: 'Fertig',
+    }
+};
+/**
+ * A Modal for selecting the Language
+ *
+ * The State of open needs to be managed by the parent
+ */
+export const LanguageModal = ({ overwriteTranslation, onDone, onBackgroundClick, ...modalProps }) => {
+    const { language, setLanguage } = useLanguage();
+    const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation);
+    return (_jsx(Modal, { titleText: translation.message, onBackgroundClick: (eventData) => {
+            onDone();
+            if (onBackgroundClick) {
+                onBackgroundClick(eventData);
+            }
+        }, ...modalProps, children: _jsxs("div", { className: "w-[320px]", children: [_jsx(Select, { className: "mt-2", value: language, options: Object.entries(languageDetails).map(([tag, name]) => ({ label: name, value: tag })), onChange: (language) => setLanguage(language) }), _jsx("div", { className: "row mt-3 gap-x-4 justify-end", children: _jsx(SolidButton, { autoFocus: true, color: "positive", onClick: onDone, children: translation.done }) })] }) }));
+};

package/dist/components/modals/Modal.d.ts

@@ -0,0 +1,38 @@
+import { type MouseEventHandler, type PropsWithChildren, type ReactNode } from 'react';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+type ModalHeaderTranslation = {
+    close: string;
+};
+export type ModalHeaderProps = {
+    onCloseClick?: () => void;
+    /** The title of the Modal. If you want to only set the text use `titleText` instead */
+    title?: ReactNode;
+    /** The title text of the Modal. If you want to set a custom title use `title` instead */
+    titleText?: string;
+    /** The description of the Modal. If you want to only set the text use `descriptionText` instead */
+    description?: ReactNode;
+    /** The description text of the Modal. If you want to set a custom description use `description` instead */
+    descriptionText?: string;
+};
+/**
+ * A default Header to be used by modals to have a uniform design
+ */
+export declare const ModalHeader: ({ overwriteTranslation, onCloseClick, title, titleText, description, descriptionText }: PropsForTranslation<ModalHeaderTranslation, ModalHeaderProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const modalRootName = "modal-root";
+export type ModalProps = {
+    id: string;
+    isOpen: boolean;
+    onBackgroundClick?: MouseEventHandler<HTMLDivElement>;
+    backgroundClassName?: string;
+    modalClassName?: string;
+    containerClassName?: string;
+} & ModalHeaderProps;
+/**
+ * A Generic Modal Window
+ *
+ * The state needs to be managed by the parent of this component
+ *
+ * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly
+ */
+export declare const Modal: ({ children, id, isOpen, onBackgroundClick, backgroundClassName, modalClassName, containerClassName, ...modalHeaderProps }: PropsWithChildren<ModalProps>) => import("react").ReactPortal | null;
+export {};

package/dist/components/modals/Modal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { X } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Tooltip } from '../Tooltip';
+import { ModalContext } from './ModalRegister';
+const defaultModalHeaderTranslation = {
+    en: {
+        close: 'Close'
+    },
+    de: {
+        close: 'Schließen'
+    }
+};
+/**
+ * A default Header to be used by modals to have a uniform design
+ */
+export const ModalHeader = ({ overwriteTranslation, onCloseClick, title, titleText = '', description, descriptionText = '' }) => {
+    const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation);
+    return (_jsxs("div", { className: "col", children: [_jsxs("div", { className: "row justify-between items-start gap-x-8", children: [title !== null && title !== void 0 ? title : (_jsx("span", { className: clsx('textstyle-title-lg', {
+                            'mb-1': description || descriptionText,
+                        }), children: titleText })), !!onCloseClick && (_jsx(Tooltip, { tooltip: translation.close, children: _jsx("button", { className: "row bg-gray-200 hover:bg-gray-300 rounded-md p-1", onClick: onCloseClick, children: _jsx(X, {}) }) }))] }), description !== null && description !== void 0 ? description : (_jsx("span", { className: "textstyle-description", children: descriptionText }))] }));
+};
+export const modalRootName = 'modal-root';
+/**
+ * A Generic Modal Window
+ *
+ * The state needs to be managed by the parent of this component
+ *
+ * DO NOT Conditionally render this always use the isOpen to ensure that the ModalRegister is working properly
+ */
+export const Modal = ({ children, id, isOpen, onBackgroundClick, backgroundClassName = '', modalClassName = '', containerClassName = '', ...modalHeaderProps }) => {
+    const modalRoot = typeof window !== 'undefined' ? document.getElementById(modalRootName) : null;
+    const { register, addToRegister, removeFromRegister } = useContext(ModalContext);
+    if (!id) {
+        console.error('the id cannot be empty');
+    }
+    useEffect(() => {
+        if (isOpen) {
+            addToRegister(id);
+        }
+        else {
+            removeFromRegister(id);
+        }
+    }, [addToRegister, id, removeFromRegister, isOpen]);
+    if (modalRoot === null || !isOpen)
+        return null;
+    const isLast = register.length < 1 || register[register.length - 1] === id;
+    const isSecondLast = register.length < 2 || register[register.length - 2] === id;
+    return ReactDOM.createPortal(_jsxs("div", { className: clsx('fixed inset-0 overflow-y-auto z-[99]', containerClassName), id: id, children: [isLast && (_jsx("div", { className: clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
+                    'bg-black/70': isLast && register.length === 1,
+                }), onClick: onBackgroundClick })), _jsxs("div", { className: clsx('fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-white text-black rounded-xl shadow-xl', modalClassName), children: [_jsx(ModalHeader, { ...modalHeaderProps }), children] }), !isLast && (_jsx("div", { className: clsx('fixed inset-0 h-screen w-screen', backgroundClassName, {
+                    'bg-black/70': isSecondLast && register.length > 1,
+                }) }))] }), modalRoot, id);
+};