@bspk/ui 1.1.34 → 1.2.0

package/dist/components/TimeInput/TimeInput.d.ts

@@ -0,0 +1,26 @@
+import './time-input.scss';
+import { TextInputProps } from '-/components/TextInput';
+export declare const MINUTE_OPTIONS: number[];
+export declare const HOUR_OPTIONS: number[];
+type Meridiem = 'AM' | 'PM';
+export declare const MERIDIEM_OPTIONS: Meridiem[];
+export type TimeInputProps = Pick<TextInputProps, 'aria-describedby' | 'aria-errormessage' | 'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & {
+    value?: string;
+};
+/**
+ * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
+ * select a date.
+ *
+ * @example
+ *     import { TimeInput } from '@bspk/ui/TimeInput';
+ *
+ *     function Example() {
+ *         return <TimeInput>Example TimeInput</TimeInput>;
+ *     }
+ *
+ * @name TimeInput
+ * @phase UXReview
+ */
+export declare function TimeInput({ value, 'aria-label': ariaLabel, disabled, id: idProp, invalid, readOnly, name, size, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TimeInput/TimeInput.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SvgSchedule } from '@bspk/icons/Schedule';
+import { useEffect, useState } from 'react';
+import './time-input.css.js';
+import { TimeInputListbox } from './Listbox';
+import { TimeInputSegment } from './Segment';
+import { Button } from '../Button';
+import { Menu } from '../Menu';
+import { useFloating } from '../../hooks/useFloating';
+import { useId } from '../../hooks/useId';
+import { handleKeyDown } from '../../utils/handleKeyDown';
+export const MINUTE_OPTIONS = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
+export const HOUR_OPTIONS = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export const MERIDIEM_OPTIONS = ['AM', 'PM'];
+/**
+ * An input field that allows a customer to manually type in a specific time or triggers a time picker combobox to
+ * select a date.
+ *
+ * @example
+ *     import { TimeInput } from '@bspk/ui/TimeInput';
+ *
+ *     function Example() {
+ *         return <TimeInput>Example TimeInput</TimeInput>;
+ *     }
+ *
+ * @name TimeInput
+ * @phase UXReview
+ */
+export function TimeInput({ value, 'aria-label': ariaLabel, disabled, id: idProp, invalid, readOnly, name, size, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, }) {
+    const id = useId(idProp);
+    const [inputValue, setInputValue] = useState(value);
+    const [hours, setHours] = useState();
+    const [minutes, setMinutes] = useState();
+    const [meridiem, setMeridiem] = useState('AM');
+    useEffect(() => {
+        setInputValue(`${hours?.toString().padStart(2, '0')}:${minutes?.toString().padStart(2, '0')} ${meridiem || ''}`.trim());
+        if (hours !== undefined && minutes === undefined)
+            setMinutes(0);
+    }, [hours, minutes, meridiem]);
+    const [open, setOpen] = useState(false);
+    const { floatingStyles, elements } = useFloating({
+        strategy: 'fixed',
+        refWidth: true,
+        offsetOptions: 4,
+        hide: !open,
+    });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-aria-label": ariaLabel || undefined, "data-bspk": "time-input", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-name": name || undefined, "data-open": open || undefined, "data-readonly": readOnly || undefined, "data-size": size || undefined, "data-value": inputValue || undefined, id: id, onClick: () => {
+                    elements.reference?.querySelector('[tabIndex]')?.focus();
+                }, onKeyDown: handleKeyDown({ Escape: () => setOpen(false) }), ref: elements.setReference, role: "group", children: [_jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: hours, disabled: disabled, name: `${name}-hours`, onChange: (next) => setHours(next || undefined), readOnly: readOnly, type: "hours" }), _jsx("span", { "aria-hidden": "true", children: ":" }), _jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: minutes, disabled: disabled, name: `${name}-minutes`, onChange: (next) => setMinutes(next || undefined), readOnly: readOnly, type: "minutes" }), _jsx(TimeInputSegment, { ariaLabel: ariaLabel, defaultValue: meridiem, disabled: disabled, name: `${name}-meridiem`, onChange: (next) => setMeridiem(next || 'AM'), readOnly: readOnly, type: "meridiem" }), _jsx(Button, { icon: _jsx(SvgSchedule, {}), iconOnly: true, label: `${open ? 'Close' : 'Open'} Time Picker`, onClick: () => {
+                            setOpen(!open);
+                            elements.reference?.focus();
+                        }, variant: "tertiary" })] }), !!open && (_jsx(Menu, { floating: true, innerRef: (node) => {
+                    if (!node)
+                        return;
+                    elements.setFloating(node);
+                    node.querySelector('[data-scroll-column="hours"]')?.focus();
+                }, onOutsideClick: () => {
+                    setOpen(false);
+                }, owner: "time-input", scroll: false, style: { ...floatingStyles }, children: _jsxs("div", { "data-scroll-values": true, children: [_jsx(TimeInputListbox, { onSelect: setHours, options: HOUR_OPTIONS.map((h) => h), selectedValue: hours, type: "hours" }), _jsx(TimeInputListbox, { onSelect: setMinutes, options: MINUTE_OPTIONS, selectedValue: minutes, type: "minutes" }), _jsx(TimeInputListbox, { onSelect: setMeridiem, onTab: (e) => {
+                                e.preventDefault();
+                                setOpen(false);
+                                setTimeout(() => elements.reference?.focus(), 10);
+                                // Focus back on the input after closing
+                            }, options: MERIDIEM_OPTIONS, selectedValue: meridiem, type: "meridiem" })] }) }))] }));
+}
+//# sourceMappingURL=TimeInput.js.map

package/dist/components/TimeInput/TimeInput.js.map

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

package/dist/components/TimeInput/TimeInputExample.d.ts

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

package/dist/components/TimeInput/TimeInputExample.js

@@ -0,0 +1,4 @@
+export const TimeInputExample = {
+    variants: false,
+};
+//# sourceMappingURL=TimeInputExample.js.map

package/dist/components/TimeInput/TimeInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeInputExample.js","sourceRoot":"","sources":["../../../src/components/TimeInput/TimeInputExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,gBAAgB,GAAqC;IAC9D,QAAQ,EAAE,KAAK;CAClB,CAAC"}

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

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

package/dist/components/TimeInput/index.js

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

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

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

package/dist/components/TimeInput/time-input.css

@@ -0,0 +1,138 @@
+[data-bspk=time-input] {
+  --border-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-flow: row;
+  background-color: var(--surface-neutral-t1-base);
+  border: solid 1px var(--border-color);
+  height: var(--field-height);
+  border-radius: var(--radius-sm);
+  padding: 0 0 0 var(--field-padding);
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+}
+[data-bspk=time-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=time-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=time-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=time-input][data-disabled], [data-bspk=time-input]:has(input[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=time-input][data-disabled] > *, [data-bspk=time-input]:has(input[disabled]) > * {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=time-input][data-invalid] {
+  --border-color: var(--status-error);
+}
+[data-bspk=time-input][data-size=small] {
+  --field-padding: var(--spacing-sizing-02);
+  --field-height: var(--spacing-sizing-08);
+  --field-font: var(--body-small);
+}
+[data-bspk=time-input][data-size=medium] {
+  --field-padding: var(--spacing-sizing-03);
+  --field-height: var(--spacing-sizing-10);
+  --field-font: var(--body-base);
+}
+[data-bspk=time-input][data-size=large] {
+  --field-padding: var(--spacing-sizing-03);
+  --field-height: var(--spacing-sizing-12);
+  --field-font: var(--body-large);
+}
+[data-bspk=time-input] [aria-hidden] {
+  font: var(--field-font);
+}
+[data-bspk=time-input] [data-input] {
+  background-color: transparent !important;
+  border: none;
+  outline: none;
+  padding: 0;
+  height: var(--field-height);
+  font: var(--field-font);
+  min-width: 0;
+  text-align: right;
+  line-height: var(--field-height);
+  width: fit-content;
+}
+[data-bspk=time-input] [data-input][data-type=meridiem] {
+  text-transform: uppercase;
+  margin-left: 0.25em;
+}
+[data-bspk=time-input] [data-input] * {
+  pointer-events: none;
+}
+[data-bspk=time-input] [data-bspk=button] {
+  margin-left: auto;
+}
+[data-bspk=time-input] [data-bspk=button]:focus {
+  outline-offset: -4px;
+  border-radius: var(--radius-md);
+}
+[data-bspk=time-input]:focus-within, [data-bspk=time-input][data-open] {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
+}
+
+[data-bspk-owner=time-input][data-bspk=menu] {
+  overflow: hidden;
+  height: 324px;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  justify-content: center;
+  align-items: start;
+  gap: var(--spacing-sizing-04);
+  padding: var(--spacing-sizing-04);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] {
+  padding: 0 var(--spacing-sizing-01);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden auto;
+  font: var(--labels-base);
+  gap: var(--spacing-sizing-02);
+  align-items: center;
+  justify-content: start;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-sizing-13);
+  flex: 0;
+  border-radius: var(--radius-sm);
+  font: var(--labels-base);
+  line-height: var(--spacing-sizing-10);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span[aria-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus {
+  outline: none;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
+  outline: 2px solid var(--interactions-neutral-hover-opacity);
+  outline-offset: -2px;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TimeInput/time-input.css.js

@@ -0,0 +1,143 @@
+/** * 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=time-input] {
+  --border-color: var(--stroke-neutral-base);
+  display: flex;
+  flex-flow: row;
+  background-color: var(--surface-neutral-t1-base);
+  border: solid 1px var(--border-color);
+  height: var(--field-height);
+  border-radius: var(--radius-sm);
+  padding: 0 0 0 var(--field-padding);
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+}
+[data-bspk=time-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=time-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=time-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=time-input][data-disabled], [data-bspk=time-input]:has(input[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=time-input][data-disabled] > *, [data-bspk=time-input]:has(input[disabled]) > * {
+  color: var(--foreground-neutral-disabled-on-surface);
+}
+[data-bspk=time-input][data-invalid] {
+  --border-color: var(--status-error);
+}
+[data-bspk=time-input][data-size=small] {
+  --field-padding: var(--spacing-sizing-02);
+  --field-height: var(--spacing-sizing-08);
+  --field-font: var(--body-small);
+}
+[data-bspk=time-input][data-size=medium] {
+  --field-padding: var(--spacing-sizing-03);
+  --field-height: var(--spacing-sizing-10);
+  --field-font: var(--body-base);
+}
+[data-bspk=time-input][data-size=large] {
+  --field-padding: var(--spacing-sizing-03);
+  --field-height: var(--spacing-sizing-12);
+  --field-font: var(--body-large);
+}
+[data-bspk=time-input] [aria-hidden] {
+  font: var(--field-font);
+}
+[data-bspk=time-input] [data-input] {
+  background-color: transparent !important;
+  border: none;
+  outline: none;
+  padding: 0;
+  height: var(--field-height);
+  font: var(--field-font);
+  min-width: 0;
+  text-align: right;
+  line-height: var(--field-height);
+  width: fit-content;
+}
+[data-bspk=time-input] [data-input][data-type=meridiem] {
+  text-transform: uppercase;
+  margin-left: 0.25em;
+}
+[data-bspk=time-input] [data-input] * {
+  pointer-events: none;
+}
+[data-bspk=time-input] [data-bspk=button] {
+  margin-left: auto;
+}
+[data-bspk=time-input] [data-bspk=button]:focus {
+  outline-offset: -4px;
+  border-radius: var(--radius-md);
+}
+[data-bspk=time-input]:focus-within, [data-bspk=time-input][data-open] {
+  --border-color: var(--stroke-neutral-focus);
+  outline: 1px solid var(--stroke-neutral-focus);
+}
+
+[data-bspk-owner=time-input][data-bspk=menu] {
+  overflow: hidden;
+  height: 324px;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  justify-content: center;
+  align-items: start;
+  gap: var(--spacing-sizing-04);
+  padding: var(--spacing-sizing-04);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] {
+  padding: 0 var(--spacing-sizing-01);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden auto;
+  font: var(--labels-base);
+  gap: var(--spacing-sizing-02);
+  align-items: center;
+  justify-content: start;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-sizing-13);
+  flex: 0;
+  border-radius: var(--radius-sm);
+  font: var(--labels-base);
+  line-height: var(--spacing-sizing-10);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column] span[aria-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus {
+  outline: none;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active] {
+  background: var(--interactions-neutral-hover-opacity);
+  outline: 2px solid var(--interactions-neutral-hover-opacity);
+  outline-offset: -2px;
+}
+[data-bspk-owner=time-input][data-bspk=menu] [data-scroll-values] [data-scroll-column]:focus span[data-active][aria-selected] {
+  background: var(--surface-brand-primary);
+  color: var(--foreground-brand-on-primary);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

@@ -1,8 +1,12 @@
 import { ReactElement } from 'react';
 import './toggle-option.scss';
-export type ToggleOptionProps = {
+import { CommonProps } from '-/types/common';
+export type ToggleOptionControlProps<T extends {
+    'aria-label'?: string;
+}> = Omit<T, 'aria-label'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+export type ToggleOptionProps = CommonProps<'disabled'> & {
     /**
-     * The label of the option. Also used as the aria-label of the checkbox.
+     * The label of the option. Also used as the aria-label of the control.
      *
      * @required
      */
@@ -23,9 +27,5 @@ export type ToggleOptionProps = {
  * @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 };
+export declare function ToggleOption({ label, description, children, disabled }: ToggleOptionProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ToggleOption/ToggleOption.js

@@ -6,9 +6,7 @@ import './toggle-option.css.js';
  * @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 })] })] }));
+export function ToggleOption({ label, description, children, disabled }) {
+    return (_jsxs("label", { "aria-disabled": !!disabled || undefined, "data-bspk": "toggle-option", children: [_jsx("span", { "data-control": true, children: 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

@@ -1 +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"}
+{"version":3,"file":"ToggleOption.js","sourceRoot":"","sources":["../../../src/components/ToggleOption/ToggleOption.tsx"],"names":[],"mappings":";AAEA,OAAO,sBAAsB,CAAC;AAwB9B;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAqB;IACtF,OAAO,CACH,kCAAsB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAAY,eAAe,aACpE,+CAAoB,QAAQ,GAAQ,EACpC,6CAAkB,KAAK,GAAQ,EAC9B,WAAW,IAAI,mDAAwB,WAAW,GAAQ,IACvD,CACX,CAAC;AACN,CAAC"}

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

@@ -1,17 +1,15 @@
 [data-bspk=toggle-option] {
-  display: flex;
+  display: grid;
   width: 100%;
-  flex-direction: row;
-  padding: var(--spacing-sizing-03) var(--spacing-sizing-01) 0 0;
-  gap: var(--spacing-sizing-02);
+  grid-template-columns: auto 1fr;
+  grid-column-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%;
+  padding: var(--spacing-sizing-01);
 }
 [data-bspk=toggle-option]:has([data-description]) {
   align-items: unset;
@@ -21,26 +19,33 @@
     min-height: var(--spacing-sizing-12);
   }
 }
-[data-bspk=toggle-option] [data-content] {
+[data-bspk=toggle-option] [data-control],
+[data-bspk=toggle-option] [data-label],
+[data-bspk=toggle-option] [data-description] {
   display: flex;
-  flex-direction: column;
-  padding: 2px 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
 }
 [data-bspk=toggle-option] [data-label] {
   color: var(--foreground-neutral-on-surface);
   font: var(--labels-base);
 }
 [data-bspk=toggle-option] [data-description] {
+  grid-column-start: 2;
   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) {
+[data-pseudo=focus] [data-bspk=toggle-option]:not([aria-disabled]), [data-bspk=toggle-option]:not([aria-disabled]):focus-visible, [data-bspk=toggle-option]:not([aria-disabled]):has(*:focus-visible) {
   outline: var(--stroke-neutral-focus) 2px solid;
 }
-[data-bspk=toggle-option]:has(:disabled) [data-label] {
+[data-bspk=toggle-option][aria-disabled] {
+  cursor: not-allowed;
+}
+[data-bspk=toggle-option][aria-disabled] [data-label] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=toggle-option]:has(:disabled) [data-description] {
+[data-bspk=toggle-option][aria-disabled] [data-description] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
 

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

@@ -2,19 +2,17 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=toggle-option] {
-  display: flex;
+  display: grid;
   width: 100%;
-  flex-direction: row;
-  padding: var(--spacing-sizing-03) var(--spacing-sizing-01) 0 0;
-  gap: var(--spacing-sizing-02);
+  grid-template-columns: auto 1fr;
+  grid-column-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%;
+  padding: var(--spacing-sizing-01);
 }
 [data-bspk=toggle-option]:has([data-description]) {
   align-items: unset;
@@ -24,30 +22,36 @@ style.appendChild(document.createTextNode(`[data-bspk=toggle-option] {
     min-height: var(--spacing-sizing-12);
   }
 }
-[data-bspk=toggle-option] [data-content] {
+[data-bspk=toggle-option] [data-control],
+[data-bspk=toggle-option] [data-label],
+[data-bspk=toggle-option] [data-description] {
   display: flex;
-  flex-direction: column;
-  padding: 2px 0;
+  flex-direction: row;
+  align-items: center;
+  justify-content: start;
 }
 [data-bspk=toggle-option] [data-label] {
   color: var(--foreground-neutral-on-surface);
   font: var(--labels-base);
 }
 [data-bspk=toggle-option] [data-description] {
+  grid-column-start: 2;
   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) {
+[data-pseudo=focus] [data-bspk=toggle-option]:not([aria-disabled]), [data-bspk=toggle-option]:not([aria-disabled]):focus-visible, [data-bspk=toggle-option]:not([aria-disabled]):has(*:focus-visible) {
   outline: var(--stroke-neutral-focus) 2px solid;
 }
-[data-bspk=toggle-option]:has(:disabled) [data-label] {
+[data-bspk=toggle-option][aria-disabled] {
+  cursor: not-allowed;
+}
+[data-bspk=toggle-option][aria-disabled] [data-label] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=toggle-option]:has(:disabled) [data-description] {
+[data-bspk=toggle-option][aria-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

@@ -1,6 +1,12 @@
 import { ReactElement } from 'react';
-import { Placement } from '../../hooks/useFloating';
+import { Placement } from '-/hooks/useFloating';
 import './tooltip.scss';
+export type TooltipTriggerProps = {
+    onMouseOver?: () => void;
+    onMouseLeave?: () => void;
+    onFocus?: () => void;
+    'aria-describedby'?: string;
+};
 export type TooltipProps = {
     /**
      * The placement of the tooltip.
@@ -11,12 +17,11 @@ export type TooltipProps = {
     /** The tooltip content. */
     label: string;
     /**
-     * A single element that will trigger the tooltip when hovered over.
+     * A callback to render the trigger element.
      *
-     * @type ReactElement
      * @required
      */
-    children: ReactElement;
+    children: (triggerProps: TooltipTriggerProps) => ReactElement;
     /** Determines if the tooltip is disabled. */
     disabled?: boolean;
     /**
@@ -36,17 +41,13 @@ export type TooltipProps = {
  *     export function Example() {
  *         return (
  *             <Tooltip label="I explain what this button does" placement="top">
- *                 <Button>Click me</Button>
+ *                 {(triggerProps) => <Button {...triggerProps}>Click me</Button>}
  *             </Tooltip>
  *         );
  *     }
  *
  * @name Tooltip
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Tooltip({ placement, label, children, disabled, showTail, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Tooltip {
-    var bspkName: string;
-}
-export { Tooltip };
+export declare function Tooltip({ placement, label, children, disabled, showTail, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */