@sonic-equipment/ui 0.0.119 → 1.1.0

package/dist/forms/elements/checkbox/checkbox.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export interface CheckboxPropsBase {
+    autoFocus?: boolean;
+    className?: string;
+    'data-test-selector'?: string;
+    defaultSelected?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isSelected?: boolean;
+    name?: string;
+    onChange?: (isSelected: boolean) => void;
+    textSize?: 'normal' | 'small' | 'inherit';
+    value?: string;
+}
+export interface CheckboxWithLabelProps extends CheckboxPropsBase {
+    'aria-label': string;
+}
+export interface CheckboxWithChildrenProps extends CheckboxPropsBase {
+    children?: ReactNode;
+}
+export type CheckboxProps = CheckboxWithLabelProps | CheckboxWithChildrenProps;
+export declare function Checkbox(props: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/elements/checkbox/checkbox.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { Label } from '../label/label.js';
+import styles from './checkbox.module.css.js';
+
+function Checkbox(props) {
+    const { autoFocus, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isReadOnly, isRequired, isSelected, name, onChange, value, } = props;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    const children = 'children' in props ? props.children : undefined;
+    return (jsxs(Checkbox$1, { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx(styles.checkbox, className, styles[`text-size-${props['textSize'] || 'inherit'}`]), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isSelected: isSelected, name: name, onChange: onChange, value: value, children: [jsx("div", { className: styles.box, children: jsx("svg", { "aria-hidden": "true", className: styles.checkmark, viewBox: "0 0 10 7", children: jsx("path", { d: "m1 2.845 3 3L8.845 1" }) }) }), children && (jsx(Label, { className: styles.label, isRequired: isRequired, children: children }))] }));
+}
+
+export { Checkbox };

package/dist/forms/elements/checkbox/checkbox.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"checkbox":"checkbox-module-QzsaZ","text-size-small":"checkbox-module--o4dt","text-size-normal":"checkbox-module-5vjph","box":"checkbox-module-spG9E","checkmark":"checkbox-module-CQcmb","label":"checkbox-module-bO3ou","color-checkbox":"checkbox-module-CRPMG"};
+
+export { styles as default };

package/dist/forms/elements/color-checkbox/color-checkbox.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxProps, CheckboxPropsBase } from '../checkbox/checkbox';
+interface ColorCheckboxPropsBase extends CheckboxPropsBase {
+    color: string;
+}
+export type ColorCheckboxProps = ColorCheckboxPropsBase & CheckboxProps;
+export declare function ColorCheckbox(props: ColorCheckboxProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/elements/color-checkbox/color-checkbox.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox } from 'react-aria-components';
+import clsx from 'clsx';
+import { Label } from '../label/label.js';
+import styles from '../checkbox/checkbox.module.css.js';
+
+function ColorCheckbox(props) {
+    const { autoFocus, className, color, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isReadOnly, isRequired, isSelected, name, onChange, value, } = props;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    const children = 'children' in props ? props.children : undefined;
+    return (jsxs(Checkbox, { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx(styles.checkbox, styles['color-checkbox'], className), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isSelected: isSelected, name: name, onChange: onChange, style: {
+            '--selected-color': color,
+        }, value: value, children: [jsx("div", { className: styles.box }), jsx(Label, { className: styles.label, isRequired: isRequired, children: children })] }));
+}
+
+export { ColorCheckbox };

package/dist/forms/elements/field-error/field-error.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export type ValidationError = string | string[];
+export type ValidateFunction<T> = (value: T) => ValidationError | true | null | undefined;
+export interface ValidationResult {
+    /** Whether the input value is invalid. */
+    isInvalid: boolean;
+    /** The native validation details for the input. */
+    validationDetails: ValidityState;
+    /** The current error messages for the input if it is invalid, otherwise an empty array. */
+    validationErrors: string[];
+}
+interface FieldErrorProps {
+    children?: ReactNode | ((values: ValidationResult & {
+        defaultChildren: ReactNode;
+    }) => ReactNode);
+    className?: string;
+}
+export declare function FieldError({ children, className }: FieldErrorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/forms/elements/field-error/field-error.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FieldError as FieldError$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import styles from './field-error.module.css.js';
+
+function FieldError({ children, className }) {
+    const t = useFormattedMessage();
+    return (jsx(FieldError$1, { className: clsx(className, styles['field-error']), children: children ||
+            (result => {
+                if (!result.isInvalid)
+                    return;
+                if (result.validationDetails.customError)
+                    return result.validationErrors[0];
+                const validationErrorType = Object.entries(result.validationDetails)
+                    .filter(([, value]) => value)
+                    .map(([key]) => key)[0];
+                if (validationErrorType)
+                    return t(`validation.${validationErrorType}`, {
+                        noTranslationId: true,
+                    });
+                return t('validation.invalid');
+            }) }));
+}
+
+export { FieldError };

package/dist/forms/elements/field-error/field-error.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"field-error":"field-error-module-1wmEy"};
+
+export { styles as default };

