@a-type/ui 6.0.60 → 6.0.61

package/dist/components/forms/CheckboxField.d.ts

@@ -4,7 +4,8 @@ export interface CheckboxFieldProps {
     label?: string;
     required?: boolean;
     className?: string;
+    style?: React.CSSProperties;
     id?: string;
     description?: ReactNode;
 }
-export declare function CheckboxField({ name, label, className, required, id: providedId, description, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxField({ name, label, className, style, required, id: providedId, description, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/CheckboxField.js

@@ -15,10 +15,10 @@ import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { Checkbox } from '../checkbox/index.js';
 import { Field } from './Field.js';
 export function CheckboxField(_a) {
-    var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
+    var { name, label, className, style, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "style", "required", "id", "description"]);
     const [props, _, tools] = useField({ name, required, type: 'checkbox' });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+    return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsx(Field.Control, { render: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
                         tools.setValue(!!v);
                     } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,aAAa,CAAC,EAQT;QARS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAES,EADjB,IAAI,cAPsB,+DAQ7B,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,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC,MAAM,UAAU,aAAa,CAAC,EAST;QATS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAES,EADjB,IAAI,cARsB,wEAS7B,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,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/EmojiField.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from '../button/Button.js';
-export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
+export type EmojiFieldProps = Omit<ButtonProps, 'className' | 'style'> & {
     name: string;
     label?: string;
     required?: string;
     className?: string;
+    style?: React.CSSProperties;
     description?: ReactNode;
 };
-export declare function EmojiField({ name, label, className, required, id: providedId, description, ...rest }: EmojiFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmojiField({ name, label, className, required, id: providedId, description, style, ...rest }: EmojiFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/EmojiField.js

@@ -20,11 +20,11 @@ import { Popover } from '../popover/Popover.js';
 import cls from './EmojiField.module.css';
 import { Field } from './Field.js';
 export function EmojiField(_a) {
-    var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
+    var { name, label, className, required, id: providedId, description, style } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description", "style"]);
     const [props, _, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
     const [open, setOpen] = useState(false);
-    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "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) => {
+    return (_jsxs(Field, { horizontal: true, className: className, style: style, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "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

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

@@ -1 +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,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,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,KAAK,EAAE,MAAM,YAAY,CAAC;AAUnC,MAAM,UAAU,UAAU,CAAC,EAQT;QARS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEM,EADd,IAAI,cAPmB,+DAQ1B,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,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,IACV,IAAI,cAER,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,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,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,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,UAAU,CAAC,EAST;QATS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,EACX,KAAK,OAEY,EADd,IAAI,cARmB,wEAS1B,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,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC3D,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,IACV,IAAI,cAER,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,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

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

@@ -7,17 +7,18 @@ import { SwitchField } from './SwitchField.js';
 import { TextAreaField } from './TextField.js';
 export interface FormikFormProps<T extends FormikValues = FormikValues> extends FormikConfig<T> {
     className?: string;
+    style?: React.CSSProperties;
 }
 export { FieldArray } from 'formik';
-export declare function FormikFormRoot<Values extends FormikValues>({ className, children, onSubmit, ...props }: FormikFormProps<Values>): import("react/jsx-runtime").JSX.Element;
+export declare function FormikFormRoot<Values extends FormikValues>({ className, style, children, onSubmit, ...props }: FormikFormProps<Values>): import("react/jsx-runtime").JSX.Element;
 export declare const FormikForm: typeof FormikFormRoot & {
-    TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+    TextField: ({ ref, name, label, className, style, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
     TextAreaField: typeof TextAreaField;
     NumberStepperField: typeof NumberStepperField;
     SubmitButton: typeof SubmitButton;
     CheckboxField: typeof CheckboxField;
     SwitchField: typeof SwitchField;
-    ToggleGroupField: (({ name, label, required, className, type, multiple, description, id: providedId, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+    ToggleGroupField: (({ name, label, required, className, style, type, multiple, description, id: providedId, ...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;

package/dist/components/forms/FormikForm.js

@@ -22,7 +22,7 @@ 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"]);
+    var { className, style, children, onSubmit } = _a, props = __rest(_a, ["className", "style", "children", "onSubmit"]);
     const wrappedOnSubmit = useCallback(async (values, bag) => {
         try {
             bag.setSubmitting(true);
@@ -33,9 +33,9 @@ export function FormikFormRoot(_a) {
         }
     }, [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: (formik) => (_jsx(Form, { className: className, style: style, children: children(formik) })) })));
     }
-    return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: _jsx(Form, { className: className, children: children }) })));
+    return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: _jsx(Form, { className: className, style: style, children: children }) })));
 }
 export const FormikForm = Object.assign(FormikFormRoot, {
     TextField,

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

@@ -1 +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"}
+{"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;AAQzD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,UAAU,cAAc,CAA8B,EAMlC;QANkC,EAC3D,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cALmD,8CAM3D,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,CACZ,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YACtC,QAAQ,CAAC,MAAM,CAAC,GACX,CACP,IACO,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,YACtC,QAAQ,GACH,IACC,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

@@ -8,13 +8,13 @@ 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, description, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+        TextField: ({ ref, name, label, className, style, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...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, description, id: providedId, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+        ToggleGroupField: (({ name, label, required, className, style, type, multiple, description, id: providedId, ...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;

package/dist/components/forms/NumberStepperField.d.ts

@@ -1,11 +1,12 @@
 import { ReactNode } from 'react';
 import { NumberStepperProps } from '../numberStepper/NumberStepper.js';
-export interface NumberStepperFieldProps extends Omit<NumberStepperProps, 'value' | 'onChange'> {
+export interface NumberStepperFieldProps extends Omit<NumberStepperProps, 'value' | 'onChange' | 'className' | 'style'> {
     name: string;
     label?: string;
     className?: string;
+    style?: React.CSSProperties;
     id?: string;
     onChange?: (value: number) => void;
     description?: ReactNode;
 }
-export declare function NumberStepperField({ name, label, className, id: providedId, onChange, description, ...rest }: NumberStepperFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberStepperField({ name, label, className, style, id: providedId, onChange, description, ...rest }: NumberStepperFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/NumberStepperField.js

@@ -15,10 +15,10 @@ import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { NumberStepper, } from '../numberStepper/NumberStepper.js';
 import { Field } from './Field.js';
 export function NumberStepperField(_a) {
-    var { name, label, className, id: providedId, onChange, description } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange", "description"]);
+    var { name, label, className, style, id: providedId, onChange, description } = _a, rest = __rest(_a, ["name", "label", "className", "style", "id", "onChange", "description"]);
     const [props, field, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { className: className, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: (composed) => (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ type: "hidden" }, props, composed)), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
+    return (_jsxs(Field, { className: className, style: style, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: (composed) => (_jsxs(_Fragment, { children: [_jsx("input", Object.assign({ type: "hidden" }, props, composed)), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
                                 tools.setValue(v);
                                 onChange === null || onChange === void 0 ? void 0 : onChange(v);
                             } }, rest))] })) }), description && _jsx(Field.Description, { children: description })] }));

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

@@ -1 +1 @@
-{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC,MAAM,UAAU,kBAAkB,CAAC,EAQT;QARS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,WAAW,OAEc,EADtB,IAAI,cAP2B,+DAQlC,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aACjC,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACrB,8BACC,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAM,QAAQ,EAAI,EAChD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;4BACf,CAAC,IACG,IAAI,EACP,IACA,CACH,GACA,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,MAAM,UAAU,kBAAkB,CAAC,EAST;QATS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,WAAW,OAEc,EADtB,IAAI,cAR2B,wEASlC,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IACjD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CACrB,8BACC,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAM,QAAQ,EAAI,EAChD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;4BACf,CAAC,IACG,IAAI,EACP,IACA,CACH,GACA,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/TextField.d.ts

@@ -11,7 +11,7 @@ export type TextFieldProps = {
     ref?: Ref<HTMLDivElement>;
     description?: ReactNode;
 } & Omit<InputProps, 'ref'>;
-export declare const TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ ref, name, label, className, style, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export type TextAreaFieldProps = {
     name: string;
     label?: string;
@@ -25,4 +25,4 @@ export type TextAreaFieldProps = {
     description?: ReactNode;
     ref?: Ref<HTMLDivElement>;
 } & Omit<TextAreaProps, 'ref'>;
-export declare function TextAreaField({ name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextAreaField({ name, label, className, style, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/TextField.js

@@ -21,7 +21,7 @@ import { Field } from './Field.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, description } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName", "description"]);
+    var { ref, name, label, className, style, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "style", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName", "description"]);
     const [props] = useField({
         name,
         onChange,
@@ -38,10 +38,10 @@ export const TextField = function TextField(_a) {
             }, autoFocusDelay);
         }
     }, [autoFocusDelay]);
-    return (_jsxs(Field, { className: className, stretch: true, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) })) }), description && _jsx(Field.Description, { children: description })] }));
+    return (_jsxs(Field, { className: className, style: style, stretch: true, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) })) }), description && _jsx(Field.Description, { children: description })] }));
 };
 export function TextAreaField(_a) {
-    var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName", "description", "ref"]);
+    var { name, label, className, style, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref } = _a, rest = __rest(_a, ["name", "label", "className", "style", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName", "description", "ref"]);
     const [props] = useField(name);
     const { submitForm } = useFormikContext();
     const onKeyDownInner = useCallback((e) => {
@@ -52,6 +52,6 @@ export function TextAreaField(_a) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     }, [submitOnEnter, onKeyDown, submitForm]);
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { stretch: true, className: className, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), onKeyDown: onKeyDownInner })) }), description && _jsx(Field.Description, { children: description })] }));
+    return (_jsxs(Field, { stretch: true, className: className, style: style, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), onKeyDown: onKeyDownInner })) }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=TextField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAKN,WAAW,EACX,SAAS,EACT,MAAM,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAazC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAE,CAAC,CAAQ,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,SAAS,CAAC,EAe3B;QAf2B,EAC3C,GAAG,EACH,IAAI,EACJ,KAAK,EACL,SAAS,EACT,cAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,EAAE,UAAU,EACd,cAAc,EACd,WAAW,OAEK,EADb,IAAI,cAdoC,wJAe3C,CADO;IAEP,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;QACxB,IAAI;QACJ,QAAQ;QACR,OAAO;QACP,MAAM;KACN,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,cAAc,EAAE,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE;gBACf,IAAI,aAAa,CAAC,OAAO;oBAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC1D,CAAC,EAAE,cAAc,CAAC,CAAC;QACpB,CAAC;IACF,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,QAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,aACnD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,KAAK,oBACD,KAAK,EACL,IAAI,IACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,EAC1C,GAAG,EAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,IAAI,QAAQ,CAAC,IACrD,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC,CAAC;AAgBF,MAAM,UAAU,aAAa,CAAC,EAYT;QAZS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,EACb,EAAE,EAAE,UAAU,EACd,iBAAiB,EACjB,WAAW,EACX,GAAG,OAEiB,EADjB,IAAI,cAXsB,yHAY7B,CADO;IAEP,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC1C,MAAM,cAAc,GAAG,WAAW,CACjC,CAAC,CAAkC,EAAE,EAAE;QACtC,IAAI,aAAa,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACvD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACd,CAAC;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,EAAE,UAAU,CAAC,CACtC,CAAC;IACF,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAExC,OAAO,CACN,MAAC,KAAK,IAAC,OAAO,QAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,aACnD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,kBACR,GAAG,EAAE,QAAe,IAChB,KAAK,EACL,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAC7C,SAAS,EAAE,cAAc,IACxB,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/ToggleGroupField.d.ts

