@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/PageContainer/PageContainer.tsx

@@ -1,31 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import styles from './PageContainer.module.css';
-
-export interface PageContainerProps extends HTMLAttributes<HTMLDivElement> {
-  /** Constrains and centers content width. Adds no padding of its own — the
-   * runtime shell already pads plugin content. Defaults to 'md'. */
-  maxWidth?: 'sm' | 'md' | 'lg' | 'full';
-  children: ReactNode;
-}
-
-const maxWidthClass: Record<NonNullable<PageContainerProps['maxWidth']>, string> = {
-  sm: styles.sm as string,
-  md: styles.md as string,
-  lg: styles.lg as string,
-  full: styles.full as string,
-};
-
-export function PageContainer({
-  maxWidth = 'md',
-  className,
-  children,
-  ...rest
-}: PageContainerProps) {
-  const cls = [styles.container, maxWidthClass[maxWidth], className].filter(Boolean).join(' ');
-
-  return (
-    <div className={cls} {...rest}>
-      {children}
-    </div>
-  );
-}

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

@@ -1,37 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { PageContainer } from '../PageContainer';
-
-afterEach(cleanup);
-
-describe('PageContainer', () => {
-  it('renders its children', () => {
-    render(<PageContainer>content</PageContainer>);
-    expect(screen.getByText('content')).toBeDefined();
-  });
-
-  it('defaults to md max-width', () => {
-    render(<PageContainer>content</PageContainer>);
-    expect(screen.getByText('content').className).toContain('md');
-  });
-
-  it('applies sm, lg, and full max-width classes', () => {
-    const { rerender } = render(<PageContainer maxWidth="sm">content</PageContainer>);
-    expect(screen.getByText('content').className).toContain('sm');
-    rerender(<PageContainer maxWidth="lg">content</PageContainer>);
-    expect(screen.getByText('content').className).toContain('lg');
-    rerender(<PageContainer maxWidth="full">content</PageContainer>);
-    expect(screen.getByText('content').className).toContain('full');
-  });
-
-  it('forwards className and other div props', () => {
-    render(
-      <PageContainer className="custom" data-testid="container">
-        content
-      </PageContainer>,
-    );
-    const el = screen.getByTestId('container');
-    expect(el.className).toContain('custom');
-  });
-});

package/src/components/PageHeader/PageHeader.module.css

@@ -1,32 +0,0 @@
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: var(--sv-space-4);
-  margin-bottom: var(--sv-space-6);
-}
-
-.text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-  min-width: 0;
-}
-
-.title {
-  margin: 0;
-  font-size: var(--sv-font-size-2xl);
-  font-weight: var(--sv-font-weight-semibold);
-  color: var(--sv-color-text-primary);
-  line-height: 1.2;
-}
-
-.description {
-  margin: 0;
-  font-size: var(--sv-font-size-sm);
-  color: var(--sv-color-text-muted);
-}
-
-.action {
-  flex-shrink: 0;
-}

package/src/components/PageHeader/PageHeader.tsx

@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-import styles from './PageHeader.module.css';
-
-export interface PageHeaderProps {
-  title: string;
-  description?: string;
-  action?: ReactNode;
-  className?: string;
-  /** Heading level for the title. Defaults to `1` for standalone use; pass
-   * `2` or `3` when the page already sits under a shell/plugin `<h1>`, to
-   * avoid a duplicate top-level heading. Visual style is unchanged at every
-   * level — only the rendered tag changes. */
-  headingLevel?: 1 | 2 | 3;
-}
-
-const HEADING_TAG = { 1: 'h1', 2: 'h2', 3: 'h3' } as const;
-
-export function PageHeader({
-  title,
-  description,
-  action,
-  className,
-  headingLevel = 1,
-}: PageHeaderProps) {
-  const Heading = HEADING_TAG[headingLevel];
-  return (
-    <header className={[styles.header, className].filter(Boolean).join(' ')}>
-      <div className={styles.text}>
-        <Heading className={styles.title}>{title}</Heading>
-        {description && <p className={styles.description}>{description}</p>}
-      </div>
-      {action && <div className={styles.action}>{action}</div>}
-    </header>
-  );
-}

package/src/components/Pagination/Pagination.module.css