package/dist/forms/{input → elements/input}/input.d.ts

@@ -2,9 +2,15 @@ import { ComponentProps, FC } from 'react';
 import { Input as AriaInput } from 'react-aria-components';
 export interface InputProps extends Omit<ComponentProps<typeof AriaInput>, 'size'> {
     _pseudo?: 'focus' | 'none';
+    autoComplete?: string;
     autoGrow?: boolean;
+    className?: string;
+    'data-test-selector'?: string;
+    inlineElement?: React.ReactNode;
+    label: string;
     size?: 'md' | 'lg';
     value?: string | number;
+    variant?: 'solid' | 'outline';
 }
 /**
  * This component is used to create an input that grows as the user types.

package/dist/forms/elements/input/input.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { useContextProps, InputContext, Input as Input$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import styles from './input.module.css.js';
+
+/**
+ * This component is used to create an input that grows as the user types.
+ * It uses a shadow input to calculate the width of the input.
+ */
+const Input = forwardRef(({ _pseudo = 'none', autoComplete, autoGrow, className, inlineElement, label, size = 'lg', variant = 'solid', ...inputProps }, inputRef) => {
+    const [props, ref] = useContextProps(inputProps, inputRef, InputContext);
+    const { defaultValue, onChange, value: controlledValue } = props;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : uncontrolledValue;
+    const handleChange = (event) => isControlled
+        ? onChange?.(event)
+        : setUncontrolledValue(event.target.value);
+    return (jsx("div", { className: clsx(className, styles['input-container'], styles[size], styles[_pseudo], styles[variant]), children: jsxs("div", { className: clsx(styles.input, {
+                [styles['growing-input']]: autoGrow,
+            }), children: [jsx(Input$1, { ...props, ref: ref, "aria-label": label, "auto-complete": autoComplete, onChange: handleChange, onClick: e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        e.target.focus();
+                    }, size: autoGrow ? 1 : undefined }), inlineElement && (jsx("div", { className: styles['inline-element'], children: inlineElement })), autoGrow && jsx("span", { className: styles['shadow-input'], children: value })] }) }));
+});
+Input.displayName = 'Input';
+
+export { Input };

package/dist/forms/elements/input/input.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"input-container":"input-module-uAOUY","solid":"input-module-7IaPE","outline":"input-module-axHOD","shadow-input":"input-module-2u4Pp","lg":"input-module-HFhUu","md":"input-module-DRosR","focus":"input-module-7iPV5","growing-input":"input-module-peOqs","inline-element":"input-module-Ai2f7","input":"input-module-JdwaH"};
+
+export { styles as default };

package/dist/forms/elements/label/label.d.ts

@@ -0,0 +1,8 @@
+interface LabelProps {
+    children: string | React.ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    isRequired?: boolean;
+}
+export declare function Label({ children, className, 'data-test-selector': dataTestSelector, isRequired, }: LabelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/forms/elements/label/label.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Label as Label$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import styles from './label.module.css.js';
+
+function Label({ children, className, 'data-test-selector': dataTestSelector, isRequired, }) {
+    if (!children)
+        return null;
+    return (jsxs(Label$1, { className: clsx(styles.label, className), "data-test-selector": dataTestSelector, children: [children, isRequired && jsx("span", { className: styles.required, children: "*" })] }));
+}
+
+export { Label };

package/dist/forms/elements/label/label.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"label":"label-module-iLPRx","required":"label-module-8uUN-"};
+
+export { styles as default };

package/dist/forms/elements/select/select.d.ts

