@bspk/ui 1.3.20 → 1.3.22

package/dist/components/DatePicker/DatePicker.js

@@ -5,8 +5,7 @@ import { format, startOfToday } from 'date-fns';
 import { useMemo, useState } from 'react';
 import { Button } from '../Button';
 import { Calendar, parseDate } from '../Calendar';
-import { useFieldInit } from '../Field';
-import { InputElement } from '../Input';
+import { Input } from '../Input';
 import { useFloating } from '../../hooks/useFloating';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
 /**
@@ -16,19 +15,15 @@ import { useOutsideClick } from '../../hooks/useOutsideClick';
  * For a more complete example with field usage, see the DatePickerField component.
  *
  * @example
- *     import { DatePicker } from '@bspk/ui/DatePicker';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
- *     import { useState } from 'react';
+ *     import { DatePicker } from '.';
  *
  *     () => {
  *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
  *             <div style={{ width: 320 }}>
- *                 <Field>
- *                     <FieldLabel>Date</FieldLabel>
- *                     <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
- *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 <Field controlId="date1" helperText="The date picker allows you to select a date." label="Date">
+ *                     <DatePicker id="date1" name="date1" onChange={setFieldDate} required value={fieldDate} />
  *                 </Field>
  *             </div>
  *         );
@@ -37,14 +32,7 @@ import { useOutsideClick } from '../../hooks/useOutsideClick';
  * @name DatePicker
  * @phase Stable
  */
