@a-type/ui 6.0.23 → 6.0.24

package/dist/components/forms/CheckboxField.js

@@ -18,8 +18,8 @@ export function CheckboxField(_a) {
     var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
     const [props, _, tools] = useField({ name, required, type: 'checkbox' });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { horizontal: true, className: className, children: [_jsx(Field.Control, { children: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
                         tools.setValue(!!v);
-                    }, id: id, "aria-describedby": description ? `${id}-description` : undefined }, rest)) }), label && _jsx(Field.Label, { htmlFor: id, children: label }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=CheckboxField.js.map

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,aACrC,KAAC,KAAK,CAAC,OAAO,cACb,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,EACD,EAAE,EAAE,EAAE,sBACY,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAC3D,IAAI,EACP,GACa,EACf,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAe,EACxD,WAAW,IAAI,CACf,KAAC,KAAK,CAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,cAAc,YACxC,WAAW,GACO,CACpB,IACM,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;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"}

package/dist/components/forms/EmojiField.js

@@ -24,14 +24,14 @@ export function EmojiField(_a) {
     const [props, _, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
     const [open, setOpen] = useState(false);
-    return (_jsxs(Field, { horizontal: true, className: className, children: [_jsx(Field.Control, { children: _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx("input", Object.assign({ type: "hidden" }, props, { id: id, "aria-describedby": description ? `${id}-description` : undefined })), _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);
+    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) => {
+                                tools.setValue(v);
+                                setOpen(false);
+                            }, onClear: required
+                                ? undefined
+                                : () => {
+                                    tools.setValue('');
                                     setOpen(false);
-                                }, onClear: required
-                                    ? undefined
-                                    : () => {
-                                        tools.setValue('');
-                                        setOpen(false);
-                                    }, id: id }) })] }) }), label && _jsx(Field.Label, { htmlFor: id, children: label }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+                                }, id: id }) })] }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=EmojiField.js.map

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,aACrC,KAAC,KAAK,CAAC,OAAO,cACb,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,8BACC,IAAI,EAAC,QAAQ,IACT,KAAK,IACT,EAAE,EAAE,EAAE,sBACY,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAC9D,EACF,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;oCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;gCAChB,CAAC,EACD,OAAO,EACN,QAAQ;oCACP,CAAC,CAAC,SAAS;oCACX,CAAC,CAAC,GAAG,EAAE;wCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;wCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;oCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,GACK,EACf,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAe,EACxD,WAAW,IAAI,CACf,KAAC,KAAK,CAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,cAAc,YACxC,WAAW,GACO,CACpB,IACM,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;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"}

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

@@ -3,9 +3,14 @@ import { SlotDiv } from '../utility/SlotDiv.js';
 export interface FieldRootProps extends ComponentProps<'div'> {
     horizontal?: boolean;
     stretch?: boolean;
+    reverse?: boolean;
+    /**
+     * This ID will be passed to Control, and Label will be associated.
+     */
+    id?: string;
 }
-declare function FieldRoot({ className, horizontal, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
-declare function FieldControl({ className, ...props }: ComponentProps<typeof SlotDiv>): import("react/jsx-runtime").JSX.Element;
+declare function FieldRoot({ className, horizontal, stretch, reverse, id, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
+declare function FieldControl({ className, ref, ...props }: ComponentProps<typeof SlotDiv>): import("react/jsx-runtime").JSX.Element;
 declare function FieldLabel({ className, ...props }: ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
 declare function FieldDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 export declare const Field: typeof FieldRoot & {

package/dist/components/forms/Field.js

@@ -11,23 +11,57 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import cls from './Field.module.css';
+const FieldContext = createContext({
+    events: new EventTarget(),
+});
 function FieldRoot(_a) {
-    var { className, horizontal } = _a, props = __rest(_a, ["className", "horizontal"]);
-    return (_jsx(SlotDiv, Object.assign({ className: clsx(cls.root, className), "data-horizontal": horizontal ? '' : undefined, "data-stretch": props.stretch ? '' : undefined }, props)));
+    var { className, horizontal, stretch, reverse, id } = _a, props = __rest(_a, ["className", "horizontal", "stretch", "reverse", "id"]);
+    const [events] = useState(() => new EventTarget());
+    return (_jsx(FieldContext.Provider, { value: { id, events }, children: _jsx(SlotDiv, Object.assign({ className: clsx(cls.root, className), "data-horizontal": horizontal ? '' : undefined, "data-stretch": stretch ? '' : undefined, "data-reverse": reverse ? '' : undefined }, props)) }));
 }
 function FieldControl(_a) {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return _jsx(SlotDiv, Object.assign({ className: clsx(cls.control, className) }, props));
+    var { className, ref } = _a, props = __rest(_a, ["className", "ref"]);
+    const innerRef = useRef(null);
+    const finalRef = useMergedRef(ref, innerRef);
+    const { id, events } = useContext(FieldContext);
+    useEffect(() => {
+        if (!id)
+            return;
+        function onDescriptionVisible(event) {
+            var _a, _b;
+            if (event.detail === true) {
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', `${id}-description`);
+            }
+            else {
+                (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-describedby');
+            }
+        }
+        events.addEventListener('description-visible', onDescriptionVisible);
+        return () => {
+            events.removeEventListener('description-visible', onDescriptionVisible);
+        };
+    }, [events, id]);
+    return (_jsx(SlotDiv, Object.assign({ className: clsx(cls.control, className), id: id, ref: finalRef }, props)));
 }
 function FieldLabel(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return _jsx("label", Object.assign({ className: clsx(cls.label, className) }, props));
+    const { id } = useContext(FieldContext);
+    return (_jsx("label", Object.assign({ className: clsx(cls.label, className), htmlFor: id }, props)));
 }
 function FieldDescription(_a) {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx("div", Object.assign({ className: clsx('@mode-dense', cls.description, className) }, props)));
+    const { id, events } = useContext(FieldContext);
+    useEffect(() => {
+        events.dispatchEvent(new CustomEvent('description-visible', { detail: true }));
+        return () => {
+            events.dispatchEvent(new CustomEvent('description-visible', { detail: false }));
+        };
+    }, [events]);
+    return (_jsx("div", Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props)));
 }
 export const Field = Object.assign(FieldRoot, {
     Label: FieldLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,oBAAoB,CAAC;AAOrC,SAAS,SAAS,CAAC,EAAmD;QAAnD,EAAE,SAAS,EAAE,UAAU,OAA4B,EAAvB,KAAK,cAAjC,2BAAmC,CAAF;IACnD,OAAO,CACN,KAAC,OAAO,kBACP,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,qBACnB,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,kBAC9B,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IACxC,KAAK,EACR,CACF,CAAC;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EAAuD;QAAvD,EAAE,SAAS,OAA4C,EAAvC,KAAK,cAArB,aAAuB,CAAF;IAC1C,OAAO,KAAC,OAAO,kBAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACxE,CAAC;AAED,SAAS,UAAU,CAAC,EAAgD;QAAhD,EAAE,SAAS,OAAqC,EAAhC,KAAK,cAArB,aAAuB,CAAF;IACxC,OAAO,8BAAO,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,SAAS,CAAC,IAAM,KAAK,EAAI,CAAC;AACpE,CAAC;AAED,SAAS,gBAAgB,CAAC,EAA8C;QAA9C,EAAE,SAAS,OAAmC,EAA9B,KAAK,cAArB,aAAuB,CAAF;IAC9C,OAAO,CACN,4BACC,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,IACtD,KAAK,EACR,CACF,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,EAAE;IAC7C,KAAK,EAAE,UAAU;IACjB,WAAW,EAAE,gBAAgB;IAC7B,OAAO,EAAE,YAAY;CACrB,CAAC,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":"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"}

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

@@ -8,6 +8,10 @@
 		align-items: center;
 		grid-template-areas: 'control label' 'description description';
 		grid-template-columns: auto 1fr;
+		&[data-reverse] {
+			grid-template-areas: 'label control' 'description description';
+			grid-template-columns: auto 1fr;
+		}
 	}
 
 	&[data-stretch] {
@@ -18,12 +22,12 @@
 
 .control {
 	grid-area: control;
-}
-:where(.control) {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--m-space-sm);
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
 }
 
 .label {
@@ -38,6 +42,13 @@
 		@apply --mx-fg(var(--m-color-neutral-ink));
 		font-weight: var(--m-text-weight-normal);
 		margin-block-start: --fn-literal(5px);
+
+		[data-reverse] & {
+			margin-inline-start: 0;
+			margin-inline-end: calc(
+				var(--m-global-shape-roundness) * var(--m-space-md)
+			);
+		}
 	}
 }
 

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

@@ -17,7 +17,7 @@ export declare const FormikForm: typeof FormikFormRoot & {
     SubmitButton: typeof SubmitButton;
     CheckboxField: typeof CheckboxField;
     SwitchField: typeof SwitchField;
-    ToggleGroupField: (({ name, label, required, className, type, multiple, description, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+    ToggleGroupField: (({ name, label, required, className, 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.stories.d.ts

@@ -14,7 +14,7 @@ declare const meta: {
         SubmitButton: typeof SubmitButton;
         CheckboxField: typeof CheckboxField;
         SwitchField: typeof SwitchField;
-        ToggleGroupField: (({ name, label, required, className, type, multiple, description, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+        ToggleGroupField: (({ name, label, required, className, 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.js

@@ -18,9 +18,9 @@ export function NumberStepperField(_a) {
     var { name, label, className, id: providedId, onChange, description } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange", "description"]);
     const [_, field, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { className: className, horizontal: true, children: [label && _jsx(Field.Label, { htmlFor: id, children: label }), _jsx(Field.Control, { children: _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
+    return (_jsxs(Field, { className: className, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
                         tools.setValue(v);
                         onChange === null || onChange === void 0 ? void 0 : onChange(v);
-                    }, id: id, "aria-describedby": description ? `${id}-description` : undefined }, rest)) }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+                    } }, rest)) }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=NumberStepperField.js.map

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,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,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,UAAU,mBACrC,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAe,EACzD,KAAC,KAAK,CAAC,OAAO,cACb,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;oBACf,CAAC,EACD,EAAE,EAAE,EAAE,sBACY,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAC3D,IAAI,EACP,GACa,EACf,WAAW,IAAI,CACf,KAAC,KAAK,CAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,cAAc,YACxC,WAAW,GACO,CACpB,IACM,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;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,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,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,EACL,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;oBACf,CAAC,IACG,IAAI,EACP,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/SwitchField.js

@@ -18,8 +18,8 @@ export function SwitchField(_a) {
     var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
     const [props, _, tools] = useField({ name, required, type: 'checkbox' });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Field, { horizontal: true, className: className, children: [_jsx(Field.Control, { children: _jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
                         tools.setValue(!!v);
-                    }, id: id, "aria-describedby": description ? `${id}-description` : undefined }, rest)) }), label && _jsx(Field.Label, { htmlFor: id, children: label }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=SwitchField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,WAAW,CAAC,EAQT;QARS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEO,EADf,IAAI,cAPoB,+DAQ3B,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,aACrC,KAAC,KAAK,CAAC,OAAO,cACb,KAAC,MAAM,oBACF,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,EACD,EAAE,EAAE,EAAE,sBACY,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAC3D,IAAI,EACP,GACa,EACf,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAe,EACxD,WAAW,IAAI,CACf,KAAC,KAAK,CAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,cAAc,YACxC,WAAW,GACO,CACpB,IACM,CACR,CAAC;AACH,CAAC"}
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,WAAW,CAAC,EAQT;QARS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEO,EADf,IAAI,cAPoB,+DAQ3B,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,MAAM,oBACF,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/TextField.js

@@ -38,7 +38,7 @@ export const TextField = function TextField(_a) {
             }, autoFocusDelay);
         }
     }, [autoFocusDelay]);
-    return (_jsxs(Field, { className: className, stretch: true, ref: ref, children: [label && _jsx(Field.Label, { htmlFor: id, children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef), "aria-describedby": description ? `${id}-description` : undefined })) }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+    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 })] }));
 };
 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"]);
@@ -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, children: [label && _jsx(Field.Label, { htmlFor: id, children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), id: id, onKeyDown: onKeyDownInner, "aria-describedby": description ? `${id}-description` : undefined })) }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+    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 })] }));
 }
 //# 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":"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"}
+{"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

@@ -9,7 +9,7 @@ export type ToggleGroupFieldProps<Value extends string> = ToggleGroupProps<Value
     type?: 'single' | 'multiple';
     description?: ReactNode;
 };
-declare function ToggleGroupFieldDefault({ name, label, required, className, type, multiple, description, id, ...props }: ToggleGroupFieldProps<string>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupFieldDefault({ name, label, required, className, 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

@@ -11,19 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
+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 } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "description", "id"]);
+    var { name, label, required, className, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "description", "id"]);
+    const id = useIdOrGenerated(providedId);
     const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
-    return (_jsxs(Field, { children: [label && _jsx(Field.Label, { htmlFor: id, children: label }), _jsx(Field.Control, { children: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
+    return (_jsxs(Field, { id: id, 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, { id: id, className: className, "aria-describedby": description ? `${id}-description` : undefined })) }), description && (_jsx(Field.Description, { id: `${id}-description`, children: description }))] }));
+                    }, multiple: multiple || type === 'multiple' }, props, { className: className })) }), 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,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,OAE6B,EAD5B,KAAK,cATwB,mFAUhC,CADQ;IAER,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,eACJ,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAe,EACzD,KAAC,KAAK,CAAC,OAAO,cACb,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,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,sBACF,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,IAC9D,GACa,EACf,WAAW,IAAI,CACf,KAAC,KAAK,CAAC,WAAW,IAAC,EAAE,EAAE,GAAG,EAAE,cAAc,YACxC,WAAW,GACO,CACpB,IACM,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;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"}

