@a-type/ui 6.0.21 → 6.0.23

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

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

package/dist/components/forms/NumberStepperField.js

@@ -11,19 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { NumberStepper, } from '../numberStepper/NumberStepper.js';
-import { FieldLabel } from './FieldLabel.js';
-import cls from './NumberStepperField.module.css';
+import { Field } from './Field.js';
 export function NumberStepperField(_a) {
-    var { name, label, className, id: providedId, onChange } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange"]);
+    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(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
-                    tools.setValue(v);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(v);
-                }, id: id }, rest))] }));
+    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) => {
+                        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 }))] }));
 }
-const FieldRoot = withClassName('div', cls.root);
 //# 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;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,GAAG,MAAM,iCAAiC,CAAC;AAWlD,MAAM,UAAU,kBAAkB,CAAC,EAOT;QAPS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,EAAE,EAAE,UAAU,EACd,QAAQ,OAEiB,EADtB,IAAI,cAN2B,gDAOlC,CADO;IAEP,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,aAC7B,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;gBACf,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}
+{"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"}

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

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 export interface SwitchFieldProps {
     name: string;
     label?: string;
     required?: boolean;
     className?: string;
     id?: string;
+    description?: ReactNode;
 }
-export declare function SwitchField({ name, label, className, required, id: providedId, ...rest }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchField({ name, label, className, required, id: providedId, description, ...rest }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SwitchField.js

@@ -12,15 +12,14 @@ 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 { Box } from '../box/Box.js';
 import { Switch } from '../switch/Switch.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 export function SwitchField(_a) {
-    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    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(Box, { gap: "md", className: className, children: [_jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
-                    tools.setValue(!!v);
-                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+    return (_jsxs(Field, { horizontal: true, className: className, children: [_jsx(Field.Control, { children: _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 }))] }));
 }
 //# 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;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,WAAW,CAAC,EAOT;QAPS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEI,EADf,IAAI,cANoB,gDAO3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, Ref } from 'react';
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
 import { InputProps } from '../input/Input.js';
 import { TextAreaProps } from '../textArea/TextArea.js';
 export type TextFieldProps = {
@@ -9,8 +9,9 @@ export type TextFieldProps = {
     inputRef?: Ref<HTMLInputElement>;
     inputClassName?: string;
     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, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+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 type TextAreaFieldProps = {
     name: string;
     label?: string;
@@ -21,6 +22,7 @@ export type TextAreaFieldProps = {
     inputRef?: Ref<HTMLTextAreaElement>;
     submitOnEnter?: boolean;
     textAreaClassName?: string;
-} & TextAreaProps;
-export declare function TextAreaField({ name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
-export declare const FieldRoot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    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;

package/dist/components/forms/TextField.js

@@ -13,16 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useField, useFormikContext } from 'formik';
 import { useCallback, useEffect, useRef, } from 'react';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { Input } from '../input/Input.js';
 import { TextArea } from '../textArea/TextArea.js';
-import { FieldLabel } from './FieldLabel.js';
+import { 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 } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName"]);
+    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"]);
     const [props] = useField({
         name,
         onChange,
@@ -39,10 +38,10 @@ export const TextField = function TextField(_a) {
             }, autoFocusDelay);
         }
     }, [autoFocusDelay]);
-    return (_jsxs(FieldRoot, { className: className, ref: ref, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) }))] }));
+    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 }))] }));
 };
 export function TextAreaField(_a) {
-    var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName"]);
+    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"]);
     const [props] = useField(name);
     const { submitForm } = useFormikContext();
     const onKeyDownInner = useCallback((e) => {
@@ -53,7 +52,6 @@ export function TextAreaField(_a) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     }, [submitOnEnter, onKeyDown, submitForm]);
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx('layer-composed:w-full', textAreaClassName), id: id, onKeyDown: onKeyDownInner }))] }));
+    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 }))] }));
 }
-export const FieldRoot = withClassName('div', cls.root);
 //# 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

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

@@ -12,19 +12,18 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
-import { FieldLabel } from './FieldLabel.js';
-import { FieldRoot } from './TextField.js';
+import { Field } from './Field.js';
 function ToggleGroupFieldDefault(_a) {
-    var { name, label, required, className, type = 'single', multiple, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "id"]);
+    var { name, label, required, className, type = 'single', multiple, description, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "description", "id"]);
     const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
-    return (_jsxs(FieldRoot, { children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
-                    if (multiple || type === 'multiple') {
-                        tools.setValue(v);
-                    }
-                    else {
-                        tools.setValue(v[0]);
-                    }
-                }, multiple: multiple || type === 'multiple' }, props, { id: id, className: className }))] }));
+    return (_jsxs(Field, { children: [label && _jsx(Field.Label, { htmlFor: id, children: label }), _jsx(Field.Control, { children: _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 }))] }));
 }
 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;AAClC,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C,SAAS,uBAAuB,CAAC,EASD;QATC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,EAAE,OAE6B,EAD5B,KAAK,cARwB,oEAShC,CADQ;IAER,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,SAAS,eACR,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;oBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;wBACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACnB,CAAC;yBAAM,CAAC;wBACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACtB,CAAC;gBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IACnB,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
+{"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"}

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

@@ -1,5 +1,5 @@
 export * from './CheckboxField.js';
-export * from './FieldLabel.js';
+export * from './Field.js';
 export * from './Form.js';
 export * from './FormikForm.js';
 export * from './hooks.js';

package/dist/components/forms/index.js

@@ -1,5 +1,5 @@
 export * from './CheckboxField.js';
-export * from './FieldLabel.js';
+export * from './Field.js';
 export * from './Form.js';
 export * from './FormikForm.js';
 export * from './hooks.js';

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

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

package/dist/components/switch/Switch.module.css

