paris 0.23.1 → 0.24.0

package/src/stories/checkbox/Checkbox.tsx

@@ -1,123 +0,0 @@
-'use client';
-import { Switch } from '@headlessui/react';
-import * as RadixCheckbox from '@radix-ui/react-checkbox';
-import { clsx } from 'clsx';
-import type { FC, ReactNode } from 'react';
-import { useId } from 'react';
-import { useControllableState } from '../../helpers/useControllableState';
-import { Check, Icon } from '../icon';
-import { TextWhenString, VisuallyHidden } from '../utility';
-import styles from './Checkbox.module.scss';
-
-export type CheckboxProps = {
-    /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `panel` is a clickable card with the checkbox aligned right, `switch` is a switch toggle.  */
-    kind?: 'default' | 'surface' | 'panel' | 'switch';
-    checked?: boolean;
-    onChange?: (checked: boolean | 'indeterminate') => void;
-    disabled?: boolean;
-    /**
-     * Whether to hide the label text of the Checkbox. Does not apply to `kind="surface"` because there would be nothing visible.
-     *
-     * @default false
-     */
-    hideLabel?: boolean;
-    /** The initial checked state for uncontrolled mode. If `checked` is provided, this is ignored. */
-    defaultChecked?: boolean;
-    /** The contents of the Checkbox. */
-    children?: ReactNode | ReactNode[];
-} & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;
-
-/**
- * A Checkbox component.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Checkbox } from 'paris/checkbox';
- * ```
- * @constructor
- */
-export const Checkbox: FC<CheckboxProps> = ({
-    kind = 'default',
-    checked,
-    defaultChecked,
-    onChange,
-    disabled,
-    hideLabel = false,
-    children,
-    className,
-    ...props
-}) => {
-    const inputID = useId();
-    const [resolvedChecked, setResolvedChecked] = useControllableState({
-        value: checked,
-        defaultValue: defaultChecked,
-        onChange: onChange as ((value: boolean) => void) | undefined,
-    });
-    return (
-        <label
-            htmlFor={inputID}
-            className={clsx(
-                styles.container,
-                disabled && styles.disabled,
-                className,
-                resolvedChecked && styles.checked,
-            )}
-            {...props}
-        >
-            {(kind === 'default' || kind === 'surface' || kind === 'panel') && (
-                <RadixCheckbox.Root
-                    id={inputID}
-                    className={clsx(styles.root, styles[kind])}
-                    checked={resolvedChecked}
-                    onCheckedChange={(v) => setResolvedChecked(!!v)}
-                    data-disabled={disabled}
-                    aria-details={typeof children === 'string' ? children : undefined}
-                >
-                    {(kind === 'surface' || kind === 'panel') && (
-                        <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
-                    )}
-                    {kind === 'panel' && <div className={styles.box} />}
-                    <RadixCheckbox.Indicator className={styles.indicator}>
-                        {(kind === 'default' || kind === 'panel') && (
-                            <svg
-                                width={14}
-                                height={14}
-                                viewBox="0 0 14 14"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                            >
-                                <path
-                                    className={styles.checkSvg}
-                                    data-disabled={disabled}
-                                    d="M0.333374 0.333252V13.6666H13.6667V0.333252H0.333374ZM6.00004 10.3999L2.26672 6.66658L3.66671 5.26658L5.93339 7.53325L10.2 3.26658L11.6001 4.66659L6.00004 10.3999Z"
-                                />
-                            </svg>
-                        )}
-                        {kind === 'surface' && (
-                            <Icon icon={Check} size={12.8} data-disabled={disabled} className={styles.checkIcon} />
-                        )}
-                    </RadixCheckbox.Indicator>
-                </RadixCheckbox.Root>
-            )}
-            {kind === 'switch' && (
-                <Switch
-                    checked={resolvedChecked}
-                    onChange={setResolvedChecked}
-                    className={styles.switchContainer}
-                    data-disabled={disabled}
-                    id={inputID}
-                    aria-details={typeof children === 'string' ? children : undefined}
-                >
-                    <span aria-hidden="true" className={clsx(styles.knob, resolvedChecked && styles.knobChecked)} />
-                </Switch>
-            )}
-            {(kind === 'default' || kind === 'switch') && !hideLabel && (
-                <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
-            )}
-            {hideLabel && <VisuallyHidden>{children}</VisuallyHidden>}
-        </label>
-    );
-};

package/src/stories/codeinput/CodeInput.module.scss

