@bspk/ui 1.3.4 → 1.3.5

package/src/components/TimePicker/TimePicker.tsx

@@ -99,7 +99,7 @@ export function TimePicker({
 
     const { floatingStyles, elements } = useFloating({
         strategy: 'fixed',
-        refWidth: true,
+        refWidth: false,
         offsetOptions: 4,
         hide: !open,
     });
@@ -230,7 +230,7 @@ export function TimePicker({
                     variant="tertiary"
                 />
             </div>
-            {!!open && (
+            {open && (
                 <Portal>
                     <Menu
                         id={menuId}
@@ -241,6 +241,7 @@ export function TimePicker({
                         label="Select time"
                         owner="time-picker"
                         style={floatingStyles}
+                        width="fit-content"
                     >
                         <FocusTrap
                             focusTrapOptions={{
@@ -256,7 +257,16 @@ export function TimePicker({
                                         minutes: node?.querySelector('[data-scroll-column="minutes"]') as HTMLElement,
                                         meridiem: node?.querySelector('[data-scroll-column="meridiem"]') as HTMLElement,
                                     };
-                                    listBoxRefs.current.hours?.focus();
+                                    const activeHour =
+                                        listBoxRefs.current.hours?.querySelector<HTMLElement>('[data-active]');
+                                    const activeMinute =
+                                        listBoxRefs.current.minutes?.querySelector<HTMLElement>('[data-active]');
+                                    const activeMeridiem =
+                                        listBoxRefs.current.meridiem?.querySelector<HTMLElement>('[data-active]');
+                                    activeHour?.scrollIntoView({ block: 'nearest' });
+                                    activeMinute?.scrollIntoView({ block: 'nearest' });
+                                    activeMeridiem?.scrollIntoView({ block: 'nearest' });
+                                    activeHour?.focus();
                                 }}
                             >
                                 <TimePickerListbox

package/src/components/TimePickerField/TimePickerField.tsx

@@ -18,10 +18,17 @@ export function TimePickerField({
     helperText,
     labelTrailing,
     errorMessage,
+    style,
     ...controlProps
 }: TimePickerFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <TimePicker {...controlProps} />
         </FormField>
     );

package/src/components/ToggleOption/ToggleOption.tsx

@@ -1,28 +1,28 @@
 import './toggle-option.scss';
 import { ReactElement } from 'react';
-import { ListItem } from '-/components/ListItem';
+import { ListItem, ListItemProps } from '-/components/ListItem';
 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' | 'readOnly'> & {
-    /**
-     * The label of the option. Also used as the aria-label of the control.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * The description of the option.
-     *
-     * @type multiline
-     * @type multiline
-     */
-    description?: string;
-    /** The control element to use. */
-    children?: ReactElement;
-};
+export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> &
+    Omit<ListItemProps, 'as' | 'label' | 'leading' | 'subtext' | 'trailing'> & {
+        /**
+         * The label of the option. Also used as the aria-label of the control.
+         *
+         * @required
+         */
+        label: string;
+        /**
+         * The description of the option.
+         *
+         * @type multiline
+         */
+        description?: string;
+        /** The control element to use. */
+        children?: ReactElement;
+    };
 
 /**
  * A utility component that wraps a checkbox, radio, and switch.
@@ -30,9 +30,10 @@ export type ToggleOptionProps = CommonProps<'disabled' | 'readOnly'> & {
  * @name ToggleOption
  * @phase Utility
  */
-export function ToggleOption({ label, description, children, disabled, readOnly }: ToggleOptionProps) {
+export function ToggleOption({ label, description, children, disabled, readOnly, ...props }: ToggleOptionProps) {
     return (
         <ListItem
+            {...props}
             as="label"
             data-disabled={disabled}
             data-readonly={readOnly}

package/src/components/Truncated/Truncated.tsx

@@ -4,7 +4,7 @@ import { Tooltip, TooltipTriggerProps } from '-/components/Tooltip';
 import { useTruncatedText } from '-/hooks/useTruncatedText';
 import { ElementConstructorProps } from '-/types/common';
 
-export type TruncatedProps<As extends ElementType = 'span'> = {
+export type TruncatedProps<As extends ElementType = ElementType> = {
     /**
      * The element type to render as.
      *
@@ -35,7 +35,7 @@ export type TruncatedProps<As extends ElementType = 'span'> = {
  * @name Truncated
  * @phase Utility
  */
-export function Truncated<As extends ElementType = 'span'>({
+export function Truncated<As extends ElementType = ElementType>({
     children,
     label,
     ...props

package/src/components/Txt/Txt.tsx

@@ -4,7 +4,7 @@ import { SkeletonText } from '-/components/SkeletonText';
 import { ElementProps } from '-/types/common';
 import { TxtVariant } from '-/utils/txtVariants';
 
-export type TxtProps<As extends ElementType = 'span'> = {
+export type TxtProps<As extends ElementType = ElementType> = {
     /**
      * The element type to render as.
      *
@@ -56,7 +56,7 @@ export type TxtProps<As extends ElementType = 'span'> = {
  * @name Txt
  * @phase UXReview
  */
-export function Txt<As extends ElementType = 'span'>({
+export function Txt<As extends ElementType = ElementType>({
     children,
     as,
     variant = 'body-base',

package/src/hooks/useArrowNavigation.ts

@@ -39,9 +39,7 @@ type UseArrowNavigationProps = {
  * A hook to manage arrow key navigation for a list of elements.
  *
  * @example
- *     ```tsx
  *     const { activeElementId, setActiveElementId, arrowKeyCallbacks } = useArrowNavigation(['id1', 'id2', 'id3']);
- *     ```;
  *
  * @returns An object containing:
  *

package/src/hooks/useCheckboxGroupState.ts

@@ -6,22 +6,19 @@ import { CheckboxProps } from '-/components/Checkbox';
  * A hook to manage the state of a group of checkboxes. Used alongside the CheckboxGroup component.
  *
  * @example
- *     import { Checkbox } from "@bspk/ui/Checkbox";
- *     import { useCheckboxGroupState } from "@bspk/ui/hooks/useCheckboxGroupState";
+ *     import { Checkbox } from '@bspk/ui/Checkbox';
+ *     import { useCheckboxGroupState } from '@bspk/ui/hooks/useCheckboxGroupState';
  *
  *     function Example() {
- *     const allValues = ["Red", "Orange", "Yellow", "Green"];
- *
- *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, "fruits");
- *
+ *     const allValues = ['Red', 'Orange', 'Yellow', 'Green'];
+ *     const { allCheckboxProps, checkboxProps, values } = useCheckboxGroupState(allValues, 'fruits');
  *     return (
- *     <>
- *     <pre>Selected Values: {values.join(", ")}</pre>
- *     <Checkbox aria-label="All" {...allCheckboxProps} />
+ *     <div>
+ *     <pre>Selected Values: {values.join(', ')}</pre> <Checkbox aria-label="All" {...allCheckboxProps} />{' '}
  *     {allValues.map((value) => (
  *     <Checkbox key={value} aria-label={value} {...checkboxProps(value)} />
  *     ))}
- *     </>
+ *     </div>
  *     );
  *     }
  *

package/src/hooks/useFloating.ts

@@ -158,13 +158,14 @@ export function useFloating({
                     arrowRef?.current && arrow({ element: arrowRef.current, padding: 8 }),
                     offset(offsetOptions),
                     flip(),
-                    size({
-                        apply({ rects, elements }: MiddlewareState) {
-                            Object.assign(elements.floating.style, {
-                                width: refWidth ? `${rects.reference.width}px` : undefined,
-                            });
-                        },
-                    }),
+                    refWidth &&
+                        size({
+                            apply({ rects, elements }: MiddlewareState) {
+                                Object.assign(elements.floating.style, {
+                                    width: `${rects.reference.width}px`,
+                                });
+                            },
+                        }),
                 ],
             }).then((value: ComputePositionReturn) => {
                 setFloatingStyles(() => ({

package/src/styles/base.scss

@@ -21,6 +21,10 @@
     padding: 0;
 }
 
+ol {
+    list-style-position: inside;
+}
+
 :root {
     --z-index-snackbar: 1200;
     --z-index-focus: 9999;

package/src/types/common.ts

@@ -13,6 +13,7 @@ import {
     AriaRole,
     ChangeEvent,
     KeyboardEvent,
+    CSSProperties,
 } from 'react';
 
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';
@@ -31,6 +32,10 @@ export type ElementConstructorProps<
     O extends string = '',
 > = Omit<ComponentPropsWithoutRef<E>, O>;
 
+type CSSVariables = `--${string}`;
+
+export type CSSWithVariables = CSSProperties | (CSSProperties & { [key in CSSVariables]: unknown });
+
 export type DataProps = Record<`data-${string}`, string>;
 
 export type ButtonSize = 'large' | 'medium' | 'small' | 'x-small';
@@ -129,6 +134,12 @@ export type CommonPropsLibrary = {
      * @type string
      */
     role?: AriaRole;
+    /**
+     * Inline styles to apply to the element.
+     *
+     * Allows for CSS variables to be passed in as well.
+     */
+    style?: CSSWithVariables;
 };
 
 export type CommonProps<K extends keyof CommonPropsLibrary> = Pick<CommonPropsLibrary, K>;

package/dist/components/MenuButton/MenuButton.d.ts

@@ -1,19 +0,0 @@
-import './menu-button.scss';
-import { ButtonProps } from '-/components/Button';
-import { ElementProps } from '-/types/common';
-export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
-/**
- * Utility component used within top navigation.
- *
- * @example
- *     import { MenuButton } from '@bspk/ui/MenuButton';
- *
- *     function Example() {
- *         return <MenuButton />;
- *     }
- *
- * @name MenuButton
- * @phase Utility
- */
-export declare function MenuButton(props: ElementProps<MenuButtonProps, 'button'>): import("react/jsx-runtime").JSX.Element;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/MenuButton/MenuButton.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import './menu-button.css.js';
-import { SvgMenu } from '@bspk/icons/Menu';
-/**
- * Utility component used within top navigation.
- *
- * @example
- *     import { MenuButton } from '@bspk/ui/MenuButton';
- *
- *     function Example() {
- *         return <MenuButton />;
- *     }
- *
- * @name MenuButton
- * @phase Utility
- */
-export function MenuButton(props) {
-    return (_jsx("button", { "data-bspk": "menu-button", ...props, children: _jsx(SvgMenu, {}) }));
-}
-//# sourceMappingURL=MenuButton.js.map

package/dist/components/MenuButton/MenuButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../src/components/MenuButton/MenuButton.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAM3C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,KAA8C;IACrE,OAAO,CACH,8BAAkB,aAAa,KAAK,KAAK,YACrC,KAAC,OAAO,KAAG,GACN,CACZ,CAAC;AACN,CAAC"}

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

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

package/dist/components/MenuButton/index.js

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

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

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

package/dist/components/MenuButton/menu-button.css

@@ -1,16 +0,0 @@
-[data-bspk=menu-button] {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  height: 48px;
-  width: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: var(--spacing-sizing-01);
-  color: var(--foreground-neutral-on-surface-variant-01);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/MenuButton/menu-button.css.js

@@ -1,21 +0,0 @@
-/** * 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=menu-button] {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  height: 48px;
-  width: auto;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  padding-top: var(--spacing-sizing-01);
-  color: var(--foreground-neutral-on-surface-variant-01);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-`));
-document.head.appendChild(style);

package/src/components/MenuButton/MenuButton.rtl.test.tsx

@@ -1,15 +0,0 @@
-import { MenuButton } from './MenuButton';
-import { hasNoBasicA11yIssues } from '-/rtl/hasNoBasicA11yIssues';
-import { render } from '-/rtl/util';
-
-const TestBed = () => <MenuButton aria-label="Example label" />;
-
-describe('MenuButton (RTL)', () => {
-    it('has no basic a11y issues', hasNoBasicA11yIssues(<TestBed />));
-
-    it('renders', () => {
-        const { getByLabelText } = render(<TestBed />);
-
-        expect(getByLabelText('Example label')).toBeInTheDocument();
-    });
-});

package/src/components/MenuButton/MenuButton.tsx

@@ -1,29 +0,0 @@
-import './menu-button.scss';
-import { SvgMenu } from '@bspk/icons/Menu';
-import { ButtonProps } from '-/components/Button';
-import { ElementProps } from '-/types/common';
-
-export type MenuButtonProps = Pick<ButtonProps, 'as' | 'onClick'>;
-
-/**
- * Utility component used within top navigation.
- *
- * @example
- *     import { MenuButton } from '@bspk/ui/MenuButton';
- *
- *     function Example() {
- *         return <MenuButton />;
- *     }
- *
- * @name MenuButton
- * @phase Utility
- */
-export function MenuButton(props: ElementProps<MenuButtonProps, 'button'>) {
-    return (
-        <button data-bspk="menu-button" {...props}>
-            <SvgMenu />
-        </button>
-    );
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/src/components/MenuButton/index.tsx

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

package/src/components/MenuButton/menu-button.scss

@@ -1,16 +0,0 @@
-[data-bspk='menu-button'] {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    height: 48px;
-    width: auto;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    padding-top: var(--spacing-sizing-01);
-    color: var(--foreground-neutral-on-surface-variant-01);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */