@helpwave/hightide 0.0.9 → 0.0.12

package/dist/components/TimeDisplay.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation } from '../hooks/useTranslation';
+const defaultTimeDisplayTranslations = {
+    en: {
+        today: 'today',
+        yesterday: 'yesterday',
+        tomorrow: 'tomorrow',
+        inDays: (days) => `in ${days} days`,
+        agoDays: (days) => `${days} days ago`,
+        january: 'January',
+        february: 'February',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December'
+    },
+    de: {
+        today: 'heute',
+        yesterday: 'gestern',
+        tomorrow: 'morgen',
+        inDays: (days) => `in ${days} Tagen`,
+        agoDays: (days) => `vor ${days} Tagen`,
+        january: 'Januar',
+        february: 'Februar',
+        march: 'März',
+        april: 'April',
+        may: 'Mai',
+        june: 'Juni',
+        july: 'Juli',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December'
+    }
+};
+/**
+ * A Component for displaying time and dates in a unified fashion
+ */
+export const TimeDisplay = ({ overwriteTranslation, date, mode = 'daysFromToday' }) => {
+    const translation = useTranslation(defaultTimeDisplayTranslations, overwriteTranslation);
+    const difference = new Date().setHours(0, 0, 0, 0).valueOf() - new Date(date).setHours(0, 0, 0, 0).valueOf();
+    const isBefore = difference > 0;
+    const differenceInDays = Math.floor(Math.abs(difference) / (1000 * 3600 * 24));
+    let displayString;
+    if (differenceInDays === 0) {
+        displayString = translation.today;
+    }
+    else if (differenceInDays === 1) {
+        displayString = isBefore ? translation.yesterday : translation.tomorrow;
+    }
+    else {
+        displayString = isBefore ? translation.agoDays(differenceInDays) : translation.inDays(differenceInDays);
+    }
+    const monthToTranslation = {
+        0: translation.january,
+        1: translation.february,
+        2: translation.march,
+        3: translation.april,
+        4: translation.may,
+        5: translation.june,
+        6: translation.july,
+        7: translation.august,
+        8: translation.september,
+        9: translation.october,
+        10: translation.november,
+        11: translation.december
+    };
+    let fullString;
+    if (mode === 'daysFromToday') {
+        fullString = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')} - ${displayString}`;
+    }
+    else {
+        fullString = `${date.getDate()}. ${monthToTranslation[date.getMonth()]} ${date.getFullYear()}`;
+    }
+    return (_jsx("span", { children: fullString }));
+};

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,34 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+type Position = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipProps = PropsWithChildren<{
+    tooltip: string | ReactNode;
+    /**
+     * Number of milliseconds until the tooltip appears
+     *
+     * defaults to 1000ms
+     */
+    animationDelay?: number;
+    /**
+     * Class names of additional styling properties for the tooltip
+     */
+    tooltipClassName?: string;
+    /**
+     * Class names of additional styling properties for the container from which the tooltip will be created
+     */
+    containerClassName?: string;
+    position?: Position;
+    zIndex?: number;
+}>;
+/**
+ * A Component for showing a tooltip when hovering over Content
+ * @param tooltip The tooltip to show can be a text or any ReactNode
+ * @param children The Content for which the tooltip should be created
+ * @param animationDelay The delay before the tooltip appears
+ * @param tooltipClassName Additional ClassNames for the Container of the tooltip
+ * @param containerClassName Additional ClassNames for the Container holding the content
+ * @param position The direction of the tooltip relative to the Container
+ * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
+ * @constructor
+ */
+export declare const Tooltip: ({ tooltip, children, animationDelay, tooltipClassName, containerClassName, position, zIndex, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHoverState } from '../hooks/useHoverState';
+import { clsx } from 'clsx';
+/**
+ * A Component for showing a tooltip when hovering over Content
+ * @param tooltip The tooltip to show can be a text or any ReactNode
+ * @param children The Content for which the tooltip should be created
+ * @param animationDelay The delay before the tooltip appears
+ * @param tooltipClassName Additional ClassNames for the Container of the tooltip
+ * @param containerClassName Additional ClassNames for the Container holding the content
+ * @param position The direction of the tooltip relative to the Container
+ * @param zIndex The z Index of the tooltip (you may require this when stacking modals)
+ * @constructor
+ */
+export const Tooltip = ({ tooltip, children, animationDelay = 650, tooltipClassName = '', containerClassName = '', position = 'bottom', zIndex = 10, }) => {
+    const { isHovered, handlers } = useHoverState();
+    const positionClasses = {
+        top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,
+        bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,
+        left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,
+        right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`
+    };
+    const triangleSize = 6;
+    const triangleClasses = {
+        top: `top-full left-1/2 -translate-x-1/2 border-t-gray-600 border-l-transparent border-r-transparent`,
+        bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-gray-600 border-l-transparent border-r-transparent`,
+        left: `left-full top-1/2 -translate-y-1/2 border-l-gray-600 border-t-transparent border-b-transparent`,
+        right: `right-full top-1/2 -translate-y-1/2 border-r-gray-600 border-t-transparent border-b-transparent`
+    };
+    const triangleStyle = {
+        top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },
+        bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },
+        left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },
+        right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }
+    };
+    return (_jsxs("div", { className: clsx('relative inline-block', containerClassName), ...handlers, children: [children, isHovered && (_jsxs("div", { className: clsx(`opacity-0 absolute text-black text-xs font-semibold text-gray-600 px-2 py-1 rounded whitespace-nowrap border-2 border-gray-600
+           animate-tooltip-fade-in shadow-lg bg-gray-100`, positionClasses[position], tooltipClassName), style: { zIndex, animationDelay: animationDelay + 'ms' }, children: [tooltip, _jsx("div", { className: clsx(`absolute w-0 h-0`, triangleClasses[position]), style: { ...triangleStyle[position], zIndex } })] }))] }));
+};

