@bspk/ui 1.3.20 → 1.3.22

package/dist/components/Field/FieldLabel.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFieldContext, labelledById } from './utils';
-/**
- * FieldLabel component displays a label associated with a form field.
- *
- * @name FieldLabel
- * @parent Field
- */
-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

@@ -1 +0,0 @@
-{"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;;;;;GAKG;AACH,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/FormField/FormField.d.ts

@@ -1,66 +0,0 @@
-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.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * 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.
-     *
-     * @required
-     */
-    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?: 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: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
- * TimePicker.
- *
- * @example
- *     import { Input } from '@bspk/ui/Input';
- *     import { FormField } from '@bspk/ui/FormField';
- *
- *     () => {
- *         const [state, setState] = useState<string | undefined>(undefined);
- *
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 <Input name="example-text" onChange={(next) => setState(next)} value={state} />
- *             </FormField>
- *         );
- *     };
- *
- * @name FormField
- * @phase Utility
- */
-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,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Field, FieldLabel, FieldDescription, FieldError } 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 { FormField } from '@bspk/ui/FormField';
- *
- *     () => {
- *         const [state, setState] = useState<string | undefined>(undefined);
- *
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 <Input name="example-text" onChange={(next) => setState(next)} value={state} />
- *             </FormField>
- *         );
- *     };
- *
- * @name FormField
- * @phase Utility
- */
-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 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;;GAsBG;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,9 +0,0 @@
-import { FormFieldProps } from '.';
-import { FieldControlProps } from '-/types/common';
-import { ComponentExample, Preset, Syntax } from '-/utils/demo';
-export 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;

package/dist/components/FormField/FormFieldExample.js

