@bspk/ui 1.1.31 → 1.1.33

package/dist/TextInput.d.ts

@@ -1,64 +0,0 @@
-import './text-input.scss';
-import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
-import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '.';
-export declare const DEFAULT: {
-    readonly size: "medium";
-    readonly value: "";
-    readonly type: Extract<HTMLInputTypeAttribute, "number" | "text">;
-    readonly autoComplete: "off";
-};
-export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'> & InvalidPropsLibrary & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
-    /** The ref of the container. */
-    containerRef?: SetRef<HTMLDivElement>;
-    /** The ref of the input. */
-    inputRef?: SetRef<HTMLInputElement>;
-    /** 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.
-     *
-     * @default text
-     */
-    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.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextInput } from '@bspk/ui/TextInput';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @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, errorMessage, ...otherProps }: ElementProps<TextInputProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace TextInput {
-    var bspkName: string;
-}
-export { TextInput };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TextInput.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 0 0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{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}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][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-bspk=text-input][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-bspk=text-input][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-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:flex;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:not(:focus-within),[data-bspk=text-input][data-empty],[data-bspk=text-input][data-readonly],[data-bspk=text-input][data-disabled]{padding-right:var(--field-padding)}[data-bspk=text-input]:not(:focus-within) button[data-clear],[data-bspk=text-input][data-empty] button[data-clear],[data-bspk=text-input][data-readonly] button[data-clear],[data-bspk=text-input][data-disabled] button[data-clear]{display:none}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}`);;
-import { SvgCancel } from '@bspk/icons/Cancel';
-import { useId } from './hooks/useId';
-export const DEFAULT = {
-    size: 'medium',
-    value: '',
-    type: 'text',
-    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.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextInput } from '@bspk/ui/TextInput';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <TextInput aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name TextInput
- */
-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, errorMessage, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !readOnly && !disabled && invalidProp;
-    return (_jsxs("div", { "data-bspk": "text-input", "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, ref: containerRef, ...otherProps, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { "aria-errormessage": errorMessage || undefined, "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 }), _jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: _jsx(SvgCancel, {}) })] }));
-}
-TextInput.bspkName = 'TextInput';
-export { TextInput };
-//# sourceMappingURL=TextInput.js.map

package/dist/TextInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AAqCX;;;;;;;;;;;;;;;;;GAiBG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,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,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,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,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,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,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Textarea.d.ts

@@ -1,83 +0,0 @@
-import './textarea.scss';
-import { ChangeEvent } from 'react';
-import { CommonProps, InvalidPropsLibrary, SetRef } from './';
-export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> & InvalidPropsLibrary & {
-    /**
-     * Callback when the value of the field changes.
-     *
-     * @type (next: String, Event) => void
-     * @required
-     */
-    onChange: (next: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The text size of the field.
-     *
-     * @default medium
-     */
-    textSize?: 'large' | 'medium' | 'small';
-    /**
-     * The value of the field.
-     *
-     * @type multiline
-     */
-    value?: string;
-    /**
-     * The textarea control name of the field.
-     *
-     * @required
-     */
-    name: string;
-    /** The ref of the field. */
-    innerRef?: SetRef<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 will show.
-     *
-     * @default 3
-     * @minimum 3
-     * @maximum 10
-     */
-    minRows?: number;
-    /**
-     * The maximum number of rows that the textarea will show.
-     *
-     * @default 10
-     * @minimum 3
-     * @maximum 10
-     */
-    maxRows?: number;
-};
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name Textarea
- */
-declare function Textarea({ invalid: invalidProp, onChange, textSize, value, name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp, maxRows: maxRowsProp, errorMessage, ...otherProps }: TextareaProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Textarea {
-    var bspkName: string;
-}
-export { Textarea };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Textarea.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=textarea]{/*! 
---min-rows: is set via inline style 
---max-rows: is set via inline style
-*/display:grid;width:100%;--font: var(--body-base);--line-height: 20px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea][data-size=small]{--font: var(--body-small);--line-height: 20px;--padding: var(--spacing-sizing-02)}[data-bspk=textarea][data-size=large]{--font: var(--body-large);--line-height: 24px;--padding: var(--spacing-sizing-03)}[data-bspk=textarea] [data-replicated-value]{white-space:pre-wrap;visibility:hidden;overflow-y:hidden}[data-bspk=textarea] textarea,[data-bspk=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);max-width:100%}[data-bspk=textarea] textarea{--border-color: var(--stroke-neutral-base);text-wrap:break-word;resize:none;color:var(--foreground-neutral-on-surface);background-color:var(--surface-neutral-t1-base);border-radius:var(--radius-small)}[data-bspk=textarea] textarea::placeholder{color:var(--foreground-neutral-on-surface-variant-03)}[data-bspk=textarea] textarea:focus-within{--border-color: var(--stroke-neutral-focus);outline:none;color:var(--foreground-neutral-on-surface)}[data-bspk=textarea] textarea:disabled{pointer-events:none;background: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-bspk=textarea] textarea:read-only{background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));cursor:not-allowed}[data-bspk=textarea] textarea[aria-invalid]{--border-color: var(--status-error)}`);;
-import { useId } from './hooks/useId';
-const DEFAULT = {
-    minRows: 3,
-    maxRows: 10,
-    textSize: 'medium',
-};
-/**
- * A component that allows users to input large amounts of text that could span multiple lines.
- *
- * This component gives you a textarea HTML element that automatically adjusts its height to match the length of the
- * content within maximum and minimum rows. A character counter when a maxLength is set to show the number of characters
- * remaining below the limit.
- *
- * @example
- *     import { useState } from 'react';
- *     import { Textarea } from '@bspk/ui/Textarea';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>('');
- *
- *         return <Textarea aria-label="Example aria-label" name="Example name" onChange={setValue} value={value} />;
- *     }
- *
- * @element
- *
- * @name Textarea
- */
-function Textarea({ invalid: invalidProp, onChange, textSize = DEFAULT.textSize, value = '', name, 'aria-label': ariaLabel, innerRef, placeholder, id: idProp, minRows: minRowsProp = DEFAULT.minRows, maxRows: maxRowsProp = DEFAULT.maxRows, errorMessage, ...otherProps }) {
-    const id = useId(idProp);
-    const invalid = !otherProps.readOnly && !otherProps.disabled && invalidProp;
-    // ensure minRows and maxRows are within bounds
-    const minRows = Math.min(DEFAULT.maxRows, Math.max(minRowsProp, DEFAULT.minRows));
-    const maxRows = Math.max(DEFAULT.minRows, Math.min(maxRowsProp, DEFAULT.maxRows));
-    return (_jsxs("div", { "data-bspk": "textarea", "data-size": textSize, style: {
-            '--min-rows': minRows,
-            '--max-rows': maxRows,
-        }, children: [_jsx("textarea", { ...otherProps, "aria-errormessage": errorMessage || undefined, "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, wrap: "hard" }), _jsx("div", { "aria-hidden": true, "data-replicated-value": true })] }));
-}
-Textarea.bspkName = 'Textarea';
-export { Textarea };
-//# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../src/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AAGzB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,MAAM,OAAO,GAAG;IACZ,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,QAAQ;CACZ,CAAC;AAyDX;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,GAAG,OAAO,CAAC,QAAQ,EAC3B,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,OAAO,EACtC,YAAY,EACZ,GAAG,UAAU,EACD;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,QAAQ,IAAI,CAAC,UAAU,CAAC,QAAQ,IAAI,WAAW,CAAC;IAC5E,+CAA+C;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAClF,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAElF,OAAO,CACH,4BACc,UAAU,eACT,QAAQ,EACnB,KAAK,EACD;YACI,YAAY,EAAE,OAAO;YACrB,YAAY,EAAE,OAAO;SACP,aAGtB,sBACQ,UAAU,uBACK,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;oBACd,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,MAAM,CAAC,SAAS,GAAG,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EACxD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;oBACf,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;oBACnD,qEAAqE;oBACrE,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM;wBAAE,OAAO;oBAC/B,MAAM,CAAC,WAA2B,CAAC,SAAS,GAAG,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;gBACxE,CAAC,EACD,WAAW,EAAE,WAAW,EACxB,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,MAAM,GACb,EACF,mEAAyC,IACvC,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/TextareaField.d.ts

@@ -1,35 +0,0 @@
-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.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @name TextareaField
- */
-declare function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, ...textareaProps }: TextareaFieldProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace TextareaField {
-    var bspkName: string;
-}
-export { TextareaField };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TextareaField.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FormField } from './FormField';
-import { Textarea } from './Textarea';
-import { Txt } from './Txt';
-import { tryIntParse } from './utils/tryIntPsrse';
-/**
- * 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.
- *
- * @example
- *     import { useState } from 'react';
- *     import { TextareaField } from '@bspk/ui/TextareaField';
- *
- *     export function Example() {
- *         const [value, setValue] = useState<string>();
- *
- *         return (
- *             <TextareaField
- *                 aria-label="Example aria-label"
- *                 controlId="Example controlId"
- *                 label="Example label"
- *                 name="Example name"
- *                 onChange={setValue}
- *                 value={value}
- *             />
- *         );
- *     }
- *
- * @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, "data-bspk": "textarea-field", 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/dist/TextareaField.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../src/TextareaField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;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;IACjB,MAAM,SAAS,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE/E,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EACT,KAAC,GAAG,IACA,KAAK,EAAE;gBACH,KAAK,EAAE,iDAAiD;aAC3D,EACD,OAAO,EAAC,YAAY,YAEnB,GAAG,aAAa,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC,GAAG,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,GAC5E,EAEV,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OACD,aAAa,KACb,UAAU,gBACF,aAAa,CAAC,YAAY,CAAC,IAAI,KAAK,EAChD,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;gBACtB,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1B,CAAC,EACD,QAAQ,EAAE,QAAQ,GACpB,CACL,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/ToggleOption.d.ts

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

package/dist/ToggleOption.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=toggle-option]{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}[data-bspk=toggle-option]:has([data-description]){align-items:unset}@media(any-pointer: coarse){[data-bspk=toggle-option]{min-height:var(--spacing-sizing-12)}}[data-bspk=toggle-option] [data-content]{display:flex;flex-direction:column;padding:2px 0}[data-bspk=toggle-option] [data-label]{color:var(--foreground-neutral-on-surface);font:var(--labels-base)}[data-bspk=toggle-option] [data-description]{font:var(--body-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-pseudo=focus] [data-bspk=toggle-option]:not(:has(:disabled)),[data-bspk=toggle-option]:not(:has(:disabled)):focus-visible,[data-bspk=toggle-option]:not(:has(:disabled)):has(*:focus-visible){outline:var(--stroke-neutral-focus) 2px solid}[data-bspk=toggle-option]:has(:disabled) [data-label]{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=toggle-option]:has(:disabled) [data-description]{color:var(--foreground-neutral-disabled-on-surface)}`);;
-/**
- * A utility component that wraps a checkbox, radio, and switch.
- *
- * @name ToggleOption
- */
-function ToggleOption({ label, description, children }) {
-    return (_jsxs("label", { "data-bspk": "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';
-export { ToggleOption };
-//# sourceMappingURL=ToggleOption.js.map

package/dist/ToggleOption.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../src/ToggleOption.tsx"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAC;AAqB9B;;;;GAIG;AACH,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAqB;IACrE,OAAO,CACH,8BAAiB,eAAe,aAC5B,+CAAoB,QAAQ,GAAQ,EACpC,iDACI,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACxD,IACH,CACX,CAAC;AACN,CAAC;AAED,YAAY,CAAC,QAAQ,GAAG,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/Tooltip.d.ts

@@ -1,51 +0,0 @@
-import './tooltip.scss';
-import { ReactElement } from 'react';
-import { Placement } from './hooks/useFloating';
-export type TooltipProps = {
-    /**
-     * The placement of the tooltip.
-     *
-     * @default top
-     */
-    placement?: Extract<Placement, 'bottom' | 'left' | 'right' | 'top'>;
-    /** The tooltip content. */
-    label: string;
-    /**
-     * A single element that will trigger the tooltip when hovered over.
-     *
-     * @type ReactElement
-     * @required
-     */
-    children: ReactElement;
-    /** Determines if the tooltip is disabled. */
-    disabled?: boolean;
-    /**
-     * Determines if the tooltip should hide the tail.
-     *
-     * @default true
-     */
-    showTail?: boolean;
-};
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { Tooltip } from '@bspk/ui/Tooltip';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
- *             </Tooltip>
- *         );
- *     }
- *
- * @name Tooltip
- */
-declare function Tooltip({ placement, label, children, disabled, showTail, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Tooltip {
-    var bspkName: string;
-}
-export { Tooltip };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Tooltip.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=tooltip]{position:fixed;pointer-events:none;z-index:var(--z-index-tooltip-popover);--arrow-size: var(--spacing-sizing-01);--arrow-offset: calc(var(--arrow-size) * -2);--arrow-color: var(--surface-neutral-inverse)}[data-bspk=tooltip] [data-text]{display:block;z-index:2;position:relative;background-color:var(--surface-neutral-inverse);border-radius:var(--radius-small);color:var(--foreground-neutral-on-inverse-surface);box-shadow:var(--drop-shadow-float);font:var(--labels-small);padding:var(--spacing-sizing-01) var(--spacing-sizing-02);border:none;transition:opacity .2s ease-in-out;width:max-content}[data-bspk=tooltip] [data-arrow]{display:block;z-index:1;position:absolute;width:0;height:0;border-style:solid;border-width:var(--arrow-size) var(--arrow-size) var(--arrow-size) var(--arrow-size);border-color:rgba(0,0,0,0)}[data-bspk=tooltip][data-placement=bottom] [data-arrow]{top:var(--arrow-offset);border-bottom-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=top] [data-arrow]{border-top-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=right] [data-arrow]{margin-left:var(--arrow-offset);border-right-color:var(--arrow-color)}[data-bspk=tooltip][data-placement=left] [data-arrow]{right:var(--arrow-offset);border-left-color:var(--arrow-color)}`);;
-import { cloneElement, useId, useMemo, useRef, useState } from 'react';
-import { Portal } from './Portal';
-import { useFloating } from './hooks/useFloating';
-const DEFAULT = {
-    placement: 'top',
-    showTail: true,
-    disabled: false,
-};
-/**
- * Brief message that provide additional guidance and helps users perform an action if needed.
- *
- * @example
- *     import { Tooltip } from '@bspk/ui/Tooltip';
- *     import { Button } from '@bspk/ui/Button';
- *
- *     export function Example() {
- *         return (
- *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
- *             </Tooltip>
- *         );
- *     }
- *
- * @name Tooltip
- */
-function Tooltip({ placement = DEFAULT.placement, label, children, disabled = DEFAULT.disabled, showTail = DEFAULT.showTail, }) {
-    const id = useId();
-    const [show, setShow] = useState(false);
-    const child = useMemo(() => !disabled &&
-        children &&
-        cloneElement(children, {
-            onMouseOver: () => setShow(true),
-            onMouseLeave: () => setShow(false),
-            'aria-describedby': id,
-        }), [children, disabled, id]);
-    const arrowRef = useRef(null);
-    const { floatingStyles, middlewareData, elements } = useFloating({
-        placement,
-        strategy: 'fixed',
-        offsetOptions: showTail ? 8 : 4,
-        arrowRef,
-        hide: !show,
-    });
-    return disabled ? (children) : (_jsxs(_Fragment, { children: [child, label && (_jsx(Portal, { children: _jsxs("div", { "data-bspk": "tooltip", "data-placement": middlewareData?.offset?.placement, id: id, ref: (node) => {
-                        elements.setFloating(node);
-                        elements.setTrigger(document.querySelector(`[aria-describedby="${id}"]`));
-                    }, role: "tooltip", style: floatingStyles, children: [_jsx("span", { "data-text": true, children: label }), _jsx("span", { "aria-hidden": true, "data-arrow": true, ref: (node) => {
-                                arrowRef.current = node;
-                            }, style: {
-                                zIndex: 1000,
-                                opacity: showTail ? 1 : 0,
-                                left: middlewareData.arrow?.x != null ? `${middlewareData.arrow?.x}px` : '',
-                                top: middlewareData.arrow?.y != null ? `${middlewareData.arrow?.y}px` : '',
-                            } })] }) }))] }));
-}
-Tooltip.bspkName = 'Tooltip';
-export { Tooltip };
-//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip.js.map

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

package/dist/TopNavigation.d.ts

@@ -1,16 +0,0 @@
-import './top-navigation.scss';
-export type TopNavigationProps = {
-    /** The content of the top navigation. */
-    children: string;
-};
-/**
- * Component description coming soon.
- *
- * @name TopNavigation
- */
-declare function TopNavigation({ children }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TopNavigation {
-    var bspkName: string;
-}
-export { TopNavigation };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/TopNavigation.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=top-navigation]{display:flex}`);;
-/**
- * Component description coming soon.
- *
- * @name TopNavigation
- */
-function TopNavigation({ children }) {
-    return _jsx("div", { "data-bspk": "top-navigation", children: children });
-}
-TopNavigation.bspkName = 'TopNavigation';
-export { TopNavigation };
-//# sourceMappingURL=TopNavigation.js.map

package/dist/TopNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TopNavigation.js","sourceRoot":"","sources":["../src/TopNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,uBAAuB,CAAC;AAO/B;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAAsB;IACnD,OAAO,2BAAe,gBAAgB,YAAE,QAAQ,GAAO,CAAC;AAC5D,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/Txt.d.ts

@@ -1,45 +0,0 @@
-import { ElementType } from 'react';
-import { TxtVariant } from './utils/txtVariants';
-import { ElementProps } from './';
-export type TxtProps<As extends ElementType = 'span'> = {
-    /**
-     * The element type to render as.
-     *
-     * @default span
-     * @type ElementType
-     */
-    as?: As;
-    /**
-     * The content to render.
-     *
-     * @type string
-     * @required
-     */
-    children: unknown;
-    /**
-     * The variant to use.
-     *
-     * @default body-base
-     */
-    variant?: TxtVariant;
-    /** The id of the element. */
-    id?: string;
-};
-/**
- * A text component that applies the correct font styles based on the variant and size. variant
- *
- * @example
- *     import { Txt } from '@bspk/ui/Txt';
- *
- *     export function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
- *
- * @name Txt
- */
-declare function Txt<As extends ElementType = 'span'>({ children, as, variant, style: styleProp, ...containerProps }: ElementProps<TxtProps<As>, As>): import("react/jsx-runtime").JSX.Element | null;
-declare namespace Txt {
-    var bspkName: string;
-}
-export { Txt };
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/Txt.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * A text component that applies the correct font styles based on the variant and size. variant
- *
- * @example
- *     import { Txt } from '@bspk/ui/Txt';
- *
- *     export function Example() {
- *         return <Txt>Example Txt</Txt>;
- *     }
- *
- * @name Txt
- */
-function Txt({ children, as, variant = 'body-base', style: styleProp, ...containerProps }) {
-    const content = children?.toString();
-    if (!content)
-        return null;
-    const As = as || 'span';
-    return (_jsx(As, { ...containerProps, "data-bspk": "txt", style: { ...styleProp, font: `var(--${variant})` }, children: content }));
-}
-Txt.bspkName = 'Txt';
-export { Txt };
-//# sourceMappingURL=Txt.js.map

package/dist/Txt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Txt.js","sourceRoot":"","sources":["../src/Txt.tsx"],"names":[],"mappings":";AA+BA;;;;;;;;;;;GAWG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,OAAO,GAAG,WAAW,EACrB,KAAK,EAAE,SAAS,EAChB,GAAG,cAAc,EACY;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,QAAQ,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO;QAAE,OAAO,IAAI,CAAC;IAE1B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,KAAC,EAAE,OAAK,cAAc,eAAY,KAAK,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,IAAI,EAAE,SAAS,OAAO,GAAG,EAAE,YACrF,OAAO,GACP,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/avatar-group.css

@@ -1 +0,0 @@
-[data-bspk=avatar-group]{width:100%}[data-bspk=avatar-group] [data-wrap]{width:100%;display:flex;flex-direction:row;align-items:end;justify-content:end;gap:var(--spacing-sizing-02);overflow:hidden}