@helpwave/hightide 0.0.8 → 0.0.11

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

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+export type ModalContextType = {
+    register: string[];
+    addToRegister: (id: string) => void;
+    removeFromRegister: (id: string) => void;
+};
+export declare const ModalContext: import("react").Context<ModalContextType>;
+/**
+ * A Simple Wrapper for the context
+ */
+export declare const ModalRegister: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/modals/ModalRegister.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useState } from 'react';
+import { noop } from '../../util/noop';
+export const ModalContext = createContext({
+    register: [],
+    addToRegister: noop,
+    removeFromRegister: noop,
+});
+/**
+ * A Simple Wrapper for the context
+ */
+export const ModalRegister = ({ children }) => {
+    const [register, setRegister] = useState([]);
+    const inRegister = (id) => {
+        return !!register.find(value => value === id);
+    };
+    const addToRegister = (id) => {
+        if (!inRegister(id)) {
+            setRegister([...register, id]);
+        }
+    };
+    const removeFromRegister = (id) => {
+        if (inRegister(id)) {
+            setRegister(register.filter(value => value !== id));
+        }
+    };
+    return (_jsx(ModalContext.Provider, { value: { register, addToRegister, removeFromRegister }, children: children }));
+};

package/dist/components/properties/CheckboxProperty.d.ts

@@ -0,0 +1,15 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { PropertyBaseProps } from './PropertyBase';
+type CheckboxPropertyTranslation = {
+    yes: string;
+    no: string;
+};
+export type CheckboxPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue' | 'onRemove'> & {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+};
+/**
+ * An Input for a boolen properties
+ */
+export declare const CheckboxProperty: ({ overwriteTranslation, value, onChange, readOnly, ...baseProps }: PropsForTranslation<CheckboxPropertyTranslation, CheckboxPropertyProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/CheckboxProperty.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { noop } from '../../util/noop';
+import { Checkbox } from '../user-input/Checkbox';
+import { useTranslation } from '../../hooks/useTranslation';
+import { PropertyBase } from './PropertyBase';
+const defaultCheckboxPropertyTranslation = {
+    en: {
+        yes: 'Yes',
+        no: 'No'
+    },
+    de: {
+        yes: 'Ja',
+        no: 'Nein'
+    }
+};
+/**
+ * An Input for a boolen properties
+ */
+export const CheckboxProperty = ({ overwriteTranslation, value, onChange = noop, readOnly, ...baseProps }) => {
+    const translation = useTranslation(defaultCheckboxPropertyTranslation, overwriteTranslation);
+    return (_jsx(PropertyBase, { ...baseProps, hasValue: true, readOnly: readOnly, icon: _jsx(Check, { size: 16 }), input: () => (_jsx("div", { className: "row py-2 px-4 items-center", children: _jsx(Checkbox
+            // TODO make bigger as in #904
+            , { 
+                // TODO make bigger as in #904
+                checked: value !== null && value !== void 0 ? value : true, disabled: readOnly, onChange: onChange, label: { name: `${translation.yes}/${translation.no}`, labelType: 'labelMedium' } }) })) }));
+};

package/dist/components/properties/DateProperty.d.ts

@@ -0,0 +1,11 @@
+import type { PropertyBaseProps } from './PropertyBase';
+export type DatePropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    onEditComplete?: (value: Date) => void;
+    type?: 'dateTime' | 'date';
+};
+/**
+ * An Input for date properties
+ */
+export declare const DateProperty: ({ value, onChange, onEditComplete, readOnly, type, ...baseProps }: DatePropertyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/properties/DateProperty.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CalendarDays } from 'lucide-react';
+import clsx from 'clsx';
+import { formatDate, formatDateTime } from '../../util/date';
+import { noop } from '../../util/noop';
+import { Input } from '../user-input/Input';
+import { PropertyBase } from './PropertyBase';
+/**
+ * An Input for date properties
+ */
+export const DateProperty = ({ value, onChange = noop, onEditComplete = noop, readOnly, type = 'dateTime', ...baseProps }) => {
+    const hasValue = !!value;
+    const dateText = value ? (type === 'dateTime' ? formatDateTime(value) : formatDate(value)) : '';
+    return (_jsx(PropertyBase, { ...baseProps, hasValue: hasValue, icon: _jsx(CalendarDays, { size: 16 }), input: ({ softRequired }) => (_jsx("div", { className: clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue }), children: _jsx(Input, { className: clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !w-fit !rounded-none', { 'bg-surface-warning': softRequired && !hasValue }), value: dateText, type: type === 'dateTime' ? 'datetime-local' : 'date', readOnly: readOnly, onChange: (value, event) => {
+                    if (!event.target.value) {
+                        event.preventDefault();
+                        return;
+                    }
+                    const dueDate = new Date(value);
+                    onChange(dueDate);
+                }, onEditCompleted: (value) => onEditComplete(new Date(value)) }) })) }));
+};

