@sovereignfs/ui 0.21.3 → 0.33.0

package/src/components/CodeTextarea/CodeTextarea.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CodeTextarea } from './CodeTextarea';
+import { FormField } from '../FormField/FormField';
+
+const sampleMarkdown = `---
+title: Editorial calendar
+tags:
+  - planning
+  - launch
+---
+
+# Launch notes
+
+Draft the announcement and verify links before publishing.`;
+
+const meta = {
+  title: 'Components/CodeTextarea',
+  component: CodeTextarea,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Monospace textarea for Markdown, YAML, JSON, and other whitespace-sensitive content.',
+      },
+    },
+  },
+  args: {
+    defaultValue: sampleMarkdown,
+    'aria-label': 'Markdown source',
+  },
+} satisfies Meta<typeof CodeTextarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithFormField: Story = {
+  render: () => (
+    <FormField label="Frontmatter" hint="YAML is saved exactly as typed." id="frontmatter-source">
+      {(field) => <CodeTextarea {...field} defaultValue={sampleMarkdown} />}
+    </FormField>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <FormField label="Raw YAML" error="Line 3: expected a value." id="yaml-source">
+      {(field) => <CodeTextarea {...field} invalid defaultValue={'title:\ntags:\n  -'} />}
+    </FormField>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: sampleMarkdown,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    defaultValue: Array.from({ length: 24 }, (_, index) => `- item-${index + 1}: pending`).join(
+      '\n',
+    ),
+  },
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  args: {
+    defaultValue: sampleMarkdown,
+  },
+};

package/src/components/CodeTextarea/CodeTextarea.tsx

