@bspk/ui 1.3.4 → 1.3.6

package/src/components/Select/Select.tsx

@@ -3,7 +3,7 @@ import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { useMemo, KeyboardEvent, MouseEvent } from 'react';
 import { useFieldInit } from '-/components/Field';
 import { ListItem, ListItemProps } from '-/components/ListItem';
-import { Menu } from '-/components/Menu';
+import { Menu, MenuProps } from '-/components/Menu';
 import { useArrowNavigation } from '-/hooks/useArrowNavigation';
 import { useFloating } from '-/hooks/useFloating';
 import { useOutsideClick } from '-/hooks/useOutsideClick';
@@ -18,7 +18,7 @@ import { scrollListItemsStyle, ScrollListItemsStyleProps } from '-/utils/scrollL
  * Essentially the props of ListItemProps.
  */
 export type SelectOption = CommonProps<'disabled'> &
-    Omit<ListItemProps, 'id' | 'onClick' | 'subText' | 'value'> & { value: string };
+    Omit<ListItemProps, 'id' | 'onClick' | 'value'> & { value: string };
 
 export type SelectItem = SelectOption & { id: string };
 
@@ -52,6 +52,12 @@ export type SelectProps = CommonProps<'size'> &
          * @default Select one
          */
         placeholder?: string;
+        /**
+         * The width of the menu.
+         *
+         * If not provided, the menu will match the width of the select control.
+         */
+        menuWidth?: MenuProps['width'];
     };
 
 /**
@@ -126,6 +132,7 @@ export function Select({
     scrollLimit,
     required = false,
     'aria-label': ariaLabel,
+    menuWidth,
     ...elementProps
 }: ElementProps<SelectProps, 'button'>) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
@@ -162,7 +169,8 @@ export function Select({
     const { elements, floatingStyles } = useFloating({
         hide: !open,
         offsetOptions: 4,
-        refWidth: true,
+        //match reference width if menuWidth not provided
+        refWidth: !menuWidth,
     });
 
     useOutsideClick({
@@ -266,6 +274,7 @@ export function Select({
                     ...floatingStyles,
                 }}
                 tabIndex={-1}
+                width={menuWidth}
             >
                 {items.map((item) => {
                     const isActive = activeElementId === item.id;

package/src/components/Select/SelectExample.tsx

@@ -30,6 +30,37 @@ export const presets: Preset<SelectProps>[] = [
             options: DEFAULT_OPTIONS,
             name: 'demo-select',
             value: '',
+            menuWidth: '',
+        },
+    },
+    {
+        label: 'SubText',
+        propState: {
+            options: [
+                {
+                    value: 'Claude 3.7 Sonnet',
+                    label: 'Claude 3.7 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-3-7-sonnet-20250219-v1:0',
+                },
+                {
+                    value: 'Claude 4 Sonnet',
+                    label: 'Claude 4 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-20250514-v1:0',
+                },
+                {
+                    value: 'Claude 4.5 Sonnet',
+                    label: 'Claude 4.5 Sonnet',
+                    subText: 'bedrock • us.anthropic.claude-sonnet-4-5-20250929-v1:0',
+                },
+                {
+                    value: 'GPT 4.1',
+                    label: 'GPT 4.1',
+                    subText: 'azure • gpt-41',
+                },
+            ],
+            name: 'demo-select-long',
+            value: '',
+            menuWidth: '600px',
         },
     },
     {
@@ -43,6 +74,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-long',
             value: '',
+            menuWidth: '',
         },
     },
     {
@@ -65,6 +97,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-tags',
             value: 'a',
+            menuWidth: '',
         },
     },
     {
@@ -82,6 +115,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-trailing',
             value: '',
+            menuWidth: '',
         },
     },
     {
@@ -112,6 +146,7 @@ export const presets: Preset<SelectProps>[] = [
             ],
             name: 'demo-select-avatar',
             value: '',
+            menuWidth: '',
         },
     },
 ];
@@ -122,6 +157,6 @@ export const SelectExample: ComponentExample<SelectProps> = {
         scrollLimit: 5,
         value: '',
     },
-    render: ({ props, Component }) => <Component {...props} />,
+    render: ({ props, Component, preset }) => <Component key={preset?.label} {...props} />,
     presets,
 };

package/src/components/SelectField/SelectField.tsx

@@ -13,9 +13,22 @@ export type SelectFieldProps = FormFieldControlProps<SelectProps>;
  *
  * @generated
  */
-export function SelectField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: SelectFieldProps) {
+export function SelectField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: SelectFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Select {...controlProps} />
         </FormField>
     );

package/src/components/SkeletonText/SkeletonText.tsx

@@ -48,7 +48,7 @@ export type SkeletonTextProps = {
  * @name SkeletonText
  * @phase UXReview
  */
-export function SkeletonText({ lines = 3, variant, children = null }: SkeletonTextProps) {
+export function SkeletonText({ lines = 3, variant = 'body-base', children = null }: SkeletonTextProps) {
     return children !== null && children !== undefined && children !== false ? (
         children
     ) : (

package/src/components/Slider/slider.scss

@@ -26,6 +26,7 @@
         display: flex;
         flex-direction: column;
         justify-content: center;
+        position: relative;
     }
 
     [data-slider-body] {

package/src/components/Switch/Switch.tsx

@@ -16,12 +16,6 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
      * @required
      */
     onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Only exists as a alias for `disabled` and to match other input properties.
-     *
-     * @default false
-     */
-    readOnly?: boolean;
     /** The value of the switch. */
     value: string;
 };
@@ -53,9 +47,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  * @name Switch
  * @phase UXReview
  */
-export function Switch({ checked = false, disabled: disabledProp = false, readOnly, ...props }: SwitchProps) {
-    const disabled = readOnly || disabledProp;
-
+export function Switch({ checked = false, disabled = false, ...props }: SwitchProps) {
     return (
         <span data-bspk="switch">
             <input

package/src/components/Textarea/Textarea.tsx

@@ -1,45 +1,40 @@
 import './textarea.scss';
 import { ChangeEvent, useRef } from 'react';
 import { useFieldInit } from '-/components/Field';
-import { FieldControlProps, SetRef } from '-/types/common';
+import { CommonProps, FieldControlProps, SetRef } from '-/types/common';
 import { cssWithVars } from '-/utils/cwv';
 
-export type TextareaProps = FieldControlProps<string, ChangeEvent<HTMLTextAreaElement>> & {
-    /**
-     * The text size of the field.
-     *
-     * @default medium
-     */
-    textSize?: 'large' | 'medium' | 'small';
-    /** 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.
-     *
-     * When set the textarea will automatically adjust its height to fit the content up to this limit.
-     *
-     * @default 10
-     * @minimum 3
-     * @maximum 10
-     */
-    maxRows?: number;
-};
+export type TextareaProps = CommonProps<'size'> &
+    FieldControlProps<string, ChangeEvent<HTMLTextAreaElement>> & {
+        /** 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.
+         *
+         * When set the textarea will automatically adjust its height to fit the content up to this limit.
+         *
+         * @default 10
+         * @minimum 3
+         * @maximum 10
+         */
+        maxRows?: number;
+    };
 
 /**
  * A component that allows users to input large amounts of text that could span multiple lines.
@@ -79,7 +74,7 @@ export type TextareaProps = FieldControlProps<string, ChangeEvent<HTMLTextAreaEl
 export function Textarea({
     invalid: invalidProp,
     onChange,
-    textSize = 'medium',
+    size = 'medium',
     value = '',
     name,
     innerRef,
@@ -117,7 +112,7 @@ export function Textarea({
             data-disabled={disabled || undefined}
             data-invalid={invalid || undefined}
             data-read-only={readOnly || undefined}
-            data-size={textSize}
+            data-size={size}
             style={cssWithVars({
                 '--min-rows': minRows,
                 '--max-rows': maxRows,

package/src/components/TextareaField/TextareaField.tsx

@@ -13,9 +13,22 @@ export type TextareaFieldProps = FormFieldControlProps<TextareaProps>;
  *
  * @generated
  */
-export function TextareaField({ label, helperText, labelTrailing, errorMessage, ...controlProps }: TextareaFieldProps) {
+export function TextareaField({
+    label,
+    helperText,
+    labelTrailing,
+    errorMessage,
+    style,
+    ...controlProps
+}: TextareaFieldProps) {
     return (
-        <FormField errorMessage={errorMessage} helperText={helperText} label={label} labelTrailing={labelTrailing}>
+        <FormField
+            errorMessage={errorMessage}
+            helperText={helperText}
+            label={label}
+            labelTrailing={labelTrailing}
+            style={style}
+        >
             <Textarea {...controlProps} />
         </FormField>
     );

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"}