@bspk/ui 1.0.0

package/TextField.js

@@ -0,0 +1,19 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { FormField } from './FormField.js';
+import { TextInput } from './TextInput.js';
+
+/**
+ * A text input that allows users to enter text, numbers or symbols in a singular line.
+ *
+ * This component takes properties from the FormField and TextInput components.
+ *
+ * @name TextField
+ */
+function TextField({ label, errorMessage: errorMessageProp, helperText, controlId, labelTrailing, required, ...inputProps }) {
+    const errorMessage = (!inputProps.readOnly && !inputProps.disabled && errorMessageProp) || undefined;
+    return (jsx(FormField, { controlId: controlId, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (jsx(TextInput, { ...inputProps, ...fieldProps, "aria-label": label, id: controlId, required: required })) }));
+}
+TextField.bspkName = 'TextField';
+
+export { TextField };
+//# sourceMappingURL=TextField.js.map

package/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sources":["src/TextField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAsBA;;;;;;AAMG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EACT,aAAa,EACb,QAAQ,EACR,GAAG,UAAU,EACA,EAAA;AACb,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,gBAAgB,KAAK,SAAS,CAAC;IAErG,QACIA,GAAC,CAAA,SAAS,EACN,EAAA,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,MACRA,IAAC,SAAS,EAAA,EAAA,GAAK,UAAU,EAAA,GAAM,UAAU,EAAA,YAAA,EAAc,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAI,CAAA,CACtG,EACO,CAAA,EACd;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW;;;;"}

package/TextInput.d.ts

