@sovereignfs/ui 0.41.0 → 0.45.0

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '../Table/Table';
+import { Icon } from '../Icon/Icon';
+import { EmptyState } from '../EmptyState/EmptyState';
+import styles from './DataTable.module.css';
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface DataTableColumn<T> {
+  key: string;
+  header: string;
+  sortable?: boolean;
+  /** Cell content. Defaults to String(row[key]) when omitted. */
+  render?: (row: T) => ReactNode;
+  /** Value compared when sorting by this column. Defaults to row[key].
+   * Required if `key` isn't a property on T (a computed/joined column). */
+  sortValue?: (row: T) => string | number;
+  align?: 'start' | 'end';
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  data: T[];
+  getRowKey: (row: T) => string;
+  /** Initial sort — uncontrolled after mount, like Table itself has no
+   * externally-controlled state. */
+  defaultSortKey?: string;
+  defaultSortDirection?: SortDirection;
+  emptyMessage?: string;
+  className?: string;
+}
+
+function compareValues(a: string | number, b: string | number): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}
+
+/**
+ * DataTable — sortable table built on Table's own primitives (no
+ * virtualization or filtering — those stay out of scope, matching Table's
+ * own "not a data grid" boundary). Column-driven: pass `columns` + `data`
+ * rather than composing `<TableRow>`/`<TableCell>` by hand.
+ *
+ * Sort state is internal (uncontrolled) and click-cycles
+ * ascending → descending → unsorted for a sortable column, mirroring the
+ * "toggle → toggle → clear" pattern most sortable tables use rather than
+ * being permanently stuck in whichever direction was clicked last.
+ */
+export function DataTable<T>({
+  columns,
+  data,
+  getRowKey,
+  defaultSortKey,
+  defaultSortDirection = 'asc',
+  emptyMessage = 'No results.',
+  className,
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = useState<string | undefined>(defaultSortKey);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(defaultSortDirection);
+
+  const sortColumn = columns.find((c) => c.key === sortKey);
+
+  const sortedData = useMemo(() => {
+    if (!sortColumn) return data;
+    const getValue =
+      sortColumn.sortValue ??
+      ((row: T) => (row as Record<string, unknown>)[sortColumn.key] as string | number);
+    const sorted = [...data].sort((a, b) => compareValues(getValue(a), getValue(b)));
+    return sortDirection === 'asc' ? sorted : sorted.reverse();
+  }, [data, sortColumn, sortDirection]);
+
+  function handleSort(column: DataTableColumn<T>) {
+    if (!column.sortable) return;
+    if (sortKey !== column.key) {
+      setSortKey(column.key);
+      setSortDirection('asc');
+    } else if (sortDirection === 'asc') {
+      setSortDirection('desc');
+    } else {
+      setSortKey(undefined);
+      setSortDirection('asc');
+    }
+  }
+
+  if (data.length === 0) {
+    return <EmptyState heading={emptyMessage} />;
+  }
+
+  return (
+    <Table className={className}>
+      <TableHead>
+        <TableRow>
+          {columns.map((column) => {
+            const isSorted = sortKey === column.key;
+            const ariaSort = !column.sortable
+              ? undefined
+              : isSorted
+                ? sortDirection === 'asc'
+                  ? 'ascending'
+                  : 'descending'
+                : 'none';
+            return (
+              <TableHeaderCell
+                key={column.key}
+                aria-sort={ariaSort}
+                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
+              >
+                {column.sortable ? (
+                  <button
+                    type="button"
+                    className={styles.sortButton}
+                    onClick={() => handleSort(column)}
+                  >
+                    {column.header}
+                    <span className={styles.sortIcon}>
+                      {isSorted && (
+                        <Icon
+                          name={sortDirection === 'asc' ? 'chevron-up' : 'chevron-down'}
+                          size="sm"
+                          aria-hidden
+                        />
+                      )}
+                    </span>
+                  </button>
+                ) : (
+                  column.header
+                )}
+              </TableHeaderCell>
+            );
+          })}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {sortedData.map((row) => (
+          <TableRow key={getRowKey(row)}>
+            {columns.map((column) => (
+              <TableCell
+                key={column.key}
+                style={column.align === 'end' ? { textAlign: 'end' } : undefined}
+              >
+                {column.render
+                  ? column.render(row)
+                  : String((row as Record<string, unknown>)[column.key] ?? '')}
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

package/src/components/DataTable/__tests__/DataTable.test.tsx

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from 'vitest';
+import { cleanup, fireEvent, render, screen, within } from '@testing-library/react';
+import { DataTable, type DataTableColumn } from '../DataTable';
+
+afterEach(cleanup);
+
+interface Plugin {
+  id: string;
+  name: string;
+  installs: number;
+}
+
+const data: Plugin[] = [
+  { id: 'a', name: 'Charlie', installs: 12 },
+  { id: 'b', name: 'Alpha', installs: 30 },
+  { id: 'c', name: 'Bravo', installs: 5 },
+];
+
+const columns: DataTableColumn<Plugin>[] = [
+  { key: 'name', header: 'Name', sortable: true },
+  { key: 'installs', header: 'Installs', sortable: true, align: 'end' },
+];
+
+function rowsText() {
+  return screen
+    .getAllByRole('row')
+    .slice(1)
+    .map((row) => within(row).getAllByRole('cell')[0]?.textContent);
+}
+
+describe('DataTable', () => {
+  it('renders a row per data item and a header per column', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getAllByRole('row')).toHaveLength(4); // 1 header + 3 body rows
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeDefined();
+    expect(screen.getByRole('columnheader', { name: 'Installs' })).toBeDefined();
+  });
+
+  it('renders cell values from row[key] by default', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getByText('Charlie')).toBeDefined();
+    expect(screen.getByText('30')).toBeDefined();
+  });
+
+  it('uses a custom render function when provided', () => {
+    const withRender: DataTableColumn<Plugin>[] = [
+      { key: 'name', header: 'Name' },
+      { key: 'installs', header: 'Installs', render: (row) => `${row.installs} installs` },
+    ];
+    render(<DataTable columns={withRender} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.getByText('30 installs')).toBeDefined();
+  });
+
+  it('shows an empty state instead of a table when data is empty', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={[]}
+        getRowKey={(row) => row.id}
+        emptyMessage="No plugins"
+      />,
+    );
+    expect(screen.queryByRole('table')).toBeNull();
+    expect(screen.getByText('No plugins')).toBeDefined();
+  });
+
+  it('non-sortable columns render as plain text, not a button', () => {
+    const withPlain: DataTableColumn<Plugin>[] = [{ key: 'name', header: 'Name' }];
+    render(<DataTable columns={withPlain} data={data} getRowKey={(row) => row.id} />);
+    expect(screen.queryByRole('button', { name: 'Name' })).toBeNull();
+    expect(screen.getByRole('columnheader', { name: 'Name' }).getAttribute('aria-sort')).toBeNull();
+  });
+
+  it('clicking a sortable header sorts ascending, then descending, then clears', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
+    const button = within(nameHeader).getByRole('button');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Alpha', 'Bravo', 'Charlie']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('ascending');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Charlie', 'Bravo', 'Alpha']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('descending');
+
+    fireEvent.click(button);
+    expect(rowsText()).toEqual(['Charlie', 'Alpha', 'Bravo']);
+    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
+  });
+
+  it('sorts numeric columns numerically, not lexicographically', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
+    fireEvent.click(within(installsHeader).getByRole('button'));
+    expect(rowsText()).toEqual(['Bravo', 'Charlie', 'Alpha']); // 5, 12, 30
+  });
+
+  it('switching the sort column resets to ascending', () => {
+    render(<DataTable columns={columns} data={data} getRowKey={(row) => row.id} />);
+    const nameHeader = screen.getByRole('columnheader', { name: 'Name' });
+    const installsHeader = screen.getByRole('columnheader', { name: 'Installs' });
+    fireEvent.click(within(nameHeader).getByRole('button'));
+    fireEvent.click(within(nameHeader).getByRole('button')); // now descending
+    fireEvent.click(within(installsHeader).getByRole('button'));
+    expect(installsHeader.getAttribute('aria-sort')).toBe('ascending');
+    expect(nameHeader.getAttribute('aria-sort')).toBe('none');
+  });
+
+  it('respects defaultSortKey/defaultSortDirection', () => {
+    render(
+      <DataTable
+        columns={columns}
+        data={data}
+        getRowKey={(row) => row.id}
+        defaultSortKey="installs"
+        defaultSortDirection="desc"
+      />,
+    );
+    expect(rowsText()).toEqual(['Alpha', 'Charlie', 'Bravo']); // 30, 12, 5
+  });
+});

package/src/components/DatePicker/DatePicker.module.css

@@ -1,5 +1,7 @@
 /* DatePicker — trigger styled to match Input's height/border/radius/focus
- * ring for visual consistency as a form field. */
+ * ring for visual consistency as a form field. Kept in sync with Input's
+ * own sizing by hand (36px rendered height via explicit height +
+ * border-box, not a literal reuse of Input). */
 
 .trigger {
   display: flex;
@@ -7,7 +9,9 @@
   justify-content: space-between;
   gap: var(--sv-space-2);
   width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
+  height: 36px;
+  box-sizing: border-box;
+  padding: 4px var(--sv-space-3);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);
   line-height: 1.5;

package/src/components/Dialog/Dialog.module.css

@@ -79,6 +79,9 @@
   }
 }
 
+/* Sizing audit: reviewed padding/radius against this scale's other
+   surfaces. --sv-radius-lg (shared with Card via .panel below) left
+   unchanged for the same blast-radius reason as Card.module.css. */
 .content {
   flex: 1 1 auto;
   overflow-y: auto;

package/src/components/HoverCard/HoverCard.module.css

@@ -0,0 +1,3 @@
+.root {
+  display: inline-flex;
+}

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HoverCard } from './HoverCard';
+import { Avatar } from '../Avatar/Avatar';
+
+const meta = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Hover-triggered popover on desktop, tap-to-toggle on touch. Built on Popover for positioning/collision detection — this only adds hover-intent timing and the touch fallback. Opens on keyboard focus too.',
+      },
+    },
+  },
+  args: { trigger: <span />, children: null, 'aria-label': 'Preview' },
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const Default: Story = {
+  render: () => (
+    <HoverCard
+      aria-label="User preview"
+      trigger={
+        <button
+          type="button"
+          style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
+        >
+          <Avatar name="Jane Smith" size="sm" />
+        </button>
+      }
+    >
+      <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
+        <div style={{ fontWeight: 600 }}>Jane Smith</div>
+        <div style={{ color: 'var(--sv-color-text-muted)' }}>jane@example.com</div>
+      </div>
+    </HoverCard>
+  ),
+};
+
+export const WithLink: Story = {
+  render: () => (
+    <p style={{ fontSize: 14 }}>
+      Assigned to{' '}
+      <HoverCard
+        aria-label="Assignee preview"
+        trigger={
+          <a href="/console/users/jane-smith" style={{ color: 'var(--sv-color-text-primary)' }}>
+            Jane Smith
+          </a>
+        }
+      >
+        <div style={{ padding: 'var(--sv-space-3)', fontSize: 14 }}>
+          <div style={{ fontWeight: 600 }}>Jane Smith</div>
+          <div style={{ color: 'var(--sv-color-text-muted)' }}>12 tasks completed this month</div>
+        </div>
+      </HoverCard>
+      .
+    </p>
+  ),
+};

package/src/components/HoverCard/HoverCard.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import { Popover } from '../Popover/Popover';
+import styles from './HoverCard.module.css';
+
+export interface HoverCardProps {
+  /** The element that opens the card — cloned with hover/focus handlers
+   * (desktop) or a tap handler (touch). */
+  trigger: ReactElement;
+  children: ReactNode;
+  align?: 'left' | 'right';
+  width?: number | 'trigger';
+  'aria-label': string;
+}
+
+const OPEN_DELAY_MS = 400;
+const CLOSE_DELAY_MS = 150;
+
+/** Whether the primary pointer can hover. Distinct from viewport-width-based
+ * mobile detection: a touchscreen laptop with a mouse as its primary
+ * pointer should still get real hover behavior, and a large-viewport tablet
+ * with only touch should not — viewport width doesn't capture that, `(hover:
+ * hover)` does, matching the pointer-based gating this design system already
+ * uses in CSS (e.g. Button/Checkbox's touch-target expansion). Defaults to
+ * `true`: this only changes which event handlers get attached, not the
+ * initial DOM shape, so there's no hydration-mismatch risk to guard against
+ * the way `useIsMobile` does. */
+function useHoverCapable(): boolean {
+  const [hoverCapable, setHoverCapable] = useState(true);
+
+  useEffect(() => {
+    const mql = window.matchMedia('(hover: hover)');
+    setHoverCapable(mql.matches);
+    function handleChange(e: MediaQueryListEvent) {
+      setHoverCapable(e.matches);
+    }
+    mql.addEventListener('change', handleChange);
+    return () => mql.removeEventListener('change', handleChange);
+  }, []);
+
+  return hoverCapable;
+}
+
+/**
+ * HoverCard — hover-triggered popover on desktop, tap-to-toggle on touch.
+ *
+ * Built on `Popover` rather than reimplementing positioning/collision
+ * detection: this only adds the hover-intent open/close timing (avoids
+ * flicker on an accidental mouse pass-over, and gives the pointer time to
+ * travel from the trigger to the card itself across the gap between them)
+ * and the touch fallback. Also opens on keyboard focus and closes on blur —
+ * a hover-only trigger is a WCAG failure, since keyboard users can't hover.
+ */
+export function HoverCard({
+  trigger,
+  children,
+  align,
+  width,
+  'aria-label': ariaLabel,
+}: HoverCardProps) {
+  const [open, setOpen] = useState(false);
+  const hoverCapable = useHoverCapable();
+  const openTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const closeTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  function scheduleOpen() {
+    clearTimeout(closeTimer.current);
+    openTimer.current = setTimeout(() => setOpen(true), OPEN_DELAY_MS);
+  }
+
+  function scheduleClose() {
+    clearTimeout(openTimer.current);
+    closeTimer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
+  }
+
+  function cancelScheduledClose() {
+    clearTimeout(closeTimer.current);
+  }
+
+  const triggerHandlers = hoverCapable
+    ? {
+        onMouseEnter: scheduleOpen,
+        onMouseLeave: scheduleClose,
+        onFocus: () => setOpen(true),
+        onBlur: scheduleClose,
+      }
+    : { onClick: () => setOpen((o) => !o) };
+
+  const wrappedTrigger = cloneElement(trigger, triggerHandlers);
+
+  return (
+    <div
+      className={styles.root}
+      onMouseEnter={hoverCapable ? cancelScheduledClose : undefined}
+      onMouseLeave={hoverCapable ? scheduleClose : undefined}
+    >
+      <Popover
+        trigger={wrappedTrigger}
+        open={open}
+        onClose={() => setOpen(false)}
+        align={align}
+        width={width}
+        aria-label={ariaLabel}
+      >
+        {children}
+      </Popover>
+    </div>
+  );
+}

