paris 0.22.2 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # paris
 
+## 0.23.0
+
+### Minor Changes
+
+- 3efb4ff: Add `CodeInput` and a custom toggle icon for `Accordion`:
+
+  - **New `CodeInput` component.** A segmented numeric code / one-time-PIN input — `length` single-digit cells (default 6) with auto-advance, paste-to-fill, backspace-retreat, and arrow-key navigation. Supports `error` status, `disabled`, and a `loading` state that locks input and sweeps a validating glare across the segments (clipped to the input bounds).
+  - **`Accordion` custom toggle icon.** New `icon` prop (an `Enhancer` — an icon element or `({ size }) => ReactNode`) overrides the default plus/chevron with any icon, rotating it on open/close. Default behavior is unchanged when `icon` is omitted.
+
 ## 0.22.2
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
     "name": "paris",
     "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
     "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-    "version": "0.22.2",
+    "version": "0.23.0",
     "homepage": "https://paris.slingshot.fm",
     "license": "MIT",
     "repository": {
@@ -60,6 +60,7 @@
         "./card": "./src/stories/card/index.ts",
         "./cardbutton": "./src/stories/cardbutton/index.ts",
         "./checkbox": "./src/stories/checkbox/index.ts",
+        "./codeinput": "./src/stories/codeinput/index.ts",
         "./combobox": "./src/stories/combobox/index.ts",
         "./dialog": "./src/stories/dialog/index.ts",
         "./drawer": "./src/stories/drawer/index.ts",

package/src/stories/accordion/Accordion.module.scss

@@ -1,3 +1,17 @@
+// Shared toggle icon (used when a custom `icon` is passed): flips a
+// down-pointing icon (e.g. a chevron) up when open, the standard accordion cue.
+.toggleIcon {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px;
+    transition: transform var(--pte-animations-duration-gradual) var(--pte-animations-timing-easeInOutExpo);
+    transform: rotate(0);
+
+    &.open {
+        transform: rotate(-180deg);
+    }
+}
+
 .default {
     color: var(--pte-new-colors-contentPrimary);
     border-bottom: 1px solid var(--pte-new-colors-borderMedium);

package/src/stories/accordion/Accordion.stories.ts

@@ -1,4 +1,7 @@
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { createElement } from 'react';
 import { Accordion } from './Accordion';
 
 const meta: Meta<typeof Accordion> = {
@@ -33,3 +36,13 @@ export const CardLarge: Story = {
         size: 'large',
     },
 };
+
+export const CustomIcon: Story = {
+    args: {
+        title: 'Where were we?',
+        children: 'In an alleyway, drinking champagne.',
+        kind: 'card',
+        icon: ({ size }) =>
+            createElement(FontAwesomeIcon, { icon: faChevronDown, style: { width: size, height: size } }),
+    },
+};

package/src/stories/accordion/Accordion.tsx

@@ -3,6 +3,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { useState } from 'react';
+import { renderEnhancer } from '../../helpers/renderEnhancer';
+import type { Enhancer } from '../../types/Enhancer';
 import { ChevronRight, Icon } from '../icon';
 import { TextWhenString } from '../utility';
 import styles from './Accordion.module.scss';
@@ -20,6 +22,12 @@ export type AccordionProps = {
      * @default small
      */
     size?: 'small' | 'large';
+    /**
+     * Overrides the toggle icon. Accepts any icon (an `Icon` element or a render
+     * function `({ size }) => ReactNode`). When set, it replaces the default
+     * plus/chevron and rotates on open/close like the built-in chevron.
+     */
+    icon?: Enhancer;
     /** Whether the Accordion is open. If provided, the Accordion will be a controlled component. */
     isOpen?: boolean;
     /** A handler for when the Accordion state changes. */
@@ -50,6 +58,7 @@ export const Accordion: FC<AccordionProps> = ({
     title,
     kind = 'default',
     size = 'small',
+    icon,
     isOpen,
     onOpenChange,
     children,
@@ -96,12 +105,13 @@ export const Accordion: FC<AccordionProps> = ({
                 <TextWhenString kind="paragraphSmall" weight="medium">
                     {title}
                 </TextWhenString>
-                {kind === 'default' && (
+                {icon ? (
+                    <span className={clsx(styles.toggleIcon, open && styles.open)}>{renderEnhancer(icon, 16)}</span>
+                ) : kind === 'default' ? (
                     <div className={styles.plusIcon}>
                         <FontAwesomeIcon icon={faPlus} className={clsx(open && styles.open)} />
                     </div>
-                )}
-                {kind === 'card' && (
+                ) : (
                     <Icon icon={ChevronRight} size={16} className={clsx(styles.chevron, open && styles.open)} />
                 )}
             </div>

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

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

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

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

@@ -0,0 +1,160 @@
+'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/codeinput/index.ts

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