paris 0.14.2 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # paris
 
+## 0.15.0
+
+### Minor Changes
+
+- 5072392: Menu: refactored from dot notation to named exports, so new MenuButton, MenuItems, and MenuItem replaces Menu.Button, etc
+
+### Patch Changes
+
+- 5072392: Checkbox: new `switch` kind and `hideLabel` prop
+- 5072392: Select: multiselect listbox stays open for selecting multiple options
+- 5072392: Combobox: options dropdown opens initially on focus, can disable with `hideOptionsInitially` prop
+- 5072392: General: upgraded headlessui package to v2
+- 5072392: Menu, Select, Combobox: dropdowns now render as modal, meaning page scroll is locked
+
 ## 0.14.2
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -64,7 +64,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@headlessui/react": "^1.7.14",
+    "@headlessui/react": "^2.2.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.1.8",
     "clsx": "^1.2.1",

package/src/stories/checkbox/Checkbox.module.scss

@@ -114,3 +114,47 @@
         color: var(--pte-new-colors-contentDisabled);
     }
 }
+
+.switchContainer {
+    width: 24px;
+    height: 14px;
+    border-radius: 100px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background-color: var(--pte-new-colors-contentTertiary);
+
+    &[data-checked], &[data-state="indeterminate"] {
+        background-color: var(--pte-new-colors-contentPrimary);
+    }
+
+    &[data-disabled=true] {
+        background-color: var(--pte-new-colors-contentInverseSecondary);
+
+        &[data-checked], &[data-state="indeterminate"] {
+            background-color: var(--pte-new-colors-contentInverseTertiary);
+        }
+    }
+
+    &:hover {
+        background-color: var(--pte-new-colors-contentSecondary);
+    }
+}
+
+.knob {
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    border-radius: 100%;
+
+    background-color: var(--pte-new-colors-contentInversePrimary);
+
+    transform: translateX(-5px);
+    transition: transform var(--pte-animations-interaction);
+}
+
+.knobChecked {
+    transform: translateX(5px);
+}

package/src/stories/checkbox/Checkbox.stories.ts

@@ -41,3 +41,36 @@ export const Surface: Story = {
         });
     },
 };
+
+export const Switch: Story = {
+    args: {
+        children: 'ACH Bank Transfer',
+        kind: 'switch',
+    },
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [checked, setChecked] = useState(false);
+        return createElement(Checkbox, {
+            ...args,
+            checked,
+            onChange: (e) => setChecked(!!e),
+        });
+    },
+};
+
+export const HideLabel: Story = {
+    args: {
+        children: 'ACH Bank Transfer',
+        kind: 'switch',
+        hideLabel: true,
+    },
+    render: (args) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [checked, setChecked] = useState(false);
+        return createElement(Checkbox, {
+            ...args,
+            checked,
+            onChange: (e) => setChecked(!!e),
+        });
+    },
+};

package/src/stories/checkbox/Checkbox.tsx

@@ -1,18 +1,24 @@
 import type { FC, ReactNode } from 'react';
-import { useRef, useId } from 'react';
+import { useId } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import clsx from 'clsx';
+import { Switch } from '@headlessui/react';
 import styles from './Checkbox.module.scss';
-import { pvar } from '../theme';
-import { TextWhenString } from '../utility';
+import { TextWhenString, VisuallyHidden } from '../utility';
 import { Check, Icon } from '../icon';
 
 export type CheckboxProps = {
-    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected.  */
-    kind?: 'default' | 'surface'
+    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `switch` is a switch toggle.  */
+    kind?: 'default' | 'surface' | 'switch'
     checked?: boolean;
     onChange?: (checked: boolean | 'indeterminate') => void;
     disabled?: boolean;
+    /**
+     * Whether to hide the label text of the Checkbox. Does not apply to `kind="surface"` because there would be nothing visible.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
     /** The contents of the Checkbox. */
     children?: ReactNode | ReactNode[];
 } & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;
