@sovereignfs/ui 0.83.1 → 0.89.1

package/src/components/PageLayout/PageLayout.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PageLayout } from './PageLayout';
-
-function Content() {
-  return (
-    <div
-      style={{
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        color: 'var(--sv-color-text-primary)',
-      }}
-    >
-      {Array.from({ length: 6 }, (_, index) => (
-        <p key={index}>Page content row {index + 1}.</p>
-      ))}
-    </div>
-  );
-}
-
-function PageHeader() {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        padding: 'var(--sv-space-3) var(--sv-space-4)',
-        borderBottom: '1px solid var(--sv-color-border)',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-md)',
-        fontWeight: 600,
-        color: 'var(--sv-color-text-primary)',
-      }}
-    >
-      Sv Wallet
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/PageLayout',
-  component: PageLayout,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "A single page's content area, nested inside RootLayout's main slot — not a replacement for RootLayout. No padding by default; opt in via the padding prop (same scale as PageContainer). The optional header is page-specific (e.g. a board title/toolbar), not the app-level header RootLayout already renders.",
-      },
-    },
-  },
-  args: {
-    children: <Content />,
-  },
-} satisfies Meta<typeof PageLayout>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const WithPadding: Story = {
-  args: {
-    padding: 'lg',
-  },
-};
-
-export const WithHeader: Story = {
-  args: {
-    header: <PageHeader />,
-    padding: 'md',
-  },
-};

package/src/components/PageLayout/PageLayout.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-import styles from './PageLayout.module.css';
-
-export type PageLayoutPadding = 'none' | 'sm' | 'md' | 'lg';
-
-export interface PageLayoutProps {
-  /**
-   * A page-specific header — e.g. a board title + search/share toolbar.
-   * Not the app-level header (that's `RootLayout`'s `header`/`shell`
-   * variants) — this is a second, contextual row scoped to this one page.
-   * Renders edge-to-edge above the padded content, outside `padding`.
-   */
-  header?: ReactNode;
-  /** The page gutter. Default `'none'` — unlike `PageContainer`, a bare
-   *  `PageLayout` applies no padding at all; opt in per page. Same four-step
-   *  scale and `--sv-page-gutter` stand-down hook as `PageContainer` (steps
-   *  down at the same 768px breakpoint `Dialog`/`MobileHeader` use). */
-  padding?: PageLayoutPadding;
-  children: ReactNode;
-  className?: string;
-}
-
-const paddingClass: Record<PageLayoutPadding, string> = {
-  none: styles.padNone as string,
-  sm: styles.padSm as string,
-  md: styles.padMd as string,
-  lg: styles.padLg as string,
-};
-
-/**
- * PageLayout — a single page's content area within a plugin (nested inside
- * `RootLayout`'s `main` slot, not a replacement for it). Enforces only
- * structure and dimensions; content always comes from props/children.
- *
- * `min-width: 100%; min-height: 100%` — safe here (unlike `RootLayout`'s own
- * root) because `PageLayout` is always nested inside an already
- * flex-stretched region (`ThreeColumnLayout`/`HeaderFooterLayout`'s
- * `.main`), and a stretched flex item's cross-size is definite for its
- * descendants' percentage resolution, so no separate height-cascading fix
- * is needed the way `RootLayout`'s root required one.
- */
-export function PageLayout({ header, padding = 'none', children, className }: PageLayoutProps) {
-  return (
-    <div className={[styles.root, className].filter(Boolean).join(' ')}>
-      {header && <div className={styles.header}>{header}</div>}
-      <div className={[styles.content, paddingClass[padding]].join(' ')}>{children}</div>
-    </div>
-  );
-}

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

@@ -1,34 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { PageLayout } from '../PageLayout';
-
-afterEach(cleanup);
-
-describe('PageLayout', () => {
-  it('renders children with no header by default', () => {
-    render(<PageLayout>Content</PageLayout>);
-
-    expect(screen.getByText('Content')).toBeDefined();
-    expect(screen.queryByText('Header')).toBeNull();
-  });
-
-  it('renders a page-specific header when given', () => {
-    render(<PageLayout header={<span>Header</span>}>Content</PageLayout>);
-
-    expect(screen.getByText('Header')).toBeDefined();
-    expect(screen.getByText('Content')).toBeDefined();
-  });
-
-  it('applies no padding by default', () => {
-    render(<PageLayout>Content</PageLayout>);
-
-    expect(screen.getByText('Content').className).toContain('padNone');
-  });
-
-  it('applies the requested padding step', () => {
-    render(<PageLayout padding="lg">Content</PageLayout>);
-
-    expect(screen.getByText('Content').className).toContain('padLg');
-  });
-});

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: var(--sv-border-width-hairline) 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);
-  }
-}