@@ -1,77 +0,0 @@
-.container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    padding: 8px 0;
-}
-
-// Validating state: lock interaction and sweep a glare that enters from the right (last field).
-.loading {
-    position: relative;
-    overflow: hidden;
-    pointer-events: none;
-
-    // The glare — a soft highlight band that enters from the right and sweeps across, looping.
-    &::after {
-        content: '';
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-        border-radius: 4px;
-        background: linear-gradient(
-            100deg,
-            transparent 30%,
-            rgb(255 255 255 / 70%) 50%,
-            transparent 70%
-        );
-        transform: translateX(130%);
-        animation: codeGlare 1.3s ease-in-out 0.45s infinite;
-    }
-}
-
-@keyframes codeGlare {
-    to {
-        transform: translateX(-130%);
-    }
-}
-
-.segment {
-    box-sizing: border-box;
-    width: 30px;
-    height: 34px;
-    padding: 6.5px 2px;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    background-color: var(--pte-new-colors-inputFill);
-    color: var(--pte-new-colors-contentPrimary);
-    text-align: center;
-    outline: none;
-    caret-color: var(--pte-new-colors-contentPrimary);
-
-    font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
-    font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
-    font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
-    letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
-    line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
-
-    transition: var(--pte-animations-interaction);
-
-    &:focus {
-        background-color: var(--pte-new-colors-inputFillFocus);
-        border-color: var(--pte-new-colors-inputBorderFocus);
-    }
-
-    &:disabled {
-        background-color: var(--pte-new-colors-inputFillDisabled);
-        color: var(--pte-new-colors-contentDisabled);
-        cursor: default;
-        pointer-events: none;
-    }
-
-    &.error {
-        background-color: var(--pte-new-colors-inputFillNegative);
-        border-color: var(--pte-new-colors-inputBorderNegative);
-        color: var(--pte-new-colors-contentNegative);
-        caret-color: var(--pte-new-colors-contentNegative);
-    }
-}

package/src/stories/codeinput/CodeInput.stories.ts