-export function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Enter or choose date', }) {
-    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
-        idProp,
-        required,
-        disabled,
-        readOnly,
-        invalidProp,
-    });
+export function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid, required = false, size, id, 'aria-label': ariaLabel = 'Enter or choose date', 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }) {
     const [calendarVisible, setCalendarVisible] = useState(false);
     const { elements, floatingStyles } = useFloating({
         placement: 'bottom-start',
@@ -61,7 +49,7 @@ export function DatePicker({ value, onChange, disabled, readOnly, closeCalendarO
     const activeDate = useMemo(() => parseDate(value) || startOfToday(), [value]);
     return (_jsxs("div", { "data-bspk": "date-picker", ref: (node) => {
             elements.setReference(node);
-        }, children: [_jsx(InputElement, { "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled || undefined, id: id, invalid: invalid || undefined, name: name, onChange: onChange, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+        }, children: [_jsx(Input, { "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled || undefined, id: id, invalid: invalid || undefined, name: name, onChange: onChange, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
                     !readOnly && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: typeof value === 'string' ? value : '' }), calendarVisible && (_jsx("div", { "aria-label": "Choose Date", "aria-modal": "true", "data-bspk": "calendar-popup", ref: (node) => elements.setFloating(node), role: "dialog", style: { ...floatingStyles }, children: _jsx(Calendar, { focusTrap: true, id: calendarId, onChange: (next) => {
                         if (closeCalendarOnChange)
                             setCalendarVisible(false);

package/dist/components/DatePicker/DatePicker.js.map

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

package/dist/components/DatePicker/DatePickerExample.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DatePicker } from '.';
-import { Field, FieldLabel, FieldDescription } from '../Field';
+import { Field } from '../Field';
 export const DatePickerExample = {
     containerStyle: { width: 320, padding: 0 },
     defaultState: {
@@ -13,6 +13,6 @@ export const DatePickerExample = {
 };
 export const Usage = () => {
     const [fieldDate, setFieldDate] = useState();
-    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Date" }), _jsx(DatePicker, { name: "date1", onChange: setFieldDate, required: true, value: fieldDate }), _jsx(FieldDescription, { children: "The date picker allows you to select a date." })] }) }));
+    return (_jsx("div", { style: { width: 320 }, children: _jsx(Field, { controlId: "date1", helperText: "The date picker allows you to select a date.", label: "Date", children: _jsx(DatePicker, { id: "date1", name: "date1", onChange: setFieldDate, required: true, value: fieldDate }) }) }));
 };
 //# sourceMappingURL=DatePickerExample.js.map

package/dist/components/DatePicker/DatePickerExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAEhB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAC;IAErD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,uBAAkB,EAC7B,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,QAAC,KAAK,EAAE,SAAS,GAAI,EAC9E,KAAC,gBAAgB,+DAAgE,IAC7E,GACN,CACT,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAG3C,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAEhB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAC;IAErD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,KAAC,KAAK,IAAC,SAAS,EAAC,OAAO,EAAC,UAAU,EAAC,8CAA8C,EAAC,KAAK,EAAC,MAAM,YAC3F,KAAC,UAAU,IAAC,EAAE,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,QAAC,KAAK,EAAE,SAAS,GAAI,GACrF,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DatePickerField/DatePickerField.d.ts

@@ -1,15 +1,15 @@
 import { DatePickerProps } from '-/components/DatePicker';
-import { FormFieldControlProps } from '-/components/FormField';
-export type DatePickerFieldProps = FormFieldControlProps<DatePickerProps>;
+import { FieldControlProps } from '-/components/Field';
+export type DatePickerFieldProps = FieldControlProps<DatePickerProps>;
 /**
  * A field wrapper for the DatePicker component.
  *
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export declare function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: DatePickerFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }: DatePickerFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePickerField/DatePickerField.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DatePicker } from '../DatePicker';
-import { FormField } from '../FormField';
+import { Field, propsWithAria } from '../Field';
+import { useId } from '../../hooks/useId';
 /**
  * A field wrapper for the DatePicker component.
  *
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase Stable
+ * @phase UXReview
  *
  * @generated
  */
-export function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
-    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(DatePicker, { ...controlProps }) }));
+export function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, id: idProp, ...controlProps }) {
+    const id = useId(idProp);
+    return (_jsx(Field, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(DatePicker, { ...propsWithAria({ id, controlProps, errorMessage, helperText }) }) }));
 }
 //# sourceMappingURL=DatePickerField.js.map

package/dist/components/DatePickerField/DatePickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePickerField.js","sourceRoot":"","sources":["../../../src/components/DatePickerField/DatePickerField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAI1E;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACI;IACnB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,YAAY,GAAI,GACxB,CACf,CAAC;AACN,CAAC"}
+{"version":3,"file":"DatePickerField.js","sourceRoot":"","sources":["../../../src/components/DatePickerField/DatePickerField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,KAAK,EAAqB,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,EAAE,EAAE,MAAM,EACV,GAAG,YAAY,EACI;IACnB,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,aAAa,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,GAAI,GAC7E,CACX,CAAC;AACN,CAAC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -55,8 +55,7 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  * Also known as: Tray, Drawer, Flyout, Sheet
  *
  * @example
- *     import { Dialog } from '@bspk/ui/Dialog';
- *     import { Button } from '@bspk/ui/Button';
+ *     import { Dialog } from '-/components/Dialog';
  *
  *     () => {
  *         const [open, setOpen] = useState(false);
@@ -67,7 +66,7 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  *                 <Dialog onClose={() => setOpen(false)} open={open}>
  *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
  *                         <Flex align="center" justify="space-between">
- *                             <h4>Dialog Title</h4>
+ *                             <h1>Dialog Title</h1>
  *                             <Button
  *                                 icon={<SvgClose />}
  *                                 iconOnly

package/dist/components/Dialog/Dialog.js

@@ -14,8 +14,7 @@ import { useId } from '../../hooks/useId';
  * Also known as: Tray, Drawer, Flyout, Sheet
  *
  * @example
- *     import { Dialog } from '@bspk/ui/Dialog';
- *     import { Button } from '@bspk/ui/Button';
+ *     import { Dialog } from '.';
  *
  *     () => {
  *         const [open, setOpen] = useState(false);
@@ -26,7 +25,7 @@ import { useId } from '../../hooks/useId';
  *                 <Dialog onClose={() => setOpen(false)} open={open}>
  *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
  *                         <Flex align="center" justify="space-between">
- *                             <h4>Dialog Title</h4>
+ *                             <h1>Dialog Title</h1>
  *                             <Button
  *                                 icon={<SvgClose />}
  *                                 iconOnly

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,CAAC,CAAC,SAAS,IAAI,SAAS,oBACxB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,SAAS,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,CAAC,CAAC,SAAS,IAAI,SAAS,oBACxB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,SAAS,EAAE,CAAC,CAAC,SAAS,IAAI,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EACxB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Fab/Fab.d.ts

@@ -35,12 +35,15 @@ export type FabProps<As extends ElementType = ElementType> = Pick<ButtonProps<As
  * bottom right of a screen.
  *
  * @example
- *     import { SvgBolt } from '@bspk/icons/Bolt';
- *     import { Fab } from '@bspk/ui/Fab';
+ *     import { Fab } from '-/components/Fab';
  *
- *     <div style={{ width: '100%', height: 100 }}>
- *         <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
- *     </div>;
+ *     () => {
+ *         return (
+ *             <div style={{ width: '100%', height: 100 }}>
+ *                 <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+ *             </div>
+ *         );
+ *     };
  *
  * @name Fab
  * @phase Stable

package/dist/components/Fab/Fab.js

@@ -7,12 +7,15 @@ import { Tooltip } from '../Tooltip';
  * bottom right of a screen.
  *
  * @example
- *     import { SvgBolt } from '@bspk/icons/Bolt';
- *     import { Fab } from '@bspk/ui/Fab';
+ *     import { Fab } from '.';
  *
- *     <div style={{ width: '100%', height: 100 }}>
- *         <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
- *     </div>;
+ *     () => {
+ *         return (
+ *             <div style={{ width: '100%', height: 100 }}>
+ *                 <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+ *             </div>
+ *         );
+ *     };
  *
  * @name Fab
  * @phase Stable

package/dist/components/Fab/Fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAA+B,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAsCpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,GAAG,CAAuC,KAAsD;IAC5G,MAAM,EACF,YAAY,EAAE,SAAS,EACvB,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,UAAU,KACV,YAAY,gBACJ,SAAS,IAAI,KAAK,eACpB,KAAK,oBACC,SAAS,oBACT,SAAS,mBACV,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,gBAC9C,QAAQ,IAAI,SAAS,eACtB,IAAI,kBACD,OAAO,EACrB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;YACxB,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,mCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,iDAAsB,KAAK,GAAQ,IAChD,CACR,CAAC;IAEF,IAAI,OAAO,IAAI,QAAQ;QACnB,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}
+{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAA+B,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAsCpE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,GAAG,CAAuC,KAAsD;IAC5G,MAAM,EACF,YAAY,EAAE,SAAS,EACvB,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,UAAU,KACV,YAAY,gBACJ,SAAS,IAAI,KAAK,eACpB,KAAK,oBACC,SAAS,oBACT,SAAS,mBACV,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,gBAC9C,QAAQ,IAAI,SAAS,eACtB,IAAI,kBACD,OAAO,EACrB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;YACxB,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,mCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,iDAAsB,KAAK,GAAQ,IAChD,CACR,CAAC;IAEF,IAAI,OAAO,IAAI,QAAQ;QACnB,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}

package/dist/components/Fab/fab.css

@@ -85,6 +85,7 @@
 }
 [data-pseudo=focus] > [data-bspk=fab], [data-bspk=fab]:focus-visible {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-bspk=fab][data-round] {
   border-radius: var(--radius-full);

package/dist/components/Fab/fab.css.js

@@ -88,6 +88,7 @@ style.appendChild(document.createTextNode(`[data-bspk=fab] {
 }
 [data-pseudo=focus] > [data-bspk=fab], [data-bspk=fab]:focus-visible {
   outline: solid 2px var(--stroke-neutral-focus);
+  isolation: isolate;
 }
 [data-bspk=fab][data-round] {
   border-radius: var(--radius-full);

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

@@ -1,23 +1,40 @@
 import './field.scss';
-import { ElementType, ReactNode } from 'react';
-import { ElementProps } from '-/types/common';
-export type FieldProps<As extends ElementType = ElementType> = {
+import { ReactNode } from 'react';
+import { CommonProps } from '-/types/common';
+export type FieldControlProps<P extends Record<string, unknown>> = Omit<FieldProps, 'children' | 'controlId'> & Omit<P, keyof FieldProps>;
+export type FieldProps = CommonProps<'style'> & {
+    /** Displays an error message and marks the field as invalid. */
+    errorMessage?: string;
     /**
-     * The children of the form field. This should be a control such as DatePicker, Input, InputNumber, InputPhone,
-     * Password, Select, Textarea, or TimePicker.
+     * The label of the field.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * This text provides additional context or instructions for the field.
+     *
+     * If an errorMessage is present, the helperText will not be displayed.
+     */
+    helperText?: string;
+    /** The trailing element of the label. */
+    labelTrailing?: string;
+    /** Marks the field as required. */
+    required?: boolean;
+    /**
+     * The children of the field. This should be a control such as DatePicker, Input, InputNumber, InputPhone, Password,
+     * Select, Textarea, or TimePicker.
      *
      * @required
      */
     children: ReactNode;
     /**
-     * The element type to render the field as.
+     * The id attribute of the form control rendered in children (e.g., Input, Select, Textarea). Used to associate the
+     * label (htmlFor) with the control for accessibility. Must exactly match the control's id.
      *
-     * @default div
-     * @type ElementType
+     * @required
      */
-    as?: As;
-    /** The unique id for the field. */
-    id?: string;
+    controlId: string;
 };
 /**
  * Wrapper component for form controls.
@@ -27,25 +44,22 @@ export type FieldProps<As extends ElementType = ElementType> = {
  *
  * @example
  *     import { Input } from '@bspk/ui/Input';
- *     import { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
+ *     import { Field } from '@bspk/ui/Field';
  *
  *     () => {
  *         const [state, setState] = useState<string | undefined>(undefined);
- *         const [error, setError] = useState<string | undefined>(undefined);
  *
  *         return (
- *             <Field label="Example label">
- *                 <FieldLabel>Example label</FieldLabel>
+ *             <Field controlId="example-control-id" helperText="This is an example description." label="Example label">
  *                 <Input
  *                     aria-label="example aria-label"
+ *                     id="example-control-id"
  *                     name="example-text"
  *                     onChange={(next) => {
  *                         setState(next);
  *                     }}
  *                     value={state}
  *                 />
- *                 <FieldDescription>This is an example description.</FieldDescription>
- *                 {error && <FieldError>{error}</FieldError>}
  *             </Field>
  *         );
  *     };
@@ -53,5 +67,5 @@ export type FieldProps<As extends ElementType = ElementType> = {
  * @name Field
  * @phase Utility
  */
-export declare function Field<As extends ElementType = ElementType>({ children, as, id: idProp, ...props }: ElementProps<FieldProps<As>, As>): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ children, label, helperText, labelTrailing, errorMessage, required, controlId: id, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Field/Field.js

@@ -1,12 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './field.css.js';
-import { Children, isValidElement, useMemo, useState } from 'react';
-import { describedById, errorMessageId, fieldContext, labelledById } from './utils';
-import { randomString } from '../../utils/random';
-const isComponentName = (child, name) => {
-    const componentType = child.type;
-    return componentType.displayName === name || componentType.name === name;
-};
+import { labelledById, errorMessageId, describedById } from './utils';
+import { InlineAlert } from '../InlineAlert';
 /**
  * Wrapper component for form controls.
  *
@@ -15,25 +10,22 @@ const isComponentName = (child, name) => {
  *
  * @example
  *     import { Input } from '@bspk/ui/Input';
- *     import { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
+ *     import { Field } from '@bspk/ui/Field';
  *
  *     () => {
  *         const [state, setState] = useState<string | undefined>(undefined);
- *         const [error, setError] = useState<string | undefined>(undefined);
  *
  *         return (
- *             <Field label="Example label">
- *                 <FieldLabel>Example label</FieldLabel>
+ *             <Field controlId="example-control-id" helperText="This is an example description." label="Example label">
  *                 <Input
  *                     aria-label="example aria-label"
+ *                     id="example-control-id"
  *                     name="example-text"
  *                     onChange={(next) => {
  *                         setState(next);
  *                     }}
  *                     value={state}
  *                 />
- *                 <FieldDescription>This is an example description.</FieldDescription>
- *                 {error && <FieldError>{error}</FieldError>}
  *             </Field>
  *         );
  *     };
@@ -41,29 +33,7 @@ const isComponentName = (child, name) => {
  * @name Field
  * @phase Utility
  */
-export function Field({ children, as, id: idProp, ...props }) {
-    const id = useMemo(() => idProp || `field-${randomString(8)}`, [idProp]);
-    const childContext = useMemo(() => {
-        const next = {};
-        Children.forEach(children, (child) => {
-            if (!isValidElement(child) || typeof child.type === 'string' || !child.props.children)
-                return;
-            if (isComponentName(child, 'FieldError'))
-                next.ariaErrorMessage = errorMessageId(id);
-            else if (isComponentName(child, 'FieldLabel'))
-                next.ariaLabelledBy = labelledById(id);
-            else if (isComponentName(child, 'FieldDescription'))
-                next.ariaDescribedBy = describedById(id);
-        });
-        return next;
-    }, [children, id]);
-    const [contextState, setContext] = useState({});
-    const As = as || 'div';
-    return (_jsx(fieldContext.Provider, { value: {
-            ...childContext,
-            ...contextState,
-            id,
-            setContext,
-        }, children: _jsx(As, { ...props, "data-bspk-utility": "field", id: id, role: "group", children: children }) }));
+export function Field({ children, label, helperText, labelTrailing, errorMessage, required, controlId: id, ...props }) {
+    return (_jsxs("div", { ...props, "data-bspk-utility": "field", role: "group", children: [_jsxs("label", { "data-field-label": true, htmlFor: id, id: labelledById(id), children: [_jsx("span", { children: label }), required && _jsx("span", { "data-required": true, children: ' (Required)' }), labelTrailing && (_jsx("span", { "aria-hidden": true, "data-trailing": true, children: labelTrailing }))] }), children, errorMessage ? (_jsx(InlineAlert, { id: errorMessageId(id), label: errorMessage, owner: "field-error", variant: "error" })) : (helperText && (_jsx("p", { "data-field-description": true, id: describedById(id), children: helperText })))] }));
 }
 //# sourceMappingURL=Field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,QAAQ,EAAe,cAAc,EAAa,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAgB,YAAY,EAAE,MAAM,SAAS,CAAC;AAElG,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAqB9C,MAAM,eAAe,GAAG,CACpB,KAAqG,EACrG,IAAY,EACd,EAAE;IACA,MAAM,aAAa,GAAG,KAAK,CAAC,IAA+C,CAAC;IAC5E,OAAO,aAAa,CAAC,WAAW,KAAK,IAAI,IAAI,aAAa,CAAC,IAAI,KAAK,IAAI,CAAC;AAC7E,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,KAAK,CAAuC,EACxD,QAAQ,EACR,EAAE,EACF,EAAE,EAAE,MAAM,EACV,GAAG,KAAK,EACuB;IAC/B,MAAM,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,IAAI,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,IAAI,GAAkF,EAAE,CAAC;QAC/F,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACjC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ;gBAAE,OAAO;YAE9F,IAAI,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;gBAAE,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;iBAChF,IAAI,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;gBAAE,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC,CAAC;iBACjF,IAAI,eAAe,CAAC,KAAK,EAAE,kBAAkB,CAAC;gBAAE,IAAI,CAAC,eAAe,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;QAClG,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC;IAEnB,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA6C,EAAE,CAAC,CAAC;IAE5F,MAAM,EAAE,GAAG,EAAE,IAAI,KAAK,CAAC;IAEvB,OAAO,CACH,KAAC,YAAY,CAAC,QAAQ,IAClB,KAAK,EAAE;YACH,GAAG,YAAY;YACf,GAAG,YAAY;YACf,EAAE;YACF,UAAU;SACb,YAED,KAAC,EAAE,OAAK,KAAK,uBAAoB,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,YACxD,QAAQ,GACR,GACe,CAC3B,CAAC;AACN,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAyCvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,KAAK,CAAC,EAClB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EAAE,EAAE,EACb,GAAG,KAAK,EACC;IACT,OAAO,CACH,kBAAS,KAAK,uBAAoB,OAAO,EAAC,IAAI,EAAC,OAAO,aAClD,2CAAwB,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,aACrD,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,gDAAqB,aAAa,GAAQ,EACtD,aAAa,IAAI,CACd,qEACK,aAAa,GACX,CACV,IACG,EACP,QAAQ,EACR,YAAY,CAAC,CAAC,CAAC,CACZ,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,GAAG,CACnG,CAAC,CAAC,CAAC,CACA,UAAU,IAAI,CACV,4CAA0B,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,YAC1C,UAAU,GACX,CACP,CACJ,IACC,CACT,CAAC;AACN,CAAC"}

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

@@ -3,3 +3,4 @@ import { ComponentExample } from '-/utils/demo';
 export declare const FieldExample: ComponentExample<FieldProps & {
     value?: string;
 }>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Field/FieldExample.js

@@ -1,10 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field, FieldDescription, FieldError, FieldLabel } from './';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Field } from './';
 import { Input } from '../Input';
 import { randomString } from '../../utils/random';
 export const FieldExample = {
     render: ({ props, setState }) => {
-        return (_jsxs(Field, { ...props, children: [_jsx(FieldLabel, { children: "Example label" }), _jsx(Input, { name: `example-${randomString(6)}`, onChange: (next) => setState({ value: next }), value: props.value }), _jsx(FieldDescription, { children: "This is an example description." }), _jsx(FieldError, { children: "This is an error message." })] }));
+        return (_jsx(Field, { ...props, errorMessage: "This is an error message.", helperText: "This is an example description.", label: "Example label", children: _jsx(Input, { id: props.controlId, name: `example-${randomString(6)}`, onChange: (next) => setState({ value: next }), value: props.value }) }));
     },
 };
+export const Usage = () => {
+    const [state, setState] = useState(undefined);
+    return (_jsx(Field, { controlId: "example-control-id", helperText: "This is an example description.", label: "Example label", children: _jsx(Input, { "aria-label": "example aria-label", id: "example-control-id", name: "example-text", onChange: (next) => {
+                setState(next);
+            }, value: state }) }));
+};
 //# sourceMappingURL=FieldExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldExample.js","sourceRoot":"","sources":["../../../src/components/Field/FieldExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAc,MAAM,IAAI,CAAC;AACjF,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAsD;IAC3E,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,OAAO,CACH,MAAC,KAAK,OAAK,KAAK,aACZ,KAAC,UAAU,gCAA2B,EACtC,KAAC,KAAK,IACF,IAAI,EAAE,WAAW,YAAY,CAAC,CAAC,CAAC,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACrD,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,EACF,KAAC,gBAAgB,kDAAmD,EACpE,KAAC,UAAU,4CAAuC,IAC9C,CACX,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"FieldExample.js","sourceRoot":"","sources":["../../../src/components/Field/FieldExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,KAAK,EAAc,MAAM,IAAI,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,YAAY,GAAsD;IAC3E,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,OAAO,CACH,KAAC,KAAK,OACE,KAAK,EACT,YAAY,EAAC,2BAA2B,EACxC,UAAU,EAAC,iCAAiC,EAC5C,KAAK,EAAC,eAAe,YAErB,KAAC,KAAK,IACF,EAAE,EAAE,KAAK,CAAC,SAAS,EACnB,IAAI,EAAE,WAAW,YAAY,CAAC,CAAC,CAAC,EAAE,EAClC,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACrD,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,GACE,CACX,CAAC;IACN,CAAC;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,OAAO,CACH,KAAC,KAAK,IAAC,SAAS,EAAC,oBAAoB,EAAC,UAAU,EAAC,iCAAiC,EAAC,KAAK,EAAC,eAAe,YACpG,KAAC,KAAK,kBACS,oBAAoB,EAC/B,EAAE,EAAC,oBAAoB,EACvB,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE;gBACf,QAAQ,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC,EACD,KAAK,EAAE,KAAK,GACd,GACE,CACX,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,40 @@
+import './field.scss';
+import { FieldProps } from './Field';
+/**
+ * Wrapper component for form controls.
+ *
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
+ * TimePicker.
+ *
+ * @example
+ *     import { Input } from '@bspk/ui/Input';
+ *     import { Fieldset } from '@bspk/ui/Field';
+ *
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *         const [error, setError] = useState<string | undefined>(undefined);
+ *
+ *         return (
+ *             <Fieldset
+ *                 label="Example label"
+ *                 helperText="This is an example description."
+ *                 errorMessage={error}
+ *                 required
+ *             >
+ *                 <Input
+ *                     aria-label="example aria-label"
+ *                     name="example-text"
+ *                     onChange={(next) => {
+ *                         setState(next);
+ *                     }}
+ *                     value={state}
+ *                 />
+ *             </Fieldset>
+ *         );
+ *     };
+ *
+ * @name Fieldset
+ * @phase Utility
+ */
+export declare function Fieldset({ children, label, helperText, labelTrailing, errorMessage, required, controlId: id, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Field/Fieldset.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './field.css.js';
+import { labelledById, errorMessageId, describedById } from './utils';
+import { InlineAlert } from '../InlineAlert';
+/**
+ * Wrapper component for form controls.
+ *
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
+ * TimePicker.
+ *
+ * @example
+ *     import { Input } from '@bspk/ui/Input';
+ *     import { Fieldset } from '@bspk/ui/Field';
+ *
+ *     () => {
+ *         const [state, setState] = useState<string | undefined>(undefined);
+ *         const [error, setError] = useState<string | undefined>(undefined);
+ *
+ *         return (
+ *             <Fieldset
+ *                 label="Example label"
+ *                 helperText="This is an example description."
+ *                 errorMessage={error}
+ *                 required
+ *             >
+ *                 <Input
+ *                     aria-label="example aria-label"
+ *                     name="example-text"
+ *                     onChange={(next) => {
+ *                         setState(next);
+ *                     }}
+ *                     value={state}
+ *                 />
+ *             </Fieldset>
+ *         );
+ *     };
+ *
+ * @name Fieldset
+ * @phase Utility
+ */
+export function Fieldset({ children, label, helperText, labelTrailing, errorMessage, required, controlId: id, ...props }) {
+    return (_jsxs("fieldset", { ...props, "data-bspk-utility": "field", role: "group", children: [_jsxs("legend", { "data-field-label": true, id: labelledById(id), children: [_jsx("span", { children: label }), required && _jsx("span", { "data-required": true, children: ' (Required)' }), labelTrailing && (_jsx("span", { "aria-hidden": true, "data-trailing": true, children: labelTrailing }))] }), children, errorMessage ? (_jsx(InlineAlert, { id: errorMessageId(id), label: errorMessage, owner: "field-error", variant: "error" })) : (helperText && (_jsx("p", { "data-field-description": true, id: describedById(id), children: helperText })))] }));
+}
+//# sourceMappingURL=Fieldset.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/components/Field/Fieldset.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EAAE,EAAE,EACb,GAAG,KAAK,EACC;IACT,OAAO,CACH,uBAAc,KAAK,uBAAoB,OAAO,EAAC,IAAI,EAAC,OAAO,aACvD,4CAAyB,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,aACzC,yBAAO,KAAK,GAAQ,EACnB,QAAQ,IAAI,gDAAqB,aAAa,GAAQ,EACtD,aAAa,IAAI,CACd,qEACK,aAAa,GACX,CACV,IACI,EACR,QAAQ,EACR,YAAY,CAAC,CAAC,CAAC,CACZ,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,GAAG,CACnG,CAAC,CAAC,CAAC,CACA,UAAU,IAAI,CACV,4CAA0B,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,YAC1C,UAAU,GACX,CACP,CACJ,IACM,CACd,CAAC;AACN,CAAC"}

package/dist/components/Field/field.css

@@ -7,28 +7,26 @@
   max-width: 100%;
   min-inline-size: unset;
 }
-
-[data-bspk=field-label] {
+[data-bspk-utility=field] [data-field-label] {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--spacing-sizing-01);
 }
-[data-bspk=field-label] span {
+[data-bspk-utility=field] [data-field-label] span {
   font: var(--labels-small);
   color: var(--foreground-neutral-on-surface);
 }
-[data-bspk=field-label] span[data-required] {
+[data-bspk-utility=field] [data-field-label] span[data-required] {
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=field-label] span[data-trailing] {
+[data-bspk-utility=field] [data-field-label] span[data-trailing] {
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-02);
   margin-left: auto;
 }
-
-[data-bspk=field-description] {
+[data-bspk-utility=field] [data-field-description] {
   font: var(--body-small);
   color: var(--foreground-neutral-on-surface-variant-01);
   margin: 0;