package/dist/components/properties/MultiSelectProperty.d.ts

@@ -0,0 +1,12 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { MultiSelectProps } from '../user-input/MultiSelect';
+import type { PropertyBaseProps } from './PropertyBase';
+type MultiSelectPropertyTranslation = {
+    select: string;
+};
+export type MultiSelectPropertyProps<T> = Omit<PropertyBaseProps & MultiSelectProps<T>, 'icon' | 'input' | 'hasValue' | 'className' | 'disabled' | 'label' | 'triggerClassName'>;
+/**
+ * An Input for MultiSelect properties
+ */
+export declare const MultiSelectProperty: <T>({ overwriteTranslation, options, name, readOnly, softRequired, onRemove, ...multiSelectProps }: PropsForTranslation<MultiSelectPropertyTranslation, MultiSelectPropertyProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/MultiSelectProperty.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../../hooks/useTranslation';
+import { MultiSelect } from '../user-input/MultiSelect';
+import { ChipList } from '../ChipList';
+import { PropertyBase } from './PropertyBase';
+const defaultMultiSelectPropertyTranslation = {
+    en: {
+        select: 'Select'
+    },
+    de: {
+        select: 'Auswählen'
+    }
+};
+/**
+ * An Input for MultiSelect properties
+ */
+export const MultiSelectProperty = ({ overwriteTranslation, options, name, readOnly = false, softRequired, onRemove, ...multiSelectProps }) => {
+    const translation = useTranslation(defaultMultiSelectPropertyTranslation, overwriteTranslation);
+    const hasValue = options.some(value => value.selected);
+    let triggerClassName;
+    if (softRequired && !hasValue) {
+        triggerClassName = 'border-warning hover:brightness-90';
+    }
+    return (_jsx(PropertyBase, { name: name, onRemove: onRemove, readOnly: readOnly, softRequired: softRequired, hasValue: hasValue, icon: _jsx(List, { size: 16 }), input: ({ softRequired }) => (_jsx("div", { className: clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue }), children: _jsx(MultiSelect, { ...multiSelectProps, className: clsx('w-full', { 'bg-surface-warning': softRequired && !hasValue }), triggerClassName: triggerClassName, selectedDisplay: ({ 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 })) }));
+                }, options: options, disabled: readOnly, hintText: `${translation.select}...` }) })) }));
+};

package/dist/components/properties/NumberProperty.d.ts

