paris 0.3.0 → 0.4.1

package/src/stories/input/Input.tsx

@@ -9,6 +9,8 @@ import { Text } from '../text';
 import type { Enhancer } from '../../types/Enhancer';
 import { pget, theme } from '../theme';
 import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import type { FieldProps } from '../field';
+import { Field } from '../field';
 
 export type InputProps = {
     /**
@@ -25,20 +27,6 @@ export type InputProps = {
      * @default text
      */
     type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-    /**
-     * Visually hide the label (while keeping it accessible to screen readers).
-     * @default false
-     */
-    hideLabel?: boolean;
-    /**
-     * A description of the input field. Can be visually hidden using the `hideDescription` prop.
-     */
-    description?: string;
-    /**
-     * Visually hide the description while keeping it accessible to screen readers.
-     * @default false
-     */
-    hideDescription?: boolean;
     /**
      * The placeholder for the input.
      */
@@ -51,10 +39,6 @@ export type InputProps = {
      * An icon or other element to render after the Input element. A `{ size }` argument is passed that should be used to determine the width & height of the content displayed.
      */
     endEnhancer?: Enhancer;
-    /**
-     * Disables the input, disallowing user interaction.
-     */
-    disabled?: boolean;
     /**
      * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
      */
@@ -65,7 +49,7 @@ export type InputProps = {
         startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
         endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
     }
-};
+} & FieldProps;
 
 /**
  * An `Input` is used to collect user input, such as text, numbers, or dates.
@@ -81,50 +65,44 @@ export type InputProps = {
  * ```
  * @constructor
  */
-export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({ status, disabled, ...props }) => {
+export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
+    label,
+    status,
+    type,
+    hideLabel,
+    description,
+    hideDescription,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    overrides,
+    ...props
+}) => {
     const inputID = useId();
     return (
-        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
-        // The container is only made clickable for usability purposes.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-        <div
-            {...props.overrides?.container}
-            className={clsx(
-                props.overrides?.container?.className,
-                styles.container,
-            )}
-            onClick={(e) => {
-                if (disabled) e.preventDefault();
-                if (typeof window !== 'undefined') {
-                    const input = document.getElementById(inputID);
-                    if (input && !disabled) {
-                        input.focus();
-                    }
-                }
+        <Field
+            htmlFor={inputID}
+            label={label}
+            hideLabel={hideLabel}
+            description={description}
+            hideDescription={hideDescription}
+            disabled={disabled}
+            overrides={{
+                container: overrides?.container,
+                label: overrides?.label,
+                description: overrides?.description,
             }}
         >
-            <Text
-                {...props.overrides?.label}
-                as="label"
-                kind="paragraphSmall"
-                htmlFor={inputID}
-                className={clsx(
-                    styles.label,
-                    { [styles.hidden]: props.hideLabel },
-                )}
-            >
-                {props.label}
-            </Text>
             <div
                 className={styles.inputContainer}
                 data-status={status}
                 data-disabled={disabled}
             >
-                {!!props.startEnhancer && (
-                    <div {...props.overrides?.startEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.startEnhancerContainer?.className)}>
-                        {!!props.startEnhancer && (
+                {!!startEnhancer && (
+                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                        {!!startEnhancer && (
                             <MemoizedEnhancer
-                                enhancer={props.startEnhancer}
+                                enhancer={startEnhancer}
                                 size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
                             />
                         )}
@@ -133,8 +111,8 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({ stat
                 <input
                     {...props}
                     id={inputID}
-                    type={props.type || 'text'}
-                    aria-label={props.label}
+                    type={type || 'text'}
+                    aria-label={label}
                     aria-describedby={`${inputID}-description`}
                     aria-disabled={disabled}
                     readOnly={disabled}
@@ -143,30 +121,17 @@ export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({ stat
                         styles.input,
                     )}
                 />
-                {!!props.endEnhancer && (
-                    <div {...props.overrides?.endEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.endEnhancerContainer?.className)}>
-                        {!!props.endEnhancer && (
+                {!!endEnhancer && (
+                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                        {!!endEnhancer && (
                             <MemoizedEnhancer
-                                enhancer={props.endEnhancer}
+                                enhancer={endEnhancer}
                                 size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
                             />
                         )}
                     </div>
                 )}
             </div>
-            <Text
-                id={`${inputID}-description`}
-                {...props.overrides?.description}
-                as="p"
-                kind="paragraphXSmall"
-                className={clsx(
-                    styles.description,
-                    { [styles.hidden]: !props.description || props.hideDescription },
-                    props.overrides?.description?.className,
-                )}
-            >
-                {props.description}
-            </Text>
-        </div>
+        </Field>
     );
 };

package/src/stories/pagination/index.ts

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

package/src/stories/pagination/usePagination.ts

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+
+export type PaginationState<T extends string[] | readonly string[] = string[]> = {
+    /**
+     * The current page key.
+     */
+    currentPage: T[number],
+
+    /**
+     * Open a page and add it to the history.
+     * @param page - The page's unique key.
+     */
+    open: (page: T[number]) => void,
+
+    /**
+     * Check if the current page can go back.
+     */
+    canGoBack: () => boolean,
+
+    /**
+     * Go back to the previous page.
+     *
+     * If the current page is the first page, nothing happens.
+     */
+    back: () => void,
+
+    /**
+     * Check if the current page can go forward.
+     */
+    canGoForward: () => boolean,
+
+    /**
+     * Go forward to the next page.
+     *
+     * If there is no next page, nothing happens.
+     */
+    forward: () => void,
+
+    /**
+     * The page history.
+     */
+    history: T[number][],
+};
+
+/**
+ * A hook to create a page history and navigate between pages.
+ *
+ * In TypeScript, you can pass in a string array to the generic type to explicitly define the page keys, which will add type safety and auto-completion for each method.
+ *
+ * @param initialPage - The initial page key.
+ */
+export const usePagination = <T extends string[] | readonly string[] = string[]>(
+    initialPage: T[number],
+): PaginationState<T> => {
+    // The current page.
+    const [currentPage, setCurrentPage] = useState<T[number]>(initialPage);
+
+    // The page history.
+    const [history, setHistory] = useState<T[number][]>([initialPage]);
+
+    const open = (page: T[number]): void => {
+        // Do nothing if the page is already open.
+        if (page === currentPage) {
+            return;
+        }
+
+        // Open the page and add it to the history, removing all pages after it.
+        const index = history.indexOf(currentPage);
+        setCurrentPage(page);
+        setHistory((hist) => hist.slice(0, index + 1).concat(page));
+    };
+
+    const canGoBack = (): boolean => {
+        const index = history.indexOf(currentPage);
+        return index > 0;
+    };
+
+    const back = (): void => {
+        if (canGoBack()) {
+            const index = history.indexOf(currentPage);
+            setCurrentPage(history[index - 1]);
+        }
+    };
+
+    const canGoForward = (): boolean => {
+        const index = history.indexOf(currentPage);
+        return index < history.length - 1;
+    };
+
+    const forward = (): void => {
+        if (canGoForward()) {
+            const index = history.indexOf(currentPage);
+            setCurrentPage(history[index + 1]);
+        }
+    };
+
+    return {
+        currentPage,
+        open,
+        canGoBack,
+        back,
+        canGoForward,
+        forward,
+        history,
+    } as PaginationState<T>;
+};

package/src/stories/select/Select.module.scss

@@ -1,6 +1,6 @@
 .container {
     position: relative;
-    user-select: none;
+    user-select: var(--pte-utils-defaultUserSelect);
 
     & > * {
         cursor: default;
@@ -47,10 +47,10 @@
     gap: 8px;
 
     padding: 8px 16px;
-    margin: 0 -1px;
+    margin: -1px;
 
-    border-left: 1px solid var(--pte-borders-dropdown-color);
-    border-right: 1px solid var(--pte-borders-dropdown-color);
+    border: 1px solid var(--pte-borders-dropdown-color);
+    //border-right: 1px solid var(--pte-borders-dropdown-color);
 
     transition: var(--pte-animations-interaction);
 
@@ -68,3 +68,7 @@
         cursor: default;
     }
 }
+
+.content {
+    width: 100%;
+}

package/src/stories/select/Select.stories.ts

@@ -26,10 +26,12 @@ const render: Story['render'] = (args) => {
 
 export const Default: Story = {
     args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
         options: [
-            { id: '1', node: 'Option 1' },
-            { id: '2', node: 'Option 2' },
-            { id: '3', node: 'Option 3' },
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
         ],
     },
     render,

package/src/stories/select/Select.tsx

@@ -1,14 +1,20 @@
 'use client';
 
-import type { FC, ReactNode } from 'react';
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { Listbox, Transition } from '@headlessui/react';
 import clsx from 'clsx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { useId } from 'react';
 import inputStyles from '../input/Input.module.scss';
 import dropdownStyles from '../dropdown/Dropdown.module.scss';
 import styles from './Select.module.scss';
+import type { TextProps } from '../text';
 import { Text } from '../text';
+import type { InputProps } from '../input';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import { pget, theme } from '../theme';
+import { Field } from '../field';
 
 export type Option<T = Record<string, any>> = {
     id: string,
@@ -34,7 +40,20 @@ export type SelectProps<T = Record<string, any>> = {
      * The interaction handler for the Select.
      */
     onChange?: (value: string | null) => void | Promise<void>;
-};
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        container?: ComponentPropsWithoutRef<'div'>;
+        selectInput?: ComponentPropsWithoutRef<'button'>;
+        optionsContainer?: ComponentPropsWithoutRef<'div'>;
+        option?: ComponentPropsWithoutRef<'div'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+    }
+} & Omit<InputProps, 'type' | 'overrides'>;
 
 /**
  * A Select component is used to render a `select` box.
@@ -52,21 +71,71 @@ export function Select<T = Record<string, any>>({
     options,
     value,
     onChange,
+    label,
+    status,
+    hideLabel,
+    description,
+    hideDescription,
+    placeholder,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    overrides,
 }: SelectProps<T>) {
+    const inputID = useId();
     return (
-        <div className={styles.container}>
+        <Field
+            htmlFor={inputID}
+            label={label}
+            hideLabel={hideLabel}
+            description={description}
+            hideDescription={hideDescription}
+            disabled={disabled}
+            overrides={{
+                container: overrides?.container,
+                label: overrides?.label,
+                description: overrides?.description,
+            }}
+        >
             <Listbox
+                as="div"
                 value={value}
                 onChange={onChange}
             >
                 <Listbox.Button
+                    id={inputID}
+                    {...overrides?.selectInput}
+                    aria-disabled={disabled}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
                     className={clsx(
+                        overrides?.selectInput?.className,
                         inputStyles.inputContainer,
                         styles.field,
                     )}
                 >
-                    {options?.find((o) => o.id === value)?.node || 'Select an option'}
-                    <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                    {!!startEnhancer && (
+                        <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                            {!!startEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={startEnhancer}
+                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    )}
+                    {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
+                    {endEnhancer ? (
+                        <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                            {!!endEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={endEnhancer}
+                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    ) : (
+                        <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                    )}
                 </Listbox.Button>
                 <Transition
                     enter={dropdownStyles.transition}
@@ -78,6 +147,7 @@ export function Select<T = Record<string, any>>({
                 >
                     <Listbox.Options
                         className={clsx(
+                            overrides?.optionsContainer,
                             styles.options,
                         )}
                     >
@@ -87,17 +157,20 @@ export function Select<T = Record<string, any>>({
                                 value={option.id}
                                 data-selected={option.id === value}
                                 className={clsx(
+                                    overrides?.option,
                                     styles.option,
                                 )}
                             >
                                 {typeof option.node === 'string' ? (
-                                    <Text as="span" kind="paragraphSmall">{option.node}</Text>
+                                    <Text as="span" kind="paragraphSmall">
+                                        {option.node}
+                                    </Text>
                                 ) : option.node}
                             </Listbox.Option>
                         ))}
                     </Listbox.Options>
                 </Transition>
             </Listbox>
-        </div>
+        </Field>
     );
 }

package/src/stories/theme/themes.ts

@@ -31,8 +31,22 @@ const Shadows = {
     shallowRight: '20px 0px 40px rgba(0, 0, 0, 0.1)',
 } as const;
 
+export type TimingFunction = `cubic-bezier(${number}, ${number}, ${number}, ${number})` | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+export type Duration = `${number}ms` | `${number}s`;
+
+const TimingFunctions: Omit<Theme['animations']['timing'], 'default'> = {
+    easeInOut: 'cubic-bezier(0.42, 0.0, 0.58, 1.0)',
+    easeOut: 'cubic-bezier(0.0, 0.0, 0.58, 1.0)',
+    easeIn: 'cubic-bezier(0.42, 0.0, 1.0, 1.0)',
+    easeOutQuad: 'cubic-bezier(0.5, 1, 0.89, 1)',
+    easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)',
+};
+
 export type Theme = {
     tokens: TokensT,
+    utils: {
+        defaultUserSelect: Property.UserSelect,
+    }
     colors: {
         // Primary
 
@@ -86,6 +100,7 @@ export type Theme = {
         backgroundOverlayLight: CSSColor,
         backgroundOverlayXLight: CSSColor,
         backgroundOverlayGrey: CSSColor,
+        backgroundOverlayDark: CSSColor,
         backgroundOverlayTeal: CSSColor,
 
         // Border
@@ -160,6 +175,7 @@ export type Theme = {
             rounded: CSSLength,
             roundedSmall: CSSLength,
             roundedLarge: CSSLength,
+            roundedXL: CSSLength,
         },
 
         // Dropdowns (Select, Menu, Popovers, etc.)
@@ -167,10 +183,34 @@ export type Theme = {
         dropdown: {
             color: CSSColor,
             shadow: ShadowDefinition,
-        }
+        },
     },
+    surfaces: {
+        dialog: {
+            border: `${number}px ${string} ${CSSColor}`,
+            outline: `${number}px ${string} ${CSSColor}`,
+            background: CSSColor,
+            backdropFilter: string,
+        },
+    }
     animations: {
         interaction: string,
+        timing: {
+            easeInOut: TimingFunction,
+            easeOut: TimingFunction,
+            easeIn: TimingFunction,
+            easeOutQuad: TimingFunction,
+            easeInQuad: TimingFunction,
+            default: TimingFunction,
+        },
+        duration: {
+            rapid: Duration,
+            fast: Duration,
+            normal: Duration,
+            relaxed: Duration,
+            slow: Duration,
+            gradual: Duration,
+        },
     }
 };
 
@@ -206,6 +246,9 @@ export const ParagraphFontClass: FontClassDefinition = {
 
 export const LightTheme: Theme = {
     tokens: T,
+    utils: {
+        defaultUserSelect: 'none',
+    },
     colors: {
         // Primary
 
@@ -259,6 +302,7 @@ export const LightTheme: Theme = {
         backgroundOverlayLight: 'rgba(255, 255, 255, 0.07)',
         backgroundOverlayXLight: 'rgba(255, 255, 255, 0.1)',
         backgroundOverlayGrey: 'rgba(175, 175, 175, 0.8)',
+        backgroundOverlayDark: 'rgba(0, 0, 0, 0.1)',
         backgroundOverlayTeal: 'rgba(29, 238, 205, 0.1)',
 
         // Border
@@ -396,6 +440,7 @@ export const LightTheme: Theme = {
             rounded: '8px',
             roundedSmall: '4px',
             roundedLarge: '12px',
+            roundedXL: '16px',
         },
 
         dropdown: {
@@ -403,8 +448,28 @@ export const LightTheme: Theme = {
             color: 'transparent',
         },
     },
+    surfaces: {
+        dialog: {
+            border: '8px solid rgba(0, 0, 0, 0.2)',
+            outline: '1px solid rgba(0, 0, 0, 0.25)',
+            background: 'rgba(255, 255, 255, 0.9)',
+            backdropFilter: 'blur(6px)',
+        },
+    },
     animations: {
         interaction: '200ms cubic-bezier(0.5, 1, 0.89, 1)',
+        timing: {
+            ...TimingFunctions,
+            default: TimingFunctions.easeOut,
+        },
+        duration: {
+            rapid: '50ms',
+            fast: '100ms',
+            normal: '200ms',
+            relaxed: '300ms',
+            slow: '400ms',
+            gradual: '600ms',
+        },
     },
 };
 
@@ -443,6 +508,14 @@ export const DarkTheme: Theme = merge(LightTheme, {
             color: T.colors.grey600,
         },
     },
+    surfaces: {
+        dialog: {
+            border: '8px solid rgba(255, 255, 255, 0.2)',
+            outline: '1px solid rgba(255, 255, 255, 0.25)',
+            background: 'rgba(0, 0, 0, 0.6)',
+            backdropFilter: 'blur(6px)',
+        },
+    },
 } as PartialDeep<Theme>) as Theme;
 
 export const {
@@ -452,4 +525,4 @@ export const {
     updateTheme,
     injectTheme,
     generateThemeInjection,
-} = createTheme(LightTheme);
+} = createTheme<Theme>(LightTheme);

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

@@ -15,6 +15,8 @@
     border-width: 0; /* 2 */
     border-style: solid; /* 2 */
     border-color: var(--pte-colors-borderSelected); /* 2 */
+    
+    -webkit-tap-highlight-color: transparent;
 }
 
 /*
@@ -325,7 +327,7 @@ Set the default cursor for buttons.
 
 button,
 [role="button"] {
-    cursor: pointer;
+    cursor: default;
 }
 
 /*

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

@@ -0,0 +1 @@
+.container {}