paris 0.23.0 → 0.24.0

package/src/stories/tilt/Tilt.tsx

@@ -1,375 +0,0 @@
-'use client';
-
-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';
-
-export type OnMoveParams = {
-    tiltAngleX: number;
-    tiltAngleY: number;
-    tiltAngleXPercentage: number;
-    tiltAngleYPercentage: number;
-    glareAngle: number;
-    glareOpacity: number;
-};
-
-export type TiltProps = {
-    /** Disables the tilt effect. @default false */
-    disableTilt?: boolean;
-    children?: ReactNode | ReactNode[];
-    className?: string;
-    style?: CSSProperties;
-    /** Scale on hover (1.05 = 105%). @default 1.05 */
-    scale?: number;
-    /** Max tilt on X axis in degrees. @default 12.5 */
-    tiltMaxAngleX?: number;
-    /** Max tilt on Y axis in degrees. @default 12.5 */
-    tiltMaxAngleY?: number;
-    /** Manual tilt on X axis in degrees. Overrides mouse input when non-null. */
-    tiltAngleXManual?: number | null;
-    /** Manual tilt on Y axis in degrees. Overrides mouse input when non-null. */
-    tiltAngleYManual?: number | null;
-    /** CSS perspective distance in px. @default 1000 */
-    perspective?: number;
-    /** Transition speed in ms for enter/leave. @default 400 */
-    transitionSpeed?: number;
-    /** Transition easing function. @default 'cubic-bezier(.03,.98,.52,.99)' */
-    transitionEasing?: string;
-    /** Reset tilt on mouse leave. @default true */
-    reset?: boolean;
-    /** Enable glare overlay. @default true */
-    glareEnable?: boolean;
-    /** Max glare opacity (0-1). @default 0.5 */
-    glareMaxOpacity?: number;
-    /** Glare gradient color. @default '#ffffff' */
-    glareColor?: string;
-    /** Glare gradient origin position. @default 'bottom' */
-    glarePosition?: GlarePosition;
-    /** Reverse glare direction. @default false */
-    glareReverse?: boolean;
-    /** CSS border-radius for glare wrapper. Derived from style.borderRadius by default. */
-    glareBorderRadius?: string;
-    onEnter?: (params: { event: ReactMouseEvent | ReactTouchEvent }) => void;
-    onLeave?: (params: { event: ReactMouseEvent | ReactTouchEvent }) => void;
-    onMove?: (params: OnMoveParams) => void;
-};
-
-type TiltState = {
-    tiltAngleX: number;
-    tiltAngleY: number;
-    currentScale: number;
-    glareAngle: number;
-    glareOpacity: number;
-    transitioning: boolean;
-};
-
-const INITIAL_STATE: TiltState = {
-    tiltAngleX: 0,
-    tiltAngleY: 0,
-    currentScale: 1,
-    glareAngle: 0,
-    glareOpacity: 0,
-    transitioning: false,
-};
-
-const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
-
-function computeGlareOpacity(
-    xPct: number,
-    yPct: number,
-    position: GlarePosition,
-    reverse: boolean,
-    maxOpacity: number,
-): number {
-    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;
-        default:
-            raw = xPct * g;
-            break;
-    }
-    return (clamp(raw, 0, 100) * maxOpacity) / 100;
-}
-
-/**
- * Tilt components allow you to add a parallax tilt effect to any component.
- *
- * > Card components include a Tilt component by default, by setting the `tilt` prop to `true`. You can override any of the underlying Tilt props by passing them to the Card component's `overrides.tilt` prop.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Tilt } from 'paris/tilt';
- * ```
- * @constructor
- */
-export const Tilt: FC<TiltProps> = ({
-    disableTilt = false,
-    scale = 1.05,
-    tiltMaxAngleX = 12.5,
-    tiltMaxAngleY = 12.5,
-    tiltAngleXManual = null,
-    tiltAngleYManual = null,
-    perspective = 1000,
-    transitionSpeed = 400,
-    transitionEasing = 'cubic-bezier(.03,.98,.52,.99)',
-    reset = true,
-    glareEnable = true,
-    glareMaxOpacity = 0.5,
-    glareColor = '#ffffff',
-    glarePosition = 'bottom',
-    glareReverse = false,
-    glareBorderRadius,
-    style = {},
-    className,
-    children,
-    onEnter,
-    onLeave,
-    onMove,
-}) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const rafID = useRef<number | null>(null);
-    const rectRef = useRef<DOMRect | null>(null);
-    const pendingRef = useRef<TiltState | null>(null);
-
-    const [tilt, setTilt] = useState<TiltState>(INITIAL_STATE);
-
-    const effectiveScale = disableTilt ? 1 : scale;
-    const effectiveMaxX = disableTilt ? 0 : tiltMaxAngleX;
-    const effectiveMaxY = disableTilt ? 0 : tiltMaxAngleY;
-    const effectiveGlare = !disableTilt && glareEnable;
-    const effectiveGlareMax = disableTilt ? 0 : glareMaxOpacity;
-    const effectiveManualX = disableTilt ? 0 : tiltAngleXManual;
-    const effectiveManualY = disableTilt ? 0 : tiltAngleYManual;
-
-    const computedGlareBorderRadius = glareBorderRadius ?? `calc(${style?.borderRadius || '1px'} - 1px)`;
-    const isManual = effectiveManualX !== null || effectiveManualY !== null;
-
-    // Cancel any pending rAF on unmount
-    useEffect(
-        () => () => {
-            if (rafID.current !== null) cancelAnimationFrame(rafID.current);
-        },
-        [],
-    );
-
-    const flushToState = useCallback(() => {
-        if (!pendingRef.current) return;
-        const next = pendingRef.current;
-        pendingRef.current = null;
-        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 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);
-    useEffect(() => {
-        if (!effectiveGlare || !containerRef.current) {
-            return undefined;
-        }
-        const el = containerRef.current;
-        const observer = new ResizeObserver(([entry]) => {
-            if (!entry) return;
-            const { width, height } = entry.contentRect;
-            setGlareSize(Math.sqrt(width ** 2 + height ** 2));
-        });
-        observer.observe(el);
-        return () => observer.disconnect();
-    }, [effectiveGlare]);
-
-    // Apply manual angle overrides at render time
-    const finalAngleX = isManual ? (effectiveManualX ?? 0) : tilt.tiltAngleX;
-    const finalAngleY = isManual ? (effectiveManualY ?? 0) : tilt.tiltAngleY;
-    const finalScale = tilt.currentScale;
-
-    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;
-
-    return (
-        <div
-            ref={containerRef}
-            onMouseEnter={handleMouseEnter}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={handleMouseLeave}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-            className={clsx(styles.container, className)}
-            style={{
-                ...style,
-                transform,
-                transition,
-                willChange:
-                    tilt.transitioning || finalScale !== 1 || finalAngleX !== 0 || finalAngleY !== 0
-                        ? 'transform'
-                        : undefined,
-            }}
-        >
-            {children}
-            {effectiveGlare && (
-                <div className={styles.glareWrapper} style={{ borderRadius: computedGlareBorderRadius }}>
-                    <div
-                        className={styles.glare}
-                        style={{
-                            width: glareSize,
-                            height: glareSize,
-                            transform: `rotate(${tilt.glareAngle}deg) translate(-50%, -50%)`,
-                            opacity: tilt.glareOpacity,
-                            background: `linear-gradient(0deg, rgba(255,255,255,0) 0%, ${glareColor} 100%)`,
-                        }}
-                    />
-                </div>
-            )}
-        </div>
-    );
-};

