@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/dist/components/Form/DateField/DateField.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { toBasicISOString } from '@douglasneuroinformatics/libjs';
+import { DatePicker } from '../../DatePicker/DatePicker.js';
+import { Input } from '../../Input/Input.js';
+import { Label } from '../../Label/Label.js';
+import { Popover } from '../../Popover/Popover.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+import {} from '../types.js';
+const isValidDateString = (s) => /^(\d{4})-((0[1-9])|(1[0-2]))-((0[1-9])|([12])[0-9]|3[01])$/.test(s);
+export const DateField = ({ error, label, name, setValue, value }) => {
+    const [isDatePickerOpen, setIsDatePickerOpen] = useState(false);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    useEffect(() => {
+        const isSelecting = isDatePickerOpen || isInputFocused;
+        if (isSelecting) {
+            return;
+        }
+        else if (isValidDateString(inputValue)) {
+            setValue(new Date(inputValue));
+        }
+        else {
+            setInputValue('');
+        }
+    }, [isDatePickerOpen, isInputFocused]);
+    useEffect(() => {
+        setInputValue(value ? toBasicISOString(value) : '');
+    }, [value]);
+    return (React.createElement(FieldGroup, null,
+        React.createElement(Label, { htmlFor: name }, label),
+        React.createElement(Popover, { open: isDatePickerOpen, onOpenChange: setIsDatePickerOpen },
+            React.createElement(Popover.Trigger, null,
+                React.createElement(Input, { autoComplete: "off", "data-cy": "date-input", "data-testid": "date-input", name: name, placeholder: "YYYY-MM-DD", type: "text", value: inputValue, onBlur: () => setIsInputFocused(false), onChange: (event) => setInputValue(event.target.value), onFocus: () => setIsInputFocused(true) })),
+            React.createElement(Popover.Content, { asChild: true, align: "start", autofocus: false, className: "w-auto" },
+                React.createElement(DatePicker, { onSelection: (value) => {
+                        setInputValue(toBasicISOString(value));
+                        setIsDatePickerOpen(false);
+                    } }))),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/dist/components/Form/DynamicField.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { DynamicFormField, FormDataType, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
+import type { FormErrors } from './types.js';
+export type DynamicFieldProps<TData extends FormDataType> = {
+    errors: FormErrors<TData>;
+    field: DynamicFormField<TData>;
+    name: string;
+    setErrors: React.Dispatch<React.SetStateAction<FormErrors<TData>>>;
+    setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<TData>>>;
+    values: PartialFormDataType<TData>;
+};
+export declare const DynamicField: <TData extends FormDataType>({ field, name, values, ...props }: DynamicFieldProps<TData>) => React.JSX.Element | null;
+//# sourceMappingURL=DynamicField.d.ts.map

package/dist/components/Form/DynamicField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/DynamicField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAKrH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,YAAY,IAAI;IAC1D,MAAM,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC1B,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACnE,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC5E,MAAM,EAAE,mBAAmB,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,YAAY,kEAKtB,kBAAkB,KAAK,CAAC,6BAqB1B,CAAC"}

package/dist/components/Form/DynamicField.js

@@ -0,0 +1,21 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { pick } from 'lodash-es';
+import { StaticField } from './StaticField.js';
+export const DynamicField = ({ field, name, values, ...props }) => {
+    const [dependentValues, setDependentValues] = useState(pick(values, field.deps));
+    const staticField = useMemo(() => {
+        return field.render(values);
+    }, [dependentValues, field.render]);
+    useEffect(() => {
+        for (const key of field.deps) {
+            if (dependentValues[key] !== values[key]) {
+                setDependentValues(pick(values, field.deps));
+                break;
+            }
+        }
+    }, [field.deps, values]);
+    if (!staticField) {
+        return null;
+    }
+    return React.createElement(StaticField, { ...props, field: staticField, name: name, values: values });
+};

package/dist/components/Form/ErrorMessage.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ErrorMessage: React.FC<{
+    error?: null | string;
+}>;
+//# sourceMappingURL=ErrorMessage.d.ts.map

package/dist/components/Form/ErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Form/ErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAMnD,CAAC"}

package/dist/components/Form/ErrorMessage.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CircleAlertIcon } from 'lucide-react';
+export const ErrorMessage = ({ error }) => error ? (React.createElement("div", { className: "flex w-full items-center text-sm font-medium text-destructive" },
+    React.createElement(CircleAlertIcon, { className: "mr-1", style: { strokeWidth: '2px' } }),
+    React.createElement("span", null, error))) : null;

package/dist/components/Form/FieldGroup/FieldGroup.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" resolution-mode="require"/>
+export declare const FieldGroup: import("react").FC<{
+    children: import("react").ReactNode;
+}> & {
+    Description: import("react").FC<{
+        description?: string | null | undefined;
+    }>;
+    Error: import("react").FC<{
+        error?: string | null | undefined;
+    }>;
+    Row: import("react").FC<{
+        children: import("react").ReactNode;
+    }>;
+};
+//# sourceMappingURL=FieldGroup.d.ts.map

package/dist/components/Form/FieldGroup/FieldGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FieldGroup/FieldGroup.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,UAAU;;;;;;;;;;;;CAIrB,CAAC"}

package/dist/components/Form/FieldGroup/FieldGroup.js

@@ -0,0 +1,9 @@
+import { ErrorMessage } from '../ErrorMessage.js';
+import { FieldGroupDescription } from './FieldGroupDescription.js';
+import { FieldGroupRoot } from './FieldGroupRoot.js';
+import { FieldGroupRow } from './FieldGroupRow.js';
+export const FieldGroup = Object.assign(FieldGroupRoot, {
+    Description: FieldGroupDescription,
+    Error: ErrorMessage,
+    Row: FieldGroupRow
+});

package/dist/components/Form/FieldGroup/FieldGroupDescription.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const FieldGroupDescription: React.FC<{
+    description?: null | string;
+}>;
+//# sourceMappingURL=FieldGroupDescription.d.ts.map

package/dist/components/Form/FieldGroup/FieldGroupDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupDescription.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FieldGroup/FieldGroupDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;CAAE,CAUlE,CAAC"}

package/dist/components/Form/FieldGroup/FieldGroupDescription.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CircleHelpIcon } from 'lucide-react';
+import { Popover } from '../../Popover/Popover.js';
+export const FieldGroupDescription = ({ description }) => description ? (React.createElement(Popover, null,
+    React.createElement(Popover.Trigger, null,
+        React.createElement(CircleHelpIcon, { className: "text-muted-foreground" })),
+    React.createElement(Popover.Content, { className: "text-sm text-muted-foreground" },
+        React.createElement("p", null, description)))) : null;

package/dist/components/Form/FieldGroup/FieldGroupRoot.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const FieldGroupRoot: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=FieldGroupRoot.d.ts.map

package/dist/components/Form/FieldGroup/FieldGroupRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FieldGroup/FieldGroupRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAElE,CAAC"}

package/dist/components/Form/FieldGroup/FieldGroupRoot.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const FieldGroupRoot = ({ children }) => (React.createElement("div", { className: "flex flex-col gap-2 @container" }, children));

package/dist/components/Form/FieldGroup/FieldGroupRow.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const FieldGroupRow: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=FieldGroupRow.d.ts.map

package/dist/components/Form/FieldGroup/FieldGroupRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupRow.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FieldGroup/FieldGroupRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAEjE,CAAC"}

package/dist/components/Form/FieldGroup/FieldGroupRow.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const FieldGroupRow = ({ children }) => (React.createElement("div", { className: "relative flex items-center gap-2" }, children));

package/dist/components/Form/FieldsComponent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FormDataType, FormFields, PartialFormDataType } from '@douglasneuroinformatics/libui-form-types';
+import type { FormErrors } from './types.js';
+export type FieldsComponentProps<T extends FormDataType> = {
+    errors: FormErrors<T>;
+    fields: FormFields<T>;
+    setErrors: React.Dispatch<React.SetStateAction<FormErrors<T>>>;
+    setValues: React.Dispatch<React.SetStateAction<PartialFormDataType<T>>>;
+    values: PartialFormDataType<T>;
+};
+/** Renders an object containing key value pairs, where the value is a FormField of some kind */
+export declare const FieldsComponent: <T extends FormDataType>({ fields, ...props }: FieldsComponentProps<T>) => React.JSX.Element[];
+//# sourceMappingURL=FieldsComponent.d.ts.map

package/dist/components/Form/FieldsComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsComponent.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FieldsComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC;AAK/G,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,YAAY,IAAI;IACzD,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACtB,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACxE,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;CAChC,CAAC;AAEF,gGAAgG;AAChG,eAAO,MAAM,eAAe,iDAAkD,qBAAqB,CAAC,CAAC,wBAQpG,CAAC"}

package/dist/components/Form/FieldsComponent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DynamicField } from './DynamicField.js';
+import { StaticField } from './StaticField.js';
+/** Renders an object containing key value pairs, where the value is a FormField of some kind */
+export const FieldsComponent = ({ fields, ...props }) => {
+    return Object.keys(fields).map((name) => {
+        const field = fields[name];
+        if (field.kind === 'dynamic') {
+            return React.createElement(DynamicField, { ...props, field: field, key: name, name: name });
+        }
+        return React.createElement(StaticField, { ...props, field: field, key: name, name: name });
+    });
+};

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { FormContent, FormDataType, PartialNullableFormDataType } from '@douglasneuroinformatics/libui-form-types';
+import { z } from 'zod';
+type FormProps<TSchema extends z.ZodType<FormDataType>, TData extends z.infer<TSchema> = z.infer<TSchema>> = {
+    [key: `data-${string}`]: unknown;
+    className?: string;
+    content: FormContent<TData>;
+    id?: string;
+    initialValues?: PartialNullableFormDataType<TData>;
+    onError?: (error: z.ZodError<TData>) => void;
+    onSubmit: (data: TData) => void;
+    resetBtn?: boolean;
+    submitBtnLabel?: string;
+    validationSchema: z.ZodType<TData>;
+};
+declare const Form: <TSchema extends z.ZodType<FormDataType, z.ZodTypeDef, FormDataType>, TData extends z.TypeOf<TSchema> = z.TypeOf<TSchema>>({ className, content, id, initialValues, onError, onSubmit, resetBtn, submitBtnLabel, validationSchema, ...props }: FormProps<TSchema, TData>) => React.JSX.Element;
+export { Form, type FormProps };
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/Form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGZ,2BAA2B,EAC5B,MAAM,2CAA2C,CAAC;AAInD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAUxB,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;IAC3G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,2BAA2B,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,IAAI,iPAWP,UAAU,OAAO,EAAE,KAAK,CAAC,sBAgG3B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}