@@ -0,0 +1,36 @@
+import type { TextareaHTMLAttributes } from 'react';
+import styles from './CodeTextarea.module.css';
+
+export interface CodeTextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+}
+
+/**
+ * CodeTextarea — monospace textarea for Markdown, YAML, JSON, and other
+ * whitespace-sensitive content. Pair with FormField for labels, hints, and
+ * validation text.
+ */
+export function CodeTextarea({
+  className,
+  rows = 12,
+  spellCheck = false,
+  wrap = 'off',
+  invalid = false,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: CodeTextareaProps) {
+  const classes = [styles.textarea, invalid ? styles.invalid : undefined, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <textarea
+      rows={rows}
+      spellCheck={spellCheck}
+      wrap={wrap}
+      className={classes}
+      aria-invalid={ariaInvalid ?? (invalid || undefined)}
+      {...rest}
+    />
+  );
+}

package/src/components/ConfirmDialog/ConfirmDialog.module.css

@@ -0,0 +1,109 @@
+/* ConfirmDialog — built on the native <dialog> element (see the component's
+ * own doc comment for why: content-sized, top-layer stacking, ::backdrop for
+ * free). Tokens only. */
+
+.dialog {
+  border: none;
+  border-radius: var(--sv-radius-lg);
+  background: var(--sv-color-surface);
+  box-shadow: var(--sv-shadow-overlay);
+  padding: 0;
+  width: 22rem;
+  max-width: calc(100vw - var(--sv-space-8));
+}
+
+.dialog::backdrop {
+  background: var(--sv-color-scrim);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sv-space-4);
+  padding: var(--sv-space-6);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--sv-font-size-lg);
+  font-weight: var(--sv-font-weight-semibold);
+  color: var(--sv-color-text-primary);
+}
+
+.message {
+  margin: 0;
+  font-size: var(--sv-font-size-sm);
+  color: var(--sv-color-text-muted);
+}
+
+.error {
+  margin: 0;
+  font-size: var(--sv-font-size-xs);
+  color: var(--sv-color-error-text);
+  padding: var(--sv-space-2) var(--sv-space-3);
+  border: 1px solid var(--sv-color-error-border);
+  border-radius: var(--sv-radius-sm);
+  background-color: var(--sv-color-error-surface);
+}
+
+.actions {
+  display: flex;
+  gap: var(--sv-space-3);
+  justify-content: flex-end;
+}
+
+/* Matches Button's own .button + .md structural rules exactly (padding,
+ * radius, font weight, focus-visible ring, disabled state, touch target,
+ * hover guard, active/pressed state) so it reads as the same control family
+ * — only the color scheme differs. Not built as an override of Button's own
+ * CSS module: cross-module class-order in the cascade isn't guaranteed, and
+ * an inline-style override would defeat Button's own :hover rule (inline
+ * styles always win over an external stylesheet, hover or not). A plain
+ * button with its own tokens sidesteps both problems. */
+.destructiveConfirm {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sv-space-2);
+  padding: 13px var(--sv-space-4);
+  border: 1px solid transparent;
+  border-radius: var(--sv-radius-md);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  font-weight: var(--sv-font-weight-semibold);
+  line-height: 1;
+  cursor: pointer;
+  touch-action: manipulation;
+  background-color: var(--sv-color-error-solid);
+  color: var(--sv-color-text-on-error);
+  transition: background-color 0.15s ease;
+}
+
+@media (pointer: coarse) {
+  .destructiveConfirm {
+    min-height: var(--sv-touch-target-min, 44px);
+  }
+}
+
+/* Derived via color-mix from the semantic token, not a raw --sv-red-800
+   primitive (the original .dangerButton pattern this replaces did reference
+   the primitive directly — fixed here, not carried forward). */
+@media (hover: hover) {
+  .destructiveConfirm:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--sv-color-error-solid) 85%, black);
+  }
+}
+
+.destructiveConfirm:active:not(:disabled) {
+  background-color: color-mix(in srgb, var(--sv-color-error-solid) 80%, black);
+}
+
+.destructiveConfirm:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 2px;
+}
+
+.destructiveConfirm:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { type ReactNode, useEffect, useRef } from 'react';
+import { Button } from '../Button/Button';
+import styles from './ConfirmDialog.module.css';
+
+export interface ConfirmDialogProps {
+  /** Whether the dialog is shown. */
+  open: boolean;
+  /** Called on Esc, backdrop click, or the Cancel button. */
+  onClose: () => void;
+  title: string;
+  /** Accepts rich content (e.g. `Remove <strong>{name}</strong>?`), not just
+   *  plain text. */
+  message: ReactNode;
+  /** Called when the confirm action is clicked. Does not close the dialog
+   *  itself — pass `pending`/close it via `onClose` from the caller once the
+   *  action settles, so an async action that fails can keep the dialog open
+   *  to show `error`. */
+  onConfirm: () => void;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Styles the confirm action as a destructive (red) action. */
+  destructive?: boolean;
+  /** Disables both actions — pair with a `confirmLabel` reflecting the
+   *  in-flight state (e.g. "Removing…") for an `onConfirm` that triggers an
+   *  async action. */
+  pending?: boolean;
+  /** Optional inline error, shown between the message and the actions — e.g.
+   *  a failed async `onConfirm` that keeps the dialog open to report it. */
+  error?: ReactNode;
+}
+
+/**
+ * ConfirmDialog — a small, content-sized confirm/cancel prompt. Deliberately
+ * NOT built on `Dialog`, which is a fixed-size box by design (so switching
+ * views inside it never resizes the panel) — a confirm prompt is the opposite
+ * case, sized to its message. Built on the native `<dialog>` element instead,
+ * same as the pattern this component replaces (duplicated across the account
+ * and console plugins): top-layer rendering and `::backdrop` come from the
+ * browser for free, which is what makes a confirm opened *from inside*
+ * another overlay (Dialog, Sheet) reliably stack above it without a manual
+ * z-index scheme.
+ *
+ * Same presentation on desktop and mobile — a small centered card, not a
+ * full-screen sheet (unlike Dialog/Sheet, which do fork by viewport).
+ */
+export function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  message,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+  pending = false,
+  error,
+}: ConfirmDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    if (open) el.showModal();
+    else el.close();
+  }, [open]);
+
+  // The native <dialog> fires its own 'close' event on Esc (built-in, no
+  // listener needed for that) and whenever .close() runs — including the
+  // effect above reacting to `open` going false. Listening for it here is
+  // what makes Esc call the caller's onClose without a manual keydown handler.
+  useEffect(() => {
+    const el = dialogRef.current;
+    if (!el) return;
+    const handleClose = () => onClose();
+    el.addEventListener('close', handleClose);
+    return () => el.removeEventListener('close', handleClose);
+  }, [onClose]);
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    <dialog
+      ref={dialogRef}
+      className={styles.dialog}
+      aria-label={title}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className={styles.body}>
+        <h2 className={styles.title}>{title}</h2>
+        <div className={styles.message}>{message}</div>
+        {error && <p className={styles.error}>{error}</p>}
+        <div className={styles.actions}>
+          <Button type="button" variant="secondary" onClick={onClose} disabled={pending}>
+            {cancelLabel}
+          </Button>
+          {destructive ? (
+            // A solid red fill, not Button's own `destructive` variant (an
+            // outlined/ghost style meant for lower-emphasis placements) — a
+            // confirm action should read as strongly as `Button`'s primary
+            // variant does. Uses the same --sv-color-error-solid /
+            // -text-on-error tokens the codebase already introduced for this
+            // exact "reads as a filled action button, not a tinted status
+            // surface" case (see semantic.css).
+            <button
+              type="button"
+              className={styles.destructiveConfirm}
+              onClick={onConfirm}
+              disabled={pending}
+            >
+              {confirmLabel}
+            </button>
+          ) : (
+            <Button type="button" variant="primary" onClick={onConfirm} disabled={pending}>
+              {confirmLabel}
+            </Button>
+          )}
+        </div>
+      </div>
+    </dialog>
+  );
+}

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