@@ -1,15 +1,16 @@
 import { ReactNode } from 'react';
 import { ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
-export type ToggleGroupFieldProps<Value extends string> = ToggleGroupProps<Value> & {
+export type ToggleGroupFieldProps<Value extends string> = Omit<ToggleGroupProps<Value>, 'style' | 'className'> & {
     name: string;
     label?: string;
     required?: boolean;
     className?: string;
+    style?: React.CSSProperties;
     id?: string;
     type?: 'single' | 'multiple';
     description?: ReactNode;
 };
-declare function ToggleGroupFieldDefault({ name, label, required, className, type, multiple, description, id: providedId, ...props }: ToggleGroupFieldProps<string>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupFieldDefault({ name, label, required, className, style, type, multiple, description, id: providedId, ...props }: ToggleGroupFieldProps<string>): import("react/jsx-runtime").JSX.Element;
 export declare const ToggleGroupField: typeof ToggleGroupFieldDefault & {
     Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/forms/ToggleGroupField.js

@@ -15,17 +15,17 @@ import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
 import { Field } from './Field.js';
 function ToggleGroupFieldDefault(_a) {
-    var { name, label, required, className, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "description", "id"]);
+    var { name, label, required, className, style, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "style", "type", "multiple", "description", "id"]);
     const id = useIdOrGenerated(providedId);
     const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
-    return (_jsxs(Field, { id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
+    return (_jsxs(Field, { id: id, className: className, style: style, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
                         if (multiple || type === 'multiple') {
                             tools.setValue(v);
                         }
                         else {
                             tools.setValue(v[0]);
                         }
-                    }, multiple: multiple || type === 'multiple' }, props, { className: className })) }), description && _jsx(Field.Description, { children: description })] }));
+                    }, multiple: multiple || type === 'multiple' }, props)) }), description && _jsx(Field.Description, { children: description })] }));
 }
 export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
     Item: ToggleGroup.Item,

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAanC,SAAS,uBAAuB,CAAC,EAUD;QAVC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cATwB,mFAUhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,aACX,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,IACT,SAAS,EAAE,SAAS,IACnB,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
+{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAgBnC,SAAS,uBAAuB,CAAC,EAWD;QAXC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cAVwB,4FAWhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAC/C,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,EACR,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.60",
+  "version": "6.0.61",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/forms/CheckboxField.tsx

@@ -9,6 +9,7 @@ export interface CheckboxFieldProps {
 	label?: string;
 	required?: boolean;
 	className?: string;
+	style?: React.CSSProperties;
 	id?: string;
 	description?: ReactNode;
 }
@@ -17,6 +18,7 @@ export function CheckboxField({
 	name,
 	label,
 	className,
+	style,
 	required,
 	id: providedId,
 	description,
@@ -25,7 +27,7 @@ export function CheckboxField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field horizontal className={className} id={id}>
+		<Field horizontal className={className} style={style} id={id}>
 			<Field.Control
 				render={
 					<Checkbox

package/src/components/forms/EmojiField.tsx

@@ -8,11 +8,12 @@ import { Popover } from '../popover/Popover.js';
 import cls from './EmojiField.module.css';
 import { Field } from './Field.js';
 
-export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
+export type EmojiFieldProps = Omit<ButtonProps, 'className' | 'style'> & {
 	name: string;
 	label?: string;
 	required?: string;
 	className?: string;
+	style?: React.CSSProperties;
 	description?: ReactNode;
 };
 
@@ -23,13 +24,14 @@ export function EmojiField({
 	required,
 	id: providedId,
 	description,
+	style,
 	...rest
 }: EmojiFieldProps) {
 	const [props, _, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Field horizontal className={className} id={id}>
+		<Field horizontal className={className} style={style} id={id}>
 			<Popover open={open} onOpenChange={setOpen}>
 				<Field.Control render={<input type="hidden" {...props} />} />
 				<Popover.Trigger

package/src/components/forms/FormikForm.tsx

@@ -12,12 +12,14 @@ import { ToggleGroupField } from './ToggleGroupField.js';
 export interface FormikFormProps<T extends FormikValues = FormikValues>
 	extends FormikConfig<T> {
 	className?: string;
+	style?: React.CSSProperties;
 }
 
 export { FieldArray } from 'formik';
 
 export function FormikFormRoot<Values extends FormikValues>({
 	className,
+	style,
 	children,
 	onSubmit,
 	...props
@@ -37,14 +39,20 @@ export function FormikFormRoot<Values extends FormikValues>({
 	if (typeof children === 'function') {
 		return (
 			<Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
-				{(formik) => <Form className={className}>{children(formik)}</Form>}
+				{(formik) => (
+					<Form className={className} style={style}>
+						{children(formik)}
+					</Form>
+				)}
 			</Formik>
 		);
 	}
 
 	return (
 		<Formik<Values> onSubmit={wrappedOnSubmit} {...props}>
-			<Form className={className}>{children}</Form>
+			<Form className={className} style={style}>
+				{children}
+			</Form>
 		</Formik>
 	);
 }

package/src/components/forms/NumberStepperField.tsx

@@ -8,10 +8,14 @@ import {
 import { Field } from './Field.js';
 
 export interface NumberStepperFieldProps
-	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
+	extends Omit<
+		NumberStepperProps,
+		'value' | 'onChange' | 'className' | 'style'
+	> {
 	name: string;
 	label?: string;
 	className?: string;
+	style?: React.CSSProperties;
 	id?: string;
 	onChange?: (value: number) => void;
 	description?: ReactNode;
@@ -21,6 +25,7 @@ export function NumberStepperField({
 	name,
 	label,
 	className,
+	style,
 	id: providedId,
 	onChange,
 	description,
@@ -29,7 +34,7 @@ export function NumberStepperField({
 	const [props, field, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field className={className} id={id}>
+		<Field className={className} style={style} id={id}>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={(composed) => (

package/src/components/forms/TextField.tsx

@@ -34,6 +34,7 @@ export const TextField = function TextField({
 	name,
 	label,
 	className,
+	style,
 	autoFocusDelay,
 	autoFocus,
 	inputRef,
@@ -63,7 +64,7 @@ export const TextField = function TextField({
 	}, [autoFocusDelay]);
 
 	return (
-		<Field className={className} stretch ref={ref} id={id}>
+		<Field className={className} style={style} stretch ref={ref} id={id}>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
@@ -99,6 +100,7 @@ export function TextAreaField({
 	name,
 	label,
 	className,
+	style,
 	inputRef,
 	onKeyDown,
 	submitOnEnter,
@@ -123,7 +125,7 @@ export function TextAreaField({
 	const id = useIdOrGenerated(providedId);
 
 	return (
-		<Field stretch className={className} ref={ref} id={id}>
+		<Field stretch className={className} style={style} ref={ref} id={id}>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={

package/src/components/forms/ToggleGroupField.tsx

@@ -4,22 +4,26 @@ import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 import { Field } from './Field.js';
 
-export type ToggleGroupFieldProps<Value extends string> =
-	ToggleGroupProps<Value> & {
-		name: string;
-		label?: string;
-		required?: boolean;
-		className?: string;
-		id?: string;
-		type?: 'single' | 'multiple';
-		description?: ReactNode;
-	};
+export type ToggleGroupFieldProps<Value extends string> = Omit<
+	ToggleGroupProps<Value>,
+	'style' | 'className'
+> & {
+	name: string;
+	label?: string;
+	required?: boolean;
+	className?: string;
+	style?: React.CSSProperties;
+	id?: string;
+	type?: 'single' | 'multiple';
+	description?: ReactNode;
+};
 
 function ToggleGroupFieldDefault({
 	name,
 	label,
 	required,
 	className,
+	style,
 	type = 'single',
 	multiple,
 	description,
@@ -30,7 +34,7 @@ function ToggleGroupFieldDefault({
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
-		<Field id={id}>
+		<Field id={id} className={className} style={style}>
 			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
@@ -45,7 +49,6 @@ function ToggleGroupFieldDefault({
 						}}
 						multiple={multiple || type === 'multiple'}
 						{...props}
-						className={className}
 					/>
 				}
 			/>