paris 0.17.10 → 0.18.1

package/src/stories/table/Table.tsx

@@ -1,15 +1,15 @@
 'use client';
 
+import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { useId, useMemo } from 'react';
-import { clsx } from 'clsx';
-import styles from './Table.module.scss';
 import typography from '../text/Typography.module.css';
+import styles from './Table.module.scss';
 
 export type TableLineData = [NonNullable<ReactNode>, ...ReactNode[]];
 export type RowRenderData = {
-    key: string,
-    cells: TableLineData,
+    key: string;
+    cells: TableLineData;
 };
 /**
  * The data for a column in a table.
@@ -71,7 +71,7 @@ export type TableProps<
         th?: ComponentPropsWithoutRef<'th'>;
         trBody?: ComponentPropsWithoutRef<'tr'>;
         td?: ComponentPropsWithoutRef<'td'>;
-    }
+    };
 };
 
 /**
@@ -96,68 +96,60 @@ export function Table<RowData extends Record<string, any>[]>({
     overrides,
 }: TableProps<RowData>) {
     const id = useId();
-    const rowsRenderData = useMemo(() => (
-        rows.map(
-            rowRenderFn
-            ?? ((row) => ({
-                key: Object.values(row).join('-'),
-                cells: Object.values(row),
-            })),
-        )
-    ), [rows, rowRenderFn]);
+    const rowsRenderData = useMemo(
+        () =>
+            rows.map(
+                rowRenderFn ??
+                    ((row) => ({
+                        key: Object.values(row).join('-'),
+                        cells: Object.values(row),
+                    })),
+            ),
+        [rows, rowRenderFn],
+    );
 
-    const renderedRows = useMemo(() => (
-        rowsRenderData.map(({ key, cells }, index) => (
-            <tr
-                key={`${id}-row-${key}`}
-                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,
-                    overrides?.trBody?.className,
-                )}
-            >
-                {cells.map((cell, i) => (
-                    <td
-                        key={`${id}-cell-${key}-${columns[i].title}`}
-                        {...overrides?.td}
-                        className={clsx(
-                            typography.paragraphXSmall,
-                            styles[columns[i].hideBelow ?? ''],
-                            overrides?.td?.className,
-                        )}
-                    >
-                        {cell}
-                    </td>
-                ))}
-            </tr>
-        ))
-    ), [clickableRows, columns, id, onRowClick, overrides?.td, overrides?.trBody, rows, rowsRenderData]);
+    const renderedRows = useMemo(
+        () =>
+            rowsRenderData.map(({ key, cells }, index) => (
+                <tr
+                    key={`${id}-row-${key}`}
+                    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, overrides?.trBody?.className)}
+                >
+                    {cells.map((cell, i) => (
+                        <td
+                            key={`${id}-cell-${key}-${columns[i].title}`}
+                            {...overrides?.td}
+                            className={clsx(
+                                typography.paragraphXSmall,
+                                styles[columns[i].hideBelow ?? ''],
+                                overrides?.td?.className,
+                            )}
+                        >
+                            {cell}
+                        </td>
+                    ))}
+                </tr>
+            )),
+        [clickableRows, columns, id, onRowClick, overrides?.td, overrides?.trBody, rows, rowsRenderData],
+    );
 
     return (
         <table
             {...{
                 ...overrides?.table,
-                className: clsx(
-                    styles.table,
-                    overrides?.table?.className,
-                ),
+                className: clsx(styles.table, overrides?.table?.className),
             }}
         >
             <thead {...overrides?.thead}>
-                <tr
-                    {...overrides?.trHead}
-                    className={clsx(
-                        styles.tableHeader,
-                        overrides?.trHead?.className,
-                    )}
-                >
+                <tr {...overrides?.trHead} className={clsx(styles.tableHeader, overrides?.trHead?.className)}>
                     {columns.map((column) => (
                         <th
                             {...{
@@ -177,13 +169,11 @@ export function Table<RowData extends Record<string, any>[]>({
             </thead>
             <tbody {...overrides?.tbody}>
                 {renderedRows.length === 0 && emptyState && (
-                    <>
-                        <tr className={styles.empty}>
-                            <td colSpan={columns.length} className={styles.emptyState}>
-                                {emptyState}
-                            </td>
-                        </tr>
-                    </>
+                    <tr className={styles.empty}>
+                        <td colSpan={columns.length} className={styles.emptyState}>
+                            {emptyState}
+                        </td>
+                    </tr>
                 )}
                 {renderedRows}
             </tbody>

package/src/stories/tabs/Tabs.module.scss

@@ -32,8 +32,13 @@
 
 .tabBackground {
     &.glass {
-        position: absolute;
+        position: sticky;
+        top: 0;
         width: 100%;
+        z-index: 1;
+        backdrop-filter: var(--pte-new-blurs-strong);
+        -webkit-backdrop-filter: var(--pte-new-blurs-strong);
+        background: var(--pte-new-materials-primaryThin-background);
     }
 }
 
@@ -44,32 +49,11 @@
 
     &.glass {
         position: relative;
-        overflow: hidden;
-        display: flex;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 }
 
-.glassContainer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-}
-
-.glassBlend {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--pte-new-materials-secondaryRegular-backgroundBlend);
-    mix-blend-mode: var(--pte-new-materials-secondaryRegular-mixBlendMode);
-}
-
-.glassOpacity {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--pte-new-materials-secondaryRegular-background);
-    backdrop-filter: var(--pte-new-blurs-strong);
-}
 
 .tabListBorder {
     width: 100%;
@@ -197,49 +181,7 @@
     width: 100%;
 
     &.glass {
-        &.full {
-            &.thick {
-                padding-top: 64px;
-            }
-            &.thin {
-                padding-top: 61px;
-            }
-        }
-        &.fixed {
-            &.thick {
-                padding-top: 56px;
-            }
-            &.thin {
-                padding-top: 53px;
-            }
-        }
-        &.compact {
-            &.thick {
-                padding-top: 48px;
-            }
-            &.thin {
-                padding-top: 45px;
-            }
-        }
-        @container (min-width: 641px) {
-            &.auto {
-                &.thick {
-                    padding-top: 56px;
-                }
-                &.thin {
-                    padding-top: 53px;
-                }
-            }
-        }
-        @container (max-width: 640px) {
-            &.auto {
-                &.thick {
-                    padding-top: 48px;
-                }
-                &.thin {
-                    padding-top: 45px;
-                }
-            }
-        }
+        overflow-y: visible;
+        height: auto;
     }
 }

package/src/stories/tabs/Tabs.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Tabs } from './Tabs';
 
 const meta: Meta<typeof Tabs> = {
@@ -71,11 +71,90 @@ export const Glass: Story = {
         barStyle: 'thin',
         backgroundStyle: 'glass',
         tabs: [
-            { title: 'Albums', content: 'Tab 1 content' },
+            {
+                title: 'Albums',
+                content: (
+                    <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                        <p>Scroll down to see the glass blur effect on the tab bar.</p>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 1
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 2
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 3
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 4
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 5
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 6
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 7
+                        </div>
+                        <div
+                            style={{
+                                padding: '12px',
+                                background: 'var(--pte-new-colors-overlayMedium)',
+                                borderRadius: '8px',
+                            }}
+                        >
+                            Item 8
+                        </div>
+                    </div>
+                ),
+            },
             {
                 title: 'EPs',
                 content:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus. Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.',
+                    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus. Fusce blandit leo in lectus blandit, sed elementum enim accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque pretium erat at lacus ultricies tincidunt. Praesent non luctus magna, ac efficitur ligula. Sed a justo fermentum, feugiat mauris vel, ultrices turpis. Ut interdum malesuada lacus, ac posuere sapien feugiat et. Nulla dignissim bibendum gravida. Donec pharetra, erat et semper luctus, dolor enim elementum est, eget cursus nisi libero sit amet purus.',
             },
             {
                 title: 'Singles',
@@ -101,7 +180,7 @@ export const Glass: Story = {
     },
     render: (args) => (
         <div style={{ background: 'var(--pte-new-colors-backgroundPrimary)' }}>
-            <div style={{ height: '120px' }}>
+            <div style={{ height: '300px' }}>
                 <Tabs {...args} />
             </div>
         </div>

package/src/stories/tabs/Tabs.tsx

@@ -1,20 +1,16 @@
 'use client';
 
-import type {
-    ComponentPropsWithoutRef, CSSProperties, FC, ReactNode,
-} from 'react';
-import { useId, useState } from 'react';
+import type { TabListProps } from '@ariakit/react';
 import type { TabGroupProps, TabPanelProps, TabProps } from '@headlessui/react';
-import {
-    Tab, TabGroup, TabList, TabPanels, TabPanel,
-} from '@headlessui/react';
-import { clsx } from 'clsx';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import type { CSSLength } from '@ssh/csstypes';
+import { clsx } from 'clsx';
 import { motion } from 'framer-motion';
-import type { TabListProps } from '@ariakit/react';
-import styles from './Tabs.module.scss';
+import type { ComponentPropsWithoutRef, CSSProperties, FC, ReactNode } from 'react';
+import { useId, useState } from 'react';
 import typography from '../text/Typography.module.css';
 import { easeInOutExpo } from '../utility';
+import styles from './Tabs.module.scss';
 
 export type TabsProps = {
     /**
@@ -71,7 +67,7 @@ export type TabsProps = {
         tabListBorder?: ComponentPropsWithoutRef<'div'>;
         tabBackground?: ComponentPropsWithoutRef<'div'>;
         tab?: TabProps<'div'>;
-    }
+    };
 };
 
 /**
@@ -117,19 +113,15 @@ export const Tabs: FC<TabsProps> = ({
                 {...overrides?.tabBackground}
                 className={clsx(styles.tabBackground, styles[backgroundStyle], overrides?.tabBackground?.className)}
             >
-                {backgroundStyle === 'glass' && (
-                    <div className={styles.glassContainer}>
-                        <div className={styles.glassOpacity} />
-                        <div className={styles.glassBlend} />
-                    </div>
-                )}
                 <TabList
                     {...overrides?.tabList}
-                    style={{
-                        '--tab-width': tabWidth,
-                        '--tab-index': `${index ?? selectedIndex}`,
-                        ...(overrides?.tabList?.style || {}),
-                    } as CSSProperties}
+                    style={
+                        {
+                            '--tab-width': tabWidth,
+                            '--tab-index': `${index ?? selectedIndex}`,
+                            ...(overrides?.tabList?.style || {}),
+                        } as CSSProperties
+                    }
                     className={clsx(
                         styles.tabList,
                         styles[barStyle],
@@ -141,11 +133,7 @@ export const Tabs: FC<TabsProps> = ({
                         <Tab
                             key={`${id}-tab-${title}`}
                             {...overrides?.tab}
-                            className={clsx(
-                                typography.paragraphXSmall,
-                                styles.tab,
-                                styles[kind],
-                            )}
+                            className={clsx(typography.paragraphXSmall, styles.tab, styles[kind])}
                         >
                             {title}
                             {i === (index ?? selectedIndex) && (

package/src/stories/tag/Tag.stories.ts

@@ -1,7 +1,4 @@
-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 type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Tag } from './Tag';
 
 const meta: Meta<typeof Tag> = {

package/src/stories/tag/Tag.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import type {
-    ComponentPropsWithoutRef, FC, ReactElement, ReactNode,
-} from 'react';
-import { useMemo } from 'react';
-import { clsx } from 'clsx';
 import type { CSSLength } from '@ssh/csstypes';
-import styles from './Tag.module.scss';
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
+import { Check, Icon } from '../icon';
 import typography from '../text/Typography.module.css';
-import { Icon, Check } from '../icon';
 import { VisuallyHidden } from '../utility';
+import styles from './Tag.module.scss';
 
 export const CornerPresets = ['sharp', 'rounded', 'roundedXL'] as const;
 
@@ -23,7 +21,7 @@ export type TagProps = {
      * `sharp` will have no rounding, `rounded` will have a slight rounding, and `roundedXL` will have a large rounding.
      * @see CornerPresets
      */
-    corners?: typeof CornerPresets[number] | CSSLength;
+    corners?: (typeof CornerPresets)[number] | CSSLength;
     /** The kind of Tag. */
     kind?: 'default' | 'secondary' | 'positive' | 'warning' | 'negative' | 'new' | 'void' | 'draft';
     /** The color level of Tag background, applies to the colored states of `positive`, `warning`, and `negative`. */
@@ -72,19 +70,13 @@ export const Tag: FC<TagProps> = ({
                 className,
             )}
             data-status={colorLevel}
-            style={(corners && !cornersIsPreset) ? { borderRadius: corners } : {}}
+            style={corners && !cornersIsPreset ? { borderRadius: corners } : {}}
         >
-            {shape !== 'square' && (
-                <div>
-                    {children}
-                </div>
-            )}
+            {shape !== 'square' && <div>{children}</div>}
             {shape === 'square' && (
                 <div className={styles.icon}>
                     {icon}
-                    <VisuallyHidden>
-                        {children}
-                    </VisuallyHidden>
+                    <VisuallyHidden>{children}</VisuallyHidden>
                 </div>
             )}
         </div>

package/src/stories/text/Text.stories.ts

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

package/src/stories/text/Text.tsx

@@ -1,12 +1,25 @@
+import type { CSSColor } from '@ssh/csstypes';
+import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, ReactElement, 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 } from '../theme';
+import styles from './Text.module.scss';
+import typography from './Typography.module.css';
 