@@ -0,0 +1,16 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { PropertyBaseProps } from './PropertyBase';
+type NumberPropertyTranslation = {
+    value: string;
+};
+export type NumberPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
+    value?: number;
+    suffix?: string;
+    onChange?: (value: number) => void;
+    onEditComplete?: (value: number) => void;
+};
+/**
+ * An Input for number properties
+ */
+export declare const NumberProperty: ({ overwriteTranslation, value, onChange, onRemove, onEditComplete, readOnly, suffix, ...baseProps }: PropsForTranslation<NumberPropertyTranslation, NumberPropertyProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/NumberProperty.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Binary } from 'lucide-react';
+import clsx from 'clsx';
+import { noop } from '../../util/noop';
+import { Input } from '../user-input/Input';
+import { useTranslation } from '../../hooks/useTranslation';
+import { PropertyBase } from './PropertyBase';
+const defaultNumberPropertyTranslation = {
+    en: {
+        value: 'Value'
+    },
+    de: {
+        value: 'Wert'
+    }
+};
+/**
+ * An Input for number properties
+ */
+export const NumberProperty = ({ overwriteTranslation, value, onChange = noop, onRemove = noop, onEditComplete = noop, readOnly, suffix, ...baseProps }) => {
+    const translation = useTranslation(defaultNumberPropertyTranslation, overwriteTranslation);
+    const hasValue = value !== undefined;
+    return (_jsx(PropertyBase, { ...baseProps, onRemove: onRemove, hasValue: hasValue, icon: _jsx(Binary, { size: 16 }), input: ({ softRequired }) => {
+            var _a;
+            return (_jsxs("div", { className: clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue }), children: [_jsx(Input, { expanded: false, className: clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !w-fit !shadow-none !rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue }), value: (_a = value === null || value === void 0 ? void 0 : value.toString()) !== null && _a !== void 0 ? _a : '', type: "number", readOnly: readOnly, placeholder: `${translation.value}...`, onChange: (value) => {
+                            const numberValue = parseFloat(value);
+                            if (isNaN(numberValue)) {
+                                onRemove();
+                            }
+                            else {
+                                onChange(numberValue);
+                            }
+                        }, onEditCompleted: (value) => {
+                            const numberValue = parseFloat(value);
+                            if (isNaN(numberValue)) {
+                                onRemove();
+                            }
+                            else {
+                                onEditComplete(numberValue);
+                            }
+                        } }), suffix && _jsx("span", { className: clsx('ml-1', { 'bg-surface-warning': softRequired && !hasValue }), children: suffix })] }));
+        } }));
+};