package/src/components/HoverCard/__tests__/HoverCard.test.tsx

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { HoverCard } from '../HoverCard';
+
+let matches = true;
+
+function installMatchMedia() {
+  vi.stubGlobal(
+    'matchMedia',
+    vi.fn().mockImplementation((query: string) => ({
+      matches,
+      media: query,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  );
+}
+
+describe('HoverCard', () => {
+  beforeEach(() => {
+    matches = true; // hover-capable by default
+    installMatchMedia();
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.runOnlyPendingTimers();
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    cleanup();
+  });
+
+  it('does not open immediately on mouse enter (hover-intent delay)', () => {
+    render(
+      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
+        Card content
+      </HoverCard>,
+    );
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.queryByText('Card content')).toBeNull();
+  });
+
+  it('opens after the hover-intent delay elapses', () => {
+    render(
+      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
+        Card content
+      </HoverCard>,
+    );
+    fireEvent.mouseEnter(screen.getByRole('button', { name: 'Profile' }));
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(screen.getByText('Card content')).toBeDefined();
+  });
+
+  it('cancels the open timer if the pointer leaves before the delay elapses', () => {
+    render(
+      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
+        Card content
+      </HoverCard>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Profile' });
+    fireEvent.mouseEnter(trigger);
+    fireEvent.mouseLeave(trigger);
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.queryByText('Card content')).toBeNull();
+  });
+
+  it('opens immediately on keyboard focus, for keyboard accessibility', () => {
+    render(
+      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
+        Card content
+      </HoverCard>,
+    );
+    fireEvent.focus(screen.getByRole('button', { name: 'Profile' }));
+    expect(screen.getByText('Card content')).toBeDefined();
+  });
+
+  it('falls back to tap-to-toggle when the pointer cannot hover', () => {
+    matches = false;
+    installMatchMedia();
+    render(
+      <HoverCard trigger={<button type="button">Profile</button>} aria-label="Profile preview">
+        Card content
+      </HoverCard>,
+    );
+    const trigger = screen.getByRole('button', { name: 'Profile' });
+    fireEvent.click(trigger);
+    expect(screen.getByText('Card content')).toBeDefined();
+    fireEvent.click(trigger);
+    expect(screen.queryByText('Card content')).toBeNull();
+  });
+});

package/src/components/Icon/icons/circle-check.tsx

@@ -0,0 +1,21 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CircleCheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m9 12 2 2 4-4" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/circle-x.tsx

@@ -0,0 +1,22 @@
+// Generated by scripts/generate-icons.ts — do not edit.
+// Source: Lucide (https://lucide.dev) — ISC license, see packages/ui/NOTICE.
+import type { SVGProps } from 'react';
+
+export function CircleXIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m15 9-6 6" />
+      <path d="m9 9 6 6" />
+    </svg>
+  );
+}