@@ -0,0 +1,45 @@
+import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
+import { ElementProps, CommonProps } from '.';
+export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'required' | 'size' | 'value'> & {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @type (next: String, Event) => void
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    /** The ref of the container. */
+    containerRef?: (node: HTMLElement | null) => void;
+    /** The ref of the input. */
+    inputRef?: (node: HTMLElement | null) => void;
+    /** The trailing element to display in the field. */
+    trailing?: ReactNode;
+    /** The leading element to display in the field. */
+    leading?: ReactNode;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /** The type of the input. */
+    type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
+    /**
+     * Specifies if user agent has any permission to provide automated assistance in filling out form field values.
+     * https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+     *
+     * @default off
+     */
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+};
+/**
+ * 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.
+ *
+ * @element
+ *
+ * @name TextInput
+ */
+declare function TextInput({ invalid: invalidProp, onChange, size, value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete, containerRef, ...otherProps }: ElementProps<TextInputProps, 'div'>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace TextInput {
+    var bspkName: string;
+}
+export { TextInput };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/TextInput.js

@@ -0,0 +1,172 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { SvgCancel } from '@bspk/icons/Cancel';
+import { css } from '@emotion/react';
+import { useId } from './hooks/useId.js';
+
+/**
+ * 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.
+ *
+ * @element
+ *
+ * @name TextInput
+ */
+function TextInput({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete = 'off', containerRef, ...otherProps }) {
+    const id = useId(idProp);
+    const invalid = !readOnly && !disabled && invalidProp;
+    return (jsxs("div", { css: style, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, "data-text-input": true, ref: containerRef, ...otherProps, children: [leading && jsx("span", { "data-leading": true, children: leading }), jsx("input", { "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
+                    onChange(event.target.value, event);
+                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value }), trailing && jsx("span", { "data-trailing": true, children: trailing }), value?.toString().length > 0 && !readOnly && !disabled && (jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: jsx(SvgCancel, {}) }))] }));
+}
+TextInput.bspkName = 'TextInput';
+const style = css `
+    --border-color: var(--stroke-neutral-base);
+    display: flex;
+    flex-direction: row;
+    background-color: var(--surface-neutral-t1-base);
+    border: solid 1px var(--border-color);
+    height: var(--field-height);
+    border-radius: var(--radius-small);
+    padding: 0 var(--field-padding);
+    gap: var(--spacing-sizing-01);
+    flex-wrap: nowrap;
+    width: 100%;
+
+    &:focus-within {
+        --border-color: var(--stroke-brand-primary);
+    }
+
+    & > * {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: var(--field-height);
+        font: var(--field-font);
+        color: var(--foreground-neutral-on-surface);
+        min-width: 0;
+    }
+
+    &:hover:not(:focus-within) {
+        background: 
+    // multiple colors
+
+            linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &:active:not(:focus-within) {
+        background: 
+    // multiple colors
+
+            linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-readonly] {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background: 
+    // multiple colors
+
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+    }
+
+    &[data-disabled] {
+        --border-color: var(--stroke-neutral-disabled-light);
+
+        background:
+    // multiple colors
+
+            linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+            linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+
+        & > * {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+
+    &[data-invalid] {
+        --border-color: var(--status-error);
+    }
+
+    &[data-size='small'] {
+        --field-padding: var(--spacing-sizing-02);
+        --field-height: var(--spacing-sizing-08);
+        --field-font: var(--body-small);
+        --field-icon-width: var(--spacing-sizing-04);
+        --field-clear-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='medium'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-10);
+        --field-font: var(--body-base);
+        --field-icon-width: var(--spacing-sizing-05);
+        --field-clear-width: var(--spacing-sizing-05);
+    }
+
+    &[data-size='large'] {
+        --field-padding: var(--spacing-sizing-03);
+        --field-height: var(--spacing-sizing-12);
+        --field-font: var(--body-large);
+        --field-icon-width: var(--spacing-sizing-06);
+        --field-clear-width: var(--spacing-sizing-06);
+    }
+
+    [data-leading],
+    [data-trailing] {
+        svg {
+            width: var(--field-icon-width);
+        }
+    }
+
+    label {
+        font: var(--labels-small);
+        color: var(--foreground-neutral-on-surface-variant-01);
+    }
+
+    input {
+        flex: 1;
+        background-color: transparent !important;
+        border: none;
+        outline: none;
+        padding: 0;
+        pointer-events: all;
+        text-overflow: ellipsis;
+
+        &[type='number']::-webkit-inner-spin-button,
+        &[type='number']::-webkit-outer-spin-button {
+            display: none;
+        }
+    }
+
+    button[data-clear] {
+        display: none;
+        border: none;
+        background: none;
+        padding: 0;
+        cursor: pointer;
+        pointer-events: all;
+        margin-left: var(--spacing-sizing-02);
+        padding-right: var(--field-padding);
+
+        svg {
+            pointer-events: none;
+            width: var(--field-clear-width);
+        }
+    }
+
+    &:focus-within {
+        button[data-clear] {
+            display: flex;
+        }
+    }
+
+    &:has(button[data-clear]) {
+        padding-right: 0;
+    }
+`;
+
+export { TextInput, style };
+//# sourceMappingURL=TextInput.js.map