package/dist/components/properties/PropertyBase.d.ts

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+type PropertyBaseTranslation = {
+    remove: string;
+};
+export type PropertyBaseProps = {
+    name: string;
+    input: (props: {
+        softRequired: boolean;
+        hasValue: boolean;
+    }) => ReactNode;
+    onRemove?: () => void;
+    hasValue: boolean;
+    softRequired?: boolean;
+    readOnly?: boolean;
+    icon?: ReactNode;
+    className?: string;
+};
+/**
+ * A component for showing a properties with uniform styling
+ */
+export declare const PropertyBase: ({ overwriteTranslation, name, input, softRequired, hasValue, icon, readOnly, onRemove, className, }: PropsForTranslation<PropertyBaseTranslation, PropertyBaseProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/PropertyBase.js

@@ -0,0 +1,27 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { AlertTriangle } from 'lucide-react';
+import clsx from 'clsx';
+import { TextButton } from '../Button';
+import { useTranslation } from '../../hooks/useTranslation';
+const defaultPropertyBaseTranslation = {
+    en: {
+        remove: 'Remove'
+    },
+    de: {
+        remove: 'Entfernen'
+    }
+};
+/**
+ * A component for showing a properties with uniform styling
+ */
+export const PropertyBase = ({ overwriteTranslation, name, input, softRequired = false, hasValue, icon, readOnly, onRemove, className = '', }) => {
+    const translation = useTranslation(defaultPropertyBaseTranslation, overwriteTranslation);
+    const requiredAndNoValue = softRequired && !hasValue;
+    return (_jsxs("div", { className: clsx('row gap-x-0 group', className), children: [_jsxs("div", { className: clsx('row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0', {
+                    'bg-gray-100 text-black group-hover:border-primary border-gray-400': !requiredAndNoValue,
+                    'bg-warning text-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,
+                }, className), children: [icon, name] }), _jsxs("div", { className: clsx('row grow justify-between items-center rounded-r-xl border-2 border-l-0', {
+                    'bg-white group-hover:border-primary border-gray-400': !requiredAndNoValue,
+                    'bg-surface-warning group-hover:border-warning border-warning/90': requiredAndNoValue,
+                }, className), children: [input({ softRequired, hasValue }), requiredAndNoValue && (_jsx("div", { className: "text-warning pr-4", children: _jsx(AlertTriangle, { size: 24 }) })), onRemove && (_jsx(TextButton, { onClick: onRemove, color: "negative", className: clsx('pr-4 items-center', { '!text-transparent': !hasValue || readOnly }), disabled: !hasValue || readOnly, children: translation.remove }))] })] }));
+};

package/dist/components/properties/SelectProperty.d.ts

@@ -0,0 +1,12 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { SearchableSelectProps } from '../user-input/SearchableSelect';
+import type { PropertyBaseProps } from './PropertyBase';
+type SingleSelectPropertyTranslation = {
+    select: string;
+};
+export type SingleSelectPropertyProps<T> = Omit<PropertyBaseProps & SearchableSelectProps<T>, 'icon' | 'input' | 'hasValue' | 'className' | 'disabled' | 'label' | 'labelClassName' | 'additionalItems'>;
+/**
+ * An Input for SingleSelect properties
+ */
+export declare const SingleSelectProperty: <T>({ overwriteTranslation, value, options, name, readOnly, softRequired, onRemove, ...multiSelectProps }: PropsForTranslation<SingleSelectPropertyTranslation, SingleSelectPropertyProps<T>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/SelectProperty.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { List } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../../hooks/useTranslation';
+import { SearchableSelect } from '../user-input/SearchableSelect';
+import { PropertyBase } from './PropertyBase';
+const defaultSingleSelectPropertyTranslation = {
+    en: {
+        select: 'Select'
+    },
+    de: {
+        select: 'Auswählen'
+    }
+};
+/**
+ * An Input for SingleSelect properties
+ */
+export const SingleSelectProperty = ({ overwriteTranslation, value, options, name, readOnly = false, softRequired, onRemove, ...multiSelectProps }) => {
+    const translation = useTranslation(defaultSingleSelectPropertyTranslation, overwriteTranslation);
+    const hasValue = value !== undefined;
+    return (_jsx(PropertyBase, { name: name, onRemove: onRemove, readOnly: readOnly, softRequired: softRequired, hasValue: hasValue, icon: _jsx(List, { size: 16 }), input: ({ softRequired }) => (_jsx("div", { className: clsx('row grow py-2 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue }), children: _jsx(SearchableSelect, { ...multiSelectProps, value: value, options: options, isDisabled: readOnly, className: clsx('w-full', { 'bg-surface-warning': softRequired && !hasValue }), hintText: `${translation.select}...` }) })) }));
+};

package/dist/components/properties/TextProperty.d.ts

@@ -0,0 +1,15 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { PropertyBaseProps } from './PropertyBase';
+type TextPropertyTranslation = {
+    value: string;
+};
+export type TextPropertyProps = Omit<PropertyBaseProps, 'icon' | 'input' | 'hasValue'> & {
+    value?: string;
+    onChange?: (value: string) => void;
+    onEditComplete?: (value: string) => void;
+};
+/**
+ * An Input for Text properties
+ */
+export declare const TextProperty: ({ overwriteTranslation, value, readOnly, onChange, onRemove, onEditComplete, ...baseProps }: PropsForTranslation<TextPropertyTranslation, TextPropertyProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/properties/TextProperty.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'lucide-react';
+import clsx from 'clsx';
+import { useTranslation } from '../../hooks/useTranslation';
+import { Textarea } from '../user-input/Textarea';
+import { noop } from '../../util/noop';
+import { PropertyBase } from './PropertyBase';
+const defaultTextPropertyTranslation = {
+    en: {
+        value: 'Text'
+    },
+    de: {
+        value: 'Text'
+    }
+};
+/**
+ * An Input for Text properties
+ */
+export const TextProperty = ({ overwriteTranslation, value, readOnly, onChange = noop, onRemove = noop, onEditComplete = noop, ...baseProps }) => {
+    const translation = useTranslation(defaultTextPropertyTranslation, overwriteTranslation);
+    const hasValue = value !== undefined;
+    return (_jsx(PropertyBase, { ...baseProps, onRemove: onRemove, hasValue: hasValue, icon: _jsx(Text, { size: 16 }), input: ({ softRequired }) => (_jsx("div", { className: clsx('row grow pt-2 pb-1 px-4 cursor-pointer', { 'text-warning': softRequired && !hasValue }), children: _jsx(Textarea, { className: clsx('!ring-0 !border-0 !outline-0 !p-0 !m-0 !shadow-none !rounded-none', { 'bg-surface-warning placeholder-warning': softRequired && !hasValue }), rows: 5, defaultStyle: false, value: value !== null && value !== void 0 ? value : '', readOnly: readOnly, placeholder: `${translation.value}...`, onChange: (value) => {
+                    if (!value) {
+                        onRemove();
+                    }
+                    else {
+                        onChange(value);
+                    }
+                }, onEditCompleted: (value) => {
+                    if (!value) {
+                        onRemove();
+                    }
+                    else {
+                        onEditComplete(value);
+                    }
+                } }) })) }));
+};

package/dist/components/user-input/Checkbox.d.ts

@@ -0,0 +1,37 @@
+import type { CheckedState } from '@radix-ui/react-checkbox';
+import type { LabelProps } from './Label';
+type CheckBoxSize = 'small' | 'medium' | 'large';
+type CheckboxProps = {
+    /** used for the label's `for` attribute */
+    id?: string;
+    label?: Omit<LabelProps, 'id'>;
+    /**
+     * @default false
+     */
+    checked: CheckedState;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    onChangeTristate?: (checked: CheckedState) => void;
+    size?: CheckBoxSize;
+    className?: string;
+    containerClassName?: string;
+};
+/**
+ * A Tristate checkbox
+ *
+ * The state is managed by the parent
+ */
+declare const ControlledCheckbox: ({ id, label, checked, disabled, onChange, onChangeTristate, size, className, containerClassName }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+type UncontrolledCheckboxProps = Omit<CheckboxProps, 'value' | 'checked'> & {
+    /**
+     * @default false
+     */
+    defaultValue?: CheckedState;
+};
+/**
+ * A Tristate checkbox
+ *
+ * The state is managed by this component
+ */
+declare const UncontrolledCheckbox: ({ onChange, onChangeTristate, defaultValue, ...props }: UncontrolledCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export { UncontrolledCheckbox, ControlledCheckbox as Checkbox };

package/dist/components/user-input/Checkbox.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check, Minus } from 'lucide-react';
+import clsx from 'clsx';
+import { Label } from './Label';
+const checkboxSizeMapping = {
+    small: 'size-4',
+    medium: 'size-6',
+    large: 'size-8',
+};
+const checkboxIconSizeMapping = {
+    small: 'size-3',
+    medium: 'size-5',
+    large: 'size-7',
+};
+/**
+ * A Tristate checkbox
+ *
+ * The state is managed by the parent
+ */
+const ControlledCheckbox = ({ id, label, checked, disabled, onChange, onChangeTristate, size = 'medium', className = '', containerClassName }) => {
+    const usedSizeClass = checkboxSizeMapping[size];
+    const innerIconSize = checkboxIconSizeMapping[size];
+    const propagateChange = (checked) => {
+        if (onChangeTristate) {
+            onChangeTristate(checked);
+        }
+        if (onChange) {
+            onChange(checked === 'indeterminate' ? false : checked);
+        }
+    };
+    const changeValue = () => {
+        const newValue = checked === 'indeterminate' ? false : !checked;
+        propagateChange(newValue);
+    };
+    return (_jsxs("div", { className: clsx('row justify-center items-center', containerClassName), children: [_jsx(CheckboxPrimitive.Root, { onCheckedChange: propagateChange, checked: checked, disabled: disabled, id: id, className: clsx(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
+                    'text-disabled-text border-disabled-text': disabled,
+                    'border-on-background': !disabled,
+                    'bg-primary/30 border-primary text-primary': checked === true || checked === 'indeterminate',
+                    'hover:border-gray-400 focus:hover:border-primary': !checked
+                }, className), children: _jsxs(CheckboxPrimitive.Indicator, { children: [checked === true && _jsx(Check, { className: innerIconSize }), checked === 'indeterminate' && _jsx(Minus, { className: innerIconSize })] }) }), label &&
+                _jsx(Label, { ...label, className: clsx('cursor-pointer', label.className), htmlFor: id, onClick: changeValue })] }));
+};
+/**
+ * A Tristate checkbox
+ *
+ * The state is managed by this component
+ */
+const UncontrolledCheckbox = ({ onChange, onChangeTristate, defaultValue = false, ...props }) => {
+    const [checked, setChecked] = useState(defaultValue);
+    const handleChange = (checked) => {
+        if (onChangeTristate) {
+            onChangeTristate(checked);
+        }
+        if (onChange) {
+            onChange(checked === 'indeterminate' ? false : checked);
+        }
+        setChecked(checked);
+    };
+    return (_jsx(ControlledCheckbox, { ...props, checked: checked, onChangeTristate: handleChange }));
+};
+export { UncontrolledCheckbox, ControlledCheckbox as Checkbox };

package/dist/components/user-input/DateAndTimePicker.d.ts

@@ -0,0 +1,39 @@
+import type { PropsForTranslation } from '../../hooks/useTranslation';
+import type { TimePickerProps } from '../date/TimePicker';
+import type { DatePickerProps } from '../date/DatePicker';
+type TimeTranslation = {
+    clear: string;
+    change: string;
+    year: string;
+    month: string;
+    day: 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;
+};
+export type DateTimePickerMode = 'date' | 'time' | 'dateTime';
+export type DateTimePickerProps = {
+    mode?: DateTimePickerMode;
+    value?: Date;
+    start?: Date;
+    end?: Date;
+    onChange?: (date: Date) => void;
+    onFinish?: (date: Date) => void;
+    onRemove?: () => void;
+    datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'start' | 'end'>;
+    timePickerProps?: Omit<TimePickerProps, 'onChange' | 'time' | 'maxHeight'>;
+};
+/**
+ * A Component for picking a Date and Time
+ */
+export declare const DateTimePicker: ({ overwriteTranslation, value, start, end, mode, onFinish, onChange, onRemove, timePickerProps, datePickerProps, }: PropsForTranslation<TimeTranslation, DateTimePickerProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/user-input/DateAndTimePicker.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useTranslation } from '../../hooks/useTranslation';
+import { noop } from '../../util/noop';
+import { addDuration, subtractDuration } from '../../util/date';
+import { SolidButton } from '../Button';
+import { TimePicker } from '../date/TimePicker';
+import { DatePicker } from '../date/DatePicker';
+const defaultTimeTranslation = {
+    en: {
+        clear: 'Clear',
+        change: 'Change',
+        year: 'Year',
+        month: 'Month',
+        day: 'Day',
+        january: 'January',
+        february: 'Febuary',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
+    },
+    de: {
+        clear: 'Entfernen',
+        change: 'Ändern',
+        year: 'Jahr',
+        month: 'Monat',
+        day: 'Tag',
+        january: 'Januar',
+        february: 'Febuar',
+        march: 'März',
+        april: 'April',
+        may: 'Mai',
+        june: 'Juni',
+        july: 'Juli',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
+    }
+};
+/**
+ * A Component for picking a Date and Time
+ */
+export const DateTimePicker = ({ overwriteTranslation, value = new Date(), start = subtractDuration(new Date(), { years: 50 }), end = addDuration(new Date(), { years: 50 }), mode = 'dateTime', onFinish = noop, onChange = noop, onRemove = noop, timePickerProps, datePickerProps, }) => {
+    const translation = useTranslation(defaultTimeTranslation, overwriteTranslation);
+    const useDate = mode === 'dateTime' || mode === 'date';
+    const useTime = mode === 'dateTime' || mode === 'time';
+    let dateDisplay;
+    let timeDisplay;
+    if (useDate) {
+        dateDisplay = (_jsx(DatePicker, { ...datePickerProps, className: "min-w-[320px] min-h-[250px]", yearMonthPickerProps: { maxHeight: 218 }, value: value, start: start, end: end, onChange: onChange }));
+    }
+    if (useTime) {
+        timeDisplay = (_jsx(TimePicker, { ...timePickerProps, className: clsx('h-full', { 'justify-between w-full': mode === 'time' }), maxHeight: 250, time: value, onChange: onChange }));
+    }
+    return (_jsxs("div", { className: "col w-fit", children: [_jsxs("div", { className: "row gap-x-4", children: [dateDisplay, timeDisplay] }), _jsx("div", { className: "row justify-end", children: _jsxs("div", { className: "row gap-x-2 mt-1", children: [_jsx(SolidButton, { size: "medium", color: "negative", onClick: onRemove, children: translation.clear }), _jsx(SolidButton, { size: "medium", onClick: () => onFinish(value), children: translation.change })] }) })] }));
+};

package/dist/components/user-input/Input.d.ts

@@ -0,0 +1,61 @@
+import React, { type ChangeEvent, type HTMLInputTypeAttribute, type InputHTMLAttributes } from 'react';
+import type { LabelProps } from './Label';
+export type InputProps = {
+    /**
+     * used for the label's `for` attribute
+     */
+    id?: string;
+    value: string;
+    label?: Omit<LabelProps, 'id'>;
+    /**
+     * @default 'text'
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Callback for when the input's value changes
+     * This is pretty much required but made optional for the rare cases where it actually isn't need such as when used with disabled
+     * That could be enforced through a union type but that seems a bit overkill
+     * @default noop
+     */
+    onChange?: (text: string, event: ChangeEvent<HTMLInputElement>) => void;
+    onChangeEvent?: (event: ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    onEditCompleted?: (text: string, event: ChangeEvent<HTMLInputElement>) => void;
+    expanded?: boolean;
+    containerClassName?: string;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'value' | 'label' | 'type' | 'onChange' | 'crossOrigin'>;
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed must be managed by the parent
+ */
+declare const ControlledInput: ({ id, type, value, label, onChange, onChangeEvent, className, onEditCompleted, expanded, onBlur, containerClassName, ...restProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+type UncontrolledInputProps = Omit<InputProps, 'value'> & {
+    /**
+     * @default ''
+     */
+    defaultValue?: string;
+};
+/**
+ * A Component for inputting text or other information
+ *
+ * Its state is managed by the component itself
+ */
+declare const UncontrolledInput: ({ defaultValue, onChange, ...props }: UncontrolledInputProps) => import("react/jsx-runtime").JSX.Element;
+export type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {
+    id: string;
+    labelText?: string;
+    errorText?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+};
+declare const FormInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & {
+    id: string;
+    labelText?: string;
+    errorText?: string;
+    labelClassName?: string;
+    errorClassName?: string;
+    containerClassName?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export { UncontrolledInput, ControlledInput as Input, FormInput };