package/package.json

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

package/src/components/forms/CheckboxField.tsx

@@ -25,25 +25,21 @@ export function CheckboxField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Checkbox
-					{...props}
-					checked={props.checked}
-					onCheckedChange={(v) => {
-						tools.setValue(!!v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Checkbox
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
+			/>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/EmojiField.tsx

@@ -29,54 +29,43 @@ export function EmojiField({
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Popover open={open} onOpenChange={setOpen}>
-					<input
-						type="hidden"
-						{...props}
-						id={id}
-						aria-describedby={description ? `${id}-description` : undefined}
-					/>
-					<Popover.Trigger
-						render={
-							<Button
-								id={`${id}-trigger`}
-								aria-label="Select emoji"
-								size="wrapper"
-								{...rest}
-							>
-								<Button.Icon className={cls.triggerIcon}>
-									{props.value || <Icon name="smile" />}
-								</Button.Icon>
-							</Button>
+		<Field horizontal className={className} id={id}>
+			<Popover open={open} onOpenChange={setOpen}>
+				<Field.Control render={<input type="hidden" {...props} />} />
+				<Popover.Trigger
+					render={
+						<Button
+							id={`${id}-trigger`}
+							aria-label="Select emoji"
+							size="wrapper"
+							{...rest}
+						>
+							<Button.Icon className={cls.triggerIcon}>
+								{props.value || <Icon name="smile" />}
+							</Button.Icon>
+						</Button>
+					}
+				/>
+				<Popover.Content>
+					<EmojiPicker
+						onValueChange={(v) => {
+							tools.setValue(v);
+							setOpen(false);
+						}}
+						onClear={
+							required
+								? undefined
+								: () => {
+										tools.setValue('');
+										setOpen(false);
+								  }
 						}
+						id={id}
 					/>
-					<Popover.Content>
-						<EmojiPicker
-							onValueChange={(v) => {
-								tools.setValue(v);
-								setOpen(false);
-							}}
-							onClear={
-								required
-									? undefined
-									: () => {
-											tools.setValue('');
-											setOpen(false);
-									  }
-							}
-							id={id}
-						/>
-					</Popover.Content>
-				</Popover>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+				</Popover.Content>
+			</Popover>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/Field.module.css

@@ -8,6 +8,10 @@
 		align-items: center;
 		grid-template-areas: 'control label' 'description description';
 		grid-template-columns: auto 1fr;
+		&[data-reverse] {
+			grid-template-areas: 'label control' 'description description';
+			grid-template-columns: auto 1fr;
+		}
 	}
 
 	&[data-stretch] {
@@ -18,12 +22,12 @@
 
 .control {
 	grid-area: control;
-}
-:where(.control) {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--m-space-sm);
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
 }
 
 .label {
@@ -38,6 +42,13 @@
 		@apply --mx-fg(var(--m-color-neutral-ink));
 		font-weight: var(--m-text-weight-normal);
 		margin-block-start: --fn-literal(5px);
+
+		[data-reverse] & {
+			margin-inline-start: 0;
+			margin-inline-end: calc(
+				var(--m-global-shape-roundness) * var(--m-space-md)
+			);
+		}
 	}
 }
 

package/src/components/forms/Field.tsx

@@ -1,36 +1,118 @@
 import clsx from 'clsx';
-import { ComponentProps } from 'react';
+import {
+	ComponentProps,
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import cls from './Field.module.css';
 
 export interface FieldRootProps extends ComponentProps<'div'> {
 	horizontal?: boolean;
 	stretch?: boolean;
+	reverse?: boolean;
+	/**
+	 * This ID will be passed to Control, and Label will be associated.
+	 */
+	id?: string;
 }
 
-function FieldRoot({ className, horizontal, ...props }: FieldRootProps) {
+const FieldContext = createContext<{ id?: string; events: EventTarget }>({
+	events: new EventTarget(),
+});
+
+function FieldRoot({
+	className,
+	horizontal,
+	stretch,
+	reverse,
+	id,
+	...props
+}: FieldRootProps) {
+	const [events] = useState(() => new EventTarget());
+	return (
+		<FieldContext.Provider value={{ id, events }}>
+			<SlotDiv
+				className={clsx(cls.root, className)}
+				data-horizontal={horizontal ? '' : undefined}
+				data-stretch={stretch ? '' : undefined}
+				data-reverse={reverse ? '' : undefined}
+				{...props}
+			/>
+		</FieldContext.Provider>
+	);
+}
+
+function FieldControl({
+	className,
+	ref,
+	...props
+}: ComponentProps<typeof SlotDiv>) {
+	const innerRef = useRef<HTMLElement>(null);
+	const finalRef = useMergedRef(ref, innerRef);
+	const { id, events } = useContext(FieldContext);
+
+	useEffect(() => {
+		if (!id) return;
+
+		function onDescriptionVisible(event: CustomEvent) {
+			if (event.detail === true) {
+				innerRef.current?.setAttribute('aria-describedby', `${id}-description`);
+			} else {
+				innerRef.current?.removeAttribute('aria-describedby');
+			}
+		}
+
+		events.addEventListener(
+			'description-visible',
+			onDescriptionVisible as EventListener,
+		);
+		return () => {
+			events.removeEventListener(
+				'description-visible',
+				onDescriptionVisible as EventListener,
+			);
+		};
+	}, [events, id]);
+
 	return (
 		<SlotDiv
-			className={clsx(cls.root, className)}
-			data-horizontal={horizontal ? '' : undefined}
-			data-stretch={props.stretch ? '' : undefined}
+			className={clsx(cls.control, className)}
+			id={id}
+			ref={finalRef}
 			{...props}
 		/>
 	);
 }
 
-function FieldControl({ className, ...props }: ComponentProps<typeof SlotDiv>) {
-	return <SlotDiv className={clsx(cls.control, className)} {...props} />;
-}
-
 function FieldLabel({ className, ...props }: ComponentProps<'label'>) {
-	return <label className={clsx(cls.label, className)} {...props} />;
+	const { id } = useContext(FieldContext);
+	return (
+		<label className={clsx(cls.label, className)} htmlFor={id} {...props} />
+	);
 }
 
 function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
+	const { id, events } = useContext(FieldContext);
+
+	useEffect(() => {
+		events.dispatchEvent(
+			new CustomEvent('description-visible', { detail: true }),
+		);
+		return () => {
+			events.dispatchEvent(
+				new CustomEvent('description-visible', { detail: false }),
+			);
+		};
+	}, [events]);
 	return (
 		<div
 			className={clsx('@mode-dense', cls.description, className)}
+			id={id ? `${id}-description` : undefined}
 			{...props}
 		/>
 	);

package/src/components/forms/NumberStepperField.tsx

@@ -29,25 +29,21 @@ export function NumberStepperField({
 	const [_, field, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field className={className} horizontal>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			<Field.Control>
-				<NumberStepper
-					value={field.value}
-					onChange={(v) => {
-						tools.setValue(v);
-						onChange?.(v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field className={className} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<NumberStepper
+						value={field.value}
+						onChange={(v) => {
+							tools.setValue(v);
+							onChange?.(v);
+						}}
+						{...rest}
+					/>
+				}
+			/>
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/SwitchField.tsx

@@ -25,25 +25,21 @@ export function SwitchField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Switch
-					{...props}
-					checked={props.checked}
-					onCheckedChange={(v) => {
-						tools.setValue(!!v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Switch
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
+			/>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/TextField.tsx

@@ -63,26 +63,20 @@ export const TextField = function TextField({
 	}, [autoFocusDelay]);
 
 	return (
-		<Field className={className} stretch ref={ref}>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
+		<Field className={className} stretch ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
 					<Input
 						{...props}
 						{...rest}
-						id={id}
 						autoFocus={autoFocus}
 						className={clsx(cls.input, inputClassName)}
 						ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
-						aria-describedby={description ? `${id}-description` : undefined}
 					/>
 				}
 			/>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 };
@@ -129,8 +123,8 @@ export function TextAreaField({
 	const id = useIdOrGenerated(providedId);
 
 	return (
-		<Field stretch className={className} ref={ref}>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
+		<Field stretch className={className} ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
 					<TextArea
@@ -138,17 +132,11 @@ export function TextAreaField({
 						{...props}
 						{...rest}
 						className={clsx(cls.input, textAreaClassName)}
-						id={id}
 						onKeyDown={onKeyDownInner}
-						aria-describedby={description ? `${id}-description` : undefined}
 					/>
 				}
 			/>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/ToggleGroupField.tsx

@@ -1,5 +1,6 @@
 import { useField } from 'formik';
 import { ReactNode } from 'react';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 import { Field } from './Field.js';
 
@@ -22,36 +23,33 @@ function ToggleGroupFieldDefault({
 	type = 'single',
 	multiple,
 	description,
-	id,
+	id: providedId,
 	...props
 }: ToggleGroupFieldProps<string>) {
+	const id = useIdOrGenerated(providedId);
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
-		<Field>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			<Field.Control>
-				<ToggleGroup
-					{...fieldProps}
-					onValueChange={(v) => {
-						if (multiple || type === 'multiple') {
-							tools.setValue(v);
-						} else {
-							tools.setValue(v[0]);
-						}
-					}}
-					multiple={multiple || type === 'multiple'}
-					{...props}
-					id={id}
-					className={className}
-					aria-describedby={description ? `${id}-description` : undefined}
-				/>
-			</Field.Control>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<ToggleGroup
+						{...fieldProps}
+						onValueChange={(v) => {
+							if (multiple || type === 'multiple') {
+								tools.setValue(v);
+							} else {
+								tools.setValue(v[0]);
+							}
+						}}
+						multiple={multiple || type === 'multiple'}
+						{...props}
+						className={className}
+					/>
+				}
+			/>
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }