@bspk/ui 1.1.26 → 1.1.28

package/dist/hooks/useFloating.d.ts

@@ -12,20 +12,51 @@
  */
 import { Placement, Strategy, MiddlewareData, OffsetOptions } from '@floating-ui/dom';
 export type { Placement, Strategy };
+export type UseFloatingProps = {
+    /**
+     * The preferred placement of the floating element.
+     *
+     * This determines where the floating element will be positioned relative to the reference element.
+     *
+     * @default bottom
+     */
+    placement: Placement;
+    /** A ref object for the arrow element. */
+    arrowRef?: React.MutableRefObject<HTMLElement | null>;
+    /**
+     * The positioning strategy ('absolute' or 'fixed').
+     *
+     * When set to 'fixed', the floating element will be positioned relative to the viewport.
+     *
+     * When set to 'absolute', the floating element will be positioned relative to the nearest positioned ancestor.
+     *
+     * @default fixed
+     */
+    strategy?: Strategy;
+    /**
+     * The offset options for the floating element.
+     *
+     * @default 0
+     */
+    offsetOptions?: OffsetOptions;
+    /**
+     * When set to true, the width of the floating element will match the width of the reference element.
+     *
+     * When set to an HTMLElement, the width of the floating element will match the width of that HTMLElement.
+     *
+     * @default true
+     */
+    refWidth?: HTMLElement | boolean;
+    /** Whether to hide the floating element. */
+    hide?: boolean;
+};
 /**
  *
  *
  * @param param0
  * @returns
  */
-export declare function useFloating<TriggerElementType extends HTMLElement>({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: {
-    placement: Placement;
-    arrowRef?: React.MutableRefObject<HTMLElement | null>;
-    strategy?: Strategy;
-    offsetOptions?: OffsetOptions;
-    refWidth?: boolean;
-    hide?: boolean;
-}): {
+export declare function useFloating<TriggerElementType extends HTMLElement>({ placement, arrowRef, strategy, offsetOptions, refWidth, hide, }: UseFloatingProps): {
     elements: {
         trigger: TriggerElementType | null;
         floating: HTMLElement | null;

package/dist/hooks/useFloating.js

@@ -20,7 +20,7 @@ const TRANSITION_DELAY = 250;
  * @param param0
  * @returns
  */
-export function useFloating({ placement, arrowRef, strategy, offsetOptions = 0, refWidth, hide = false, }) {
+export function useFloating({ placement = 'bottom', arrowRef, strategy = 'fixed', offsetOptions = 0, refWidth = true, hide = false, }) {
     const [floatingStyles, setFloatingStylesState] = useState({
         opacity: 0,
         pointerEvents: 'none',
@@ -35,17 +35,6 @@ export function useFloating({ placement, arrowRef, strategy, offsetOptions = 0,
     const [middlewareData, setMiddlewareData] = useState({});
     const [triggerElement, setTriggerElement] = useState(null);
     const [floatingElement, setFloatingElement] = useState(null);
-    // const elements: {
-    //   trigger: HTMLElement | null;
-    //   floating: HTMLElement | null;
-    //   setReference: (node: TriggerElementType | null) => void;
-    //   setFloating: (node: HTMLElement | null) => void;
-    // } = {
-    //   trigger: triggerElement,
-    //   floating: floatingElement,
-    //   setReference: setTriggerElement,
-    //   setFloating: setFloatingElement,
-    // };
     const computeDebounce = useTimeout();
     const transitionDelay = useTimeout();
     const compute = useCallback(() => {
@@ -86,7 +75,7 @@ export function useFloating({ placement, arrowRef, strategy, offsetOptions = 0,
                         size({
                             apply({ rects, elements }) {
                                 Object.assign(elements.floating.style, {
-                                    width: `${rects.reference.width}px`,
+                                    width: refWidth === true ? `${rects.reference.width}px` : `${refWidth.offsetWidth}px`,
                                 });
                             },
                         }),

package/dist/hooks/useFloating.js.map

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

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -1,5 +1,5 @@
 /**
- * This hook provides keyboard navigation for a list of elements. Used inside the Dropdown component.
+ * This hook provides keyboard navigation for a list of elements. Used inside the Select component.
  *
  * @example
  *     import { useRef } from 'react';

package/dist/hooks/useKeyboardNavigation.js

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { EVENT_KEY } from '../utils/keyboard';
 import { scrollElementIntoView } from '../utils/scrollElementIntoView';
 /**
- * This hook provides keyboard navigation for a list of elements. Used inside the Dropdown component.
+ * This hook provides keyboard navigation for a list of elements. Used inside the Select component.
  *
  * @example
  *     import { useRef } from 'react';

package/dist/hooks/useOutsideClick.d.ts

@@ -1,12 +1,12 @@
 /**
- * A hook which calls a method when a click occurs outside of the provided ref. Used inside the Dropdown and Modal
+ * A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
  * components.
  *
  * @example
  *     import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
  *     import React, { useRef, useState } from 'react';
  *
- *     export function Dropdown() {
+ *     export function Example() {
  *     const [isOpen, setIsOpen] = useState(false);
  *     const containerRef = useRef<HTMLDivElement>(null);
  *

package/dist/hooks/useOutsideClick.js

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 /**
- * A hook which calls a method when a click occurs outside of the provided ref. Used inside the Dropdown and Modal
+ * A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
  * components.
  *
  * @example
  *     import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
  *     import React, { useRef, useState } from 'react';
  *
- *     export function Dropdown() {
+ *     export function Example() {
  *     const [isOpen, setIsOpen] = useState(false);
  *     const containerRef = useRef<HTMLDivElement>(null);
  *

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 /**
  * There are no barrel files for this repository.
  *
- * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ * Components should be imported directly like "import { Txt } from
+ *
+ * @bspk/ui/Txt".
  */
 import { ComponentProps, JSXElementConstructor, ReactNode } from 'react';
 export type AlertVariant = 'error' | 'informational' | 'success' | 'warning';

package/dist/index.js

@@ -1,7 +1,9 @@
 /**
  * There are no barrel files for this repository.
  *
- * Components should be imported directly like "import { Txt } from @bspk/ui/Txt".
+ * Components should be imported directly like "import { Txt } from
+ *
+ * @bspk/ui/Txt".
  */
 export const BRANDS = [
     { title: 'Anywhere', slug: 'anywhere' },

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AA+HH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA+HH,MAAM,CAAC,MAAM,MAAM,GAAqC;IACpD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,sBAAsB,EAAE;IACjE,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE;IAC3C,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,iBAAiB,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE;IACvC,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,aAAa,EAAE;IAC7C,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE;IAC7B,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE;CAClC,CAAC;AAEX,sDAAsD"}

package/dist/select.css

@@ -0,0 +1 @@
+[data-bspk=select]{--select-background: var(--surface-neutral-t1-base);--select-border-color: var(--stroke-neutral-base);--select-text-color: var(--foreground-neutral-on-surface);--select-height: var(--spacing-sizing-10);--select-font: var(--body-base);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-03);--select-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--select-height);max-height:var(--select-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--select-font);border:1px solid var(--select-border-color);border-radius:var(--radius-small);background:var(--select-background);padding:0 var(--select-padding)}[data-bspk=select] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=select] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=select] [data-placeholder] [data-item-label] [data-text]{color:var(--select-text-color)}[data-bspk=select] [data-icon]{display:flex;flex-direction:column;justify-content:center}[data-bspk=select] [data-icon] svg{transform:rotate(90deg);width:var(--select-icon-width)}[data-bspk=select] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=select][data-size=small]{--select-height: var(--spacing-sizing-08);--select-font: var(--body-small);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-02);--select-icon-width: var(--spacing-sizing-05)}[data-bspk=select][data-size=large]{--select-height: var(--spacing-sizing-12);--select-font: var(--body-large);--select-clear-height: var(--spacing-sizing-06);--select-icon-width: var(--spacing-sizing-06)}[data-bspk=select]:disabled{--select-text-color: var(--foreground-neutral-disabled-on-surface);--select-border-color: var(--stroke-neutral-disabled-light);--select-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=select]:disabled[aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-on-surface)}[data-bspk=select]:not(:disabled):focus{--select-border-color: var(--stroke-brand-primary)}[data-bspk=select]:not(:disabled):hover{--select-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:not(:disabled):active{--select-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select][data-invalid]{--select-border-color: var(--status-error)}[data-bspk=select][data-empty]{--select-text-color: var(--foreground-neutral-on-surface-variant-03)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bspk/ui",
-    "version": "1.1.26",
+    "version": "1.1.28",
     "license": "CC-BY-4.0",
     "type": "module",
     "files": [
@@ -26,7 +26,8 @@
         "prepare": "husky",
         "pre:commit": "tsx .scripts/pre-commit.ts",
         "tsc": "tsc",
-        "meta": "tsx meta.ts"
+        "meta": "tsx meta.ts",
+        "pretty": "npx prettier --write src/"
     },
     "publishConfig": {
         "access": "public"

package/src/Avatar.tsx

@@ -54,12 +54,13 @@ export type AvatarProps = {
      */
     initials?: string;
     /**
-     * The icon to display in the avatar. This needs to be an icon from the @bspk/icons library.
+     * The icon to display in the avatar. This needs to be an icon from the
      *
      * @example
      *     <SvgPerson />;
      *
      * @type BspkIcon
+     * @bspk/icons library.
      */
     icon?: ReactNode;
     /**

package/src/Button.tsx

@@ -103,7 +103,7 @@ function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonPro
         label: labelProp,
         icon,
         // showLabel: showLabelProp = true,
-        showLabel= true,
+        showLabel = true,
         toolTip: toolTipProp,
         children,
         ...containerProps
@@ -111,7 +111,7 @@ function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonPro
     const label = typeof children === 'string' ? children : labelProp || '';
 
     // ignore showLabel=false if there is no icon
-    const hideLabel = (showLabel === false) && icon;
+    const hideLabel = showLabel === false && icon;
     const toolTip = toolTipProp || (hideLabel ? label : undefined);
     const { logError } = useErrorLogger();
     logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');

package/src/FormField.tsx

@@ -29,7 +29,7 @@ export type FormFieldProps = CommonProps<'required'> &
         /** The id of the control. */
         controlId: string;
         /**
-         * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or
+         * The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
          * TimePicker.
          *
          * @type (childProps: FieldControlProps) => JSX.Element
@@ -45,7 +45,7 @@ export type FormFieldProps = CommonProps<'required'> &
 /**
  * Wrapper component for form controls.
  *
- * Children may be one of the following: TextInput, Dropdown, DatePicker, or TimePicker.
+ * Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
  *
  * @example
  *     import { TextInput } from '@bspk/ui/TextInput';

package/src/Popover.tsx

@@ -1,13 +1,6 @@
 import { SvgClose } from '@bspk/icons/Close';
 import './popover.scss';
-import {
-    ReactElement,
-    cloneElement,
-    useId,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { ReactElement, cloneElement, useId, useMemo, useRef, useState } from 'react';
 
 import { Button } from './Button';
 import { Portal } from './Portal';
@@ -48,8 +41,7 @@ export type PopoverProps = CommonProps<'disabled'> & {
 };
 
 /**
- * Brief message that provide additional guidance and helps users perform an
- * action if needed.
+ * Brief message that provide additional guidance and helps users perform an action if needed.
  *
  * @example
  *     import { useState } from 'react';
@@ -79,14 +71,7 @@ export type PopoverProps = CommonProps<'disabled'> & {
  *
  * @name Popover
  */
-function Popover({
-    placement = 'top',
-    header,
-    content,
-    callToAction,
-    children,
-    disabled = false,
-}: PopoverProps) {
+function Popover({ placement = 'top', header, content, callToAction, children, disabled = false }: PopoverProps) {
     const id = useId();
     const [show, setShow] = useState(false);
     const arrowRef = useRef<HTMLElement | null>(null);
@@ -124,20 +109,13 @@ function Popover({
                     id={id}
                     ref={(node) => {
                         elements.setFloating(node);
-                        elements.setTrigger(
-                            document.querySelector<HTMLElement>(
-                                `[aria-describedby="${id}"]`,
-                            ),
-                        );
+                        elements.setTrigger(document.querySelector<HTMLElement>(`[aria-describedby="${id}"]`));
                     }}
                     style={floatingStyles}
                 >
                     <header>
                         <Txt variant="heading-h6">{header}</Txt>
-                        <button
-                            aria-label="Close"
-                            onClick={() => setShow(false)}
-                        >
+                        <button aria-label="Close" onClick={() => setShow(false)}>
                             <SvgClose />
                         </button>
                     </header>

package/src/ProgressBar.tsx

@@ -35,15 +35,14 @@ export type ProgressBarProps = {
  * A progress bar is a horizontal visual indicator that let’s the user know the progression of a task or operation
  * occurring in the background.
  *
- * @name ProgressBar
  * @example
- *      import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *     import { ProgressBar } from '@bspk/ui/ProgressBar';
+ *
+ *     export function Example() {
+ *         return <ProgressBar label="Example label" completion={50} />;
+ *     }
  *
- *      export function Example() {
- *          return (
- *              <ProgressBar label="Example label" completion={50} />
- *          );
- *      }
+ * @name ProgressBar
  */
 function ProgressBar({ size = 'large', completion = 0, align = 'center', label }: ProgressBarProps) {
     const id = useId();

package/src/ProgressCircle.tsx

@@ -26,15 +26,14 @@ export type ProgressCircleProps = {
 /**
  * Rotating circle or pill that indicates the status or state of completion for a process that’s part of a user flow.
  *
- * @name ProgressCircle
  * @example
- *      import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *     import { ProgressCircle } from '@bspk/ui/ProgressCircle';
+ *
+ *     export function Example() {
+ *         return <ProgressCircle label="Example label" />;
+ *     }
  *
- *      export function Example() {
- *          return (
- *              <ProgressCircle label="Example label"/>
- *          );
- *      }
+ * @name ProgressCircle
  */
 function ProgressCircle({ label, labelPosition, size = 'medium' }: ProgressCircleProps) {
     let variant: TxtVariant = 'labels-base';

package/src/ProgressionStepper.tsx

@@ -65,19 +65,14 @@ export type ProgressionStepperProps = {
 /**
  * A progress stepper is a horizontal visual indicator that let’s the user know the progression of the current process.
  *
- * @name ProgressionStepper
  * @example
  *     import { ProgressionStepper } from '@bspk/ui/ProgressionStepper';
  *
  *     export function Example() {
- *         return (
- *             <ProgressionStepper steps={[
- *                 { name: 'Step 1' },
- *                 { name: 'Step 2' },
- *                 { name: 'Step 3' },
- *             ]} />
- *         );
+ *         return <ProgressionStepper steps={[{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }]} />;
  *     }
+ *
+ * @name ProgressionStepper
  */
 function ProgressionStepper({
     steps = [],

package/src/RadioGroup.tsx

@@ -33,8 +33,15 @@ export type RadioGroupProps = CommonProps<'name'> & {
      *
      * @example
      *     [
-     *         { value: '1', label: 'Option 1' },
-     *         { value: '2', label: 'Option 2', description: 'Description here' },
+     *         {
+     *             value: '1',
+     *             label: 'Option 1',
+     *         },
+     *         {
+     *             value: '2',
+     *             label: 'Option 2',
+     *             description: 'Description here',
+     *         },
      *         { value: '3', label: 'Option 3' },
      *     ];
      *

package/src/SearchBar.tsx

@@ -6,14 +6,10 @@ import { MenuItem, MenuProps, Menu } from './Menu';
 import { Portal } from './Portal';
 import { TextInputProps, TextInput } from './TextInput';
 import { Txt } from './Txt';
-import { useFloatingMenu } from './hooks/useFloatingMenu';
+import { useCombobox } from './hooks/useCombobox';
 import { useId } from './hooks/useId';
-//import { useFloatingMenu } from './hooks/useFloatingMenu';
 
-export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<
-    MenuProps<T>,
-    'itemCount' | 'noResultsMessage'
-> &
+export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> &
     Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'size'> & {
         /** The current value of the search bar. */
         value?: string;
@@ -83,8 +79,7 @@ export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<
  *     export function Example() {
  *         const [searchText, setSearchText] = useState<string>('');
  *
- *         const handleItemSelect = (item) =>
- *             console.log('Selected item:', item);
+ *         const handleItemSelect = (item) => console.log('Selected item:', item);
  *
  *         return (
  *             <SearchBar
@@ -129,15 +124,10 @@ function SearchBar({
 }: SearchBarProps) {
     const id = useId(idProp);
     const {
-        triggerProps: {
-            ref: triggerRef,
-            onClick,
-            onKeyDownCapture,
-            ...triggerProps
-        },
+        toggleProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps },
         menuProps,
         closeMenu,
-    } = useFloatingMenu({
+    } = useCombobox({
         placement: 'bottom-start',
     });
 
@@ -162,8 +152,8 @@ function SearchBar({
                     size={size}
                     value={value}
                     {...triggerProps}
-                    onClick={(event) => {
-                        if (items?.length) onClick(event);
+                    onClick={() => {
+                        if (items?.length) onClick();
                     }}
                     onKeyDownCapture={(event) => {
                         const handled = onKeyDownCapture(event);
@@ -196,9 +186,7 @@ function SearchBar({
                         }
                         onChange={(selectedValues, event) => {
                             event?.preventDefault();
-                            const item = items?.find(
-                                (i) => i.value === selectedValues[0],
-                            );
+                            const item = items?.find((i) => i.value === selectedValues[0]);
                             onSelect?.(item);
                             onChange(item?.label || '');
                             closeMenu();

package/src/SegmentedControl.tsx

@@ -8,23 +8,18 @@ import { ElementProps } from './';
 
 export type SegmentedControlOption = {
     /**
-     * The label of the option. This is the text that will be displayed on the
-     * option.
+     * The label of the option. This is the text that will be displayed on the option.
      *
      * @required
      */
     label: string;
     /**
-     * Determines if the element is
-     * [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
      *
      * @default false
      */
     disabled?: boolean;
-    /**
-     * The value of the option. If not provided, the label will be used as the
-     * value.
-     */
+    /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
     /**
      * The the icon to display before the label.
@@ -42,8 +37,7 @@ export type SegmentedControlOption = {
 
 export type SegmentedControlProps = {
     /**
-     * The options to display. Each option has a label and an optional leading
-     * icon.
+     * The options to display. Each option has a label and an optional leading icon.
      *
      * @example
      *     [
@@ -78,16 +72,15 @@ export type SegmentedControlProps = {
      */
     size?: 'medium' | 'small';
     /**
-     * The width of the options. If set to 'fill', the options will fill the
-     * width of the container. If set to 'hug', the options will be as wide as
-     * their content.
+     * The width of the options. If set to 'fill', the options will fill the width of the container. If set to 'hug',
+     * the options will be as wide as their content.
      *
      * @default hug
      */
     width?: 'fill' | 'hug';
     /**
-     * Determines if the labels of the options should be displayed. If icons are
-     * not provided for every option this is ignored and labels are shown.
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
      *
      * @default true
      */
@@ -131,42 +124,26 @@ function SegmentedControl({
     const options = Array.isArray(optionsProp) ? optionsProp : [];
     useOptionIconsInvalid(options);
 
-    const hideLabels =
-        showLabelsProp === false &&
-        options.every((item) => item.icon && item.label);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
 
     return (
-        <div
-            {...containerProps}
-            data-bspk="segmented-control"
-            data-size={size}
-            data-width={width}
-        >
+        <div {...containerProps} data-bspk="segmented-control" data-size={size} data-width={width}>
             {options.map((item, index) => {
                 const isActive = item.value === value;
                 return (
                     <Fragment key={item.value}>
-                        <Tooltip
-                            disabled={!hideLabels}
-                            label={item.label}
-                            placement="top"
-                        >
+                        <Tooltip disabled={!hideLabels} label={item.label} placement="top">
                             <button
                                 aria-label={item.label}
                                 data-first={index === 0 || undefined}
-                                data-last={
-                                    index === options.length - 1 || undefined
-                                }
+                                data-last={index === options.length - 1 || undefined}
                                 data-selected={isActive || undefined}
                                 disabled={item.disabled || undefined}
-                                onClick={() =>
-                                    onChange(item.value || item.label)
-                                }
+                                onClick={() => onChange(item.value || item.label)}
                             >
                                 <span data-outer>
                                     <span data-inner>
-                                        {(isActive && item.iconActive) ||
-                                            item.icon}
+                                        {(isActive && item.iconActive) || item.icon}
                                         {!hideLabels && item.label}
                                     </span>
                                 </span>