paris 0.22.1 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # 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
+
+- 5173ecf: Fix scroll snap when collapsing `Accordion` and `AccordionSelect` inside a scrollable parent.
+
+  When the dropdown was opened, the user scrolled past it, and then closed it,
+  the scrollable ancestor would instantly snap to the position it would occupy
+  once the dropdown was fully closed — while the visual collapse animation was
+  still running. The cause was framer-motion's `height: 'auto' → 0` exit
+  animation thrashing the layout in the first paint frame, which the browser
+  responded to by clamping `scrollTop`.
+
+  The collapse animation now uses the CSS grid-rows trick (`grid-template-rows:
+1fr` → `0fr`) instead. Layout stays stable across the entire transition, so
+  `scrollTop` clamps smoothly in step with the animation. Duration and easing
+  match the previous behavior (800ms, `cubic-bezier(0.87, 0, 0.13, 1)`).
+
+  One small behavior change: collapsed content remains in the DOM (it was
+  previously unmounted by `AnimatePresence`). The container is marked
+  `aria-hidden` when closed and option buttons receive `tabIndex={-1}`, so
+  screen readers and keyboard navigation continue to skip hidden content.
+
+- 5173ecf: Update runtime dependencies to current semver-compatible versions and patch
+  security advisories. Notable bumps: Tiptap 3.22 → 3.23, Framer Motion 12.24
+  → 12.40, Headless UI 2.2.4 → 2.2.10, Ariakit 0.4.20 → 0.4.28, react-hot-toast
+  2.4 → 2.6, lucide-react 1.7 → 1.16, ts-deepmerge 6.0 → 6.2. No API changes
+  expected, but consumers will pick up the newer transitives on install.
+- 5173ecf: `<Text fontStyle="italic">` is now reliably italic. Mirror the pattern already
+  used by weight classes and apply `!important` to `.fontStyle-*` rules.
+  Without it, the per-kind typography classes (e.g. `.paragraphSmall { font-style: normal }`,
+  emitted when consumers define per-style `font-style` theme variables) win
+  over `.fontStyle-italic` and suppress italic on `<Text>` and anything that
+  delegates to it — notably `<Markdown>` rendering `<em>`.
+
 ## 0.22.1
 
 ### 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.1",
+    "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",
@@ -85,38 +86,38 @@
         "./utility": "./src/stories/utility/index.ts"
     },
     "dependencies": {
-        "@ariakit/react": "^0.4.20",
+        "@ariakit/react": "^0.4.28",
         "@emotion/is-prop-valid": "^1.4.0",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
         "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
-        "@fortawesome/react-fontawesome": "^0.2.2",
-        "@headlessui/react": "^2.2.4",
+        "@fortawesome/react-fontawesome": "^0.2.6",
+        "@headlessui/react": "^2.2.10",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-tooltip": "^1.2.8",
-        "@tiptap/extension-image": "^3.22.2",
-        "@tiptap/extension-link": "^3.22.2",
-        "@tiptap/extension-placeholder": "^3.22.2",
-        "@tiptap/extension-table": "^3.22.2",
-        "@tiptap/extension-table-cell": "^3.22.2",
-        "@tiptap/extension-table-header": "^3.22.2",
-        "@tiptap/extension-table-row": "^3.22.2",
-        "@tiptap/extension-task-item": "^3.22.2",
-        "@tiptap/extension-task-list": "^3.22.2",
-        "@tiptap/markdown": "^3.22.2",
-        "@tiptap/react": "^3.22.2",
-        "@tiptap/starter-kit": "^3.22.2",
+        "@tiptap/extension-image": "^3.23.6",
+        "@tiptap/extension-link": "^3.23.6",
+        "@tiptap/extension-placeholder": "^3.23.6",
+        "@tiptap/extension-table": "^3.23.6",
+        "@tiptap/extension-table-cell": "^3.23.6",
+        "@tiptap/extension-table-header": "^3.23.6",
+        "@tiptap/extension-table-row": "^3.23.6",
+        "@tiptap/extension-task-item": "^3.23.6",
+        "@tiptap/extension-task-list": "^3.23.6",
+        "@tiptap/markdown": "^3.23.6",
+        "@tiptap/react": "^3.23.6",
+        "@tiptap/starter-kit": "^3.23.6",
         "clsx": "^1.2.1",
         "font-color-contrast": "^11.1.0",
-        "framer-motion": "^12.24.10",
-        "lucide-react": "^1.7.0",
+        "framer-motion": "^12.40.0",
+        "lucide-react": "^1.16.0",
         "pte": "^0.5.0",
-        "react-hot-toast": "^2.4.1",
+        "react-hot-toast": "^2.6.0",
         "react-markdown": "^10.1.0",
         "react-tiny-popover": "^8.1.6",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.1",
-        "ts-deepmerge": "^6.0.3"
+        "ts-deepmerge": "^6.2.1"
     },
     "peerDependencies": {
         "@types/react": "^19",
@@ -127,10 +128,10 @@
         "typescript": "^5.0"
     },
     "devDependencies": {
-        "@biomejs/biome": "^2.0.6",
-        "@changesets/cli": "^2.26.1",
-        "@commitlint/cli": "^19.8.1",
-        "@commitlint/config-conventional": "^19.8.1",
+        "@biomejs/biome": "^2.4.15",
+        "@changesets/cli": "^2.31.0",
+        "@commitlint/cli": "^21",
+        "@commitlint/config-conventional": "^21",
         "@ssh/csstypes": "^1.1.0",
         "@storybook/addon-docs": "10.3.4",
         "@storybook/addon-links": "10.3.4",
@@ -139,32 +140,31 @@
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
         "@testing-library/user-event": "^14.6.1",
-        "@types/node": "^22.0.0",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/node": "^22.19.19",
+        "@types/react": "^19.2.15",
+        "@types/react-dom": "^19.2.3",
         "@vitest/browser-playwright": "4.1.2",
-        "@vitest/coverage-v8": "^4.1.2",
-        "autoprefixer": "^10.4.14",
+        "@vitest/coverage-v8": "^4.1.7",
+        "autoprefixer": "^10.5.0",
         "change-case": "^4.1.2",
-        "csstype": "^3.1.2",
-        "esbuild-sass-plugin": "^2.16.0",
-        "jsdom": "^29.0.1",
+        "csstype": "^3.2.3",
+        "jsdom": "^29.1.1",
         "jss": "^10.10.0",
         "jss-preset-default": "^10.10.0",
-        "lefthook": "^1.11.13",
-        "next": "^16.2.2",
-        "playwright": "^1.59.1",
-        "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "sass": "^1.62.1",
+        "lefthook": "^1.13.6",
+        "next": "^16.2.6",
+        "playwright": "^1.60.0",
+        "react": "^19.2.6",
+        "react-dom": "^19.2.6",
+        "sass": "^1.100.0",
         "storybook": "10.3.4",
         "storybook-dark-mode": "^5.0.0",
         "title-case": "^3.0.3",
-        "ts-node": "^10.9.1",
-        "tsup": "^7.2.0",
-        "type-fest": "^3.10.0",
-        "typescript": "^5.2.2",
-        "vite": "^7.0.0",
-        "vitest": "^4.1.2"
+        "ts-node": "^10.9.2",
+        "tsup": "^8",
+        "type-fest": "^3.13.1",
+        "typescript": "^5.9.3",
+        "vite": "^7.3.3",
+        "vitest": "^4.1.7"
     }
 }

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);
@@ -39,8 +53,23 @@
     }
 
     .dropdown {
-        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
         cursor: auto;
+        transition:
+            grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+            opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+        &.open {
+            grid-template-rows: 1fr;
+            opacity: 1;
+        }
+    }
+
+    .dropdownClip {
+        min-height: 0;
+        overflow: hidden;
     }
 
     .dropdownContent {
@@ -100,8 +129,23 @@
     }
 
     .dropdown {
-        overflow: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        opacity: 0;
         cursor: auto;
+        transition:
+            grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+            opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+        &.open {
+            grid-template-rows: 1fr;
+            opacity: 1;
+        }
+    }
+
+    .dropdownClip {
+        min-height: 0;
+        overflow: hidden;
     }
 
     .dropdownContent {

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.test.tsx

@@ -9,7 +9,9 @@ describe('Accordion', () => {
 
     it('does not show children when collapsed', () => {
         render(<Accordion title="Title">Hidden content</Accordion>);
-        expect(screen.queryByText('Hidden content')).not.toBeInTheDocument();
+        // Content is in the DOM but hidden via aria-hidden on the collapsed dropdown
+        const content = screen.getByText('Hidden content');
+        expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
     });
 
     it('expands on click to reveal children', async () => {
@@ -26,9 +28,9 @@ describe('Accordion', () => {
         expect(screen.getByText('Toggle content')).toBeInTheDocument();
 
         await user.click(button);
-        // AnimatePresence exit animation may keep element mounted briefly
         await waitFor(() => {
-            expect(screen.queryByText('Toggle content')).not.toBeInTheDocument();
+            const content = screen.getByText('Toggle content');
+            expect(content.closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
         });
     });
 
@@ -69,7 +71,7 @@ describe('Accordion', () => {
             </Accordion>,
         );
 
-        expect(screen.queryByText('Controlled content')).not.toBeInTheDocument();
+        expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'true');
 
         // Open externally
         rerender(
@@ -77,7 +79,7 @@ describe('Accordion', () => {
                 Controlled content
             </Accordion>,
         );
-        expect(screen.getByText('Controlled content')).toBeInTheDocument();
+        expect(screen.getByText('Controlled content').closest('[aria-hidden]')).toHaveAttribute('aria-hidden', 'false');
 
         // Click should call onOpenChange but not change state (controlled)
         await user.click(screen.getByRole('button'));

package/src/stories/accordion/Accordion.tsx

@@ -1,10 +1,10 @@
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { clsx } from 'clsx';
-import type { MotionProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
 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';
@@ -22,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. */
@@ -31,7 +37,7 @@ export type AccordionProps = {
     overrides?: {
         container?: ComponentPropsWithoutRef<'div'>;
         titleContainer?: ComponentPropsWithoutRef<'div'>;
-        dropdownContainer?: ComponentPropsWithoutRef<'div'> & MotionProps;
+        dropdownContainer?: ComponentPropsWithoutRef<'div'>;
         dropdownContent?: ComponentPropsWithoutRef<'div'>;
     };
 };
@@ -52,6 +58,7 @@ export const Accordion: FC<AccordionProps> = ({
     title,
     kind = 'default',
     size = 'small',
+    icon,
     isOpen,
     onOpenChange,
     children,
@@ -98,46 +105,44 @@ 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>
-            <AnimatePresence>
-                {open && (
-                    <motion.div
-                        key="content"
-                        initial="collapsed"
-                        animate="open"
-                        exit="collapsed"
-                        variants={{
-                            open: { opacity: 1, height: 'auto', y: 0 },
-                            collapsed: { opacity: 0, height: 0, y: -10 },
-                        }}
-                        transition={{
-                            duration: 0.8,
-                            ease: [0.87, 0, 0.13, 1],
-                        }}
-                        {...overrides?.dropdownContainer}
-                        className={clsx(styles.dropdown, overrides?.dropdownContainer?.className)}
+            {/*
+             * Collapse uses the CSS grid-rows trick (`1fr` → `0fr`) instead of
+             * animating `height: auto` via JS. JS height-auto animations flash an
+             * intermediate layout state on open/close that causes scrollable
+             * ancestors to clamp `scrollTop` to 0 in the first paint frame — a
+             * visible scroll-snap before the animation starts.
+             */}
+            <div
+                aria-hidden={!open}
+                {...overrides?.dropdownContainer}
+                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdownContainer?.className)}
+            >
+                {/*
+                 * dropdownClip is the grid item. It owns `min-height: 0` and
+                 * `overflow: hidden` so the parent's `grid-template-rows: 0fr`
+                 * can fully collapse to 0 height. Padding/background-color
+                 * stay on .dropdownContent (one level deeper) so they don't
+                 * extend the grid item's box when closed.
+                 */}
+                <div className={styles.dropdownClip}>
+                    <div
+                        {...overrides?.dropdownContent}
+                        className={clsx(styles.dropdownContent, styles[size], overrides?.dropdownContent?.className)}
                     >
-                        <div
-                            {...overrides?.dropdownContent}
-                            className={clsx(
-                                styles.dropdownContent,
-                                styles[size],
-                                overrides?.dropdownContent?.className,
-                            )}
-                        >
-                            <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+                        <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

package/src/stories/accordionselect/AccordionSelect.module.scss

@@ -53,10 +53,22 @@
 }
 
 .dropdown {
-    overflow: hidden;
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    transition:
+        grid-template-rows 800ms cubic-bezier(0.87, 0, 0.13, 1),
+        opacity 800ms cubic-bezier(0.87, 0, 0.13, 1);
+
+    &.open {
+        grid-template-rows: 1fr;
+        opacity: 1;
+    }
 }
 
 .dropdownContent {
+    min-height: 0;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
     padding: 0;

package/src/stories/accordionselect/AccordionSelect.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { render, screen, waitFor } from '../../test/render';
+import { render, screen, waitFor, within } from '../../test/render';
 import type { AccordionSelectOption } from './AccordionSelect';
 import { AccordionSelect } from './AccordionSelect';
 
@@ -38,7 +38,8 @@ describe('AccordionSelect', () => {
 
     it('displays the selected option in the header', () => {
         render(<AccordionSelect options={options} value="champagne" />);
-        expect(screen.getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
+        // Option text also appears in the collapsed-but-mounted dropdown list, so scope to the header
+        expect(within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
     });
 
     it('expands to show all options when header is clicked', async () => {
@@ -253,7 +254,9 @@ describe('AccordionSelect', () => {
     describe('uncontrolled selection', () => {
         it('renders with defaultValue', () => {
             render(<AccordionSelect options={options} defaultValue="champagne" />);
-            expect(screen.getByText('In an alleyway, drinking champagne')).toBeInTheDocument();
+            expect(
+                within(screen.getByRole('button')).getByText('In an alleyway, drinking champagne'),
+            ).toBeInTheDocument();
         });
 
         it('renders with placeholder when no defaultValue', () => {

package/src/stories/accordionselect/AccordionSelect.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
 import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
 import { useControllableState } from '../../helpers/useControllableState';
@@ -195,60 +194,56 @@ export const AccordionSelect: FC<AccordionSelectProps> = ({
                 </div>
             </div>
 
-            <AnimatePresence>
-                {open && (
-                    <motion.div
-                        key="content"
-                        initial="collapsed"
-                        animate="open"
-                        exit="collapsed"
-                        variants={{
-                            open: { opacity: 1, height: 'auto' },
-                            collapsed: { opacity: 0, height: 0 },
-                        }}
-                        transition={{
-                            duration: 0.8,
-                            ease: [0.87, 0, 0.13, 1],
-                        }}
-                        className={clsx(styles.dropdown, overrides?.dropdown?.className)}
-                    >
-                        <div
-                            {...overrides?.dropdownContent}
-                            className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
-                        >
-                            {options.map((option) => {
-                                const isOptionSelected = option.id === resolvedValue;
-                                return (
-                                    <button
-                                        key={option.id}
-                                        type="button"
-                                        disabled={option.disabled}
-                                        data-selected={isOptionSelected}
-                                        {...overrides?.option}
-                                        className={clsx(styles.option, overrides?.option?.className)}
-                                        onClick={() => {
-                                            setResolvedValue(option.id);
-                                            if (closeOnSelect) setOpen(false);
-                                        }}
-                                    >
-                                        <div className={styles.optionContent}>
-                                            {renderOption ? (
-                                                renderOption(option, isOptionSelected)
-                                            ) : (
-                                                <TextWhenString kind="paragraphXSmall" weight="medium">
-                                                    {option.node}
-                                                </TextWhenString>
-                                            )}
-                                        </div>
-                                        {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
-                                    </button>
-                                );
-                            })}
-                            {action}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
+            {/*
+             * Collapse animation uses the CSS grid-rows trick (`1fr` → `0fr`) instead
+             * of animating `height: auto`. JS-driven height-auto animations (e.g.
+             * framer-motion) flash an intermediate layout state on open/close that
+             * causes scrollable ancestors to clamp `scrollTop` to 0 in the first
+             * paint frame — visible as an instant scroll snap before the animation
+             * starts. The grid-rows approach keeps the layout stable across the
+             * entire transition.
+             */}
+            <div
+                {...overrides?.dropdown}
+                aria-hidden={!open}
+                className={clsx(styles.dropdown, open && styles.open, overrides?.dropdown?.className)}
+            >
+                <div
+                    {...overrides?.dropdownContent}
+                    className={clsx(styles.dropdownContent, overrides?.dropdownContent?.className)}
+                >
+                    {options.map((option) => {
+                        const isOptionSelected = option.id === resolvedValue;
+                        return (
+                            <button
+                                key={option.id}
+                                type="button"
+                                disabled={option.disabled || !open}
+                                tabIndex={open ? undefined : -1}
+                                data-selected={isOptionSelected}
+                                {...overrides?.option}
+                                className={clsx(styles.option, overrides?.option?.className)}
+                                onClick={() => {
+                                    setResolvedValue(option.id);
+                                    if (closeOnSelect) setOpen(false);
+                                }}
+                            >
+                                <div className={styles.optionContent}>
+                                    {renderOption ? (
+                                        renderOption(option, isOptionSelected)
+                                    ) : (
+                                        <TextWhenString kind="paragraphXSmall" weight="medium">
+                                            {option.node}
+                                        </TextWhenString>
+                                    )}
+                                </div>
+                                {isOptionSelected && <Icon icon={Check} size={13} className={styles.check} />}
+                            </button>
+                        );
+                    })}
+                    {action}
+                </div>
+            </div>
         </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';

package/src/stories/text/Text.module.scss

@@ -34,6 +34,6 @@ $font-styles: (
 @each $style-name,
 $style-value in $font-styles {
     .fontStyle-#{$style-name} {
-        font-style: $style-value;
+        font-style: $style-value !important;
     }
 }