@@ -1,99 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { FormField } from '.';
-import { Button } from '../Button';
-import { CheckboxGroup } from '../CheckboxGroup';
-import { DatePicker } from '../DatePicker';
-import { Input } from '../Input';
-import { InputNumber } from '../InputNumber';
-import { InputPhone } from '../InputPhone';
-import { Password } from '../Password';
-import { RadioGroup } from '../RadioGroup';
-import { Select } from '../Select';
-import { SwitchOption } from '../SwitchOption';
-import { Textarea } from '../Textarea';
-import { TimePicker } from '../TimePicker';
-export const presets = [
-    {
-        label: 'Control Disabled',
-        propState: { disabled: true },
-    },
-];
-export const FormFieldExample = {
-    defaultState: {},
-    disableProps: [],
-    presets: presets,
-    render: ({ props, Component }) => (_jsx(Component, { ...props, children: _jsx(Input, { name: "input", onChange: () => { }, placeholder: "Example input", value: "" }) })),
-    sections: [
-        {
-            title: 'Form Field Example',
-            content: ({ Syntax: syntax, props }) => (_jsxs(_Fragment, { children: [_jsx("p", { children: "This example demonstrates the FormField component wrapping various form controls including CheckboxGroup, RadioGroup, DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, and TimePicker. It showcases how to manage state and handle form submissions." }), _jsxs("p", { children: ["All the controls have a HTML input element inside of them so they will work with form submissions natively. You can see the raw submitted", ' ', _jsx("a", { href: "https://developer.mozilla.org/en-US/docs/Web/API/FormData", children: "FormData" }), " at the bottom after clicking the Submit button."] }), _jsx(FormFieldExampleRender, { ...props, syntax: syntax })] })),
-            location: 'afterDemo',
-        },
-    ],
-    variants: false,
-};
-export function FormFieldExampleRender({ ...props }) {
-    const [value, setValueState] = useState({});
-    const setValue = (next) => {
-        setValueState((prev) => ({ ...prev, ...next }));
-    };
-    const [formValues, setFormValues] = useState({});
-    const [disabled, setDisabled] = useState(!!props.disabled);
-    const [required, setRequired] = useState(!!props.required);
-    const [fieldProps, setFieldProps] = useState({
-        errorMessage: false,
-        description: false,
-    });
-    const internalProps = (label) => {
-        return {
-            errorMessage: fieldProps.errorMessage ? `This is an error message for the ${label}.` : undefined,
-            helperText: fieldProps.description ? `This is a description for the ${label}.` : undefined,
-            label,
-        };
-    };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
-                    display: 'flex',
-                    flexDirection: 'row',
-                }, children: [_jsx(SwitchOption, { checked: fieldProps.errorMessage, label: "Has Error", name: "hasError", onChange: (checked) => setFieldProps((prev) => ({ ...prev, errorMessage: checked })), value: "hasError" }), _jsx(SwitchOption, { checked: disabled, label: "Disabled", name: "disabled", onChange: setDisabled, value: "disabled" }), _jsx(SwitchOption, { checked: required, label: "Required", name: "required", onChange: setRequired, value: "required" }), _jsx(SwitchOption, { checked: !!fieldProps.description, label: "With Description", name: "description", onChange: (checked) => setFieldProps((prev) => ({ ...prev, description: checked })), value: "description" })] }), _jsxs("form", { onReset: () => {
-                    setValueState({});
-                    setFormValues({});
-                }, onSubmit: (e) => {
-                    e.preventDefault();
-                    const formData = new FormData(e.currentTarget);
-                    const next = {};
-                    // handle multiple form entries with the same name
-                    formData.forEach((fieldValue, key) => {
-                        if (next[key]) {
-                            if (Array.isArray(next[key])) {
-                                next[key].push(fieldValue);
-                            }
-                            else {
-                                next[key] = [next[key], fieldValue];
-                            }
-                        }
-                        else {
-                            next[key] = fieldValue;
-                        }
-                    });
-                    setFormValues(next);
-                }, style: { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-sizing-04)', width: '400px' }, children: [_jsx(FormField, { ...props, as: "fieldset", ...internalProps('CheckboxGroup'), children: _jsx(CheckboxGroup, { disabled: disabled, name: "checkbox-group", onChange: (next) => setValue({ 'checkbox-group': next }), options: [
-                                { label: 'Option 1', value: 'option1' },
-                                { label: 'Option 2', value: 'option2' },
-                                { label: 'Option 3', value: 'option3' },
-                            ], required: required, value: value['checkbox-group'] }) }), _jsx(FormField, { ...props, as: "fieldset", ...internalProps('RadioGroup'), children: _jsx(RadioGroup, { disabled: disabled, name: "radio-group", onChange: (next) => setValue({ 'radio-group': next }), options: [
-                                { label: 'Option 1', value: 'option1' },
-                                { label: 'Option 2', value: 'option2' },
-                                { label: 'Option 3', value: 'option3' },
-                            ], required: required, value: value['radio-group'] }) }), _jsx(FormField, { ...props, ...internalProps('DatePicker'), children: _jsx(DatePicker, { disabled: disabled, name: "date-picker", onChange: (next) => setValue({ 'date-picker': next }), placeholder: "Example input", required: required, value: value['date-picker'] }) }), _jsx(FormField, { ...props, ...internalProps('Input'), children: _jsx(Input, { disabled: disabled, name: "input", onChange: (next) => setValue({ input: next }), placeholder: "Example input", required: required, value: value['input'] }) }), _jsx(FormField, { ...props, ...internalProps('InputNumber'), children: _jsx(InputNumber, { disabled: disabled, name: "input-number", onChange: (next) => setValue({ 'input-number': next }), required: required, value: value['input-number'] }) }), _jsx(FormField, { ...props, ...internalProps('InputPhone'), children: _jsx(InputPhone, { disabled: disabled, name: "input-phone", onChange: (next) => setValue({ 'input-phone': next }), required: required, value: value['input-phone'] }) }), _jsx(FormField, { ...props, ...internalProps('Password'), children: _jsx(Password, { disabled: disabled, name: "password", onChange: (next) => setValue({ password: next }), required: required, value: value['password'] }) }), _jsx(FormField, { ...props, ...internalProps('Select'), children: _jsx(Select, { disabled: disabled, name: "select", onChange: (next) => setValue({ select: next }), options: [
-                                { label: 'Option 1', value: 'option1' },
-                                { label: 'Option 2', value: 'option2' },
-                                { label: 'Option 3', value: 'option3' },
-                            ], placeholder: "Example input", required: required, value: value['select'] }) }), _jsx(FormField, { ...props, ...internalProps('Textarea'), children: _jsx(Textarea, { disabled: disabled, name: "textarea", onChange: (next) => setValue({ textarea: next }), placeholder: "Example input", required: required, value: value['textarea'] }) }), _jsx(FormField, { ...props, ...internalProps('TimePicker'), children: _jsx(TimePicker, { disabled: disabled, name: "time-picker", onChange: (next) => setValue({ 'time-picker': next }), required: required, value: value['time-picker'] }) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-sizing-02)' }, children: [_jsx(Button, { label: "Reset", type: "reset", variant: "secondary" }), _jsx(Button, { label: "Submit", type: "submit", variant: "primary" })] }), _jsx("code", { style: {
-                            background: 'var(--surface-neutral-t3-low)',
-                            // fontWeight: 'bold',
-                            padding: 'var(--spacing-sizing-02)',
-                            borderRadius: 'var(--radius-sm)',
-                        }, children: _jsx("pre", { children: `// Raw FormData\n\n${JSON.stringify(formValues, null, 2)}` }) })] })] }));
-}
-//# sourceMappingURL=FormFieldExample.js.map

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

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

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

@@ -1 +0,0 @@
-export * from './FormField';

package/dist/components/FormField/index.js

@@ -1,2 +0,0 @@
-export * from './FormField';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormField/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/Input/InputElement.d.ts

@@ -1,82 +0,0 @@
-import './input.scss';
-import { HTMLInputTypeAttribute, ReactNode } from 'react';
-import { FieldContextProps } from '-/components/Field';
-import { CommonProps, ElementProps, SetRef, FieldControlProps } from '-/types/common';
-export declare const DEFAULT: {
-    readonly size: "medium";
-    readonly value: "";
-    readonly type: Extract<HTMLInputTypeAttribute, "number" | "text">;
-    readonly autoComplete: "off";
-};
-export type InputElementBaseProps = CommonProps<'owner' | 'size'> & FieldControlProps & Pick<FieldContextProps, 'ariaDescribedBy' | 'ariaErrorMessage'> & {
-    /** The ref of the container. */
-    containerRef?: SetRef<HTMLDivElement>;
-    /** The ref of the input. */
-    inputRef?: SetRef<HTMLInputElement>;
-    /**
-     * The trailing element to display in the field.
-     *
-     * @exampleType string
-     */
-    trailing?: ReactNode;
-    /**
-     * The leading element to display in the field.
-     *
-     * @exampleType string
-     */
-    leading?: ReactNode;
-    /** The placeholder of the field. */
-    placeholder?: string;
-    /**
-     * The type of the input.
-     *
-     * @default text
-     */
-    type?: Extract<HTMLInputTypeAttribute, 'number' | 'password' | 'text'>;
-    /**
-     * Specifies if user agent has any permission to provide automated assistance in filling out form field values
-     *
-     * @default off
-     */
-    autoComplete?: 'off' | 'on';
-    /**
-     * Specifies if the clear button should be shown. This should almost always be true, but can be set to false.
-     *
-     * @default true
-     */
-    showClearButton?: boolean;
-};
-export type InputElementProps = InputElementBaseProps & {
-    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof InputElementBaseProps>;
-};
-/**
- * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
- * intended to be used directly but rather through the Input, and other components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { InputElement } from '@bspk/ui/InputElement';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
- *
- *     () => {
- *         const [value, setValue] = useState('');
- *
- *         return (
- *             <>
- *                 // standalone input element example
- *                 <InputElement name="example-name" onChange={setValue} value={value} />
- *                 <br />
- *                 // input element used within a field
- *                 <Field>
- *                     <FieldLabel>Example Label</FieldLabel>
- *                     <InputElement name="example-name" onChange={setValue} value={value} />
- *                 </Field>
- *             </>
- *         );
- *     };
- *
- * @name InputElement
- * @phase Utility
- */
-export declare function InputElement({ invalid, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, showClearButton: showClearButtonProp, owner, inputProps, ariaDescribedBy, ariaErrorMessage, ...props }: ElementProps<InputElementProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Input/InputElement.js

@@ -1,64 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './input.css.js';
-import { SvgCancel } from '@bspk/icons/Cancel';
-import { useMemo, useRef } from 'react';
-import { Button } from '../Button';
-import { useTimeout } from '../../hooks/useTimeout';
-export const DEFAULT = {
-    size: 'medium',
-    value: '',
-    type: 'text',
-    autoComplete: 'off',
-};
-/**
- * An input that allows users to enter text, numbers or symbols in a singular line. This is a utility element and is not
- * intended to be used directly but rather through the Input, and other components.
- *
- * @example
- *     import { useState } from 'react';
- *     import { InputElement } from '@bspk/ui/InputElement';
- *     import { Field, FieldLabel } from '@bspk/ui/Field';
- *
- *     () => {
- *         const [value, setValue] = useState('');
- *
- *         return (
- *             <>
- *                 // standalone input element example
- *                 <InputElement name="example-name" onChange={setValue} value={value} />
- *                 <br />
- *                 // input element used within a field
- *                 <Field>
- *                     <FieldLabel>Example Label</FieldLabel>
- *                     <InputElement name="example-name" onChange={setValue} value={value} />
- *                 </Field>
- *             </>
- *         );
- *     };
- *
- * @name InputElement
- * @phase Utility
- */
-export function InputElement({ invalid, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel = 'Input', inputRef, required = false, placeholder, id, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, inputProps, ariaDescribedBy, ariaErrorMessage, ...props }) {
-    const showClearButton = useMemo(() => showClearButtonProp !== false && !readOnly && !disabled && !!value?.toString().length, [showClearButtonProp, readOnly, disabled, value]);
-    const inputRefInternal = useRef(null);
-    const focusTimeout = useTimeout();
-    return (_jsxs("div", { ...props, "data-bspk": "input", "data-bspk-owner": owner || undefined, "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-show-clear-button": showClearButton || undefined, "data-size": size, ref: containerRef, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { ...inputProps, "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, "data-main-input": true, disabled: disabled || undefined, id: id, name: name, onBlur: (event) => {
-                    inputProps?.onBlur?.(event);
-                }, onChange: (event) => {
-                    onChange(event.target.value, event);
-                }, onFocus: (event) => {
-                    inputProps?.onFocus?.(event);
-                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: (node) => {
-                    if (!node)
-                        return;
-                    inputRef?.(node);
-                    inputRefInternal.current = node;
-                }, required: required || undefined, type: type, value: value || '' }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), showClearButton && (_jsx(Button, { "data-clear-button": true, icon: _jsx(SvgCancel, {}), iconOnly: true, label: "Clear", onClick: () => {
-                    onChange('');
-                    inputRefInternal.current?.focus();
-                }, onFocus: () => {
-                    focusTimeout.clear();
-                }, size: size, variant: "tertiary" }))] }));
-}
-//# sourceMappingURL=InputElement.js.map

package/dist/components/Input/InputElement.js.map

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

package/src/components/Field/FieldDescription.tsx

@@ -1,17 +0,0 @@
-import { useFieldContext, describedById } from './utils';
-
-/**
- * FieldDescription component displays a description associated with a form field.
- *
- * @name FieldDescription
- * @parent Field
- */
-export function FieldDescription({ children }: { children?: string }) {
-    const { id } = useFieldContext();
-
-    return children ? (
-        <p data-bspk="field-description" id={describedById(id)}>
-            {children}
-        </p>
-    ) : null;
-}

package/src/components/Field/FieldError.tsx

@@ -1,25 +0,0 @@
-import { errorMessageId, useFieldContext } from './utils';
-import { InlineAlert } from '-/components/InlineAlert';
-
-export type FieldErrorProps = {
-    /** The error message text. */
-    children?: string;
-};
-
-/**
- * FieldError component displays an error message associated with a form field.
- *
- * @name FieldError
- * @parent Field
- */
-export function FieldError({ children }: FieldErrorProps) {
-    const { id } = useFieldContext();
-
-    return (
-        children && (
-            <InlineAlert id={errorMessageId(id)} owner="field-error" variant="error">
-                {children}
-            </InlineAlert>
-        )
-    );
-}

package/src/components/Field/FieldLabel.tsx

@@ -1,44 +0,0 @@
-import { ElementType } from 'react';
-import { FieldContext, useFieldContext, labelledById } 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;
-};
-
-/**
- * FieldLabel component displays a label associated with a form field.
- *
- * @name FieldLabel
- * @parent Field
- */
-export function FieldLabel<As extends ElementType = ElementType>({
-    children,
-    labelTrailing,
-    as,
-    ...props
-}: ElementProps<FieldLabelProps<As>, As>) {
-    const As = as || 'label';
-
-    const { required, id, htmlFor, ...context } = useFieldContext();
-
-    return (
-        <As data-bspk="field-label" htmlFor={As === 'label' ? htmlFor : undefined} id={labelledById(id)} {...props}>
-            <span>{children}</span>
-            {required && <span data-required>{' (Required)'}</span>}
-            {(labelTrailing || context.labelTrailing) && (
-                <span aria-hidden data-trailing>
-                    {labelTrailing || context.labelTrailing}
-                </span>
-            )}
-        </As>
-    );
-}

package/src/components/FormField/FormField.rtl.test.tsx

@@ -1,20 +0,0 @@
-import { FormFieldExampleRender, presets } from './FormFieldExample';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-describe('FormField (RTL)', () => {
-    presets.forEach((preset) => {
-        it(
-            `has no basic a11y issues - ${preset.label}`,
-            hasNoBasicA11yIssues(<FormFieldExampleRender {...preset.propState} />),
-        );
-    });
-
-    it('renders', () => {
-        const { getByText } = render(<FormFieldExampleRender {...presets[0].propState} />);
-
-        expect(getByText('InputPhone')).toBeInTheDocument();
-    });
-});
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/FormField/FormField.tsx

@@ -1,95 +0,0 @@
-import { ElementType, ReactNode } from 'react';
-import { Field, FieldLabel, FieldDescription, FieldError } from '-/components/Field';
-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.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * 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.
-     *
-     * @required
-     */
-    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?: 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: DatePicker, Input, InputNumber, InputPhone, Password, Select, Textarea, or
- * TimePicker.
- *
- * @example
- *     import { Input } from '@bspk/ui/Input';
- *     import { FormField } from '@bspk/ui/FormField';
- *
- *     () => {
- *         const [state, setState] = useState<string | undefined>(undefined);
- *
- *         return (
- *             <FormField controlId="Example controlId" label="Example label">
- *                 <Input name="example-text" onChange={(next) => setState(next)} value={state} />
- *             </FormField>
- *         );
- *     };
- *
- * @name FormField
- * @phase Utility
- */
-export function FormField({
-    label,
-    errorMessage,
-    helperText,
-    children,
-    labelTrailing,
-    required,
-    as,
-    style,
-}: FormFieldProps) {
-    const fieldAs = as || 'div';
-
-    const labelAs = fieldAs === 'fieldset' ? 'legend' : undefined;
-    return (
-        <Field as={fieldAs} style={style}>
-            <FieldLabel as={labelAs} labelTrailing={labelTrailing} required={required}>
-                {label}
-            </FieldLabel>
-            {children}
-            {!errorMessage && helperText && <FieldDescription>{helperText}</FieldDescription>}
-            <FieldError>{errorMessage}</FieldError>
-        </Field>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */