paris 0.17.10 → 0.18.1

package/src/stories/theme/tokens.ts

@@ -135,10 +135,10 @@ export const ColorsNew = {
 } as const;
 
 export type TokensT = {
-    colors: typeof Colors,
+    colors: typeof Colors;
     new: {
-        colors: typeof ColorsNew,
-    },
+        colors: typeof ColorsNew;
+    };
 };
 
 export const Tokens: TokensT = {

package/src/stories/theme/tw-preflight.css

@@ -15,7 +15,7 @@
     border-width: 0; /* 2 */
     border-style: solid; /* 2 */
     border-color: var(--pte-new-colors-borderMedium); /* 2 */
-    
+
     -webkit-tap-highlight-color: transparent;
 }
 
@@ -109,7 +109,8 @@ code,
 kbd,
 samp,
 pre {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+    font-family:
+        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
     font-size: 1em; /* 2 */
 }
 
@@ -326,7 +327,7 @@ Set the default cursor for buttons.
 */
 
 button,
-[role="button"] {
+[role='button'] {
     cursor: default;
 }
 

package/src/stories/tilt/Tilt.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import type { CSSProperties } from 'react';
-import { Tilt } from './Tilt';
 import { Text } from '../text';
 import { pvar } from '../theme';
+import { Tilt } from './Tilt';
 
 const meta: Meta<typeof Tilt> = {
     title: 'Surfaces/Tilt',
@@ -34,10 +34,7 @@ export const Default: Story = {
         } as CSSProperties;
 
         return (
-            <Tilt
-                {...args}
-                style={tiltStyle}
-            >
+            <Tilt {...args} style={tiltStyle}>
                 {children}
             </Tilt>
         );

package/src/stories/tilt/Tilt.tsx

@@ -1,19 +1,8 @@
 'use client';
 
-import {
-    useCallback,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
-import type {
-    CSSProperties,
-    FC,
-    MouseEvent as ReactMouseEvent,
-    ReactNode,
-    TouchEvent as ReactTouchEvent,
-} from 'react';
 import { clsx } from 'clsx';
+import type { CSSProperties, FC, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './Tilt.module.scss';
 
 type GlarePosition = 'top' | 'right' | 'bottom' | 'left' | 'all';
@@ -98,14 +87,23 @@ function computeGlareOpacity(
     const g = reverse ? -1 : 1;
     let raw = 0;
     switch (position) {
-        case 'top': raw = -xPct * g; break;
-        case 'right': raw = yPct * g; break;
-        case 'left': raw = -yPct * g; break;
-        case 'all': raw = Math.hypot(xPct, yPct); break;
-        case 'bottom':
-        default: raw = xPct * g; break;
+        case 'top':
+            raw = -xPct * g;
+            break;
+        case 'right':
+            raw = yPct * g;
+            break;
+        case 'left':
+            raw = -yPct * g;
+            break;
+        case 'all':
+            raw = Math.hypot(xPct, yPct);
+            break;
+        default:
+            raw = xPct * g;
+            break;
     }
-    return clamp(raw, 0, 100) * maxOpacity / 100;
+    return (clamp(raw, 0, 100) * maxOpacity) / 100;
 }
 
 /**
@@ -165,9 +163,12 @@ export const Tilt: FC<TiltProps> = ({
     const isManual = effectiveManualX !== null || effectiveManualY !== null;
 
     // Cancel any pending rAF on unmount
-    useEffect(() => () => {
-        if (rafID.current !== null) cancelAnimationFrame(rafID.current);
-    }, []);
+    useEffect(
+        () => () => {
+            if (rafID.current !== null) cancelAnimationFrame(rafID.current);
+        },
+        [],
+    );
 
     const flushToState = useCallback(() => {
         if (!pendingRef.current) return;
@@ -176,103 +177,137 @@ export const Tilt: FC<TiltProps> = ({
         setTilt(next);
     }, []);
 
-    const scheduleUpdate = useCallback((next: TiltState) => {
-        pendingRef.current = next;
-        if (rafID.current !== null) cancelAnimationFrame(rafID.current);
-        rafID.current = requestAnimationFrame(flushToState);
-    }, [flushToState]);
-
-    const computeTilt = useCallback((pageX: number, pageY: number): TiltState => {
-        const rect = rectRef.current;
-        if (!rect) return { ...INITIAL_STATE, currentScale: effectiveScale };
-
-        const xPct = clamp(((pageX - rect.left) / rect.width) * 200 - 100, -100, 100);
-        const yPct = clamp(((pageY - rect.top) / rect.height) * 200 - 100, -100, 100);
-
-        const angleX = (effectiveManualX !== null) ? effectiveManualX : (yPct * effectiveMaxX / 100);
-        const angleY = (effectiveManualY !== null) ? effectiveManualY : (xPct * effectiveMaxY / 100 * -1);
-
-        const glareAngle = xPct ? Math.atan2(yPct, -xPct) * (180 / Math.PI) : 0;
-        const glareOpacity = effectiveGlare
-            ? computeGlareOpacity(xPct, yPct, glarePosition, glareReverse, effectiveGlareMax)
-            : 0;
-
-        return {
-            tiltAngleX: clamp(angleX, -90, 90),
-            tiltAngleY: clamp(angleY, -90, 90),
-            currentScale: effectiveScale,
-            glareAngle,
-            glareOpacity,
-            transitioning: false,
-        };
-    }, [effectiveScale, effectiveMaxX, effectiveMaxY, effectiveManualX, effectiveManualY, effectiveGlare, effectiveGlareMax, glarePosition, glareReverse]);
-
-    const handleMouseEnter = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
-        if (!containerRef.current) return;
-        rectRef.current = containerRef.current.getBoundingClientRect();
-
-        const next = computeTilt(e.pageX, e.pageY);
-        setTilt({ ...next, transitioning: true });
-        onEnter?.({ event: e });
-    }, [computeTilt, onEnter]);
-
-    const handleMouseMove = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
-        if (!containerRef.current || !rectRef.current) return;
-        if (effectiveManualX !== null || effectiveManualY !== null) return;
-
-        const next = computeTilt(e.pageX, e.pageY);
-        scheduleUpdate(next);
-
-        if (onMove) {
-            onMove({
-                tiltAngleX: next.tiltAngleX,
-                tiltAngleY: next.tiltAngleY,
-                tiltAngleXPercentage: effectiveMaxX ? (next.tiltAngleX / effectiveMaxX) * 100 : 0,
-                tiltAngleYPercentage: effectiveMaxY ? (next.tiltAngleY / effectiveMaxY) * 100 : 0,
-                glareAngle: next.glareAngle,
-                glareOpacity: next.glareOpacity,
-            });
-        }
-    }, [computeTilt, scheduleUpdate, onMove, effectiveManualX, effectiveManualY, effectiveMaxX, effectiveMaxY]);
+    const scheduleUpdate = useCallback(
+        (next: TiltState) => {
+            pendingRef.current = next;
+            if (rafID.current !== null) cancelAnimationFrame(rafID.current);
+            rafID.current = requestAnimationFrame(flushToState);
+        },
+        [flushToState],
+    );
+
+    const computeTilt = useCallback(
+        (pageX: number, pageY: number): TiltState => {
+            const rect = rectRef.current;
+            if (!rect) return { ...INITIAL_STATE, currentScale: effectiveScale };
+
+            const xPct = clamp(((pageX - rect.left) / rect.width) * 200 - 100, -100, 100);
+            const yPct = clamp(((pageY - rect.top) / rect.height) * 200 - 100, -100, 100);
+
+            const angleX = effectiveManualX !== null ? effectiveManualX : (yPct * effectiveMaxX) / 100;
+            const angleY = effectiveManualY !== null ? effectiveManualY : ((xPct * effectiveMaxY) / 100) * -1;
+
+            const glareAngle = xPct ? Math.atan2(yPct, -xPct) * (180 / Math.PI) : 0;
+            const glareOpacity = effectiveGlare
+                ? computeGlareOpacity(xPct, yPct, glarePosition, glareReverse, effectiveGlareMax)
+                : 0;
+
+            return {
+                tiltAngleX: clamp(angleX, -90, 90),
+                tiltAngleY: clamp(angleY, -90, 90),
+                currentScale: effectiveScale,
+                glareAngle,
+                glareOpacity,
+                transitioning: false,
+            };
+        },
+        [
+            effectiveScale,
+            effectiveMaxX,
+            effectiveMaxY,
+            effectiveManualX,
+            effectiveManualY,
+            effectiveGlare,
+            effectiveGlareMax,
+            glarePosition,
+            glareReverse,
+        ],
+    );
 
-    const handleMouseLeave = useCallback((e: ReactMouseEvent<HTMLDivElement>) => {
-        if (!containerRef.current) return;
-        rectRef.current = null;
+    const handleMouseEnter = useCallback(
+        (e: ReactMouseEvent<HTMLDivElement>) => {
+            if (!containerRef.current) return;
+            rectRef.current = containerRef.current.getBoundingClientRect();
 
-        if (reset) {
-            setTilt({ ...INITIAL_STATE, transitioning: true });
-        }
-        onLeave?.({ event: e });
-    }, [reset, onLeave]);
-
-    const handleTouchStart = useCallback((e: ReactTouchEvent<HTMLDivElement>) => {
-        if (!containerRef.current || !e.touches[0]) return;
-        rectRef.current = containerRef.current.getBoundingClientRect();
-
-        const touch = e.touches[0];
-        const next = computeTilt(touch.pageX, touch.pageY);
-        setTilt({ ...next, transitioning: true });
-        onEnter?.({ event: e });
-    }, [computeTilt, onEnter]);
-
-    const handleTouchMove = useCallback((e: ReactTouchEvent<HTMLDivElement>) => {
-        if (!containerRef.current || !rectRef.current || !e.touches[0]) return;
-        if (effectiveManualX !== null || effectiveManualY !== null) return;
-
-        const touch = e.touches[0];
-        const next = computeTilt(touch.pageX, touch.pageY);
-        scheduleUpdate(next);
-    }, [computeTilt, scheduleUpdate, effectiveManualX, effectiveManualY]);
-
-    const handleTouchEnd = useCallback((e: ReactTouchEvent<HTMLDivElement>) => {
-        if (!containerRef.current) return;
-        rectRef.current = null;
-
-        if (reset) {
-            setTilt({ ...INITIAL_STATE, transitioning: true });
-        }
-        onLeave?.({ event: e });
-    }, [reset, onLeave]);
+            const next = computeTilt(e.pageX, e.pageY);
+            setTilt({ ...next, transitioning: true });
+            onEnter?.({ event: e });
+        },
+        [computeTilt, onEnter],
+    );
+
+    const handleMouseMove = useCallback(
+        (e: ReactMouseEvent<HTMLDivElement>) => {
+            if (!containerRef.current || !rectRef.current) return;
+            if (effectiveManualX !== null || effectiveManualY !== null) return;
+
+            const next = computeTilt(e.pageX, e.pageY);
+            scheduleUpdate(next);
+
+            if (onMove) {
+                onMove({
+                    tiltAngleX: next.tiltAngleX,
+                    tiltAngleY: next.tiltAngleY,
+                    tiltAngleXPercentage: effectiveMaxX ? (next.tiltAngleX / effectiveMaxX) * 100 : 0,
+                    tiltAngleYPercentage: effectiveMaxY ? (next.tiltAngleY / effectiveMaxY) * 100 : 0,
+                    glareAngle: next.glareAngle,
+                    glareOpacity: next.glareOpacity,
+                });
+            }
+        },
+        [computeTilt, scheduleUpdate, onMove, effectiveManualX, effectiveManualY, effectiveMaxX, effectiveMaxY],
+    );
+
+    const handleMouseLeave = useCallback(
+        (e: ReactMouseEvent<HTMLDivElement>) => {
+            if (!containerRef.current) return;
+            rectRef.current = null;
+
+            if (reset) {
+                setTilt({ ...INITIAL_STATE, transitioning: true });
+            }
+            onLeave?.({ event: e });
+        },
+        [reset, onLeave],
+    );
+
+    const handleTouchStart = useCallback(
+        (e: ReactTouchEvent<HTMLDivElement>) => {
+            if (!containerRef.current || !e.touches[0]) return;
+            rectRef.current = containerRef.current.getBoundingClientRect();
+
+            const touch = e.touches[0];
+            const next = computeTilt(touch.pageX, touch.pageY);
+            setTilt({ ...next, transitioning: true });
+            onEnter?.({ event: e });
+        },
+        [computeTilt, onEnter],
+    );
+
+    const handleTouchMove = useCallback(
+        (e: ReactTouchEvent<HTMLDivElement>) => {
+            if (!containerRef.current || !rectRef.current || !e.touches[0]) return;
+            if (effectiveManualX !== null || effectiveManualY !== null) return;
+
+            const touch = e.touches[0];
+            const next = computeTilt(touch.pageX, touch.pageY);
+            scheduleUpdate(next);
+        },
+        [computeTilt, scheduleUpdate, effectiveManualX, effectiveManualY],
+    );
+
+    const handleTouchEnd = useCallback(
+        (e: ReactTouchEvent<HTMLDivElement>) => {
+            if (!containerRef.current) return;
+            rectRef.current = null;
+
+            if (reset) {
+                setTilt({ ...INITIAL_STATE, transitioning: true });
+            }
+            onLeave?.({ event: e });
+        },
+        [reset, onLeave],
+    );
 
     // Compute glare element size (diagonal of container)
     const [glareSize, setGlareSize] = useState(0);
@@ -297,9 +332,8 @@ export const Tilt: FC<TiltProps> = ({
 
     const transform = `perspective(${perspective}px) rotateX(${finalAngleX}deg) rotateY(${finalAngleY}deg) scale3d(${finalScale},${finalScale},${finalScale})`;
 
-    const transition = tilt.transitioning || isManual
-        ? `transform ${transitionSpeed}ms ${transitionEasing}`
-        : undefined;
+    const transition =
+        tilt.transitioning || isManual ? `transform ${transitionSpeed}ms ${transitionEasing}` : undefined;
 
     return (
         <div
@@ -315,15 +349,15 @@ export const Tilt: FC<TiltProps> = ({
                 ...style,
                 transform,
                 transition,
-                willChange: tilt.transitioning || finalScale !== 1 || finalAngleX !== 0 || finalAngleY !== 0 ? 'transform' : undefined,
+                willChange:
+                    tilt.transitioning || finalScale !== 1 || finalAngleX !== 0 || finalAngleY !== 0
+                        ? 'transform'
+                        : undefined,
             }}
         >
             {children}
             {effectiveGlare && (
-                <div
-                    className={styles.glareWrapper}
-                    style={{ borderRadius: computedGlareBorderRadius }}
-                >
+                <div className={styles.glareWrapper} style={{ borderRadius: computedGlareBorderRadius }}>
                     <div
                         className={styles.glare}
                         style={{

package/src/stories/toast/Toast.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { toast, Toast } from './Toast';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { Button } from '../button';
 import { ChevronRight, Icon } from '../icon';
+import { Toast, toast } from './Toast';
 
 const meta: Meta<typeof Toast> = {
     title: 'Surfaces/Toast',

package/src/stories/toast/Toast.tsx

@@ -1,9 +1,9 @@
+import { clsx } from 'clsx';
 import type { FC } from 'react';
 import type { ToasterProps } 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';
+import styles from './Toast.module.scss';
 
 export type ToastProps = ToasterProps;
 
@@ -34,10 +34,7 @@ export type ToastProps = ToasterProps;
  * ```
  * @constructor
  */
-export const Toast: FC<ToastProps> = ({
-    toastOptions,
-    ...props
-}) => (
+export const Toast: FC<ToastProps> = ({ toastOptions, ...props }) => (
     <Toaster
         {...props}
         toastOptions={{

package/src/stories/utility/RemoveFromDOM.tsx

@@ -4,16 +4,12 @@ import { memo } from 'react';
 /**
  * A memoized component that conditionally removes its children from the DOM if the `when` prop is `true`.
  */
-export const RemoveFromDOM = memo<PropsWithChildren<{
-    /**
-     * An optional condition that determines whether the children should be removed from the DOM. If `true`, the children will be removed.
-     * @default true
-     */
-    when: boolean;
-}>>(
-    ({ when, children }) => (when ? (<></>) : (
-        <>
-            {children}
-        </>
-    )),
-);
+export const RemoveFromDOM = memo<
+    PropsWithChildren<{
+        /**
+         * An optional condition that determines whether the children should be removed from the DOM. If `true`, the children will be removed.
+         * @default true
+         */
+        when: boolean;
+    }>
+>(({ when, children }) => (when ? <></> : children));

package/src/stories/utility/TextWhenString.tsx

@@ -6,23 +6,10 @@ import { Text } from '../text';
 /**
  * A memoized component that renders its children as a {@link Text} component if `children` is just a string.
  */
-export const TextWhenString = memo<PropsWithChildren<TextProps<TextElement>>>(({
-    children,
-    ...props
-}) => {
+export const TextWhenString = memo<PropsWithChildren<TextProps<TextElement>>>(({ children, ...props }) => {
     if (typeof children === 'string' || typeof children === 'number') {
-        return (
-            <Text
-                {...props}
-            >
-                {children}
-            </Text>
-        );
+        return <Text {...props}>{children}</Text>;
     }
 
-    return (
-        <>
-            {children}
-        </>
-    );
+    return <>{children}</>;
 });

package/src/stories/utility/VisuallyHidden.tsx

@@ -1,25 +1,18 @@
+import { VisuallyHidden as AriaVisuallyHidden } from '@ariakit/react';
 import type { PropsWithChildren } from 'react';
 import { memo } from 'react';
-import { VisuallyHidden as AriaVisuallyHidden } from '@ariakit/react';
 
 /**
  * A memoized component that visually hides its children, but keeps them accessible to screen readers.
  *
  * Specify the `when` prop to conditionally render the children normally.
  */
-export const VisuallyHidden = memo<PropsWithChildren<{
-    /**
-     * An optional condition that determines whether the children should be hidden. If `false`, the children will be rendered normally.
-     * @default true
-     */
-    when?: boolean;
-}>>(({
-    when = true,
-    children,
-}) => (when ? (
-    <AriaVisuallyHidden>
-        {children}
-    </AriaVisuallyHidden>
-) : (
-    <>{children}</>
-)));
+export const VisuallyHidden = memo<
+    PropsWithChildren<{
+        /**
+         * An optional condition that determines whether the children should be hidden. If `false`, the children will be rendered normally.
+         * @default true
+         */
+        when?: boolean;
+    }>
+>(({ when = true, children }) => (when ? <AriaVisuallyHidden>{children}</AriaVisuallyHidden> : children));