@sovereignfs/ui 0.54.0 → 0.89.1

package/src/components/Tabs/Tabs.module.css

@@ -1,56 +0,0 @@
-.tablist {
-  display: flex;
-  border-bottom: 1px solid var(--sv-color-border);
-  /* Horizontal scroll on mobile — scrollbar hidden for clean appearance */
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.tablist::-webkit-scrollbar {
-  display: none;
-}
-
-.tab {
-  flex-shrink: 0;
-  /* 36px rendered height, matching this scale's other 36px controls (Input,
-     Select). Vertical padding hardcoded to hit the exact height, same
-     reasoning as Button — accounting for the 2px border-bottom below,
-     which (content-box) adds to the rendered height on top of font-size +
-     padding. */
-  padding: 10px var(--sv-space-4);
-  border: none;
-  border-bottom: 2px solid transparent;
-  /* Negative margin pulls the 2px border flush with the tablist border-bottom */
-  margin-bottom: -1px;
-  background: transparent;
-  font-family: var(--sv-font-family);
-  font-size: var(--sv-font-size-sm);
-  line-height: 1;
-  cursor: pointer;
-  transition:
-    color 0.12s ease,
-    border-color 0.12s ease;
-  white-space: nowrap;
-}
-
-.tab:focus-visible {
-  outline: 2px solid var(--sv-color-focus-ring);
-  outline-offset: -2px;
-}
-
-.active {
-  color: var(--sv-color-text-primary);
-  font-weight: var(--sv-font-weight-semibold);
-  border-bottom-color: var(--sv-color-accent);
-}
-
-.inactive {
-  color: var(--sv-color-text-muted);
-  font-weight: var(--sv-font-weight-medium);
-}
-
-@media (hover: hover) {
-  .inactive:hover {
-    color: var(--sv-color-text-primary);
-  }
-}

package/src/components/Tabs/Tabs.stories.tsx

@@ -1,100 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Tabs } from './Tabs';
-
-const meta = {
-  title: 'Components/Tabs',
-  component: Tabs,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Underline tab nav. Stateless — caller owns `value` + `onChange` and renders the active panel. Mobile: scrolls horizontally with the scrollbar hidden.',
-      },
-    },
-  },
-  args: {
-    items: [{ label: 'Tab', value: 'tab' }],
-    value: 'tab',
-    onChange: () => {},
-    'aria-label': 'Tabs',
-  },
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ---------------------------------------------------------------------------
-
-const CONSOLE_TABS = [
-  { label: 'Overview', value: 'overview' },
-  { label: 'Users', value: 'users' },
-  { label: 'Plugins', value: 'plugins' },
-  { label: 'Settings', value: 'settings' },
-  { label: 'Health', value: 'health' },
-];
-
-const ACCOUNT_TABS = [
-  { label: 'Profile', value: 'profile' },
-  { label: 'Security', value: 'security' },
-  { label: 'Appearance', value: 'appearance' },
-  { label: 'Notifications', value: 'notifications' },
-  { label: 'Billing', value: 'billing' },
-  { label: 'Data', value: 'data' },
-];
-
-/** Console panel navigation. */
-export const Console: Story = {
-  render: (_args) => {
-    const [tab, setTab] = useState('overview');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)' }}>
-        <Tabs items={CONSOLE_TABS} value={tab} onChange={setTab} aria-label="Console" />
-        <div
-          style={{
-            padding: 'var(--sv-space-4)',
-            color: 'var(--sv-color-text-muted)',
-            fontSize: 'var(--sv-font-size-sm)',
-          }}
-        >
-          Showing: <strong style={{ color: 'var(--sv-color-text-primary)' }}>{tab}</strong>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** Account settings — more tabs, scrolls on narrow viewports. */
-export const Account: Story = {
-  render: (_args) => {
-    const [tab, setTab] = useState('profile');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)', maxWidth: 480 }}>
-        <Tabs items={ACCOUNT_TABS} value={tab} onChange={setTab} aria-label="Account settings" />
-        <div
-          style={{
-            padding: 'var(--sv-space-4)',
-            color: 'var(--sv-color-text-muted)',
-            fontSize: 'var(--sv-font-size-sm)',
-          }}
-        >
-          Showing: <strong style={{ color: 'var(--sv-color-text-primary)' }}>{tab}</strong>
-        </div>
-      </div>
-    );
-  },
-};
-
-/** Narrow viewport — confirms horizontal scroll behaviour. */
-export const NarrowScroll: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  render: (_args) => {
-    const [tab, setTab] = useState('profile');
-    return (
-      <div style={{ fontFamily: 'var(--sv-font-family)' }}>
-        <Tabs items={ACCOUNT_TABS} value={tab} onChange={setTab} aria-label="Account settings" />
-      </div>
-    );
-  },
-};

package/src/components/Tabs/Tabs.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import styles from './Tabs.module.css';
-
-export interface TabItem {
-  label: string;
-  value: string;
-}
-
-export interface TabsProps {
-  items: TabItem[];
-  value: string;
-  onChange: (value: string) => void;
-  'aria-label': string;
-}
-
-/**
- * Tabs — underline tab nav for section switching.
- *
- * Stateless: the active tab is fully controlled via `value` + `onChange`, so the
- * caller owns state and controls the rendered panel content. This keeps the
- * component RSC-compatible when wrapped by a client boundary upstream.
- *
- * Mobile: the tab bar scrolls horizontally with the native scrollbar hidden.
- */
-export function Tabs({ items, value, onChange, 'aria-label': ariaLabel }: TabsProps) {
-  return (
-    <div role="tablist" aria-label={ariaLabel} className={styles.tablist}>
-      {items.map((item) => {
-        const active = item.value === value;
-        return (
-          <button
-            key={item.value}
-            type="button"
-            role="tab"
-            aria-selected={active}
-            className={[styles.tab, active ? styles.active : styles.inactive].join(' ')}
-            onClick={() => onChange(item.value)}
-          >
-            {item.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, render, screen, fireEvent } from '@testing-library/react';
-import { Tabs } from '../Tabs';
-
-afterEach(cleanup);
-
-const items = [
-  { label: 'Overview', value: 'overview' },
-  { label: 'Users', value: 'users' },
-  { label: 'Plugins', value: 'plugins' },
-];
-
-describe('Tabs', () => {
-  it('renders all items as tab buttons', () => {
-    render(<Tabs items={items} value="overview" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getAllByRole('tab').length).toBe(3);
-  });
-
-  it('marks the active tab as selected', () => {
-    render(<Tabs items={items} value="users" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getByRole('tab', { name: 'Users' }).getAttribute('aria-selected')).toBe('true');
-    expect(screen.getByRole('tab', { name: 'Overview' }).getAttribute('aria-selected')).toBe(
-      'false',
-    );
-  });
-
-  it('applies active class to the selected tab', () => {
-    render(<Tabs items={items} value="plugins" onChange={() => {}} aria-label="Console" />);
-    expect(screen.getByRole('tab', { name: 'Plugins' }).className).toContain('active');
-    expect(screen.getByRole('tab', { name: 'Overview' }).className).toContain('inactive');
-  });
-
-  it('calls onChange with the clicked tab value', () => {
-    const onChange = vi.fn();
-    render(<Tabs items={items} value="overview" onChange={onChange} aria-label="Console" />);
-    fireEvent.click(screen.getByRole('tab', { name: 'Users' }));
-    expect(onChange).toHaveBeenCalledWith('users');
-  });
-
-  it('exposes a tablist with the given aria-label', () => {
-    render(<Tabs items={items} value="overview" onChange={() => {}} aria-label="Nav" />);
-    expect(screen.getByRole('tablist', { name: 'Nav' })).toBeDefined();
-  });
-});

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

@@ -1,141 +0,0 @@
-.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

@@ -1,109 +0,0 @@
-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

@@ -1,174 +0,0 @@
-'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>
-  );
-}