@strictly/react-form 0.0.1

package/.out/mantine/create_text_input.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createUnsafePartialObserverComponent } from 'util/partial';
+export function createTextInput(valuePath, TextInput, ErrorRenderer) {
+    const onChange = (e) => {
+        this.onFieldValueChange?.(valuePath, e.target.value);
+    };
+    const onFocus = () => {
+        this.onFieldFocus?.(valuePath);
+    };
+    const onBlur = () => {
+        this.onFieldBlur?.(valuePath);
+    };
+    const onKeyUp = (e) => {
+        if (e.key === 'Enter') {
+            if (this.onFieldSubmit?.(valuePath)) {
+                e.preventDefault();
+            }
+        }
+    };
+    const propSource = () => {
+        const { disabled, required, value, error,
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+         } = this.fields[valuePath];
+        return {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            name: valuePath,
+            value,
+            disabled,
+            required,
+            error: error && _jsx(ErrorRenderer, { error: error }),
+            onChange,
+            onFocus,
+            onBlur,
+            onKeyUp,
+        };
+    };
+    return createUnsafePartialObserverComponent(TextInput, propSource);
+}

package/.out/mantine/create_value_input.d.ts

@@ -0,0 +1,17 @@
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
+import { type ErrorTypeOfField } from 'types/error_type_of_field';
+import { type Fields } from 'types/field';
+import { type ValueTypeOfField } from 'types/value_type_of_field';
+import { type ErrorRenderer } from './hooks';
+import { type MantineFieldComponent, type MantineForm } from './types';
+export type SuppliedValueInputProps<V, T extends Element = Element> = Partial<{
+    name: string;
+    value: V;
+    disabled: boolean;
+    required: boolean;
+    onChange: (value: V) => void;
+    onFocus: (e: React.FocusEvent<T>) => void;
+    onBlur: (e: React.FocusEvent<T>) => void;
+    onKeyUp: (e: React.KeyboardEvent<T>) => void;
+}>;
+export declare function createValueInput<F extends Fields, K extends keyof AllFieldsOfFields<F>, Props extends SuppliedValueInputProps<ValueTypeOfField<F[K]>>>(this: MantineForm<F>, valuePath: K, ValueInput: React.ComponentType<Props>, ErrorRenderer: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, Props>;

package/.out/mantine/create_value_input.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createUnsafePartialObserverComponent } from 'util/partial';
+export function createValueInput(valuePath, ValueInput, ErrorRenderer) {
+    const onChange = (value) => {
+        this.onFieldValueChange?.(valuePath, value);
+    };
+    const onFocus = () => {
+        this.onFieldFocus?.(valuePath);
+    };
+    const onBlur = () => {
+        this.onFieldBlur?.(valuePath);
+    };
+    const onKeyUp = (e) => {
+        if (e.key === 'Enter') {
+            if (this.onFieldSubmit?.(valuePath)) {
+                e.preventDefault();
+            }
+        }
+    };
+    const propSource = () => {
+        const { disabled, required, value, error,
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+         } = this.fields[valuePath];
+        return {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            name: valuePath,
+            value,
+            disabled,
+            required,
+            error: error && _jsx(ErrorRenderer, { error: error }),
+            onChange,
+            onFocus,
+            onBlur,
+            onKeyUp,
+        };
+    };
+    return createUnsafePartialObserverComponent(ValueInput, propSource);
+}

package/.out/mantine/hooks.d.ts

@@ -0,0 +1,56 @@
+import { type CheckboxProps, type PillProps, type RadioGroupProps, type RadioProps, type SelectProps, type TextInputProps } from '@mantine/core';
+import { type ElementOfArray } from '@strictly/base';
+import { type FormProps } from 'core/props';
+import { type ComponentProps, type ComponentType } from 'react';
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
+import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields';
+import { type ErrorTypeOfField } from 'types/error_type_of_field';
+import { type Fields } from 'types/field';
+import { type ListFieldsOfFields } from 'types/list_fields_of_fields';
+import { type StringFieldsOfFields } from 'types/string_fields_of_fields';
+import { type ValueTypeOfField } from 'types/value_type_of_field';
+import { type SuppliedCheckboxProps } from './create_checkbox';
+import { DefaultList, type SuppliedListProps } from './create_list';
+import { type SuppliedPillProps } from './create_pill';
+import { type SuppliedRadioProps } from './create_radio';
+import { type SuppliedRadioGroupProps } from './create_radio_group';
+import { type SuppliedTextInputProps } from './create_text_input';
+import { type SuppliedValueInputProps } from './create_value_input';
+import { type MantineFieldComponent, type MantineForm } from './types';
+declare function SimpleSelect(props: SelectProps & {
+    onChange?: (value: string | null) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export type ErrorRendererProps<E> = {
+    error: E;
+};
+export type ErrorRenderer<E = any> = React.ComponentType<ErrorRendererProps<E>>;
+export declare function useMantineForm<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FormProps<F>): MantineFormImpl<F>;
+declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
+    private readonly textInputCache;
+    private readonly valueInputCache;
+    private readonly checkboxCache;
+    private readonly radioGroupCache;
+    private readonly radioCache;
+    private readonly pillCache;
+    private readonly listCache;
+    accessor fields: F;
+    onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
+    onFieldFocus: ((this: void, key: keyof F) => void) | undefined;
+    onFieldBlur: ((this: void, key: keyof F) => void) | undefined;
+    onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined;
+    constructor(fields: F);
+    textInput<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps>;
+    textInput<K extends keyof StringFieldsOfFields<F>, P extends SuppliedTextInputProps<any>>(valuePath: K, TextInput?: ComponentType<P>, ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedTextInputProps, P>;
+    valueInput<K extends keyof AllFieldsOfFields<F>, P extends SuppliedValueInputProps<ValueTypeOfField<F[K]>, any>>(valuePath: K, ValueInput: ComponentType<P>, ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, P>;
+    select<K extends keyof StringFieldsOfFields<F>>(valuePath: K, ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedTextInputProps, ComponentProps<typeof SimpleSelect>>;
+    checkbox<K extends keyof BooleanFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps>;
+    checkbox<K extends keyof BooleanFieldsOfFields<F>, P extends SuppliedCheckboxProps>(valuePath: K, Checkbox: ComponentType<P>, ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedCheckboxProps, P>;
+    radioGroup<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedRadioGroupProps, RadioGroupProps>;
+    radioGroup<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioGroupProps>(valuePath: K, RadioGroup: ComponentType<P>, ErrorRenderer?: ErrorRenderer<ErrorTypeOfField<F[K]>>): MantineFieldComponent<SuppliedRadioGroupProps, P>;
+    radio<K extends keyof StringFieldsOfFields<F>>(valuePath: K, value: ValueTypeOfField<F[K]>): MantineFieldComponent<SuppliedRadioProps, RadioProps>;
+    radio<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioProps>(valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<P>): MantineFieldComponent<SuppliedRadioProps, P>;
+    pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps>;
+    pill<K extends keyof AllFieldsOfFields<F>, P extends SuppliedPillProps>(valuePath: K, Pill: ComponentType<P>): MantineFieldComponent<SuppliedPillProps, P>;
+    list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<ElementOfArray<F[K]>>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]>>>>;
+}
+export {};

package/.out/mantine/hooks.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox as CheckboxImpl, Pill as PillImpl, Radio as RadioImpl, Select, TextInput as TextInputImpl, } from '@mantine/core';
+import { Cache, } from '@strictly/base';
+import { observable, runInAction, } from 'mobx';
+import { useEffect, useMemo, } from 'react';
+import { createCheckbox, } from './create_checkbox';
+import { createList, DefaultList, } from './create_list';
+import { createPill, } from './create_pill';
+import { createRadio, } from './create_radio';
+import { createRadioGroup, } from './create_radio_group';
+import { createTextInput, } from './create_text_input';
+import { createValueInput, } from './create_value_input';
+function SimpleSelect(props) {
+    return _jsx(Select, { ...props });
+}
+function DefaultErrorRenderer({ error,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+ }) {
+    return error;
+}
+export function useMantineForm({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
+    const form = useMemo(function () {
+        return new MantineFormImpl(fields);
+    }, 
+    // handled separately below
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    useEffect(function () {
+        runInAction(function () {
+            form.fields = fields;
+        });
+    }, [
+        form,
+        fields,
+    ]);
+    useEffect(function () {
+        form.onFieldValueChange = onFieldValueChange;
+    }, [
+        form,
+        onFieldValueChange,
+    ]);
+    useEffect(function () {
+        form.onFieldBlur = onFieldBlur;
+    }, [
+        form,
+        onFieldBlur,
+    ]);
+    useEffect(function () {
+        form.onFieldFocus = onFieldFocus;
+    }, [
+        form,
+        onFieldFocus,
+    ]);
+    useEffect(function () {
+        form.onFieldSubmit = onFieldSubmit;
+    }, [
+        form,
+        onFieldSubmit,
+    ]);
+    return form;
+}
+class MantineFormImpl {
+    textInputCache = new Cache(createTextInput.bind(this));
+    valueInputCache = new Cache(createValueInput.bind(this));
+    checkboxCache = new Cache(createCheckbox.bind(this));
+    radioGroupCache = new Cache(createRadioGroup.bind(this));
+    radioCache = new Cache(createRadio.bind(this));
+    pillCache = new Cache(createPill.bind(this));
+    listCache = new Cache(createList.bind(this));
+    @observable.ref
+    accessor fields;
+    onFieldValueChange;
+    onFieldFocus;
+    onFieldBlur;
+    onFieldSubmit;
+    constructor(fields) {
+        this.fields = fields;
+    }
+    textInput(valuePath, 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    TextInput = TextInputImpl, ErrorRenderer = DefaultErrorRenderer) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.textInputCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        TextInput, ErrorRenderer);
+    }
+    valueInput(valuePath, ValueInput, ErrorRenderer = DefaultErrorRenderer) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.valueInputCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        ValueInput, ErrorRenderer);
+    }
+    select(valuePath, ErrorRenderer = DefaultErrorRenderer) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.valueInputCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        SimpleSelect, ErrorRenderer);
+    }
+    checkbox(valuePath, 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    Checkbox = CheckboxImpl, ErrorRenderer = DefaultErrorRenderer) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.checkboxCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        Checkbox, ErrorRenderer);
+    }
+    radioGroup(valuePath, 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    RadioGroup = RadioImpl.Group, ErrorRenderer = DefaultErrorRenderer) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.radioGroupCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        RadioGroup, ErrorRenderer);
+    }
+    radio(valuePath, value, 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    Radio = RadioImpl) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.radioCache.retrieveOrCreate(valuePath, value, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        Radio);
+    }
+    pill(valuePath, 
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    Pill = PillImpl) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.pillCache.retrieveOrCreate(valuePath, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        Pill);
+    }
+    list(valuePath) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return this.listCache.retrieveOrCreate(valuePath, DefaultList);
+    }
+}