package/dist/components/Form/Form.js

@@ -0,0 +1,64 @@
+import React, { useState } from 'react';
+import { set } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { Button } from '../Button/Button.js';
+import { Heading } from '../Heading/Heading.js';
+import { ErrorMessage } from './ErrorMessage.js';
+import { FieldsComponent } from './FieldsComponent.js';
+import { getInitialValues } from './utils.js';
+const Form = ({ className, content, id, initialValues, onError, onSubmit, resetBtn, submitBtnLabel, validationSchema, ...props }) => {
+    const { t } = useTranslation('libui');
+    const [rootError, setRootError] = useState(null);
+    const [errors, setErrors] = useState({});
+    const [values, setValues] = useState(initialValues ? getInitialValues(initialValues) : {});
+    const handleError = (error) => {
+        const fieldErrors = {};
+        const rootErrors = [];
+        for (const issue of error.issues) {
+            if (issue.path.length > 0) {
+                set(fieldErrors, issue.path, issue.message);
+            }
+            else {
+                rootErrors.push(issue.message);
+            }
+        }
+        setRootError(rootErrors.join('\n'));
+        setErrors(fieldErrors);
+        if (onError) {
+            onError(error);
+        }
+    };
+    const reset = () => {
+        setRootError(null);
+        setErrors({});
+        setValues({});
+    };
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        const result = validationSchema.safeParse(values);
+        if (result.success) {
+            reset();
+            onSubmit(result.data);
+        }
+        else {
+            console.error(result.error.issues);
+            handleError(result.error);
+        }
+    };
+    const isGrouped = Array.isArray(content);
+    return (React.createElement("form", { autoComplete: "off", className: twMerge('w-full', isGrouped ? 'space-y-8 divide-y' : 'space-y-6', className), id: id, onSubmit: handleSubmit, ...props },
+        isGrouped ? (content.map((fieldGroup, i) => {
+            return (React.createElement("div", { className: "space-y-6 [&:not(:first-child)]:pt-8", key: i },
+                React.createElement("div", { className: "space-y-1" },
+                    React.createElement(Heading, { variant: "h4" }, fieldGroup.title),
+                    fieldGroup.description && (React.createElement("p", { className: "text-sm italic leading-tight text-muted-foreground" }, fieldGroup.description))),
+                React.createElement(FieldsComponent, { errors: errors, fields: fieldGroup.fields, setErrors: setErrors, setValues: setValues, values: values })));
+        })) : (React.createElement(FieldsComponent, { errors: errors, fields: content, setErrors: setErrors, setValues: setValues, values: values })),
+        React.createElement("div", { className: "flex w-full gap-3" },
+            React.createElement(Button, { "aria-label": "Submit Button", className: "block w-full", "data-cy": "submit-form", type: "submit", variant: "primary" }, submitBtnLabel ?? t('form.submit')),
+            resetBtn && (React.createElement(Button, { "aria-label": "Reset Button", className: "block w-full", type: "button", variant: "secondary", onClick: reset }, t('form.reset')))),
+        rootError && React.createElement(ErrorMessage, { error: rootError })));
+};
+export { Form };

