fix: Design audit — motion, states, focus & craft across the library

packages/raystack/components/accordion/accordion.module.css

@@ -31,11 +31,19 @@
   border-top: none;
 }
 
-.accordion-trigger:hover,
-.accordion-trigger:focus-visible {
+.accordion-trigger:hover {
   background-color: var(--rs-color-background-base-primary-hover);
 }
 
+.accordion-trigger:focus-visible {
+  outline: 2px solid var(--rs-color-border-accent-emphasis);
+  outline-offset: -2px;
+}
+
+.accordion-trigger:active:not(:disabled) {
+  background-color: var(--rs-color-background-neutral-secondary);
+}
+
 .accordion-trigger:disabled {
   pointer-events: none;
   opacity: 0.5;
@@ -80,10 +88,10 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .accordion-icon {
-    transition: transform 150ms ease-in-out;
+    transition: transform var(--rs-duration-fast) var(--rs-ease-in-out);
   }
 
   .accordion-content {
-    transition: height 150ms ease-out;
+    transition: height var(--rs-duration-fast) var(--rs-ease-out);
   }
 }

packages/raystack/components/amount/amount.module.css

@@ -0,0 +1,3 @@
+.amount {
+  font-variant-numeric: tabular-nums;
+}

packages/raystack/components/amount/amount.tsx

@@ -1,4 +1,6 @@
+import { cx } from 'class-variance-authority';
 import { type ComponentProps } from 'react';
+import styles from './amount.module.css';
 
 export interface AmountProps extends ComponentProps<'span'> {
   /**
@@ -167,6 +169,7 @@ export const Amount = ({
   groupDigits = true,
   valueInMinorUnits = true,
   hideCurrency = false,
+  className,
   ...props
 }: AmountProps) => {
   try {
@@ -265,10 +268,18 @@ export const Amount = ({
           finalBaseValue
         );
 
-    return <span {...props}>{formattedValue}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {formattedValue}
+      </span>
+    );
   } catch (error) {
     console.error('Error formatting amount:', error);
-    return <span {...props}>{String(value)}</span>;
+    return (
+      <span {...props} className={cx(styles.amount, className)}>
+        {String(value)}
+      </span>
+    );
   }
 };
 

packages/raystack/components/announcement-bar/__tests__/announcement-bar.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { AnnouncementBar } from '../announcement-bar';
 import styles from '../announcement-bar.module.css';
@@ -119,4 +119,65 @@ describe('AnnouncementBar', () => {
       expect(actionBtn).toHaveClass(styles['action-btn']);
     });
   });
+
+  describe('Dismissible', () => {
+    it('does not render a dismiss button by default', () => {
+      render(<AnnouncementBar text='Test' />);
+      expect(
+        screen.queryByRole('button', { name: 'Dismiss announcement' })
+      ).not.toBeInTheDocument();
+    });
+
+    it('renders a dismiss button when dismissible', () => {
+      render(<AnnouncementBar text='Test' dismissible />);
+      expect(
+        screen.getByRole('button', { name: 'Dismiss announcement' })
+      ).toBeInTheDocument();
+    });
+
+    it('calls onDismiss after the exit animation when controlled', () => {
+      vi.useFakeTimers();
+      try {
+        const onDismiss = vi.fn();
+        render(
+          <AnnouncementBar text='Test' dismissible onDismiss={onDismiss} />
+        );
+
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Dismiss announcement' })
+        );
+        expect(onDismiss).not.toHaveBeenCalled();
+
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+        expect(screen.getByText('Test')).toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('removes itself after the exit animation when uncontrolled', () => {
+      vi.useFakeTimers();
+      try {
+        render(<AnnouncementBar text='Uncontrolled dismiss' dismissible />);
+
+        fireEvent.click(
+          screen.getByRole('button', { name: 'Dismiss announcement' })
+        );
+
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+
+        expect(
+          screen.queryByText('Uncontrolled dismiss')
+        ).not.toBeInTheDocument();
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+  });
 });

packages/raystack/components/announcement-bar/announcement-bar.module.css

@@ -2,6 +2,7 @@
   width: 100%;
   min-height: var(--rs-space-10);
   padding: var(--rs-space-3) var(--rs-space-7);
+  position: relative; /* anchors .dismiss-btn */
 }
 
 .announcement-bar-gradient {
@@ -25,7 +26,9 @@
 .announcement-bar-normal > .icon,
 .announcement-bar-error > .icon,
 .announcement-bar-normal > .action-btn,
-.announcement-bar-error > .action-btn {
+.announcement-bar-error > .action-btn,
+.announcement-bar-normal > .dismiss-btn,
+.announcement-bar-error > .dismiss-btn {
   color: var(--rs-color-foreground-base-emphasis);
 }
 
@@ -50,4 +53,63 @@
   padding: 0;
   font: inherit;
   color: inherit;
+  border-radius: var(--rs-radius-1);
+  transition: var(--rs-transition-interactive);
+}
+
+.action-btn:hover {
+  opacity: 0.8;
+}
+
+.action-btn:active {
+  opacity: 0.64;
+}
+
+.action-btn:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+}
+
+.dismiss-btn {
+  position: absolute;
+  right: var(--rs-space-3);
+  top: 50%;
+  translate: 0 -50%;
+  color: inherit;
+}
+
+.dismiss-btn:hover:not(:disabled),
+.dismiss-btn:active:not(:disabled) {
+  background-color: transparent;
+  color: inherit;
+  opacity: 0.8;
+}
+
+.dismiss-btn:focus-visible {
+  outline: 1px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Grid-row collapse: fade + height-to-zero without measuring. */
+.collapse {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.collapse-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.collapse-closing {
+  grid-template-rows: 0fr;
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .collapse {
+    transition:
+      grid-template-rows var(--rs-duration-normal) var(--rs-ease-out),
+      opacity var(--rs-duration-normal) var(--rs-ease-out);
+  }
 }

packages/raystack/components/announcement-bar/announcement-bar.tsx

@@ -1,12 +1,17 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
-import { ReactNode } from 'react';
+import { Cross1Icon } from '@radix-ui/react-icons';
+import { cva, cx, type VariantProps } from 'class-variance-authority';
+import { ReactNode, useEffect, useState } from 'react';
 
 import { Flex } from '../flex';
+import { IconButton } from '../icon-button';
 import { Text } from '../text';
 import styles from './announcement-bar.module.css';
 
+// Must match --rs-duration-normal used by .collapse in announcement-bar.module.css.
+const DISMISS_EXIT_MS = 200;
+
 const announcementBar = cva(styles['announcement-bar'], {
   variants: {
     variant: {
@@ -27,6 +32,14 @@ type AnnouncementBarProps = VariantProps<typeof announcementBar> & {
   actionLabel?: string;
   actionIcon?: ReactNode;
   onActionClick?: () => void;
+  /** Show a dismiss (close) button. */
+  dismissible?: boolean;
+  /**
+   * Called after the dismiss animation finishes. When provided, the consumer
+   * owns removal (the bar stays mounted, collapsed). When omitted, the bar
+   * removes itself.
+   */
+  onDismiss?: () => void;
 };
 
 export const AnnouncementBar = ({
@@ -37,9 +50,26 @@ export const AnnouncementBar = ({
   actionLabel,
   actionIcon,
   onActionClick = () => {},
+  dismissible,
+  onDismiss,
   ...props
 }: AnnouncementBarProps) => {
-  return (
+  const [dismissState, setDismissState] = useState<
+    'open' | 'closing' | 'closed'
+  >('open');
+
+  useEffect(() => {
+    if (dismissState !== 'closing') return;
+    const timer = setTimeout(() => {
+      setDismissState('closed');
+      onDismiss?.();
+    }, DISMISS_EXIT_MS);
+    return () => clearTimeout(timer);
+  }, [dismissState, onDismiss]);
+
+  if (dismissState === 'closed' && !onDismiss) return null;
+
+  const bar = (
     <Flex
       className={announcementBar({ className, variant })}
       justify='center'
@@ -67,8 +97,31 @@ export const AnnouncementBar = ({
           {actionIcon && <span aria-hidden='true'>{actionIcon}</span>}
         </button>
       ) : null}
+      {dismissible && (
+        <IconButton
+          size={2}
+          className={styles['dismiss-btn']}
+          aria-label='Dismiss announcement'
+          onClick={() => setDismissState('closing')}
+        >
+          <Cross1Icon />
+        </IconButton>
+      )}
     </Flex>
   );
+
+  if (!dismissible) return bar;
+
+  return (
+    <div
+      className={cx(
+        styles.collapse,
+        dismissState !== 'open' && styles['collapse-closing']
+      )}
+    >
+      <div className={styles['collapse-inner']}>{bar}</div>
+    </div>
+  );
 };
 
 AnnouncementBar.displayName = 'AnnouncementBar';