package/.out/mantine/specs/checkbox_constants.d.ts

@@ -0,0 +1 @@
+export declare const CHECKBOX_LABEL = "Checkbox";

package/.out/mantine/specs/checkbox_constants.js

@@ -0,0 +1 @@
+export const CHECKBOX_LABEL = 'Checkbox';

package/.out/mantine/specs/checkbox_hooks.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FormProps } from 'core/props';
+import { type Field } from 'types/field';
+declare function Component(props: FormProps<{
+    $: Field<boolean, string>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Off: Story;
+export declare const On: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;

package/.out/mantine/specs/checkbox_hooks.stories.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+import { CHECKBOX_LABEL } from './checkbox_constants';
+function Component(props) {
+    const inputProps = useMantineForm(props);
+    const CheckboxComponent = inputProps.checkbox('$');
+    return _jsx(CheckboxComponent, { label: CHECKBOX_LABEL });
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const Off = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: false,
+            },
+        },
+    },
+};
+export const On = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: true,
+            },
+        },
+    },
+};
+export const Required = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: false,
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        fields: {
+            $: {
+                disabled: true,
+                required: false,
+                value: false,
+            },
+        },
+    },
+};

package/.out/mantine/specs/checkbox_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/mantine/specs/checkbox_hooks.tests.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { fireEvent, render, } from '@testing-library/react';
+import { vi, } from 'vitest';
+import { CHECKBOX_LABEL } from './checkbox_constants';
+import * as stories from './checkbox_hooks.stories';
+const composedStories = composeStories(stories);
+const { Off, On, } = composedStories;
+describe('mantine checkbox hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+    describe.each([
+        [
+            'Off',
+            Off,
+            true,
+        ],
+        [
+            'On',
+            On,
+            false,
+        ],
+    ])('value change %s', function (_name, Component, expectedValue) {
+        let onFieldValueChange;
+        let wrapper;
+        let checkbox;
+        beforeEach(async function () {
+            onFieldValueChange = vi.fn();
+            wrapper = render(_jsx(Component, { onFieldValueChange: onFieldValueChange }));
+            checkbox = await wrapper.findByLabelText(CHECKBOX_LABEL);
+        });
+        it('requests toggle', function () {
+            fireEvent.click(checkbox);
+            expect(onFieldValueChange).toHaveBeenCalledOnce();
+            expect(onFieldValueChange).toHaveBeenCalledWith('$', expectedValue);
+        });
+    });
+    describe('other events', function () {
+        let onFieldFocus;
+        let onFieldBlur;
+        let wrapper;
+        let checkbox;
+        beforeEach(async function () {
+            onFieldFocus = vi.fn();
+            onFieldBlur = vi.fn();
+            wrapper = render((_jsx(Off, { onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus })));
+            checkbox = await wrapper.findByLabelText(CHECKBOX_LABEL);
+        });
+        describe('focus', function () {
+            beforeEach(function () {
+                fireEvent.focus(checkbox);
+            });
+            it('fires focus event', function () {
+                expect(onFieldFocus).toHaveBeenCalledOnce();
+                expect(onFieldFocus).toHaveBeenCalledWith('$');
+            });
+            describe('blur', function () {
+                beforeEach(function () {
+                    fireEvent.blur(checkbox);
+                });
+                it('fires blur event', function () {
+                    expect(onFieldBlur).toHaveBeenCalledOnce();
+                    expect(onFieldBlur).toHaveBeenCalledWith('$');
+                });
+                it('does not refire focus event', function () {
+                    expect(onFieldFocus).toHaveBeenCalledOnce();
+                });
+            });
+        });
+    });
+});

package/.out/mantine/specs/list_hooks.stories.d.ts

@@ -0,0 +1,11 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FormProps } from 'core/props';
+import { type Field } from 'types/field';
+declare function Component(props: FormProps<{
+    $: Field<string[], string>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Empty: Story;
+export declare const Populated: Story;

package/.out/mantine/specs/list_hooks.stories.js

@@ -0,0 +1,48 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Code, Paper, Stack, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+function Component(props) {
+    const form = useMantineForm(props);
+    const List = form.list('$');
+    return (_jsx(Paper, { p: 'sm', withBorder: true, children: _jsx(Stack, { children: _jsx(List, { children: function (valuePath) {
+                    return (_jsxs(Code, { children: ["ValuePath: ", valuePath] }, valuePath));
+                } }) }) }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: [],
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: [
+                    '$.4',
+                    '$.6',
+                    '$.19',
+                    '$.0',
+                ],
+            },
+        },
+    },
+};

package/.out/mantine/specs/list_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/mantine/specs/list_hooks.tests.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { render, } from '@testing-library/react';
+import * as stories from './list_hooks.stories';
+const composedStories = composeStories(stories);
+describe('mantine list hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

package/.out/mantine/specs/radio_group_constants.d.ts

@@ -0,0 +1,4 @@
+export declare const RADIO_GROUP_LABEL = "Radio Group";
+export declare const RADIO_VALUES: readonly ["1", "2", "3"];
+export type RadioValue = typeof RADIO_VALUES[number];
+export declare const RADIO_LABELS: Record<RadioValue, string>;

package/.out/mantine/specs/radio_group_constants.js

@@ -0,0 +1,11 @@
+export const RADIO_GROUP_LABEL = 'Radio Group';
+export const RADIO_VALUES = [
+    '1',
+    '2',
+    '3',
+];
+export const RADIO_LABELS = {
+    1: 'One',
+    2: 'Two',
+    3: 'Three',
+};

package/.out/mantine/specs/radio_group_hooks.stories.d.ts

@@ -0,0 +1,14 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FormProps } from 'core/props';
+import { type Field } from 'types/field';
+import { type RadioValue } from './radio_group_constants';
+declare function Component(props: FormProps<{
+    $: Field<RadioValue | null, string>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Empty: Story;
+export declare const Populated: Story;
+export declare const Required: Story;
+export declare const Disabled: Story;

package/.out/mantine/specs/radio_group_hooks.stories.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineForm } from 'mantine/hooks';
+import { RADIO_GROUP_LABEL, RADIO_LABELS, RADIO_VALUES, } from './radio_group_constants';
+function Component(props) {
+    const form = useMantineForm(props);
+    const RadioGroupComponent = form.radioGroup('$');
+    return (_jsx(RadioGroupComponent, { label: RADIO_GROUP_LABEL, children: _jsx(Stack, { children: RADIO_VALUES.map(function (value) {
+                const label = RADIO_LABELS[value];
+                const RadioComponent = form.radio('$', value);
+                return (_jsx(RadioComponent, { label: label }, label));
+            }) }) }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: null,
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: false,
+                value: '3',
+            },
+        },
+    },
+};
+export const Required = {
+    args: {
+        fields: {
+            $: {
+                disabled: false,
+                required: true,
+                value: '1',
+            },
+        },
+    },
+};
+export const Disabled = {
+    args: {
+        fields: {
+            $: {
+                disabled: true,
+                required: false,
+                value: '2',
+            },
+        },
+    },
+};

package/.out/mantine/specs/radio_group_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};