@@ -1,51 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement, useState } from 'react';
-import { CodeInput } from './CodeInput';
-
-const meta: Meta<typeof CodeInput> = {
-    title: 'Inputs/CodeInput',
-    component: CodeInput,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof CodeInput>;
-
-export const Default: Story = {
-    render: function Render(args) {
-        const [value, setValue] = useState('');
-        return createElement(CodeInput, { ...args, value, onChange: setValue });
-    },
-};
-
-export const Error: Story = {
-    args: { status: 'error' },
-    render: function Render(args) {
-        const [value, setValue] = useState('123');
-        return createElement(CodeInput, { ...args, value, onChange: setValue });
-    },
-};
-
-export const Disabled: Story = {
-    args: { disabled: true },
-    render: function Render(args) {
-        const [value, setValue] = useState('12');
-        return createElement(CodeInput, { ...args, value, onChange: setValue });
-    },
-};
-
-export const Loading: Story = {
-    args: { loading: true },
-    render: function Render(args) {
-        const [value, setValue] = useState('123456');
-        return createElement(CodeInput, { ...args, value, onChange: setValue });
-    },
-};
-
-export const FourDigits: Story = {
-    args: { length: 4 },
-    render: function Render(args) {
-        const [value, setValue] = useState('');
-        return createElement(CodeInput, { ...args, value, onChange: setValue });
-    },
-};

package/src/stories/codeinput/CodeInput.test.tsx

@@ -1,56 +0,0 @@
-import { useState } from 'react';
-import { render, screen } from '../../test/render';
-import { CodeInput } from './CodeInput';
-
-function Controlled({ length = 6, onComplete }: { length?: number; onComplete?: (value: string) => void }) {
-    const [value, setValue] = useState('');
-    return <CodeInput value={value} onChange={setValue} onComplete={onComplete} length={length} aria-label="code" />;
-}
-
-describe('CodeInput', () => {
-    describe('rendering', () => {
-        it('renders `length` segments (default 6)', () => {
-            render(<Controlled />);
-            expect(screen.getAllByRole('textbox')).toHaveLength(6);
-        });
-
-        it('respects a custom length', () => {
-            render(<Controlled length={4} />);
-            expect(screen.getAllByRole('textbox')).toHaveLength(4);
-        });
-    });
-
-    describe('entry', () => {
-        it('types digits across segments and ignores non-numerics', async () => {
-            const { user } = render(<Controlled />);
-            const segments = screen.getAllByRole('textbox');
-            await user.click(segments[0]);
-            await user.keyboard('12a3');
-            expect(segments[0]).toHaveValue('1');
-            expect(segments[1]).toHaveValue('2');
-            expect(segments[2]).toHaveValue('3');
-        });
-
-        it('pastes to fill all segments and fires onComplete once', async () => {
-            const onComplete = vi.fn();
-            const { user } = render(<Controlled onComplete={onComplete} />);
-            const segments = screen.getAllByRole('textbox');
-            await user.click(segments[0]);
-            await user.paste('123456');
-            expect(segments[0]).toHaveValue('1');
-            expect(segments[5]).toHaveValue('6');
-            expect(onComplete).toHaveBeenCalledTimes(1);
-            expect(onComplete).toHaveBeenCalledWith('123456');
-        });
-
-        it('backspace on an empty segment clears and retreats to the previous', async () => {
-            const { user } = render(<Controlled />);
-            const segments = screen.getAllByRole('textbox');
-            await user.click(segments[0]);
-            await user.keyboard('12');
-            await user.keyboard('{Backspace}');
-            expect(segments[1]).toHaveValue('');
-            expect(segments[0]).toHaveValue('1');
-        });
-    });
-});

package/src/stories/codeinput/CodeInput.tsx

@@ -1,160 +0,0 @@
-'use client';
-
-import { clsx } from 'clsx';
-import type { ChangeEvent, ClipboardEvent, FC, KeyboardEvent } from 'react';
-import { useCallback, useEffect, useRef } from 'react';
-import styles from './CodeInput.module.scss';
-
-export type CodeInputProps = {
-    /** The current code value. Controlled — pass the digits entered so far. */
-    value: string;
-    /** Called with the new value whenever a segment changes. */
-    onChange: (value: string) => void;
-    /** Called once the final segment is filled (i.e. `value.length === length`). */
-    onComplete?: (value: string) => void;
-    /**
-     * Number of digit segments.
-     * @default 6
-     */
-    length?: number;
-    /**
-     * Visual status of the segments.
-     * @default 'default'
-     */
-    status?: 'default' | 'error';
-    /** Disables all segments. */
-    disabled?: boolean;
-    /**
-     * Locks the input and plays a validating animation (a right-to-left fill, then a glare that
-     * sweeps across the segments). Use while a submitted code is being verified.
-     */
-    loading?: boolean;
-    /** Focus the first segment on mount. */
-    autoFocus?: boolean;
-    /**
-     * Accessible label for the group of segments.
-     * @default 'Verification code'
-     */
-    'aria-label'?: string;
-};
-
-/**
- * A segmented numeric code input — `length` single-digit cells with auto-advance, paste-to-fill,
- * backspace-retreat, and arrow-key navigation. Intended for one-time PIN / SMS verification codes.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { CodeInput } from 'paris/codeinput';
- * ```
- * @constructor
- */
-export const CodeInput: FC<CodeInputProps> = ({
-    value,
-    onChange,
-    onComplete,
-    length = 6,
-    status = 'default',
-    disabled = false,
-    loading = false,
-    autoFocus = false,
-    'aria-label': ariaLabel = 'Verification code',
-}) => {
-    const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
-    const digits = value.split('').slice(0, length);
-
-    const focusAt = useCallback(
-        (index: number) => {
-            const clamped = Math.max(0, Math.min(index, length - 1));
-            const input = inputsRef.current[clamped];
-            input?.focus();
-            input?.select();
-        },
-        [length],
-    );
-
-    useEffect(() => {
-        if (autoFocus) focusAt(0);
-    }, [autoFocus, focusAt]);
-
-    const emit = useCallback(
-        (next: string) => {
-            const sliced = next.slice(0, length);
-            onChange(sliced);
-            if (sliced.length === length) onComplete?.(sliced);
-        },
-        [length, onChange, onComplete],
-    );
-
-    const handleChange = (index: number) => (event: ChangeEvent<HTMLInputElement>) => {
-        const typed = event.target.value.replace(/\D/g, '');
-        if (!typed) return;
-        const chars = value.split('');
-        let cursor = index;
-        for (const char of typed) {
-            if (cursor >= length) break;
-            chars[cursor] = char;
-            cursor += 1;
-        }
-        emit(chars.join(''));
-        focusAt(cursor);
-    };
-
-    const handleKeyDown = (index: number) => (event: KeyboardEvent<HTMLInputElement>) => {
-        const chars = value.split('');
-        if (event.key === 'Backspace') {
-            event.preventDefault();
-            if (chars[index]) {
-                chars[index] = '';
-                emit(chars.join(''));
-            } else if (index > 0) {
-                chars[index - 1] = '';
-                emit(chars.join(''));
-                focusAt(index - 1);
-            }
-        } else if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            focusAt(index - 1);
-        } else if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            focusAt(index + 1);
-        }
-    };
-
-    const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
-        event.preventDefault();
-        const pasted = event.clipboardData.getData('text').replace(/\D/g, '').slice(0, length);
-        if (!pasted) return;
-        emit(pasted);
-        focusAt(pasted.length);
-    };
-
-    return (
-        <div className={clsx(styles.container, loading && styles.loading)} role="group" aria-label={ariaLabel}>
-            {Array.from({ length }).map((_, index) => (
-                <input
-                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-length positional code segments are stable
-                    key={index}
-                    ref={(element) => {
-                        inputsRef.current[index] = element;
-                    }}
-                    className={clsx(styles.segment, status === 'error' && styles.error)}
-                    type="text"
-                    inputMode="numeric"
-                    autoComplete={index === 0 ? 'one-time-code' : 'off'}
-                    maxLength={1}
-                    disabled={disabled}
-                    readOnly={loading}
-                    value={digits[index] ?? ''}
-                    aria-label={`Digit ${index + 1}`}
-                    onChange={handleChange(index)}
-                    onKeyDown={handleKeyDown(index)}
-                    onPaste={handlePaste}
-                    onFocus={(event) => event.target.select()}
-                />
-            ))}
-        </div>
-    );
-};

package/src/stories/combobox/Combobox.module.scss

@@ -1,5 +0,0 @@
-.content {
-    background-color: pink;
-    color: white;
-    height: 2rem;
-}