@@ -1,98 +0,0 @@
-.nav {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-}
-
-.list {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-/* Icon-only nav buttons — same footprint as Dialog's close button. */
-.navButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  cursor: pointer;
-}
-
-.navButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-@media (hover: hover) {
-  .navButton:not(:disabled):hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.navButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-@media (pointer: coarse) {
-  .navButton {
-    width: var(--sv-touch-target-min, 44px);
-    height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-.pageButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  padding: 0 var(--sv-space-2);
-  border: none;
-  border-radius: var(--sv-radius-md);
-  background: transparent;
-  color: var(--sv-color-text-primary);
-  font-size: var(--sv-font-size-sm);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .pageButton:not(.active):hover {
-    background: var(--sv-color-surface-sunken);
-  }
-}
-
-.pageButton:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: 2px;
-}
-
-.active {
-  background: var(--sv-color-accent);
-  color: var(--sv-color-text-on-accent);
-}
-
-@media (pointer: coarse) {
-  .pageButton {
-    min-width: var(--sv-touch-target-min, 44px);
-    height: var(--sv-touch-target-min, 44px);
-  }
-}
-
-.ellipsis {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--sv-space-8);
-  height: var(--sv-space-8);
-  color: var(--sv-color-text-muted);
-}

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,49 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Pagination } from './Pagination';
-
-const meta = {
-  title: 'Components/Pagination',
-  component: Pagination,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Page-number / prev-next control. Shows first, last, and pages near the current one, with an ellipsis for gaps once the page count grows.',
-      },
-    },
-  },
-  args: {
-    page: 1,
-    totalPages: 5,
-    onChange: () => {},
-  },
-} satisfies Meta<typeof Pagination>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-export const FewPages: Story = {
-  render: (args) => {
-    const [page, setPage] = useState(args.page);
-    return <Pagination {...args} page={page} totalPages={5} onChange={setPage} />;
-  },
-};
-
-export const ManyPagesWithEllipsis: Story = {
-  render: (_args) => {
-    const [page, setPage] = useState(8);
-    return <Pagination page={page} totalPages={40} onChange={setPage} />;
-  },
-};
-
-export const FirstPage: Story = {
-  args: { page: 1, totalPages: 10 },
-};
-
-export const LastPage: Story = {
-  args: { page: 10, totalPages: 10 },
-};

package/src/components/Pagination/Pagination.tsx

@@ -1,87 +0,0 @@
-import { Icon } from '../Icon/Icon';
-import styles from './Pagination.module.css';
-
-export interface PaginationProps {
-  /** 1-indexed current page. */
-  page: number;
-  totalPages: number;
-  onChange: (page: number) => void;
-  className?: string;
-  'aria-label'?: string;
-}
-
-type PageEntry = number | 'ellipsis';
-
-/** First page, last page, current page ± 1 sibling, ellipsis for gaps. */
-function getPageList(page: number, totalPages: number): PageEntry[] {
-  if (totalPages <= 1) return [1];
-
-  const siblingCount = 1;
-  const startPage = Math.max(2, page - siblingCount);
-  const endPage = Math.min(totalPages - 1, page + siblingCount);
-
-  const pages: PageEntry[] = [1];
-  if (startPage > 2) pages.push('ellipsis');
-  for (let p = startPage; p <= endPage; p++) {
-    pages.push(p);
-  }
-  if (endPage < totalPages - 1) pages.push('ellipsis');
-  pages.push(totalPages);
-  return pages;
-}
-
-export function Pagination({
-  page,
-  totalPages,
-  onChange,
-  className,
-  'aria-label': ariaLabel = 'Pagination',
-}: PaginationProps) {
-  const pages = getPageList(page, totalPages);
-
-  return (
-    <nav aria-label={ariaLabel} className={[styles.nav, className].filter(Boolean).join(' ')}>
-      <button
-        type="button"
-        className={styles.navButton}
-        onClick={() => onChange(page - 1)}
-        disabled={page <= 1}
-        aria-label="Previous page"
-      >
-        <Icon name="chevron-left" size="sm" aria-hidden />
-      </button>
-      <ul className={styles.list}>
-        {pages.map((p, index) =>
-          p === 'ellipsis' ? (
-            <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden="true">
-              …
-            </li>
-          ) : (
-            <li key={p}>
-              <button
-                type="button"
-                className={[styles.pageButton, p === page ? styles.active : '']
-                  .filter(Boolean)
-                  .join(' ')}
-                onClick={() => onChange(p)}
-                aria-current={p === page ? 'page' : undefined}
-                aria-label={`Page ${p}`}
-              >
-                {p}
-              </button>
-            </li>
-          ),
-        )}
-      </ul>
-      <button
-        type="button"
-        className={styles.navButton}
-        onClick={() => onChange(page + 1)}
-        disabled={page >= totalPages}
-        aria-label="Next page"
-      >
-        <Icon name="chevron-right" size="sm" aria-hidden />
-      </button>
-    </nav>
-  );
-}

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

