@a-type/ui 5.0.22 → 6.0.1

package/dist/components/emojiPicker/EmojiPicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { EmojiPicker } from './EmojiPicker.js';
+declare const meta: {
+    title: string;
+    component: (({ onValueChange, onClear, ...props }: import("./EmojiPicker.js").EmojiPickerProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: import("react").FunctionComponent<Omit<import("frimousse").EmojiPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Search: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+        Viewport: ({ className, ...props }: import("frimousse").EmojiPickerViewportProps) => import("react/jsx-runtime").JSX.Element;
+        List: ({ className, components, }: import("frimousse").EmojiPickerListProps) => import("react/jsx-runtime").JSX.Element;
+        Loading: import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+        Empty: import("react").FunctionComponent<import("frimousse").EmojiPickerEmptyProps>;
+        CategoryHeader: (props: import("frimousse").EmojiPickerListCategoryHeaderProps) => import("react/jsx-runtime").JSX.Element;
+        Row: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        Emoji: import("react").FunctionComponent<Omit<import("frimousse").EmojiPickerListEmojiProps, "color">>;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof EmojiPicker>;
+export declare const Default: Story;

package/dist/components/emojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmojiPicker } from './EmojiPicker.js';
+const meta = {
+    title: 'Components/EmojiPicker',
+    component: EmojiPicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(EmojiPicker, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

package/dist/components/emojiPicker/EmojiPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.js","sourceRoot":"","sources":["../../../src/components/emojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;IAClC,CAAC;CACD,CAAC"}

package/dist/components/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,27 @@
+'use client';
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error };
+    }
+    render() {
+        if (this.state.error) {
+            if (typeof this.props.fallback === 'function') {
+                return this.props.fallback({
+                    error: this.state.error,
+                    clearError: () => this.setState({ error: null }),
+                });
+            }
+            return this.props.fallback || null;
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/errorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/errorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAE3D,MAAM,OAAO,aAAc,SAAQ,SAQlC;IARD;;QASC,UAAK,GAAG;YACP,KAAK,EAAE,IAAI;SACX,CAAC;IAmBH,CAAC;IAjBA,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACL,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;oBACvB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;iBAChD,CAAC,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;QACpC,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD"}

package/dist/components/errorBoundary/index.js

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

package/dist/components/errorBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/errorBoundary/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/forms/CheckboxField.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Checkbox } from '../checkbox/index.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+export function CheckboxField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    const [props, _, tools] = useField({ name, required, type: 'checkbox' });
+    const id = useIdOrGenerated(providedId);
+    return (_jsxs(Box, { gap: "md", className: className, children: [_jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+                    tools.setValue(!!v);
+                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+}
+//# sourceMappingURL=CheckboxField.js.map

package/dist/components/forms/CheckboxField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,aAAa,CAAC,EAOT;QAPS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEM,EADjB,IAAI,cANsB,gDAO7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/components/forms/EmojiField.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { useState } from 'react';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { EmojiPicker } from '../emojiPicker/EmojiPicker.js';
+import { Icon } from '../icon/Icon.js';
+import { Popover } from '../popover/Popover.js';
+import cls from './EmojiField.module.css';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+export function EmojiField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    const [props, _, tools] = useField({ name });
+    const id = useIdOrGenerated(providedId);
+    const [open, setOpen] = useState(false);
+    return (_jsxs(Box, { gap: "md", className: className, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "wrapper" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
+                                tools.setValue(v);
+                                setOpen(false);
+                            }, onClear: required
+                                ? undefined
+                                : () => {
+                                    tools.setValue('');
+                                    setOpen(false);
+                                }, id: id }) })] }), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+}
+//# sourceMappingURL=EmojiField.js.map

package/dist/components/forms/EmojiField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AASvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBAAC,EAAE,EAAE,EAAE,gBAAa,cAAc,EAAC,IAAI,EAAC,SAAS,IAAK,IAAI,cAChE,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/components/forms/EmojiField.module.css

@@ -0,0 +1,8 @@
+.triggerIcon {
+	height: 20px;
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+}

package/dist/components/forms/FieldLabel.js

@@ -0,0 +1,5 @@
+import { withClassName } from '../../hooks.js';
+import cls from './FieldLabel.module.css';
+export const FieldLabel = withClassName('label', cls.fieldLabel);
+export const HorizontalFieldLabel = withClassName('label', cls.horizontalFieldLabel);
+//# sourceMappingURL=FieldLabel.js.map

package/dist/components/forms/FieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAChD,OAAO,EACP,GAAG,CAAC,oBAAoB,CACxB,CAAC"}

package/dist/components/forms/FieldLabel.module.css

@@ -0,0 +1,20 @@
+.fieldLabel {
+	display: inline-flex;
+	flex-direction: column;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	margin-inline-start: var(--m-spacing-md);
+	gap: var(--m-spacing-xs);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: bold;
+}
+
+.horizontalFieldLabel {
+	display: inline-flex;
+	flex-direction: row;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	gap: var(--m-spacing-sm);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	margin-block-start: var(--m-spacing-sm);
+}

package/dist/components/forms/Form.js

@@ -0,0 +1,5 @@
+import { Form as FormikForm } from 'formik';
+import { withClassName } from '../../hooks/withClassName.js';
+import cls from './Form.module.css';
+export const Form = withClassName(FormikForm, cls.form);
+//# sourceMappingURL=Form.js.map

package/dist/components/forms/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/forms/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}

package/dist/components/forms/Form.module.css

@@ -0,0 +1,6 @@
+.form {
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	gap: var(--m-spacing-md);
+}

package/dist/components/forms/FormikForm.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Formik } from 'formik';
+import { useCallback } from 'react';
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { Form } from './Form.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+import { TextAreaField, TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
+export { FieldArray } from 'formik';
+export function FormikFormRoot(_a) {
+    var { className, children, onSubmit } = _a, props = __rest(_a, ["className", "children", "onSubmit"]);
+    const wrappedOnSubmit = useCallback(async (values, bag) => {
+        try {
+            bag.setSubmitting(true);
+            return await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values, bag));
+        }
+        finally {
+            bag.setSubmitting(false);
+        }
+    }, [onSubmit]);
+    if (typeof children === 'function') {
+        return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: (formik) => _jsx(Form, { className: className, children: children(formik) }) })));
+    }
+    return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: _jsx(Form, { className: className, children: children }) })));
+}
+export const FormikForm = Object.assign(FormikFormRoot, {
+    TextField,
+    TextAreaField,
+    NumberStepperField,
+    SubmitButton,
+    CheckboxField,
+    SwitchField,
+    ToggleGroupField,
+    EmojiField,
+});
+//# sourceMappingURL=FormikForm.js.map

package/dist/components/forms/FormikForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAA6C,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,UAAU,cAAc,CAA8B,EAKlC;QALkC,EAC3D,SAAS,EACT,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cAJmD,qCAK3D,CADQ;IAER,MAAM,eAAe,GAAG,WAAW,CAClC,KAAK,EAAE,MAAc,EAAE,GAA0B,EAAE,EAAE;QACpD,IAAI,CAAC;YACJ,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,EAAE,GAAG,CAAC,CAAA,CAAC;QACtC,CAAC;gBAAS,CAAC;YACV,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACF,CAAC,EACD,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cAClD,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,CAAC,MAAM,CAAC,GAAQ,IAC1D,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,IACrC,CACT,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,WAAW;IACX,gBAAgB;IAChB,UAAU;CACV,CAAC,CAAC"}