package/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["src/TextInput.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;AAuCA;;;;;;;AAOG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,YAAY,EACZ,GAAG,UAAU,EACqB,EAAA;AAClC,IAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;AAEtD,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,KAAK,EAAA,eAAA,EACK,QAAQ,IAAI,SAAS,EAAA,cAAA,EACtB,OAAO,IAAI,SAAS,EACnB,eAAA,EAAA,QAAQ,IAAI,SAAS,EACrB,eAAA,EAAA,QAAQ,IAAI,SAAS,eACzB,IAAI,EAAA,iBAAA,EAAA,IAAA,EAEf,GAAG,EAAE,YAAY,EAAA,GACb,UAAU,EAAA,QAAA,EAAA,CAEb,OAAO,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,QAAA,EAAoB,OAAO,EAAA,CAAQ,EAC/CA,GAAA,CAAA,OAAA,EAAA,EAAA,cAAA,EACkB,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,KAAI;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AACxC,iBAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACd,CAAA,EACD,QAAQ,IAAIA,+CAAqB,QAAQ,EAAA,CAAQ,EACjD,KAAK,EAAE,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,KACnDA,GAAmB,CAAA,QAAA,EAAA,EAAA,YAAA,EAAA,OAAO,EAAY,YAAA,EAAA,IAAA,EAAA,OAAO,EAAE,MAAM,QAAQ,CAAC,EAAE,CAAC,EAC7D,QAAA,EAAAA,GAAA,CAAC,SAAS,EAAG,EAAA,CAAA,EAAA,CACR,CACZ,CAAA,EAAA,CACC,EACR;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAI1B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/Textarea.d.ts

@@ -0,0 +1,63 @@
+import { ChangeEvent, Ref } from 'react';
+import { CommonProps } from './';
+export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'readOnly' | 'required'> & {
+    /**
+     * Callback when the value of the field changes.
+     *
+     * @type (next: String, Event) => void
+     * @required
+     */
+    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * The size of the field.
+     *
+     * @default medium
+     */
+    size?: 'large' | 'medium' | 'small';
+    /** The value of the field. */
+    value?: string;
+    /**
+     * The textarea control name of the field.
+     *
+     * @required
+     */
+    name: string;
+    /** The ref of the field. */
+    innerRef?: Ref<HTMLTextAreaElement>;
+    /** The placeholder of the field. */
+    placeholder?: string;
+    /**
+     * The maximum number of characters that the field will accept.
+     *
+     * @minimum 1
+     */
+    maxLength?: number;
+    /**
+     * The minimum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
+     * to fit the content.
+     *
+     * @minimum 3
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows that the textarea should have. If set the textarea will automatically grow and shrink
+     * to fit the content.
+     *
+     * @maximum 10
+     */
+    maxRows?: number;
+};
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * @element
+ *
+ * @name Textarea
+ */
+declare function Textarea({ invalid: invalidProp, onChange, size, value, name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp, maxRows: maxRowsProp, ...otherProps }: TextareaProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace Textarea {
+    var bspkName: string;
+}
+export { Textarea };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/Textarea.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useId } from './hooks/useId.js';
+
+const MIN_ROWS = 3;
+const MAX_ROWS = 10;
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * @element
+ *
+ * @name Textarea
+ */
+function Textarea({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = MIN_ROWS, maxRows: maxRowsProp = MAX_ROWS, ...otherProps }) {
+    const id = useId(idProp);
+    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
+    // ensure minRows and maxRows are within bounds
+    const minRows = Math.min(MAX_ROWS, Math.max(minRowsProp, MIN_ROWS));
+    const maxRows = Math.max(MIN_ROWS, Math.min(maxRowsProp, MAX_ROWS));
+    return (jsxs("div", { css: style, "data-size": size, "data-textarea": true, style: {
+            '--min-rows': minRows,
+            '--max-rows': maxRows,
+        }, children: [jsx("textarea", { ...otherProps, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, id: id, name: name, onBlur: (event) => {
+                    const target = event.target;
+                    target.scrollTop = 0;
+                }, onChange: (event) => onChange(event.target.value, event), onInput: (event) => {
+                    const target = event.target;
+                    // we know the textarea was resized, so we don't want to auto-size it
+                    if (target.style.height)
+                        return;
+                    target.nextSibling.innerText = `${target.value}\n`;
+                }, placeholder: placeholder, ref: innerRef, value: value }), jsx("div", { "aria-hidden": true, "data-replicated-value": true })] }));
+}
+Textarea.bspkName = 'Textarea';
+const style = css `
+    display: grid;
+    width: 100%;
+
+    // &[data-size='medium']
+    --font: var(--body-base);
+    --line-height: 20px;
+    --padding: var(--spacing-sizing-03);
+
+    &[data-size='small'] {
+        --font: var(--body-small);
+        --line-height: 20px;
+        --padding: var(--spacing-sizing-02);
+    }
+
+    &[data-size='large'] {
+        --font: var(--body-large);
+        --line-height: 24px;
+        --padding: var(--spacing-sizing-03);
+    }
+
+    [data-replicated-value] {
+        white-space: pre-wrap;
+        visibility: hidden;
+    }
+
+    textarea,
+    [data-replicated-value] {
+        width: 100%;
+        font: var(--font);
+        border: 1px solid var(--border-color);
+        padding: var(--padding);
+        grid-area: 1 / 1 / 2 / 2;
+        min-height: calc((var(--line-height) * var(--min-rows)) + (var(--padding) * 2));
+        max-height: calc((var(--line-height) * var(--max-rows)) + (var(--padding) * 2));
+    }
+
+    textarea {
+        --border-color: var(--stroke-neutral-base);
+
+        resize: vertical;
+        color: var(--foreground-neutral-on-surface);
+        background-color: var(--surface-neutral-t1-base);
+        border-radius: var(--radius-small);
+
+        &:focus-within {
+            --border-color: var(--stroke-neutral-focus);
+            outline: none;
+            color: var(--foreground-neutral-on-surface);
+        }
+
+        &:disabled {
+            pointer-events: none;
+            background: 
+    // multiple colors
+
+                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        &:read-only {
+            background: 
+    // multiple colors
+
+                linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
+                linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
+            color: var(--foreground-neutral-on-surface-variant-02);
+            cursor: not-allowed;
+        }
+
+        &[aria-invalid] {
+            --border-color: var(--status-error);
+        }
+    }
+`;
+
+export { Textarea, style };
+//# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["src/Textarea.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;AAuDA,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,QAAQ,GAAG,EAAE,CAAC;AAEpB;;;;;;AAMG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,OAAO,EAAE,WAAW,GAAG,QAAQ,EAC/B,GAAG,UAAU,EACD,EAAA;AACZ,IAAA,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;AACzB,IAAA,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;;AAE5E,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;AACpE,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEpE,QACIA,cACI,GAAG,EAAE,KAAK,EACC,WAAA,EAAA,IAAI,EAEf,eAAA,EAAA,IAAA,EAAA,KAAK,EACD;AACI,YAAA,YAAY,EAAE,OAAO;AACrB,YAAA,YAAY,EAAE,OAAO;SACP,EAGtB,QAAA,EAAA,CAAAC,GAAA,CAAA,UAAA,EAAA,EAAA,GACQ,UAAU,EACA,cAAA,EAAA,OAAO,IAAI,SAAS,EAAA,YAAA,EACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,KAAI;AACd,oBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;AACnD,oBAAA,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;iBACxB,EACD,QAAQ,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,KAAI;AACf,oBAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;;AAEnD,oBAAA,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,CAAA,EAAA,CAAI,CAAC;AACxE,iBAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EAAA,CACd,EACFA,GAAyC,CAAA,KAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,uBAAA,EAAA,IAAA,EAAA,CAAA,CAAA,EAAA,CACvC,EACR;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAIxB,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/TextareaField.d.ts

@@ -0,0 +1,16 @@
+import { FormFieldProps } from './FormField';
+import { TextareaProps } from './Textarea';
+export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label'> & TextareaProps;
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Textarea components.
+ *
+ * @name TextareaField
+ */
+declare function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, ...textareaProps }: TextareaFieldProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare namespace TextareaField {
+    var bspkName: string;
+}
+export { TextareaField };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/TextareaField.js

