paris 0.23.1 → 0.24.0

package/src/stories/theme/tokens.ts

@@ -1,149 +0,0 @@
-export const Colors = {
-    black: '#060606',
-    white: '#ffffff',
-    teal: '#1deecd',
-    orange: '#ff9426',
-    pink: '#fb46be',
-    red: '#fd4d2e',
-    yellow: '#ffc043',
-    green: '#08c94e',
-
-    grey1050: '#121212',
-    grey1000: '#171717',
-    grey950: '#1f1f1f',
-    grey900: '#252525',
-    grey800: '#2e2e2e',
-    grey750: '#3c3c3c',
-    grey700: '#4a4a4a',
-    grey600: '#545454',
-    grey500: '#757575',
-    grey400: '#afafaf',
-    grey300: '#c9c9c9',
-    grey200: '#e2e2e2',
-    grey100: '#eeeeee',
-    grey50: '#f6f6f6',
-
-    teal700: '#004136',
-    teal600: '#18b199',
-    teal500: '#1ad4b6',
-    teal400: '#1deecd',
-    teal300: '#8ef7e6',
-    teal200: '#d9fcf7',
-    teal100: '#ecfefb',
-
-    red700: '#331611',
-    red600: '#541a0f',
-    red500: '#a9331f',
-    red400: '#fd4d2e',
-    red300: '#fea697',
-    red200: '#ffe1dc',
-    red100: '#fff0ee',
-
-    yellow600: '#554016',
-    yellow500: '#aa802d',
-    yellow450: '#eba417',
-    yellow400: '#ffc043',
-    yellow300: '#ffe0a1',
-    yellow200: '#fff5e0',
-    yellow100: '#fff8e8',
-
-    green700: '#063717',
-    green600: '#0a4820',
-    green500: '#148f41',
-    green400: '#08c94e',
-    green300: '#8febb0',
-    green200: '#daf8e5',
-    green100: '#edfcf2',
-
-    gradientTeal: 'linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%)',
-    gradientOrange: 'linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%)',
-    gradientPink: 'linear-gradient(90deg, #FF4BED 0%, #F7418D 100%)',
-} as const;
-
-export const ColorsNew = {
-    white: '#ffffff',
-    black: '#000000',
-
-    grey100: '#fcfcfc',
-    grey200: '#f8f8f8',
-    grey300: '#f3f3f3',
-    grey400: '#eeeeee',
-    grey500: '#e8e8e8',
-    grey600: '#e2e2e2',
-    grey700: '#dbdbdb',
-    grey800: '#d1d1d1',
-    grey900: '#c7c7c7',
-    grey1000: '#afafaf',
-    grey1100: '#9d9d9d',
-    grey1200: '#8a8a8a',
-    grey1300: '#7f7f7f',
-    grey1400: '#6e6e6e',
-    grey1500: '#5f5f5f',
-    grey1600: '#4f4f4f',
-    grey1700: '#3e3e3e',
-    grey1800: '#343434',
-    grey1900: '#2e2e2e',
-    grey2000: '#282828',
-    grey2100: '#212121',
-    grey2200: '#1c1c1c',
-    grey2300: '#171717',
-    grey2400: '#121212',
-
-    red100: '#fff0ee',
-    red200: '#ffe1dc',
-    red300: '#ffd4cc',
-    red400: '#fd4d2e',
-    red500: '#eb2a07',
-    red600: '#541a0f',
-    red700: '#3f1811',
-    red800: '#2d130e',
-
-    yellow100: '#fff8e8',
-    yellow200: '#fff3db',
-    yellow300: '#ffefcf',
-    yellow400: '#ffbf3f',
-    yellow500: '#f4a60b',
-    yellow600: '#6c4b0b',
-    yellow700: '#402c05',
-    yellow800: '#2b1e02',
-
-    green100: '#edfcf2',
-    green200: '#dffae8',
-    green300: '#d0f8df',
-    green400: '#08c94e',
-    green500: '#05ab41',
-    green600: '#053917',
-    green700: '#052a12',
-    green800: '#021d0b',
-
-    teal100: '#ecfefb',
-    teal200: '#ddfffa',
-    teal300: '#cffbf4',
-    teal400: '#1deecd',
-    teal500: '#1ad4b6',
-    teal600: '#005548',
-    teal700: '#004137',
-    teal800: '#002620',
-
-    blue400: '#7a96fc',
-    blue500: '#3760f5',
-
-    gradientTeal: 'linear-gradient(95.14deg, #26EDED 0%, #14EFAC 100%)',
-    gradientOrange: 'linear-gradient(95.14deg, #FF814A 0%, #FFA800 100%)',
-    gradientPink: 'linear-gradient(90deg, #FF4BED 0%, #F6418D 100%)',
-    gradientRainbow: 'linear-gradient(90deg, #1DEECD 0%, #26EDED 12.5%, #FFA8F1 71.35%, #FFD7A8 100%)',
-} as const;
-
-export type TokensT = {
-    colors: typeof Colors;
-    new: {
-        colors: typeof ColorsNew;
-    };
-};
-
-export const Tokens: TokensT = {
-    colors: Colors,
-    new: {
-        colors: ColorsNew,
-    },
-};

package/src/stories/theme/util.scss

@@ -1,8 +0,0 @@
-@mixin flex-row {
-    display: flex;
-    flex-direction: row;
-}
-
-.bold {
-    font-weight: var(--pte-typography-fontWeights-medium);
-}

package/src/stories/tilt/Tilt.module.scss

@@ -1,22 +0,0 @@
-.container {
-    position: relative;
-}
-
-.glareWrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    -webkit-mask-image: -webkit-radial-gradient(white, black);
-    pointer-events: none;
-}
-
-.glare {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform-origin: 0% 0%;
-    pointer-events: none;
-}

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

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import type { CSSProperties } from 'react';
-import { Text } from '../text';
-import { pvar } from '../theme';
-import { Tilt } from './Tilt';
-
-const meta: Meta<typeof Tilt> = {
-    title: 'Surfaces/Tilt',
-    component: Tilt,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Tilt>;
-
-export const Default: Story = {
-    args: {
-        style: {},
-        children: <Text kind="headingMedium">Tilt Component</Text>,
-        onEnter: undefined,
-        onLeave: undefined,
-        onMove: undefined,
-    },
-    render: ({ children, style, ...args }) => {
-        const tiltStyle = {
-            width: 'max-content',
-            userSelect: pvar('utils.defaultUserSelect'),
-            backgroundColor: pvar('new.colors.surfacePrimary'),
-            boxShadow: pvar('new.lighting.shallowBelow'),
-            padding: '8px 16px',
-            // border: `1px solid ${pvar('new.borders.dropdown.color')}`,
-            borderRadius: pvar('borders.radius.rounded'),
-            ...style,
-        } as CSSProperties;
-
-        return (
-            <Tilt {...args} style={tiltStyle}>
-                {children}
-            </Tilt>
-        );
-    },
-};

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

@@ -1,203 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { render, screen } from '../../test/render';
-import { Tilt } from './Tilt';
-
-describe('Tilt', () => {
-    it('renders children', () => {
-        render(
-            <Tilt>
-                <div data-testid="child">Content</div>
-            </Tilt>,
-        );
-        expect(screen.getByTestId('child')).toBeInTheDocument();
-    });
-
-    it('renders multiple children', () => {
-        render(
-            <Tilt>
-                <div data-testid="child-1">First</div>
-                <div data-testid="child-2">Second</div>
-            </Tilt>,
-        );
-        expect(screen.getByTestId('child-1')).toBeInTheDocument();
-        expect(screen.getByTestId('child-2')).toBeInTheDocument();
-    });
-
-    describe('className forwarding', () => {
-        it('forwards custom className', () => {
-            const { container } = render(<Tilt className="custom-class">Content</Tilt>);
-            expect(container.firstElementChild).toHaveClass('custom-class');
-        });
-
-        it('preserves container class when custom className is added', () => {
-            const { container } = render(<Tilt className="custom-class">Content</Tilt>);
-            expect(container.firstElementChild).toHaveClass('container');
-            expect(container.firstElementChild).toHaveClass('custom-class');
-        });
-    });
-
-    describe('style forwarding', () => {
-        it('applies custom styles', () => {
-            const { container } = render(<Tilt style={{ backgroundColor: 'red' }}>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.backgroundColor).toBe('red');
-        });
-    });
-
-    describe('transform', () => {
-        it('applies initial transform with default perspective and scale', () => {
-            const { container } = render(<Tilt>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transform).toContain('perspective(1000px)');
-            expect(el.style.transform).toContain('rotateX(0deg)');
-            expect(el.style.transform).toContain('rotateY(0deg)');
-            expect(el.style.transform).toContain('scale3d(1,1,1)');
-        });
-
-        it('applies custom perspective', () => {
-            const { container } = render(<Tilt perspective={500}>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transform).toContain('perspective(500px)');
-        });
-    });
-
-    describe('glare', () => {
-        it('renders glare overlay by default', () => {
-            const { container } = render(<Tilt>Content</Tilt>);
-            const glareWrapper = container.querySelector('.glareWrapper');
-            expect(glareWrapper).toBeInTheDocument();
-        });
-
-        it('does not render glare when glareEnable is false', () => {
-            const { container } = render(<Tilt glareEnable={false}>Content</Tilt>);
-            const glareWrapper = container.querySelector('.glareWrapper');
-            expect(glareWrapper).not.toBeInTheDocument();
-        });
-
-        it('does not render glare when tilt is disabled', () => {
-            const { container } = render(<Tilt disableTilt>Content</Tilt>);
-            const glareWrapper = container.querySelector('.glareWrapper');
-            expect(glareWrapper).not.toBeInTheDocument();
-        });
-    });
-
-    describe('disableTilt', () => {
-        it('uses scale of 1 when tilt is disabled', () => {
-            const { container } = render(<Tilt disableTilt>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transform).toContain('scale3d(1,1,1)');
-        });
-    });
-
-    describe('mouse events', () => {
-        it('calls onEnter on mouse enter', () => {
-            const onEnter = vi.fn();
-            const { container } = render(<Tilt onEnter={onEnter}>Content</Tilt>);
-            fireEvent.mouseEnter(container.firstElementChild!);
-            expect(onEnter).toHaveBeenCalledTimes(1);
-            expect(onEnter).toHaveBeenCalledWith(expect.objectContaining({ event: expect.anything() }));
-        });
-
-        it('calls onLeave on mouse leave', () => {
-            const onLeave = vi.fn();
-            const { container } = render(<Tilt onLeave={onLeave}>Content</Tilt>);
-            const el = container.firstElementChild!;
-            fireEvent.mouseEnter(el);
-            fireEvent.mouseLeave(el);
-            expect(onLeave).toHaveBeenCalledTimes(1);
-        });
-
-        it('calls onMove on mouse move', () => {
-            const onMove = vi.fn();
-            const { container } = render(<Tilt onMove={onMove}>Content</Tilt>);
-            const el = container.firstElementChild!;
-            fireEvent.mouseEnter(el);
-            fireEvent.mouseMove(el, { pageX: 50, pageY: 50 });
-            expect(onMove).toHaveBeenCalled();
-        });
-
-        it('resets transform on mouse leave when reset is true', () => {
-            const { container } = render(<Tilt reset>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            fireEvent.mouseEnter(el);
-            fireEvent.mouseLeave(el);
-            expect(el.style.transform).toContain('rotateX(0deg)');
-            expect(el.style.transform).toContain('rotateY(0deg)');
-        });
-    });
-
-    describe('touch events', () => {
-        it('calls onEnter on touch start', () => {
-            const onEnter = vi.fn();
-            const { container } = render(<Tilt onEnter={onEnter}>Content</Tilt>);
-            fireEvent.touchStart(container.firstElementChild!, {
-                touches: [{ pageX: 50, pageY: 50 }],
-            });
-            expect(onEnter).toHaveBeenCalledTimes(1);
-        });
-
-        it('calls onLeave on touch end', () => {
-            const onLeave = vi.fn();
-            const { container } = render(<Tilt onLeave={onLeave}>Content</Tilt>);
-            const el = container.firstElementChild!;
-            fireEvent.touchStart(el, { touches: [{ pageX: 50, pageY: 50 }] });
-            fireEvent.touchEnd(el);
-            expect(onLeave).toHaveBeenCalledTimes(1);
-        });
-    });
-
-    describe('manual tilt angles', () => {
-        it('applies manual tilt angle X', () => {
-            const { container } = render(<Tilt tiltAngleXManual={10}>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transform).toContain('rotateX(10deg)');
-        });
-
-        it('applies manual tilt angle Y', () => {
-            const { container } = render(<Tilt tiltAngleYManual={15}>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transform).toContain('rotateY(15deg)');
-        });
-
-        it('applies transition when manual angles are set', () => {
-            const { container } = render(
-                <Tilt tiltAngleXManual={10} transitionSpeed={300}>
-                    Content
-                </Tilt>,
-            );
-            const el = container.firstElementChild as HTMLElement;
-            expect(el.style.transition).toContain('300ms');
-        });
-    });
-
-    describe('transition', () => {
-        it('applies transition on mouse enter', () => {
-            const { container } = render(<Tilt transitionSpeed={500}>Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            fireEvent.mouseEnter(el);
-            expect(el.style.transition).toContain('500ms');
-        });
-
-        it('applies custom easing function', () => {
-            const { container } = render(<Tilt transitionEasing="ease-in-out">Content</Tilt>);
-            const el = container.firstElementChild as HTMLElement;
-            fireEvent.mouseEnter(el);
-            expect(el.style.transition).toContain('ease-in-out');
-        });
-    });
-
-    describe('glare border radius', () => {
-        it('uses custom glareBorderRadius when provided', () => {
-            const { container } = render(<Tilt glareBorderRadius="10px">Content</Tilt>);
-            const glareWrapper = container.querySelector('.glareWrapper') as HTMLElement;
-            expect(glareWrapper.style.borderRadius).toBe('10px');
-        });
-
-        it('derives glare border radius from style.borderRadius', () => {
-            const { container } = render(<Tilt style={{ borderRadius: '20px' }}>Content</Tilt>);
-            const glareWrapper = container.querySelector('.glareWrapper') as HTMLElement;
-            // jsdom may simplify calc(20px - 1px) to calc(19px)
-            expect(glareWrapper.style.borderRadius).toMatch(/calc\((?:20px - 1px|19px)\)/);
-        });
-    });
-});