paris 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # paris
 
+## 0.7.0
+
+### Minor Changes
+
+- 669cf98: `Avatar` component
+- 669cf98: `Popover` component
+
+### Patch Changes
+
+- 669cf98: Icon: `Spinner`
+
 ## 0.6.1
 
 ### 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.6.1",
+  "version": "0.7.0",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {
@@ -44,6 +44,7 @@
     "./icon": "./src/stories/icon/index.ts",
     "./input": "./src/stories/input/index.ts",
     "./pagination": "./src/stories/pagination/index.ts",
+    "./popover": "./src/stories/popover/index.ts",
     "./select": "./src/stories/select/index.ts",
     "./styledlink": "./src/stories/styledlink/index.ts",
     "./table": "./src/stories/table/index.ts",
@@ -58,6 +59,10 @@
   },
   "dependencies": {
     "@ariakit/react": "^0.2.3",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@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",
     "@radix-ui/react-checkbox": "^1.0.4",
     "clsx": "^1.2.1",
@@ -66,13 +71,10 @@
     "pte": "^0.4.9",
     "react-hot-toast": "^2.4.1",
     "react-parallax-tilt": "^1.7.144",
+    "react-tiny-popover": "^8.0.4",
     "ts-deepmerge": "^6.0.3"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "react": "^18.x",
     "react-dom": "^18.x",
     "sass": "^1.x",

package/src/stories/avatar/Avatar.module.scss

@@ -3,4 +3,5 @@
     aspect-ratio: 1;
     border: 1px solid var(--frame-color);
     overflow: clip;
+    box-shadow: var(--pte-lighting-subtlePopup);
 }

package/src/stories/avatar/Avatar.stories.ts

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
 import { Avatar } from './Avatar';
 
 const meta: Meta<typeof Avatar> = {
-    title: 'Uncategorized/Avatar',
+    title: 'Content/Avatar',
     component: Avatar,
     tags: ['autodocs'],
 };
@@ -12,12 +13,13 @@ type Story = StoryObj<typeof Avatar>;
 
 export const Default: Story = {
     args: {
-        children: 'Hello world! This is a new Avatar component.',
-    },
-};
-
-export const Secondary: Story = {
-    args: {
-        children: 'Hello world! This is a secondary component.',
+        width: '128px',
+        children: createElement(
+            'img',
+            {
+                src: 'https://swift.slingshot.fm/sling/static/Billie-Eilish.jpg',
+                alt: 'Avatar',
+            },
+        ),
     },
 };

package/src/stories/avatar/Avatar.tsx

@@ -1,14 +1,19 @@
-import type { CSSProperties, FC, ReactNode } from 'react';
+import type {
+    ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
+} from 'react';
 import type { CSSLength } from '@ssh/csstypes';
+import { useMemo } from 'react';
+import clsx from 'clsx';
 import styles from './Avatar.module.scss';
 import { pvar } from '../theme';
 
 export type AvatarProps = {
     frameColor?: string;
-    width?: CSSLength;
-    /** The contents of the Avatar. */
+    /** The width of the Avatar, as a CSS length string or a number. If a number is provided, the assumed unit is pixels. */
+    width?: CSSLength | number;
+    /** The contents of the Avatar, usually an image element. */
     children?: ReactNode;
-};
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 
 /**
  * An Avatar component.
@@ -26,14 +31,24 @@ export const Avatar: FC<AvatarProps> = ({
     frameColor = pvar('colors.borderOpaque'),
     width = 'fit-content',
     children,
-}) => (
-    <div
-        style={{
-            width,
-            '--frame-color': frameColor,
-        } as CSSProperties}
-        className={styles.content}
-    >
-        {children}
-    </div>
-);
+    className,
+    style,
+    ...props
+}) => {
+    const widthMemoized = useMemo(() => (
+        typeof width === 'number' ? `${width}px` : width
+    ) as CSSProperties['width'], [width]);
+    return (
+        <div
+            {...props}
+            style={{
+                width: widthMemoized,
+                '--frame-color': frameColor,
+                ...style,
+            } as CSSProperties}
+            className={clsx(styles.content, className)}
+        >
+            {children}
+        </div>
+    );
+};

package/src/stories/button/Button.tsx

@@ -13,6 +13,7 @@ import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pvar } from '../theme';
+import { Spinner } from '../icon';
 
 const EnhancerSizes = {
     large: 13,
@@ -81,6 +82,11 @@ export type ButtonProps = {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * Displays a loading indicator inside the Button and disables user interaction.
+     * @default false
+     */
+    loading?: boolean;
     /**
      * The interaction handler for the Button.
      */