@@ -1,56 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { Pagination } from '../Pagination';
-
-afterEach(cleanup);
-
-describe('Pagination', () => {
-  it('marks the current page with aria-current="page"', () => {
-    render(<Pagination page={3} totalPages={5} onChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Page 3' }).getAttribute('aria-current')).toBe(
-      'page',
-    );
-    expect(screen.getByRole('button', { name: 'Page 2' }).getAttribute('aria-current')).toBeNull();
-  });
-
-  it('calls onChange with the clicked page number', () => {
-    const onChange = vi.fn();
-    render(<Pagination page={3} totalPages={5} onChange={onChange} />);
-    screen.getByRole('button', { name: 'Page 4' }).click();
-    expect(onChange).toHaveBeenCalledWith(4);
-  });
-
-  it('disables the previous button on the first page', () => {
-    render(<Pagination page={1} totalPages={5} onChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Previous page' })).toHaveProperty('disabled', true);
-    expect(screen.getByRole('button', { name: 'Next page' })).toHaveProperty('disabled', false);
-  });
-
-  it('disables the next button on the last page', () => {
-    render(<Pagination page={5} totalPages={5} onChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Next page' })).toHaveProperty('disabled', true);
-  });
-
-  it('next/previous buttons step the page by one', () => {
-    const onChange = vi.fn();
-    render(<Pagination page={3} totalPages={5} onChange={onChange} />);
-    screen.getByRole('button', { name: 'Next page' }).click();
-    expect(onChange).toHaveBeenLastCalledWith(4);
-    screen.getByRole('button', { name: 'Previous page' }).click();
-    expect(onChange).toHaveBeenLastCalledWith(2);
-  });
-
-  it('shows an ellipsis and jumps to the last page for a large page count', () => {
-    render(<Pagination page={5} totalPages={20} onChange={() => {}} />);
-    expect(screen.getByRole('button', { name: 'Page 1' })).toBeDefined();
-    expect(screen.getByRole('button', { name: 'Page 20' })).toBeDefined();
-    expect(screen.queryAllByText('…').length).toBeGreaterThan(0);
-  });
-
-  it('renders no ellipsis for a small page count', () => {
-    render(<Pagination page={2} totalPages={4} onChange={() => {}} />);
-    expect(screen.queryAllByText('…').length).toBe(0);
-    expect(screen.getAllByRole('button', { name: /^Page \d$/ }).length).toBe(4);
-  });
-});

package/src/components/Popover/Popover.module.css

@@ -1,74 +0,0 @@
-.container {
-  position: relative;
-  display: inline-flex;
-}
-
-.panel {
-  position: absolute;
-  top: calc(100% + var(--sv-space-2));
-  z-index: 60;
-  background: var(--sv-color-surface);
-  border: 1px solid var(--sv-color-border);
-  border-radius: var(--sv-radius-2xl);
-  box-shadow: var(--sv-shadow-popover);
-  /* auto, not hidden: Popover.tsx applies an inline max-height only when the
-     panel is taller than the room actually available on whichever side it
-     opens (e.g. a tall calendar on a short mobile viewport, where neither
-     above nor below has enough space for the whole thing) — auto lets that
-     capped case scroll internally instead of silently clipping content with
-     no way to reach it. When no max-height is applied (the common case, panel
-     already fits), auto behaves identically to hidden — nothing to scroll,
-     content still clips at the rounded corners exactly as before. */
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* Slide in from slightly above */
-  animation: sv-popover-in 0.12s ease;
-}
-
-@keyframes sv-popover-in {
-  from {
-    opacity: 0;
-    transform: translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .panel {
-    animation: none;
-  }
-}
-
-/* Alignment: right edge of panel aligns to right edge of trigger */
-.right {
-  right: 0;
-}
-
-/* Alignment: left edge of panel aligns to left edge of trigger */
-.left {
-  left: 0;
-}
-
-/* Collision flip: opens above the trigger instead of below, when the panel
-   wouldn't fit within the viewport underneath it (see Popover.tsx's
-   layout-effect measurement). Same slide-in treatment, mirrored to slide up
-   from slightly below instead of down from slightly above. */
-.upward {
-  top: auto;
-  bottom: calc(100% + var(--sv-space-2));
-  animation-name: sv-popover-in-upward;
-}
-
-@keyframes sv-popover-in-upward {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}