@helpwave/hightide 0.0.9 → 0.0.12

package/dist/components/LoadingAnimation.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../hooks/useTranslation';
+import { Helpwave } from './icons/Helpwave';
+import clsx from 'clsx';
+const defaultLoadingAnimationTranslation = {
+    en: {
+        loading: 'Loading data'
+    },
+    de: {
+        loading: 'Lade Daten'
+    }
+};
+/**
+ * A Component to show when loading data
+ */
+export const LoadingAnimation = ({ overwriteTranslation, loadingText, classname }) => {
+    const translation = useTranslation(defaultLoadingAnimationTranslation, overwriteTranslation);
+    return (_jsxs("div", { className: clsx('col items-center justify-center w-full h-24', classname), children: [_jsx(Helpwave, { animate: "loading" }), loadingText !== null && loadingText !== void 0 ? loadingText : `${translation.loading}...`] }));
+};

package/dist/components/LoadingButton.d.ts

@@ -0,0 +1,6 @@
+import type { SolidButtonProps } from './Button';
+type LoadingButtonProps = {
+    isLoading?: boolean;
+} & SolidButtonProps;
+export declare const LoadingButton: ({ isLoading, size, onClick, ...rest }: LoadingButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/LoadingButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Helpwave } from './icons/Helpwave';
+import { ButtonSizePaddings } from './Button';
+import { SolidButton } from './Button';
+import { noop } from '../util/noop';
+export const LoadingButton = ({ isLoading = false, size = 'medium', onClick, ...rest }) => {
+    const paddingClass = ButtonSizePaddings[size];
+    return (_jsxs("div", { className: "inline-block relative", children: [isLoading && (_jsx("div", { className: clsx('absolute inset-0 row items-center justify-center bg-white/40', paddingClass), children: _jsx(Helpwave, { animate: "loading", className: "text-white" }) })), _jsx(SolidButton, { ...rest, disabled: rest.disabled, onClick: isLoading ? noop : onClick })] }));
+};

package/dist/components/MarkdownInterpreter.d.ts