@@ -98,7 +104,7 @@ export type ButtonProps = {
      *
      * This should be text. When Button shape is `circle` or `square`, the action description should still be passed here for screen readers.
      */
-    children: ReactNode | ReactNode[];
+    children?: ReactNode | ReactNode[];
 } & Omit<AriaButtonProps, 'children' | 'disabled' | 'onClick'>;
 
 /**
@@ -126,6 +132,7 @@ export const Button: FC<ButtonProps> = ({
     onClick,
     children,
     disabled,
+    loading,
     href,
     ...props
 }) => (
@@ -148,7 +155,7 @@ export const Button: FC<ButtonProps> = ({
         aria-disabled={disabled ?? false}
         type={type}
         aria-details={typeof children === 'string' ? children : undefined}
-        onClick={!disabled && !href ? onClick : () => {}}
+        onClick={!disabled && !href && !loading ? onClick : () => {}}
         disabled={false}
         {...href ? {
             render: (properties) => (
@@ -170,7 +177,11 @@ export const Button: FC<ButtonProps> = ({
         )}
         {!['circle', 'square'].includes(shape) && (
             <Text kind="labelXSmall">
-                {children || 'Button'}
+                {!loading ? (
+                    children || 'Button'
+                ) : (
+                    <Spinner size={EnhancerSizes[size]} />
+                )}
             </Text>
         )}
         {!!endEnhancer && (

package/src/stories/callout/Callout.tsx

@@ -1,4 +1,6 @@
-import type { FC, ReactElement, ReactNode } from 'react';
+import type {
+    ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
+} from 'react';
 import clsx from 'clsx';
 import styles from './Callout.module.scss';
 import { RemoveFromDOM, TextWhenString } from '../utility';
@@ -10,7 +12,7 @@ export type CalloutProps = {
     icon?: ReactElement;
     /** The contents of the Callout. */
     children?: ReactNode;
-};
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children'>;
 
 /**
  * A Callout component.
@@ -28,8 +30,10 @@ export const Callout: FC<CalloutProps> = ({
     variant = 'default',
     icon,
     children,
+    className,
+    ...props
 }) => (
-    <div className={clsx(styles.content, styles[variant])}>
+    <div className={clsx(styles.content, styles[variant], className)} {...props}>
         <RemoveFromDOM when={!icon}>
             <div className={styles.icon}>
                 {icon}

package/src/stories/checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
 import type { FC, ReactNode } from 'react';
 import { useId } from 'react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import clsx from 'clsx';
 import styles from './Checkbox.module.scss';
 import { pvar } from '../theme';
 
@@ -10,7 +11,7 @@ export type CheckboxProps = {
     disabled?: boolean;
     /** The contents of the Checkbox. */
     children?: ReactNode | ReactNode[];
