paris 0.17.9 → 0.18.0

package/src/stories/drawer/Drawer.tsx

@@ -1,25 +1,18 @@
 'use client';
 
-import type { ReactNode, ComponentPropsWithoutRef } from 'react';
-import {
-    useMemo, useState,
-} from 'react';
-import {
-    Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
-} from '@headlessui/react';
-import { clsx } from 'clsx';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import type { CSSLength } from '@ssh/csstypes';
-import styles from './Drawer.module.scss';
-import { Text } from '../text';
-import { VisuallyHidden } from '../utility/VisuallyHidden';
-import { TextWhenString } from '../utility/TextWhenString';
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { useMemo, useState } from 'react';
 import { Button } from '../button';
-import { RemoveFromDOM } from '../utility/RemoveFromDOM';
+import { ChevronLeft, ChevronRight, Close, Icon } from '../icon';
 import type { PaginationState } from '../pagination';
-import {
-    ChevronLeft, ChevronRight, Close, Icon,
-} from '../icon';
-import { useResizeObserver } from '../../helpers/useResizeObserver';
+import { Text } from '../text';
+import { RemoveFromDOM } from '../utility/RemoveFromDOM';
+import { TextWhenString } from '../utility/TextWhenString';
+import { VisuallyHidden } from '../utility/VisuallyHidden';
+import styles from './Drawer.module.scss';
 
 export const DrawerSizePresets = ['content', 'default', 'full', 'fullWithMargin', 'fullOnMobile'] as const;
 
@@ -89,7 +82,7 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      * @see DrawerSizePresets
      * @default 'default'
      */
-    size?: typeof DrawerSizePresets[number] | CSSLength;
+    size?: (typeof DrawerSizePresets)[number] | CSSLength;
     /**
      * An optional pagination state. If provided, each child of the Drawer will be rendered in its own page, and the Drawer will contain back and next buttons that will be used to navigate between pages.
      *
@@ -137,20 +130,20 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
 };
 
 /**
-* Drawers are panels that slide in from the edge of the screen to reveal additional content.
-*
-* <hr />
-*
-* To use this component, import it as follows:
-*
-* ```js
-* import { Drawer } from 'paris/drawer';
-* ```
-* @constructor
-*/
+ * Drawers are panels that slide in from the edge of the screen to reveal additional content.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Drawer } from 'paris/drawer';
+ * ```
+ * @constructor
+ */
 export const Drawer = <T extends string[] | readonly string[] = string[]>({
     isOpen = false,
-    onClose = () => { },
+    onClose = () => {},
     title,
     hideTitle = false,
     hideCloseButton = false,
@@ -191,14 +184,17 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     const currentChild: ReactNode = useMemo(() => {
         // If no children are provided, render nothing.
         if (!children) {
-            return (<></>);
+            return <></>;
         }
 
         // If pagination is enabled, and multiple children are provided, render the currently active child by matching its key against `pagination.currentPage`.
         if (pagination && Array.isArray(children) && children.length > 0) {
             const found = children.find((child) => {
                 if (!(child && typeof child === 'object' && 'key' in child)) {
-                    console.warn('Drawer: Pagination is enabled, but the following child is missing a `key` prop. Pagination will likely not work as expected and this child will never be rendered.', child);
+                    console.warn(
+                        'Drawer: Pagination is enabled, but the following child is missing a `key` prop. Pagination will likely not work as expected and this child will never be rendered.',
+                        child,
+                    );
                     return false;
                 }
                 return child.key === pagination.currentPage;
@@ -216,10 +212,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
         <Transition show={isOpen}>
             <Dialog
                 as="div"
-                className={clsx(
-                    styles.root,
-                    overrides?.dialog?.className,
-                )}
+                className={clsx(styles.root, overrides?.dialog?.className)}
                 onClose={onClose}
                 {...overrides?.dialog}
                 role="dialog"
@@ -256,10 +249,14 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         { [styles[`size-${size}`]]: sizeIsPreset },
                         overrides?.panelContainer?.className,
                     )}
-                    style={!sizeIsPreset ? {
-                        [xAxisDrawer ? 'width' : 'height']: size,
-                        ...overrides?.panelContainer?.style,
-                    } : overrides?.panelContainer?.style}
+                    style={
+                        !sizeIsPreset
+                            ? {
+                                  [xAxisDrawer ? 'width' : 'height']: size,
+                                  ...overrides?.panelContainer?.style,
+                              }
+                            : overrides?.panelContainer?.style
+                    }
                     {...overrides?.panelContainer}
                 >
                     <TransitionChild
@@ -271,49 +268,35 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                         leaveTo={styles.leaveTo}
                     >
                         <DialogPanel
-                            className={clsx(
-                                styles.panel,
-                                styles[`from-${from}`],
-                                overrides?.panel?.className,
-                            )}
+                            className={clsx(styles.panel, styles[`from-${from}`], overrides?.panel?.className)}
                         >
                             {/* Dialog title bar */}
                             <div className={clsx(styles.titleBar, overrides?.titleBar?.className)}>
-                                <div
-                                    className={clsx(styles.titleArea, overrides?.titleArea?.className)}
-                                >
+                                <div className={clsx(styles.titleArea, overrides?.titleArea?.className)}>
                                     <RemoveFromDOM
                                         // Hide when pagination is not enabled.
                                         when={!isPaginated}
                                     >
                                         <div className={clsx(styles.paginationButtons)}>
                                             <Button
-                                                className={clsx(
-                                                    styles.navButton,
-                                                )}
+                                                className={clsx(styles.navButton)}
                                                 size="medium"
                                                 kind="tertiary"
                                                 shape="circle"
                                                 onClick={() => pagination?.back()}
                                                 disabled={!pagination?.canGoBack()}
-                                                startEnhancer={(
-                                                    <Icon icon={ChevronLeft} size={16} />
-                                                )}
+                                                startEnhancer={<Icon icon={ChevronLeft} size={16} />}
                                             >
                                                 Go to previous page in this modal
                                             </Button>
                                             <Button
-                                                className={clsx(
-                                                    styles.navButton,
-                                                )}
+                                                className={clsx(styles.navButton)}
                                                 size="medium"
                                                 kind="tertiary"
                                                 shape="circle"
                                                 onClick={() => pagination?.forward()}
                                                 disabled={!pagination?.canGoForward()}
-                                                startEnhancer={(
-                                                    <Icon icon={ChevronRight} size={16} />
-                                                )}
+                                                startEnhancer={<Icon icon={ChevronRight} size={16} />}
                                             >
                                                 Go to next page in this modal
                                             </Button>
@@ -332,9 +315,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                 </div>
                                 <div className={clsx(styles.titleBarButtons, overrides?.titleBarButtons?.className)}>
                                     {/* Action Menu */}
-                                    <RemoveFromDOM when={!hasAdditionalActions}>
-                                        {additionalActions}
-                                    </RemoveFromDOM>
+                                    <RemoveFromDOM when={!hasAdditionalActions}>{additionalActions}</RemoveFromDOM>
 
                                     {/* Close button */}
                                     <RemoveFromDOM
@@ -345,13 +326,9 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                             kind="tertiary"
                                             shape="circle"
                                             onClick={() => onClose(false)}
-                                            startEnhancer={(
-                                                <Icon icon={Close} size={20} />
-                                            )}
+                                            startEnhancer={<Icon icon={Close} size={20} />}
                                             data-title-hidden={hideTitle}
-                                            className={clsx(
-                                                styles.closeButton,
-                                            )}
+                                            className={clsx(styles.closeButton)}
                                         >
                                             Close dialog
                                         </Button>
@@ -361,35 +338,61 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
 
                             <div className={clsx(styles.content, overrides?.content?.className)}>
                                 <div className={clsx(styles.contentChildren, overrides?.contentChildren?.className)}>
-                                    {(isPaginated && Array.isArray(children)) ? children.map((child) => (child && typeof child === 'object' && 'key' in child) && (
-                                        <Transition
-                                            show={child.key === pagination?.currentPage && loadedPage === child.key}
-                                            key={`transition_${child.key}`}
-                                            as="div"
-                                            enter={styles.paginationEnter}
-                                            enterFrom={styles.enterFromOpacity}
-                                            enterTo={styles.enterToOpacity}
-                                            leave={styles.paginationLeave}
-                                            leaveFrom={styles.leaveFromOpacity}
-                                            leaveTo={styles.leaveToOpacity}
-                                            afterLeave={() => {
-                                                setLoadedPage(pagination?.currentPage || null);
-                                            }}
-                                            className={clsx(overrides?.contentChildrenChildren?.className)}
-                                        >
-                                            {child}
-                                        </Transition>
-                                    )) : children}
+                                    {isPaginated && Array.isArray(children)
+                                        ? children.map(
+                                              (child) =>
+                                                  child &&
+                                                  typeof child === 'object' &&
+                                                  'key' in child && (
+                                                      <Transition
+                                                          show={
+                                                              child.key === pagination?.currentPage &&
+                                                              loadedPage === child.key
+                                                          }
+                                                          key={`transition_${child.key}`}
+                                                          as="div"
+                                                          enter={styles.paginationEnter}
+                                                          enterFrom={styles.enterFromOpacity}
+                                                          enterTo={styles.enterToOpacity}
+                                                          leave={styles.paginationLeave}
+                                                          leaveFrom={styles.leaveFromOpacity}
+                                                          leaveTo={styles.leaveToOpacity}
+                                                          afterLeave={() => {
+                                                              setLoadedPage(pagination?.currentPage || null);
+                                                          }}
+                                                          className={clsx(
+                                                              overrides?.contentChildrenChildren?.className,
+                                                          )}
+                                                      >
+                                                          {child}
+                                                      </Transition>
+                                                  ),
+                                          )
+                                        : children}
                                 </div>
                                 {bottomPanel && (
                                     <>
-                                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, { [styles.noPadding]: !bottomPanelPadding }, overrides?.bottomPanelSpacer?.className)}>
+                                        <div
+                                            tabIndex={-1}
+                                            aria-hidden="true"
+                                            className={clsx(
+                                                styles.bottomPanelSpacer,
+                                                { [styles.noPadding]: !bottomPanelPadding },
+                                                overrides?.bottomPanelSpacer?.className,
+                                            )}
+                                        >
                                             {bottomPanel}
                                         </div>
                                         <div className={clsx(styles.bottomPanel, overrides?.bottomPanel?.className)}>
                                             <div className={styles.glassOpacity} />
                                             <div className={styles.glassBlend} />
-                                            <div className={clsx(styles.bottomPanelContent, { [styles.noPadding]: !bottomPanelPadding }, overrides?.bottomPanelContent?.className)}>
+                                            <div
+                                                className={clsx(
+                                                    styles.bottomPanelContent,
+                                                    { [styles.noPadding]: !bottomPanelPadding },
+                                                    overrides?.bottomPanelContent?.className,
+                                                )}
+                                            >
                                                 {bottomPanel}
                                             </div>
                                         </div>

package/src/stories/field/Field.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 { Field } from './Field';
 

package/src/stories/field/Field.tsx

@@ -1,5 +1,6 @@
-import React, { type ComponentPropsWithoutRef, type FC, type PropsWithChildren } from 'react';
 import { clsx } from 'clsx';
+import type React from 'react';
+import type { ComponentPropsWithoutRef, FC, PropsWithChildren } from 'react';
 import styles from '../input/Input.module.scss';
 import type { TextProps } from '../text';
 import { Text } from '../text';
@@ -41,21 +42,21 @@ export type FieldProps = {
         label?: TextProps<'label'>;
         description?: TextProps<'p'>;
         labelContainer?: ComponentPropsWithoutRef<'div'>;
-    }
+    };
 };
 
 /**
-* A Field component wraps a form input component with an accessible label and description.
-*
-* <hr />
-*
-* To use this component, import it as follows:
-*
-* ```js
-* import { Field } from 'paris/field';
-* ```
-* @constructor
-*/
+ * A Field component wraps a form input component with an accessible label and description.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Field } from 'paris/field';
+ * ```
+ * @constructor
+ */
 export const Field: FC<PropsWithChildren<FieldProps>> = ({
     htmlFor,
     disabled,
@@ -64,29 +65,25 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
     // className,
     ...props
 }) => {
-    const label = typeof props.label === 'string'
-        ? (
+    const label =
+        typeof props.label === 'string' ? (
             <Text
                 {...props.overrides?.label}
                 as="label"
                 kind="paragraphSmall"
                 htmlFor={htmlFor}
-                className={clsx(
-                    styles.label,
-                    { [styles.hidden]: props.hideLabel },
-                )}
+                className={clsx(styles.label, { [styles.hidden]: props.hideLabel })}
             >
                 {props.label}
             </Text>
-        )
-        : (
+        ) : (
             <label htmlFor={htmlFor} className={clsx(styles.label, { [styles.hidden]: props.hideLabel })}>
                 {props.label}
             </label>
         );
 
-    const description = typeof props.description === 'string'
-        ? (
+    const description =
+        typeof props.description === 'string' ? (
             <Text
                 id={`${htmlFor}-description`}
                 {...props.overrides?.description}
@@ -100,8 +97,7 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             >
                 {props.description}
             </Text>
-        )
-        : (
+        ) : (
             <div
                 id={`${htmlFor}-description`}
                 className={clsx({ [styles.hidden]: !props.description || props.hideDescription })}
@@ -134,15 +130,14 @@ export const Field: FC<PropsWithChildren<FieldProps>> = ({
             {descriptionPosition === 'top' ? (
                 <div
                     {...props.overrides?.labelContainer}
-                    className={clsx(
-                        styles.labelContainer,
-                        props.overrides?.labelContainer?.className,
-                    )}
+                    className={clsx(styles.labelContainer, props.overrides?.labelContainer?.className)}
                 >
                     {label}
                     {description}
                 </div>
-            ) : label}
+            ) : (
+                label
+            )}
             {children}
             {descriptionPosition === 'bottom' ? description : <></>}
         </div>

package/src/stories/icon/Ellipsis.tsx

@@ -3,6 +3,9 @@ import type { IconDefinition } from './Icon';
 
 export const Ellipsis: IconDefinition = memo(({ size }) => (
     <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M13.5 10C13.5 9.1875 14.1562 8.5 15 8.5C15.8125 8.5 16.5 9.1875 16.5 10C16.5 10.8438 15.8125 11.5 15 11.5C14.1562 11.5 13.5 10.8438 13.5 10ZM8.5 10C8.5 9.1875 9.15625 8.5 10 8.5C10.8125 8.5 11.5 9.1875 11.5 10C11.5 10.8438 10.8125 11.5 10 11.5C9.15625 11.5 8.5 10.8438 8.5 10ZM6.5 10C6.5 10.8438 5.8125 11.5 5 11.5C4.15625 11.5 3.5 10.8438 3.5 10C3.5 9.1875 4.15625 8.5 5 8.5C5.8125 8.5 6.5 9.1875 6.5 10Z" fill="currentColor" />
+        <path
+            d="M13.5 10C13.5 9.1875 14.1562 8.5 15 8.5C15.8125 8.5 16.5 9.1875 16.5 10C16.5 10.8438 15.8125 11.5 15 11.5C14.1562 11.5 13.5 10.8438 13.5 10ZM8.5 10C8.5 9.1875 9.15625 8.5 10 8.5C10.8125 8.5 11.5 9.1875 11.5 10C11.5 10.8438 10.8125 11.5 10 11.5C9.15625 11.5 8.5 10.8438 8.5 10ZM6.5 10C6.5 10.8438 5.8125 11.5 5 11.5C4.15625 11.5 3.5 10.8438 3.5 10C3.5 9.1875 4.15625 8.5 5 8.5C5.8125 8.5 6.5 9.1875 6.5 10Z"
+            fill="currentColor"
+        />
     </svg>
 ));

package/src/stories/icon/Icon.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { pvar } from '../theme';
 import type { IconDefinition } from './Icon';
 import { Icon } from './Icon';
 import * as Icons from './index';
-import { pvar } from '../theme';
 
 const meta: Meta<typeof Icon> = {
     title: 'Content/Icon',

package/src/stories/icon/Icon.tsx

@@ -13,34 +13,24 @@ export type IconProps<T extends ElementType = 'span'> = IconDefinitionProps & {
     icon: IconDefinition;
     as?: T;
     overrides?: {
-        icon?: ComponentPropsWithoutRef<'svg'>
-    }
+        icon?: ComponentPropsWithoutRef<'svg'>;
+    };
 } & ComponentPropsWithoutRef<T>;
 
 /**
-* Paris comes with a set of simple UI icons that can be used in your application. Icons are MIT-licensed and can be used in any project.
-*
-* <hr />
-*
-* To use this component, import the parent `Icon` component and the icon you want to use:
-*
-* ```tsx
-* import { Icon, Close } from 'paris/icon';
+ * Paris comes with a set of simple UI icons that can be used in your application. Icons are MIT-licensed and can be used in any project.
+ *
+ * <hr />
+ *
+ * To use this component, import the parent `Icon` component and the icon you want to use:
+ *
+ * ```tsx
+ * import { Icon, Close } from 'paris/icon';
  *
  * <Icon icon={Close} size={20} />
-* ```
-* @constructor
-*/
-export const Icon = memo<IconProps<ElementType>>(({
-    as = 'span',
-    icon,
-    size,
-    overrides = { icon: {} },
-    ...props
-}) => (
-    createElement(
-        as,
-        props,
-        createElement(icon, { size, ...overrides.icon }),
-    )
-));
+ * ```
+ * @constructor
+ */
+export const Icon = memo<IconProps<ElementType>>(({ as = 'span', icon, size, overrides = { icon: {} }, ...props }) =>
+    createElement(as, props, createElement(icon, { size, ...overrides.icon })),
+);

package/src/stories/icon/Info.tsx

@@ -3,6 +3,9 @@ import type { IconDefinition } from './Icon';
 
 export const Info: IconDefinition = memo(({ size }) => (
     <svg width={size} height={size} viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" fill="currentColor" />
+        <path
+            d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"
+            fill="currentColor"
+        />
     </svg>
 ));

package/src/stories/icon/Spinner.tsx

@@ -4,12 +4,14 @@ 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
-
             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" />
+        <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

@@ -1,10 +1,10 @@
-export * from './Icon';
-export { Close } from './Close';
+export { ArrowRight } from './ArrowRight';
+export { Check } from './Check';
 export { ChevronLeft } from './ChevronLeft';
 export { ChevronRight } from './ChevronRight';
+export { Close } from './Close';
 export { Ellipsis } from './Ellipsis';
-export { Spinner } from './Spinner';
-export { NotificationDot } from './NotificationDot';
-export { Check } from './Check';
-export { ArrowRight } from './ArrowRight';
+export * from './Icon';
 export { Info } from './Info';
+export { NotificationDot } from './NotificationDot';
+export { Spinner } from './Spinner';

package/src/stories/informationaltooltip/InformationalTooltip.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { createElement } from 'react';
 import { InformationalTooltip } from './InformationalTooltip';
 
@@ -11,20 +11,21 @@ const meta: Meta<typeof InformationalTooltip> = {
 export default meta;
 type Story = StoryObj<typeof InformationalTooltip>;
 
-const render: Story['render'] = (args) => createElement(
-    'div',
-    {
-        style: { minHeight: '200px' },
-    },
-    createElement(InformationalTooltip, {
-        ...args,
-    }),
-);
+const render: Story['render'] = (args) =>
+    createElement(
+        'div',
+        {
+            style: { minHeight: '200px' },
+        },
+        createElement(InformationalTooltip, {
+            ...args,
+        }),
+    );
 
 export const Default: Story = {
     args: {
         children:
-      'If you are being paid on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
+            'If you are being paid on 1099s (through transfer outs) you need to pay taxes quarterly. The amount you pay each quarter is a portion of your estimated tax burden for the year, based on your anticipated income amount. If you over/underpay, you will be refunded/owe the difference at the end of the year. ',
         heading: 'Quarterly taxes',
     },
     render,