@@ -0,0 +1,25 @@
+type ASTNodeModifierType = 'none' | 'italic' | 'bold' | 'underline' | 'font-space' | 'primary' | 'secondary' | 'warn' | 'positive' | 'negative';
+declare const astNodeInserterType: readonly ["helpwave", "newline"];
+type ASTNodeInserterType = typeof astNodeInserterType[number];
+type ASTNodeDefaultType = 'text';
+type ASTNode = {
+    type: ASTNodeModifierType;
+    children: ASTNode[];
+} | {
+    type: ASTNodeInserterType;
+} | {
+    type: ASTNodeDefaultType;
+    text: string;
+};
+export type ASTNodeInterpreterProps = {
+    node: ASTNode;
+    isRoot?: boolean;
+    className?: string;
+};
+export declare const ASTNodeInterpreter: ({ node, isRoot, className, }: ASTNodeInterpreterProps) => string | import("react/jsx-runtime").JSX.Element | null;
+export type MarkdownInterpreterProps = {
+    text: string;
+    className?: string;
+};
+export declare const MarkdownInterpreter: ({ text, className }: MarkdownInterpreterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MarkdownInterpreter.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+const astNodeInserterType = ['helpwave', 'newline'];
+export const ASTNodeInterpreter = ({ node, isRoot = false, className = '', }) => {
+    switch (node.type) {
+        case 'newline':
+            return _jsx("br", {});
+        case 'text':
+            return isRoot ? _jsx("span", { className: className, children: node.text }) : node.text;
+        case 'helpwave':
+            return (_jsx("span", { className: "font-bold font-space no-underline", children: "helpwave" }));
+        case 'none':
+            return isRoot ? (_jsx("span", { className: className, children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) })) :
+                _jsx(_Fragment, { children: node.children.map((value, index) => _jsx(ASTNodeInterpreter, { node: value }, index)) });
+        case 'bold':
+            return _jsx("b", { children: node.children.map((value, index) => _jsx(ASTNodeInterpreter, { node: value }, index)) });
+        case 'italic':
+            return _jsx("i", { children: node.children.map((value, index) => _jsx(ASTNodeInterpreter, { node: value }, index)) });
+        case 'underline':
+            return (_jsx("u", { children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'font-space':
+            return (_jsx("span", { className: "font-space", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'primary':
+            return (_jsx("span", { className: "text-primary", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'secondary':
+            return (_jsx("span", { className: "text-secondary", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'warn':
+            return (_jsx("span", { className: "text-warning", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'positive':
+            return (_jsx("span", { className: "text-positive", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        case 'negative':
+            return (_jsx("span", { className: "text-negative", children: node.children.map((value, index) => (_jsx(ASTNodeInterpreter, { node: value }, index))) }));
+        default:
+            return null;
+    }
+};
+const modifierIdentifierMapping = [
+    { id: 'i', name: 'italic' },
+    { id: 'b', name: 'bold' },
+    { id: 'u', name: 'underline' },
+    { id: 'space', name: 'font-space' },
+    { id: 'primary', name: 'primary' },
+    { id: 'secondary', name: 'secondary' },
+    { id: 'warn', name: 'warn' },
+    { id: 'positive', name: 'positive' },
+    { id: 'negative', name: 'negative' },
+];
+const inserterIdentifierMapping = [
+    { id: 'helpwave', name: 'helpwave' },
+    { id: 'newline', name: 'newline' }
+];
+const parseMarkdown = (text, commandStart = '\\', open = '{', close = '}') => {
+    let start = text.indexOf(commandStart);
+    const children = [];
+    // parse the text step by step
+    while (text !== '') {
+        if (start === -1) {
+            children.push({
+                type: 'text',
+                text
+            });
+            break;
+        }
+        children.push(parseMarkdown(text.substring(0, start)));
+        text = text.substring(start);
+        if (text.length <= 1) {
+            children.push({
+                type: 'text',
+                text
+            });
+            text = '';
+            continue;
+        }
+        const simpleReplace = [commandStart, open, close];
+        if (simpleReplace.some(value => text[1] === value)) {
+            children.push({
+                type: 'text',
+                text: simpleReplace.find(value => text[1] === value)
+            });
+            text = text.substring(2);
+            start = text.indexOf(commandStart);
+            continue;
+        }
+        const inserter = inserterIdentifierMapping.find(value => text.substring(1).startsWith(value.id));
+        if (inserter) {
+            children.push({
+                type: inserter.name,
+            });
+            text = text.substring(inserter.id.length + 1);
+            start = text.indexOf(commandStart);
+            continue;
+        }
+        const modifier = modifierIdentifierMapping.find(value => text.substring(1).startsWith(value.id));
+        if (modifier) {
+            // check brackets
+            if (text[modifier.id.length + 1] !== open) {
+                children.push({
+                    type: 'text',
+                    text: text.substring(0, modifier.id.length + 1)
+                });
+                text = text.substring(modifier.id.length + 2);
+                start = text.indexOf(commandStart);
+                continue;
+            }
+            let closing = -1;
+            let index = modifier.id.length + 2;
+            let counter = 1;
+            let escaping = false;
+            while (index < text.length) {
+                if (text[index] === open && !escaping) {
+                    counter++;
+                }
+                if (text[index] === close && !escaping) {
+                    counter--;
+                    if (counter === 0) {
+                        closing = index;
+                        break;
+                    }
+                }
+                escaping = text[index] === commandStart;
+                index++;
+            }
+            if (closing !== -1) {
+                children.push({
+                    type: modifier.name,
+                    children: [parseMarkdown(text.substring(modifier.id.length + 2, closing))]
+                });
+                text = text.substring(closing + 1);
+                start = text.indexOf(commandStart);
+                continue;
+            }
+        }
+        // nothing could be applied to command start
+        children.push({
+            type: 'text',
+            text: text[0]
+        });
+        text = text.substring(1);
+        start = text.indexOf(commandStart);
+    }
+    return {
+        type: 'none',
+        children
+    };
+};
+const optimizeTree = (node) => {
+    var _a;
+    if (node.type === 'text') {
+        return !node.text ? undefined : node;
+    }
+    if (astNodeInserterType.some(value => value === node.type)) {
+        return node;
+    }
+    const currentNode = node;
+    if (currentNode.children.length === 0) {
+        return undefined;
+    }
+    let children = [];
+    for (let i = 0; i < currentNode.children.length; i++) {
+        const child = optimizeTree(currentNode.children[i]);
+        if (!child) {
+            continue;
+        }
+        if (child.type === 'none') {
+            children.push(...child.children);
+        }
+        else {
+            children.push(child);
+        }
+    }
+    currentNode.children = children;
+    children = [];
+    for (let i = 0; i < currentNode.children.length; i++) {
+        const child = currentNode.children[i];
+        if (child) {
+            if (child.type === 'text' && ((_a = children[children.length - 1]) === null || _a === void 0 ? void 0 : _a.type) === 'text') {
+                children[children.length - 1].text += child.text;
+            }
+            else {
+                children.push(child);
+            }
+        }
+    }
+    currentNode.children = children;
+    return currentNode;
+};
+export const MarkdownInterpreter = ({ text, className }) => {
+    const tree = parseMarkdown(text);
+    const optimizedTree = optimizeTree(tree);
+    return _jsx(ASTNodeInterpreter, { node: optimizedTree, isRoot: true, className: className });
+};

package/dist/components/Pagination.d.ts

@@ -0,0 +1,14 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type PaginationTranslation = {
+    of: string;
+};
+export type PaginationProps = {
+    page: number;
+    numberOfPages: number;
+    onPageChanged: (page: number) => void;
+};
+/**
+ * A Component showing the pagination allowing first, before, next and last page navigation
+ */
+export declare const Pagination: ({ overwriteTranslation, page, numberOfPages, onPageChanged }: PropsForTranslation<PaginationTranslation, PaginationProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Pagination.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLast, ChevronLeft, ChevronFirst, ChevronRight } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../hooks/useTranslation';
+const defaultPaginationTranslations = {
+    en: {
+        of: 'of'
+    },
+    de: {
+        of: 'von'
+    }
+};
+/**
+ * A Component showing the pagination allowing first, before, next and last page navigation
+ */
+export const Pagination = ({ overwriteTranslation, page, numberOfPages, onPageChanged }) => {
+    const translation = useTranslation(defaultPaginationTranslations, overwriteTranslation);
+    const changePage = (page) => {
+        onPageChanged(page);
+    };
+    const noPages = numberOfPages === 0;
+    const onFirstPage = page === 0 && !noPages;
+    const onLastPage = page === numberOfPages - 1;
+    return (_jsxs("div", { className: clsx('row', { 'opacity-30': noPages }), children: [_jsx("button", { onClick: () => changePage(0), disabled: onFirstPage, children: _jsx(ChevronFirst, { className: clsx({ 'opacity-30': onFirstPage }) }) }), _jsx("button", { onClick: () => changePage(page - 1), disabled: onFirstPage, children: _jsx(ChevronLeft, { className: clsx({ 'opacity-30': onFirstPage }) }) }), _jsxs("div", { className: "min-w-[80px] justify-center mx-2", children: [_jsx("span", { className: "select-none text-right flex-1", children: noPages ? 0 : page + 1 }), _jsx("span", { className: "select-none mx-2", children: translation.of }), _jsx("span", { className: "select-none text-left flex-1", children: numberOfPages })] }), _jsx("button", { onClick: () => changePage(page + 1), disabled: onLastPage || noPages, children: _jsx(ChevronRight, { className: clsx({ 'opacity-30': onLastPage }) }) }), _jsx("button", { onClick: () => changePage(numberOfPages - 1), disabled: onLastPage || noPages, children: _jsx(ChevronLast, { className: clsx({ 'opacity-30': onLastPage }) }) })] }));
+};

package/dist/components/Profile.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+type SocialType = 'mail' | 'github' | 'linkedin' | 'website' | 'medium';
+export type SocialIconProps = {
+    type: SocialType;
+    url: string;
+    size?: number;
+};
+export type ProfileProps = HTMLAttributes<HTMLDivElement> & {
+    name: string;
+    imageUrl: string;
+    badge?: ReactNode;
+    prefix?: string;
+    suffix?: string;
+    roleBadge?: string;
+    role?: string;
+    /**
+     * The list of tags for the
+     */
+    tags?: string[];
+    info?: string;
+    socials?: SocialIconProps[];
+    imageClassName?: string;
+};
+/**
+ * A Component for showing a Profile
+ */
+export declare const Profile: ({ name, imageUrl, badge, prefix, suffix, roleBadge, role, tags, info, socials, className, imageClassName, ...divProps }: ProfileProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Profile.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Github, Globe, Linkedin, Mail } from 'lucide-react';
+import { Helpwave } from './icons/Helpwave';
+import { Chip } from './ChipList';
+/**
+ * A Component for showing a lin
+ */
+const SocialIcon = ({ type, url, size = 24 }) => {
+    let icon;
+    switch (type) {
+        case 'mail':
+            icon = _jsx(Mail, { size: size });
+            break;
+        case 'linkedin':
+            // TODO find an alternative icon
+            icon = _jsx(Linkedin, { size: size });
+            break;
+        case 'github':
+            // TODO find an alternative icon
+            icon = _jsx(Github, { size: size });
+            break;
+        case 'website':
+            icon = _jsx(Globe, { size: size });
+            break;
+        case 'medium':
+            icon = _jsx(Globe, { size: size }); // TODO find an appropriate medium svg
+            break;
+        default:
+            icon = _jsx(Helpwave, { size: 24 });
+    }
+    return (_jsx(Link, { href: url, target: "_blank", children: _jsx(Chip, { color: "dark", className: "!p-2", children: icon }) }));
+};
+// TODO add colors for dark-mode
+/**
+ * A Component for showing a Profile
+ */
+export const Profile = ({ name, imageUrl, badge, prefix, suffix, roleBadge, role, tags, info, socials, className, imageClassName, ...divProps }) => {
+    return (_jsxs("div", { ...divProps, className: clsx(`col items-center text-center rounded-3xl p-3 pb-4 bg-white text-gray-900 w-min shadow-around-lg`, className), children: [_jsxs("div", { className: "relative mb-6", children: [_jsx("div", { className: clsx('relative rounded-xl row items-center justify-center overflow-hidden', imageClassName), children: _jsx(Image, { src: imageUrl, alt: "", className: clsx('z-[2] object-cover', imageClassName), width: 0, height: 0, style: { width: 'auto', height: 'auto' } }) }), _jsx("div", { className: "absolute top-[6px] left-[6px] z-[3]", children: badge }), roleBadge && (_jsx("div", { className: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-2/3 z-[4] rounded-md", children: _jsx(Chip, { color: "dark", className: "font-bold px-3", children: roleBadge }) }))] }), prefix && _jsx("span", { className: "font-semibold", children: prefix }), _jsx("h2", { id: name, className: "textstyle-title-md", children: name }), suffix && _jsx("span", { className: "text-sm mb-1", children: suffix }), role && _jsx("span", { className: "font-space font-bold text-sm", children: role }), tags && (_jsx("div", { className: "flex flex-wrap mx-4 mt-2 gap-x-2 justify-center", children: tags.map((tag, index) => _jsx("span", { className: "textstyle-description text-sm", children: `#${tag}` }, index)) })), info && _jsx("span", { className: "mt-2 text-sm", children: info }), socials && (_jsx("div", { className: "flex flex-wrap grow items-end justify-center gap-x-4 gap-y-2 mt-4", children: socials.map((socialIconProps, index) => {
+                    var _a;
+                    return (_jsx(SocialIcon, { ...socialIconProps, size: (_a = socialIconProps.size) !== null && _a !== void 0 ? _a : 20 }, index));
+                }) }))] }));
+};

package/dist/components/ProgressIndicator.d.ts

@@ -0,0 +1,21 @@
+export type ProgressIndicatorProps = {
+    progress: number;
+    strokeWidth?: number;
+    size?: keyof typeof sizeMapping;
+    direction?: 'clockwise' | 'counterclockwise';
+    rotation?: number;
+};
+declare const sizeMapping: {
+    small: number;
+    medium: number;
+    big: number;
+};
+/**
+ * A progress indicator
+ *
+ * Start rotation is 3 o'clock and fills counterclockwise
+ *
+ * Progress is given from 0 to 1
+ */
+export declare const ProgressIndicator: ({ progress, strokeWidth, size, direction, rotation }: ProgressIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ProgressIndicator.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMapping = { small: 16, medium: 24, big: 48 };
+/**
+ * A progress indicator
+ *
+ * Start rotation is 3 o'clock and fills counterclockwise
+ *
+ * Progress is given from 0 to 1
+ */
+export const ProgressIndicator = ({ progress, strokeWidth = 5, size = 'medium', direction = 'counterclockwise', rotation = 0 }) => {
+    const currentSize = sizeMapping[size];
+    const center = currentSize / 2;
+    const radius = center - strokeWidth / 2;
+    const arcLength = 2 * Math.PI * radius;
+    const arcOffset = arcLength * progress;
+    if (direction === 'clockwise') {
+        rotation += 360 * progress;
+    }
+    return (_jsxs("svg", { style: {
+            height: `${currentSize}px`,
+            width: `${currentSize}px`,
+            transform: `rotate(${rotation}deg)`
+        }, children: [_jsx("circle", { cx: center, cy: center, r: radius, fill: "transparent", strokeWidth: strokeWidth, className: "stroke-primary" }), _jsx("circle", { cx: center, cy: center, r: radius, fill: "transparent", strokeWidth: strokeWidth, strokeDasharray: arcLength, strokeDashoffset: arcOffset, className: "stroke-gray-300" })] }));
+};

package/dist/components/Ring.d.ts

@@ -0,0 +1,31 @@
+import type { CSSProperties } from 'react';
+export type RingProps = {
+    innerSize: number;
+    width: number;
+    className?: string;
+};
+export declare const Ring: ({ innerSize, width, className, }: RingProps) => import("react/jsx-runtime").JSX.Element;
+export type AnimatedRingProps = RingProps & {
+    fillAnimationDuration?: number;
+    repeating?: boolean;
+    onAnimationFinished?: () => void;
+    style?: CSSProperties;
+};
+export declare const AnimatedRing: ({ innerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style, }: AnimatedRingProps) => import("react/jsx-runtime").JSX.Element;
+export type RingWaveProps = Omit<AnimatedRingProps, 'innerSize'> & {
+    startInnerSize: number;
+    endInnerSize: number;
+    style?: CSSProperties;
+};
+export declare const RingWave: ({ startInnerSize, endInnerSize, width, className, fillAnimationDuration, repeating, onAnimationFinished, style }: RingWaveProps) => import("react/jsx-runtime").JSX.Element;
+export type RadialRingsProps = {
+    circle1ClassName?: string;
+    circle2ClassName?: string;
+    circle3ClassName?: string;
+    waveWidth?: number;
+    waveBaseColor?: string;
+    sizeCircle1?: number;
+    sizeCircle2?: number;
+    sizeCircle3?: number;
+};
+export declare const RadialRings: ({ circle1ClassName, circle2ClassName, circle3ClassName, waveWidth, waveBaseColor, sizeCircle1, sizeCircle2, sizeCircle3 }: RadialRingsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Ring.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { noop } from '../util/noop';
+import { Circle } from './Circle';
+import clsx from 'clsx';
+export const Ring = ({ innerSize = 20, width = 7, className = 'outline-primary', }) => {
+    return (_jsx("div", { className: clsx(`bg-transparent rounded-full outline`, className), style: {
+            width: `${innerSize}px`,
+            height: `${innerSize}px`,
+            outlineWidth: `${width}px`,
+        } }));
+};
+export const AnimatedRing = ({ innerSize, width, className, fillAnimationDuration = 3, repeating = false, onAnimationFinished = noop, style, }) => {
+    const [currentWidth, setCurrentWidth] = useState(0);
+    const milliseconds = 1000 * fillAnimationDuration;
+    const animate = useCallback((timestamp, startTime) => {
+        const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+        const newWidth = Math.min(width * progress, width);
+        setCurrentWidth(newWidth);
+        if (progress < 1) {
+            requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+        }
+        else {
+            onAnimationFinished();
+            if (repeating) {
+                setCurrentWidth(0);
+                requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+            }
+        }
+    }, [milliseconds, onAnimationFinished, repeating, width]);
+    useEffect(() => {
+        if (currentWidth < width) {
+            requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx("div", { className: "row items-center justify-center", style: {
+            width: `${innerSize + 2 * width}px`,
+            height: `${innerSize + 2 * width}px`,
+            ...style,
+        }, children: _jsx(Ring, { innerSize: innerSize, width: currentWidth, className: className }) }));
+};
+export const RingWave = ({ startInnerSize = 20, endInnerSize = 30, width, className, fillAnimationDuration = 3, repeating = false, onAnimationFinished = noop, style }) => {
+    const [currentInnerSize, setCurrentInnerSize] = useState(startInnerSize);
+    const distance = endInnerSize - startInnerSize;
+    const milliseconds = 1000 * fillAnimationDuration;
+    const animate = useCallback((timestamp, startTime) => {
+        const progress = Math.min((timestamp - startTime) / milliseconds, 1);
+        const newInnerSize = Math.min(startInnerSize + distance * progress, endInnerSize);
+        setCurrentInnerSize(newInnerSize);
+        if (progress < 1) {
+            requestAnimationFrame((newTimestamp) => animate(newTimestamp, startTime));
+        }
+        else {
+            onAnimationFinished();
+            if (repeating) {
+                setCurrentInnerSize(startInnerSize);
+                requestAnimationFrame((newTimestamp) => animate(newTimestamp, newTimestamp));
+            }
+        }
+    }, [distance, endInnerSize, milliseconds, onAnimationFinished, repeating, startInnerSize]);
+    useEffect(() => {
+        if (currentInnerSize < endInnerSize) {
+            requestAnimationFrame((timestamp) => animate(timestamp, timestamp));
+        }
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsx("div", { className: "row items-center justify-center", style: {
+            width: `${endInnerSize + 2 * width}px`,
+            height: `${endInnerSize + 2 * width}px`,
+            ...style
+        }, children: _jsx(Ring, { innerSize: currentInnerSize, width: width, className: className }) }));
+};
+// TODO use fixed colors here to avoid artifacts
+export const RadialRings = ({ circle1ClassName = 'bg-primary/90 outline-primary/90', circle2ClassName = 'bg-primary/60 outline-primary/60', circle3ClassName = 'bg-primary/40 outline-primary/40', waveWidth = 10, waveBaseColor = 'outline-white/20', sizeCircle1 = 100, sizeCircle2 = 200, sizeCircle3 = 300 }) => {
+    const [currentRing, setCurrentRing] = useState(0);
+    const size = sizeCircle3;
+    return (_jsxs("div", { className: "relative", style: {
+            width: `${sizeCircle3}px`,
+            height: `${sizeCircle3}px`,
+        }, children: [_jsx(Circle, { radius: sizeCircle1 / 2, className: clsx(circle1ClassName, `absolute z-[10] -translate-y-1/2 -translate-x-1/2`), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`
+                } }), currentRing === 0 ? (_jsx(AnimatedRing, { innerSize: sizeCircle1, width: (sizeCircle2 - sizeCircle1) / 2, onAnimationFinished: () => currentRing === 0 ? setCurrentRing(1) : null, repeating: true, className: clsx(circle2ClassName, { 'opacity-5': currentRing !== 0 }), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`,
+                    position: 'absolute',
+                    translate: `-50% -50%`,
+                    zIndex: 9
+                } })) : null, currentRing === 2 ? (_jsx(RingWave, { startInnerSize: sizeCircle1 - waveWidth, endInnerSize: sizeCircle2, width: waveWidth, repeating: true, className: clsx(waveBaseColor, `opacity-5`), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`,
+                    position: 'absolute',
+                    translate: `-50% -50%`,
+                    zIndex: 9,
+                } })) : null, _jsx(Circle, { radius: sizeCircle2 / 2, className: clsx(circle2ClassName, { 'opacity-20': currentRing < 1 }, `absolute z-[8] -translate-y-1/2 -translate-x-1/2`), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`
+                } }), currentRing === 1 ? (_jsx(AnimatedRing, { innerSize: sizeCircle2 - 1, width: (sizeCircle3 - sizeCircle2) / 2, onAnimationFinished: () => currentRing === 1 ? setCurrentRing(2) : null, repeating: true, className: clsx(circle3ClassName), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`,
+                    position: 'absolute',
+                    translate: `-50% -50%`,
+                    zIndex: 7,
+                } })) : null, currentRing === 2 ? (_jsx(RingWave, { startInnerSize: sizeCircle2, endInnerSize: sizeCircle3 - waveWidth, width: waveWidth, repeating: true, className: clsx(waveBaseColor, `opacity-5`), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`,
+                    position: 'absolute',
+                    translate: `-50% -50%`,
+                    zIndex: 7,
+                } })) : null, _jsx(Circle, { radius: sizeCircle3 / 2, className: clsx(circle3ClassName, { 'opacity-20': currentRing < 2 }, `absolute z-[6] -translate-y-1/2 -translate-x-1/2`), style: {
+                    left: `${size / 2}px`,
+                    top: `${size / 2}px`
+                } })] }));
+};

package/dist/components/SearchableList.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type SearchableListTranslation = {
+    search: string;
+    nothingFound: string;
+};
+export type SearchableListProps<T> = {
+    list: T[];
+    initialSearch?: string;
+    searchMapping: (value: T) => string[];
+    itemMapper: (value: T) => ReactNode;
+    className?: string;
+};
+/**
+ * A component for searching a list
+ */
+export declare const SearchableList: <T>({ overwriteTranslation, list, initialSearch, searchMapping, itemMapper, className }: PropsForTranslation<SearchableListTranslation, SearchableListProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SearchableList.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Search } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../hooks/useTranslation';
+import { MultiSearchWithMapping } from '../util/simpleSearch';
+import { Input } from './user-input/Input';
+const defaultSearchableListTranslation = {
+    en: {
+        search: 'Search',
+        nothingFound: 'Nothing found'
+    },
+    de: {
+        search: 'Suche',
+        nothingFound: 'Nichts gefunden'
+    }
+};
+/**
+ * A component for searching a list
+ */
+export const SearchableList = ({ overwriteTranslation, list, initialSearch = '', searchMapping, itemMapper, className }) => {
+    const translation = useTranslation(defaultSearchableListTranslation, overwriteTranslation);
+    const [search, setSearch] = useState(initialSearch);
+    useEffect(() => setSearch(initialSearch), [initialSearch]);
+    const filteredEntries = useMemo(() => MultiSearchWithMapping(search, list, searchMapping), [search, list, searchMapping]);
+    return (_jsxs("div", { className: clsx('col gap-y-2', className), children: [_jsxs("div", { className: "row justify-between gap-x-2 items-center", children: [_jsx("div", { className: "flex-1", children: _jsx(Input, { value: search, onChange: setSearch, placeholder: translation.search }) }), _jsx(Search, { size: 20 })] }), filteredEntries.length > 0 && (_jsx("div", { className: "col gap-y-1", children: filteredEntries.map(itemMapper) })), !filteredEntries.length && _jsx("div", { className: "row justify-center", children: translation.nothingFound })] }));
+};

package/dist/components/SortButton.d.ts

@@ -0,0 +1,10 @@
+import type { TextButtonProps } from './Button';
+import type { TableSortingType } from './Table';
+export type SortButtonProps = Omit<TextButtonProps, 'onClick'> & {
+    ascending?: TableSortingType;
+    onClick: (newTableSorting: TableSortingType) => void;
+};
+/**
+ * A Extension of the normal button that displays the sorting state right of the content
+ */
+export declare const SortButton: ({ children, ascending, color, onClick, ...buttonProps }: SortButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SortButton.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react';
+import { TextButton } from './Button';
+/**
+ * A Extension of the normal button that displays the sorting state right of the content
+ */
+export const SortButton = ({ children, ascending, color, onClick, ...buttonProps }) => {
+    return (_jsx(TextButton, { color: color, onClick: () => onClick(ascending === 'descending' ? 'ascending' : 'descending'), ...buttonProps, children: _jsxs("div", { className: "row gap-x-2", children: [children, ascending === 'ascending' ? _jsx(ChevronUp, {}) : (!ascending ? _jsx(ChevronsUpDown, {}) : _jsx(ChevronDown, {}))] }) }));
+};

package/dist/components/Span.js

@@ -0,0 +1 @@
+"use strict";