@helpwave/hightide 0.0.9 → 0.0.12

package/dist/components/StepperBar.d.ts

@@ -0,0 +1,23 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type StepperBarTranslation = {
+    back: string;
+    next: string;
+    confirm: string;
+};
+export type StepperInformation = {
+    step: number;
+    lastStep: number;
+    seenSteps: Set<number>;
+};
+export type StepperBarProps = {
+    stepper: StepperInformation;
+    onChange: (step: StepperInformation) => void;
+    onFinish: () => void;
+    showDots?: boolean;
+    className?: string;
+};
+/**
+ * A Component for stepping
+ */
+export declare const StepperBar: ({ overwriteTranslation, stepper, onChange, onFinish, showDots, className, }: PropsForTranslation<StepperBarTranslation, StepperBarProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/StepperBar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
+import { useTranslation } from '../hooks/useTranslation';
+import { range } from '../util/array';
+import { SolidButton } from './Button';
+import clsx from 'clsx';
+const defaultStepperBarTranslation = {
+    en: {
+        back: 'Back',
+        next: 'Next Step',
+        confirm: 'Create'
+    },
+    de: {
+        back: 'Zurück',
+        next: 'Nächster Schritt',
+        confirm: 'Erstellen'
+    }
+};
+/**
+ * A Component for stepping
+ */
+export const StepperBar = ({ overwriteTranslation, stepper, onChange, onFinish, showDots = true, className = '', }) => {
+    const translation = useTranslation(defaultStepperBarTranslation, overwriteTranslation);
+    const dots = range(0, stepper.lastStep);
+    const { step, seenSteps, lastStep } = stepper;
+    const update = (newStep) => {
+        seenSteps.add(newStep);
+        onChange({ step: newStep, seenSteps, lastStep });
+    };
+    return (_jsxs("div", { className: clsx('sticky row p-2 border-2 justify-between rounded-lg shadow-lg', className), children: [_jsx("div", { className: "flex-[2] justify-start", children: _jsxs(SolidButton, { disabled: step === 0, onClick: () => {
+                        update(step - 1);
+                    }, className: "row gap-x-1 items-center justify-center", children: [_jsx(ChevronLeft, { size: 14 }), translation.back] }) }), _jsx("div", { className: "row flex-[5] gap-x-2 justify-center items-center", children: showDots && dots.map((value, index) => {
+                    const seen = seenSteps.has(index);
+                    return (_jsx("div", { onClick: () => seen && update(index), className: clsx('rounded-full w-4 h-4', {
+                            'bg-primary hover:brightness-75': index === step && seen,
+                            'bg-primary/40 hover:bg-primary': index !== step && seen,
+                            'bg-gray-200 outline-transparent': !seen,
+                        }, {
+                            'cursor-pointer': seen,
+                            'cursor-not-allowed': !seen,
+                        }) }, index));
+                }) }), step !== lastStep && (_jsx("div", { className: "flex-[2] justify-end", children: _jsxs(SolidButton, { onClick: () => update(step + 1), className: "row gap-x-1 items-center justify-center", children: [translation.next, _jsx(ChevronRight, { size: 14 })] }) })), step === lastStep && (_jsx("div", { className: "flex-[2] justify-end", children: _jsxs(SolidButton
+                // TODO check form validity
+                , { 
+                    // TODO check form validity
+                    disabled: false, onClick: onFinish, className: "row gap-x-1 items-center justify-center", children: [_jsx(Check, { size: 14 }), translation.confirm] }) }))] }));
+};

package/dist/components/Table.d.ts

@@ -0,0 +1,87 @@
+import type { ReactElement } from 'react';
+export type TableStatePagination = {
+    currentPage: number;
+    entriesPerPage: number;
+};
+export declare const defaultTableStatePagination: {
+    currentPage: number;
+    entriesPerPage: number;
+};
+export type TableStateSelection<T> = {
+    currentSelection: T[];
+    hasSelectedAll: boolean;
+    hasSelectedSome: boolean;
+    hasSelectedNone: boolean;
+};
+export declare const defaultTableStateSelection: {
+    currentSelection: never[];
+    hasSelectedAll: boolean;
+    hasSelectedSome: boolean;
+    hasSelectedNone: boolean;
+};
+export type TableState = {
+    pagination?: TableStatePagination;
+    selection?: {
+        /**
+         * The mapped ids of the dataType
+         */
+        currentSelection: string[];
+        hasSelectedAll: boolean;
+        hasSelectedSome: boolean;
+        hasSelectedNone: boolean;
+    };
+};
+type IdentifierMapping<T> = (dataObject: T) => string;
+export declare const isDataObjectSelected: <T>(tableState: TableState, dataObject: T, identifierMapping: IdentifierMapping<T>) => boolean;
+export declare const pageForItem: <T>(data: T[], item: T, entriesPerPage: number, identifierMapping: IdentifierMapping<T>) => number;
+export declare const updatePagination: (pagination: TableStatePagination, dataLength: number) => TableStatePagination;
+export declare const addElementToTable: <T>(tableState: TableState, data: T[], dataObject: T, identifierMapping: IdentifierMapping<T>) => {
+    pagination: {
+        currentPage: number;
+        entriesPerPage: number;
+    } | undefined;
+    selection: {
+        hasSelectedAll: boolean;
+        hasSelectedSome: boolean;
+        /**
+         * The mapped ids of the dataType
+         */
+        currentSelection: string[];
+        hasSelectedNone: boolean;
+    } | undefined;
+};
+/**
+ * data length before delete
+ */
+export declare const removeFromTableSelection: <T>(tableState: TableState, deletedObjects: T[], dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+export declare const changeTableSelectionSingle: <T>(tableState: TableState, dataObject: T, dataLength: number, identifierMapping: IdentifierMapping<T>) => TableState;
+export type TableSortingType = 'ascending' | 'descending';
+export type TableSortingFunctionType<T> = (t1: T, t2: T) => number;
+export type TableProps<T> = {
+    data: T[];
+    /**
+     * When using selection or pagination
+     */
+    stateManagement?: [TableState, (tableState: TableState) => void];
+    identifierMapping: IdentifierMapping<T>;
+    /**
+     * Only the cell itself no boilerplate <tr> or <th> required
+     */
+    header?: ReactElement[];
+    /**
+     * Only the cells of the row no boilerplate <tr> or <td> required
+     */
+    rowMappingToCells: (dataObject: T) => ReactElement[];
+    sorting?: [TableSortingFunctionType<T>, TableSortingType];
+    /**
+     * Always go to the page of this element
+     */
+    focusElement?: T;
+    className?: string;
+};
+/**
+ * A Basic stateless reusable table
+ * The state must be handled and saved with the updateTableState method
+ */
+export declare const Table: <T>({ data, stateManagement, identifierMapping, header, rowMappingToCells, sorting, focusElement, className }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Table.js

@@ -0,0 +1,187 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { useEffect, useRef, useState } from 'react';
+import { noop } from '../util/noop';
+import { Checkbox } from './user-input/Checkbox';
+import { Pagination } from './Pagination';
+import clsx from 'clsx';
+export const defaultTableStatePagination = {
+    currentPage: 0,
+    entriesPerPage: 5
+};
+export const defaultTableStateSelection = {
+    currentSelection: [],
+    hasSelectedAll: false,
+    hasSelectedSome: false,
+    hasSelectedNone: true
+};
+export const isDataObjectSelected = (tableState, dataObject, identifierMapping) => {
+    if (!tableState.selection) {
+        return false;
+    }
+    return !!tableState.selection.currentSelection.find(value => value.localeCompare(identifierMapping(dataObject)) === 0);
+};
+export const pageForItem = (data, item, entriesPerPage, identifierMapping) => {
+    const index = data.findIndex(value => identifierMapping(value) === identifierMapping(item));
+    if (index !== -1) {
+        return Math.floor(index / entriesPerPage);
+    }
+    console.warn("item doesn't exist on data", item, data);
+    return 0;
+};
+export const updatePagination = (pagination, dataLength) => ({
+    ...pagination,
+    currentPage: Math.min(Math.max(Math.ceil(dataLength / pagination.entriesPerPage) - 1, 0), pagination.currentPage)
+});
+export const addElementToTable = (tableState, data, dataObject, identifierMapping) => {
+    return {
+        ...tableState,
+        pagination: tableState.pagination ? {
+            ...tableState.pagination,
+            currentPage: pageForItem(data, dataObject, tableState.pagination.entriesPerPage, identifierMapping)
+        } : undefined,
+        selection: tableState.selection ? {
+            ...tableState.selection,
+            hasSelectedAll: false,
+            hasSelectedSome: tableState.selection.hasSelectedAll || tableState.selection.hasSelectedSome
+        } : undefined
+    };
+};
+/**
+ * data length before delete
+ */
+export const removeFromTableSelection = (tableState, deletedObjects, dataLength, identifierMapping) => {
+    if (!tableState.selection) {
+        return tableState;
+    }
+    const deletedObjectIds = deletedObjects.map(identifierMapping);
+    const elementsBefore = tableState.selection.currentSelection.length;
+    const currentSelection = tableState.selection.currentSelection.filter((value) => !deletedObjectIds.includes(value));
+    dataLength -= elementsBefore - currentSelection.length;
+    return {
+        ...tableState,
+        selection: {
+            currentSelection,
+            hasSelectedAll: currentSelection.length === dataLength && dataLength !== 0,
+            hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
+            hasSelectedNone: currentSelection.length === 0,
+        },
+        pagination: tableState.pagination ? updatePagination(tableState.pagination, dataLength) : undefined
+    };
+};
+export const changeTableSelectionSingle = (tableState, dataObject, dataLength, identifierMapping) => {
+    if (!tableState.selection) {
+        return tableState;
+    }
+    const hasSelectedObject = isDataObjectSelected(tableState, dataObject, identifierMapping);
+    let currentSelection = [...tableState.selection.currentSelection, identifierMapping(dataObject)]; // case !hasSelectedObject
+    if (hasSelectedObject) {
+        currentSelection = tableState.selection.currentSelection.filter(value => value.localeCompare(identifierMapping(dataObject)) !== 0);
+    }
+    return {
+        ...tableState,
+        selection: {
+            currentSelection,
+            hasSelectedAll: currentSelection.length === dataLength,
+            hasSelectedSome: currentSelection.length > 0 && currentSelection.length !== dataLength,
+            hasSelectedNone: currentSelection.length === 0,
+        }
+    };
+};
+const changeTableSelectionAll = (tableState, data, identifierMapping) => {
+    if (!tableState.selection) {
+        return tableState;
+    }
+    if (data.length === 0) {
+        return {
+            ...tableState,
+            selection: {
+                currentSelection: [],
+                hasSelectedAll: false,
+                hasSelectedSome: false,
+                hasSelectedNone: true
+            }
+        };
+    }
+    const hasSelectedAll = !(tableState.selection.hasSelectedSome || tableState.selection.hasSelectedAll);
+    return {
+        ...tableState,
+        selection: {
+            currentSelection: hasSelectedAll ? data.map(identifierMapping) : [],
+            hasSelectedAll,
+            hasSelectedSome: false,
+            hasSelectedNone: !hasSelectedAll
+        }
+    };
+};
+/*  Possible extension for better customization
+    * Map each element to the displayed row
+    * make sure to wrap it in the <tr> and <td> you require
+    rowMappingToHTMLRow?: (dataObject: T) => ReactElement
+ */
+/**
+ * A Basic stateless reusable table
+ * The state must be handled and saved with the updateTableState method
+ */
+export const Table = ({ data, stateManagement = [{}, noop], identifierMapping, header, rowMappingToCells, sorting, focusElement, className }) => {
+    const sortedData = [...data];
+    if (sorting) {
+        const [sortingFunction, sortingType] = sorting;
+        sortedData.sort((a, b) => sortingFunction(a, b) * (sortingType === 'ascending' ? 1 : -1));
+    }
+    let currentPage = 0;
+    let pageCount = 1;
+    let entriesPerPage = 5;
+    const [tableState, updateTableState] = stateManagement;
+    let shownElements = sortedData;
+    if (tableState === null || tableState === void 0 ? void 0 : tableState.pagination) {
+        if (tableState.pagination.entriesPerPage < 1) {
+            console.error('tableState.pagination.entriesPerPage must be >= 1', tableState.pagination.entriesPerPage);
+        }
+        entriesPerPage = Math.max(1, tableState.pagination.entriesPerPage);
+        pageCount = Math.ceil(sortedData.length / entriesPerPage);
+        if (tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0)) {
+            console.error('tableState.pagination.currentPage < 0 || (tableState.pagination.currentPage >= pageCount && pageCount !== 0) must be fullfilled', [`pageCount: ${pageCount}`, `tableState.pagination.currentPage: ${tableState.pagination.currentPage}`]);
+        }
+        else {
+            currentPage = tableState.pagination.currentPage;
+        }
+        if (focusElement) {
+            currentPage = pageForItem(sortedData, focusElement, entriesPerPage, identifierMapping);
+        }
+        shownElements = sortedData.slice(currentPage * entriesPerPage, Math.min(sortedData.length, (currentPage + 1) * entriesPerPage));
+    }
+    else {
+        currentPage = 0;
+    }
+    const headerRow = 'border-b-2 border-gray-300';
+    const headerPaddingHead = 'pb-2';
+    const headerPaddingBody = 'pt-2';
+    const cellPadding = 'py-1 px-2';
+    const [scrollbarsAutoHeightMin, setScrollbarsAutoHeightMin] = useState(0);
+    const tableRef = useRef(null);
+    const calculateHeight = () => {
+        if (tableRef.current) {
+            const tableHeight = tableRef.current.offsetHeight;
+            const offset = 25;
+            setScrollbarsAutoHeightMin(tableHeight + offset);
+        }
+    };
+    useEffect(() => {
+        calculateHeight();
+        // New function to unbind properly
+        const handleResize = () => {
+            calculateHeight();
+        };
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [data, currentPage]);
+    return (_jsxs("div", { className: clsx('col gap-y-4 overflow-hidden', className), children: [_jsx("div", { children: _jsx(Scrollbars, { autoHeight: true, autoHeightMin: scrollbarsAutoHeightMin, children: _jsxs("table", { ref: tableRef, className: "w-full mb-[12px]", children: [_jsx("thead", { children: _jsxs("tr", { className: headerRow, children: [header && tableState.selection && (_jsx("th", { className: headerPaddingHead, children: _jsx(Checkbox, { checked: tableState.selection.hasSelectedSome ? 'indeterminate' : tableState.selection.hasSelectedAll, onChange: () => updateTableState(changeTableSelectionAll(tableState, data, identifierMapping)) }) })), header && header.map((value, index) => (_jsx("th", { className: headerPaddingHead, children: _jsx("div", { className: "row justify-start px-2", children: value }) }, `tableHeader${index}`)))] }) }), _jsx("tbody", { children: shownElements.map((value, rowIndex) => (_jsxs("tr", { children: [tableState.selection && (_jsx("td", { className: clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: _jsx(Checkbox, { checked: isDataObjectSelected(tableState, value, identifierMapping), onChange: () => {
+                                                    updateTableState(changeTableSelectionSingle(tableState, value, data.length, identifierMapping));
+                                                } }) })), rowMappingToCells(value).map((value1, index) => (_jsx("td", { className: clsx(cellPadding, { [headerPaddingBody]: rowIndex === 0 }), children: value1 }, index)))] }, identifierMapping(value)))) })] }) }) }), _jsx("div", { className: "row justify-center", children: tableState.pagination && (_jsx(Pagination, { page: currentPage, numberOfPages: pageCount, onPageChanged: page => updateTableState({
+                        ...tableState,
+                        pagination: { entriesPerPage, currentPage: page }
+                    }) })) })] }));
+};

package/dist/components/TechRadar.d.ts

@@ -0,0 +1,36 @@
+type Config = {
+    colors: {
+        background: string;
+        grid: string;
+        inactive: string;
+    };
+    title: string;
+    quadrants: {
+        name: string;
+    }[];
+    rings: {
+        name: string;
+        color: string;
+    }[];
+    print_layout: boolean;
+    links_in_new_tabs: boolean;
+    zoomed_quadrant?: 0 | 1 | 2 | 3;
+};
+type Entry = {
+    label: string;
+    link?: string;
+    active: boolean;
+    quadrant: 0 | 1 | 2 | 3;
+    ring: 0 | 1 | 2 | 3;
+    moved: -1 | 0 | 1;
+};
+type TechRadarProps = {
+    date?: Date;
+    config?: Config;
+    entries?: Entry[];
+};
+/**
+ * This component wraps https://github.com/zalando/tech-radar
+ */
+export declare const TechRadar: ({ date, config, entries, }: TechRadarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TechRadar.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Script from 'next/script';
+const helpwaveTechRadar = {
+    date: new Date('1/28/2024'),
+    config: {
+        colors: {
+            background: '#fff',
+            grid: '#dddde0',
+            inactive: '#ddd'
+        },
+        title: 'helpwave Tech-Radar',
+        quadrants: [
+            { name: 'Languages' },
+            { name: 'Language dependencies' },
+            { name: 'Infrastructure' },
+            { name: 'Datastores' },
+        ],
+        rings: [
+            { name: 'ADOPT', color: '#5ba300' },
+            { name: 'TRIAL', color: '#009eb0' },
+            { name: 'ASSESS', color: '#c7ba00' },
+            { name: 'HOLD', color: '#e09b96' }
+        ],
+        print_layout: true,
+        links_in_new_tabs: true,
+    },
+    entries: [
+        // Languages
+        {
+            label: 'Golang',
+            active: true,
+            quadrant: 0,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'Python',
+            active: true,
+            quadrant: 0,
+            ring: 2,
+            moved: 0,
+        },
+        {
+            label: 'TypeScript',
+            active: true,
+            quadrant: 0,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'Dart',
+            active: true,
+            quadrant: 0,
+            ring: 0,
+            moved: 0,
+        },
+        // Language dependencies
+        {
+            label: 'Dapr',
+            link: 'https://dapr.io/',
+            active: true,
+            quadrant: 1,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'GORM',
+            active: true,
+            quadrant: 1,
+            ring: 3,
+            moved: -1,
+        },
+        {
+            label: 'SQLc',
+            active: true,
+            quadrant: 1,
+            ring: 0,
+            moved: 1,
+        },
+        {
+            label: 'Flutter',
+            active: true,
+            quadrant: 1,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'Next.js',
+            active: true,
+            quadrant: 1,
+            ring: 0,
+            moved: 0,
+        },
+        // Infrastructure
+        {
+            label: 'Docker',
+            active: true,
+            quadrant: 2,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'Kubernetes',
+            active: true,
+            quadrant: 2,
+            ring: 2,
+            moved: 1,
+        },
+        {
+            label: 'gRPC',
+            active: true,
+            quadrant: 2,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'APISIX',
+            active: true,
+            quadrant: 2,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'GitHub Actions',
+            active: true,
+            quadrant: 2,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'devenv',
+            active: true,
+            quadrant: 2,
+            ring: 1,
+            moved: 0,
+        },
+        // Datastores
+        {
+            label: 'PostgreSQL',
+            active: true,
+            quadrant: 3,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'Redis',
+            active: true,
+            quadrant: 3,
+            ring: 0,
+            moved: 0,
+        },
+        {
+            label: 'EventStoreDB',
+            active: true,
+            quadrant: 3,
+            ring: 1,
+            moved: 0,
+        },
+    ]
+};
+/**
+ * This component wraps https://github.com/zalando/tech-radar
+ */
+export const TechRadar = ({ date = helpwaveTechRadar.date, config = helpwaveTechRadar.config, entries = helpwaveTechRadar.entries, }) => {
+    const [isD3Loaded, setIsD3Loaded] = useState(false);
+    const [isRadarLoaded, setIsRadarLoaded] = useState(false);
+    const dateString = date.toLocaleDateString('en-US', { year: 'numeric', month: 'numeric', day: 'numeric' });
+    useEffect(() => {
+        if (!isD3Loaded || !isRadarLoaded)
+            return;
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        d3.select('svg#radar').select('*').remove();
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        radar_visualization({
+            svg_id: 'radar',
+            width: 1500,
+            height: 1000,
+            date: dateString,
+            entries,
+            ...config,
+        });
+    }, [isD3Loaded, isRadarLoaded, config, entries]); // eslint-disable-line react-hooks/exhaustive-deps
+    return (_jsxs(_Fragment, { children: [_jsx(Script, { src: "https://cdn.helpwave.de/js/d3.v4.min.js", onLoad: () => {
+                    setIsD3Loaded(true);
+                } }), _jsx(Script, { src: "https://cdn.helpwave.de/js/radar-0.8.js", onLoad: () => {
+                    setIsRadarLoaded(true);
+                } }), _jsx("svg", { id: "radar" })] }));
+};

package/dist/components/TextImage.d.ts

@@ -0,0 +1,20 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type TextImageColor = 'primary' | 'secondary' | 'dark';
+type TextImageTranslation = {
+    showMore: string;
+};
+export type TextImageProps = {
+    title: string;
+    description: string;
+    imageUrl: string;
+    onShowMoreClicked?: () => void;
+    color?: TextImageColor;
+    badge?: string;
+    contentClassName?: string;
+    className?: string;
+};
+/**
+ * A Component for layering a Text upon a Image
+ */
+export declare const TextImage: ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color, badge, contentClassName, className, }: PropsForTranslation<TextImageTranslation, TextImageProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TextImage.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from '../hooks/useTranslation';
+import clsx from 'clsx';
+const defaultTextImageTranslation = {
+    de: {
+        showMore: 'Mehr anzeigen'
+    },
+    en: {
+        showMore: 'Show more'
+    }
+};
+/**
+ * A Component for layering a Text upon a Image
+ */
+export const TextImage = ({ overwriteTranslation, title, description, imageUrl, onShowMoreClicked, color = 'primary', badge, contentClassName = '', className = '', }) => {
+    const translation = useTranslation(defaultTextImageTranslation, overwriteTranslation);
+    const chipColorMapping = {
+        primary: 'text-text-image-primary-background bg-text-text-image-primary-text',
+        secondary: 'text-text-image-secondary-background bg-text-text-image-secondary-text',
+        dark: 'text-text-image-dark-background bg-text-text-image-dark-text',
+    };
+    const colorMapping = {
+        primary: 'text-text-image-primary-text bg-linear-to-r from-30% from-text-image-primary-background to-text-image-primary-background/55',
+        secondary: 'text-text-image-secondary-text bg-linear-to-r from-30% from-text-image-secondary-background to-text-image-secondary-background/55',
+        dark: 'text-text-image-dark-text bg-linear-to-r from-30% from-text-image-dark-background to-text-image-dark-background/55',
+    };
+    return (_jsx("div", { className: clsx('rounded-2xl w-full', className), style: {
+            backgroundImage: `url(${imageUrl})`,
+            backgroundSize: 'cover',
+        }, children: _jsxs("div", { className: clsx(`col px-6 py-12 rounded-2xl h-full`, colorMapping[color], contentClassName), children: [badge && (_jsx("div", { className: clsx(`chip-full bg-white mb-2 py-2 px-4 w-fit`, chipColorMapping[color]), children: _jsx("span", { className: "text-lg font-bold", children: badge }) })), _jsxs("div", { className: "col gap-y-1 text-white overflow-hidden", children: [_jsx("span", { className: "textstyle-title-xl", children: title }), _jsx("span", { className: "text-ellipsis overflow-hidden", children: description })] }), onShowMoreClicked && (_jsx("div", { className: "row mt-2 text-white underline", children: _jsx("button", { onClick: onShowMoreClicked, children: translation.showMore }) }))] }) }));
+};

package/dist/components/TimeDisplay.d.ts

@@ -0,0 +1,30 @@
+import type { PropsForTranslation } from '../hooks/useTranslation';
+type TimeDisplayTranslation = {
+    today: string;
+    yesterday: string;
+    tomorrow: string;
+    inDays: (days: number) => string;
+    agoDays: (days: number) => string;
+    january: string;
+    february: string;
+    march: string;
+    april: string;
+    may: string;
+    june: string;
+    july: string;
+    august: string;
+    september: string;
+    october: string;
+    november: string;
+    december: string;
+};
+type TimeDisplayMode = 'daysFromToday' | 'date';
+type TimeDisplayProps = {
+    date: Date;
+    mode?: TimeDisplayMode;
+};
+/**
+ * A Component for displaying time and dates in a unified fashion
+ */
+export declare const TimeDisplay: ({ overwriteTranslation, date, mode }: PropsForTranslation<TimeDisplayTranslation, TimeDisplayProps>) => import("react/jsx-runtime").JSX.Element;
+export {};