@helpwave/hightide 0.0.9 → 0.0.11

package/README.md

@@ -2,7 +2,7 @@
 This repository contains all components and themes employed by helpwave's web application
 
 ## Theming
-Theming is achieved through an extensive [tailwindcss](https://tailwindcss.com) config in the [globals.css](globals.css)
+Theming is achieved through an extensive [tailwindcss](https://tailwindcss.com) config in the [globals.css](src/css/globals.css)
 
 ## Storybook
 We use [storybook](https://storybook.js.org/) for easily testing and showcasing our component library

package/dist/coloring/shading.d.ts

@@ -0,0 +1,2 @@
+import type { ShadedColors } from './types';
+export declare const generateShadingColors: (partialShading: Omit<Partial<ShadedColors>, "0" | "1000">) => ShadedColors;

package/dist/coloring/shading.js

@@ -0,0 +1,40 @@
+import tinycolor from 'tinycolor2';
+import { shadingColorValues } from './types';
+// Function to generate a full shading of several colors
+export const generateShadingColors = (partialShading) => {
+    var _a, _b;
+    const shading = {
+        0: '#FFFFFF',
+        1000: '#000000'
+    };
+    let index = 1;
+    while (index < shadingColorValues.length - 1) {
+        const previous = shadingColorValues[index - 1];
+        const current = shadingColorValues[index];
+        if (partialShading[current] !== undefined) {
+            shading[current] = partialShading[current];
+            index++;
+            continue;
+        }
+        let j = index + 1;
+        while (j < shadingColorValues.length) {
+            if (partialShading[shadingColorValues[j]] !== undefined) {
+                break;
+            }
+            j++;
+        }
+        if (j === shadingColorValues.length) {
+            j = shadingColorValues.length - 1;
+        }
+        const nextFound = shadingColorValues[j];
+        const interval = nextFound - previous;
+        for (let k = index; k < j; k++) {
+            const current = shadingColorValues[k];
+            const previousValue = (_a = partialShading[previous]) !== null && _a !== void 0 ? _a : shading[previous];
+            const nextValue = (_b = partialShading[nextFound]) !== null && _b !== void 0 ? _b : shading[nextFound];
+            shading[current] = tinycolor.mix(tinycolor(previousValue), tinycolor(nextValue), (current - previous) / interval * 100).toHexString();
+        }
+        index = j;
+    }
+    return shading;
+};

package/dist/coloring/types.d.ts

@@ -0,0 +1,11 @@
+export declare const shadingColorValues: readonly [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000];
+export type ColorShadingValue = typeof shadingColorValues[number];
+export type ShadedColors = Record<ColorShadingValue, string>;
+export type ColoringStyle = 'background' | 'tonal' | 'tonal-opaque' | 'text' | 'text-border';
+export type ColorMode = 'light' | 'dark';
+export type Coloring = {
+    color: '';
+    style?: ColoringStyle;
+    mode?: ColorMode;
+    hover?: boolean;
+};

package/dist/coloring/types.js

@@ -0,0 +1 @@
+export const shadingColorValues = [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950, 1000];

package/dist/components/Avatar.d.ts

@@ -0,0 +1,14 @@
+export declare const avtarSizeList: readonly ["tiny", "small", "medium", "large"];
+export type AvatarSize = typeof avtarSizeList[number];
+export declare const avatarSizeMapping: Record<AvatarSize, number>;
+export type AvatarProps = {
+    avatarUrl: string;
+    alt: string;
+    size?: AvatarSize;
+    className?: string;
+};
+/**
+ * A component for showing a profile picture
+ */
+declare const Avatar: ({ avatarUrl, alt, size, className }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export { Avatar };

package/dist/components/Avatar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Image from 'next/image';
+import clsx from 'clsx';
+export const avtarSizeList = ['tiny', 'small', 'medium', 'large'];
+export const avatarSizeMapping = {
+    tiny: 24,
+    small: 32,
+    medium: 48,
+    large: 64
+};
+/**
+ * A component for showing a profile picture
+ */
+const Avatar = ({ avatarUrl, alt, size = 'medium', className = '' }) => {
+    // TODO remove later
+    avatarUrl = 'https://cdn.helpwave.de/boringavatar.svg';
+    const avtarSize = {
+        tiny: 24,
+        small: 32,
+        medium: 48,
+        large: 64,
+    }[size];
+    const style = {
+        width: avtarSize + 'px',
+        height: avtarSize + 'px',
+        maxWidth: avtarSize + 'px',
+        maxHeight: avtarSize + 'px',
+        minWidth: avtarSize + 'px',
+        minHeight: avtarSize + 'px',
+    };
+    return (
+    // TODO transparent or white background later
+    _jsx("div", { className: clsx(`rounded-full bg-primary`, className), style: style, children: _jsx(Image, { className: "rounded-full border border-gray-200", style: style, src: avatarUrl, alt: alt, width: avtarSize, height: avtarSize }) }));
+};
+export { Avatar };

package/dist/components/AvatarGroup.d.ts

@@ -0,0 +1,10 @@
+import type { AvatarProps, AvatarSize } from './Avatar';
+export type AvatarGroupProps = {
+    avatars: Omit<AvatarProps, 'size'>[];
+    maxShownProfiles?: number;
+    size?: AvatarSize;
+};
+/**
+ * A component for showing a group of Avatar's
+ */
+export declare const AvatarGroup: ({ avatars, maxShownProfiles, size }: AvatarGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AvatarGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Avatar, avatarSizeMapping } from './Avatar';
+/**
+ * A component for showing a group of Avatar's
+ */
+export const AvatarGroup = ({ avatars, maxShownProfiles = 5, size = 'tiny' }) => {
+    const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles);
+    const diameter = avatarSizeMapping[size];
+    const stackingOverlap = 0.5; // given as a percentage
+    const notDisplayedProfiles = avatars.length - maxShownProfiles;
+    const avatarGroupWidth = diameter * (stackingOverlap * (displayedProfiles.length - 1) + 1);
+    return (_jsxs("div", { className: "row relative", style: { height: diameter + 'px' }, children: [_jsx("div", { style: { width: avatarGroupWidth + 'px' }, children: displayedProfiles.map((avatar, index) => (_jsx("div", { className: "absolute", style: { left: (index * diameter * stackingOverlap) + 'px', zIndex: maxShownProfiles - index }, children: _jsx(Avatar, { avatarUrl: avatar.avatarUrl, alt: avatar.alt, size: size }) }, index))) }), notDisplayedProfiles > 0 && (_jsx("div", { className: "truncate row items-center", style: { fontSize: (diameter / 2) + 'px', marginLeft: (1 + diameter / 16) + 'px' }, children: _jsxs("span", { children: ["+ ", notDisplayedProfiles] }) }))] }));
+};

package/dist/components/BreadCrumb.d.ts

@@ -0,0 +1,16 @@
+export type Crumb = {
+    display: string;
+    link: string;
+};
+type BreadCrumbProps = {
+    crumbs: Crumb[];
+    linkClassName?: string;
+    containerClassName?: string;
+};
+/**
+ * A component for showing a hierarchical link structure with an independent link on each element
+ *
+ * e.g. Organizations/Ward/<id>
+ */
+export declare const BreadCrumb: ({ crumbs, linkClassName, containerClassName }: BreadCrumbProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/BreadCrumb.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from 'next/link';
+import clsx from 'clsx';
+/**
+ * A component for showing a hierarchical link structure with an independent link on each element
+ *
+ * e.g. Organizations/Ward/<id>
+ */
+export const BreadCrumb = ({ crumbs, linkClassName, containerClassName }) => {
+    const color = 'text-description';
+    return (_jsx("div", { className: clsx('row', containerClassName), children: crumbs.map((crumb, index) => (_jsxs("div", { children: [_jsx(Link, { href: crumb.link, className: clsx(linkClassName, { [`${color} hover:brightness-60`]: index !== crumbs.length - 1 }), children: crumb.display }), index !== crumbs.length - 1 && _jsx("span", { className: clsx(`px-1`, color), children: "/" })] }, index))) }));
+};

package/dist/components/Button.d.ts

@@ -0,0 +1,41 @@
+import type { PropsWithChildren, ButtonHTMLAttributes, ReactNode } from 'react';
+export type SolidButtonColor = 'primary' | 'secondary' | 'tertiary' | 'positive' | 'warning' | 'negative';
+export type OutlineButtonColor = 'primary';
+export type TextButtonColor = 'negative' | 'neutral';
+type ButtonSizes = 'small' | 'medium' | 'large';
+/**
+ * The shard properties between all button types
+ */
+export type ButtonProps = PropsWithChildren<{
+    /**
+     * @default 'medium'
+     */
+    size?: ButtonSizes;
+}> & ButtonHTMLAttributes<Element>;
+export declare const ButtonSizePaddings: Record<ButtonSizes, string>;
+type ButtonWithIconsProps = ButtonProps & {
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+};
+export type SolidButtonProps = ButtonWithIconsProps & {
+    color?: SolidButtonColor;
+};
+export type OutlineButtonProps = ButtonWithIconsProps & {
+    color?: OutlineButtonColor;
+};
+export type TextButtonProps = ButtonWithIconsProps & {
+    color?: TextButtonColor;
+};
+/**
+ * A button with a solid background and different sizes
+ */
+declare const SolidButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: SolidButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A button with an outline border and different sizes
+ */
+declare const OutlineButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: OutlineButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A text that is a button that can have different sizes
+ */
+declare const TextButton: ({ children, disabled, color, size, startIcon, endIcon, onClick, className, ...restProps }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { SolidButton, OutlineButton, TextButton };

package/dist/components/Button.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const ButtonSizePaddings = {
+    small: 'btn-sm',
+    medium: 'btn-md',
+    large: 'btn-lg'
+};
+/**
+ * A button with a solid background and different sizes
+ */
+const SolidButton = ({ children, disabled = false, color = 'primary', size = 'medium', startIcon, endIcon, onClick, 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',
+    }[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',
+    }[color];
+    return (_jsxs("button", { onClick: disabled ? undefined : onClick, disabled: disabled || onClick === undefined, className: clsx(className, {
+            'text-disabled-text bg-disabled-background': disabled,
+            [clsx(colorClasses, 'hover:brightness-90')]: !disabled
+        }, ButtonSizePaddings[size]), ...restProps, children: [startIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: startIcon })), children, endIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: endIcon }))] }));
+};
+/**
+ * A button with an outline border and different sizes
+ */
+const OutlineButton = ({ children, disabled = false, color = 'primary', size = 'medium', startIcon, endIcon, onClick, className, ...restProps }) => {
+    const colorClasses = {
+        primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',
+    }[color];
+    const iconColorClasses = {
+        primary: 'text-button-outline-primary-icon',
+    }[color];
+    return (_jsxs("button", { onClick: disabled ? undefined : onClick, disabled: disabled || onClick === undefined, className: clsx(className, {
+            'text-disabled-text border-disabled-outline)': disabled,
+            [clsx(colorClasses, 'hover:brightness-80')]: !disabled,
+        }, ButtonSizePaddings[size]), ...restProps, children: [startIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: startIcon })), children, endIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: endIcon }))] }));
+};
+/**
+ * A text that is a button that can have different sizes
+ */
+const TextButton = ({ children, disabled = false, color = 'neutral', size = 'medium', startIcon, endIcon, onClick, className, ...restProps }) => {
+    const colorClasses = {
+        negative: 'bg-transparent text-button-text-negative-text',
+        neutral: 'bg-transparent text-button-text-neutral-text',
+    }[color];
+    const iconColorClasses = {
+        negative: 'text-button-text-negative-icon',
+        neutral: 'text-button-text-neutral-icon',
+    }[color];
+    return (_jsxs("button", { onClick: disabled ? undefined : onClick, disabled: disabled || onClick === undefined, className: clsx(className, {
+            'text-disabled-text': disabled,
+            [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,
+        }, ButtonSizePaddings[size]), ...restProps, children: [startIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: startIcon })), children, endIcon && (_jsx("span", { className: clsx({
+                    [iconColorClasses]: !disabled,
+                    [`text-disabled-icon`]: disabled
+                }), children: endIcon }))] }));
+};
+// TODO Icon button
+export { SolidButton, OutlineButton, TextButton };