-};
+} & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;
 
 /**
 * A Checkbox component.
@@ -29,12 +30,15 @@ export const Checkbox: FC<CheckboxProps> = ({
     onChange,
     disabled,
     children,
+    className,
+    ...props
 }) => {
     const inputID = useId();
     return (
         <label
             htmlFor={inputID}
-            className={styles.container}
+            className={clsx(styles.container, className)}
+            {...props}
         >
             <RadixCheckbox.Root
                 id={inputID}

package/src/stories/field/Field.tsx

@@ -57,6 +57,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
     htmlFor,
     disabled,
     children,
+    // className,
     ...props
 }) => (
     // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
@@ -67,6 +68,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
         className={clsx(
             props.overrides?.container?.className,
             styles.container,
+            // className,
         )}
         onClick={(e) => {
             e.preventDefault();

package/src/stories/icon/Spinner.tsx

@@ -0,0 +1,15 @@
+import { memo } from 'react';
+import type { IconDefinition } from './Icon';
+
+export const Spinner: IconDefinition = memo(({ size }) => (
+    <svg width={size} height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <style
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+                __html: '.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}',
+            }}
+        />
+        <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
+        <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" className="spinner_ajPY" />
+    </svg>
+));

package/src/stories/icon/index.ts

@@ -3,3 +3,4 @@ export { Close } from './Close';
 export { ChevronLeft } from './ChevronLeft';
 export { ChevronRight } from './ChevronRight';
 export { Ellipsis } from './Ellipsis';
+export { Spinner } from './Spinner';

package/src/stories/input/Input.module.scss

@@ -102,6 +102,7 @@
 }
 
 .enhancer {
+    display: flex;
     color: var(--pte-colors-contentSecondary);
     margin-block-start: -0.5px;
     font-size: var(--pte-typography-styles-paragraphSmall-fontSize);

package/src/stories/popover/Popover.module.scss

@@ -0,0 +1,22 @@
+@keyframes intro {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+
+.trigger {
+    width: fit-content;
+}
+
+.content {
+    background-color: var(--pte-colors-backgroundPrimary);
+    animation: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOutExpo) 0s 1 intro;
+    width: fit-content;
+    border-radius: var(--pte-borders-radius-rounded);
+    box-shadow: var(--pte-lighting-shallowPopup);
+    border: 1px solid var(--pte-borders-dropdown-color)
+}

package/src/stories/popover/Popover.stories.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+import { Popover } from './Popover';
+import { Button } from '../button';
+
+const meta: Meta<typeof Popover> = {
+    title: 'Surfaces/Popover',
+    component: Popover,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+    args: {
+        trigger: createElement(
+            Button,
+            {},
+            'Click me',
+        ),
+        children: 'Hello world!',
+    },
+};

package/src/stories/popover/Popover.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import type {
+    ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
+} from 'react';
+import type { PopoverProps as RTPopoverProps } from 'react-tiny-popover';
+import { Popover as RTPopover } from 'react-tiny-popover';
+import { forwardRef, useState } from 'react';
+import clsx from 'clsx';
+import styles from './Popover.module.scss';
+import typography from '../text/Typography.module.css';
+
+// TODO(URGENT): Figure out how to properly handle accessibility; the popover content should capture focus for tabbing and clicking, and `esc` should allow closing the popover. Might be better to use Radix popover instead of react-tiny-popover?
+
+export type PopoverProps = {
+    /** The trigger element for the Popover. */
+    trigger: ReactElement;
+    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
+    isOpen?: boolean;
+    /** Optionally, manage state for the Popover yourself by passing `isOpen` and `setIsOpen` props. */
+    setIsOpen?: (isOpen: boolean) => void;
+    /** The contents of the Popover. */
+    children?: ReactNode;
+} & Omit<RTPopoverProps, 'content' | 'children' | 'isOpen'>;
+
+interface TriggerProps extends ComponentPropsWithoutRef<'div'> {
+    onClick: () => void;
+}
+const Trigger = forwardRef<HTMLDivElement, TriggerProps>((props, ref) => (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+    <div className={styles.trigger} ref={ref} onClick={props.onClick}>
+        {props.children}
+    </div>
+));
+
+/**
+ * A Popover component, based on [`react-tiny-popover`](https://github.com/alexkatz/react-tiny-popover). Refer to its docs for more information on positioning props.
+ *
+ * <hr />
+ *
+ * To use this component:
+ *
+ * ```js
+ * import { Popover } from 'paris/popover';
+ *
+ * <Popover trigger={<button>Trigger</button>}>
+ *    <p>Content</p>
+ * </Popover>
+ * ```
+ * @constructor
+ */
+export const Popover: FC<PopoverProps> = ({
+    trigger,
+    children,
+    padding,
+    positions,
+    align,
+    isOpen,
+    setIsOpen,
+    ...props
+}) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+        <RTPopover
+            positions={positions || ['bottom', 'top', 'left', 'right']}
+            align={align || 'start'}
+            padding={padding || 8}
+            isOpen={typeof isOpen === 'undefined' ? open : isOpen}
+            containerClassName={clsx(typography.paragraphSmall, styles.content)}
+            content={(
+                <>
+                    {children}
+                </>
+            )}
+            onClickOutside={() => {
+                setIsOpen?.(false);
+                setOpen(false);
+            }}
+            {...props}
+        >
+            <Trigger
+                onClick={() => {
+                    setIsOpen?.(!isOpen);
+                    setOpen((cur) => !cur);
+                }}
+            >
+                {trigger}
+            </Trigger>
+        </RTPopover>
+    );
+};

