@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/src/components/PinInput/PinInput.tsx

@@ -1,51 +1,64 @@
-import React, { useEffect, useRef } from 'react';
-import ReactPinInput from 'react-pin-input';
-import { useToken } from '@chakra-ui/react';
+'use client';
 
-import { PinInputProps } from './PinInput.types';
+import { forwardRef } from 'react';
+import { PinInput as ChakraPinInput } from '@chakra-ui/react';
+
+import { noZoomOnFocus } from '@/theme/formControls';
+import { disabledControl } from '@/utils/disabledControl';
 
-// TODO: forwardRef
-export const PinInput = ({
-  value,
-  onChange,
-  inputStyle,
-  autoFocus = true,
-  isNumberOnly = true,
-  ...rest
-}: PinInputProps) => {
-  const pinInputRef = useRef<ReactPinInput>(null);
-  const primaryColor = useToken('colors', 'primary.main')[0];
-  const grayColor = useToken('colors', 'border.default')[0];
+import { PinInputProps } from './PinInput.types';
 
-  useEffect(() => {
-    // Automatically focus the PinInput component on mount
-    if (autoFocus) pinInputRef.current?.focus();
-  }, []);
+export const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
+  function PinInput(
+    {
+      length,
+      value,
+      onChange,
+      onComplete,
+      placeholder = '',
+      inputProps,
+      ...rest
+    },
+    ref
+  ) {
+    const valueArray = Array.from({ length }, (_, i) => value?.[i] ?? '');
 
-  return (
-    <ReactPinInput
-      ref={pinInputRef} // Attach the ref to the PinInput component
-      initialValue={value}
-      onChange={onChange}
-      type={isNumberOnly ? 'numeric' : 'custom'}
-      inputMode={isNumberOnly ? 'number' : 'text'}
-      inputStyle={{
-        borderColor: grayColor,
-        borderRadius: '8px',
-        width: '48px',
-        height: '48px',
-        ...inputStyle,
-      }}
-      inputFocusStyle={{
-        borderColor: primaryColor,
-        boxShadow: `0 0 0 1px ${primaryColor}`,
-      }}
-      onComplete={onChange}
-      autoSelect
-      regexCriteria={isNumberOnly ? /^[0-9]*$/ : undefined}
-      {...rest}
-    />
-  );
-};
+    return (
+      <ChakraPinInput.Root
+        count={length}
+        value={valueArray}
+        onValueChange={(d) => onChange?.(d.valueAsString)}
+        onValueComplete={(d) => onComplete?.(d.valueAsString)}
+        placeholder={placeholder}
+        {...rest}
+      >
+        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
+        <ChakraPinInput.Control>
+          {Array.from({ length }).map((_, i) => (
+            <ChakraPinInput.Input
+              key={i}
+              index={i}
+              w={12}
+              h={12}
+              fontSize="lg"
+              borderRadius="md"
+              bg="bg.surface"
+              color="fg.default"
+              borderColor="border.control"
+              _hover={{ borderColor: 'fg.icon' }}
+              _focus={{
+                borderColor: 'primary.main',
+                boxShadow: '0 0 0 1px var(--chakra-colors-primary-main)',
+              }}
+              _invalid={{ borderColor: 'danger.solid' }}
+              _disabled={{ ...disabledControl }}
+              css={noZoomOnFocus}
+            />
+          ))}
+        </ChakraPinInput.Control>
+      </ChakraPinInput.Root>
+    );
+  }
+);
 
 PinInput.displayName = 'PinInput';

package/src/components/PinInput/PinInput.types.ts