package/dist/components/VerticalDivider.d.ts

@@ -0,0 +1,11 @@
+export type VerticalDividerProps = {
+    width?: number;
+    height?: number;
+    strokeWidth?: number;
+    dashGap?: number;
+    dashLength?: number;
+};
+/**
+ * A Component for creating a vertical Divider
+ */
+export declare const VerticalDivider: ({ width, height, strokeWidth, dashGap, dashLength, }: VerticalDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerticalDivider.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A Component for creating a vertical Divider
+ */
+export const VerticalDivider = ({ width = 1, height = 100, strokeWidth = 4, dashGap = 4, dashLength = 4, }) => {
+    return (_jsx("div", { style: { width: width + 'px', height: height + 'px' }, children: _jsxs("svg", { width: width, height: height, viewBox: `0 0 ${width} ${height}`, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { opacity: "0.5", x1: width / 2, y1: height, x2: width / 2, y2: "0", stroke: "url(#paint_linear)", strokeWidth: strokeWidth, strokeDasharray: `${dashLength} ${dashLength + dashGap}`, strokeLinecap: "round" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint_linear", x1: width / 2, y1: "0", x2: width / 2, y2: height, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopOpacity: "0", stopColor: "currentColor" }), _jsx("stop", { offset: "0.5", stopColor: "currentColor" }), _jsx("stop", { offset: "1", stopColor: "currentColor", stopOpacity: "0" })] }) })] }) }));
+};

package/dist/components/date/DatePicker.d.ts

@@ -0,0 +1,26 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { YearMonthPickerProps } from './YearMonthPicker';
+import type { DayPickerProps } from './DayPicker';
+type DatePickerTranslation = {
+    today: string;
+};
+type DisplayMode = 'yearMonth' | 'day';
+export type DatePickerProps = {
+    value?: Date;
+    start?: Date;
+    end?: Date;
+    initialDisplay?: DisplayMode;
+    onChange?: (date: Date) => void;
+    dayPickerProps?: Omit<DayPickerProps, 'displayedMonth' | 'onChange' | 'selected'>;
+    yearMonthPickerProps?: Omit<YearMonthPickerProps, 'displayedYearMonth' | 'onChange' | 'start' | 'end'>;
+    className?: string;
+};
+/**
+ * A Component for picking a date
+ */
+export declare const DatePicker: ({ overwriteTranslation, value, start, end, initialDisplay, onChange, yearMonthPickerProps, dayPickerProps, className }: PropsForTranslation<DatePickerTranslation, DatePickerProps>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Example for the Date Picker
+ */
+export declare const ControlledDatePicker: ({ value, onChange, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date/DatePicker.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { ArrowDown, ArrowUp, ChevronDown } from 'lucide-react';
+import { useTranslation } from '../../hooks/useTranslation';
+import { noop } from '../../util/noop';
+import { addDuration, isInTimeSpan, subtractDuration } from '../../util/date';
+import clsx from 'clsx';
+import { SolidButton, TextButton } from '../Button';
+import { useLocale } from '../../hooks/useLanguage';
+import { YearMonthPicker } from './YearMonthPicker';
+import { DayPicker } from './DayPicker';
+const defaultDatePickerTranslation = {
+    en: {
+        today: 'Today',
+    },
+    de: {
+        today: 'Heute',
+    }
+};
+/**
+ * A Component for picking a date
+ */
+export const DatePicker = ({ overwriteTranslation, value = new Date(), start = subtractDuration(new Date(), { years: 50 }), end = addDuration(new Date(), { years: 50 }), initialDisplay = 'day', onChange = noop, yearMonthPickerProps, dayPickerProps, className = '' }) => {
+    const locale = useLocale();
+    const translation = useTranslation(defaultDatePickerTranslation, overwriteTranslation);
+    const [displayedMonth, setDisplayedMonth] = useState(value);
+    const [displayMode, setDisplayMode] = useState(initialDisplay);
+    useEffect(() => {
+        setDisplayedMonth(value);
+    }, [value]);
+    return (_jsxs("div", { className: clsx('col gap-y-4', className), children: [_jsxs("div", { className: "row items-center justify-between h-7", children: [_jsxs(TextButton, { className: clsx('row gap-x-1 items-center cursor-pointer select-none', {
+                            'text-disabled-text': displayMode !== 'day',
+                        }), onClick: () => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day'), children: [`${new Intl.DateTimeFormat(locale, { month: 'long' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`, _jsx(ChevronDown, { size: 16 })] }), displayMode === 'day' && (_jsxs("div", { className: "row justify-end", children: [_jsx(SolidButton, { size: "small", color: "primary", disabled: !isInTimeSpan(subtractDuration(displayedMonth, { months: 1 }), start, end), onClick: () => {
+                                    setDisplayedMonth(subtractDuration(displayedMonth, { months: 1 }));
+                                }, children: _jsx(ArrowUp, { size: 20 }) }), _jsx(SolidButton, { size: "small", color: "primary", disabled: !isInTimeSpan(addDuration(displayedMonth, { months: 1 }), start, end), onClick: () => {
+                                    setDisplayedMonth(addDuration(displayedMonth, { months: 1 }));
+                                }, children: _jsx(ArrowDown, { size: 20 }) })] }))] }), displayMode === 'yearMonth' ? (_jsx(YearMonthPicker, { ...yearMonthPickerProps, displayedYearMonth: value, start: start, end: end, onChange: newDate => {
+                    setDisplayedMonth(newDate);
+                    setDisplayMode('day');
+                } })) : (_jsxs("div", { children: [_jsx(DayPicker, { ...dayPickerProps, displayedMonth: displayedMonth, start: start, end: end, selected: value, onChange: date => {
+                            onChange(date);
+                        } }), _jsx("div", { className: "mt-2", children: _jsx(TextButton, { onClick: () => {
+                                const newDate = new Date();
+                                newDate.setHours(value.getHours(), value.getMinutes());
+                                onChange(newDate);
+                            }, children: translation.today }) })] }))] }));
+};
+/**
+ * Example for the Date Picker
+ */
+export const ControlledDatePicker = ({ value = new Date(), onChange = noop, ...props }) => {
+    const [date, setDate] = useState(value);
+    useEffect(() => setDate(value), [value]);
+    return (_jsx(DatePicker, { ...props, value: date, onChange: date1 => {
+            setDate(date1);
+            onChange(date1);
+        } }));
+};

package/dist/components/date/DayPicker.d.ts

@@ -0,0 +1,16 @@
+import type { WeekDay } from '../../util/date';
+export type DayPickerProps = {
+    displayedMonth: Date;
+    selected?: Date;
+    start?: Date;
+    end?: Date;
+    onChange?: (date: Date) => void;
+    weekStart?: WeekDay;
+    markToday?: boolean;
+    className?: string;
+};
+/**
+ * A component for selecting a day of a month
+ */
+export declare const DayPicker: ({ displayedMonth, selected, start, end, onChange, weekStart, markToday, className }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DayPickerControlled: ({ displayedMonth, onChange, ...restProps }: DayPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/DayPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isInTimeSpan } from '../../util/date';
+import { equalDate, getWeeksForCalenderMonth } from '../../util/date';
+import { noop } from '../../util/noop';
+import clsx from 'clsx';
+import { useLocale } from '../../hooks/useLanguage';
+import { useEffect, useState } from 'react';
+/**
+ * A component for selecting a day of a month
+ */
+export const DayPicker = ({ displayedMonth, selected, start, end, onChange = noop, weekStart = 'monday', markToday = true, className = '' }) => {
+    const locale = useLocale();
+    const month = displayedMonth.getMonth();
+    const weeks = getWeeksForCalenderMonth(displayedMonth, weekStart);
+    return (_jsxs("div", { className: clsx('col gap-y-1 min-w-[220px] select-none', className), children: [_jsx("div", { className: "row text-center", children: weeks[0].map((weekDay, index) => (_jsx("div", { className: "flex-1 font-semibold", children: new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(weekDay).substring(0, 2) }, index))) }), weeks.map((week, index) => (_jsx("div", { className: "row text-center", children: week.map((date) => {
+                    const isSelected = !!selected && equalDate(selected, date);
+                    const isToday = equalDate(new Date(), date);
+                    const isSameMonth = date.getMonth() === month;
+                    const isDayValid = isInTimeSpan(date, start, end);
+                    return (_jsx("button", { disabled: !isDayValid, className: clsx('flex-1 rounded-full border-2 border-transparent shadow-sm', {
+                            'text-gray-700 bg-gray-100': !isSameMonth && isDayValid,
+                            'text-black bg-white': !isSelected && isSameMonth && isDayValid,
+                            'text-on-primary bg-primary': isSelected,
+                            'border-black': isToday && markToday,
+                            'hover:brightness-90 hover:bg-primary hover:text-on-primary': isDayValid,
+                            'text-disabled-text bg-disabled-background': !isDayValid
+                        }), onClick: () => onChange(date), children: date.getDate() }, date.getDate()));
+                }) }, index)))] }));
+};
+export const DayPickerControlled = ({ displayedMonth, onChange = noop, ...restProps }) => {
+    const [date, setDate] = useState(displayedMonth);
+    useEffect(() => setDate(displayedMonth), [displayedMonth]);
+    return (_jsx(DayPicker, { displayedMonth: date, onChange: newDate => {
+            setDate(newDate);
+            onChange(newDate);
+        }, ...restProps }));
+};

package/dist/components/date/TimePicker.d.ts

@@ -0,0 +1,12 @@
+type MinuteIncrement = '1min' | '5min' | '10min' | '15min' | '30min';
+export type TimePickerProps = {
+    time?: Date;
+    onChange?: (time: Date) => void;
+    is24HourFormat?: boolean;
+    minuteIncrement?: MinuteIncrement;
+    maxHeight?: number;
+    className?: string;
+};
+export declare const TimePicker: ({ time, onChange, is24HourFormat, minuteIncrement, maxHeight, className }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledTimePicker: ({ time, onChange, ...props }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/date/TimePicker.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { noop } from '../../util/noop';
+import { closestMatch, range } from '../../util/array';
+import clsx from 'clsx';
+export const TimePicker = ({ time = new Date(), onChange = noop, is24HourFormat = true, minuteIncrement = '5min', maxHeight = 300, className = '' }) => {
+    const minuteRef = useRef(null);
+    const hourRef = useRef(null);
+    const isPM = time.getHours() >= 11;
+    const hours = is24HourFormat ? range(0, 23) : range(1, 12);
+    let minutes = range(0, 59);
+    useEffect(() => {
+        const scrollToItem = () => {
+            if (minuteRef.current) {
+                const container = minuteRef.current.parentElement;
+                const hasOverflow = container.scrollHeight > maxHeight;
+                if (hasOverflow) {
+                    minuteRef.current.scrollIntoView({
+                        behavior: 'instant',
+                        block: 'nearest',
+                    });
+                }
+            }
+        };
+        scrollToItem();
+    }, [minuteRef, minuteRef.current]); // eslint-disable-line
+    useEffect(() => {
+        const scrollToItem = () => {
+            if (hourRef.current) {
+                const container = hourRef.current.parentElement;
+                const hasOverflow = container.scrollHeight > maxHeight;
+                if (hasOverflow) {
+                    hourRef.current.scrollIntoView({
+                        behavior: 'instant',
+                        block: 'nearest',
+                    });
+                }
+            }
+        };
+        scrollToItem();
+    }, [hourRef, hourRef.current]); // eslint-disable-line
+    switch (minuteIncrement) {
+        case '5min':
+            minutes = minutes.filter(value => value % 5 === 0);
+            break;
+        case '10min':
+            minutes = minutes.filter(value => value % 10 === 0);
+            break;
+        case '15min':
+            minutes = minutes.filter(value => value % 15 === 0);
+            break;
+        case '30min':
+            minutes = minutes.filter(value => value % 30 === 0);
+            break;
+    }
+    const closestMinute = closestMatch(minutes, (item1, item2) => Math.abs(item1 - time.getMinutes()) < Math.abs(item2 - time.getMinutes()));
+    const style = (selected) => clsx('chip-full hover:brightness-90 hover:bg-primary hover:text-on-primary rounded-md mr-3', { 'bg-primary text-on-primary': selected, 'bg-white text-black': !selected });
+    const onChangeWrapper = (transformer) => {
+        const newDate = new Date(time);
+        transformer(newDate);
+        onChange(newDate);
+    };
+    return (_jsxs("div", { className: clsx('row gap-x-2 w-fit min-w-[150px] select-none', className), children: [_jsx(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: '100%' }, children: _jsx("div", { className: "col gap-y-1 h-full", children: hours.map(hour => {
+                        const currentHour = hour === time.getHours() - (!is24HourFormat && isPM ? 12 : 0);
+                        return (_jsx("button", { ref: currentHour ? hourRef : undefined, className: style(currentHour), onClick: () => onChangeWrapper(newDate => newDate.setHours(hour + (!is24HourFormat && isPM ? 12 : 0))), children: hour.toString().padStart(2, '0') }, hour));
+                    }) }) }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: '100%' }, children: _jsx("div", { className: "col gap-y-1 h-full", children: minutes.map(minute => {
+                        const currentMinute = minute === closestMinute;
+                        return (_jsx("button", { ref: currentMinute ? minuteRef : undefined, className: style(currentMinute), onClick: () => onChangeWrapper(newDate => newDate.setMinutes(minute)), children: minute.toString().padStart(2, '0') }, minute + minuteIncrement));
+                    }) }) }), !is24HourFormat && (_jsxs("div", { className: "col gap-y-1", children: [_jsx("button", { className: style(!isPM), onClick: () => onChangeWrapper(newDate => isPM && newDate.setHours(newDate.getHours() - 12)), children: "AM" }), _jsx("button", { className: style(isPM), onClick: () => onChangeWrapper(newDate => !isPM && newDate.setHours(newDate.getHours() + 12)), children: "PM" })] }))] }));
+};
+export const ControlledTimePicker = ({ time, onChange = noop, ...props }) => {
+    const [value, setValue] = useState(time);
+    useEffect(() => setValue(time), [time]);
+    return (_jsx(TimePicker, { ...props, time: value, onChange: time1 => {
+            setValue(time1);
+            onChange(time1);
+        } }));
+};

package/dist/components/date/YearMonthPicker.d.ts

@@ -0,0 +1,11 @@
+export type YearMonthPickerProps = {
+    displayedYearMonth?: Date;
+    start?: Date;
+    end?: Date;
+    onChange?: (date: Date) => void;
+    className?: string;
+    maxHeight?: number;
+    showValueOpen?: boolean;
+};
+export declare const YearMonthPicker: ({ displayedYearMonth, start, end, onChange, className, maxHeight, showValueOpen }: YearMonthPickerProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ControlledYearMonthPicker: ({ displayedYearMonth, onChange, ...props }: YearMonthPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/YearMonthPicker.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars-2';
+import { noop } from '../../util/noop';
+import { equalSizeGroups, range } from '../../util/array';
+import clsx from 'clsx';
+import { Expandable } from '../Expandable';
+import { addDuration, monthsList, subtractDuration } from '../../util/date';
+import { useLocale } from '../../hooks/useLanguage';
+// TODO use a dynamically loading infinite list here
+export const YearMonthPicker = ({ displayedYearMonth = new Date(), start = subtractDuration(new Date(), { years: 50 }), end = addDuration(new Date(), { years: 50 }), onChange = noop, className = '', maxHeight = 300, showValueOpen = true }) => {
+    const locale = useLocale();
+    const ref = useRef(null);
+    useEffect(() => {
+        const scrollToItem = () => {
+            if (ref.current) {
+                ref.current.scrollIntoView({
+                    behavior: 'instant',
+                    block: 'center',
+                });
+            }
+        };
+        scrollToItem();
+    }, [ref]);
+    if (end < start) {
+        console.error(`startYear: (${start}) less than endYear: (${end})`);
+        return null;
+    }
+    const years = range(start.getFullYear(), end.getFullYear());
+    return (_jsx("div", { className: clsx('col select-none', className), children: _jsx(Scrollbars, { autoHeight: true, autoHeightMax: maxHeight, style: { height: '100%' }, children: _jsx("div", { className: "col gap-y-1 mr-3", children: years.map(year => {
+                    var _a;
+                    const selectedYear = displayedYearMonth.getFullYear() === year;
+                    return (_jsx(Expandable, { ref: ((_a = displayedYearMonth.getFullYear()) !== null && _a !== void 0 ? _a : new Date().getFullYear()) === year ? ref : undefined, label: _jsx("span", { className: clsx({ 'text-primary font-bold': selectedYear }), children: year }), initialExpansion: showValueOpen && selectedYear, children: _jsx("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => (_jsx("div", { className: "row", children: monthList.map(month => {
+                                    const monthIndex = monthsList.indexOf(month);
+                                    const newDate = new Date(year, monthIndex);
+                                    const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
+                                    const firstOfMonth = new Date(year, monthIndex, 1);
+                                    const lastOfMonth = new Date(year, monthIndex, 1);
+                                    const isAfterStart = start === undefined || start <= addDuration(subtractDuration(lastOfMonth, { days: 1 }), { months: 1 });
+                                    const isBeforeEnd = end === undefined || firstOfMonth <= end;
+                                    const isValid = isAfterStart && isBeforeEnd;
+                                    return (_jsx("button", { disabled: !isValid, className: clsx('chip hover:brightness-95 flex-1', {
+                                            'bg-gray-50 text-black': !selectedMonth && isValid,
+                                            'bg-primary text-on-primary': selectedMonth && isValid,
+                                            'bg-disabled-background text-disabled-text': !isValid
+                                        }), onClick: () => {
+                                            onChange(newDate);
+                                        }, children: new Intl.DateTimeFormat(locale, { month: 'short' }).format(newDate) }, month));
+                                }) }, index))) }) }, year));
+                }) }) }) }));
+};
+export const ControlledYearMonthPicker = ({ displayedYearMonth = new Date(), onChange = noop, ...props }) => {
+    const [yearMonth, setYearMonth] = useState(displayedYearMonth);
+    useEffect(() => setYearMonth(displayedYearMonth), [displayedYearMonth]);
+    return (_jsx(YearMonthPicker, { displayedYearMonth: yearMonth, onChange: date => {
+            setYearMonth(date);
+            onChange(date);
+        }, ...props }));
+};

