@bspk/ui 1.3.3 → 1.3.5

package/dist/components/FormField/FormFieldExample.js

@@ -1,12 +1,100 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from './FormField';
-import { TextInput } from '../TextInput';
-export const FormFieldExample = {
-    render: ({ props, setState }) => {
-        const { invalid, errorMessage, label, controlId = 'example-control-id', helperText, labelTrailing, ...inputProps } = props;
-        return (_jsx(FormField, { controlId: controlId, errorMessage: errorMessage, helperText: helperText, invalid: invalid, label: label, labelTrailing: labelTrailing, children: (fieldProps) => {
-                return (_jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, invalid: invalid, onChange: (next) => setState({ value: next }), value: props.value }));
-            } }));
+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 = {
+    containerStyle: { width: '100%' },
+    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 +1 @@
-{"version":3,"file":"FormFieldExample.js","sourceRoot":"","sources":["../../../src/components/FormField/FormFieldExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAsB,SAAS,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGnE,MAAM,CAAC,MAAM,gBAAgB,GAAyD;IAClF,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,MAAM,EACF,OAAO,EACP,YAAY,EACZ,KAAK,EACL,SAAS,GAAG,oBAAoB,EAChC,UAAU,EACV,aAAa,EACb,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;QAEV,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,YAE3B,CAAC,UAAU,EAAE,EAAE;gBACZ,OAAO,CACH,KAAC,SAAS,OACF,UAAU,KACV,UAAU,gBACF,KAAK,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EACrD,KAAK,EAAE,KAAK,CAAC,KAAK,GACpB,CACL,CAAC;YACN,CAAC,GACO,CACf,CAAC;IACN,CAAC;CACJ,CAAC"}
+{"version":3,"file":"FormFieldExample.js","sourceRoot":"","sources":["../../../src/components/FormField/FormFieldExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Img/Img.d.ts

@@ -19,7 +19,7 @@ export type ImgProps = {
  * @example
  *     import { Img } from '@bspk/ui/Img';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Img alt="Example alt" src="Example src" />;
  *     }
  *

package/dist/components/Img/Img.js

@@ -5,7 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @example
  *     import { Img } from '@bspk/ui/Img';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Img alt="Example alt" src="Example src" />;
  *     }
  *

package/dist/components/InlineAlert/InlineAlert.d.ts

@@ -1,6 +1,6 @@
 import './inline-alert.scss';
-import { AlertVariant } from '-/types/common';
-export type InlineAlertProps = {
+import { AlertVariant, CommonProps } from '-/types/common';
+export type InlineAlertProps = CommonProps<'owner'> & {
     /**
      * The content of the inline alert.
      *
@@ -24,12 +24,12 @@ export type InlineAlertProps = {
  * @example
  *     import { InlineAlert } from '@bspk/ui/InlineAlert';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *     }
  *
  * @name InlineAlert
  * @phase UXReview
  */
-export declare function InlineAlert({ children, variant, id }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineAlert({ children, variant, id, owner }: InlineAlertProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/InlineAlert/InlineAlert.js

@@ -12,15 +12,15 @@ import { Txt } from '../Txt';
  * @example
  *     import { InlineAlert } from '@bspk/ui/InlineAlert';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <InlineAlert variant="informational">Example informational inline alert</InlineAlert>;
  *     }
  *
  * @name InlineAlert
  * @phase UXReview
  */
-export function InlineAlert({ children, variant = 'informational', id }) {
-    return (_jsxs("div", { "data-bspk": "inline-alert", "data-variant": variant, id: id, role: "alert", children: [VARIANT_ICON[variant], _jsx(Txt, { variant: "body-small", children: children })] }));
+export function InlineAlert({ children, variant = 'informational', id, owner }) {
+    return (_jsxs("div", { "data-bspk": "inline-alert", "data-bspk-owner": owner || undefined, "data-variant": variant, id: id, role: "alert", children: [VARIANT_ICON[variant], _jsx(Txt, { variant: "body-small", children: children })] }));
 }
 const VARIANT_ICON = {
     error: _jsx(SvgErrorFill, {}),

package/dist/components/InlineAlert/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../../src/components/InlineAlert/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAqBvC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAoB;IACrF,OAAO,CACH,4BAAe,cAAc,kBAAe,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aACpE,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}
+{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../../src/components/InlineAlert/InlineAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAqBvC;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,eAAe,EAAE,EAAE,EAAE,KAAK,EAAoB;IAC5F,OAAO,CACH,4BAAe,cAAc,qBAAkB,KAAK,IAAI,SAAS,kBAAgB,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAC,OAAO,aACzG,YAAY,CAAC,OAAO,CAAC,EACtB,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,QAAQ,GAAO,IACxC,CACT,CAAC;AACN,CAAC;AAED,MAAM,YAAY,GAAoC;IAClD,KAAK,EAAE,KAAC,YAAY,KAAG;IACvB,aAAa,EAAE,KAAC,WAAW,KAAG;IAC9B,OAAO,EAAE,KAAC,kBAAkB,KAAG;IAC/B,OAAO,EAAE,KAAC,iBAAiB,KAAG;CACjC,CAAC"}

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

@@ -0,0 +1,37 @@
+import './input.scss';
+import { InputElementProps } from './InputElement';
+import { ElementProps } from '-/types/common';
+export type InputProps = Omit<InputElementProps, 'ariaDescribedBy' | 'ariaErrorMessage'>;
+/**
+ * An input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * For a more complete example with field usage, see the InputField component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Input } from '@bspk/ui/Input';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Label</FieldLabel>
+ *                 <Input name="example-name" onChange={setValue} value={value} />
+ *                 <FieldDescription>This is an example input field.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ *     function ExampleWithAriaLabel() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />;
+ *     }
+ *
+ * @name Input
+ * @phase UXReview
+ */
+export declare function Input({ invalid: invalidProp, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, showClearButton: showClearButtonProp, owner, inputProps, ...props }: ElementProps<InputProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Input/Input.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './input.css.js';
+import { DEFAULT, InputElement } from './InputElement';
+import { useFieldInit } from '../Field';
+/**
+ * An input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * For a more complete example with field usage, see the InputField component.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { Input } from '@bspk/ui/Input';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Label</FieldLabel>
+ *                 <Input name="example-name" onChange={setValue} value={value} />
+ *                 <FieldDescription>This is an example input field.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ *     function ExampleWithAriaLabel() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return <Input aria-label="Example Input" name="example-name" onChange={setValue} value={value} />;
+ *     }
+ *
+ * @name Input
+ * @phase UXReview
+ */
+export function Input({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel = 'Input', inputRef, required = false, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, inputProps, ...props }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    return (
+    // data-bspk="input" -- because InputElement already has it :)
+    _jsx(InputElement, { ...props, "aria-label": ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaErrorMessage: ariaErrorMessage, autoComplete: autoComplete, containerRef: containerRef, disabled: disabled, id: id, inputProps: inputProps, inputRef: inputRef, invalid: invalid, leading: leading, name: name, onChange: onChange, owner: owner, placeholder: placeholder, readOnly: readOnly, showClearButton: showClearButtonProp, size: size, trailing: trailing, type: type, value: value }));
+}
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,KAAK,CAAC,EAClB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,GAAG,OAAO,EACjC,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,eAAe,EAAE,mBAAmB,GAAG,IAAI,EAC3C,KAAK,EACL,UAAU,EACV,GAAG,KAAK,EACsB;IAC9B,MAAM,EAAE,EAAE,EAAE,eAAe,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,YAAY,CAAC;QACpE,MAAM;QACN,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;KACd,CAAC,CAAC;IAEH,OAAO;IACH,8DAA8D;IAC9D,KAAC,YAAY,OACL,KAAK,gBACG,SAAS,EACrB,eAAe,EAAE,eAAe,EAChC,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,mBAAmB,EACpC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,CACL,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,77 @@
+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";
+};
+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';
+ *
+ *     function Example() {
+ *         const [value, setValue] = useState('');
+ *
+ *         return (
+ *             <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;
+export {};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/{TextInput/TextInput.js → Input/InputElement.js}

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './text-input.css.js';
+import './input.css.js';
 import { SvgCancel } from '@bspk/icons/Cancel';
 import { useMemo, useRef, useState } from 'react';
 import { Button } from '../Button';
-import { useId } from '../../hooks/useId';
 import { useTimeout } from '../../hooks/useTimeout';
 export const DEFAULT = {
     size: 'medium',
@@ -12,32 +11,34 @@ export const DEFAULT = {
     autoComplete: 'off',
 };
 /**
- * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
- * not intended to be used directly. Use the TextField component.
+ * 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 { TextInput } from '@bspk/ui/TextInput';
+ *     import { InputElement } from '@bspk/ui/InputElement';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
+ *     function Example() {
+ *         const [value, setValue] = useState('');
  *
- *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Example Label</FieldLabel>
+ *                 <InputElement name="example-name" onChange={setValue} value={value} />
+ *             </Field>
+ *         );
  *     }
  *
- * @element
- *
- * @name TextInput
+ * @name InputElement
  * @phase Utility
  */
-export function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, showClearButton: showClearButtonProp = true, owner, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, inputProps, ...props }) {
-    const id = useId(idProp);
-    const invalid = !readOnly && !disabled && invalidProp;
+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 [focused, setFocused] = useState(false);
     const showClearButton = useMemo(() => !!(showClearButtonProp !== false && !readOnly && !disabled && value?.toString().length && focused), [showClearButtonProp, readOnly, disabled, value, focused]);
     const inputRefInternal = useRef(null);
     const focusTimeout = useTimeout();
-    return (_jsxs("div", { ...props, "data-bspk": "text-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) => {
+    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) => {
                     focusTimeout.set(() => setFocused(false), 750);
                     inputProps?.onBlur?.(event);
                 }, onChange: (event) => {
@@ -57,4 +58,4 @@ export function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size,
                     focusTimeout.clear();
                 }, size: size, variant: "tertiary" }))] }));
 }
-//# sourceMappingURL=TextInput.js.map
+//# sourceMappingURL=InputElement.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { InputProps } from '.';
+import { ComponentExample } from '-/utils/demo';
+type InputExampleProps = InputProps & {
+    label: string;
+    description?: string;
+};
+export declare const InputExample: ComponentExample<InputExampleProps>;
+export {};

package/dist/components/{TextInput/TextInputExample.js → Input/InputExample.js}

@@ -1,38 +1,49 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const TextInputExample = {
+export const InputExample = {
+    defaultState: {
+        label: 'Property Description',
+        description: 'This is a description of the property.',
+        placeholder: 'Waterfront condo with great views',
+    },
     render: ({ props, Component }) => _jsx(Component, { ...props }),
     presets: [
         {
             label: 'Currency',
             propState: {
+                value: '',
                 type: 'number',
                 leading: '$',
                 trailing: undefined,
-                placeholder: 'currency',
+                placeholder: '0.00',
                 name: 'currency',
-                'aria-label': 'Currency input',
+                label: 'Balance',
+                description: 'Enter the current balance',
             },
         },
         {
             label: 'Percent',
             propState: {
+                value: '',
                 type: 'number',
                 leading: undefined,
                 trailing: '%',
-                placeholder: 'percent',
+                placeholder: '0',
                 name: 'percent',
-                'aria-label': 'Percent input',
+                label: 'Growth Rate',
+                description: 'Enter the expected growth rate',
             },
         },
         {
             label: 'Dimension',
             propState: {
+                value: '',
                 type: 'number',
                 leading: undefined,
-                placeholder: 'dimensions',
-                trailing: 'ft',
+                placeholder: '0',
+                trailing: 'Acre(s)',
                 name: 'dimension',
-                'aria-label': 'Dimension input',
+                label: 'Land Size',
+                description: 'Enter the size of the land',
             },
         },
     ],
@@ -40,4 +51,4 @@ export const TextInputExample = {
         type: false,
     },
 };
-//# sourceMappingURL=TextInputExample.js.map
+//# sourceMappingURL=InputExample.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputExample.js","sourceRoot":"","sources":["../../../src/components/Input/InputExample.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,MAAM,YAAY,GAAwC;IAC7D,YAAY,EAAE;QACV,KAAK,EAAE,sBAAsB;QAC7B,WAAW,EAAE,wCAAwC;QACrD,WAAW,EAAE,mCAAmC;KACnD;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO,EAAE;QACL;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG;gBACZ,QAAQ,EAAE,SAAS;gBACnB,WAAW,EAAE,MAAM;gBACnB,IAAI,EAAE,UAAU;gBAChB,KAAK,EAAE,SAAS;gBAChB,WAAW,EAAE,2BAA2B;aAC3C;SACJ;QACD;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,QAAQ,EAAE,GAAG;gBACb,WAAW,EAAE,GAAG;gBAChB,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,gCAAgC;aAChD;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,SAAS;gBAClB,WAAW,EAAE,GAAG;gBAChB,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,WAAW;gBACjB,KAAK,EAAE,WAAW;gBAClB,WAAW,EAAE,4BAA4B;aAC5C;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,IAAI,EAAE,KAAK;KACd;CACJ,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './Input';
+export * from './InputElement';

package/dist/components/Input/index.js

@@ -0,0 +1,3 @@
+export * from './Input';
+export * from './InputElement';
+//# sourceMappingURL=index.js.map

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

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