package/dist/components/ChipList.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLProps, PropsWithChildren, ReactNode } from 'react';
+export type ChipColor = 'default' | 'dark' | 'red' | 'yellow' | 'green' | 'blue' | 'pink';
+type ChipVariant = 'normal' | 'fullyRounded';
+export type ChipProps = HTMLProps<HTMLDivElement> & PropsWithChildren<{
+    color?: ChipColor;
+    variant?: ChipVariant;
+    trailingIcon?: ReactNode;
+}>;
+/**
+ * A component for displaying a single chip
+ */
+export declare const Chip: ({ children, trailingIcon, color, variant, className, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export type ChipListProps = {
+    list: ChipProps[];
+    className?: string;
+};
+/**
+ * A component for displaying a list of chips
+ */
+export declare const ChipList: ({ list, className }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ChipList.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+/**
+ * A component for displaying a single chip
+ */
+export const 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 (_jsxs("div", { ...restProps, className: clsx(`row w-fit px-2 py-1`, colorMapping, {
+            'rounded-md': variant === 'normal',
+            'rounded-full': variant === 'fullyRounded',
+        }, className), children: [children, trailingIcon && (_jsx("span", { className: colorMappingIcon, children: trailingIcon }))] }));
+};
+/**
+ * A component for displaying a list of chips
+ */
+export const ChipList = ({ list, className = '' }) => {
+    return (_jsx("div", { className: clsx('flex flex-wrap gap-x-4 gap-y-2', className), children: list.map((value, index) => {
+            var _a, _b;
+            return (_jsx(Chip, { ...value, color: (_a = value.color) !== null && _a !== void 0 ? _a : 'dark', variant: (_b = value.variant) !== null && _b !== void 0 ? _b : 'normal', children: value.children }, index));
+        }) }));
+};

package/dist/components/Circle.d.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'react';
+export type CircleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'color'> & {
+    radius: number;
+    className?: string;
+};
+export declare const Circle: ({ radius, className, style, ...restProps }: CircleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Circle.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const Circle = ({ radius = 20, className = 'bg-primary', style, ...restProps }) => {
+    const size = radius * 2;
+    return (_jsx("div", { className: clsx(`rounded-full`, className), style: {
+            width: `${size}px`,
+            height: `${size}px`,
+            ...style,
+        }, ...restProps }));
+};

package/dist/components/ErrorComponent.d.ts

@@ -0,0 +1,13 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type ErrorComponentTranslation = {
+    errorOccurred: string;
+};
+export type ErrorComponentProps = {
+    errorText?: string;
+    classname?: string;
+};
+/**
+ * The Component to show when an error occurred
+ */
+export declare const ErrorComponent: ({ overwriteTranslation, errorText, classname }: PropsForTranslation<ErrorComponentTranslation, ErrorComponentProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ErrorComponent.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertOctagon } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+import clsx from 'clsx';
+const defaultErrorComponentTranslation = {
+    en: {
+        errorOccurred: 'An error occurred'
+    },
+    de: {
+        errorOccurred: 'Ein Fehler ist aufgetreten'
+    }
+};
+/**
+ * The Component to show when an error occurred
+ */
+export const ErrorComponent = ({ overwriteTranslation, errorText, classname }) => {
+    const translation = useTranslation(defaultErrorComponentTranslation, overwriteTranslation);
+    return (_jsxs("div", { className: clsx('col items-center justify-center gap-y-4 w-full h-24', classname), children: [_jsx(AlertOctagon, { size: 64, className: "text-warning" }), errorText !== null && errorText !== void 0 ? errorText : `${translation.errorOccurred} :(`] }));
+};

package/dist/components/Expandable.d.ts

@@ -0,0 +1,30 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+type IconBuilder = (expanded: boolean) => ReactNode;
+export type ExpandableProps = PropsWithChildren<{
+    label: ReactNode;
+    icon?: IconBuilder;
+    initialExpansion?: boolean;
+    /**
+     * Whether the expansion should only happen when the header is clicked or on the entire component
+     */
+    clickOnlyOnHeader?: boolean;
+    className?: string;
+    headerClassName?: string;
+}>;
+/**
+ * A Component for showing and hiding content
+ */
+export declare const Expandable: import("react").ForwardRefExoticComponent<{
+    label: ReactNode;
+    icon?: IconBuilder;
+    initialExpansion?: boolean;
+    /**
+     * Whether the expansion should only happen when the header is clicked or on the entire component
+     */
+    clickOnlyOnHeader?: boolean;
+    className?: string;
+    headerClassName?: string;
+} & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Expandable.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import clsx from 'clsx';
+const DefaultIcon = (expanded) => expanded ?
+    (_jsx(ChevronUp, { size: 16, className: "min-w-[16px]" }))
+    : (_jsx(ChevronDown, { size: 16, className: "min-w-[16px]" }));
+/**
+ * A Component for showing and hiding content
+ */
+export const Expandable = forwardRef(({ children, label, icon, initialExpansion = false, clickOnlyOnHeader = true, className = '', headerClassName = '' }, ref) => {
+    const [isExpanded, setIsExpanded] = useState(initialExpansion);
+    icon !== null && icon !== void 0 ? icon : (icon = DefaultIcon);
+    return (_jsxs("div", { ref: ref, className: clsx('col bg-surface text-on-surface group rounded-lg shadow-sm', { 'cursor-pointer': !clickOnlyOnHeader }, className), onClick: () => !clickOnlyOnHeader && setIsExpanded(!isExpanded), children: [_jsxs("button", { className: clsx('btn-md rounded-lg justify-between items-center bg-surface text-on-surface', { 'group-hover:brightness-95': !isExpanded }, headerClassName), onClick: () => clickOnlyOnHeader && setIsExpanded(!isExpanded), children: [label, icon(isExpanded)] }), isExpanded && (_jsx("div", { className: "col", children: children }))] }));
+});
+Expandable.displayName = 'Expandable';

package/dist/components/HelpwaveBadge.d.ts

@@ -0,0 +1,11 @@
+type Size = 'small' | 'large';
+export type HelpwaveBadgeProps = {
+    size?: Size;
+    title?: string;
+    className?: string;
+};
+/**
+ * A Badge with the helpwave logo and the helpwave name
+ */
+export declare const HelpwaveBadge: ({ size, title, className }: HelpwaveBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HelpwaveBadge.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Helpwave } from './icons/Helpwave';
+import { Tile } from './layout/Tile';
+/**
+ * A Badge with the helpwave logo and the helpwave name
+ */
+export const HelpwaveBadge = ({ size = 'small', title = 'helpwave', className = '' }) => {
+    const iconSize = size === 'small' ? 24 : 64;
+    return (_jsx(Tile, { prefix: (_jsx(Helpwave, { size: iconSize })), title: { value: title, className: size === 'small' ? 'textstyle-title-lg text-base' : 'textstyle-title-xl' }, className: clsx({
+            'px-2 py-1 rounded-md': size === 'small',
+            'px-4 py-1 rounded-md': size === 'large',
+        }, className) }));
+};

package/dist/components/HideableContentSection.d.ts

@@ -0,0 +1,10 @@
+import { type PropsWithChildren, type ReactNode } from 'react';
+export type HideableContentSectionProps = PropsWithChildren & {
+    initiallyOpen?: boolean;
+    disabled: boolean;
+    header: ReactNode;
+};
+/**
+ * A Component to hide and show
+ */
+export declare const HideableContentSection: ({ initiallyOpen, disabled, children, header }: HideableContentSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HideableContentSection.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import clsx from 'clsx';
+/**
+ * A Component to hide and show
+ */
+export const HideableContentSection = ({ initiallyOpen = true, disabled, children, header }) => {
+    const [open, setOpen] = useState(initiallyOpen);
+    return (_jsxs("div", { className: "col", children: [_jsxs("div", { className: clsx('row justify-between items-center', { 'cursor-pointer': !disabled }), onClick: () => {
+                    if (!disabled) {
+                        setOpen(!open);
+                    }
+                }, children: [_jsx("div", { children: header }), !disabled && (open ? _jsx(ChevronUp, {}) : _jsx(ChevronDown, {}))] }), open && (_jsx("div", { children: children }))] }));
+};

package/dist/components/InputGroup.d.ts

@@ -0,0 +1,13 @@
+import type { PropsWithChildren } from 'react';
+export type InputGroupProps = PropsWithChildren<{
+    title: string;
+    expanded?: boolean;
+    isExpandable?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    className?: string;
+}>;
+/**
+ * A Component for layouting inputs in an expandable group
+ */
+export declare const InputGroup: ({ children, title, expanded, isExpandable, disabled, onChange, className, }: InputGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/InputGroup.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import clsx from 'clsx';
+import { noop } from '../util/noop';
+/**
+ * A Component for layouting inputs in an expandable group
+ */
+export const InputGroup = ({ children, title, expanded = true, isExpandable = true, disabled = false, onChange = noop, className = '', }) => {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    return (_jsxs("div", { className: clsx('col gap-y-4 p-4 bg-white rounded-xl', className), children: [_jsxs("div", { className: clsx('row justify-between items-center', {
+                    'cursor-pointer': isExpandable && !disabled,
+                    'cursor-not-allowed': disabled,
+                }, {
+                    'text-primary': !disabled,
+                    'text-primary/40': disabled
+                }), onClick: () => {
+                    if (!isExpandable) {
+                        return;
+                    }
+                    const updatedIsExpanded = !isExpanded;
+                    onChange(updatedIsExpanded);
+                    setIsExpanded(updatedIsExpanded);
+                }, children: [_jsx("span", { className: "textstyle-title-md", children: title }), _jsx("div", { className: clsx('rounded-full text-white w-6 h-6', {
+                            'bg-primary': (isExpandable && !disabled) || expanded,
+                            'bg-primary/40': disabled,
+                        }), children: isExpanded
+                            ? _jsx(ChevronUp, { className: "-translate-y-[1px]", size: 24 })
+                            : _jsx(ChevronDown, { className: "translate-y-[1px]", size: 24 }) })] }), isExpanded && (_jsx("div", { className: "col gap-y-2 h-full", children: children }))] }));
+};

package/dist/components/LoadingAndErrorComponent.d.ts

@@ -0,0 +1,17 @@
+import type { PropsWithChildren } from 'react';
+import type { LoadingAnimationProps } from './LoadingAnimation';
+import type { ErrorComponentProps } from './ErrorComponent';
+export type LoadingAndErrorComponentProps = PropsWithChildren<{
+    isLoading?: boolean;
+    hasError?: boolean;
+    loadingProps?: LoadingAnimationProps;
+    errorProps?: ErrorComponentProps;
+    /**
+     * in milliseconds
+     */
+    minimumLoadingDuration?: number;
+}>;
+/**
+ * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
+ */
+export declare const LoadingAndErrorComponent: ({ children, isLoading, hasError, errorProps, loadingProps, minimumLoadingDuration }: LoadingAndErrorComponentProps) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;

package/dist/components/LoadingAndErrorComponent.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LoadingAnimation } from './LoadingAnimation';
+import { ErrorComponent } from './ErrorComponent';
+/**
+ * A Component that shows the Error and Loading animation, when appropriate and the children otherwise
+ */
+export const LoadingAndErrorComponent = ({ children, isLoading = false, hasError = false, errorProps, loadingProps, minimumLoadingDuration }) => {
+    const [isInMinimumLoading, setIsInMinimumLoading] = useState(false);
+    const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false);
+    if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
+        setIsInMinimumLoading(true);
+        setTimeout(() => {
+            setIsInMinimumLoading(false);
+            setHasUsedMinimumLoading(true);
+        }, minimumLoadingDuration);
+    }
+    if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {
+        return _jsx(LoadingAnimation, { ...loadingProps });
+    }
+    if (hasError) {
+        return _jsx(ErrorComponent, { ...errorProps });
+    }
+    return children;
+};

package/dist/components/LoadingAnimation.d.ts

@@ -0,0 +1,13 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type LoadingAnimationTranslation = {
+    loading: string;
+};
+export type LoadingAnimationProps = {
+    loadingText?: string;
+    classname?: string;
+};
+/**
+ * A Component to show when loading data
+ */
+export declare const LoadingAnimation: ({ overwriteTranslation, loadingText, classname }: PropsForTranslation<LoadingAnimationTranslation, LoadingAnimationProps>) => import("react/jsx-runtime").JSX.Element;
+export {};