@@ -0,0 +1,146 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { ConfirmDialog } from '../ConfirmDialog';
+
+// jsdom does not implement HTMLDialogElement.showModal()/close() (a
+// long-standing, documented gap) — polyfill the minimum behavior the
+// component depends on: the `open` attribute reflecting visibility, and
+// close() dispatching the native 'close' event ConfirmDialog listens for.
+beforeEach(() => {
+  HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+    this.setAttribute('open', '');
+  };
+  HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+    this.dispatchEvent(new Event('close'));
+  };
+});
+
+describe('ConfirmDialog', () => {
+  afterEach(cleanup);
+
+  it('renders the title and message when open', () => {
+    render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Remove passkey"
+        message="This cannot be undone."
+      />,
+    );
+    expect(screen.getByText('Remove passkey')).toBeTruthy();
+    expect(screen.getByText('This cannot be undone.')).toBeTruthy();
+  });
+
+  it('renders rich message content', () => {
+    render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Remove plugin"
+        message={
+          <>
+            Remove <strong>Example</strong>?
+          </>
+        }
+      />,
+    );
+    expect(screen.getByText('Example').tagName).toBe('STRONG');
+  });
+
+  it('calls onClose on Cancel', () => {
+    const onClose = vi.fn();
+    render(
+      <ConfirmDialog open onClose={onClose} onConfirm={() => {}} title="Remove" message="Sure?" />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('calls onConfirm on the confirm action, without itself closing', () => {
+    const onConfirm = vi.fn();
+    const onClose = vi.fn();
+    render(
+      <ConfirmDialog
+        open
+        onClose={onClose}
+        onConfirm={onConfirm}
+        title="Remove"
+        message="Sure?"
+        confirmLabel="Remove"
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Remove' }));
+    expect(onConfirm).toHaveBeenCalledOnce();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('uses custom confirm/cancel labels', () => {
+    render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Sign out"
+        message="Sign out of this device?"
+        confirmLabel="Sign out"
+        cancelLabel="Stay signed in"
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Sign out' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: 'Stay signed in' })).toBeTruthy();
+  });
+
+  it('disables both actions and shows the error slot when pending', () => {
+    render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Remove plugin"
+        message="Sure?"
+        confirmLabel="Removing…"
+        pending
+        error="Server error — try again."
+      />,
+    );
+    expect((screen.getByRole('button', { name: 'Cancel' }) as HTMLButtonElement).disabled).toBe(
+      true,
+    );
+    expect((screen.getByRole('button', { name: 'Removing…' }) as HTMLButtonElement).disabled).toBe(
+      true,
+    );
+    expect(screen.getByText('Server error — try again.')).toBeTruthy();
+  });
+
+  it('renders a destructive confirm action distinctly from the default variant', () => {
+    const { rerender } = render(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Remove"
+        message="Sure?"
+        confirmLabel="Remove"
+      />,
+    );
+    const defaultClass = screen.getByRole('button', { name: 'Remove' }).className;
+
+    rerender(
+      <ConfirmDialog
+        open
+        onClose={() => {}}
+        onConfirm={() => {}}
+        title="Remove"
+        message="Sure?"
+        confirmLabel="Remove"
+        destructive
+      />,
+    );
+    const destructiveClass = screen.getByRole('button', { name: 'Remove' }).className;
+    expect(destructiveClass).not.toBe(defaultClass);
+  });
+});

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

@@ -0,0 +1,57 @@
+/* DatePicker — trigger styled to match Input's height/border/radius/focus
+ * ring for visual consistency as a form field. */
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sv-space-2);
+  width: 100%;
+  padding: var(--sv-space-2) var(--sv-space-3);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+  color: var(--sv-color-text-primary);
+  background-color: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* Same iOS auto-zoom fix as Input — see its own module.css for why. */
+@media (pointer: coarse) {
+  .trigger {
+    font-size: var(--sv-font-size-md);
+  }
+}
+
+.trigger:focus-visible {
+  outline: none;
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.triggerValue {
+  color: var(--sv-color-text-primary);
+}
+
+.triggerPlaceholder {
+  color: var(--sv-color-text-muted);
+}
+
+.popoverBody {
+  padding: var(--sv-space-3);
+}
+
+.drawerBody {
+  padding: var(--sv-space-4);
+  padding-bottom: max(var(--sv-space-4), env(safe-area-inset-bottom));
+}

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useState } from 'react';
+import { useIsMobile } from '../../hooks';
+import { Calendar } from '../Calendar/Calendar';
+import { formatDateShort } from '../Calendar/dateUtils';
+import { Drawer } from '../Drawer/Drawer';
+import { Icon } from '../Icon/Icon';
+import { Popover } from '../Popover/Popover';
+import styles from './DatePicker.module.css';
+
+export interface DatePickerProps {
+  value: Date | null;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  placeholder?: string;
+  'aria-label': string;
+  disabled?: boolean;
+}
+
+// Wide enough for the 7-column Calendar grid (44px touch-target cells) plus
+// its own padding, without being so wide it looks odd as a Popover panel.
+const POPOVER_WIDTH = 320;
+
+/**
+ * DatePicker — a form field pairing a compact trigger with `Calendar`:
+ * `Popover` on desktop, a bottom-sheet `Drawer` on mobile (the platform's
+ * standard adaptive-surface pattern, matching `Menu`). Date-only (decision
+ * D6 in the mobile design-system plan) — time and range selection are future
+ * scope; recurrence UI stays plugin-side.
+ *
+ * Unlike `Menu`, the trigger is built in rather than supplied by the caller
+ * — a date picker is a form field (consistent with `Input`/`Select`), not an
+ * arbitrary action-menu trigger.
+ */
+export function DatePicker({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  placeholder = 'Select date',
+  'aria-label': ariaLabel,
+  disabled = false,
+}: DatePickerProps) {
+  const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
+
+  function handleSelect(date: Date) {
+    onChange(date);
+    setOpen(false);
+  }
+
+  const trigger = (
+    <button
+      type="button"
+      className={styles.trigger}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      aria-haspopup="dialog"
+      aria-expanded={open}
+      onClick={() => setOpen((o) => !o)}
+    >
+      <span className={value ? styles.triggerValue : styles.triggerPlaceholder}>
+        {value ? formatDateShort(value) : placeholder}
+      </span>
+      <Icon name="calendar" size="sm" aria-hidden />
+    </button>
+  );
+
+  const calendar = (
+    <Calendar
+      value={value}
+      onChange={handleSelect}
+      minDate={minDate}
+      maxDate={maxDate}
+      aria-label={ariaLabel}
+    />
+  );
+
+  if (isMobile) {
+    return (
+      <>
+        {trigger}
+        <Drawer open={open} onClose={() => setOpen(false)} aria-label={ariaLabel}>
+          <div className={styles.drawerBody}>{calendar}</div>
+        </Drawer>
+      </>
+    );
+  }
+
+  return (
+    <Popover
+      trigger={trigger}
+      open={open}
+      onClose={() => setOpen(false)}
+      aria-label={ariaLabel}
+      width={POPOVER_WIDTH}
+    >
+      <div className={styles.popoverBody}>{calendar}</div>
+    </Popover>
+  );
+}