@sovereignfs/ui 0.21.0

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

@@ -0,0 +1,232 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Popover } from './Popover';
+import { Button } from '../Button/Button';
+
+const meta = {
+  title: 'Components/Popover',
+  component: Popover,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Floating panel anchored below a trigger. Non-modal: closes on outside click or Escape. `align` controls which trigger edge the panel aligns to.',
+      },
+    },
+  },
+  args: {
+    open: false,
+    onClose: () => {},
+    trigger: <button type="button">Trigger</button>,
+    'aria-label': 'Popover',
+    children: null,
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+const rowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 12,
+  padding: '10px 16px',
+  fontFamily: 'var(--sv-font-family)',
+  fontSize: 'var(--sv-font-size-sm)',
+  color: 'var(--sv-color-text-primary)',
+  borderBottom: '1px solid var(--sv-color-border)',
+  cursor: 'pointer',
+};
+
+/** Notification bell popover — right-aligned, 288px. */
+export const Notifications: Story = {
+  render: (_args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div style={{ padding: 40 }}>
+        <Popover
+          open={open}
+          onClose={() => setOpen(false)}
+          align="right"
+          aria-label="Notifications"
+          trigger={
+            <Button variant="ghost" onClick={() => setOpen((o) => !o)} aria-label="Notifications">
+              🔔
+            </Button>
+          }
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              padding: '12px 16px',
+              borderBottom: '1px solid var(--sv-color-border)',
+              fontFamily: 'var(--sv-font-family)',
+            }}
+          >
+            <span
+              style={{
+                fontWeight: 'var(--sv-font-weight-semibold)',
+                fontSize: 'var(--sv-font-size-sm)',
+                color: 'var(--sv-color-text-primary)',
+              }}
+            >
+              Notifications
+            </span>
+            <button
+              type="button"
+              style={{
+                background: 'none',
+                border: 'none',
+                fontSize: 'var(--sv-font-size-caption)',
+                color: 'var(--sv-color-text-muted)',
+                cursor: 'pointer',
+                fontFamily: 'var(--sv-font-family)',
+              }}
+            >
+              Mark all read
+            </button>
+          </div>
+          <div style={rowStyle}>
+            <span style={{ fontSize: 20 }}>📦</span>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontWeight: 'var(--sv-font-weight-medium)' }}>Plugin updated</div>
+              <div
+                style={{
+                  fontSize: 'var(--sv-font-size-caption)',
+                  color: 'var(--sv-color-text-muted)',
+                }}
+              >
+                1 hour ago
+              </div>
+            </div>
+          </div>
+          <div style={rowStyle}>
+            <span style={{ fontSize: 20 }}>✉️</span>
+            <div style={{ flex: 1 }}>
+              <div style={{ fontWeight: 'var(--sv-font-weight-medium)' }}>Invite accepted</div>
+              <div
+                style={{
+                  fontSize: 'var(--sv-font-size-caption)',
+                  color: 'var(--sv-color-text-muted)',
+                }}
+              >
+                2 min ago
+              </div>
+            </div>
+          </div>
+        </Popover>
+      </div>
+    );
+  },
+};
+
+/** User menu — right-aligned with identity header and nav rows. */
+export const UserMenu: Story = {
+  render: (_args) => {
+    const [open, setOpen] = useState(false);
+
+    const menuRowStyle: React.CSSProperties = {
+      ...rowStyle,
+      gap: 10,
+      cursor: 'default',
+    };
+
+    return (
+      <div style={{ padding: 40 }}>
+        <Popover
+          open={open}
+          onClose={() => setOpen(false)}
+          align="right"
+          aria-label="User menu"
+          trigger={
+            <button
+              type="button"
+              onClick={() => setOpen((o) => !o)}
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: '50%',
+                background: 'var(--sv-color-accent)',
+                color: 'var(--sv-color-text-on-accent)',
+                border: 'none',
+                cursor: 'pointer',
+                fontFamily: 'var(--sv-font-family)',
+                fontWeight: 600,
+                fontSize: 13,
+              }}
+              aria-label="Open user menu"
+            >
+              KB
+            </button>
+          }
+        >
+          <div
+            style={{
+              padding: '12px 16px',
+              borderBottom: '1px solid var(--sv-color-border)',
+              fontFamily: 'var(--sv-font-family)',
+            }}
+          >
+            <div
+              style={{
+                fontWeight: 'var(--sv-font-weight-semibold)',
+                fontSize: 'var(--sv-font-size-sm)',
+                color: 'var(--sv-color-text-primary)',
+              }}
+            >
+              Kasun Benthara
+            </div>
+            <div
+              style={{
+                fontSize: 'var(--sv-font-size-caption)',
+                color: 'var(--sv-color-text-muted)',
+              }}
+            >
+              kasun@openfs.io
+            </div>
+          </div>
+          {['Account', 'Console', 'Sign out'].map((item) => (
+            <div key={item} style={menuRowStyle}>
+              {item}
+            </div>
+          ))}
+        </Popover>
+      </div>
+    );
+  },
+};
+
+/** Left-aligned variant. */
+export const LeftAligned: Story = {
+  render: (_args) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div style={{ padding: 40 }}>
+        <Popover
+          open={open}
+          onClose={() => setOpen(false)}
+          align="left"
+          aria-label="Options"
+          trigger={<Button onClick={() => setOpen((o) => !o)}>Open (left-aligned)</Button>}
+        >
+          <div
+            style={{
+              padding: 16,
+              fontFamily: 'var(--sv-font-family)',
+              fontSize: 'var(--sv-font-size-sm)',
+              color: 'var(--sv-color-text-muted)',
+            }}
+          >
+            Panel aligns to the left edge of the trigger.
+          </div>
+        </Popover>
+      </div>
+    );
+  },
+};

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useEffect, useRef, type ReactElement, type ReactNode } from 'react';
+import styles from './Popover.module.css';
+
+export interface PopoverProps {
+  /** The element that opens the popover — rendered as-is; caller wires its onClick. */
+  trigger: ReactElement;
+  open: boolean;
+  onClose: () => void;
+  /** Which edge of the trigger the panel aligns to. Default: 'right'. */
+  align?: 'left' | 'right';
+  /** Panel width in px. Default: 288. */
+  width?: number;
+  'aria-label': string;
+  children: ReactNode;
+}
+
+/**
+ * Popover — floating panel anchored below a trigger element.
+ *
+ * Positioning is `position: absolute` inside a `position: relative` wrapper —
+ * no floating-ui dependency. Supports left/right alignment against the trigger edge.
+ * Closes on outside click or Escape. Does not trap focus (it is non-modal).
+ */
+export function Popover({
+  trigger,
+  open,
+  onClose,
+  align = 'right',
+  width = 288,
+  'aria-label': ariaLabel,
+  children,
+}: PopoverProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Outside-click dismissal
+  useEffect(() => {
+    if (!open) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        onClose();
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [open, onClose]);
+
+  // Escape key dismissal
+  useEffect(() => {
+    if (!open) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose();
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose]);
+
+  return (
+    <div ref={containerRef} className={styles.container}>
+      {trigger}
+      {open && (
+        <div
+          role="dialog"
+          aria-label={ariaLabel}
+          aria-modal={false}
+          className={[styles.panel, styles[align]].join(' ')}
+          style={{ width }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+import { Popover } from '../Popover';
+
+afterEach(cleanup);
+
+const trigger = <button type="button">Open</button>;
+
+describe('Popover', () => {
+  it('renders the trigger element', () => {
+    render(
+      <Popover open={false} onClose={() => {}} aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    expect(screen.getByRole('button', { name: 'Open' })).toBeDefined();
+  });
+
+  it('does not render the panel when closed', () => {
+    render(
+      <Popover open={false} onClose={() => {}} aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('renders the panel with children when open', () => {
+    render(
+      <Popover open={true} onClose={() => {}} aria-label="Menu" trigger={trigger}>
+        Panel content
+      </Popover>,
+    );
+    expect(screen.getByRole('dialog', { name: 'Menu' })).toBeDefined();
+    expect(screen.getByText('Panel content')).toBeDefined();
+  });
+
+  it('applies the right alignment class by default', () => {
+    render(
+      <Popover open={true} onClose={() => {}} aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    expect(screen.getByRole('dialog').className).toContain('right');
+  });
+
+  it('applies the left alignment class when specified', () => {
+    render(
+      <Popover open={true} onClose={() => {}} align="left" aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    expect(screen.getByRole('dialog').className).toContain('left');
+  });
+
+  it('calls onClose when Escape is pressed', () => {
+    const onClose = vi.fn();
+    render(
+      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClose when clicking outside the container', () => {
+    const onClose = vi.fn();
+    render(
+      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    fireEvent.mouseDown(document.body);
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onClose when clicking inside the panel', () => {
+    const onClose = vi.fn();
+    render(
+      <Popover open={true} onClose={onClose} aria-label="Menu" trigger={trigger}>
+        <button type="button">Inside</button>
+      </Popover>,
+    );
+    fireEvent.mouseDown(screen.getByRole('button', { name: 'Inside' }));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('applies the provided width as inline style', () => {
+    render(
+      <Popover open={true} onClose={() => {}} aria-label="Menu" width={320} trigger={trigger}>
+        Content
+      </Popover>,
+    );
+    expect((screen.getByRole('dialog') as HTMLElement).style.width).toBe('320px');
+  });
+});

package/src/components/SegmentedControl/SegmentedControl.module.css

@@ -0,0 +1,53 @@
+.track {
+  display: inline-flex;
+  background: var(--sv-color-surface-sunken);
+  border-radius: var(--sv-radius-full);
+  border: 1px solid var(--sv-color-border);
+  padding: 2px;
+  gap: 2px;
+}
+
+/* Size variants */
+.md .segment {
+  padding: var(--sv-space-1) var(--sv-space-3);
+  font-size: var(--sv-font-size-sm);
+}
+
+.sm .segment {
+  padding: 2px var(--sv-space-2);
+  font-size: var(--sv-font-size-caption);
+}
+
+.segment {
+  border: none;
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-weight: var(--sv-font-weight-medium);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.12s ease,
+    color 0.12s ease,
+    box-shadow 0.12s ease;
+  white-space: nowrap;
+}
+
+.segment:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+.active {
+  background: var(--sv-color-surface);
+  color: var(--sv-color-text-primary);
+  box-shadow: var(--sv-shadow-card);
+}
+
+.inactive {
+  background: transparent;
+  color: var(--sv-color-text-muted);
+}
+
+.inactive:hover {
+  color: var(--sv-color-text-primary);
+}

package/src/components/SegmentedControl/SegmentedControl.stories.tsx

@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SegmentedControl } from './SegmentedControl';
+
+const meta = {
+  title: 'Components/SegmentedControl',
+  component: SegmentedControl,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Pill-based 2–3 option picker for inline use in table rows and dialogs. Renders as `role="radiogroup"` with `role="radio"` segments.',
+      },
+    },
+  },
+  args: {
+    value: 'a',
+    onChange: () => {},
+    options: [
+      { label: 'A', value: 'a' },
+      { label: 'B', value: 'b' },
+    ],
+    'aria-label': 'Select option',
+  },
+} satisfies Meta<typeof SegmentedControl>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ---------------------------------------------------------------------------
+
+export const TwoOption: Story = {
+  render: (_args) => {
+    const [role, setRole] = useState<'user' | 'admin'>('user');
+    return (
+      <SegmentedControl
+        value={role}
+        onChange={setRole}
+        options={[
+          { label: 'User', value: 'user' },
+          { label: 'Admin', value: 'admin' },
+        ]}
+        aria-label="Role"
+      />
+    );
+  },
+};
+
+export const ThreeOption: Story = {
+  render: (_args) => {
+    const [role, setRole] = useState<'user' | 'admin' | 'owner'>('user');
+    return (
+      <SegmentedControl
+        value={role}
+        onChange={setRole}
+        options={[
+          { label: 'User', value: 'user' },
+          { label: 'Admin', value: 'admin' },
+          { label: 'Owner', value: 'owner' },
+        ]}
+        aria-label="Role"
+      />
+    );
+  },
+};
+
+export const SmallSize: Story = {
+  render: (_args) => {
+    const [role, setRole] = useState<'user' | 'admin'>('user');
+    return (
+      <SegmentedControl
+        value={role}
+        onChange={setRole}
+        size="sm"
+        options={[
+          { label: 'User', value: 'user' },
+          { label: 'Admin', value: 'admin' },
+        ]}
+        aria-label="Role"
+      />
+    );
+  },
+};
+
+/** Table-row context — sm size next to other table content. */
+export const InTableRow: Story = {
+  render: (_args) => {
+    const [role, setRole] = useState<'user' | 'admin'>('user');
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 16,
+          padding: '10px 12px',
+          border: '1px solid var(--sv-color-border)',
+          borderRadius: 'var(--sv-radius-md)',
+          fontFamily: 'var(--sv-font-family)',
+          fontSize: 'var(--sv-font-size-sm)',
+          color: 'var(--sv-color-text-primary)',
+        }}
+      >
+        <span>Test User</span>
+        <SegmentedControl
+          value={role}
+          onChange={setRole}
+          size="sm"
+          options={[
+            { label: 'User', value: 'user' },
+            { label: 'Admin', value: 'admin' },
+          ]}
+          aria-label="User role"
+        />
+      </div>
+    );
+  },
+};

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import styles from './SegmentedControl.module.css';
+
+export interface SegmentedOption<T extends string = string> {
+  label: string;
+  value: T;
+}
+
+export interface SegmentedControlProps<T extends string = string> {
+  value: T;
+  onChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  size?: 'sm' | 'md';
+  'aria-label': string;
+}
+
+/**
+ * SegmentedControl — pill-based 2–3 option picker for inline use in table rows
+ * and dialogs (e.g. User / Admin / Owner role switcher).
+ *
+ * Renders as `<div role="radiogroup">` with `<button role="radio">` children —
+ * correct semantics without a native `<input type="radio">` (which needs an id/name
+ * pair and a `<form>` context to function correctly in all browsers).
+ */
+export function SegmentedControl<T extends string = string>({
+  value,
+  onChange,
+  options,
+  size = 'md',
+  'aria-label': ariaLabel,
+}: SegmentedControlProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={[styles.track, styles[size]].join(' ')}
+    >
+      {options.map((opt) => {
+        const active = opt.value === value;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            className={[styles.segment, active ? styles.active : styles.inactive].join(' ')}
+            onClick={() => onChange(opt.value)}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, render, screen, fireEvent } from '@testing-library/react';
+
+afterEach(cleanup);
+import { SegmentedControl } from '../SegmentedControl';
+
+const options = [
+  { label: 'User', value: 'user' as const },
+  { label: 'Admin', value: 'admin' as const },
+  { label: 'Owner', value: 'owner' as const },
+];
+
+describe('SegmentedControl', () => {
+  it('renders all options as radio buttons', () => {
+    render(
+      <SegmentedControl value="user" onChange={() => {}} options={options} aria-label="Role" />,
+    );
+    expect(screen.getAllByRole('radio').length).toBe(3);
+  });
+
+  it('marks the active option as checked', () => {
+    render(
+      <SegmentedControl value="admin" onChange={() => {}} options={options} aria-label="Role" />,
+    );
+    expect(screen.getByRole('radio', { name: 'Admin' }).getAttribute('aria-checked')).toBe('true');
+    expect(screen.getByRole('radio', { name: 'User' }).getAttribute('aria-checked')).toBe('false');
+  });
+
+  it('calls onChange with the selected value on click', () => {
+    const onChange = vi.fn();
+    render(
+      <SegmentedControl value="user" onChange={onChange} options={options} aria-label="Role" />,
+    );
+    fireEvent.click(screen.getByRole('radio', { name: 'Admin' }));
+    expect(onChange).toHaveBeenCalledWith('admin');
+  });
+
+  it('exposes a radiogroup with the given aria-label', () => {
+    render(
+      <SegmentedControl
+        value="user"
+        onChange={() => {}}
+        options={options}
+        aria-label="Select role"
+      />,
+    );
+    expect(screen.getByRole('radiogroup', { name: 'Select role' })).toBeDefined();
+  });
+
+  it('applies size class to the track', () => {
+    const { container } = render(
+      <SegmentedControl
+        value="user"
+        onChange={() => {}}
+        options={options}
+        size="sm"
+        aria-label="Role"
+      />,
+    );
+    expect((container.firstChild as HTMLElement).className).toContain('sm');
+  });
+});