package/dist/components/Form/NumberField/NumberField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type NumberFieldInputProps } from './NumberFieldInput.js';
+import { type NumberFieldRadioProps } from './NumberFieldRadio.js';
+import { type NumberFieldSliderProps } from './NumberFieldSlider.js';
+export type NumberFieldProps = NumberFieldInputProps | NumberFieldRadioProps | NumberFieldSliderProps;
+export declare const NumberField: (props: NumberFieldProps) => React.JSX.Element;
+//# sourceMappingURL=NumberField.d.ts.map

package/dist/components/Form/NumberField/NumberField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAExF,MAAM,MAAM,gBAAgB,GAAG,qBAAqB,GAAG,qBAAqB,GAAG,sBAAsB,CAAC;AAEtG,eAAO,MAAM,WAAW,UAAW,gBAAgB,sBAMlD,CAAC"}

package/dist/components/Form/NumberField/NumberField.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { match } from 'ts-pattern';
+import { NumberFieldInput } from './NumberFieldInput.js';
+import { NumberFieldRadio } from './NumberFieldRadio.js';
+import { NumberFieldSlider } from './NumberFieldSlider.js';
+export const NumberField = (props) => {
+    return match(props)
+        .with({ variant: 'input' }, (props) => React.createElement(NumberFieldInput, { ...props }))
+        .with({ variant: 'slider' }, (props) => React.createElement(NumberFieldSlider, { ...props }))
+        .with({ variant: 'radio' }, (props) => React.createElement(NumberFieldRadio, { ...props }))
+        .exhaustive();
+};