@@ -0,0 +1,26 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { FormField } from './FormField.js';
+import { Textarea } from './Textarea.js';
+import { Txt } from './Txt.js';
+import { tryIntParse } from './utils/tryIntPsrse.js';
+
+/**
+ * A component that allows users to input large amounts of text that could span multiple lines.
+ *
+ * This component takes properties from the FormField and Textarea components.
+ *
+ * @name TextareaField
+ */
+function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, ...textareaProps }) {
+    const maxLength = tryIntParse(maxLengthProp) || -1;
+    const errorMessage = (!readOnly && !disabled && errorMessageProp) || undefined;
+    if (typeof onChange !== 'function')
+        return null;
+    return (jsx(FormField, { controlId: id, errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: jsx(Txt, { style: { color: 'var(--foreground-neutral-on-surface-variant-02)' }, variant: "body-small", children: `${textareaProps?.value?.length || 0}${maxLength > 0 ? `/${maxLength}` : ''}` }), required: required, children: (fieldProps) => (jsx(Textarea, { ...textareaProps, ...fieldProps, "aria-label": textareaProps['aria-label'] || label, id: id, invalid: invalid, onChange: (next, event) => {
+                onChange(next, event);
+            }, required: required })) }));
+}
+TextareaField.bspkName = 'TextareaField';
+
+export { TextareaField };
+//# sourceMappingURL=TextareaField.js.map