@@ -1,27 +1,19 @@
-// TODO: This interface is copied from the react-pin-input package. Find a more scalable way to import this interface if it gets updated
-interface ReactPinInputProps {
-  length: number;
-  initialValue?: number | string;
-  type?: 'numeric' | 'custom';
-  inputMode?: string;
-  secret?: boolean;
-  secretDelay?: number;
-  disabled?: boolean;
-  focus?: boolean;
-  onChange?: (value: string, index: number) => void;
-  onComplete?: (value: string, index: number) => void;
-  style?: React.CSSProperties;
-  inputStyle?: React.CSSProperties;
-  inputFocusStyle?: React.CSSProperties;
-  validate?: (value: string) => string;
-  autoSelect?: boolean;
-  regexCriteria?: any;
-  ariaLabel?: string;
-  placeholder?: string;
-}
+import type { InputHTMLAttributes } from 'react';
+import type { PinInput as ChakraPinInput } from '@chakra-ui/react';
 
-export type PinInputProps = ReactPinInputProps & {
+export interface PinInputProps extends Omit<
+  ChakraPinInput.RootProps,
+  | 'count'
+  | 'value'
+  | 'defaultValue'
+  | 'onValueChange'
+  | 'onValueComplete'
+  | 'onChange'
+  | 'children'
+> {
+  length: number;
   value?: string;
-  autoFocus?: boolean;
-  isNumberOnly?: boolean;
-};
+  onChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  inputProps?: InputHTMLAttributes<HTMLInputElement>;
+}

package/src/components/Popover/Popover.stories.tsx