package/dist/components/Form/NumberField/NumberFieldInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from '../types.js';
+export type NumberFieldInputProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
+    variant: 'input';
+}>>;
+export declare const NumberFieldInput: ({ description, error, label, max, min, name, setValue, value }: NumberFieldInputProps) => React.JSX.Element;
+//# sourceMappingURL=NumberFieldInput.d.ts.map

package/dist/components/Form/NumberField/NumberFieldInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAM1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,mEAS1B,qBAAqB,sBAmBvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldInput.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Input } from '../../Input/Input.js';
+import { Label } from '../../Label/Label.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+export const NumberFieldInput = ({ description, error, label, max, min, name, setValue, value }) => {
+    const handleChange = (event) => {
+        const newValue = parseFloat(event.target.value);
+        if (Number.isNaN(newValue)) {
+            setValue(undefined);
+        }
+        else if (newValue >= (min ?? -Infinity) && newValue <= (max ?? Infinity)) {
+            setValue(newValue);
+        }
+    };
+    return (React.createElement(FieldGroup, null,
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Label, null, label),
+            React.createElement(FieldGroup.Description, { description: description })),
+        React.createElement(Input, { max: max, min: min, name: name, type: "text", value: value ?? '', onChange: handleChange }),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from '../types.js';
+export type NumberFieldRadioProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
+    variant: 'radio';
+}>>;
+export declare const NumberFieldRadio: ({ description, error, label, name, options, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
+//# sourceMappingURL=NumberFieldRadio.d.ts.map

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAAC,CACjF,CAAC;AAEF,eAAO,MAAM,gBAAgB,kEAQ1B,qBAAqB,sBAiCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldRadio.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { cn } from '../../../utils.js';
+import { Label } from '../../Label/Label.js';
+import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+export const NumberFieldRadio = ({ description, error, label, name, options, setValue, value }) => {
+    const optionsCount = Object.keys(options).length;
+    return (React.createElement(FieldGroup, null,
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Label, null, label),
+            React.createElement(FieldGroup.Description, { description: description })),
+        React.createElement(RadioGroup, { className: cn('flex', optionsCount > 5 ? 'flex-col' : 'flex-col @3xl:flex-row @3xl:items-center @3xl:justify-between'), name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseInt(value)) }, Object.keys(options)
+            .map((val) => parseInt(val))
+            .toSorted((a, b) => a - b)
+            .map((key) => (React.createElement("div", { className: "flex items-center gap-2", key: key },
+            React.createElement(RadioGroup.Item, { id: `${name}-${key}`, value: key.toString() }),
+            React.createElement(Label, { className: "font-normal", htmlFor: `${name}-${key}` }, options[key]))))),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/dist/components/Form/NumberField/NumberFieldSlider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { NumberFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from '../types.js';
+export type NumberFieldSliderProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
+    variant: 'slider';
+}>>;
+export declare const NumberFieldSlider: ({ description, error, label, max, min, name, setValue, value }: NumberFieldSliderProps) => React.JSX.Element;
+//# sourceMappingURL=NumberFieldSlider.d.ts.map

package/dist/components/Form/NumberField/NumberFieldSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFieldSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAM1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAC3C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,QAAQ,CAAA;CAAE,CAAC,CAClF,CAAC;AAEF,eAAO,MAAM,iBAAiB,mEAS3B,sBAAsB,sBAgBxB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSlider.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Label } from '../../Label/Label.js';
+import { Slider } from '../../Slider/Slider.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+export const NumberFieldSlider = ({ description, error, label, max, min, name, setValue, value }) => {
+    return (React.createElement(FieldGroup, null,
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Label, null, label),
+            React.createElement(FieldGroup.Description, { description: description })),
+        React.createElement(FieldGroup.Row, null,
+            React.createElement(Slider, { max: max, min: min, name: name, value: [value ?? 0], onValueChange: ([value]) => setValue(value) }),
+            React.createElement("span", { className: "flex h-full w-8 items-center justify-center text-sm text-muted-foreground" }, value ?? 'NA')),
+        React.createElement(FieldGroup.Error, { error: error })));
+};

