@bspk/ui 1.1.32 → 1.1.33

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

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

package/dist/components/Textarea/textarea.css

@@ -0,0 +1,72 @@
+[data-bspk=textarea] {
+  /*! 
+  --min-rows: is set via inline style 
+  --max-rows: is set via inline style
+  */
+  display: grid;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  --border-color: var(--stroke-neutral-base);
+  --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]:has(textarea:focus-within) {
+  --border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=textarea]:has(textarea[aria-invalid]) {
+  --border-color: var(--status-error);
+}
+[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);
+  padding: var(--padding);
+  border: none;
+  background: transparent;
+  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 {
+  text-wrap: break-word;
+  resize: none;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=textarea] textarea::placeholder {
+  color: var(--foreground-neutral-on-surface-variant-03);
+}
+[data-bspk=textarea] textarea:focus-within {
+  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;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Textarea/textarea.css.js

@@ -0,0 +1,78 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=textarea] {
+  /*! 
+  --min-rows: is set via inline style 
+  --max-rows: is set via inline style
+  */
+  display: grid;
+  width: 100%;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-small);
+  overflow: hidden;
+  --border-color: var(--stroke-neutral-base);
+  --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]:has(textarea:focus-within) {
+  --border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=textarea]:has(textarea[aria-invalid]) {
+  --border-color: var(--status-error);
+}
+[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);
+  padding: var(--padding);
+  border: none;
+  background: transparent;
+  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 {
+  text-wrap: break-word;
+  resize: none;
+  color: var(--foreground-neutral-on-surface);
+  background-color: var(--surface-neutral-t1-base);
+}
+[data-bspk=textarea] textarea::placeholder {
+  color: var(--foreground-neutral-on-surface-variant-03);
+}
+[data-bspk=textarea] textarea:focus-within {
+  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;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/TextareaField/TextareaField.d.ts

@@ -0,0 +1,43 @@
+import { FormFieldProps } from '../FormField';
+import { TextareaProps } from '../Textarea';
+export type TextareaFieldProps = Pick<FormFieldProps, 'controlId' | 'helperText' | 'label'> & TextareaProps & {
+    /**
+     * Whether the character count should be displayed.
+     *
+     * @default true
+     */
+    characterCount?: boolean;
+};
+/**
+ * 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
+ * @phase DesignReview
+ */
+declare function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, characterCount, ...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/components/TextareaField/TextareaField.js

@@ -0,0 +1,46 @@
+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
+ * @phase DesignReview
+ */
+function TextareaField({ label, errorMessage: errorMessageProp, helperText, controlId: id, onChange, maxLength: maxLengthProp, invalid, readOnly, disabled, required, characterCount = true, ...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, invalid: invalid, label: label, labelTrailing: characterCount && (_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/components/TextareaField/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAWlD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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,cAAc,GAAG,IAAI,EACrB,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,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EACT,cAAc,IAAI,CACd,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,CACT,EAEL,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/components/TextareaField/TextareaFieldExample.d.ts

@@ -0,0 +1,3 @@
+import { ComponentExample } from '../../utils/demo';
+import { TextareaFieldProps } from '.';
+export declare const TextareaFieldExample: ComponentExample<TextareaFieldProps>;

package/dist/components/TextareaField/TextareaFieldExample.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TextareaFieldExample = {
+    render: ({ Component, props }) => {
+        const tooManyCharacters = Boolean(props.value && props.maxLength && props.value?.length > props.maxLength);
+        const invalid = props.invalid || tooManyCharacters;
+        return (_jsx(Component, { ...props, errorMessage: invalid ? props.errorMessage || 'Too Many characters' : '', invalid: invalid }));
+    },
+};
+//# sourceMappingURL=TextareaFieldExample.js.map

package/dist/components/TextareaField/TextareaFieldExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaFieldExample.js","sourceRoot":"","sources":["../../../src/components/TextareaField/TextareaFieldExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,MAAM,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;QAC7B,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;QAE3G,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,iBAAiB,CAAC;QAEnD,OAAO,CACH,KAAC,SAAS,OACF,KAAK,EACT,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,IAAI,qBAAqB,CAAC,CAAC,CAAC,EAAE,EACxE,OAAO,EAAE,OAAO,GAClB,CACL,CAAC;IACN,CAAC;CACJ,CAAC"}

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

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

package/dist/components/TextareaField/index.js

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

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

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

package/dist/components/ToggleOption/ToggleOption.d.ts

@@ -0,0 +1,31 @@
+import { ReactElement } from 'react';
+import './toggle-option.scss';
+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
+ * @phase Utility
+ */
+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/components/ToggleOption/ToggleOption.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './toggle-option.css.js';
+/**
+ * A utility component that wraps a checkbox, radio, and switch.
+ *
+ * @name ToggleOption
+ * @phase Utility
+ */
+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/components/ToggleOption/ToggleOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,CAAC;AAoB9B;;;;;GAKG;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/components/ToggleOption/index.d.ts

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

package/dist/components/ToggleOption/index.js

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

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

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

package/dist/components/ToggleOption/toggle-option.css

@@ -0,0 +1,47 @@
+[data-bspk=toggle-option] {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  padding: var(--spacing-sizing-03) 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: flex-start;
+  justify-content: flex-start;
+  max-width: 100%;
+}
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ToggleOption/toggle-option.css.js

@@ -0,0 +1,53 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=toggle-option] {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  padding: var(--spacing-sizing-03) 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: flex-start;
+  justify-content: flex-start;
+  max-width: 100%;
+}
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,52 @@
+import { ReactElement } from 'react';
+import { Placement } from '../../hooks/useFloating';
+import './tooltip.scss';
+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
+ * @phase DesignReview
+ */
+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/components/Tooltip/Tooltip.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cloneElement, useId, useMemo, useRef, useState } from 'react';
+import { Portal } from '../Portal';
+import { useFloating } from '../../hooks/useFloating';
+import './tooltip.css.js';
+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
+ * @phase DesignReview
+ */
+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.setReference(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/components/Tooltip/Tooltip.js.map

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

package/dist/components/Tooltip/TooltipExample.d.ts

@@ -0,0 +1,2 @@
+import { ComponentExample } from '../../utils/demo';
+export declare const TooltipExample: ComponentExample;

package/dist/components/Tooltip/TooltipExample.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../Button';
+export const TooltipExample = {
+    render: ({ props: state, Component }) => {
+        return (_jsx(_Fragment, { children: _jsx(Component, { label: "Tooltip text", ...state, placement: [state.placement].flat()[0] || 'top', children: _jsx(Button, { label: `Hover over me ${'data-variant-value' in state ? `(${state['data-variant-value']})` : ''}`, variant: "secondary" }) }) }));
+    },
+};
+//# sourceMappingURL=TooltipExample.js.map

package/dist/components/Tooltip/TooltipExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipExample.js","sourceRoot":"","sources":["../../../src/components/Tooltip/TooltipExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,cAAc,GAAqB;IAC5C,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QACpC,OAAO,CACH,4BACI,KAAC,SAAS,IAAC,KAAK,EAAC,cAAc,KAAK,KAAK,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YACtF,KAAC,MAAM,IACH,KAAK,EAAE,iBAAiB,oBAAoB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EACjG,OAAO,EAAC,WAAW,GACrB,GACM,GACb,CACN,CAAC;IACN,CAAC;CACJ,CAAC"}

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

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

package/dist/components/Tooltip/index.js

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

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

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

package/dist/components/Tooltip/tooltip.css

@@ -0,0 +1,50 @@
+[data-bspk=tooltip] {
+  position: fixed;
+  pointer-events: none;
+  z-index: var(--z-index-tooltip-popover);
+  width: max-content !important;
+  --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 0.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: transparent;
+}
+[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);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */