@medable/nucleus-ui 2.0.0

package/text_area/src/lib/text_area.js

@@ -0,0 +1,83 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { Icon } from '../../../icon/src';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+const sizeClasses = {
+    xs: 'nucleus-w-input-xs',
+    sm: 'nucleus-w-input-sm',
+    base: 'nucleus-w-input-base',
+    lg: 'nucleus-w-input-lg',
+    full: 'nucleus-w-input-full nucleus-self-stretch',
+};
+const resizeClasses = {
+    both: 'nucleus-resize',
+    none: 'nucleus-resize-none',
+    vertical: 'nucleus-resize-x',
+    horizontal: 'nucleus-resize-y',
+};
+function applyAutoGrow(element, minRows, maxRows) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const computed = window.getComputedStyle(element);
+    const parsePx = (v) => (v.endsWith('px') ? parseFloat(v) : 0);
+    let fontSize = parsePx(computed.fontSize);
+    if (!fontSize || Number.isNaN(fontSize)) {
+        fontSize = 16; // sensible default for tests and environments without computed styles
+    }
+    const lineHeightRaw = computed.lineHeight;
+    const parsedLineHeight = parsePx(lineHeightRaw);
+    const lineHeight = lineHeightRaw === 'normal' || !lineHeightRaw || !parsedLineHeight ? fontSize * 1.2 : parsedLineHeight;
+    const paddingTop = parsePx(computed.paddingTop);
+    const paddingBottom = parsePx(computed.paddingBottom);
+    const borderTop = parsePx(computed.borderTopWidth);
+    const borderBottom = parsePx(computed.borderBottomWidth);
+    const extras = paddingTop + paddingBottom + borderTop + borderBottom;
+    const minHeightPx = Math.max(0, extras + lineHeight * minRows);
+    const maxHeightPx = Math.max(minHeightPx, extras + lineHeight * maxRows);
+    element.style.height = 'auto';
+    const targetHeight = Math.min(element.scrollHeight, Math.round(maxHeightPx));
+    element.style.height = `${targetHeight}px`;
+    element.style.overflowY = element.scrollHeight > maxHeightPx ? 'auto' : 'hidden';
+}
+/**
+ * TextArea allows a user to input large text inputs.
+ */
+export const TextArea = forwardRef(function TextArea(_a, ref) {
+    var { dataTestId, description, disabled = false, errorMessage, hasError = false, label, required = false, hideRequiredIndicator = false, width = 'base', placeholder, resize = 'horizontal', autogrow = false, autogrowMaxRows = 10, className } = _a, textAreaProps = __rest(_a, ["dataTestId", "description", "disabled", "errorMessage", "hasError", "label", "required", "hideRequiredIndicator", "width", "placeholder", "resize", "autogrow", "autogrowMaxRows", "className"]);
+    const { id, maxLength, value, rows = 4 } = textAreaProps;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    const adjustHeight = () => {
+        if (!autogrow || !innerRef.current) {
+            return;
+        }
+        applyAutoGrow(innerRef.current, rows, autogrowMaxRows);
+    };
+    useEffect(() => {
+        adjustHeight();
+        // We intentionally want to run this when value/rows change while autogrow is enabled
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autogrow, value, rows]);
+    const handleChange = (event) => {
+        var _a;
+        if (autogrow) {
+            applyAutoGrow(event.currentTarget, rows, autogrowMaxRows);
+        }
+        (_a = textAreaProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textAreaProps, event);
+    };
+    const ariaErrorMsgId = `${id}-errormessage`;
+    const InputCount = maxLength && maxLength > 0 ? (_jsx("span", { className: 'nucleus-order-1 nucleus-flex-none nucleus-grow-0 nucleus-text-xs nucleus-font-medium nucleus-text-text-secondary', children: `${(value !== null && value !== void 0 ? value : '').toString().length}/${maxLength}` })) : null;
+    return (_jsxs("div", { className: `nucleus-font-sans nucleus-inline-block ${sizeClasses[width]}`, children: [label && (_jsxs("div", { className: 'nucleus-flex nucleus-items-baseline nucleus-justify-between', children: [_jsxs("label", { className: `nucleus-order-none nucleus-flex-none nucleus-grow-0 nucleus-text-sm nucleus-font-medium nucleus-text-text-primary ${!description && maxLength ? 'nucleus-w-5/6' : sizeClasses[width]}`, htmlFor: id, children: [label, required && !hideRequiredIndicator && (_jsx("span", { className: 'nucleus-order-1 nucleus-h-5 nucleus-w-1.5 nucleus-flex-none nucleus-grow-0 nucleus-text-sm nucleus-font-medium nucleus-text-red-500 nucleus-pl-px', children: "*" }))] }), !description && InputCount] })), description && (_jsxs("div", { className: 'nucleus-flex nucleus-justify-between', children: [_jsx("p", { className: `nucleus-order-none nucleus-flex-none nucleus-grow-0 nucleus-text-xs nucleus-font-medium nucleus-text-text-secondary nucleus-m-0
+                ${maxLength ? 'nucleus-w-5/6' : sizeClasses[width]}`, children: description }), InputCount] })), _jsx("textarea", Object.assign({ ref: innerRef, "aria-disabled": disabled, "aria-errormessage": ariaErrorMsgId, "aria-invalid": hasError, "aria-label": label || textAreaProps['aria-label'], "aria-required": required, className: twMerge(`nucleus-order-none nucleus-box-border nucleus-flex nucleus-h-auto nucleus-flex-none nucleus-grow-0 nucleus-flex-row nucleus-items-center nucleus-gap-2 nucleus-border-solid nucleus-bg-neutral-0 nucleus-font-sans nucleus-text-sm
+          nucleus-font-medium nucleus-not-italic nucleus-shadow-sm
+         nucleus-rounded-md nucleus-border nucleus-px-4 nucleus-py-2 placeholder:nucleus-text-neutral-400 focus:nucleus-outline-none focus:nucleus-ring-1 disabled:nucleus-bg-neutral-200 disabled:nucleus-text-text-disabled disabled:nucleus-border-neutral-200
+          ${hasError
+                    ? 'nucleus-text-text-error nucleus-border-red-500 hover:nucleus-border-red-500 focus:nucleus-ring-red-500 focus:nucleus-border-red-500'
+                    : 'nucleus-text-text-primary nucleus-border-neutral-300 hover:nucleus-border-neutral-500 focus:nucleus-ring-primary-500 focus:nucleus-border-primary-500 placeholder:nucleus-text-text-secondary'} ${sizeClasses[width]} ${resizeClasses[resize]} ${label ? 'nucleus-mt-2' : ''} ${autogrow ? 'nucleus-overflow-y-hidden' : ''}`, className), disabled: disabled, "data-testid": dataTestId, rows: rows, placeholder: placeholder }, textAreaProps, { onChange: handleChange })), hasError && (_jsxs("div", { className: `nucleus-flex nucleus-items-center nucleus-mt-2 ${sizeClasses[width]}`, children: [_jsx("span", { children: _jsx(Icon, { name: 'error', size: 'sm', color: 'red' }) }), _jsx("span", { className: 'nucleus-ml-2', children: _jsx("p", { className: 'nucleus-order-1 nucleus-flex-none nucleus-grow nucleus-text-xs nucleus-font-medium nucleus-text-text-error nucleus-m-0', id: ariaErrorMsgId, role: 'alert', children: errorMessage }) })] }))] }));
+});
+//# sourceMappingURL=text_area.js.map

package/time_picker/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/time_picker';

package/time_picker/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/time_picker';
+//# sourceMappingURL=index.js.map

package/time_picker/src/lib/time_picker.d.ts

@@ -0,0 +1,62 @@
+import { PlainTime, TimeZone } from 'temporal-luxon';
+export type TimePickerValue = {
+    /**
+     * Represents the chosen time. If no time is chosen, it will be null.
+     */
+    time: PlainTime | null;
+    /**
+     * Represents the chosen timezone. If no timezone is chosen, it will be null.
+     */
+    timeZone?: TimeZone | null;
+};
+export type TimePickerProps = {
+    /**
+     * Flag indicating if the time picker has an error.
+     *
+     */
+    hasError?: boolean;
+    /**
+     * Error message to display when the time picker has an error.
+     */
+    errorMessage?: string;
+    /**
+     * Flag indicating if the timezone should be displayed.
+     */
+    showTimeZone?: boolean;
+    /**
+     * Represents the current value of the time picker.
+     */
+    value: TimePickerValue;
+    /**
+     * Function to call when the time picker's value changes.
+     *
+     * @param timePickerValue - The new value of the time picker.
+     */
+    onChange: (timePickerValue: TimePickerValue) => void;
+    /**
+     * Function to call when there is an error with time picker fields.
+     *
+     * @param hasError - Whether there is an error with time picker fields.
+     */
+    onError?: (hasError: boolean) => void;
+    /**
+     * Indicates that this field is required to be filled out by the user.
+     */
+    required?: boolean;
+    /**
+     * Function to call when at least one field is filled and others are empty.
+     *
+     * @param valuePartiallyFilled - Whether at least one field is filled.
+     */
+    onPartialChange?: (valuePartiallyFilled: boolean) => void;
+    /**
+     * Flag indicating if the time picker is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Array of minutes options to display in the minute dropdown.
+     */
+    minutesOptions?: number[];
+    width?: 'base' | 'full';
+};
+export declare const TimePicker: ({ hasError, errorMessage, showTimeZone, onChange, value, onError, onPartialChange, required, disabled, minutesOptions, width, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;

package/time_picker/src/lib/time_picker.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { PlainTime, TimeZone } from 'temporal-luxon';
+import { TimeShort } from '../../../i18n-shim';
+import { LocaleContext, isTime12Hour, useLocalizeMessage, Message } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { TimePickerInput } from './time_picker_input';
+import { areAllOptionsSelected, areOptionsFilled, getDayPeriodOptions, getHours12Options, getHours24Options, getMinuteOptions, timezoneOptions, } from './time_picker_utils';
+const TIME_PICKER_WIDTHS = {
+    base: '',
+    full: 'nucleus-w-full',
+};
+export const TimePicker = ({ hasError, errorMessage, showTimeZone = false, onChange, value, onError, onPartialChange, required = false, disabled, minutesOptions, width = 'base', }) => {
+    // eslint-disable-next-line dot-notation
+    if (showTimeZone && process.env['NODE_ENV'] === 'development') {
+        console.error("TimePicker: showTimeZone isn't fully supported. See https://jira.devops.medable.com/browse/MWF-622");
+    }
+    const [allFieldsRequiredError, setAllFieldsRequiredError] = useState(false);
+    const [internalOptions, setInternalOptions] = useState({
+        hour: { option: null, isTouched: false },
+        minute: { option: null, isTouched: false },
+        dayPeriod: { option: null, isTouched: false },
+        timeZoneName: { option: null, isTouched: false },
+    });
+    const locale = useContext(LocaleContext);
+    const time12Hour = isTime12Hour(useContext(LocaleContext));
+    const localizeMessage = useLocalizeMessage();
+    const timeShortFormatter = useMemo(() => new TimeShort(locale, { timeZoneName: 'short' }), [locale]);
+    const hourOptions = useMemo(() => (time12Hour ? getHours12Options({ timeShortFormatter }) : getHours24Options({ timeShortFormatter })), [time12Hour, timeShortFormatter]);
+    const minuteOptions = useMemo(() => getMinuteOptions({ timeShortFormatter, minutesOptions }), [timeShortFormatter, minutesOptions]);
+    const amPmOptions = useMemo(() => getDayPeriodOptions({ timeShortFormatter }), [timeShortFormatter]);
+    useEffect(() => {
+        setInternalOptions((prevInternalOptions) => {
+            var _a, _b, _c, _d;
+            if (value.time) {
+                const newHour = time12Hour ? value.time.hour % 12 : value.time.hour;
+                const newDayPeriod = value.time.hour >= 12 ? amPmOptions[1].value : amPmOptions[0].value;
+                const nextInternalState = {
+                    hour: {
+                        option: (_a = hourOptions.find((hour) => hour.value === newHour)) !== null && _a !== void 0 ? _a : null,
+                        isTouched: true,
+                    },
+                    minute: {
+                        option: (_b = minuteOptions.find((minute) => { var _a; return minute.value === ((_a = value.time) === null || _a === void 0 ? void 0 : _a.minute); })) !== null && _b !== void 0 ? _b : null,
+                        isTouched: true,
+                    },
+                    dayPeriod: {
+                        option: time12Hour ? ((_c = amPmOptions.find((dayPeriod) => dayPeriod.value === newDayPeriod)) !== null && _c !== void 0 ? _c : null) : null,
+                        isTouched: !!time12Hour,
+                    },
+                    timeZoneName: {
+                        option: value.timeZone
+                            ? ((_d = timezoneOptions.find((timezone) => { var _a; return timezone.value === ((_a = value.timeZone) === null || _a === void 0 ? void 0 : _a.toString()); })) !== null && _d !== void 0 ? _d : null)
+                            : null,
+                        isTouched: showTimeZone,
+                    },
+                };
+                if (allFieldsRequiredError && areAllOptionsSelected(nextInternalState, !!time12Hour, showTimeZone)) {
+                    setAllFieldsRequiredError(false);
+                    onError === null || onError === void 0 ? void 0 : onError(false);
+                }
+                return nextInternalState;
+            }
+            return prevInternalOptions;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [time12Hour, showTimeZone, value]);
+    const handleChange = (chosenOption, type) => {
+        var _a, _b, _c, _d, _e, _f;
+        const nextInternalOptions = Object.assign(Object.assign({}, internalOptions), { [type]: { option: chosenOption, isTouched: true } });
+        const everyOptionHasValue = areAllOptionsSelected(nextInternalOptions, time12Hour, showTimeZone);
+        const atLeastOneFieldFilled = areOptionsFilled(nextInternalOptions, showTimeZone, true);
+        const atLeastOneFieldEmpty = areOptionsFilled(nextInternalOptions, showTimeZone, false);
+        if (everyOptionHasValue) {
+            const hour = (_b = (_a = nextInternalOptions.hour) === null || _a === void 0 ? void 0 : _a.option) === null || _b === void 0 ? void 0 : _b.value;
+            const internalOptionsFormatted = {
+                hour: !nextInternalOptions.dayPeriod.option || nextInternalOptions.dayPeriod.option.value === 'AM'
+                    ? hour
+                    : hour + 12,
+                minute: (_d = (_c = nextInternalOptions.minute) === null || _c === void 0 ? void 0 : _c.option) === null || _d === void 0 ? void 0 : _d.value,
+                timeZone: (_f = (_e = nextInternalOptions.timeZoneName) === null || _e === void 0 ? void 0 : _e.option) === null || _f === void 0 ? void 0 : _f.value,
+            };
+            const newValue = {
+                time: PlainTime.from({
+                    hour: internalOptionsFormatted.hour,
+                    minute: internalOptionsFormatted.minute,
+                }),
+                timeZone: internalOptionsFormatted.timeZone ? new TimeZone(internalOptionsFormatted.timeZone) : null,
+            };
+            if (allFieldsRequiredError) {
+                setAllFieldsRequiredError(false);
+                onError === null || onError === void 0 ? void 0 : onError(false);
+            }
+            onChange(newValue);
+        }
+        else if (!allFieldsRequiredError &&
+            atLeastOneFieldFilled &&
+            Object.values(nextInternalOptions).some((internalOption) => internalOption.isTouched && !internalOption.option)) {
+            // if a field has been touched and its value is null, we need to set the error state for all fields being required
+            onChange({ time: null, timeZone: null });
+            setAllFieldsRequiredError(true);
+            onError === null || onError === void 0 ? void 0 : onError(true);
+        }
+        onPartialChange === null || onPartialChange === void 0 ? void 0 : onPartialChange(atLeastOneFieldFilled && atLeastOneFieldEmpty);
+        setInternalOptions(nextInternalOptions);
+    };
+    const showError = allFieldsRequiredError || hasError;
+    const parts = timeShortFormatter.formatToParts(new PlainTime(0, 0));
+    const inputLayout = parts
+        .filter((part) => {
+        if (['hour', 'minute', 'dayPeriod'].includes(part.type)) {
+            return true;
+        }
+        if (part.type === 'timeZoneName' && showTimeZone) {
+            return true;
+        }
+        return false;
+    })
+        .map(({ type }) => {
+        switch (type) {
+            case 'hour':
+                return (_jsx(TimePickerInput, { type: type, label: localizeMessage(new Message({ id: 'hour-label', source: 'Hour' })), value: internalOptions.hour.option, onChange: handleChange, options: hourOptions, hasError: !!showError, required: required, disabled: disabled, width: width }, type));
+            case 'minute':
+                return (_jsx(TimePickerInput, { type: type, label: localizeMessage(new Message({ id: 'minute-label', source: 'Minute' })), value: internalOptions.minute.option, onChange: handleChange, options: minuteOptions, hasError: !!showError, required: required, disabled: disabled, width: width }, type));
+            case 'dayPeriod':
+                return (_jsx(TimePickerInput, { type: type, label: localizeMessage(new Message({ id: 'day-period-label', source: 'AM/PM' })), value: internalOptions.dayPeriod.option, onChange: handleChange, options: amPmOptions, hasError: !!showError, required: required, disabled: disabled, width: width }, type));
+            case 'timeZoneName':
+                return showTimeZone ? (_jsx("div", { className: 'nucleus-flex-1', children: _jsx(TimePickerInput, { type: type, label: localizeMessage(new Message({ id: 'time-zone-label', source: 'Timezone' })), value: internalOptions.timeZoneName.option, onChange: handleChange, options: timezoneOptions, hasError: !!showError, required: required, disabled: disabled, width: width }) }, type)) : undefined;
+            default:
+                return undefined;
+        }
+    });
+    return (_jsxs("div", { className: `nucleus-box-border nucleus-inline-flex nucleus-flex-col nucleus-font-sans ${TIME_PICKER_WIDTHS[width]}`, children: [_jsx("div", { className: 'nucleus-flex nucleus-flex-wrap nucleus-gap-4', children: inputLayout }), showError && (_jsxs("div", { className: 'nucleus-box-border nucleus-flex nucleus-items-center nucleus-gap-2 nucleus-text-text-error nucleus-mt-2.5', children: [_jsx(Icon, { name: 'error', color: 'red' }), allFieldsRequiredError ? localizeMessage('All fields are required when one is selected') : errorMessage] }))] }));
+};
+//# sourceMappingURL=time_picker.js.map

package/time_picker/src/lib/time_picker_input.d.ts

@@ -0,0 +1,15 @@
+import { ComboboxOption } from '../../../combobox/src';
+import { InputType } from './time_picker_utils';
+type TimePickerInputProps<T extends string | number> = {
+    type: InputType;
+    label: string;
+    value: ComboboxOption<T> | null;
+    onChange: (value: ComboboxOption<T>, type: InputType) => void;
+    options: ComboboxOption<T>[];
+    hasError: boolean;
+    required: boolean;
+    disabled?: boolean;
+    width: 'base' | 'full';
+};
+export declare const TimePickerInput: <T extends string | number>({ type, label, value, onChange, options, hasError, required, disabled, width, }: TimePickerInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/time_picker/src/lib/time_picker_input.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Combobox } from '../../../combobox/src';
+const TIME_PICKER_WIDTHS = {
+    base: '',
+    full: 'nucleus-flex-1',
+};
+export const TimePickerInput = ({ type, label, value, onChange, options, hasError, required, disabled, width, }) => {
+    const isTimeZoneInput = type === 'timeZoneName';
+    return (_jsx(Combobox, { label: label, noOptionsFoundLabel: '', value: value, onChange: (value) => onChange(value, type), options: options, hasError: hasError, size: width === 'full' || isTimeZoneInput ? 'full' : 'xs', required: required, dropdownFitsContent: isTimeZoneInput, disabled: disabled, className: TIME_PICKER_WIDTHS[width] }));
+};
+//# sourceMappingURL=time_picker_input.js.map

package/time_picker/src/lib/time_picker_utils.d.ts

@@ -0,0 +1,77 @@
+import type { TimeShort } from '../../../i18n-shim';
+import { ComboboxOption } from '../../../combobox/src';
+type CommonFormatterProps = {
+    timeShortFormatter: TimeShort;
+    minutesOptions?: number[];
+};
+export type FormattedParts = Array<{
+    type: string;
+    value: string;
+}>;
+type InternalOption<T> = {
+    /**
+     * Represents the selected option. If no option is selected, it will be null.
+     */
+    option: ComboboxOption<T> | null;
+    /**
+     * Flag indicating whether the option has been interacted with by the user.
+     */
+    isTouched: boolean;
+};
+export type InternalOptions = {
+    /**
+     * Represents the hour option.
+     */
+    hour: InternalOption<number>;
+    /**
+     * Represents the minute option.
+     */
+    minute: InternalOption<number>;
+    /**
+     * Represents the day period option (AM/PM).
+     */
+    dayPeriod: InternalOption<string>;
+    /**
+     * Represents the timezone option.
+     */
+    timeZoneName: InternalOption<string>;
+};
+export type InputType = 'hour' | 'minute' | 'dayPeriod' | 'timeZoneName';
+/**
+ * Function to check if all options are selected.
+ * @param internalOptions - The internal selected options of the time picker.
+ * @param showDayPeriod - Boolean to indicate if the day period option should be considered.
+ * @param showTimeZone - Boolean to indicate if the timezone option should be considered.
+ * @returns true if all relevant options are selected, false otherwise.
+ */
+export declare const areAllOptionsSelected: (internalOptions: InternalOptions, showDayPeriod: boolean, showTimeZone: boolean) => boolean;
+export declare const areOptionsFilled: (options: InternalOptions, showTimeZone: boolean, shouldBeFilled?: boolean) => boolean;
+/**
+ * Array of combobox options for 12-hour time format.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the hour, while the value is the actual hour (with 12 represented as 0).
+ */
+export declare const getHours12Options: ({ timeShortFormatter }: CommonFormatterProps) => ComboboxOption<number>[];
+/**
+ * Array of combobox options for 24-hour time format.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the hour, while the value is the actual hour.
+ */
+export declare const getHours24Options: ({ timeShortFormatter }: CommonFormatterProps) => ComboboxOption<number>[];
+/**
+ * Array of combobox options for minutes.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the minute, while the value is the actual minute.
+ */
+export declare const getMinuteOptions: ({ timeShortFormatter, minutesOptions, }: CommonFormatterProps) => ComboboxOption<number>[];
+/**
+ * Array of combobox options for timezones.
+ * Each option contains a label and a value, both representing a timezone.
+ */
+export declare const timezoneOptions: ComboboxOption<string>[];
+/**
+ * Array of combobox options for AM/PM selection.
+ * Each option contains a label and a value, both representing either AM or PM.
+ */
+export declare const getDayPeriodOptions: ({ timeShortFormatter }: CommonFormatterProps) => ComboboxOption<string>[];
+export {};

package/time_picker/src/lib/time_picker_utils.js

@@ -0,0 +1,122 @@
+import { PlainTime } from 'temporal-luxon';
+/**
+ * Function to check if all options are selected.
+ * @param internalOptions - The internal selected options of the time picker.
+ * @param showDayPeriod - Boolean to indicate if the day period option should be considered.
+ * @param showTimeZone - Boolean to indicate if the timezone option should be considered.
+ * @returns true if all relevant options are selected, false otherwise.
+ */
+export const areAllOptionsSelected = (internalOptions, showDayPeriod, showTimeZone) => {
+    let everyOptionHasValue = internalOptions.hour.option !== null && internalOptions.minute.option !== null;
+    if (showDayPeriod) {
+        everyOptionHasValue = everyOptionHasValue && internalOptions.dayPeriod.option !== null;
+    }
+    if (showTimeZone) {
+        everyOptionHasValue = everyOptionHasValue && internalOptions.timeZoneName.option !== null;
+    }
+    return everyOptionHasValue;
+};
+/*
+ * Function to check if all options are filled.
+ * @param options - The internal selected options of the time picker.
+ * @param showTimeZone - Boolean to indicate if the timezone option should be considered.
+ * @param shouldBeFilled - Boolean to indicate if the options should be filled or not.
+ * @returns true if all relevant options are filled, false otherwise.
+ */
+export const areOptionsFilled = (options, showTimeZone, shouldBeFilled = true) => {
+    return Object.values(options).some((option) => {
+        const hasOption = Boolean(option.option);
+        return shouldBeFilled === hasOption && (showTimeZone || option !== options.timeZoneName);
+    });
+};
+/**
+ * Array of combobox options for 12-hour time format.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the hour, while the value is the actual hour (with 12 represented as 0).
+ */
+export const getHours12Options = ({ timeShortFormatter }) => Array.from(Array(12).keys())
+    .map((value) => (value + 1) % 12)
+    .map((value) => {
+    var _a, _b;
+    const formattedValue = (_b = (_a = timeShortFormatter.formatToParts(new PlainTime(value, 0)).find(({ type }) => type === 'hour')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    return {
+        label: formattedValue,
+        value,
+    };
+});
+/**
+ * Array of combobox options for 24-hour time format.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the hour, while the value is the actual hour.
+ */
+export const getHours24Options = ({ timeShortFormatter }) => Array.from(Array(24).keys()).map((value) => {
+    var _a, _b;
+    const formattedValue = (_b = (_a = timeShortFormatter.formatToParts(new PlainTime(value, 0)).find(({ type }) => type === 'hour')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    return {
+        label: formattedValue,
+        value,
+    };
+});
+/**
+ * Array of combobox options for minutes.
+ * Each option contains a label and a value.
+ * The label is a zero-padded string representation of the minute, while the value is the actual minute.
+ */
+export const getMinuteOptions = ({ timeShortFormatter, minutesOptions, }) => {
+    const minutsArray = minutesOptions !== null && minutesOptions !== void 0 ? minutesOptions : Array.from(Array(60).keys());
+    return minutsArray.map((value) => {
+        var _a, _b;
+        const formattedValue = (_b = (_a = timeShortFormatter.formatToParts(new PlainTime(0, value)).find(({ type }) => type === 'minute')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : value.toString();
+        return {
+            label: formattedValue,
+            value,
+        };
+    });
+};
+/**
+ * Array of combobox options for timezones.
+ * Each option contains a label and a value, both representing a timezone.
+ */
+export const timezoneOptions = [
+    { label: 'UTC-12:00', value: 'UTC-12:00' },
+    { label: 'UTC-11:00', value: 'UTC-11:00' },
+    { label: 'UTC-10:00', value: 'UTC-10:00' },
+    { label: 'UTC-09:00', value: 'UTC-09:00' },
+    { label: 'UTC-08:00', value: 'UTC-08:00' },
+    { label: 'UTC-07:00', value: 'UTC-07:00' },
+    { label: 'UTC-06:00', value: 'UTC-06:00' },
+    { label: 'UTC-05:00', value: 'UTC-05:00' },
+    { label: 'UTC-04:00', value: 'UTC-04:00' },
+    { label: 'UTC-03:00', value: 'UTC-03:00' },
+    { label: 'UTC-02:00', value: 'UTC-02:00' },
+    { label: 'UTC-01:00', value: 'UTC-01:00' },
+    { label: 'UTC+00:00', value: 'UTC+00:00' },
+    { label: 'UTC+01:00', value: 'UTC+01:00' },
+    { label: 'UTC+02:00', value: 'UTC+02:00' },
+    { label: 'UTC+03:00', value: 'UTC+03:00' },
+    { label: 'UTC+04:00', value: 'UTC+04:00' },
+    { label: 'UTC+05:00', value: 'UTC+05:00' },
+    { label: 'UTC+06:00', value: 'UTC+06:00' },
+    { label: 'UTC+07:00', value: 'UTC+07:00' },
+    { label: 'UTC+08:00', value: 'UTC+08:00' },
+    { label: 'UTC+09:00', value: 'UTC+09:00' },
+    { label: 'UTC+10:00', value: 'UTC+10:00' },
+    { label: 'UTC+11:00', value: 'UTC+11:00' },
+    { label: 'UTC+12:00', value: 'UTC+12:00' },
+    { label: 'UTC+13:00', value: 'UTC+13:00' },
+    { label: 'UTC+14:00', value: 'UTC+14:00' },
+];
+/**
+ * Array of combobox options for AM/PM selection.
+ * Each option contains a label and a value, both representing either AM or PM.
+ */
+export const getDayPeriodOptions = ({ timeShortFormatter }) => {
+    var _a, _b, _c, _d;
+    const amValue = (_b = (_a = timeShortFormatter.formatToParts(new PlainTime(0, 0)).find(({ type }) => type === 'dayPeriod')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+    const pmValue = (_d = (_c = timeShortFormatter.formatToParts(new PlainTime(12, 0)).find(({ type }) => type === 'dayPeriod')) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
+    return [
+        { label: amValue, value: amValue },
+        { label: pmValue, value: pmValue },
+    ];
+};
+//# sourceMappingURL=time_picker_utils.js.map

package/toggle/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/toggle';

package/toggle/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/toggle';
+//# sourceMappingURL=index.js.map

package/toggle/src/lib/toggle.d.ts

@@ -0,0 +1,35 @@
+import { Switch } from '@headlessui/react';
+type HeadlessUISwitchProps = Parameters<typeof Switch>[0];
+export type ToggleProps = {
+    /**
+     * The label displayed next to the toggle. The accessibilty property `aria-label` will also be set to this value.
+     */
+    label?: string;
+    /**
+     * Optional description for the toggle.
+     */
+    description?: string;
+    /**
+     * The function to call when the toggle is changed.
+     * @param checked The new value of the toggle.
+     */
+    onChange?: HeadlessUISwitchProps['onChange'];
+    /**
+     * The boolean value of the toggle.
+     */
+    checked?: HeadlessUISwitchProps['checked'];
+    /**
+     * Controls whether the toggle is disabled or not. Disabled toggles do not react to any change, focus or hover events.
+     */
+    disabled?: boolean;
+    /**
+     * This sets the data-testid attribute on the switch component. Do note that the button with the role "switch" and
+     * the label are children of it.
+     */
+    dataTestId?: string;
+};
+/**
+ * Toggles are an interface for toggling a value between two states.
+ */
+export declare const Toggle: ({ label, description, disabled, checked, onChange, dataTestId, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/toggle/src/lib/toggle.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, Label, Switch } from '@headlessui/react';
+/**
+ * Toggles are an interface for toggling a value between two states.
+ */
+export const Toggle = ({ label, description, disabled = false, checked = false, onChange, dataTestId, }) => {
+    const handleGroupClick = (event) => {
+        event.stopPropagation();
+        onChange === null || onChange === void 0 ? void 0 : onChange(!checked);
+    };
+    return (_jsxs(Field, { as: 'div', onClick: handleGroupClick, "data-testid": dataTestId, className: `nucleus-flex nucleus-cursor-pointer nucleus-gap-2.5 focus:nucleus-outline-none ${disabled ? 'nucleus-pointer-events-none' : ''}`, children: [_jsx(Switch, { disabled: disabled, checked: checked, onChange: onChange, className: `nucleus-box-border nucleus-inline-flex nucleus-h-6 nucleus-w-11 nucleus-shrink-0 nucleus-cursor-pointer nucleus-items-center nucleus-border-solid nucleus-bg-none nucleus-normal-case nucleus-transition-colors nucleus-m-0 nucleus-rounded-full nucleus-border-0 nucleus-p-0 focus-visible:nucleus-outline-2 focus-visible:nucleus-outline-offset-2 focus-visible:nucleus-outline-primary-500 ${disabled
+                    ? 'nucleus-bg-neutral-300'
+                    : 'nucleus-bg-neutral-450 hover:nucleus-bg-neutral-600 ui-checked:nucleus-bg-primary-500 hover:ui-checked:nucleus-bg-primary-700'}`, children: _jsx("span", { className: 'nucleus-inline-block nucleus-h-5 nucleus-w-5 nucleus-transform nucleus-bg-white nucleus-shadow-sm nucleus-transition nucleus-mx-0.5 nucleus-rounded-full ui-checked:nucleus-translate-x-5 ltr:ui-checked:nucleus-translate-x-5 rtl:ui-checked:-nucleus-translate-x-5' }) }), (label || description) && (_jsxs(Label, { className: 'nucleus-grow nucleus-cursor-pointer nucleus-font-sans nucleus-text-sm nucleus-leading-tight', children: [label && (_jsx("div", { className: `nucleus-font-medium ${disabled ? 'nucleus-text-text-disabled' : 'nucleus-text-text-primary'}`, children: label })), description && _jsx("div", { className: 'nucleus-text-text-secondary nucleus-mt-1', children: description })] }))] }));
+};
+//# sourceMappingURL=toggle.js.map

package/tooltip/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/tooltip';

package/tooltip/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/tooltip';
+//# sourceMappingURL=index.js.map