@@ -23,7 +23,7 @@ export const Default: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Open Popover</Button>
+        <Button variant="secondary">Open Popover</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -44,7 +44,7 @@ export const WithForm: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Settings</Button>
+        <Button variant="secondary">Settings</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -74,7 +74,7 @@ export const SmallFontSize: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Compact (12px)</Button>
+        <Button variant="secondary">Compact (12px)</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -94,7 +94,7 @@ export const LargeFontSize: Story = {
   render: args => (
     <Popover {...args}>
       <Popover.Trigger asChild>
-        <Button variant="outline">Spacious (18px)</Button>
+        <Button variant="secondary">Spacious (18px)</Button>
       </Popover.Trigger>
       <Popover.Content>
         <Popover.Arrow>
@@ -123,7 +123,7 @@ export const Comparison: Story = {
       {(['12px', '14px', '18px'] as const).map(size => (
         <Popover key={size} baseFontSize={size} open>
           <Popover.Trigger asChild>
-            <Button variant="outline" size="sm">{size}</Button>
+            <Button variant="secondary" size="sm">{size}</Button>
           </Popover.Trigger>
           <Popover.Content>
             <Popover.Arrow>

package/src/components/Popover/PopoverContent.tsx

@@ -17,6 +17,9 @@ export const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
           ref={ref}
           borderWidth="1px"
           borderColor="border.subtle"
+          // Scales from its arrow's origin on the recipe's keyframes, on our
+          // clock — see `presence-anchored`.
+          animationStyle="presence-anchored"
           {...props}
         >
           <ScaledContext fontSize={baseFontSize}>{children}</ScaledContext>

package/src/components/ProgressBar/ProgressBar.indeterminate.test.tsx

@@ -0,0 +1,55 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { ProgressBar } from './ProgressBar';
+
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+const rulesFor = (el: Element) => {
+  const css = Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .join('\n');
+  return el.className
+    .split(' ')
+    .filter((c) => c.startsWith('css-'))
+    .flatMap((c) => [
+      ...css.matchAll(new RegExp(`\\.${c}[^{]*\\{([^}]*)\\}`, 'g')),
+    ])
+    .map((m) => m[1])
+    .join('\n');
+};
+
+const range = (container: HTMLElement) =>
+  container.querySelector('[data-part="range"]')!;
+
+describe('ProgressBar indeterminate', () => {
+  it('keeps the determinate bar on a transition, not a loop', () => {
+    const { container } = wrap(<ProgressBar value={40} />);
+    const rules = rulesFor(range(container));
+
+    expect(rules).toContain('transition-property:width');
+    expect(rules).not.toContain('animation-iteration-count:infinite');
+  });
+
+  it('sweeps a solid block across the track when there is no value', () => {
+    const { container } = wrap(<ProgressBar indeterminate />);
+    const rules = rulesFor(range(container));
+
+    expect(rules).toContain('animation-name:indeterminate');
+    expect(rules).toContain('animation-iteration-count:infinite');
+    // `translate`, so a loop that may run for the length of a slow request
+    // stays on the compositor. Chakra's own indeterminate styling animates
+    // `left`, which lays out every frame.
+    expect(rules).toContain('background-image:none');
+  });
+
+  it('spells the missing value the way Chakra Progress expects', () => {
+    // `null`, not `undefined` — `undefined` reads as uncontrolled and the bar
+    // falls back to its default value instead of going indeterminate.
+    const { container } = wrap(<ProgressBar indeterminate value={70} />);
+    expect(range(container).getAttribute('data-state')).toBe('indeterminate');
+  });
+});

package/src/components/ProgressBar/ProgressBar.styles.ts

@@ -1,5 +1,31 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
 import { ProgressBarSize } from './ProgressBar.types';
 
+/**
+ * A bar sliding across its track for work of unknown length — the determinate
+ * bar's counterpart, where there is no percentage to show.
+ *
+ * Local rather than shared: an indeterminate bar is this component, and the
+ * keyframe travels a distance that only makes sense inside this track.
+ *
+ * `linear`, like the spinner: this one also restarts from its own start, and an
+ * eased sweep pauses at the edge of the track every cycle, which reads as the
+ * request having stalled there.
+ *
+ * Under reduced motion the bar stops travelling and sits in the track. That
+ * loses the "still working" signal, which is the cost — but a bar repeatedly
+ * crossing the viewport is the highest-risk motion we have, and the surrounding
+ * UI (a disabled control, a status line) is where that signal belongs anyway.
+ */
+export const indeterminateSweep: SystemStyleObject = {
+  animationName: 'indeterminate',
+  animationDuration: 'motion.loop.sweep',
+  animationTimingFunction: 'linear',
+  animationIterationCount: 'infinite',
+  _motionReduce: { animationName: 'none' },
+};
+
 export const baseStyles = {
   borderRadius: 'full',
   height: 4, // Use direct spacing value instead of theme.spacing[4]

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,29 +1,56 @@
 import { Progress as ChakraProgress } from '@chakra-ui/react';
 
-import { sizeStyles } from './ProgressBar.styles';
+import { indeterminateSweep, sizeStyles } from './ProgressBar.styles';
 import { ProgressBarProps } from './ProgressBar.types';
 
 export const ProgressBar = ({
   filledTrackColor = 'primary.main',
   value,
   size = 'md',
+  indeterminate = false,
   ...rest
 }: ProgressBarProps) => {
   const styles = sizeStyles[size];
 
   return (
-    <ChakraProgress.Root value={value} {...rest}>
+    // `null` is how Chakra's Progress spells "no value", and it is what puts
+    // the range into its `_indeterminate` state — passing the prop through as a
+    // boolean keeps that spelling out of every call site.
+    <ChakraProgress.Root value={indeterminate ? null : value} {...rest}>
       <ChakraProgress.Track
-        bgColor="bg.muted"
+        bgColor="bg.track"
         height={styles.height}
         borderRadius={styles.borderRadius}
         overflow="hidden"
       >
-        <ChakraProgress.Range
-          bgColor={filledTrackColor}
-          borderRadius={styles.borderRadius}
-          transition="width 0.3s ease-in-out"
-        />
+        {indeterminate ? (
+          <ChakraProgress.Range
+            bgColor={filledTrackColor}
+            borderRadius={styles.borderRadius}
+            // Chakra's own `_indeterminate` styling animates `left` and paints
+            // the bar as a transparent-to-solid-to-transparent gradient, which
+            // reads as a smear rather than a bar. Overridden here to a solid
+            // block that travels on `translate` — a compositor-only property,
+            // so a loop that may run for the whole length of a slow request
+            // costs no layout.
+            width="40%"
+            minWidth="unset"
+            backgroundImage="none"
+            css={indeterminateSweep}
+          />
+        ) : (
+          <ChakraProgress.Range
+            bgColor={filledTrackColor}
+            borderRadius={styles.borderRadius}
+            // `ease-in-out` made the bar start slowly on every update, as if it
+            // were accelerating from rest — but progress only moves one way and
+            // arrives in discrete jumps, so easing IN is a fiction. `emphasized`
+            // covers most of the distance immediately and settles, which reads as
+            // the bar catching up to a value that already changed.
+            animationStyle="travel"
+            transitionProperty="width"
+          />
+        )}
       </ChakraProgress.Track>
     </ChakraProgress.Root>
   );

package/src/components/ProgressBar/ProgressBar.types.ts

@@ -5,4 +5,14 @@ export type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface ProgressBarProps extends ChakraProgressRootProps {
   filledTrackColor?: string;
   size?: ProgressBarSize;
+  /**
+   * Work whose length is not known yet: the bar slides across the track instead
+   * of filling to a percentage. `value` is ignored while this is set.
+   *
+   * Reach for it only when there is genuinely no denominator. A determinate bar
+   * that jumps 0 → 60 → 100 still tells the reader how much is left; an
+   * indeterminate one only says "something is happening", which a `Spinner`
+   * says in less space.
+   */
+  indeterminate?: boolean;
 }

package/src/components/Pulse/Pulse.remount.test.tsx

@@ -0,0 +1,179 @@
+import { useState } from 'react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { system } from '../../theme';
+import { Pulse } from '../Pulse';
+import { Shake } from '../Shake';
+
+/**
+ * `Pulse` and `Shake` replay **without remounting**, and these hold that down.
+ *
+ * The first version restarted the animation by changing the React `key`, which
+ * is the cheapest way to replay a CSS animation and also throws away the whole
+ * subtree. Measured cost: focus landed on `<body>`, uncontrolled inputs reset,
+ * and any child animation mid-flight started over. `Shake` made it worst — it
+ * fires on a refusal, so it took the keyboard away from the person who had just
+ * been told no.
+ *
+ * Now the *name* changes instead: two byte-identical keyframes, alternating by
+ * play count. CSS restarts an animation whose name changed, and the DOM is left
+ * alone.
+ */
+const wrap = (ui: React.ReactNode) =>
+  render(<ChakraProvider value={system}>{ui}</ChakraProvider>);
+
+describe('trigger-driven replay and child state', () => {
+  it('keeps a controlled child intact across a replay', () => {
+    // The ordinary case: the value lives above the wrapper, so a remount below
+    // it cannot lose anything.
+    const Harness = () => {
+      const [count, setCount] = useState(0);
+      const [value, setValue] = useState('');
+      return (
+        <>
+          <button onClick={() => setCount((c) => c + 1)}>bump</button>
+          <Pulse trigger={count}>
+            <input
+              aria-label="controlled"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </Pulse>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    const input = screen.getByLabelText('controlled');
+    fireEvent.change(input, { target: { value: 'typed' } });
+    expect(input).toHaveValue('typed');
+
+    fireEvent.click(screen.getByRole('button', { name: 'bump' }));
+
+    expect(screen.getByLabelText('controlled')).toHaveValue('typed');
+  });
+
+  it('keeps an uncontrolled child intact across a replay', () => {
+    // The regression this replaced: a `key`-driven replay reset it.
+    const Harness = () => {
+      const [count, setCount] = useState(0);
+      return (
+        <>
+          <button onClick={() => setCount((c) => c + 1)}>bump</button>
+          <Pulse trigger={count}>
+            <input aria-label="uncontrolled" defaultValue="" />
+          </Pulse>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    fireEvent.change(screen.getByLabelText('uncontrolled'), {
+      target: { value: 'typed' },
+    });
+    expect(screen.getByLabelText('uncontrolled')).toHaveValue('typed');
+
+    fireEvent.click(screen.getByRole('button', { name: 'bump' }));
+
+    expect(screen.getByLabelText('uncontrolled')).toHaveValue('typed');
+  });
+
+  it('keeps keyboard focus inside the subtree across a replay', () => {
+    // The sharpest form of the same regression, and the reason it is a defect
+    // rather than a documented cost: `Shake` fires on a rejected answer, so a
+    // remount here moves the keyboard out from under someone mid-interaction.
+    // Their next Tab would start from the top of the page.
+    const Harness = () => {
+      const [n, setN] = useState(0);
+      return (
+        <>
+          <button onClick={() => setN((c) => c + 1)}>reject</button>
+          <Shake trigger={n}>
+            <input aria-label="answer" />
+          </Shake>
+        </>
+      );
+    };
+
+    wrap(<Harness />);
+    const input = screen.getByLabelText('answer');
+    input.focus();
+
+    fireEvent.click(screen.getByRole('button', { name: 'reject' }));
+
+    expect(document.activeElement).toBe(screen.getByLabelText('answer'));
+  });
+
+  it('replays by changing the animation name, not by remounting', () => {
+    // The mechanism itself, so a later "simplification" back to a key fails.
+    const Harness = ({ n }: { n: number }) => (
+      <Pulse trigger={n}>
+        <span>value</span>
+      </Pulse>
+    );
+
+    const { container, rerender } = wrap(<Harness n={0} />);
+    const node = container.firstElementChild;
+
+    const names: string[] = [];
+    for (const n of [1, 2, 3]) {
+      rerender(
+        <ChakraProvider value={system}>
+          <Harness n={n} />
+        </ChakraProvider>
+      );
+      names.push(getComputedStyle(container.firstElementChild!).animationName);
+    }
+
+    // Same DOM node throughout — nothing was thrown away.
+    expect(container.firstElementChild).toBe(node);
+    // And a different name each time, which is what restarts it.
+    expect(names[0]).not.toBe(names[1]);
+    expect(names[1]).not.toBe(names[2]);
+  });
+
+  it('does not remount before the first trigger change', () => {
+    // The first-render latch: a value already set on mount is not an event, so
+    // nothing replays and nothing is discarded.
+    const Harness = ({ trigger }: { trigger: number }) => (
+      <Shake trigger={trigger}>
+        <input aria-label="stable" defaultValue="" />
+      </Shake>
+    );
+
+    const { rerender } = wrap(<Harness trigger={7} />);
+    fireEvent.change(screen.getByLabelText('stable'), {
+      target: { value: 'kept' },
+    });
+
+    // Same trigger, ordinary re-render — must not disturb the subtree.
+    rerender(
+      <ChakraProvider value={system}>
+        <Harness trigger={7} />
+      </ChakraProvider>
+    );
+
+    expect(screen.getByLabelText('stable')).toHaveValue('kept');
+  });
+
+  it('renders children that change without a new trigger', () => {
+    // The failure mode `SwapTransition` had. These two hold no copy of the
+    // subtree, so they never had it — pinned so a future "optimisation" that
+    // caches children cannot introduce it here.
+    const Harness = () => {
+      const [picked, setPicked] = useState<string | null>(null);
+      return (
+        <Shake trigger={0}>
+          <button onClick={() => setPicked('b')}>{picked ?? 'nothing'}</button>
+        </Shake>
+      );
+    };
+
+    wrap(<Harness />);
+    fireEvent.click(screen.getByRole('button', { name: 'nothing' }));
+
+    expect(screen.getByRole('button', { name: 'b' })).toBeInTheDocument();
+  });
+});

package/src/components/Pulse/Pulse.stories.tsx

@@ -0,0 +1,74 @@
+import { HStack, Stack } from '@chakra-ui/react';
+import { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { Badge } from '../Badge';
+import { Button } from '../Button';
+import { Tag } from '../Tag';
+import { Subtext } from '../Typography';
+import { Pulse } from '.';
+
+/**
+ * Pops once whenever `trigger` changes — for drawing the eye to a value that
+ * just updated. Pure CSS: a changed `key` is a new element, and a new element
+ * runs its animation from the top.
+ */
+const meta = {
+  title: 'Components/Motion/Pulse',
+  component: Pulse,
+  args: { trigger: 0 },
+} satisfies Meta<typeof Pulse>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** The first render never pops — a counter that mounts at 12 has not just become 12. */
+export const Default: Story = {
+  render: () => {
+    const [balance, setBalance] = useState(1250);
+
+    return (
+      <Stack gap={4} align="flex-start">
+        <Button size="sm" onClick={() => setBalance((b) => b + 50)}>
+          +50 크레딧
+        </Button>
+        <Pulse trigger={balance}>
+          <Tag>
+            {balance.toLocaleString()} 크레딧
+          </Tag>
+        </Pulse>
+        <Subtext color="fg.muted" mb={0}>
+          마운트할 때는 조용하고, 값이 바뀔 때만 튑니다.
+        </Subtext>
+      </Stack>
+    );
+  },
+};
+
+/** `peak` is amplitude. `overshoot` is what makes even 1.12 readable. */
+export const Peak: Story = {
+  render: () => {
+    const [run, setRun] = useState(0);
+
+    return (
+      <Stack gap={5} align="flex-start">
+        <Button size="sm" onClick={() => setRun((r) => r + 1)}>
+          셋 동시 재생
+        </Button>
+        <HStack gap={8}>
+          {[1.12, 1.3, 1.6].map((peak) => (
+            <Stack key={peak} gap={2} align="center">
+              <Pulse trigger={run} peak={peak}>
+                <Badge variant="success">완료</Badge>
+              </Pulse>
+              <Subtext fontFamily="mono" fontSize="2xs" color="fg.muted" mb={0}>
+                {peak}
+              </Subtext>
+            </Stack>
+          ))}
+        </HStack>
+      </Stack>
+    );
+  },
+};

package/src/components/Pulse/Pulse.styles.ts

@@ -0,0 +1,42 @@
+import type { SystemStyleObject } from '@chakra-ui/react';
+
+/**
+ * The one-shot "look here" pop.
+ *
+ * Lives here rather than in the shared vocabulary because a there-and-back is
+ * not a transition at all — a transition interpolates A to B, and this ends
+ * where it started. It needs the midpoint that only a keyframe has, so the
+ * `pulse-pop` keyframe is global (all `@keyframes` are) and this composition
+ * is local.
+ *
+ * `motion.slow` and `overshoot`: the same pair FactChat's framer-motion `Pulse`
+ * used, which is the point — the port changes the *mechanism*, not the feel.
+ * Overshoot is what makes a 12% scale readable at all; on `standard` the same
+ * amplitude reads as a rendering hiccup.
+ *
+ * Reduced motion removes it outright rather than shortening it. A pop exists to
+ * be noticed, and there is nothing left of one that is not; the value it draws
+ * the eye to has already changed by the time this plays, so nothing is lost but
+ * the emphasis.
+ */
+/**
+ * A function of the play count, because the *name* is what restarts it.
+ *
+ * A CSS animation replays when `animation-name` changes, so alternating between
+ * two byte-identical keyframes restarts the pop on every trigger without
+ * touching the DOM. The earlier version restarted it by changing the React
+ * `key`, which remounts the subtree — and a remount throws away whatever was
+ * inside it: the user's focus (measured: it lands on `<body>`), any uncontrolled
+ * input state, and any child animation mid-flight. A pop that draws the eye to a
+ * changed value must not also move the keyboard out from under someone, and
+ * `Shake` is worse on this axis than `Pulse` is: it fires on a rejected answer,
+ * which is exactly when a keyboard user is mid-interaction.
+ */
+export const pulsePop = (play: number): SystemStyleObject => ({
+  animationName: play % 2 === 0 ? 'pulse-pop-alt' : 'pulse-pop',
+  animationDuration: 'motion.slow',
+  animationTimingFunction: 'overshoot',
+  animationFillMode: 'both',
+  transformOrigin: 'center',
+  _motionReduce: { animationName: 'none' },
+});