package/dist/components/Form/NumberRecordField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { NumberRecordFieldValue, NumberRecordFormField, RequiredFieldValue } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from './types.js';
+export type NumberRecordFieldProps<T extends NumberRecordFieldValue = NumberRecordFieldValue> = Simplify<BaseFieldComponentProps<NumberRecordFieldValue> & NumberRecordFormField<RequiredFieldValue<T>>>;
+export declare const NumberRecordField: <T extends NumberRecordFieldValue = NumberRecordFieldValue>({ error: recordError, items, label, options, setError: setRecordError, setValue: setRecordValue, value: recordValue }: NumberRecordFieldProps<T>) => React.JSX.Element | null;
+//# sourceMappingURL=NumberRecordField.d.ts.map

package/dist/components/Form/NumberRecordField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberRecordField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/NumberRecordField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,2CAA2C,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,sBAAsB,GAAG,sBAAsB,IAAI,QAAQ,CACtG,uBAAuB,CAAC,sBAAsB,CAAC,GAAG,qBAAqB,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAC/F,CAAC;AAEF,eAAO,MAAM,iBAAiB,qLAQ3B,uBAAuB,CAAC,CAAC,6BAiC3B,CAAC"}

package/dist/components/Form/NumberRecordField.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from 'react';
+import { Heading } from '../Heading/Heading.js';
+import { NumberField } from './NumberField/NumberField.js';
+export const NumberRecordField = ({ error: recordError, items, label, options, setError: setRecordError, setValue: setRecordValue, value: recordValue }) => {
+    useEffect(() => {
+        setRecordValue({});
+    }, [options]);
+    if (!recordValue) {
+        return null;
+    }
+    return (React.createElement("div", { className: "space-y-4" },
+        React.createElement(Heading, { variant: "h5" }, label),
+        React.createElement("div", { className: "space-y-6" }, Object.keys(items).map((name) => {
+            const item = items[name];
+            return (React.createElement(NumberField, { error: recordError?.[name], key: name, kind: "number", name: name, options: options, setError: (error) => setRecordError({ ...recordError, [name]: error }), setValue: (value) => setRecordValue({ ...recordValue, [name]: value }), value: recordValue?.[name], variant: "radio", ...item }));
+        }))));
+};