package/src/components/Icon/icons/index.ts

@@ -26,6 +26,8 @@ import { PackageIcon } from './package';
 import { Grid2x2Icon } from './grid-2x2';
 import { InfoIcon } from './info';
 import { AlertTriangleIcon } from './alert-triangle';
+import { CircleCheckIcon } from './circle-check';
+import { CircleXIcon } from './circle-x';
 import { CalendarIcon } from './calendar';
 import { SlidersHorizontalIcon } from './sliders-horizontal';
 import { EllipsisVerticalIcon } from './ellipsis-vertical';
@@ -80,6 +82,8 @@ export type IconName =
   | 'grid-2x2'
   | 'info'
   | 'alert-triangle'
+  | 'circle-check'
+  | 'circle-x'
   | 'calendar'
   | 'sliders-horizontal'
   | 'ellipsis-vertical'
@@ -136,6 +140,8 @@ export const ICONS: Record<IconName, IconComponent> = {
   'grid-2x2': Grid2x2Icon,
   info: InfoIcon,
   'alert-triangle': AlertTriangleIcon,
+  'circle-check': CircleCheckIcon,
+  'circle-x': CircleXIcon,
   calendar: CalendarIcon,
   'sliders-horizontal': SlidersHorizontalIcon,
   'ellipsis-vertical': EllipsisVerticalIcon,
@@ -190,6 +196,8 @@ export { PackageIcon } from './package';
 export { Grid2x2Icon } from './grid-2x2';
 export { InfoIcon } from './info';
 export { AlertTriangleIcon } from './alert-triangle';
+export { CircleCheckIcon } from './circle-check';
+export { CircleXIcon } from './circle-x';
 export { CalendarIcon } from './calendar';
 export { SlidersHorizontalIcon } from './sliders-horizontal';
 export { EllipsisVerticalIcon } from './ellipsis-vertical';

package/src/components/Input/Input.module.css

@@ -1,7 +1,12 @@
 .input {
   display: block;
   width: 100%;
-  padding: var(--sv-space-2) var(--sv-space-3);
+  /* 36px rendered height. Explicit height + border-box (rather than
+     deriving height from padding and line-height) gives an exact,
+     browser-independent target instead of an approximation. */
+  height: 36px;
+  box-sizing: border-box;
+  padding: 4px var(--sv-space-3);
   font-family: var(--sv-font-family);
   font-size: var(--sv-font-size-sm);
   line-height: 1.5;