package/src/stories/toast/Toast.module.scss

@@ -1,20 +0,0 @@
-.toast {
-    color: var(--pte-new-colors-contentInversePrimary) !important;
-    background-color: var(--pte-new-colors-buttonFill) !important;
-    //border: 1px solid var(--pte-colors-border) !important;
-    border-radius: var(--pte-borders-radius-rounded) !important;
-    backdrop-filter: blur(4px) !important;
-    box-shadow: var(--pte-new-lighting-subtlePopup) !important;
-    font-weight: 500 !important;
-    padding: 4px 8px !important;
-
-    svg {
-        width: 10px;
-        margin-left: 8px;
-    }
-
-    & > div {
-        margin-left: 8px;
-        margin-right: 8px;
-    }
-}

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

@@ -1,31 +0,0 @@
-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',
-    component: Toast,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Toast>;
-
-export const Default: Story = {
-    args: {},
-    render: (args) => (
-        <>
-            <Button
-                onClick={() => {
-                    toast('Like we were in Paris', {
-                        icon: <Icon size={12} icon={ChevronRight} />,
-                    });
-                }}
-            >
-                Show toast
-            </Button>
-            <Toast {...args} />
-        </>
-    ),
-};

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

@@ -1,86 +0,0 @@
-import { act, render, screen, waitFor } from '../../test/render';
-import { Toast, toast } from './Toast';
-
-describe('Toast', () => {
-    it('renders the Toaster container without crashing', () => {
-        const { container } = render(<Toast />);
-        expect(container).toBeInTheDocument();
-    });
-
-    it('displays a toast message when toast() is called', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast('Hello from Paris');
-        });
-
-        await waitFor(() => {
-            expect(screen.getByText('Hello from Paris')).toBeInTheDocument();
-        });
-    });
-
-    it('displays a success toast', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast.success('Operation succeeded');
-        });
-
-        await waitFor(() => {
-            expect(screen.getByText('Operation succeeded')).toBeInTheDocument();
-        });
-    });
-
-    it('displays an error toast', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast.error('Something went wrong');
-        });
-
-        await waitFor(() => {
-            expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-        });
-    });
-
-    it('displays a loading toast', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast.loading('Please wait...');
-        });
-
-        await waitFor(() => {
-            expect(screen.getByText('Please wait...')).toBeInTheDocument();
-        });
-    });
-
-    it('displays a custom JSX toast', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast(<span data-testid="custom-toast">Custom content</span>);
-        });
-
-        await waitFor(() => {
-            expect(screen.getByTestId('custom-toast')).toBeInTheDocument();
-        });
-    });
-
-    it('applies toast styling className', async () => {
-        render(<Toast />);
-
-        act(() => {
-            toast('Styled toast');
-        });
-
-        await waitFor(() => {
-            const toastEl = screen.getByText('Styled toast').closest('[class*="toast"]');
-            expect(toastEl).toBeInTheDocument();
-        });
-    });
-
-    it('passes additional Toaster props through', () => {
-        render(<Toast position="bottom-left" />);
-    });
-});

package/src/stories/utility/Dropdown.module.scss

@@ -1,28 +0,0 @@
-.transitionContainer {
-    position: relative;
-    z-index: var(--pte-new-layers-dropdown);
-}
-
-.transition {
-    transition: var(--pte-animations-interaction);
-}
-
-.enterFrom {
-    opacity: 0;
-    transform: translateY(-8px);
-}
-
-.enterTo {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.leaveFrom {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.leaveTo {
-    opacity: 0;
-    transform: translateY(-8px);
-}

package/src/stories/utility/EasingFunctions.ts

@@ -1,3 +0,0 @@
-import { cubicBezier } from 'framer-motion';
-
-export const easeInOutExpo = cubicBezier(0.87, 0, 0.13, 1);

package/src/stories/utility/RemoveFromDOM.tsx

@@ -1,15 +0,0 @@
-import type { PropsWithChildren } from 'react';
-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));

package/src/stories/utility/TextWhenString.tsx

@@ -1,15 +0,0 @@
-import type { PropsWithChildren } from 'react';
-import { memo } from 'react';
-import type { TextElement, TextProps } from '../text';
-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 }) => {
-    if (typeof children === 'string' || typeof children === 'number') {
-        return <Text {...props}>{children}</Text>;
-    }
-
-    return <>{children}</>;
-});

package/src/stories/utility/Utility.test.tsx

@@ -1,96 +0,0 @@
-import { render, screen } from '../../test/render';
-import { RemoveFromDOM } from './RemoveFromDOM';
-import { TextWhenString } from './TextWhenString';
-import { VisuallyHidden } from './VisuallyHidden';
-
-describe('RemoveFromDOM', () => {
-    it('renders children when `when` is false', () => {
-        render(
-            <RemoveFromDOM when={false}>
-                <span>visible child</span>
-            </RemoveFromDOM>,
-        );
-        expect(screen.getByText('visible child')).toBeInTheDocument();
-    });
-
-    it('removes children from the DOM when `when` is true', () => {
-        render(
-            <RemoveFromDOM when={true}>
-                <span>hidden child</span>
-            </RemoveFromDOM>,
-        );
-        expect(screen.queryByText('hidden child')).not.toBeInTheDocument();
-    });
-
-    it('toggles visibility when `when` prop changes', () => {
-        const { rerender } = render(
-            <RemoveFromDOM when={false}>
-                <span>toggle me</span>
-            </RemoveFromDOM>,
-        );
-        expect(screen.getByText('toggle me')).toBeInTheDocument();
-
-        rerender(
-            <RemoveFromDOM when={true}>
-                <span>toggle me</span>
-            </RemoveFromDOM>,
-        );
-        expect(screen.queryByText('toggle me')).not.toBeInTheDocument();
-    });
-});
-
-describe('TextWhenString', () => {
-    it('wraps string children in a Text component', () => {
-        render(<TextWhenString as="span">hello world</TextWhenString>);
-        const el = screen.getByText('hello world');
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe('SPAN');
-    });
-
-    it('wraps numeric children in a Text component', () => {
-        render(<TextWhenString as="span">{42}</TextWhenString>);
-        expect(screen.getByText('42')).toBeInTheDocument();
-    });
-
-    it('passes ReactNode children through without wrapping', () => {
-        render(
-            <TextWhenString as="span">
-                <div data-testid="passthrough">node child</div>
-            </TextWhenString>,
-        );
-        const el = screen.getByTestId('passthrough');
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe('DIV');
-    });
-});
-
-describe('VisuallyHidden', () => {
-    it('visually hides children when `when` is true (default)', () => {
-        render(
-            <VisuallyHidden>
-                <span>hidden text</span>
-            </VisuallyHidden>,
-        );
-        expect(screen.getByText('hidden text')).toBeInTheDocument();
-    });
-
-    it('renders children normally when `when` is false', () => {
-        render(
-            <VisuallyHidden when={false}>
-                <span data-testid="normal">visible text</span>
-            </VisuallyHidden>,
-        );
-        const el = screen.getByTestId('normal');
-        expect(el).toBeInTheDocument();
-        expect(el.tagName).toBe('SPAN');
-    });
-
-    it('visually hides children when `when` is explicitly true', () => {
-        render(
-            <VisuallyHidden when={true}>
-                <span>explicitly hidden</span>
-            </VisuallyHidden>,
-        );
-        expect(screen.getByText('explicitly hidden')).toBeInTheDocument();
-    });
-});

package/src/stories/utility/VisuallyHidden.tsx

@@ -1,18 +0,0 @@
-import { VisuallyHidden as AriaVisuallyHidden } from '@ariakit/react';
-import type { PropsWithChildren } from 'react';
-import { memo } from '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));