package/dist/components/examples/InputGroupExample.d.ts

@@ -0,0 +1,6 @@
+import type { InputGroupProps } from '../InputGroup';
+export type InputGroupExampleProps = Omit<InputGroupProps, 'inputs' | 'onChange'>;
+/**
+ * Example for an Input Group
+ */
+export declare const InputGroupExample: ({ ...props }: InputGroupExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/InputGroupExample.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { InputGroup } from '../InputGroup';
+import { Select } from '../user-input/Select';
+import { Input } from '../user-input/Input';
+import { Textarea } from '../user-input/Textarea';
+/**
+ * Example for an Input Group
+ */
+export const InputGroupExample = ({ ...props }) => {
+    const [state, setState] = useState({
+        propertyName: '',
+        description: ''
+    });
+    return (_jsxs(InputGroup, { ...props, onChange: console.log, children: [_jsx(Select, { label: { name: 'Subject Type', labelType: 'labelSmall' }, value: state.subject, options: [
+                    { value: 'organization', label: 'Organization' },
+                    { value: 'ward', label: 'Ward' },
+                    { value: 'bed', label: 'Bed' },
+                    { value: 'patient', label: 'Patient' },
+                ], onChange: subject => setState({ ...state, subject }) }, "item1"), _jsx(Input, { label: { name: 'Property Name' }, value: state.propertyName, onChange: propertyName => setState({ ...state, propertyName }) }, "item2"), _jsx(Textarea, { label: { name: 'Description' }, value: state.description, onChange: description => setState({ ...state, description }) }, "item3")] }));
+};

package/dist/components/examples/MultiSelectExample.d.ts

@@ -0,0 +1,7 @@
+import type { MultiSelectProps } from '../user-input/MultiSelect';
+type MultiSelectExampleProps = Omit<MultiSelectProps<string>, 'search' | 'selectedDisplay'> & {
+    enableSearch: boolean;
+    useChipDisplay: boolean;
+};
+export declare const MultiSelectExample: ({ options, hintText, enableSearch, onChange, useChipDisplay, ...props }: MultiSelectExampleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/examples/MultiSelectExample.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { MultiSelect } from '../user-input/MultiSelect';
+import { ChipList } from '../ChipList';
+export const MultiSelectExample = ({ options, hintText, enableSearch, onChange, useChipDisplay = false, ...props }) => {
+    const [usedOptions, setUsedOptions] = useState(options);
+    useEffect(() => {
+        setUsedOptions(options);
+    }, [options]);
+    useEffect(() => {
+        setUsedOptions(options);
+    }, [options]);
+    useEffect(() => {
+        setUsedOptions(options.map(value => ({ ...value, selected: false })));
+    }, [hintText, options]);
+    return (_jsx(MultiSelect, { options: usedOptions, onChange: value => {
+            onChange(value);
+            setUsedOptions(value);
+        }, hintText: hintText, search: enableSearch ? { initialSearch: '', searchMapping: value => [value.label] } : undefined, selectedDisplay: useChipDisplay ?
+            ({ items }) => {
+                const selected = items.filter(value => value.selected);
+                if (selected.length === 0) {
+                    return (_jsx("span", { children: "Select" }));
+                }
+                return (_jsx(ChipList, { list: selected.map(value => ({ children: value.label })) }));
+            } : undefined, ...props }));
+};

package/dist/components/examples/SearchableSelectExample.d.ts

@@ -0,0 +1,6 @@
+import type { SearchableSelectProps } from '../user-input/SearchableSelect';
+export type SearchableSelectExampleProps = Omit<SearchableSelectProps<string>, 'searchMapping' | 'additionalItems'>;
+/**
+ * Example for a Searchable select
+ */
+export declare const SearchableSelectExample: ({ value, options, onChange, ...props }: SearchableSelectExampleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/SearchableSelectExample.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { SearchableSelect } from '../user-input/SearchableSelect';
+/**
+ * Example for a Searchable select
+ */
+export const SearchableSelectExample = ({ value, options, onChange, ...props }) => {
+    const [selected, setSelected] = useState(value);
+    useEffect(() => {
+        var _a;
+        setSelected((_a = options.find(value1 => value1.value === value)) === null || _a === void 0 ? void 0 : _a.value);
+    }, [options, value]);
+    return (_jsx(SearchableSelect, { ...props, value: selected, options: options, onChange: value => {
+            setSelected(value);
+            onChange(value);
+        }, searchMapping: value1 => [value1.value] }));
+};

package/dist/components/examples/SelectExample.d.ts

@@ -0,0 +1,4 @@
+import { type SelectProps } from '../user-input/Select';
+type SelectExampleProps<T> = Omit<SelectProps<T>, 'onChange' | 'additionalItems' | 'selectedDisplayOverwrite'>;
+export declare const SelectExample: <T>({ options, value, hintText, ...props }: SelectExampleProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/examples/SelectExample.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Select } from '../user-input/Select';
+export const SelectExample = ({ options, value, hintText, ...props }) => {
+    const [selected, setSelected] = useState(value);
+    useEffect(() => {
+        if (options.find(options => options.value === value)) {
+            setSelected(value);
+        }
+    }, [options, value]);
+    useEffect(() => {
+        setSelected(undefined);
+    }, [hintText]);
+    return (_jsx(Select, { value: selected, options: options, onChange: value => setSelected(value), hintText: hintText, ...props }));
+};

package/dist/components/examples/StackingModals.d.ts

@@ -0,0 +1,4 @@
+/**
+ * An Example Component for Stacking Modals
+ */
+export declare const StackingModals: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/examples/StackingModals.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { ModalRegister } from '../modals/ModalRegister';
+import { ConfirmDialog } from '../modals/ConfirmDialog';
+import { SolidButton } from '../Button';
+import { modalRootName } from '../modals/Modal';
+/**
+ * An Example Component for Stacking Modals
+ */
+export const StackingModals = () => {
+    const [modal1, setModal1] = useState(false);
+    const [modal2, setModal2] = useState(false);
+    const [modal3, setModal3] = useState(false);
+    return (_jsxs(ModalRegister, { children: [_jsxs(ConfirmDialog, { id: "1", isOpen: modal1, onConfirm: () => setModal1(false), onBackgroundClick: () => setModal1(false), onCloseClick: () => setModal1(false), modalClassName: "!bg-yellow-200 min-h-[300px]", children: ['I\'m Modal 1', _jsx(SolidButton, { onClick: () => setModal2(true), children: "Open Modal 2" })] }), _jsxs(ConfirmDialog, { id: "2", isOpen: modal2, onConfirm: () => setModal2(false), onBackgroundClick: () => setModal2(false), onCloseClick: () => setModal2(false), modalClassName: "!bg-green-200 min-w-[300px]", children: ['The next layer of Modals!', 'This is Modal 2', _jsx(SolidButton, { onClick: () => setModal3(true), children: "Open Modal 3" })] }), _jsx(ConfirmDialog, { id: "3", isOpen: modal3, onConfirm: () => setModal3(false), onBackgroundClick: () => setModal3(false), onCloseClick: () => setModal3(false), children: "This is Modal 3!" }), _jsx("div", { className: "row items-center justify-center min-h-[400px]", id: modalRootName, children: _jsx(SolidButton, { onClick: () => setModal1(true), children: "Open Modal 1" }) })] }));
+};