@bspk/ui 1.3.3 → 1.3.5

package/dist/components/Fab/Fab.js

@@ -10,7 +10,7 @@ import { Tooltip } from '../Tooltip';
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
  *     }
  *

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;AAoCpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,GAAG,CAAoC,KAAsD;IACzG,MAAM,EACF,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,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,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,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,aAEA,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;AAoCpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,GAAG,CAAuC,KAAsD;IAC5G,MAAM,EACF,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,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,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,gBACb,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,aAEA,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/Field/Field.d.ts

@@ -0,0 +1,58 @@
+import './field.scss';
+import { ElementType, ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
+export type FieldProps<As extends ElementType = ElementType> = {
+    /**
+     * The children of the form 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.
+     *
+     * @default div
+     * @type ElementType
+     */
+    as?: As;
+    /** The unique id for the field. */
+    id?: string;
+};
+/**
+ * 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 { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
+ *
+ *     function Example() {
+ *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *         const [error, setError] = React.useState<string | undefined>(undefined);
+ *
+ *         return (
+ *             <Field label="Example label">
+ *                 <FieldLabel>Example label</FieldLabel>
+ *                 <Input
+ *                     aria-label="example aria-label"
+ *                     name="example-text"
+ *                     onChange={(next) => {
+ *                         setState(next);
+ *                     }}
+ *                     value={state}
+ *                     {...fieldProps}
+ *                 />
+ *                 <FieldDescription>This is an example description.</FieldDescription>
+ *                 {error && <FieldError>{error}</FieldError>}
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @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;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Field/Field.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } 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;
+};
+/**
+ * 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 { Field, FieldLabel, FieldDescription, FieldError } from '@bspk/ui/Field';
+ *
+ *     function Example() {
+ *         const [state, setState] = React.useState<string | undefined>(undefined);
+ *         const [error, setError] = React.useState<string | undefined>(undefined);
+ *
+ *         return (
+ *             <Field label="Example label">
+ *                 <FieldLabel>Example label</FieldLabel>
+ *                 <Input
+ *                     aria-label="example aria-label"
+ *                     name="example-text"
+ *                     onChange={(next) => {
+ *                         setState(next);
+ *                     }}
+ *                     value={state}
+ *                     {...fieldProps}
+ *                 />
+ *                 <FieldDescription>This is an example description.</FieldDescription>
+ *                 {error && <FieldError>{error}</FieldError>}
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @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 }) }));
+}
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;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"}

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

@@ -0,0 +1,7 @@
+declare function FieldDescription({ children }: {
+    children?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+declare namespace FieldDescription {
+    var displayName: string;
+}
+export { FieldDescription };

package/dist/components/Field/FieldDescription.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFieldContext, describedById } from './utils';
+function FieldDescription({ children }) {
+    const { id } = useFieldContext();
+    return children ? (_jsx("p", { "data-bspk": "field-description", id: describedById(id), children: children })) : null;
+}
+FieldDescription.displayName = 'FieldDescription';
+export { FieldDescription };
+//# sourceMappingURL=FieldDescription.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldDescription.js","sourceRoot":"","sources":["../../../src/components/Field/FieldDescription.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEzD,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAyB;IACzD,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,yBAAa,mBAAmB,EAAC,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,YACjD,QAAQ,GACT,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

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

@@ -0,0 +1,5 @@
+export type FieldErrorProps = {
+    /** The error message text. */
+    children?: string;
+};
+export declare function FieldError({ children }: FieldErrorProps): "" | import("react/jsx-runtime").JSX.Element | undefined;

package/dist/components/Field/FieldError.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { errorMessageId, useFieldContext } from './utils';
+import { InlineAlert } from '../InlineAlert';
+export function FieldError({ children }) {
+    const { id } = useFieldContext();
+    return (children && (_jsx(InlineAlert, { id: errorMessageId(id), owner: "field-error", variant: "error", children: children })));
+}
+//# sourceMappingURL=FieldError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","sourceRoot":"","sources":["../../../src/components/Field/FieldError.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAOvD,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAmB;IACpD,MAAM,EAAE,EAAE,EAAE,GAAG,eAAe,EAAE,CAAC;IAEjC,OAAO,CACH,QAAQ,IAAI,CACR,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,OAAO,YACnE,QAAQ,GACC,CACjB,CACJ,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,5 @@
+import { FieldProps } from './';
+import { ComponentExample } from '-/utils/demo';
+export declare const FieldExample: ComponentExample<FieldProps & {
+    value?: string;
+}>;

package/dist/components/Field/FieldExample.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Field, FieldDescription, FieldError, FieldLabel } 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." })] }));
+    },
+};
+//# sourceMappingURL=FieldExample.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import { ElementType } from 'react';
+import { FieldContext } from './utils';
+import { ElementProps } from '-/types/common';
+export type FieldLabelProps<As extends ElementType = ElementType> = Pick<FieldContext, 'labelTrailing' | 'required'> & {
+    /** The label text. */
+    children: string;
+    /**
+     * The element type to render as.
+     *
+     * @default label
+     * @type ElementType
+     */
+    as?: As;
+};
+export declare function FieldLabel<As extends ElementType = ElementType>({ children, labelTrailing, as, ...props }: ElementProps<FieldLabelProps<As>, As>): import("react/jsx-runtime").JSX.Element;

package/dist/components/Field/FieldLabel.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useFieldContext, labelledById } from './utils';
+export function FieldLabel({ children, labelTrailing, as, ...props }) {
+    const As = as || 'label';
+    const { required, id, htmlFor, ...context } = useFieldContext();
+    return (_jsxs(As, { "data-bspk": "field-label", htmlFor: As === 'label' ? htmlFor : undefined, id: labelledById(id), ...props, children: [_jsx("span", { children: children }), required && _jsx("span", { "data-required": true, children: ' (Required)' }), (labelTrailing || context.labelTrailing) && (_jsx("span", { "aria-hidden": true, "data-trailing": true, children: labelTrailing || context.labelTrailing }))] }));
+}
+//# sourceMappingURL=FieldLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../src/components/Field/FieldLabel.tsx"],"names":[],"mappings":";AACA,OAAO,EAAgB,eAAe,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAetE,MAAM,UAAU,UAAU,CAAuC,EAC7D,QAAQ,EACR,aAAa,EACb,EAAE,EACF,GAAG,KAAK,EAC4B;IACpC,MAAM,EAAE,GAAG,EAAE,IAAI,OAAO,CAAC;IAEzB,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;IAEhE,OAAO,CACH,MAAC,EAAE,iBAAW,aAAa,EAAC,OAAO,EAAE,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,EAAE,EAAE,YAAY,CAAC,EAAE,CAAC,KAAM,KAAK,aACtG,yBAAO,QAAQ,GAAQ,EACtB,QAAQ,IAAI,gDAAqB,aAAa,GAAQ,EACtD,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,CAAC,IAAI,CACzC,qEACK,aAAa,IAAI,OAAO,CAAC,aAAa,GACpC,CACV,IACA,CACR,CAAC;AACN,CAAC"}

package/dist/components/Field/field.css

@@ -0,0 +1,36 @@
+[data-bspk-utility=field] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+  border: none;
+}
+
+[data-bspk=field-label] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=field-label] span {
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=field-label] span[data-required] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=field-label] span[data-trailing] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-02);
+  margin-left: auto;
+}
+
+[data-bspk=field-description] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  margin: 0;
+  padding: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Field/field.css.js

@@ -0,0 +1,41 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk-utility=field] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sizing-01);
+  border: none;
+}
+
+[data-bspk=field-label] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sizing-01);
+}
+[data-bspk=field-label] span {
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface);
+}
+[data-bspk=field-label] span[data-required] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+}
+[data-bspk=field-label] span[data-trailing] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-02);
+  margin-left: auto;
+}
+
+[data-bspk=field-description] {
+  font: var(--body-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  margin: 0;
+  padding: 0;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

@@ -0,0 +1,5 @@
+export * from './Field';
+export * from './FieldLabel';
+export * from './FieldDescription';
+export * from './FieldError';
+export * from './utils';

package/dist/components/Field/index.js

@@ -0,0 +1,6 @@
+export * from './Field';
+export * from './FieldLabel';
+export * from './FieldDescription';
+export * from './FieldError';
+export * from './utils';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Field/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,39 @@
+import { CommonProps } from '-/types/common';
+export declare const errorMessageId: (id: string) => string;
+export declare const labelledById: (id: string) => string;
+export declare const describedById: (id: string) => string;
+/** The props that are provided via context to all Field subcomponents. */
+export type FieldContextProps = CommonProps<'required'> & {
+    /** The aria-describedby attribute value that should be applied to the field input element. */
+    ariaDescribedBy?: string;
+    /** The aria-errormessage attribute value that should be applied to the field input element. */
+    ariaErrorMessage?: string;
+    /** Text that appears after the label, but before the input (e.g. "optional"). */
+    labelTrailing?: string;
+    /** The aria-labelledby attribute value that should be applied to the field input element. */
+    ariaLabelledBy?: string;
+    /** The htmlFor attribute value that should be applied to the field label element. */
+    htmlFor?: string;
+    /** The id of the field. */
+    id: string;
+};
+export type FieldContext = FieldContextProps & {
+    setContext: (next: Pick<FieldContextProps, 'htmlFor' | 'required'>) => void;
+};
+export declare const fieldContext: import("react").Context<FieldContext | null>;
+export declare function useFieldContext(): FieldContext;
+/**
+ * Initializes field-related attributes and state for a form control component.
+ *
+ * Creates id if not provided, manages invalid state, and syncs with Field context.
+ */
+export declare function useFieldInit({ idProp, required, disabled, readOnly, invalidProp, }: {
+    idProp: string | undefined;
+    required: boolean | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    invalidProp: boolean | undefined;
+}): Pick<FieldContext, 'ariaDescribedBy' | 'ariaErrorMessage'> & {
+    invalid: boolean;
+    id: string;
+};

package/dist/components/Field/utils.js

@@ -0,0 +1,35 @@
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { useId } from '../../hooks/useId';
+export const errorMessageId = (id) => `${id}-field-error`;
+export const labelledById = (id) => `${id}-label`;
+export const describedById = (id) => `${id}-description`;
+export const fieldContext = createContext(null);
+export function useFieldContext() {
+    return (useContext(fieldContext) || {
+        id: undefined,
+        setContext: () => { },
+    });
+}
+/**
+ * Initializes field-related attributes and state for a form control component.
+ *
+ * Creates id if not provided, manages invalid state, and syncs with Field context.
+ */
+export function useFieldInit({ idProp, required, disabled, readOnly, invalidProp, }) {
+    const context = useContext(fieldContext);
+    const controlId = useId(idProp || context?.htmlFor);
+    const invalid = useMemo(() => !disabled && !readOnly && (invalidProp || !!context?.ariaErrorMessage), [disabled, readOnly, invalidProp, context?.ariaErrorMessage]);
+    useEffect(() => {
+        if (!context)
+            return;
+        if (controlId !== context?.htmlFor || !!required !== !!context?.required) {
+            context.setContext({ htmlFor: controlId, required: required });
+        }
+    }, [context, controlId, required]);
+    return {
+        ...(context || {}),
+        invalid,
+        id: controlId,
+    };
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Field/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGtC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC;AAClE,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC;AAC1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC;AAsBjE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAsB,IAAI,CAAC,CAAC;AAErE,MAAM,UAAU,eAAe;IAC3B,OAAO,CACH,UAAU,CAAC,YAAY,CAAC,IAAI;QACxB,EAAE,EAAE,SAA8B;QAClC,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;KACvB,CACJ,CAAC;AACN,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAAC,EACzB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,GAOd;IACG,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,IAAI,OAAO,EAAE,OAAO,CAAC,CAAC;IAEpD,MAAM,OAAO,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,OAAO,EAAE,gBAAgB,CAAC,EAC5E,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAC/D,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,IAAI,SAAS,KAAK,OAAO,EAAE,OAAO,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;YACvE,OAAO,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;QACnE,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnC,OAAO;QACH,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC;QAClB,OAAO;QACP,EAAE,EAAE,SAAS;KAChB,CAAC;AACN,CAAC"}

package/dist/components/FormField/FormField.d.ts

@@ -1,8 +1,8 @@
-import './form-field.scss';
-import { CommonProps, ElementProps, FormFieldControlProps } from '-/types/common';
-export type FormFieldWrapProps<T extends Record<string, unknown>> = Omit<FormFieldProps, keyof T | 'children'> & Omit<T, 'aria-describedby' | 'aria-errormessage'>;
-export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
-    /** The error message to display when the field is invalid. */
+import { ElementType, ReactNode } from 'react';
+import { CommonProps } from '-/types/common';
+export type FormFieldControlProps<P extends Record<string, unknown>> = Omit<FormFieldProps, 'children'> & Omit<P, keyof FormFieldProps>;
+export type FormFieldProps<As extends ElementType = ElementType> = CommonProps<'style'> & {
+    /** Displays an error message and marks the field as invalid. */
     errorMessage?: string;
     /**
      * The label of the field.
@@ -10,36 +10,52 @@ export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
      * @required
      */
     label: string;
-    /** The id of the control. */
-    controlId: string;
     /**
-     * The children of the form field. This should be a control such as TextInput, Select, DateInput, or TimeInput.
+     * The children of the form field. This should at least contain a FieldLabel component and a control such as
+     * DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or TimePicker.
+     *
+     * Other components such as FieldDescription and FieldError can also be included.
      *
-     * @type (childProps: FormFieldControlProps) => JSX.Element
      * @required
      */
-    children: (childProps: FormFieldControlProps) => JSX.Element;
-    /** The helperText of the field. */
+    children: ReactNode;
+    /**
+     * 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?: React.ReactNode;
+    labelTrailing?: string;
+    /** Marks the field as required. */
+    required?: boolean;
+    /**
+     * The element type to render as.
+     *
+     * With grouped fields, this is typically set to "fieldset".
+     *
+     * @default div
+     * @type ElementType
+     */
+    as?: As;
 };
 /**
  * Wrapper component for form controls.
  *
- * Children should be one of the following: TextInput, Select, DateInput or TimeInput.
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
+ * TimePicker.
  *
  * @example
- *     import { TextInput } from '@bspk/ui/TextInput';
+ *     import { Input } from '@bspk/ui/Input';
  *     import { FormField } from '@bspk/ui/FormField';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [state, setState] = React.useState<string | undefined>(undefined);
  *         return (
  *             <FormField controlId="Example controlId" label="Example label">
  *                 {(fieldProps) => {
  *                     return (
- *                         <TextInput
+ *                         <Input
  *                             aria-label="example aria-label"
  *                             name="example-text"
  *                             onChange={(next) => {
@@ -57,5 +73,5 @@ export type FormFieldProps = CommonProps<'invalid' | 'required'> & {
  * @name FormField
  * @phase Utility
  */
-export declare function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, ...props }: ElementProps<FormFieldProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
+export declare function FormField({ label, errorMessage, helperText, children, labelTrailing, required, as, style, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FormField/FormField.js

@@ -1,23 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './form-field.css.js';
-import { InlineAlert } from '../InlineAlert';
-import { Txt } from '../Txt';
+import { Field, FieldLabel, FieldDescription, FieldError } from '../Field';
 /**
  * Wrapper component for form controls.
  *
- * Children should be one of the following: TextInput, Select, DateInput or TimeInput.
+ * Children should be one of the following: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
+ * TimePicker.
  *
  * @example
- *     import { TextInput } from '@bspk/ui/TextInput';
+ *     import { Input } from '@bspk/ui/Input';
  *     import { FormField } from '@bspk/ui/FormField';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [state, setState] = React.useState<string | undefined>(undefined);
  *         return (
  *             <FormField controlId="Example controlId" label="Example label">
  *                 {(fieldProps) => {
  *                     return (
- *                         <TextInput
+ *                         <Input
  *                             aria-label="example aria-label"
  *                             name="example-text"
  *                             onChange={(next) => {
@@ -35,16 +34,9 @@ import { Txt } from '../Txt';
  * @name FormField
  * @phase Utility
  */
-export function FormField({ label, invalid, errorMessage: errorMessageProp, helperText: helperTextProp, children, labelTrailing, controlId, required, ...props }) {
-    const errorMessage = invalid && errorMessageProp ? errorMessageProp : undefined;
-    const errorMessageId = errorMessage ? `${controlId}-error-message` : undefined;
-    const helperText = !errorMessage && helperTextProp ? helperTextProp : undefined;
-    const helperTextId = !errorMessage && helperText ? `${controlId}-helper-text` : undefined;
-    if (typeof children !== 'function')
-        return null;
-    return (_jsxs("div", { ...props, "data-bspk-utility": "form-field", "data-invalid": invalid || undefined, children: [_jsxs("header", { children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
-                'aria-describedby': helperTextId,
-                'aria-errormessage': errorMessageId,
-            }), errorMessage && (_jsx(InlineAlert, { id: errorMessageId, variant: "error", children: errorMessage })), helperText && (_jsx(Txt, { id: helperTextId, variant: "body-small", children: helperText }))] }));
+export function FormField({ label, errorMessage, helperText, children, labelTrailing, required, as, style, }) {
+    const fieldAs = as || 'div';
+    const labelAs = fieldAs === 'fieldset' ? 'legend' : undefined;
+    return (_jsxs(Field, { as: fieldAs, style: style, children: [_jsx(FieldLabel, { as: labelAs, labelTrailing: labelTrailing, required: required, children: label }), children, !errorMessage && helperText && _jsx(FieldDescription, { children: helperText }), _jsx(FieldError, { children: errorMessage })] }));
 }
 //# sourceMappingURL=FormField.js.map

package/dist/components/FormField/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AA+BvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,OAAO,EACP,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EAAE,cAAc,EAC1B,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAC0B;IAClC,MAAM,YAAY,GAAG,OAAO,IAAI,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,cAAc,GAAG,YAAY,CAAC,CAAC,CAAC,GAAG,SAAS,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/E,MAAM,UAAU,GAAG,CAAC,YAAY,IAAI,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAChF,MAAM,YAAY,GAAG,CAAC,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,SAAS,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAE1F,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,kBAAS,KAAK,uBAAoB,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC7E,6BACI,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AA6CrF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,EAAE,EACF,KAAK,GACQ;IACb,MAAM,OAAO,GAAG,EAAE,IAAI,KAAK,CAAC;IAE5B,MAAM,OAAO,GAAG,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,OAAO,CACH,MAAC,KAAK,IAAC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,aAC5B,KAAC,UAAU,IAAC,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,YACpE,KAAK,GACG,EACZ,QAAQ,EACR,CAAC,YAAY,IAAI,UAAU,IAAI,KAAC,gBAAgB,cAAE,UAAU,GAAoB,EACjF,KAAC,UAAU,cAAE,YAAY,GAAc,IACnC,CACX,CAAC;AACN,CAAC"}

package/dist/components/FormField/FormFieldExample.d.ts

@@ -1,4 +1,10 @@
-import { FormFieldWrapProps } from './FormField';
-import { TextInputProps } from '-/components/TextInput';
-import { ComponentExample } from '-/utils/demo';
-export declare const FormFieldExample: ComponentExample<FormFieldWrapProps<TextInputProps>>;
+import { FormFieldProps } from '.';
+import { FieldControlProps } from '-/types/common';
+import { ComponentExample, Preset, Syntax } from '-/utils/demo';
+type ExampleProps = Partial<FieldControlProps & FormFieldProps>;
+export declare const presets: Preset<Partial<ExampleProps>>[];
+export declare const FormFieldExample: ComponentExample<ExampleProps>;
+export declare function FormFieldExampleRender({ ...props }: ExampleProps & {
+    syntax?: Syntax;
+}): import("react/jsx-runtime").JSX.Element;
+export {};