package/dist/components/Form/RecordArrayField.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { RecordArrayFieldValue, RecordArrayFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from './types.js';
+export type RecordArrayFieldProps = Simplify<BaseFieldComponentProps<RecordArrayFieldValue> & RecordArrayFormField>;
+export declare const RecordArrayField: React.NamedExoticComponent<{
+    error?: {
+        [key: string]: string;
+    }[] | undefined;
+    name: string;
+    setError: (error: {
+        [key: string]: string;
+    }[]) => void;
+    setValue: (value: RecordArrayFieldValue) => void;
+    value: RecordArrayFieldValue;
+    description?: string | undefined;
+    kind: "record-array";
+    label: string;
+    fieldset: import("@douglasneuroinformatics/libui-form-types").Fieldset<{
+        [x: string]: NonNullable<import("@douglasneuroinformatics/libui-form-types").ScalarFieldValue>;
+    }>;
+}>;
+//# sourceMappingURL=RecordArrayField.d.ts.map

package/dist/components/Form/RecordArrayField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecordArrayField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/RecordArrayField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,OAAO,KAAK,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAG7G,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,GAAG,oBAAoB,CAAC,CAAC;AAEpH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;EAkF3B,CAAC"}

package/dist/components/Form/RecordArrayField.js

@@ -0,0 +1,56 @@
+import React, { memo, useEffect } from 'react';
+import { MinusCircleIcon, PlusCircleIcon } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../Button/Button.js';
+import { Heading } from '../Heading/Heading.js';
+import { Label } from '../Label/Label.js';
+import { ScalarField } from './ScalarField.js';
+export const RecordArrayField = memo(function RecordArrayField({ error: arrayError, fieldset, label, setError: setArrayError, setValue: setArrayValue, value: arrayValue }) {
+    const { t } = useTranslation('libui');
+    const createNewRecord = () => Object.fromEntries(Object.keys(fieldset).map((fieldName) => [fieldName, undefined]));
+    useEffect(() => {
+        setArrayValue([createNewRecord()]);
+    }, [fieldset]);
+    if (!arrayValue) {
+        return null;
+    }
+    // Creates a new object with all values mapped to null and appends it to the previous arrayValue
+    const appendField = () => {
+        setArrayValue([...arrayValue, createNewRecord()]);
+    };
+    const removeField = () => {
+        if (arrayValue.length > 1) {
+            setArrayValue(arrayValue.slice(0, arrayValue.length - 1));
+        }
+    };
+    return (React.createElement("div", { className: "space-y-4" },
+        React.createElement(Heading, { variant: "h5" }, label),
+        React.createElement("div", { className: "space-y-6" }, arrayValue.map((fields, i) => (React.createElement("div", { className: "space-y-4", key: i },
+            React.createElement(Label, { className: "font-semibold italic" }, label + ' ' + (i + 1)),
+            Object.keys(fields).map((name) => {
+                const field = fieldset[name];
+                const fieldProps = field?.kind === 'dynamic' ? field.render(fields) : field;
+                if (!fieldProps) {
+                    return null;
+                }
+                return (React.createElement(ScalarField, { error: arrayError?.[i]?.[name], field: fieldProps, key: name, name: name, setError: (error) => {
+                        const newArrayError = arrayError ? [...arrayError] : [];
+                        if (!newArrayError[i]) {
+                            newArrayError[i] = {};
+                        }
+                        newArrayError[i][name] = error;
+                        setArrayError(newArrayError);
+                    }, setValue: (value) => {
+                        const newArrayValue = [...arrayValue];
+                        newArrayValue[i][name] = value;
+                        setArrayValue(newArrayValue);
+                    }, value: arrayValue?.[i]?.[name] }));
+            }))))),
+        React.createElement("div", { className: "flex gap-3" },
+            React.createElement(Button, { type: "button", variant: "outline", onClick: appendField },
+                t('form.append'),
+                React.createElement(PlusCircleIcon, { className: "ml-2" })),
+            React.createElement(Button, { type: "button", variant: "outline", onClick: removeField },
+                t('form.remove'),
+                React.createElement(MinusCircleIcon, { className: "ml-2" })))));
+});

package/dist/components/Form/ScalarField.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { BooleanFormField, DateFormField, NumberFormField, ScalarFieldValue, SetFormField, StringFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { BaseFieldComponentProps } from './types.js';
+export type ScalarFieldProps = BaseFieldComponentProps<ScalarFieldValue> & {
+    field: BooleanFormField | DateFormField | NumberFormField | SetFormField | StringFormField;
+};
+export declare const ScalarField: ({ field, ...props }: ScalarFieldProps) => React.JSX.Element;
+//# sourceMappingURL=ScalarField.d.ts.map

package/dist/components/Form/ScalarField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScalarField.d.ts","sourceRoot":"","sources":["../../../src/components/Form/ScalarField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,eAAe,EAChB,MAAM,2CAA2C,CAAC;AAQnD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,gBAAgB,CAAC,GAAG;IACzE,KAAK,EAAE,gBAAgB,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,GAAG,eAAe,CAAC;CAC5F,CAAC;AAEF,eAAO,MAAM,WAAW,wBAAyB,gBAAgB,sBAehE,CAAC"}

package/dist/components/Form/ScalarField.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BooleanField } from './BooleanField/BooleanField.js';
+import { DateField } from './DateField/DateField.js';
+import { NumberField } from './NumberField/NumberField.js';
+import { SetField } from './SetField/SetField.js';
+import { StringField } from './StringField/StringField.js';
+export const ScalarField = ({ field, ...props }) => {
+    switch (field.kind) {
+        case 'string':
+            return React.createElement(StringField, { ...field, ...props });
+        case 'number':
+            return React.createElement(NumberField, { ...field, ...props });
+        case 'date':
+            return React.createElement(DateField, { ...field, ...props });
+        case 'boolean':
+            return React.createElement(BooleanField, { ...field, ...props });
+        case 'set':
+            return React.createElement(SetField, { ...field, ...props });
+        default:
+            throw new Error(`Unexpected value for kind: ${Reflect.get(field, 'kind')}`);
+    }
+};

package/dist/components/Form/SetField/SetField.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SetFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+import type { BaseFieldComponentProps } from '../types.js';
+export type SetFieldProps<T extends string = string> = Simplify<BaseFieldComponentProps<Set<T>> & SetFormField<Set<T>>>;
+export declare const SetField: <T extends string = string>(props: SetFieldProps<T>) => React.JSX.Element;
+//# sourceMappingURL=SetField.d.ts.map

package/dist/components/Form/SetField/SetField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SetField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/SetField/SetField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AAE9E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAExH,eAAO,MAAM,QAAQ,qCAAsC,cAAc,CAAC,CAAC,sBAuB1E,CAAC"}