package/src/stories/popover/index.ts

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

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

@@ -62,13 +62,67 @@
         background-color: var(--pte-colors-backgroundTertiary);
     }
 
-    &[data-disabled=true] {
-        color: var(--pte-colors-contentDisabled);
+    &[data-disabled=true], &[data-headlessui-state~="disabled"] {
         pointer-events: none;
         cursor: default;
+
+        &, & * {
+            color: var(--pte-colors-contentDisabled);
+        }
     }
 }
 
 .content {
     width: 100%;
 }
+
+.radioContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.radioOption {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    justify-content: flex-start;
+    align-items: center;
+
+    &[data-headlessui-state~="active"] {
+        .radioCircle {
+            border-color: var(--pte-colors-contentPrimary);
+        }
+    }
+
+    &[data-headlessui-state~="checked"] {
+        .radioCircle {
+            border: 5px solid var(--pte-colors-contentPrimary);
+        }
+    }
+
+    &[data-headlessui-state~="disabled"] {
+        pointer-events: none;
+        cursor: default;
+
+        &, & * {
+            color: var(--pte-colors-contentDisabled);
+        }
+
+        .radioCircle {
+            border-color: var(--pte-colors-contentDisabled);
+        }
+    }
+}
+
+.radioCircle {
+    flex-shrink: 0;
+    margin: 0 8px;
+    width: 14px;
+    height: 14px;
+    border-radius: 100%;
+    border: 1.5px solid var(--pte-colors-contentTertiary);
+    transition: all var(--pte-animations-interaction);
+}

