@sovereignfs/ui 0.23.0 → 0.33.0

package/src/components/TagInput/TagInput.module.css

@@ -0,0 +1,141 @@
+.wrapper {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  gap: var(--sv-space-1);
+}
+
+.control {
+  display: flex;
+  min-height: 40px;
+  width: 100%;
+  align-items: center;
+  gap: var(--sv-space-1);
+  flex-wrap: wrap;
+  padding: 5px var(--sv-space-2);
+  color: var(--sv-color-text-primary);
+  background: var(--sv-color-surface);
+  border: 1px solid var(--sv-color-border-strong);
+  border-radius: var(--sv-radius-md);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.control:focus-within {
+  border-color: var(--sv-color-accent);
+  box-shadow: 0 0 0 2px var(--sv-color-focus-ring);
+}
+
+.invalid {
+  border-color: var(--sv-color-error-border);
+}
+
+.invalid:focus-within {
+  border-color: var(--sv-color-error-border);
+  box-shadow: 0 0 0 2px var(--sv-color-error-border);
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.tag {
+  display: inline-flex;
+  max-width: 100%;
+  min-height: 28px;
+  align-items: center;
+  gap: var(--sv-space-1);
+  padding-inline: var(--sv-space-2) 2px;
+  color: var(--sv-color-text-primary);
+  background: var(--sv-color-surface-sunken);
+  border: 1px solid var(--sv-color-border);
+  border-radius: var(--sv-radius-full);
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-xs);
+  font-weight: var(--sv-font-weight-medium);
+}
+
+.tagLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.removeButton {
+  display: inline-flex;
+  width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--sv-color-text-muted);
+  background: transparent;
+  border: 0;
+  border-radius: var(--sv-radius-full);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+}
+
+@media (hover: hover) {
+  .removeButton:hover:not(:disabled) {
+    color: var(--sv-color-text-primary);
+    background: var(--sv-color-surface);
+  }
+}
+
+.removeButton:focus-visible {
+  outline: 2px solid var(--sv-color-focus-ring);
+  outline-offset: 1px;
+}
+
+.removeButton:disabled {
+  cursor: not-allowed;
+}
+
+.input {
+  min-width: 120px;
+  flex: 1 1 140px;
+  height: 28px;
+  padding: 0 var(--sv-space-1);
+  color: var(--sv-color-text-primary);
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-sm);
+  line-height: 1.5;
+}
+
+.input::placeholder {
+  color: var(--sv-color-text-muted);
+}
+
+.input:disabled {
+  cursor: not-allowed;
+}
+
+.hint,
+.error {
+  margin: 0;
+  font-family: var(--sv-font-family);
+  font-size: var(--sv-font-size-caption);
+  line-height: 1.4;
+}
+
+.hint {
+  color: var(--sv-color-text-muted);
+}
+
+.error {
+  color: var(--sv-color-error-text);
+}
+
+@media (pointer: coarse) {
+  .input {
+    font-size: var(--sv-font-size-md);
+  }
+}

package/src/components/TagInput/TagInput.stories.tsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TagInput } from './TagInput';
+import { FormField } from '../FormField/FormField';
+
+const meta = {
+  title: 'Components/TagInput',
+  component: TagInput,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Controlled multi-value input for frontmatter tags, labels, and lightweight taxonomies.',
+      },
+    },
+  },
+  args: {
+    value: ['writing', 'launch'],
+    onChange: () => {},
+  },
+} satisfies Meta<typeof TagInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ControlledTagInput({
+  initial = ['writing', 'launch'],
+  disabled = false,
+  error,
+}: {
+  initial?: string[];
+  disabled?: boolean;
+  error?: string;
+}) {
+  const [tags, setTags] = useState(initial);
+  return (
+    <TagInput
+      value={tags}
+      onChange={setTags}
+      placeholder="Add tag"
+      disabled={disabled}
+      error={error}
+      aria-label="Tags"
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <ControlledTagInput />,
+};
+
+export const WithFormField: Story = {
+  render: () => {
+    const [tags, setTags] = useState(['plainwrite', 'frontmatter']);
+    return (
+      <FormField label="Tags" hint="Press Enter or comma to add a tag." id="story-tags">
+        {(field) => (
+          <TagInput
+            {...field}
+            value={tags}
+            onChange={setTags}
+            validateTag={(tag) =>
+              tag.length > 24 ? 'Tags must be 24 characters or fewer.' : undefined
+            }
+          />
+        )}
+      </FormField>
+    );
+  },
+};
+
+export const Error: Story = {
+  render: () => <ControlledTagInput error="At least one public tag is required." />,
+};
+
+export const Disabled: Story = {
+  render: () => <ControlledTagInput disabled />,
+};
+
+export const Keyboard: Story = {
+  render: () => {
+    const [tags, setTags] = useState<string[]>([]);
+    return (
+      <TagInput
+        value={tags}
+        onChange={setTags}
+        hint="Enter adds; comma separates; Backspace removes the last chip when the input is empty."
+        placeholder="Type and press Enter"
+        aria-label="Keyboard tag input"
+      />
+    );
+  },
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <ControlledTagInput
+      initial={['editorial-calendar', 'launch', 'very-long-tag-name-that-still-clips', 'published']}
+    />
+  ),
+};
+
+export const Mobile: Story = {
+  parameters: {
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  render: () => <ControlledTagInput initial={['mobile', 'touch', 'frontmatter']} />,
+};

package/src/components/TagInput/TagInput.tsx

@@ -0,0 +1,174 @@
+'use client';
+
+import type { KeyboardEvent, ClipboardEvent } from 'react';
+import { useMemo, useState } from 'react';
+import styles from './TagInput.module.css';
+
+export interface TagInputProps {
+  value: string[];
+  onChange: (value: string[]) => void;
+  id?: string;
+  name?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  hint?: string;
+  validateTag?: (tag: string, currentTags: string[]) => string | undefined;
+  separators?: RegExp;
+  className?: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  'aria-label'?: string;
+}
+
+const DEFAULT_SEPARATORS = /[\n,]+/;
+
+const splitTags = (value: string, separators: RegExp) =>
+  value
+    .split(separators)
+    .map((tag) => tag.trim())
+    .filter(Boolean);
+
+/**
+ * TagInput — controlled multi-value input for frontmatter tags, labels, and
+ * lightweight taxonomies. Use inside FormField just like a native input.
+ */
+export function TagInput({
+  value,
+  onChange,
+  id,
+  name,
+  placeholder = 'Add tag',
+  disabled = false,
+  required = false,
+  error,
+  hint,
+  validateTag,
+  separators = DEFAULT_SEPARATORS,
+  className,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  'aria-label': ariaLabel,
+}: TagInputProps) {
+  const [draft, setDraft] = useState('');
+  const [localError, setLocalError] = useState<string | undefined>();
+  const message = error ?? localError ?? hint;
+  const messageId = message && id ? `${id}-tag-message` : undefined;
+  const describedBy = [ariaDescribedBy, messageId].filter(Boolean).join(' ') || undefined;
+  const normalized = useMemo(() => new Set(value.map((tag) => tag.toLocaleLowerCase())), [value]);
+
+  const addTags = (tags: string[]) => {
+    const next = [...value];
+    const nextNormalized = new Set(normalized);
+
+    for (const tag of tags) {
+      const normalizedTag = tag.toLocaleLowerCase();
+      const duplicate = nextNormalized.has(normalizedTag);
+      const validationMessage = duplicate
+        ? 'Tag already exists.'
+        : (validateTag?.(tag, next) ?? undefined);
+
+      if (validationMessage) {
+        setLocalError(validationMessage);
+        return;
+      }
+
+      next.push(tag);
+      nextNormalized.add(normalizedTag);
+    }
+
+    setLocalError(undefined);
+    setDraft('');
+    onChange(next);
+  };
+
+  const commitDraft = () => {
+    const tags = splitTags(draft, separators);
+    if (tags.length === 0) {
+      return;
+    }
+    addTags(tags);
+  };
+
+  const removeTag = (index: number) => {
+    setLocalError(undefined);
+    onChange(value.filter((_, tagIndex) => tagIndex !== index));
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' || event.key === ',') {
+      event.preventDefault();
+      commitDraft();
+    }
+
+    if (event.key === 'Backspace' && draft.length === 0 && value.length > 0) {
+      event.preventDefault();
+      removeTag(value.length - 1);
+    }
+  };
+
+  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    const text = event.clipboardData.getData('text');
+    const tags = splitTags(text, separators);
+    if (tags.length <= 1) {
+      return;
+    }
+    event.preventDefault();
+    addTags(tags);
+  };
+
+  return (
+    <div className={[styles.wrapper, className].filter(Boolean).join(' ')}>
+      <div
+        className={[
+          styles.control,
+          disabled ? styles.disabled : undefined,
+          error || localError || ariaInvalid ? styles.invalid : undefined,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        {value.map((tag, index) => (
+          <span key={`${tag}-${index}`} className={styles.tag}>
+            <span className={styles.tagLabel}>{tag}</span>
+            <button
+              type="button"
+              className={styles.removeButton}
+              onClick={() => removeTag(index)}
+              disabled={disabled}
+              aria-label={`Remove ${tag}`}
+            >
+              ×
+            </button>
+          </span>
+        ))}
+        <input
+          id={id}
+          name={name}
+          className={styles.input}
+          value={draft}
+          placeholder={value.length === 0 ? placeholder : undefined}
+          disabled={disabled}
+          required={required && value.length === 0}
+          aria-describedby={describedBy}
+          aria-invalid={ariaInvalid ?? (Boolean(error || localError) || undefined)}
+          aria-label={ariaLabel}
+          onChange={(event) => setDraft(event.currentTarget.value)}
+          onKeyDown={handleKeyDown}
+          onBlur={commitDraft}
+          onPaste={handlePaste}
+        />
+      </div>
+      {message && (
+        <p
+          id={messageId}
+          className={error || localError ? styles.error : styles.hint}
+          role={error || localError ? 'alert' : undefined}
+        >
+          {message}
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,69 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@testing-library/react';
+import { TagInput } from '../TagInput';
+
+afterEach(cleanup);
+
+describe('TagInput', () => {
+  it('adds a tag with Enter', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={[]} onChange={onChange} aria-label="Tags" />);
+
+    const input = screen.getByLabelText('Tags');
+    fireEvent.change(input, { target: { value: 'launch' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(onChange).toHaveBeenCalledWith(['launch']);
+  });
+
+  it('removes the last tag with Backspace when the input is empty', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft', 'publish']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.keyDown(screen.getByLabelText('Tags'), { key: 'Backspace' });
+
+    expect(onChange).toHaveBeenCalledWith(['draft']);
+  });
+
+  it('splits pasted comma-separated tags', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.paste(screen.getByLabelText('Tags'), {
+      clipboardData: {
+        getData: () => 'launch, release\nnotes',
+      },
+    });
+
+    expect(onChange).toHaveBeenCalledWith(['draft', 'launch', 'release', 'notes']);
+  });
+
+  it('shows validation messages and does not add invalid tags', () => {
+    const onChange = vi.fn();
+    render(
+      <TagInput
+        value={[]}
+        onChange={onChange}
+        aria-label="Tags"
+        validateTag={(tag) => (tag.length > 4 ? 'Tag is too long.' : undefined)}
+      />,
+    );
+
+    const input = screen.getByLabelText('Tags');
+    fireEvent.change(input, { target: { value: 'launch' } });
+    fireEvent.keyDown(input, { key: 'Enter' });
+
+    expect(screen.getByRole('alert').textContent).toBe('Tag is too long.');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('renders removable chips with accessible names', () => {
+    const onChange = vi.fn();
+    render(<TagInput value={['draft']} onChange={onChange} aria-label="Tags" />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove draft' }));
+
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+});

package/src/components/Toast/Toast.module.css

@@ -96,8 +96,10 @@
   font-size: var(--sv-font-size-md);
 }
 
-.close:hover {
-  color: var(--sv-color-text-primary);
+@media (hover: hover) {
+  .close:hover {
+    color: var(--sv-color-text-primary);
+  }
 }
 
 @keyframes toastIn {

package/src/components/Tooltip/Tooltip.module.css

@@ -20,7 +20,12 @@
   transition: opacity 0.1s ease;
 }
 
-.wrapper:hover .tip,
+@media (hover: hover) {
+  .wrapper:hover .tip {
+    opacity: 1;
+  }
+}
+
 .wrapper:focus-within .tip {
   opacity: 1;
 }

package/src/hooks/__tests__/useDoubleTap.test.tsx

@@ -0,0 +1,117 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { useDoubleTapHandler, useSingleOrDoubleTap } from '../useDoubleTap';
+
+// A minimal harness: the hook returns a handler bound to onClick. Real
+// double-clicks report detail===2; two separate taps report detail===1 each.
+function DoubleTapHarness({ onDouble }: { onDouble: () => void }) {
+  const handle = useDoubleTapHandler<React.MouseEvent>(() => onDouble());
+  return (
+    <button data-testid="btn" onClick={handle}>
+      tap
+    </button>
+  );
+}
+
+function SingleOrDoubleHarness({
+  onSingle,
+  onDouble,
+}: {
+  onSingle: () => void;
+  onDouble: () => void;
+}) {
+  const handle = useSingleOrDoubleTap<React.MouseEvent>(
+    () => onSingle(),
+    () => onDouble(),
+  );
+  return (
+    <button data-testid="btn" onClick={handle}>
+      tap
+    </button>
+  );
+}
+
+describe('useDoubleTapHandler', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    cleanup();
+  });
+
+  it('fires immediately on a native double-click (detail === 2)', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    fireEvent.click(getByTestId('btn'), { detail: 2 });
+    expect(onDouble).toHaveBeenCalledOnce();
+  });
+
+  it('fires on two touch taps within the window', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(100));
+    fireEvent.click(btn, { detail: 1 });
+    expect(onDouble).toHaveBeenCalledOnce();
+  });
+
+  it('does not fire on a single tap', () => {
+    const onDouble = vi.fn();
+    const { getByTestId } = render(<DoubleTapHarness onDouble={onDouble} />);
+    fireEvent.click(getByTestId('btn'), { detail: 1 });
+    act(() => void vi.advanceTimersByTime(1000));
+    expect(onDouble).not.toHaveBeenCalled();
+  });
+});
+
+describe('useSingleOrDoubleTap', () => {
+  beforeEach(() => vi.useFakeTimers());
+  afterEach(() => {
+    vi.useRealTimers();
+    cleanup();
+  });
+
+  it('defers the single action until the double-tap window closes', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    fireEvent.click(getByTestId('btn'), { detail: 1 });
+    // Single must NOT have fired yet — this deferral is the whole point.
+    expect(onSingle).not.toHaveBeenCalled();
+    act(() => void vi.advanceTimersByTime(350));
+    expect(onSingle).toHaveBeenCalledOnce();
+    expect(onDouble).not.toHaveBeenCalled();
+  });
+
+  it('fires double (and never single) when a second tap arrives in time', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(100));
+    fireEvent.click(btn, { detail: 1 });
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onDouble).toHaveBeenCalledOnce();
+    expect(onSingle).not.toHaveBeenCalled();
+  });
+
+  it('fires double on a native double-click and cancels the pending single', () => {
+    const onSingle = vi.fn();
+    const onDouble = vi.fn();
+    const { getByTestId } = render(
+      <SingleOrDoubleHarness onSingle={onSingle} onDouble={onDouble} />,
+    );
+    const btn = getByTestId('btn');
+    fireEvent.click(btn, { detail: 1 });
+    fireEvent.click(btn, { detail: 2 });
+    act(() => void vi.advanceTimersByTime(500));
+    expect(onDouble).toHaveBeenCalledOnce();
+    expect(onSingle).not.toHaveBeenCalled();
+  });
+});