-export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
+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';
 
 export type TextProps<T extends TextElement = TextElement> = {
@@ -61,30 +74,35 @@ export type TextProps<T extends TextElement = TextElement> = {
  * ```
  * @constructor
  */
-export const Text = memo(<T extends TextElement = TextElement>({
-    kind,
-    as,
-    weight,
-    fontStyle,
-    color,
-    children,
-    ...props
-}: TextProps<T>): ReactElement => createElement(
-    as || 'span',
-    {
-        ...props,
-        className: clsx(
-            styles.text,
-            typography[kind || 'paragraphMedium'],
-            weight && styles[`weight-${weight}`],
-            fontStyle && styles[`fontStyle-${fontStyle}`],
-            props?.className,
-        ),
-        ...(color ? {
-            style: {
-                '--text-color': color,
+export const Text = memo(
+    <T extends TextElement = TextElement>({
+        kind,
+        as,
+        weight,
+        fontStyle,
+        color,
+        children,
+        ...props
+    }: TextProps<T>): ReactElement =>
+        createElement(
+            as || 'span',
+            {
+                ...props,
+                className: clsx(
+                    styles.text,
+                    typography[kind || 'paragraphMedium'],
+                    weight && styles[`weight-${weight}`],
+                    fontStyle && styles[`fontStyle-${fontStyle}`],
+                    props?.className,
+                ),
+                ...(color
+                    ? {
+                          style: {
+                              '--text-color': color,
+                          },
+                      }
+                    : {}),
             },
-        } : {}),
-    },
-    children,
-));
+            children,
+        ),
+);