package/dist/components/forms/FormikForm.stories.d.ts

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { FormikForm } from './FormikForm.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+declare const meta: {
+    title: string;
+    component: typeof import("./FormikForm.js").FormikFormRoot & {
+        TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+        TextAreaField: typeof import("./TextField.js").TextAreaField;
+        NumberStepperField: typeof NumberStepperField;
+        SubmitButton: typeof SubmitButton;
+        CheckboxField: typeof CheckboxField;
+        SwitchField: typeof SwitchField;
+        ToggleGroupField: (({ name, label, required, className, type, multiple, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+            Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
+        };
+        EmojiField: typeof EmojiField;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof FormikForm>;
+export declare const Default: Story;

package/dist/components/forms/FormikForm.stories.js

@@ -0,0 +1,49 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { FormikForm } from './FormikForm.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+import { TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
+const meta = {
+    title: 'Components/Form',
+    component: FormikForm,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        onSubmit: (values) => {
+            alert(JSON.stringify(values, null, 2));
+        },
+    },
+    render(_a) {
+        var { initialValues: _ } = _a, args = __rest(_a, ["initialValues"]);
+        return (_jsxs(FormikForm, Object.assign({ initialValues: {
+                email: '',
+                password: '',
+                age: 18,
+                tos: false,
+                newsletter: false,
+                plan: 'basic',
+                emoji: '',
+            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email", placeholder: "you@example.com" }), _jsx(TextField, { name: "password", type: "password", label: "Password" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100 }), _jsx(CheckboxField, { name: "tos", label: "I agree" }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", children: "Enterprise" })] }), _jsx(EmojiField, { name: "emoji", label: "Favorite Emoji" }), _jsx(SubmitButton, { children: "Sign up" })] })));
+    },
+};
+//# sourceMappingURL=FormikForm.stories.js.map

package/dist/components/forms/FormikForm.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;KACD;IACD,MAAM,CAAC,EAA6B;YAA7B,EAAE,aAAa,EAAE,CAAC,OAAW,EAAN,IAAI,cAA3B,iBAA6B,CAAF;QACjC,OAAO,CACN,MAAC,UAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,KAAK;gBACjB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE;aACT,IACG,IAAI,eAER,KAAC,SAAS,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,iBAAiB,GAC5B,EACF,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAG,EAC9D,KAAC,kBAAkB,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAChE,KAAC,aAAa,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,GAAG,EAC5C,KAAC,WAAW,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,yBAAyB,GAAG,EACjE,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,mBAER,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,2BAEjB,IACN,EACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,GAAG,EAClD,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/forms/NumberStepperField.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { withClassName } from '../../hooks.js';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { NumberStepper, } from '../numberStepper/NumberStepper.js';
+import { FieldLabel } from './FieldLabel.js';
+import cls from './NumberStepperField.module.css';
+export function NumberStepperField(_a) {
+    var { name, label, className, id: providedId, onChange } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange"]);
+    const [_, field, tools] = useField({ name });
+    const id = useIdOrGenerated(providedId);
+    return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
+                    tools.setValue(v);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(v);
+                }, id: id }, rest))] }));
+}
+const FieldRoot = withClassName('div', cls.root);
+//# sourceMappingURL=NumberStepperField.js.map

package/dist/components/forms/NumberStepperField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,GAAG,MAAM,iCAAiC,CAAC;AAWlD,MAAM,UAAU,kBAAkB,CAAC,EAOT;QAPS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,EAAE,EAAE,UAAU,EACd,QAAQ,OAEiB,EADtB,IAAI,cAN2B,gDAOlC,CADO;IAEP,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,aAC7B,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;gBACf,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}

package/dist/components/forms/NumberStepperField.module.css

@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}

package/dist/components/forms/SubmitButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormikContext } from 'formik';
+import { Button } from '../button/Button.js';
+export function SubmitButton(props) {
+    const { isSubmitting, isValid } = useFormikContext();
+    return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid, emphasis: "primary" }, props, { type: "submit" })));
+}
+//# sourceMappingURL=SubmitButton.js.map

package/dist/components/forms/SubmitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,QAAQ,EAAC,SAAS,IACd,KAAK,IACT,IAAI,EAAC,QAAQ,IACZ,CACF,CAAC;AACH,CAAC"}

package/dist/components/forms/SwitchField.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import { Box } from '../box/Box.js';
+import { Switch } from '../switch/Switch.js';
+import { HorizontalFieldLabel } from './FieldLabel.js';
+export function SwitchField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    const [props, _, tools] = useField({ name, required, type: 'checkbox' });
+    const id = useIdOrGenerated(providedId);
+    return (_jsxs(Box, { gap: "md", className: className, children: [_jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+                    tools.setValue(!!v);
+                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+}
+//# sourceMappingURL=SwitchField.js.map

package/dist/components/forms/SwitchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,WAAW,CAAC,EAOT;QAPS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEI,EADf,IAAI,cANoB,gDAO3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}

package/dist/components/forms/TextField.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useField, useFormikContext } from 'formik';
+import { useCallback, useEffect, useRef, } from 'react';
+import { withClassName } from '../../hooks.js';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { Input } from '../input/Input.js';
+import { TextArea } from '../textArea/TextArea.js';
+import { FieldLabel } from './FieldLabel.js';
+import cls from './TextField.module.css';
+const emptyRef = (() => { });
+export const TextField = function TextField(_a) {
+    var { ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName"]);
+    const [props] = useField({
+        name,
+        onChange,
+        onFocus,
+        onBlur,
+    });
+    const innerInputRef = useRef(null);
+    const id = useIdOrGenerated(providedId);
+    useEffect(() => {
+        if (autoFocusDelay) {
+            setTimeout(() => {
+                if (innerInputRef.current)
+                    innerInputRef.current.focus();
+            }, autoFocusDelay);
+        }
+    }, [autoFocusDelay]);
+    return (_jsxs(FieldRoot, { className: className, ref: ref, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) }))] }));
+};
+export function TextAreaField(_a) {
+    var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName"]);
+    const [props] = useField(name);
+    const { submitForm } = useFormikContext();
+    const onKeyDownInner = useCallback((e) => {
+        if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            submitForm();
+        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+    }, [submitOnEnter, onKeyDown, submitForm]);
+    const id = useIdOrGenerated(providedId);
+    return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx('layer-composed:w-full', textAreaClassName), id: id, onKeyDown: onKeyDownInner }))] }));
+}
+export const FieldRoot = withClassName('div', cls.root);
+//# sourceMappingURL=TextField.js.map

package/dist/components/forms/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/TextField.module.css

@@ -0,0 +1,11 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	align-self: stretch;
+	gap: var(--m-spacing-xs);
+}
+
+.input {
+	width: 100%;
+}

package/dist/components/forms/ToggleGroupField.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useField } from 'formik';
+import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
+import { FieldLabel } from './FieldLabel.js';
+import { FieldRoot } from './TextField.js';
+function ToggleGroupFieldDefault(_a) {
+    var { name, label, required, className, type = 'single', multiple, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "id"]);
+    const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
+    return (_jsxs(FieldRoot, { children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
+                    if (multiple || type === 'multiple') {
+                        tools.setValue(v);
+                    }
+                    else {
+                        tools.setValue(v[0]);
+                    }
+                }, multiple: multiple || type === 'multiple' }, props, { id: id, className: className }))] }));
+}
+export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
+    Item: ToggleGroup.Item,
+});
+//# sourceMappingURL=ToggleGroupField.js.map

package/dist/components/forms/ToggleGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C,SAAS,uBAAuB,CAAC,EASD;QATC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,EAAE,OAE6B,EAD5B,KAAK,cARwB,oEAShC,CADQ;IAER,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,SAAS,eACR,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;oBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;wBACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACnB,CAAC;yBAAM,CAAC;wBACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACtB,CAAC;gBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IACnB,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}

package/dist/components/forms/hooks.js

@@ -0,0 +1,11 @@
+import { useFormikContext } from 'formik';
+export { useField } from 'formik';
+export function useSubmit() {
+    const { submitForm, isSubmitting } = useFormikContext();
+    return [submitForm, isSubmitting];
+}
+export function useValues() {
+    const { values } = useFormikContext();
+    return values;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/components/forms/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../src/components/forms/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,MAAM,UAAU,SAAS;IACxB,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAExD,OAAO,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC;AAC5C,CAAC;AAED,MAAM,UAAU,SAAS;IACxB,MAAM,EAAE,MAAM,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEtC,OAAO,MAAM,CAAC;AACf,CAAC"}

package/dist/components/forms/index.js

@@ -0,0 +1,9 @@
+export * from './CheckboxField.js';
+export * from './FieldLabel.js';
+export * from './Form.js';
+export * from './FormikForm.js';
+export * from './hooks.js';
+export * from './NumberStepperField.js';
+export * from './SubmitButton.js';
+export * from './TextField.js';
+//# sourceMappingURL=index.js.map

package/dist/components/forms/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}