package/src/stories/select/Select.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
-import { Listbox, Transition } from '@headlessui/react';
+import { Listbox, RadioGroup, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
@@ -9,16 +9,19 @@ import { useId } from 'react';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from './Select.module.scss';
+import typography from '../text/Typography.module.css';
 import type { TextProps } from '../text';
 import { Text } from '../text';
 import type { InputProps } from '../input';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
 import { Field } from '../field';
+import { TextWhenString } from '../utility';
 
 export type Option<T = Record<string, any>> = {
     id: string,
     node: ReactNode,
+    disabled?: boolean,
     metadata?: T,
 };
 export type SelectProps<T = Record<string, any>> = {
@@ -40,6 +43,11 @@ export type SelectProps<T = Record<string, any>> = {
      * The interaction handler for the Select.
      */
     onChange?: (value: Option<T>['id'] | null) => void | Promise<void>;
+    /**
+     * The visual variant of the Select. Listboxes will render as a dropdown menu, and radios will render as a radio group.
+     * @default listbox
+     */
+    kind?: 'listbox' | 'radio';
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -80,6 +88,7 @@ export function Select<T = Record<string, any>>({
     startEnhancer,
     endEnhancer,
     disabled,
+    kind = 'listbox',
     overrides,
 }: SelectProps<T>) {
     const inputID = useId();
@@ -97,80 +106,103 @@ export function Select<T = Record<string, any>>({
                 description: overrides?.description,
             }}
         >
-            <Listbox
-                as="div"
-                value={value}
-                onChange={onChange}
-            >
-                <Listbox.Button
-                    id={inputID}
-                    {...overrides?.selectInput}
-                    aria-disabled={disabled}
-                    data-status={disabled ? 'disabled' : (status || 'default')}
-                    className={clsx(
-                        overrides?.selectInput?.className,
-                        inputStyles.inputContainer,
-                        styles.field,
-                    )}
-                >
-                    {!!startEnhancer && (
-                        <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
-                            {!!startEnhancer && (
-                                <MemoizedEnhancer
-                                    enhancer={startEnhancer}
-                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
-                                />
-                            )}
-                        </div>
-                    )}
-                    {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
-                    {endEnhancer ? (
-                        <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
-                            {!!endEnhancer && (
-                                <MemoizedEnhancer
-                                    enhancer={endEnhancer}
-                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
-                                />
-                            )}
-                        </div>
-                    ) : (
-                        <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
-                    )}
-                </Listbox.Button>
-                <Transition
-                    enter={dropdownStyles.transition}
-                    enterFrom={dropdownStyles.enterFrom}
-                    enterTo={dropdownStyles.enterTo}
-                    leave={dropdownStyles.transition}
-                    leaveFrom={dropdownStyles.leaveFrom}
-                    leaveTo={dropdownStyles.leaveTo}
+            {kind === 'listbox' && (
+                <Listbox
+                    as="div"
+                    value={value}
+                    onChange={onChange}
                 >
-                    <Listbox.Options
+                    <Listbox.Button
+                        id={inputID}
+                        {...overrides?.selectInput}
+                        aria-disabled={disabled}
+                        data-status={disabled ? 'disabled' : (status || 'default')}
                         className={clsx(
-                            overrides?.optionsContainer,
-                            styles.options,
+                            overrides?.selectInput?.className,
+                            inputStyles.inputContainer,
+                            styles.field,
                         )}
                     >
-                        {(options || []).map((option) => (
-                            <Listbox.Option
-                                key={option.id}
-                                value={option.id}
-                                data-selected={option.id === value}
-                                className={clsx(
-                                    overrides?.option,
-                                    styles.option,
+                        {!!startEnhancer && (
+                            <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                                {!!startEnhancer && (
+                                    <MemoizedEnhancer
+                                        enhancer={startEnhancer}
+                                        size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                    />
                                 )}
-                            >
-                                {typeof option.node === 'string' ? (
-                                    <Text as="span" kind="paragraphSmall">
-                                        {option.node}
-                                    </Text>
-                                ) : option.node}
-                            </Listbox.Option>
-                        ))}
-                    </Listbox.Options>
-                </Transition>
-            </Listbox>
+                            </div>
+                        )}
+                        {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
+                        {endEnhancer ? (
+                            <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                                {!!endEnhancer && (
+                                    <MemoizedEnhancer
+                                        enhancer={endEnhancer}
+                                        size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                    />
+                                )}
+                            </div>
+                        ) : (
+                            <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                        )}
+                    </Listbox.Button>
+                    <Transition
+                        enter={dropdownStyles.transition}
+                        enterFrom={dropdownStyles.enterFrom}
+                        enterTo={dropdownStyles.enterTo}
+                        leave={dropdownStyles.transition}
+                        leaveFrom={dropdownStyles.leaveFrom}
+                        leaveTo={dropdownStyles.leaveTo}
+                    >
+                        <Listbox.Options
+                            className={clsx(
+                                overrides?.optionsContainer,
+                                styles.options,
+                            )}
+                        >
+                            {(options || []).map((option) => (
+                                <Listbox.Option
+                                    key={option.id}
+                                    value={option.id}
+                                    data-selected={option.id === value}
+                                    className={clsx(
+                                        overrides?.option,
+                                        styles.option,
+                                    )}
+                                    disabled={option.disabled || false}
+                                >
+                                    {typeof option.node === 'string' ? (
+                                        <Text as="span" kind="paragraphSmall">
+                                            {option.node}
+                                        </Text>
+                                    ) : option.node}
+                                </Listbox.Option>
+                            ))}
+                        </Listbox.Options>
+                    </Transition>
+                </Listbox>
+            )}
+            {kind === 'radio' && (
+                <RadioGroup as="div" className={styles.radioContainer} value={value} onChange={onChange}>
+                    {options.map((option) => (
+                        <RadioGroup.Option
+                            as="div"
+                            className={clsx(
+                                styles.radioOption,
+                            )}
+                            key={option.id}
+                            value={option.id}
+                            disabled={option.disabled || false}
+                        >
+                            <div className={styles.radioCircle} />
+                            <TextWhenString kind="paragraphXSmall">
+                                {option.node}
+                            </TextWhenString>
+                        </RadioGroup.Option>
+                    ))}
+                </RadioGroup>
+            )}
         </Field>
     );
 }

package/src/stories/table/Table.tsx

@@ -107,6 +107,10 @@ export function Table<RowData extends Record<string, any>[]>({
                 onClick={() => {
                     if (clickableRows) onRowClick?.(rows[index]);
                 }}
+                onKeyDown={(e) => {
+                    if (clickableRows && (e.key === 'Enter' || e.key === ' ')) onRowClick?.(rows[index]);
+                }}
+                tabIndex={clickableRows ? 0 : undefined}
                 {...overrides?.trBody}
                 className={clsx(
                     clickableRows && styles.clickable,

package/src/stories/text/Text.tsx

@@ -1,10 +1,11 @@
-import type { ComponentProps, FC, ReactNode } from 'react';
-import { createElement } from 'react';
+/* eslint-disable prefer-arrow-callback */
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { createElement, memo } from 'react';
 import clsx from 'clsx';
 import type { CSSColor } from '@ssh/csstypes';
 import typography from './Typography.module.css';
 import styles from './Text.module.scss';
-import type { LightTheme, Theme } from '../theme';
+import type { LightTheme } from '../theme';
 
 export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
 export type GlobalCSSValues = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
@@ -39,7 +40,7 @@ export type TextProps<T extends TextElement = TextElement> = {
 
     /** The contents of the Text element. */
     children: ReactNode;
-} & ComponentProps<T>;
+} & ComponentPropsWithoutRef<T>;
 
 /**
  * A `Text` component is used to render text with one of our theme formats.
@@ -61,7 +62,7 @@ export type TextProps<T extends TextElement = TextElement> = {
  * ```
  * @constructor
  */
-export function Text<T extends TextElement>({
+export const Text = memo(function TextComponent<T extends TextElement>({
     kind,
     as,
     weight,
@@ -89,4 +90,4 @@ export function Text<T extends TextElement>({
         },
         children,
     );
-}
+});

package/src/stories/toast/Toast.tsx

@@ -1,6 +1,6 @@
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 import type { ToasterProps } from 'react-hot-toast';
-import { toast, Toaster } from 'react-hot-toast';
+import { Toaster } from 'react-hot-toast';
 import clsx from 'clsx';
 import styles from './Toast.module.scss';
 import typography from '../text/Typography.module.css';
@@ -46,6 +46,4 @@ export const Toast: FC<ToastProps> = ({
     />
 );
 
-export {
-    toast,
-};
+export * from 'react-hot-toast';

package/src/stories/utility/TextWhenString.tsx

@@ -10,7 +10,7 @@ export const TextWhenString = memo<PropsWithChildren<TextProps<TextElement>>>(({
     children,
     ...props
 }) => {
-    if (typeof children === 'string') {
+    if (typeof children === 'string' || typeof children === 'number') {
         return (
             <Text
                 {...props}