paris 0.17.9 → 0.18.0

package/src/stories/accordionselect/AccordionSelect.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { AccordionSelect } from './AccordionSelect';
 
 const meta: Meta<typeof AccordionSelect> = {
@@ -32,10 +32,7 @@ export const NoSelection: Story = {
 
 export const WithDisabledOption: Story = {
     args: {
-        options: [
-            ...options,
-            { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true },
-        ],
+        options: [...options, { id: 'nowhere', node: 'Nowhere, it was all a dream', disabled: true }],
         value: 'champagne',
     },
 };

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -1,11 +1,9 @@
 'use client';
 
-import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
-import {
-    useCallback, useEffect, useRef, useState,
-} from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
 import { clsx } from 'clsx';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Check, ChevronRight, Icon } from '../icon';
 import { TextWhenString } from '../utility';
 import styles from './AccordionSelect.module.scss';
@@ -127,16 +125,19 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
     const open = controlledOpen ?? internalOpen;
     const rootRef = useRef<HTMLDivElement>(null);
 
-    const setOpen = useCallback((nextOpen: boolean) => {
-        setInternalOpen(nextOpen);
-        onOpenChange?.(nextOpen);
-    }, [onOpenChange]);
+    const setOpen = useCallback(
+        (nextOpen: boolean) => {
+            setInternalOpen(nextOpen);
+            onOpenChange?.(nextOpen);
+        },
+        [onOpenChange],
+    );
 
     const selectedOption = options.find((o) => o.id === value);
 
     useEffect(() => {
         if (!closeOnClickOutside || !open) {
-            return () => { };
+            return () => {};
         }
 
         const handleClickOutside = (e: MouseEvent) => {
@@ -151,28 +152,18 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
 
     let headerContent: ReactNode = placeholder;
     if (selectedOption) {
-        headerContent = renderSelected
-            ? renderSelected(selectedOption)
-            : selectedOption.node;
+        headerContent = renderSelected ? renderSelected(selectedOption) : selectedOption.node;
     }
 
     return (
         <div
             ref={rootRef}
             {...overrides?.root}
-            className={clsx(
-                styles.root,
-                open && styles.open,
-                overrides?.root?.className,
-            )}
+            className={clsx(styles.root, open && styles.open, overrides?.root?.className)}
         >
             <div
                 {...overrides?.header}
-                className={clsx(
-                    styles.header,
-                    open && styles.open,
-                    overrides?.header?.className,
-                )}
+                className={clsx(styles.header, open && styles.open, overrides?.header?.className)}
                 onClick={() => setOpen(!open)}
                 onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -190,11 +181,7 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                 </div>
                 <div className={styles.headerEnd}>
                     {label}
-                    <Icon
-                        icon={ChevronRight}
-                        size={16}
-                        className={clsx(styles.chevron, open && styles.open)}
-                    />
+                    <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
                 </div>
             </div>
 
@@ -213,17 +200,11 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                             duration: 0.8,
                             ease: [0.87, 0, 0.13, 1],
                         }}
-                        className={clsx(
-                            styles.dropdown,
-                            overrides?.dropdown?.className,
-                        )}
+                        className={clsx(styles.dropdown, overrides?.dropdown?.className)}
                     >
                         <div
                             {...overrides?.dropdownContent}
-                            className={clsx(
-                                styles.dropdownContent,
-                                overrides?.dropdownContent?.className,
-                            )}
+                            className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
                         >
                             {options.map((option) => {
                                 const isOptionSelected = option.id === value;
@@ -234,27 +215,22 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                                         disabled={option.disabled}
                                         data-selected={isOptionSelected}
                                         {...overrides?.option}
-                                        className={clsx(
-                                            styles.option,
-                                            overrides?.option?.className,
-                                        )}
+                                        className={clsx(styles.option, overrides?.option?.className)}
                                         onClick={() => {
                                             onChange?.(option);
                                             if (closeOnSelect) setOpen(false);
                                         }}
                                     >
                                         <div className={styles.optionContent}>
-                                            {renderOption
-                                                ? renderOption(option, isOptionSelected)
-                                                : (
-                                                    <TextWhenString kind="paragraphXSmall" weight="medium">
-                                                        {option.node}
-                                                    </TextWhenString>
-                                                )}
+                                            {renderOption ? (
+                                                renderOption(option, isOptionSelected)
+                                            ) : (
+                                                <TextWhenString kind="paragraphXSmall" weight="medium">
+                                                    {option.node}
+                                                </TextWhenString>
+                                            )}
                                         </div>
-                                        {isOptionSelected && (
-                                            <Icon icon={Check} size={13} className={styles.check} />
-                                        )}
+                                        {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
                                     </button>
                                 );
                             })}

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { createElement } from 'react';
 import { Avatar } from './Avatar';
 

package/src/stories/avatar/Avatar.tsx

@@ -1,11 +1,9 @@
-import type {
-    ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
-} from 'react';
-import { useMemo } from 'react';
 import type { CSSLength } from '@ssh/csstypes';
 import { clsx } from 'clsx';
-import styles from './Avatar.module.scss';
+import type { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
+import { useMemo } from 'react';
 import { pvar } from '../theme';
+import styles from './Avatar.module.scss';
 
 export type AvatarProps = {
     frameColor?: string;
@@ -35,17 +33,20 @@ export const Avatar: FC<AvatarProps> = ({
     style,
     ...props
 }) => {
-    const widthMemoized = useMemo(() => (
-        typeof width === 'number' ? `${width}px` : width
-    ) as CSSProperties['width'], [width]);
+    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}
+            style={
+                {
+                    width: widthMemoized,
+                    '--frame-color': frameColor,
+                    ...style,
+                } as CSSProperties
+            }
             className={clsx(styles.content, className)}
         >
             {children}

package/src/stories/button/Button.stories.ts

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { createElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { createElement } from 'react';
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
@@ -51,10 +51,11 @@ export const WithEnhancer: Story = {
     args: {
         children: 'Button',
         kind: 'primary',
-        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
-            icon: faPlus,
-            width: `${size}px`,
-        }),
+        startEnhancer: ({ size }) =>
+            createElement(FontAwesomeIcon, {
+                icon: faPlus,
+                width: `${size}px`,
+            }),
     },
 };
 
@@ -63,10 +64,11 @@ export const Circle: Story = {
         children: 'Button',
         shape: 'circle',
         kind: 'tertiary',
-        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
-            icon: faPlus,
-            width: `${size}px`,
-        }),
+        startEnhancer: ({ size }) =>
+            createElement(FontAwesomeIcon, {
+                icon: faPlus,
+                width: `${size}px`,
+            }),
     },
 };
 
@@ -75,10 +77,11 @@ export const Rounded: Story = {
         children: 'Button',
         shape: 'rectangle',
         corners: 'rounded',
-        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
-            icon: faPlus,
-            width: `${size}px`,
-        }),
+        startEnhancer: ({ size }) =>
+            createElement(FontAwesomeIcon, {
+                icon: faPlus,
+                width: `${size}px`,
+            }),
     },
 };
 

package/src/stories/button/Button.tsx

@@ -1,20 +1,18 @@
 'use client';
 
-import type {
-    CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
-} from 'react';
-import { useMemo } from 'react';
 import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
 import { Button as AriaButton } from '@ariakit/react';
+import type { CSSLength } from '@ssh/csstypes';
 import { clsx } from 'clsx';
 import fontColorContrast from 'font-color-contrast';
-import type { CSSLength } from '@ssh/csstypes';
-import styles from './Button.module.scss';
-import { Text } from '../text';
-import type { Enhancer } from '../../types/Enhancer';
+import type { CSSProperties, FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
+import { useMemo } from 'react';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import type { Enhancer } from '../../types/Enhancer';
+import { NotificationDot, Spinner } from '../icon';
+import { Text } from '../text';
 import { pvar } from '../theme';
-import { Spinner, NotificationDot } from '../icon';
+import styles from './Button.module.scss';
 
 const EnhancerSizes = {
     large: 13,
@@ -68,7 +66,7 @@ export type ButtonProps = {
      * @see CornerPresets
      * @default rounded
      */
-    corners?: typeof CornerPresets[number] | CSSLength;
+    corners?: (typeof CornerPresets)[number] | CSSLength;
     /**
      * A color to apply for the Button. Provide an object with `primary` and `secondary` properties to set the primary and hover colors.
      */
@@ -164,16 +162,26 @@ export const Button: FC<ButtonProps> = ({
     return (
         <AriaButton
             {...props}
-            style={(theme || colors) ? {
-                '--pte-new-colors-contentInversePrimary': fontColorContrast(theme ? ButtonThemes[theme].primary : colors?.primary || pvar('new.colors.contentPrimary')), // text for primary
-                '--pte-new-colors-buttonFill': theme ? ButtonThemes[theme].primaryAlt : colors?.primary, // background for primary
-                '--pte-new-colors-buttonFillHover': theme ? ButtonThemes[theme].secondaryAlt : colors?.secondary, // hover background for primary
-                '--pte-new-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary, // text for secondary/tertiary
-                '--pte-new-colors-buttonBorder': theme ? ButtonThemes[theme].primary : colors?.primary, // border for secondary/tertiary
-                '--pte-new-colors-overlayMedium': theme ? ButtonThemes[theme].secondary : colors?.secondary, // hover background for secondary/tertiary
-                borderRadius: !cornersIsPreset ? corners : '',
-                ...style,
-            } as CSSProperties : ({ borderRadius: !cornersIsPreset ? corners : '', ...style })}
+            style={
+                theme || colors
+                    ? ({
+                          '--pte-new-colors-contentInversePrimary': fontColorContrast(
+                              theme
+                                  ? ButtonThemes[theme].primary
+                                  : colors?.primary || pvar('new.colors.contentPrimary'),
+                          ), // text for primary
+                          '--pte-new-colors-buttonFill': theme ? ButtonThemes[theme].primaryAlt : colors?.primary, // background for primary
+                          '--pte-new-colors-buttonFillHover': theme
+                              ? ButtonThemes[theme].secondaryAlt
+                              : colors?.secondary, // hover background for primary
+                          '--pte-new-colors-contentPrimary': theme ? ButtonThemes[theme].primary : colors?.primary, // text for secondary/tertiary
+                          '--pte-new-colors-buttonBorder': theme ? ButtonThemes[theme].primary : colors?.primary, // border for secondary/tertiary
+                          '--pte-new-colors-overlayMedium': theme ? ButtonThemes[theme].secondary : colors?.secondary, // hover background for secondary/tertiary
+                          borderRadius: !cornersIsPreset ? corners : '',
+                          ...style,
+                      } as CSSProperties)
+                    : { borderRadius: !cornersIsPreset ? corners : '', ...style }
+            }
             className={clsx(
                 styles.button,
                 styles[kind],
@@ -187,39 +195,27 @@ export const Button: FC<ButtonProps> = ({
             aria-details={typeof children === 'string' ? children : undefined}
             onClick={!disabled && !href && !loading ? onClick : () => {}}
             disabled={false}
-            {...href ? {
-                render: (properties) => (
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content
-                    <a
-                        {...properties}
-                        href={href}
-                        target={props.hreftarget ?? '_self'}
-                        rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
-                    />
-                ),
-            } : {}}
+            {...(href
+                ? {
+                      render: (properties) => (
+                          // eslint-disable-next-line jsx-a11y/anchor-has-content
+                          <a
+                              {...properties}
+                              href={href}
+                              target={props.hreftarget ?? '_self'}
+                              rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+                          />
+                      ),
+                  }
+                : {})}
         >
-            {!!(startEnhancer && !loading) && (
-                <MemoizedEnhancer
-                    enhancer={startEnhancer}
-                    size={EnhancerSizes[size]}
-                />
-            )}
+            {!!(startEnhancer && !loading) && <MemoizedEnhancer enhancer={startEnhancer} size={EnhancerSizes[size]} />}
             {!['circle', 'square'].includes(shape) && (
                 <Text kind="labelXSmall">
-                    {!loading ? (
-                        children || 'Button'
-                    ) : (
-                        <Spinner size={EnhancerSizes[size]} />
-                    )}
+                    {!loading ? children || 'Button' : <Spinner size={EnhancerSizes[size]} />}
                 </Text>
             )}
-            {!!(endEnhancer && !loading) && (
-                <MemoizedEnhancer
-                    enhancer={endEnhancer}
-                    size={EnhancerSizes[size]}
-                />
-            )}
+            {!!(endEnhancer && !loading) && <MemoizedEnhancer enhancer={endEnhancer} size={EnhancerSizes[size]} />}
             {!!displayNotificationDot && (
                 <div className="absolute top-0 right-0">
                     <NotificationDot size={8} />

package/src/stories/callout/Callout.stories.ts

@@ -1,11 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { createElement } from 'react';
+import { faCancel, faCheck, faWarning } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-    faCancel,
-    faCheck,
-    faWarning,
-} from '@fortawesome/free-solid-svg-icons';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { createElement } from 'react';
 import { Callout } from './Callout';
 
 const meta: Meta<typeof Callout> = {

package/src/stories/callout/Callout.tsx

@@ -1,10 +1,8 @@
-import type {
-    ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
-} from 'react';
 import { clsx } from 'clsx';
-import styles from './Callout.module.scss';
+import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { ArrowRight, Icon } from '../icon';
 import { RemoveFromDOM, TextWhenString } from '../utility';
-import { Icon, ArrowRight } from '../icon';
+import styles from './Callout.module.scss';
 
 export type CalloutProps = {
     /** The variant of the Callout. */
@@ -36,9 +34,7 @@ export const Callout: FC<CalloutProps> = ({
 }) => (
     <div className={clsx(styles.content, styles[variant], className)} {...props}>
         <RemoveFromDOM when={!icon}>
-            <div className={styles.icon}>
-                {icon}
-            </div>
+            <div className={styles.icon}>{icon}</div>
         </RemoveFromDOM>
         <TextWhenString as="p" kind="paragraphXSmall">
             {children}

package/src/stories/card/Card.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Card } from './Card';
 
 const meta: Meta<typeof Card> = {

package/src/stories/card/Card.tsx

@@ -1,7 +1,7 @@
-import type { FC, HTMLAttributes, ReactNode } from 'react';
 import { clsx } from 'clsx';
-import styles from './Card.module.scss';
+import type { FC, HTMLAttributes, ReactNode } from 'react';
 import { TextWhenString } from '../utility';
+import styles from './Card.module.scss';
 
 export type CardProps = {
     /**
@@ -38,12 +38,7 @@ export type CardProps = {
  * ```
  * @constructor
  */
-export const Card: FC<CardProps> = ({
-    kind = 'raised',
-    status = 'default',
-    children,
-    ...props
-}) => (
+export const Card: FC<CardProps> = ({ kind = 'raised', status = 'default', children, ...props }) => (
     <div
         {...props}
         className={clsx(
@@ -54,8 +49,6 @@ export const Card: FC<CardProps> = ({
             props?.className,
         )}
     >
-        <TextWhenString kind="paragraphMedium">
-            {children}
-        </TextWhenString>
+        <TextWhenString kind="paragraphMedium">{children}</TextWhenString>
     </div>
 );

package/src/stories/cardbutton/CardButton.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { CardButton } from './CardButton';
 
 const meta: Meta<typeof CardButton> = {

package/src/stories/cardbutton/CardButton.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import type {
-    FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode,
-} from 'react';
 import type { ButtonProps as AriaButtonProps } from '@ariakit/react';
 import { Button as AriaButton } from '@ariakit/react';
 import { clsx } from 'clsx';
-import styles from './CardButton.module.scss';
+import type { FC, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from 'react';
 import { TextWhenString } from '../utility';
+import styles from './CardButton.module.scss';
 
 export type CardButtonProps = {
     /**
@@ -82,21 +80,21 @@ export const CardButton: FC<CardButtonProps> = ({
             aria-details={typeof children === 'string' ? children : undefined}
             onClick={!disabled && !href ? onClick : () => {}}
             disabled={false}
-            {...href ? {
-                render: (properties) => (
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content
-                    <a
-                        {...properties}
-                        href={href}
-                        target={props.hreftarget ?? '_self'}
-                        rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
-                    />
-                ),
-            } : {}}
+            {...(href
+                ? {
+                      render: (properties) => (
+                          // eslint-disable-next-line jsx-a11y/anchor-has-content
+                          <a
+                              {...properties}
+                              href={href}
+                              target={props.hreftarget ?? '_self'}
+                              rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
+                          />
+                      ),
+                  }
+                : {})}
         >
-            <TextWhenString kind="paragraphMedium">
-                {children}
-            </TextWhenString>
+            <TextWhenString kind="paragraphMedium">{children}</TextWhenString>
         </AriaButton>
     </div>
 );

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { createElement, useState } from 'react';
 import { Checkbox } from './Checkbox';