package/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sources":["src/TextareaField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;;AAOA;;;;;;AAMG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,QAAQ,EACR,SAAS,EAAE,aAAa,EACxB,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,aAAa,EACC,EAAA;IACjB,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;AACnD,IAAA,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,gBAAgB,KAAK,SAAS,CAAC;IAE/E,IAAI,OAAO,QAAQ,KAAK,UAAU;AAAE,QAAA,OAAO,IAAI,CAAC;IAEhD,QACIA,IAAC,SAAS,EAAA,EACN,SAAS,EAAE,EAAE,EACb,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EACTA,GAAC,CAAA,GAAG,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,iDAAiD,EAAE,EAAE,OAAO,EAAC,YAAY,EAAA,QAAA,EACzF,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,CAAA,EAAG,SAAS,GAAG,CAAC,GAAG,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,GAAG,EAAE,CAAE,CAAA,EAAA,CAC5E,EAEV,QAAQ,EAAE,QAAQ,EAAA,QAAA,EAEjB,CAAC,UAAU,MACRA,GAAC,CAAA,QAAQ,EACD,EAAA,GAAA,aAAa,KACb,UAAU,EAAA,YAAA,EACF,aAAa,CAAC,YAAY,CAAC,IAAI,KAAK,EAChD,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAI;AACtB,gBAAA,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;aACzB,EACD,QAAQ,EAAE,QAAQ,GACpB,CACL,EAAA,CACO,EACd;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe;;;;"}

package/TimePicker.d.ts