@@ -0,0 +1,20 @@
+export interface SelectProps<T> {
+    className?: string;
+    'data-test-selector'?: string;
+    defaultSelectedOption?: keyof T;
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    label: string;
+    name?: string;
+    onChange?: (value: keyof T) => void;
+    options: T;
+    placeholder?: string;
+    selectedOption?: keyof T;
+    showLabel?: boolean;
+    showPlaceholder?: boolean;
+    size?: 'sm' | 'md';
+    variant?: 'outline' | 'solid';
+}
+export declare function Select<T extends Record<string, string>>({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, icon, isDisabled, isLoading, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/elements/select/select.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxSection, Header, ListBoxItem } from 'react-aria-components';
+import clsx from 'clsx';
+import { Icon } from '../../../icon/icon.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { FieldError } from '../field-error/field-error.js';
+import { Label } from '../label/label.js';
+import styles from './select.module.css.js';
+
+const defaultIcon = (jsx(Icon, { className: styles.chevron, name: "ArrowDown", size: "xxs" }));
+function Select({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, icon = defaultIcon, isDisabled = false, isLoading, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = false, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+    const selectRef = useRef(null);
+    useEffect(() => {
+        const updateWidth = () => {
+            if (!selectRef.current)
+                return;
+            const width = selectRef.current.getBoundingClientRect().width;
+            selectRef.current.style.setProperty('--trigger-width', `${width}px`);
+        };
+        updateWidth();
+        if (typeof window === 'undefined')
+            return;
+        window.addEventListener('resize', updateWidth);
+        return () => window?.removeEventListener('resize', updateWidth);
+    }, []);
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant], {
+            [styles['loading']]: isLoading,
+        }, className), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
+            ? undefined
+            : String(defaultSelectedOption), isDisabled: isDisabled, isRequired: isRequired, name: name, onSelectionChange: selected => onChange?.(selected), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx("div", { className: styles['icon-wrapper'], children: isLoading ? jsx(ProgressCircle, { variant: "gray" }) : icon })] }), jsx(FieldError, {}), jsx(Popover, { ref: ref => 
+                // Workaround for react/react-aria #1513
+                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(ListBoxSection, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(Icon, { className: styles.check, name: "Checkmark" }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+}
+
+export { Select };

package/dist/forms/elements/select/select.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"select":"select-module-IPU-m","sm":"select-module-ysEmc","md":"select-module-E62kG","button":"select-module-0kwVJ","icon-wrapper":"select-module-ptK6Z","focus":"select-module-cnFLz","solid":"select-module-Qq411","loading":"select-module-KuyIv","popover":"select-module-XFHrL","listbox":"select-module-K6TjK","header":"select-module-AUXLg","item":"select-module-MkKKi","check":"select-module-N7nUk"};
+
+export { styles as default };

package/dist/forms/elements/switch/switch.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export interface SwitchPropsBase {
+    autoFocus?: boolean;
+    className?: string;
+    'data-test-selector'?: string;
+    defaultSelected?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isSelected?: boolean;
+    name?: string;
+    onChange?: (isSelected: boolean) => void;
+    value?: string;
+}
+export interface SwitchWithLabelProps extends SwitchPropsBase {
+    'aria-label': string;
+}
+export interface SwitchWithChildrenProps extends SwitchPropsBase {
+    children: ReactNode;
+}
+export type SwitchProps = SwitchWithLabelProps | SwitchWithChildrenProps;
+export declare function Switch(props: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/elements/switch/switch.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Switch as Switch$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { Label } from '../label/label.js';
+import styles from './switch.module.css.js';
+
+function Switch(props) {
+    const { autoFocus, className, 'data-test-selector': dataTestSelector, defaultSelected, isDisabled, isReadOnly, isRequired, isSelected, name, onChange, value, } = props;
+    const ariaLabel = 'aria-label' in props ? props['aria-label'] : undefined;
+    const children = 'children' in props ? props.children : undefined;
+    return (jsxs(Switch$1, { "aria-label": ariaLabel, autoFocus: autoFocus, className: clsx(className, styles.switch), "data-test-selector": dataTestSelector, defaultSelected: defaultSelected, isDisabled: isDisabled, isReadOnly: isReadOnly, isSelected: isSelected, name: name, onChange: onChange, value: value, children: [jsx("div", { className: styles.indicator }), children && (jsx(Label, { className: styles.label, isRequired: isRequired, children: children }))] }));
+}
+
+export { Switch };

package/dist/forms/elements/switch/switch.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"switch":"switch-module-C7eqt","indicator":"switch-module-UZop9","label":"switch-module-rX09b"};
+
+export { styles as default };

package/dist/forms/{textarea → elements/textarea}/textarea.d.ts

@@ -2,7 +2,11 @@ import { ComponentProps, FC } from 'react';
 import { TextArea as AriaTextArea } from 'react-aria-components';
 export interface TextAreaProps extends Omit<ComponentProps<typeof AriaTextArea>, 'size'> {
     autoGrow?: boolean;
+    className?: string;
+    'data-test-selector'?: string;
+    label: string;
     size?: 'md' | 'lg';
+    variant?: 'solid' | 'outline';
 }
 /**
  * This component is used to create a textarea that can grow as the user types.

package/dist/forms/elements/textarea/textarea.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useCallback, useEffect } from 'react';
+import { useContextProps, TextAreaContext, TextArea as TextArea$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import styles from './textarea.module.css.js';
+
+/**
+ * This component is used to create a textarea that can grow as the user types.
+ * It uses the scrollHeight property to calculate the height of the textarea.
+ * The initial height is calculated based on the style of the textarea.
+ * The height is updated everytime the user types.
+ */
+const TextArea = ({ autoGrow, className, label, ref: _ref, size, variant = 'solid', ...textAreaProps }) => {
+    const textAreaRef = useRef(null);
+    const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
+    const initialHeight = useRef(null);
+    const updateHeight = useCallback(() => {
+        if (!ref.current)
+            return;
+        if (!autoGrow)
+            return void ref.current.style.removeProperty('height');
+        ref.current.style.height = `${initialHeight.current}px`;
+        if (ref.current.scrollHeight > (initialHeight.current || 0)) {
+            ref.current.style.height = `${ref.current.scrollHeight}px`;
+        }
+    }, [autoGrow, ref]);
+    useEffect(() => {
+        initialHeight.current = null;
+        ref.current?.style.removeProperty('height');
+    }, [ref, size]);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        if (initialHeight.current === null &&
+            typeof getComputedStyle !== 'undefined') {
+            const styleHeight = getComputedStyle(ref.current).height.match(/\d+/)?.[0];
+            initialHeight.current = styleHeight
+                ? Number.parseFloat(styleHeight)
+                : null;
+        }
+        updateHeight();
+    }, [ref, autoGrow, updateHeight, size]);
+    return (jsx(Fragment, { children: jsx("div", { className: clsx(className, styles['input-container'], styles[variant]), children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
+                    ref.current = node;
+                    textAreaRef.current = node;
+                }, onInput: e => {
+                    updateHeight();
+                    props.onInput?.(e);
+                } }) }) }));
+};
+TextArea.displayName = 'TextArea';
+
+export { TextArea };

package/dist/forms/elements/textarea/textarea.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"input-container":"textarea-module-FEAEz","solid":"textarea-module-hHg5e","outline":"textarea-module-CEbPl","lg":"textarea-module-PKIWL","md":"textarea-module-27RUM"};
+
+export { styles as default };

package/dist/forms/fields/checkbox-field/checkbox-field.d.ts

@@ -0,0 +1,10 @@
+import { CheckboxProps, CheckboxPropsBase } from '../../elements/checkbox/checkbox';
+import { ValidateFunction } from '../../elements/field-error/field-error';
+export interface CheckboxFieldPropsBase extends CheckboxPropsBase {
+    errorMessage?: string;
+    info?: string;
+    isInvalid?: boolean;
+    validate?: ValidateFunction<boolean>;
+}
+export type CheckboxFieldProps = CheckboxFieldPropsBase & CheckboxProps;
+export declare function CheckboxField(props: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/fields/checkbox-field/checkbox-field.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { CheckboxGroup } from 'react-aria-components';
+import clsx from 'clsx';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { Checkbox } from '../../elements/checkbox/checkbox.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
+import styles from './checkbox-field.module.css.js';
+
+function CheckboxField(props) {
+    const { className, defaultSelected, info, isDisabled, isInvalid, isReadOnly, isRequired, isSelected, validate, value = 'true', } = props;
+    return (jsx(CheckboxGroup, { className: clsx(styles['checkbox-field'], className), defaultValue: defaultSelected ? [value] : undefined, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, validate: values => validate?.(values.every(Boolean)), value: isSelected ? [value] : undefined, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), children: jsx(Checkbox, { ...props }) }) }));
+}
+
+export { CheckboxField };

package/dist/forms/fields/checkbox-field/checkbox-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"checkbox-field":"checkbox-field-module-cjj4V"};
+
+export { styles as default };

package/dist/forms/fields/number-field/number-field.d.ts

@@ -0,0 +1,39 @@
+import { FocusEvent, SyntheticEvent } from 'react';
+import { ValidateFunction } from '../../elements/field-error/field-error';
+export interface NumberFieldProps {
+    autoFocus?: boolean;
+    autoGrow?: boolean;
+    className?: string;
+    'data-test-selector'?: string;
+    defaultValue?: number;
+    formatOptions?: Intl.NumberFormatOptions;
+    info?: string;
+    inputMode?: 'numeric' | 'decimal';
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    label: string;
+    maxLength?: number;
+    maxValue?: number;
+    minValue?: number;
+    name?: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (value: number) => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onInput?: (e: SyntheticEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent) => void;
+    placeholder?: string;
+    showLabel?: boolean;
+    size?: 'md' | 'lg';
+    step?: number;
+    validate?: ValidateFunction<number>;
+    value?: number;
+    withButtons?: boolean;
+}
+export declare const NumberField: {
+    ({ autoGrow, className, "data-test-selector": dataTestSelector, defaultValue, formatOptions, info, inputMode, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onBlur, onChange, onFocus, onInput, onKeyUp, placeholder, ref, showLabel, size, step, value, withButtons, }: NumberFieldProps & {
+        ref?: React.RefObject<HTMLInputElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/forms/fields/number-field/number-field.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { NumberField as NumberField$1, Button } from 'react-aria-components';
+import clsx from 'clsx';
+import { Icon } from '../../../icon/icon.js';
+import { InfoIconTooltip } from '../../../info-icon-tooltip/info-icon-tooltip.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { multiRef } from '../../../shared/utils/refs.js';
+import { FieldError } from '../../elements/field-error/field-error.js';
+import { Input } from '../../elements/input/input.js';
+import { Label } from '../../elements/label/label.js';
+import { FormFieldLayout } from '../../layout/form/form-field-layout.js';
+import styles from './number-field.module.css.js';
+
+const defaultFormatOptions = {
+    style: 'decimal',
+    useGrouping: false,
+    // TODO: more needed here? Locale?
+    // TODO: this should be hard set options, not free to tweak
+};
+function NumberFieldControls({ active, children, isDisabled, showReset, }) {
+    return (jsxs("div", { className: styles['controls'], children: [active && (jsx(Button, { className: styles['control'], "data-test-selector": "decrement", isDisabled: isDisabled, slot: "decrement", children: showReset ? (jsx(Icon, { name: "Trash", size: "xs" })) : (jsx(Icon, { name: "Minus", size: "xs" })) })), children, active && (jsx(Button, { className: styles['control'], "data-test-selector": "increment", isDisabled: isDisabled, slot: "increment", children: jsx(Icon, { name: "Plus", size: "xs" }) }))] }));
+}
+let debouncedChange;
+let debouncedKeyup;
+const NumberField = ({ autoGrow, className, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = defaultFormatOptions, info, inputMode = 'numeric', isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue = 0, name, onBlur, onChange, onFocus, onInput, onKeyUp, placeholder, ref, showLabel, size = 'lg', step = 1, value, withButtons, }) => {
+    const t = useFormattedMessage();
+    const inputRef = useRef(null);
+    const [showControlsReset, setShowControlsReset] = useState((defaultValue || value || 0) - step <= minValue);
+    useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setShowControlsReset((value || 0) - step <= minValue);
+    }, [value, step, minValue]);
+    const handleChange = (value) => {
+        // there needs to be a debounce here to prevent React Aria from firing onChange event twice on arrow key interaction
+        clearTimeout(debouncedChange);
+        debouncedChange = setTimeout(() => {
+            onChange?.(value);
+        }, 1);
+    };
+    const handleKeyUp = (e) => {
+        clearTimeout(debouncedKeyup);
+        debouncedKeyup = setTimeout(() => {
+            if (onKeyUp)
+                onKeyUp(e);
+        }, 1);
+    };
+    return (jsx(NumberField$1, { "aria-label": label, className: clsx(styles['number-field'], styles[size], className), "data-test-selector": dataTestSelector, decrementAriaLabel: t('Decrease'), defaultValue: defaultValue, formatOptions: formatOptions, incrementAriaLabel: t('Increase'), isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: value => {
+            handleChange(value);
+        }, onInput: onInput, onKeyUp: handleKeyUp, step: step, value: value, children: jsx(FormFieldLayout, { errorSlot: jsx(FieldError, {}), infoSlot: info && jsx(InfoIconTooltip, { children: info }), labelSlot: showLabel && jsx(Label, { isRequired: isRequired, children: label }), children: jsx(NumberFieldControls, { active: withButtons, isDisabled: isDisabled, showReset: showControlsReset, children: jsx(Input, { ref: multiRef(inputRef, ref), autoGrow: autoGrow, "data-test-selector": "value", inputMode: inputMode, label: label, maxLength: maxLength, onBlur: onBlur, onFocus: onFocus, placeholder: placeholder, size: size }) }) }) }));
+};
+NumberField.displayName = 'NumberField';
+
+export { NumberField };

package/dist/forms/fields/number-field/number-field.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"number-field":"number-field-module-eFnKr","controls":"number-field-module-MAY-9","zoom-in-text":"number-field-module-QbNfS","control":"number-field-module-v1sB2"};
+
+export { styles as default };

package/dist/forms/fields/password-field/password-field.d.ts

@@ -0,0 +1,2 @@
+import { SingleLineTextFieldProps } from '../text-field/text-field';
+export declare function PasswordField(props: Omit<SingleLineTextFieldProps, 'inlineElement' | 'type'> & {}): import("react/jsx-runtime").JSX.Element;

package/dist/forms/fields/password-field/password-field.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { PasswordRevealToggle } from '../text-field/password-reveal-toggle/password-reveal-toggle.js';
+import { TextField } from '../text-field/text-field.js';
+
+function PasswordField(props) {
+    const [type, setType] = useState('_password');
+    const isPasswordInput = type === '_password';
+    const togglePasswordType = useCallback(() => {
+        setType(isPasswordInput ? 'text' : '_password');
+    }, [isPasswordInput]);
+    return (jsx(TextField, { ...props, inlineElement: jsx(PasswordRevealToggle, { onChange: togglePasswordType, showPassword: !isPasswordInput }), isMultiline: false, type: type }));
+}
+
+export { PasswordField };

package/dist/forms/fields/search-field/search-field.d.ts

@@ -0,0 +1,5 @@
+import { SingleLineTextFieldProps } from '../text-field/text-field';
+export declare function SearchField({ isDebounced, isLoading, onChange, value: _value, ...props }: Omit<SingleLineTextFieldProps, 'inlineElement' | 'type'> & {
+    isDebounced?: boolean;
+    isLoading?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/forms/fields/search-field/search-field.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Icon } from '../../../icon/icon.js';
+import { ProgressCircle } from '../../../loading/progress-circle.js';
+import { useDebouncedCallback } from '../../../shared/hooks/use-debounced-callback.js';
+import { TextField } from '../text-field/text-field.js';
+
+function SearchField({ isDebounced = false, isLoading = false, onChange, value: _value, ...props }) {
+    const [inputValue, setInputValue] = useState(_value);
+    const onChangeDebounced = useDebouncedCallback((...args) => onChange?.(...args), 300);
+    return (jsx(TextField, { ...props, inlineElement: isLoading ? (jsx(ProgressCircle, { size: "sm", variant: "gray" })) : (jsx(Icon, { name: "Search", size: "sm" })), isMultiline: false, onChange: isDebounced
+            ? (...args) => {
+                onChangeDebounced(...args);
+                setInputValue(...args);
+            }
+            : onChange, role: "searchbox", spellCheck: false, type: "_search", value: isDebounced ? inputValue : _value }));
+}
+
+export { SearchField };

package/dist/forms/fields/select-field/select-field.d.ts

@@ -0,0 +1,34 @@
+import { ValidateFunction } from '../../elements/field-error/field-error';
+export interface SelectFieldOptionGroup<K> {
+    key: string;
+    label: string;
+    options: Array<K>;
+    reactNode?: React.ReactNode;
+}
+interface SelectFieldPropsBase {
+    'data-test-selector'?: string;
+    label: string;
+    placeholder?: string;
+    size?: 'md' | 'lg';
+}
+interface SelectFieldProps<T> extends SelectFieldPropsBase {
+    autoFocus?: boolean;
+    className?: string;
+    defaultSelectedOption?: keyof T;
+    info?: string;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    name?: string;
+    onChange?: (value: keyof T) => void;
+    optionGroups?: SelectFieldOptionGroup<keyof T>[];
+    options: T;
+    selectedOption?: keyof T;
+    showLabel?: boolean;
+    showPlaceholder?: boolean;
+    validate?: ValidateFunction<string>;
+    variant?: 'outline' | 'solid';
+}
+export declare function SelectField<T extends Record<string, string | React.ReactNode>>({ className, 'data-test-selector': dataTestSelector, defaultSelectedOption, info, isDisabled, isInvalid, isLoading, isRequired, label, name, onChange, optionGroups, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};