paris 0.3.0 → 0.4.1

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { Property } from 'csstype';
+import { Tilt } from './Tilt';
+import { Text } from '../text';
+import { pvar } from '../theme';
+
+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">Billie Eilish</Text>
+        ),
+        onEnter: undefined,
+        onLeave: undefined,
+        onMove: undefined,
+    },
+    render: ({ children, style, ...args }) => (
+        <Tilt
+            {...args}
+            style={{
+                width: 'max-content',
+                userSelect: pvar('utils.defaultUserSelect') as Property.UserSelect,
+                // backgroundColor: pvar('colors.backgroundOverlayDark'),
+                boxShadow: pvar('lighting.shallowBelow'),
+                padding: '8px 16px',
+                border: `1px solid ${pvar('borders.dropdown.color')}`,
+                borderRadius: pvar('borders.radius.rounded'),
+                ...style,
+            }}
+        >
+            {children}
+        </Tilt>
+    ),
+};

package/src/stories/tilt/Tilt.tsx

@@ -0,0 +1,65 @@
+'use client';
+
+import type { FC, ReactNode } from 'react';
+import RPTilt from 'react-parallax-tilt';
+import styles from './Tilt.module.scss';
+
+export type TiltProps = {
+    /**
+     * Disables the tilt effect.
+     * @default false
+     */
+    disableTilt?: boolean;
+    /** The contents of the Tilt. */
+    children?: ReactNode | ReactNode[];
+    /** The class names to apply to this element. */
+    className?: string;
+} & RPTilt['props'];
+
+/**
+ * Tilt components allow you to add a parallax tilt effect to any component.
+ *
+ * Based on [react-parallax-tilt](https://github.com/mkosir/react-parallax-tilt), customized with our preferred defaults.
+ *
+ * > 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,
+    glareEnable = true,
+    glareMaxOpacity = 0.5,
+    style = {},
+    tiltAngleXManual = null,
+    tiltAngleYManual = null,
+    perspective = 1000,
+    children,
+    ...props
+}) => (
+    <RPTilt
+        scale={disableTilt ? 1 : scale}
+        tiltMaxAngleX={disableTilt ? 0 : tiltMaxAngleX}
+        tiltMaxAngleY={disableTilt ? 0 : tiltMaxAngleY}
+        glareEnable={!disableTilt && glareEnable}
+        glareMaxOpacity={disableTilt ? 0 : glareMaxOpacity}
+        style={style}
+        glareBorderRadius={`calc(${style?.borderRadius || '1px'} - 1px)`}
+        tiltAngleXManual={disableTilt ? 0 : tiltAngleXManual}
+        tiltAngleYManual={disableTilt ? 0 : tiltAngleYManual}
+        perspective={perspective}
+        {...props}
+        className={`${styles.container} ${props.className}`}
+    >
+        {children}
+    </RPTilt>
+);

package/src/stories/tilt/index.ts

@@ -0,0 +1 @@
+export * from './Tilt';

package/src/stories/utility/RemoveFromDOM.tsx

@@ -0,0 +1,19 @@
+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

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

package/src/stories/utility/VisuallyHidden.tsx

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