@@ -15,7 +15,7 @@
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-border));
+	@apply --mx-borderColor(var(--m-control-borderColor));
 	border-radius: var(--m-radius-lg);
 
 	&[data-checked] {

package/package.json

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

package/src/components/chip/Chip.module.css

@@ -1,10 +1,10 @@
 .root {
 	display: inline-flex;
 	align-items: center;
-	gap: var(--m-space-xs);
+	gap: var(--m-space-md);
 	white-space: nowrap;
 
-	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg(var(--m-color-neutral-paper));
 	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
 	@apply --mx-borderColor(var(--m-color-main-heavy));
 
@@ -19,4 +19,14 @@
 	&:not(:is(button)) {
 		padding: var(--m-action-padding);
 	}
+
+	&[data-emphasis='primary'] {
+		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-borderColor(var(--m-color-main-heavy));
+	}
+	&[data-emphasis='ambient'] {
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor(transparent);
+		@apply --mx-fg(var(--m-color-neutral-ink));
+	}
 }

package/src/components/chip/Chip.stories.tsx

@@ -8,6 +8,7 @@ const meta = {
 	component: Chip,
 	args: {
 		children: 'Chip',
+		emphasis: 'default',
 	},
 	parameters: {
 		controls: { expanded: true },

package/src/components/chip/Chip.tsx

@@ -5,13 +5,15 @@ import cls from './Chip.module.css';
 
 export interface ChipProps extends SlotDivProps {
 	ref?: Ref<any>;
+	emphasis?: 'default' | 'primary' | 'ambient';
 }
 
 export function Chip({ className, ...rest }: ChipProps) {
 	return (
 		<SlotDiv
-			className={classNames('@mode-denser', cls.root, className)}
+			className={classNames('@mode-dense', cls.root, className)}
 			role={rest.onClick ? 'button' : undefined}
+			data-emphasis={rest.emphasis ?? 'default'}
 			{...rest}
 		/>
 	);

package/src/components/combobox/Combobox.module.css

@@ -15,14 +15,14 @@
 	display: flex;
 	flex-direction: column;
 	overflow: clip;
-	padding: var(--m-space-sm);
+	padding: var(--m-space-md);
 	gap: var(--m-space-xs);
 }
 
 .groupItem {
-	@apply --mx-shadow;
+	@apply --mx-ring;
 	&[data-highlighted] {
-		--mx-ring-value: --fn-ring(var(--m-color-main-mid), 2px);
+		@apply --mx-ring(--fn-ring(var(--m-color-main-mid), 2px));
 	}
 }
 
@@ -112,13 +112,15 @@
 }
 
 .item[data-selected] {
-	@apply --mx-fg(var(--m-color-neutral-heavy));
+	@apply --mx-fg(var(--m-color-main-ink));
+	@apply --mx-bg-heavier(1);
 }
 
 .itemIndicator {
 	margin-inline-start: auto;
-	height: 10px;
-	width: 10px;
+	height: --fn-literal(10px);
+	width: --fn-literal(10px);
+	stroke-width: var(--m-lineWidth-lg);
 }
 
 .list {
@@ -164,5 +166,5 @@
 .details {
 	@apply --mx-prose-ambient;
 	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm);
+	padding: var(--m-space-md);
 }

package/src/components/combobox/Combobox.stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/Icon.js';
-import { Text } from '../typography/typography.js';
 import { Combobox } from './Combobox.js';
 
 interface Args {
@@ -206,12 +205,10 @@ export const Grouped: Story = {
 						)}
 					</GroupedCombobox.Empty>
 					<GroupedCombobox.Separator />
-					<Box p="xs">
-						<Text emphasis="ambient">
-							Select your favorite fruit or berry.
-							{creatable ? ' Enter creates a new item.' : ''}
-						</Text>
-					</Box>
+					<Combobox.Details>
+						Select your favorite fruit or berry.
+						{creatable ? ' Enter creates a new item.' : ''}
+					</Combobox.Details>
 				</GroupedCombobox.Content>
 			</GroupedCombobox>
 		);

package/src/components/combobox/Combobox.tsx

@@ -484,12 +484,14 @@ export interface ComboboxGroupItemProps
 	replace?: BaseCombobox.ComboboxItemProps['render'];
 	render?: ChipProps['render'];
 	color?: ChipProps['color'];
+	emphasis?: ChipProps['emphasis'];
 }
 function ComboboxGroupItem({
 	className,
 	replace,
 	render,
 	color = 'gray',
+	emphasis = 'default',
 	children,
 	...props
 }: ComboboxGroupItemProps) {
@@ -498,8 +500,7 @@ function ComboboxGroupItem({
 			render={
 				replace ?? (
 					<Button
-						emphasis="light"
-						render={<Chip render={render} color={color} />}
+						render={<Chip render={render} color={color} emphasis={emphasis} />}
 					/>
 				)
 			}
@@ -542,6 +543,8 @@ function ComboboxClear({ children, ...props }: ComboboxClearProps) {
 	);
 }
 
+const Details = withClassName(SlotDiv, cls.details);
+
 const baseSubComponents = {
 	useFilter: BaseCombobox.Combobox.useFilter,
 
@@ -578,6 +581,7 @@ const baseSubComponents = {
 	GroupItem: ComboboxGroupItem,
 
 	Unstyled: BaseCombobox.Combobox,
+	Details,
 };
 
 function createCombobox<TItem>() {

package/src/components/forms/CheckboxField.tsx

@@ -1,8 +1,8 @@
 import { useField } from 'formik';
+import { ReactNode } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Checkbox } from '../checkbox/index.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 
 export interface CheckboxFieldProps {
 	name: string;
@@ -10,6 +10,7 @@ export interface CheckboxFieldProps {
 	required?: boolean;
 	className?: string;
 	id?: string;
+	description?: ReactNode;
 }
 
 export function CheckboxField({
@@ -18,24 +19,31 @@ export function CheckboxField({
 	className,
 	required,
 	id: providedId,
+	description,
 	...rest
 }: CheckboxFieldProps) {
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Box gap="md" className={className}>
-			<Checkbox
-				{...props}
-				checked={props.checked}
-				onCheckedChange={(v) => {
-					tools.setValue(!!v);
-				}}
-				id={id}
-				{...rest}
-			/>
-			{label && (
-				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
+		<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>
 			)}
-		</Box>
+		</Field>
 	);
 }

package/src/components/forms/EmojiField.tsx

@@ -1,19 +1,19 @@
 import { useField } from 'formik';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Button, ButtonProps } from '../button/Button.js';
 import { EmojiPicker } from '../emojiPicker/EmojiPicker.js';
 import { Icon } from '../icon/Icon.js';
 import { Popover } from '../popover/Popover.js';
 import cls from './EmojiField.module.css';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 
 export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
 	name: string;
 	label?: string;
 	required?: string;
 	className?: string;
+	description?: ReactNode;
 };
 
 export function EmojiField({
@@ -22,44 +22,61 @@ export function EmojiField({
 	className,
 	required,
 	id: providedId,
+	description,
 	...rest
 }: EmojiFieldProps) {
 	const [props, _, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Box gap="md" className={className}>
-			<Popover open={open} onOpenChange={setOpen}>
-				<Popover.Trigger
-					render={
-						<Button id={id} 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);
-								  }
-						}
+		<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>
+						}
 					/>
-				</Popover.Content>
-			</Popover>
-			{label && (
-				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
+					<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>
 			)}
-		</Box>
+		</Field>
 	);
 }