@@ -0,0 +1,16 @@
+export type TimePickerProps = {
+    /** The content of the timepicker. */
+    children: string;
+};
+/**
+ * Component description coming soon.
+ *
+ * @name TimePicker
+ */
+declare function TimePicker({ children }: TimePickerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace TimePicker {
+    var bspkName: string;
+}
+export { TimePicker };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/TimePicker.js

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * Component description coming soon.
+ *
+ * @name TimePicker
+ */
+function TimePicker({ children }) {
+    return (jsx("div", { css: style, "data-time-picker": true, children: children }));
+}
+TimePicker.bspkName = 'TimePicker';
+const style = css `
+    display: flex;
+`;
+
+export { TimePicker, style };
+//# sourceMappingURL=TimePicker.js.map

package/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["src/TimePicker.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;AAOA;;;;AAIG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAmB,EAAA;IAC7C,QACIA,aAAK,GAAG,EAAE,KAAK,EACV,kBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAQ,EACP,CAAA,EACR;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAI5B,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;"}

package/ToggleOption.d.ts

@@ -0,0 +1,27 @@
+import { ReactElement } from 'react';
+export type ToggleOptionProps = {
+    /**
+     * The label of the field. Also used as the aria-label of the checkbox.
+     *
+     * @required
+     */
+    label: string;
+    /** The description of the field. */
+    description?: string;
+    /** The control element to use. */
+    children?: ReactElement;
+    /** The size of the control option label. */
+    size?: 'base' | 'large' | 'small';
+};
+/**
+ * A utility component that wraps a checkbox, radio, and switch.
+ *
+ * @name ToggleOption
+ */
+declare function ToggleOption({ label, description, children, size }: ToggleOptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace ToggleOption {
+    var bspkName: string;
+}
+export { ToggleOption };
+export declare const style: import("@emotion/react").SerializedStyles;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/ToggleOption.js

@@ -0,0 +1,91 @@
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+
+/**
+ * A utility component that wraps a checkbox, radio, and switch.
+ *
+ * @name ToggleOption
+ */
+function ToggleOption({ label, description, children, size }) {
+    return (jsxs("label", { css: style, "data-size": size, "data-toggle-option": "", children: [jsx("span", { "data-control": true, children: children }), jsxs("span", { "data-content": true, children: [jsx("span", { "data-label": true, children: label }), description && jsx("span", { "data-description": true, children: description })] })] }));
+}
+ToggleOption.bspkName = 'ToggleOption';
+const style = css `
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+    flex-direction: row;
+    padding: 0 var(--spacing-sizing-01) 0 0;
+    gap: var(--spacing-sizing-02);
+    user-select: none;
+    background: unset;
+    border: unset;
+    cursor: pointer;
+    min-height: var(--spacing-sizing-08);
+    align-items: center;
+
+    &:has([data-description]) {
+        align-items: unset;
+    }
+
+    @media (any-pointer: coarse) {
+        min-height: var(--spacing-sizing-12);
+    }
+
+    [data-content] {
+        display: flex;
+        flex-direction: column;
+        padding: 2px 0;
+    }
+
+    [data-label] {
+        color: var(--foreground-neutral-on-surface);
+        font: var(--labels-base);
+    }
+
+    [data-description] {
+        font: var(--body-small);
+        color: var(--foreground-neutral-on-surface-variant-01);
+    }
+
+    &[data-size='small'] {
+        [data-label] {
+            font: var(--labels-small);
+        }
+
+        [data-description] {
+            font: var(--body-x-small);
+        }
+    }
+
+    &[data-size='large'] {
+        [data-label] {
+            font: var(--labels-large);
+        }
+
+        [data-description] {
+            font: var(--body-base);
+        }
+    }
+
+    &:not(:has(:disabled)) {
+        [data-pseudo='focus'] &,
+        &:focus-visible,
+        &:has(*:focus-visible) {
+            outline: var(--stroke-neutral-focus) 2px solid;
+        }
+    }
+
+    &:has(:disabled) {
+        [data-label] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+
+        [data-description] {
+            color: var(--foreground-neutral-disabled-on-surface);
+        }
+    }
+`;
+
+export { ToggleOption, style };
+//# sourceMappingURL=ToggleOption.js.map

package/ToggleOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleOption.js","sources":["src/ToggleOption.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAkBA;;;;AAIG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAqB,EAAA;IAC3E,QACIA,IAAO,CAAA,OAAA,EAAA,EAAA,GAAG,EAAE,KAAK,EAAa,WAAA,EAAA,IAAI,EAAqB,oBAAA,EAAA,EAAE,EACrD,QAAA,EAAA,CAAAC,GAAA,CAAA,MAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,QAAA,EAAoB,QAAQ,EAAA,CAAQ,EACpCD,IAAA,CAAA,MAAA,EAAA,EAAA,cAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CACIC,GAAkB,CAAA,MAAA,EAAA,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,KAAK,EAAQ,CAAA,EAC9B,WAAW,IAAIA,GAAwB,CAAA,MAAA,EAAA,EAAA,kBAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAW,EAAQ,CAAA,CAAA,EAAA,CACxD,CACH,EAAA,CAAA,EACV;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAIhC,MAAM,KAAK,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}