@@ -34,6 +40,7 @@ export const Checkbox: FC<CheckboxProps> = ({
     checked,
     onChange,
     disabled,
+    hideLabel = false,
     children,
     className,
     ...props
@@ -45,43 +52,68 @@ export const Checkbox: FC<CheckboxProps> = ({
             className={clsx(styles.container, disabled && styles.disabled, className, checked && styles.checked)}
             {...props}
         >
-            <RadixCheckbox.Root
-                id={inputID}
-                className={clsx(styles.root, styles[kind])}
-                checked={checked}
-                onCheckedChange={onChange}
-                data-disabled={disabled}
-            >
-                {kind === 'surface' && (
-                    <TextWhenString kind="paragraphXSmall">
-                        {children}
-                    </TextWhenString>
-                )}
-                <RadixCheckbox.Indicator className={styles.indicator}>
-                    {kind === 'default' && (
-                        <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path
-                                className={styles.checkSvg}
+            {(kind === 'default' || kind === 'surface') && (
+                <RadixCheckbox.Root
+                    id={inputID}
+                    className={clsx(styles.root, styles[kind])}
+                    checked={checked}
+                    onCheckedChange={onChange}
+                    data-disabled={disabled}
+                    aria-details={typeof children === 'string' ? children : undefined}
+                >
+                    {kind === 'surface' && (
+                        <TextWhenString kind="paragraphXSmall">
+                            {children}
+                        </TextWhenString>
+                    )}
+                    <RadixCheckbox.Indicator className={styles.indicator}>
+                        {kind === 'default' && (
+                            <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    className={styles.checkSvg}
+                                    data-disabled={disabled}
+                                    d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
+                                />
+                            </svg>
+                        )}
+                        {kind === 'surface' && (
+                            <Icon
+                                icon={Check}
+                                size={12.8}
                                 data-disabled={disabled}
-                                d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
+                                className={styles.checkIcon}
                             />
-                        </svg>
-                    )}
-                    {kind === 'surface' && (
-                        <Icon
-                            icon={Check}
-                            size={12.8}
-                            data-disabled={disabled}
-                            className={styles.checkIcon}
+                        )}
+                    </RadixCheckbox.Indicator>
+                </RadixCheckbox.Root>
+            )}
+            {kind === 'switch' && (
+                <>
+                    <Switch
+                        checked={checked}
+                        onChange={onChange}
+                        className={styles.switchContainer}
+                        data-disabled={disabled}
+                        id={inputID}
+                        aria-details={typeof children === 'string' ? children : undefined}
+                    >
+                        <span
+                            aria-hidden="true"
+                            className={clsx(styles.knob, checked && styles.knobChecked)}
                         />
-                    )}
-                </RadixCheckbox.Indicator>
-            </RadixCheckbox.Root>
-            {kind === 'default' && (
+                    </Switch>
+                </>
+            )}
+            {(kind === 'default' || kind === 'switch') && !hideLabel && (
                 <TextWhenString kind="paragraphXSmall">
                     {children}
                 </TextWhenString>
             )}
+            {hideLabel && (
+                <VisuallyHidden>
+                    {children}
+                </VisuallyHidden>
+            )}
         </label>
     );
 };

package/src/stories/combobox/Combobox.stories.ts

@@ -59,6 +59,42 @@ const ComboboxArgs: ComboboxProps<{ name: string }> = {
     ],
 };
 
+const ComboboxArgs2: ComboboxProps<{ name: string }> = {
+    label: 'Share',
+    description: 'Search for a friend to share this document with.',
+    placeholder: 'Search...',
+    options: [
+        {
+            id: '1',
+            node: 'Mia Dolan',
+            metadata: {
+                name: 'Mia Dolan',
+            },
+        },
+        {
+            id: '2',
+            node: 'SEB',
+            metadata: {
+                name: 'Sebastian Wilder',
+            },
+        },
+        {
+            id: '3',
+            node: 'Amy Brandt',
+            metadata: {
+                name: 'Amy Brandt',
+            },
+        },
+        {
+            id: '4',
+            node: 'Laura Wilder',
+            metadata: {
+                name: 'Laura Wilder',
+            },
+        },
+    ],
+};
+
 export const Default: Story = {
     args: ComboboxArgs,
     render: (args) => {
@@ -104,3 +140,51 @@ export const AllowCustomValue: Story = {
         }));
     },
 };
+
+export const HideOptionsInitially: Story = {
+    args: ComboboxArgs,
+    render: (args) => {
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
+        const [inputValue, setInputValue] = useState<string>('');
+        return createElement('div', {
+            style: { minHeight: '200px' },
+        }, createElement(Combobox<{ name: string }>, {
+            ...args,
+            value: (selected?.id === null) ? {
+                id: null,
+                node: inputValue,
+                metadata: {
+                    name: inputValue,
+                },
+            } : selected as Option<{ name: string }> | null,
+            options: (args.options as Option<{ name: string }>[]).filter((o) => (o.metadata?.name as string || '').toLowerCase().includes(inputValue.toLowerCase())),
+            onChange: (e) => setSelected(e),
+            onInputChange: (e) => setInputValue(e),
+            hideOptionsInitially: true,
+        }));
+    },
+};
+
+export const HideClearButton: Story = {
+    args: ComboboxArgs2,
+    render: (args) => {
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
+        const [inputValue, setInputValue] = useState<string>('');
+        return createElement('div', {
+            style: { minHeight: '200px' },
+        }, createElement(Combobox<{ name: string }>, {
+            ...args,
+            value: (selected?.id === null) ? {
+                id: null,
+                node: inputValue,
+                metadata: {
+                    name: inputValue,
+                },
+            } : selected as Option<{ name: string }> | null,
+            options: (args.options as Option<{ name: string }>[]).filter((o) => (o.metadata?.name as string || '').toLowerCase().includes(inputValue.toLowerCase())),
+            onChange: (e) => setSelected(e),
+            onInputChange: (e) => setInputValue(e),
+            hideClearButton: true,
+        }));
+    },
+};

package/src/stories/combobox/Combobox.tsx

@@ -2,11 +2,11 @@
 
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
 import {
-    Fragment,
-
     useMemo, useId, useState,
 } from 'react';
-import { Combobox as HCombobox, Transition } from '@headlessui/react';
+import {
+    Combobox as HCombobox, ComboboxInput, ComboboxOptions, ComboboxOption, Transition,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
@@ -23,6 +23,7 @@ import { Field } from '../field';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import { TextWhenString } from '../utility';
+import { Check, Icon } from '../icon';
 
 export type Option<T extends Record<string, any> = Record<string, any>> = {
     id: string,
@@ -97,6 +98,11 @@ export type ComboboxProps<T extends Record<string, any>> = {
      * @default false
      */
     hasOptionBorder?: boolean;
+    /**
+     * Whether the dropdown should open immediately when focused, vs only after starting to type.
+     * @default false
+     */
+    hideOptionsInitially?: boolean;
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -153,6 +159,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     hideClearButton = false,
     maxHeight = 320,
     hasOptionBorder = false,
+    hideOptionsInitially = false,
     overrides,
 }: ComboboxProps<T>) {
     const inputID = useId();
@@ -184,6 +191,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
         >
             <HCombobox
                 as="div"
+                immediate={!hideOptionsInitially}
                 value={selectedID}
                 onChange={(id) => {
                     if (onChange) {
@@ -224,7 +232,7 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     )}
                     <div className={styles.content}>
                         {(value?.node && typeof value.node !== 'string') ? value.node : (
-                            <HCombobox.Input
+                            <ComboboxInput
                                 id={inputID}
                                 {...overrides?.input}
                                 placeholder={placeholder}
@@ -293,7 +301,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     leaveFrom={dropdownStyles.leaveFrom}
                     leaveTo={dropdownStyles.leaveTo}
                 >
-                    <HCombobox.Options
+                    <ComboboxOptions
+                        as="ul"
                         {...overrides?.optionsContainer}
                         className={clsx(
                             overrides?.optionsContainer?.className,
@@ -305,7 +314,8 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         } as CSSProperties}
                     >
                         {(allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0) && (
-                            <HCombobox.Option
+                            <ComboboxOption
+                                as="li"
                                 value={query}
                                 data-selected={false}
                                 className={clsx(
@@ -317,18 +327,18 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 <Text as="span" kind="paragraphSmall">
                                     {customValueString.replace('%v', query)}
                                 </Text>
-                            </HCombobox.Option>
+                            </ComboboxOption>
                         )}
                         {
                             (
                                 optionsWithCustomValue || []
                             )
                                 .map((option) => (
-                                    <HCombobox.Option
+                                    <ComboboxOption
+                                        as="li"
                                         key={option.id}
                                         value={option.id}
                                         {...overrides?.option}
-                                        data-selected={option.id === value}
                                         className={clsx(
                                             overrides?.option?.className,
                                             styles.option,
@@ -338,10 +348,10 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                         <TextWhenString as="span" kind="paragraphSmall">
                                             {option.node}
                                         </TextWhenString>
-                                    </HCombobox.Option>
+                                    </ComboboxOption>
                                 ))
                         }
-                    </HCombobox.Options>
+                    </ComboboxOptions>
                 </Transition>
             </HCombobox>
         </Field>

package/src/stories/dialog/Dialog.module.scss

@@ -17,7 +17,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
 
     &.overlayBlur {
-        backdrop-filter: blur(0);
+        backdrop-filter: blur(2px);
         background-color: var(--pte-new-colors-overlayPageBackground);
         will-change: backdrop-filter, opacity;
     }

package/src/stories/dialog/Dialog.tsx

@@ -3,8 +3,10 @@
 import type {
     ComponentPropsWithoutRef, FC, MouseEventHandler, PropsWithChildren, ReactNode,
 } from 'react';
-import { Fragment, useEffect, useState } from 'react';
-import { Dialog as HDialog, Transition } from '@headlessui/react';
+import { useEffect, useState } from 'react';
+import {
+    Dialog as HDialog, DialogPanel, DialogTitle, Transition, TransitionChild,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import styles from './Dialog.module.scss';
 import { Text } from '../text';
@@ -166,7 +168,6 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
         <Transition
             appear
             show={isOpen}
-            as={Fragment}
         >
             <HDialog
                 as="div"
@@ -176,8 +177,9 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                     styles.root,
                     overrides.root?.className,
                 )}
+                role="dialog"
             >
-                <HDialog.Overlay
+                <div
                     {...overrides.overlayContainer}
                     className={clsx(
                         overlayStyle === 'blur' && styles.overlayBlurContainer,
@@ -185,8 +187,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                         overrides.overlayContainer?.className,
                     )}
                 >
-                    <Transition.Child
-                        as={Fragment}
+                    <TransitionChild
                         enter={styles.enter}
                         enterFrom={styles.enterFrom}
                         enterTo={styles.enterTo}
@@ -203,8 +204,8 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                                 overrides.overlay?.className,
                             )}
                         />
-                    </Transition.Child>
-                </HDialog.Overlay>
+                    </TransitionChild>
+                </div>
 
                 <div
                     {...overrides.panelContainer}
@@ -213,8 +214,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                         overrides.panelContainer?.className,
                     )}
                 >
-                    <Transition.Child
-                        as={Fragment}
+                    <TransitionChild
                         enter={styles.enter}
                         enterFrom={styles.enterFrom}
                         enterTo={styles.enterTo}
@@ -222,7 +222,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                         leaveFrom={styles.leaveFrom}
                         leaveTo={styles.leaveTo}
                     >
-                        <HDialog.Panel
+                        <DialogPanel
                             {...overrides.panel}
                             className={clsx(
                                 styles.panel,
@@ -248,7 +248,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                                     } : {}}
                                 >
                                     <VisuallyHidden when={hideTitle}>
-                                        <HDialog.Title
+                                        <DialogTitle
                                             {...overrides.panelTitle}
                                             as="h1"
                                             className={clsx(
@@ -261,7 +261,7 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                                             >
                                                 {title}
                                             </TextWhenString>
-                                        </HDialog.Title>
+                                        </DialogTitle>
                                     </VisuallyHidden>
                                     <RemoveFromDOM when={hideCloseButton}>
                                         <div className={clsx(styles.closeButton)}>
@@ -285,8 +285,8 @@ export const Dialog: FC<PropsWithChildren<DialogProps>> = ({
                                 </div>
                             </VisuallyHidden>
                             {children}
-                        </HDialog.Panel>
-                    </Transition.Child>
+                        </DialogPanel>
+                    </TransitionChild>
                 </div>
             </HDialog>
         </Transition>

package/src/stories/drawer/Drawer.module.scss

@@ -27,7 +27,7 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     inset: 0;
 
     &.overlayBlur {
-        backdrop-filter: blur(0);
+        backdrop-filter: blur(2px);
         background-color: var(--pte-new-colors-overlayPageBackground);
         will-change: backdrop-filter, opacity;
     }

package/src/stories/drawer/Drawer.stories.tsx

@@ -6,7 +6,7 @@ import { Drawer } from './Drawer';
 import { Button } from '../button';
 import { Callout } from '../callout';
 import {
-    Menu,
+    Menu, MenuButton, MenuItems, MenuItem,
 } from '../menu';
 import { usePagination } from '../pagination';
 import { ChevronRight, Ellipsis } from '../icon';
@@ -41,7 +41,7 @@ export const Default: Story = {
                     onClose={setIsOpen}
                     additionalActions={(
                         <Menu as="div">
-                            <Menu.Button>
+                            <MenuButton>
                                 <Button
                                     kind="tertiary"
                                     shape="circle"
@@ -51,16 +51,16 @@ export const Default: Story = {
                                 >
                                     Action menu
                                 </Button>
-                            </Menu.Button>
-                            <Menu.Items position="right">
-                                <Menu.Item as="button">
+                            </MenuButton>
+                            <MenuItems position="right">
+                                <MenuItem as="button">
                                     Dispute
-                                </Menu.Item>
-                                <Menu.Item as="button">
+                                </MenuItem>
+                                <MenuItem as="button">
                                     Transfer
                                     <ChevronRight size={20} />
-                                </Menu.Item>
-                            </Menu.Items>
+                                </MenuItem>
+                            </MenuItems>
                         </Menu>
                     )}
                 >
@@ -101,7 +101,7 @@ export const Paginated: Story = {
                     title={currentPageTitle}
                     additionalActions={(
                         <Menu as="div">
-                            <Menu.Button>
+                            <MenuButton>
                                 <Button
                                     kind="tertiary"
                                     shape="circle"
@@ -111,16 +111,16 @@ export const Paginated: Story = {
                                 >
                                     Action menu
                                 </Button>
-                            </Menu.Button>
-                            <Menu.Items position="right">
-                                <Menu.Item as="button">
+                            </MenuButton>
+                            <MenuItems position="right">
+                                <MenuItem as="button">
                                     Dispute
-                                </Menu.Item>
-                                <Menu.Item as="button">
+                                </MenuItem>
+                                <MenuItem as="button">
                                     Transfer
                                     <ChevronRight size={20} />
-                                </Menu.Item>
-                            </Menu.Items>
+                                </MenuItem>
+                            </MenuItems>
                         </Menu>
                     )}
                 >
@@ -222,7 +222,7 @@ export const BottomPanel: Story = {
                     onClose={setIsOpen}
                     additionalActions={(
                         <Menu as="div">
-                            <Menu.Button>
+                            <MenuButton>
                                 <Button
                                     kind="tertiary"
                                     shape="circle"
@@ -232,16 +232,16 @@ export const BottomPanel: Story = {
                                 >
                                     Action menu
                                 </Button>
-                            </Menu.Button>
-                            <Menu.Items position="right">
-                                <Menu.Item as="button">
+                            </MenuButton>
+                            <MenuItems position="right">
+                                <MenuItem as="button">
                                     Dispute
-                                </Menu.Item>
-                                <Menu.Item as="button">
+                                </MenuItem>
+                                <MenuItem as="button">
                                     Transfer
                                     <ChevronRight size={20} />
-                                </Menu.Item>
-                            </Menu.Items>
+                                </MenuItem>
+                            </MenuItems>
                         </Menu>
                     )}
                 >

package/src/stories/drawer/Drawer.tsx

@@ -2,10 +2,11 @@
 
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 import {
-    useEffect,
-    useRef, Fragment, useMemo, useState,
+    useMemo, useState,
 } from 'react';
-import { Dialog, Transition } from '@headlessui/react';
+import {
+    Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
 import styles from './Drawer.module.scss';
@@ -205,7 +206,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     }, [children, pagination]);
 
     return (
-        <Transition show={isOpen} as={Fragment}>
+        <Transition show={isOpen}>
             <Dialog
                 as="div"
                 className={clsx(
@@ -214,6 +215,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                 )}
                 onClose={onClose}
                 {...overrides?.dialog}
+                role="dialog"
             >
                 <div
                     className={clsx(
@@ -222,8 +224,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         overrides?.overlay?.className,
                     )}
                 >
-                    <Transition.Child
-                        as={Fragment}
+                    <TransitionChild
                         enter={styles.enter}
                         enterFrom={styles.enterFrom}
                         enterTo={styles.enterTo}
@@ -231,14 +232,14 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         leaveFrom={styles.leaveFrom}
                         leaveTo={styles.leaveTo}
                     >
-                        <Dialog.Overlay
+                        <div
                             className={clsx(
                                 styles.overlay,
                                 overlayStyle === 'blur' && styles.overlayBlur,
                                 overlayStyle === 'grey' && styles.overlayGrey,
                             )}
                         />
-                    </Transition.Child>
+                    </TransitionChild>
                 </div>
 
                 <div
@@ -254,8 +255,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                     } : overrides?.panelContainer?.style}
                     {...overrides?.panelContainer}
                 >
-                    <Transition.Child
-                        as={Fragment}
+                    <TransitionChild
                         enter={styles.enter}
                         enterFrom={styles.enterFrom}
                         enterTo={styles.enterTo}
@@ -263,7 +263,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         leaveFrom={styles.leaveFrom}
                         leaveTo={styles.leaveTo}
                     >
-                        <Dialog.Panel
+                        <DialogPanel
                             className={clsx(
                                 styles.panel,
                                 styles[`from-${from}`],
@@ -316,11 +316,11 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                         // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
                                         when={hideTitle}
                                     >
-                                        <Dialog.Title as="h2" className={styles.titleTextContainer}>
+                                        <DialogTitle as="h2" className={styles.titleTextContainer}>
                                             <TextWhenString kind="paragraphSmall" weight="medium">
                                                 {title}
                                             </TextWhenString>
-                                        </Dialog.Title>
+                                        </DialogTitle>
                                     </VisuallyHidden>
                                 </div>
                                 <div className={clsx(styles.titleBarButtons, overrides?.titleBarButtons?.className)}>
@@ -389,8 +389,8 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                     </>
                                 )}
                             </div>
-                        </Dialog.Panel>
-                    </Transition.Child>
+                        </DialogPanel>
+                    </TransitionChild>
                 </div>
             </Dialog>
         </Transition>

package/src/stories/menu/Menu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import {
-    Menu,
+    Menu, MenuButton, MenuItems, MenuItem,
 } from './Menu';
 import { Button } from '../button';
 import { ChevronRight, Ellipsis } from '../icon';
@@ -21,7 +21,7 @@ export const Default: Story = {
     render: (args) => (
         <div style={{ height: '150px' }}>
             <Menu as="div">
-                <Menu.Button>
+                <MenuButton>
                     <Button
                         kind="tertiary"
                         shape="circle"
@@ -31,16 +31,16 @@ export const Default: Story = {
                     >
                         Action menu
                     </Button>
-                </Menu.Button>
-                <Menu.Items>
-                    <Menu.Item as="button">
+                </MenuButton>
+                <MenuItems>
+                    <MenuItem as="button">
                         Dispute
-                    </Menu.Item>
-                    <Menu.Item as="button">
+                    </MenuItem>
+                    <MenuItem as="button">
                         Transfer
                         <ChevronRight size={20} />
-                    </Menu.Item>
-                </Menu.Items>
+                    </MenuItem>
+                </MenuItems>
             </Menu>
         </div>
     ),

package/src/stories/menu/Menu.tsx

@@ -1,42 +1,33 @@
 import type { FC } from 'react';
-import { Fragment, ReactNode } from 'react';
 import type {
     MenuProps, MenuItemsProps, MenuItemProps, MenuButtonProps,
 } from '@headlessui/react';
-import { Menu as HeadlessMenu, Transition } from '@headlessui/react';
+import {
+    Menu as HeadlessMenu, MenuButton as HMenuButton, MenuItems as HMenuItems, MenuItem as HMenuItem, Transition,
+} from '@headlessui/react';
 import clsx from 'clsx';
 
 import styles from './Menu.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 
-export { Menu as HeadlessMenu } from '@headlessui/react';
-
 /**
  * Wraps the `HeadlessMenu` component from `@headlessui/react` to provide a styled dropdown menu.
  *
- * This component serves as the root of the menu and should wrap `Menu.Button`, `Menu.Items`, and `Menu.Item` components.
+ * This component serves as the root of the menu and should wrap `MenuButton`, `MenuItems`, and `MenuItem` components.
  *
  * Usage:
  *
  * ```tsx
  * <Menu>
- *   <Menu.Button>Options</Menu.Button>
- *   <Menu.Items>
- *     <Menu.Item>Item 1</Menu.Item>
- *     <Menu.Item>Item 2</Menu.Item>
- *   </Menu.Items>
+ *   <MenuButton>Options</MenuButton>
+ *   <MenuItems>
+ *     <MenuItem>Item 1</MenuItem>
+ *     <MenuItem>Item 2</MenuItem>
+ *   </MenuItems>
  * </Menu>
  * ```
  */
-export const Menu: FC<MenuProps<React.ElementType>> & {
-    Button: FC<MenuButtonProps<React.ElementType>>;
-    Items: FC<MenuItemsProps<React.ElementType> & {
-        position?: 'left' | 'right';
-    }>;
-    Item: FC<MenuItemProps<React.ElementType> & {
-        isNew?: boolean;
-    }>;
-} = ({ className, children, ...props }) => (
+export const Menu: FC<MenuProps<React.ElementType>> = ({ className, children, ...props }) => (
     <HeadlessMenu as="div" className={clsx(styles.menu, className)} {...props}>
         {children}
     </HeadlessMenu>
@@ -47,10 +38,10 @@ export const Menu: FC<MenuProps<React.ElementType>> & {
  *
  * Should be used inside a `Menu` component to serve as the toggle for `MenuItems`.
  */
-Menu.Button = ({ className, children, ...props }) => (
-    <HeadlessMenu.Button className={clsx(styles.menuButton, className)} {...props}>
+export const MenuButton: FC<MenuButtonProps<React.ElementType>> = ({ className, children, ...props }) => (
+    <HMenuButton className={clsx(styles.menuButton, className)} {...props}>
         {children}
-    </HeadlessMenu.Button>
+    </HMenuButton>
 );
 
 /**
@@ -60,7 +51,9 @@ Menu.Button = ({ className, children, ...props }) => (
  *
  * @param position - Controls the positioning of the menu items ('left' or 'right').
  */
-Menu.Items = ({
+export const MenuItems: FC<MenuItemsProps<React.ElementType> & {
+    position?: 'left' | 'right';
+}> = ({
     className, children, position = 'left', ...props
 }) => (
     <Transition
@@ -73,9 +66,9 @@ Menu.Items = ({
         leaveFrom={dropdownStyles.leaveFrom}
         leaveTo={dropdownStyles.leaveTo}
     >
-        <HeadlessMenu.Items className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
+        <HMenuItems className={clsx(styles.menuItems, position === 'left' && styles.leftPosition, position === 'right' && styles.rightPosition, className)} {...props}>
             {children}
-        </HeadlessMenu.Items>
+        </HMenuItems>
     </Transition>
 );
 
@@ -86,10 +79,12 @@ Menu.Items = ({
  *
  * @param isNew - Whether the menu items should be styled as new items.
  */
-Menu.Item = ({
+export const MenuItem: FC<MenuItemProps<React.ElementType> & {
+    isNew?: boolean;
+}> = ({
     className, children, isNew = false, ...props
 }) => (
-    <HeadlessMenu.Item className={clsx(styles.menuItem, isNew && styles.newItem, className)} {...props}>
+    <HMenuItem className={clsx(styles.menuItem, isNew && styles.newItem, className)} {...props}>
         {children}
-    </HeadlessMenu.Item>
+    </HMenuItem>
 );

package/src/stories/select/Select.module.scss

@@ -66,15 +66,15 @@
 
     transition: var(--pte-animations-interaction);
 
-    &[data-selected=true] {
+    &[data-selected] {
         background-color: var(--pte-new-colors-overlaySubtle);
     }
 
-    &:hover, &[data-headlessui-state="active"] {
+    &:hover, &[data-active], &[data-focus] {
         background-color: var(--pte-new-colors-overlayMedium);
     }
 
-    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-disabled] {
         pointer-events: none;
         cursor: default;
 
@@ -110,19 +110,19 @@
     justify-content: flex-start;
     align-items: center;
 
-    &[data-headlessui-state~="active"] {
+    &[data-focus] {
         .radioCircle {
             border-color: var(--pte-new-colors-contentPrimary);
         }
     }
 
-    &[data-headlessui-state~="checked"] {
+    &[data-checked] {
         .radioCircle {
             border: 5px solid var(--pte-new-colors-contentPrimary);
         }
     }
 
-    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-disabled] {
         pointer-events: none;
         cursor: default;
 
@@ -171,21 +171,21 @@
     border-radius: 6px;
     width: 100%;
 
-    &[data-headlessui-state~="active"] {
+    &[data-focus] {
         //.cardSurface {
         //    background-color: var(--pte-new-colors-overlayWhiteSubtle);
         //    border-color: var(--pte-new-colors-borderStrong);
         //}
     }
 
-    &[data-headlessui-state~="checked"] {
+    &[data-checked] {
         .cardSurface {
             background-color: var(--pte-new-colors-overlayMedium);
             border-color: var(--pte-new-colors-borderUltrastrong);
         }
     }
 
-    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-disabled] {
         pointer-events: none;
         cursor: default;
 
@@ -262,11 +262,7 @@
         padding: 6px 20px;
     }
 
-    &[data-headlessui-state~="active"] {
-
-    }
-
-    &[data-status="disabled"], &[data-headlessui-state~="disabled"] {
+    &[data-status="disabled"], &[data-disabled] {
         pointer-events: none;
         cursor: default;
 
@@ -284,7 +280,7 @@
         color: var(--pte-new-colors-contentPrimary);
     }
 
-    &[data-headlessui-state~="checked"] {
+    &[data-checked] {
         color: var(--pte-new-colors-contentPrimary);
     }
 }

package/src/stories/select/Select.stories.ts

@@ -133,7 +133,7 @@ export const Multiple: Story = {
     },
     render,
 };
-      
+
 export const Segmented: Story = {
     args: {
         label: 'Donation',

package/src/stories/select/Select.tsx

@@ -6,7 +6,9 @@ import type {
     CSSProperties, ComponentPropsWithoutRef, ForwardedRef, ReactNode,
 } from 'react';
 import { forwardRef, useId } from 'react';
-import { Listbox, RadioGroup, Transition } from '@headlessui/react';
+import {
+    Listbox, ListboxButton, ListboxOptions, ListboxOption, RadioGroup, Radio, Transition,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
@@ -187,7 +189,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                     onChange={onChange}
                     multiple={multiple}
                 >
-                    <Listbox.Button
+                    <ListboxButton
                         id={inputID}
                         {...overrides?.selectInput}
                         aria-disabled={disabled}
@@ -230,7 +232,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         ) : (
                             <FontAwesomeIcon className={clsx(inputStyles.enhancer, styles.chevron)} data-status={disabled ? 'disabled' : (status || 'default')} width="10px" icon={faChevronDown} />
                         )}
-                    </Listbox.Button>
+                    </ListboxButton>
                     <Transition
                         as="div"
                         className={dropdownStyles.transitionContainer}
@@ -241,7 +243,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                         leaveFrom={dropdownStyles.leaveFrom}
                         leaveTo={dropdownStyles.leaveTo}
                     >
-                        <Listbox.Options
+                        <ListboxOptions
                             className={clsx(
                                 overrides?.optionsContainer,
                                 styles.options,
@@ -251,10 +253,9 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                             } as CSSProperties}
                         >
                             {(options || []).map((option) => (
-                                <Listbox.Option
+                                <ListboxOption
                                     key={option.id}
                                     value={option.id}
-                                    data-selected={option.id === value || (value && value.includes(option.id))}
                                     className={clsx(
                                         overrides?.option,
                                         styles.option,
@@ -270,16 +271,16 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                     {(option.id === value || (value && value.includes(option.id))) && (
                                         <Icon icon={Check} size={12} />
                                     )}
-                                </Listbox.Option>
+                                </ListboxOption>
                             ))}
-                        </Listbox.Options>
+                        </ListboxOptions>
                     </Transition>
                 </Listbox>
             )}
             {kind === 'radio' && (
                 <RadioGroup ref={ref} as="div" className={styles.radioContainer} value={value} onChange={onChange}>
                     {options.map((option) => (
-                        <RadioGroup.Option
+                        <Radio
                             as="div"
                             className={clsx(
                                 styles.radioOption,
@@ -293,14 +294,14 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                             <TextWhenString kind="paragraphXSmall">
                                 {option.node}
                             </TextWhenString>
-                        </RadioGroup.Option>
+                        </Radio>
                     ))}
                 </RadioGroup>
             )}
             {kind === 'card' && (
                 <RadioGroup ref={ref} as="div" className={styles.cardContainer} value={value} onChange={onChange}>
                     {options.map((option) => (
-                        <RadioGroup.Option
+                        <Radio
                             as="div"
                             className={clsx(
                                 styles.cardOption,
@@ -315,14 +316,14 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                                     {option.node}
                                 </TextWhenString>
                             </div>
-                        </RadioGroup.Option>
+                        </Radio>
                     ))}
                 </RadioGroup>
             )}
             {kind === 'segmented' && (
                 <RadioGroup ref={ref} as="div" className={styles.segmentedContainer} value={value || options[0].id} onChange={onChange}>
                     {options.map((option) => (
-                        <RadioGroup.Option
+                        <Radio
                             as="div"
                             className={clsx(
                                 styles.segmentedOption,
@@ -346,7 +347,7 @@ export const Select = forwardRef(function <T = Record<string, any>>({
                             <TextWhenString kind="paragraphXSmall" weight="medium" className={styles.segmentedText}>
                                 {option.node}
                             </TextWhenString>
-                        </RadioGroup.Option>
+                        </Radio>
                     ))}
                 </RadioGroup>
             )}

package/src/stories/tabs/Tabs.tsx

@@ -5,7 +5,9 @@ import type {
 } from 'react';
 import { useId, useState } from 'react';
 import type { TabGroupProps, TabPanelProps, TabProps } from '@headlessui/react';
-import { Tab } from '@headlessui/react';
+import {
+    Tab, TabGroup, TabList, TabPanels, TabPanel,
+} from '@headlessui/react';
 import clsx from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
 import { motion } from 'framer-motion';
@@ -99,7 +101,7 @@ export const Tabs: FC<TabsProps> = ({
     const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
 
     return (
-        <Tab.Group
+        <TabGroup
             as="div"
             selectedIndex={index ?? selectedIndex}
             onChange={(i) => {
@@ -121,7 +123,7 @@ export const Tabs: FC<TabsProps> = ({
                         <div className={styles.glassBlend} />
                     </div>
                 )}
-                <Tab.List
+                <TabList
                     {...overrides?.tabList}
                     style={{
                         '--tab-width': tabWidth,
@@ -160,19 +162,19 @@ export const Tabs: FC<TabsProps> = ({
                     ))}
 
                     {/* <div key={`${id}-tab-active-border`} className={styles.activeTabBorder} /> */}
-                </Tab.List>
+                </TabList>
                 <div
                     {...overrides?.tabListBorder}
                     className={clsx(styles.tabListBorder, styles[barStyle], overrides?.tabListBorder?.className)}
                 />
             </div>
 
-            <Tab.Panels
+            <TabPanels
                 {...overrides?.panelContainer}
                 className={clsx(styles.tabPanels, styles[backgroundStyle], overrides?.panelContainer?.className)}
             >
                 {tabs.map(({ title, content }) => (
-                    <Tab.Panel
+                    <TabPanel
                         key={`${id}-tab-${title}-content`}
                         {...overrides?.panel}
                         className={clsx(
@@ -184,9 +186,9 @@ export const Tabs: FC<TabsProps> = ({
                         )}
                     >
                         {content}
-                    </Tab.Panel>
+                    </TabPanel>
                 ))}
-            </Tab.Panels>
-        </Tab.Group>
+            </TabPanels>
+        </TabGroup>
     );
 };