@sovereignfs/ui 0.83.1 → 0.89.1

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

@@ -1,67 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { FileDropzone } from '../FileDropzone';
-
-afterEach(cleanup);
-
-describe('FileDropzone', () => {
-  it('renders the label and hint', () => {
-    render(
-      <FileDropzone
-        label="Choose a ZIP file"
-        hint="or drag and drop here"
-        ariaLabel="Upload ZIP file"
-        onFileSelect={vi.fn()}
-      />,
-    );
-    expect(screen.getByText('Choose a ZIP file')).toBeDefined();
-    expect(screen.getByText('or drag and drop here')).toBeDefined();
-  });
-
-  it('exposes an accessible name via aria-label', () => {
-    render(
-      <FileDropzone label="Choose a file" ariaLabel="Upload font file" onFileSelect={vi.fn()} />,
-    );
-    expect(screen.getByLabelText('Upload font file')).toBeDefined();
-  });
-
-  it('forwards accept to the native file input', () => {
-    render(
-      <FileDropzone
-        label="Choose a file"
-        ariaLabel="Upload"
-        accept=".zip"
-        onFileSelect={vi.fn()}
-      />,
-    );
-    const input = screen.getByLabelText('Upload') as HTMLInputElement;
-    expect(input.accept).toBe('.zip');
-  });
-
-  it('calls onFileSelect with the picked file', () => {
-    const onFileSelect = vi.fn();
-    render(<FileDropzone label="Choose a file" ariaLabel="Upload" onFileSelect={onFileSelect} />);
-    const input = screen.getByLabelText('Upload') as HTMLInputElement;
-    const file = new File(['content'], 'font.woff2');
-    fireEvent.change(input, { target: { files: [file] } });
-    expect(onFileSelect).toHaveBeenCalledWith(file);
-  });
-
-  it('calls onFileSelect with the dropped file', () => {
-    const onFileSelect = vi.fn();
-    render(<FileDropzone label="Choose a file" ariaLabel="Upload" onFileSelect={onFileSelect} />);
-    const dropzone = screen.getByLabelText('Upload').closest('label');
-    if (!dropzone) throw new Error('dropzone label not found');
-    const file = new File(['content'], 'font.woff2');
-    fireEvent.drop(dropzone, { dataTransfer: { files: [file] } });
-    expect(onFileSelect).toHaveBeenCalledWith(file);
-  });
-
-  it('is disabled when the disabled prop is set', () => {
-    render(
-      <FileDropzone label="Choose a file" ariaLabel="Upload" disabled onFileSelect={vi.fn()} />,
-    );
-    expect((screen.getByLabelText('Upload') as HTMLInputElement).disabled).toBe(true);
-  });
-});

package/src/components/FormField/FormField.module.css

@@ -1,33 +0,0 @@
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sv-space-1);
-  /* Every local .field/.fieldGroup class this component replaced set this
-     explicitly. Without it, a parent with align-items: flex-start (needed so
-     submit buttons don't stretch full-width) shrink-wraps this wrapper to its
-     content's intrinsic width instead of filling the available space. */
-  width: 100%;
-}
-
-.label {
-  font-size: var(--sv-font-size-sm);
-  font-weight: var(--sv-font-weight-medium);
-  color: var(--sv-color-text-primary);
-}
-
-.required {
-  color: var(--sv-color-error-text);
-  margin-left: var(--sv-space-1);
-}
-
-.hint {
-  margin: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-text-muted);
-}
-
-.error {
-  margin: 0;
-  font-size: var(--sv-font-size-xs);
-  color: var(--sv-color-error-text);
-}

package/src/components/FormField/FormField.tsx

@@ -1,78 +0,0 @@
-import type { ReactNode } from 'react';
-import { useId } from 'react';
-import styles from './FormField.module.css';
-
-/** Props to spread onto the field's actual form control. */
-export interface FormFieldRenderProps {
-  id: string;
-  'aria-describedby'?: string;
-  'aria-invalid'?: boolean;
-  required?: boolean;
-}
-
-export interface FormFieldProps {
-  label: string;
-  hint?: string;
-  error?: string;
-  /** Explicit control id. Auto-generated via `useId()` when omitted. */
-  id?: string;
-  required?: boolean;
-  className?: string;
-  /** Render prop — receives the props that must be spread onto the control
-   * so the label, hint, and error stay associated with it. */
-  children: (field: FormFieldRenderProps) => ReactNode;
-}
-
-/**
- * FormField — accessible label + hint/error wrapper for a single form control.
- * Wires `htmlFor`/`id` and `aria-describedby`/`aria-invalid` onto the control
- * itself (via the render-prop `field` object), not a surrounding element, so
- * screen readers reliably announce the hint or error as part of the control.
- */
-export function FormField({
-  label,
-  hint,
-  error,
-  id,
-  required = false,
-  className,
-  children,
-}: FormFieldProps) {
-  const generatedId = useId();
-  const fieldId = id ?? generatedId;
-  const hintId = `${fieldId}-hint`;
-  const errorId = `${fieldId}-error`;
-  const describedBy =
-    [hint && !error && hintId, error && errorId].filter(Boolean).join(' ') || undefined;
-
-  const field: FormFieldRenderProps = {
-    id: fieldId,
-    'aria-describedby': describedBy,
-    'aria-invalid': error ? true : undefined,
-    required: required || undefined,
-  };
-
-  return (
-    <div className={[styles.field, className].filter(Boolean).join(' ')}>
-      <label className={styles.label} htmlFor={fieldId}>
-        {label}
-        {required && (
-          <span className={styles.required} aria-hidden="true">
-            *
-          </span>
-        )}
-      </label>
-      {children(field)}
-      {hint && !error && (
-        <p id={hintId} className={styles.hint}>
-          {hint}
-        </p>
-      )}
-      {error && (
-        <p id={errorId} className={styles.error} role="alert">
-          {error}
-        </p>
-      )}
-    </div>
-  );
-}

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

@@ -1,83 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it } from 'vitest';
-import { cleanup, render, screen } from '@testing-library/react';
-import { FormField } from '../FormField';
-
-afterEach(cleanup);
-
-describe('FormField', () => {
-  it('associates the label with the control via htmlFor/id', () => {
-    render(
-      <FormField label="Email" id="email">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByLabelText('Email')).toBeDefined();
-  });
-
-  it('generates an id when none is provided', () => {
-    render(<FormField label="Email">{(field) => <input {...field} />}</FormField>);
-    const input = screen.getByLabelText('Email') as HTMLInputElement;
-    expect(input.id).toBeTruthy();
-  });
-
-  it('wires the hint to the control via aria-describedby', () => {
-    render(
-      <FormField label="Username" hint="Letters and numbers only." id="username">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText('Username');
-    const hint = screen.getByText('Letters and numbers only.');
-    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
-  });
-
-  it('wires the error to the control via aria-describedby and marks it invalid', () => {
-    render(
-      <FormField label="Password" error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText('Password');
-    const error = screen.getByText('Too short.');
-    expect(input.getAttribute('aria-describedby')).toBe(error.id);
-    expect(input.getAttribute('aria-invalid')).toBe('true');
-  });
-
-  it('renders the error with role="alert"', () => {
-    render(
-      <FormField label="Password" error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByRole('alert').textContent).toBe('Too short.');
-  });
-
-  it('hides the hint when an error is present', () => {
-    render(
-      <FormField label="Password" hint="At least 8 characters." error="Too short." id="password">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.queryByText('At least 8 characters.')).toBeNull();
-  });
-
-  it('shows a required indicator and sets required on the control', () => {
-    render(
-      <FormField label="Full name" required id="name">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    const input = screen.getByLabelText(/Full name/) as HTMLInputElement;
-    expect(input.required).toBe(true);
-  });
-
-  it('does not set aria-describedby when there is no hint or error', () => {
-    render(
-      <FormField label="Nickname" id="nickname">
-        {(field) => <input {...field} />}
-      </FormField>,
-    );
-    expect(screen.getByLabelText('Nickname').hasAttribute('aria-describedby')).toBe(false);
-  });
-});

package/src/components/GripIcon/GripIcon.tsx

@@ -1,27 +0,0 @@
-export interface GripIconProps {
-  size?: number;
-  className?: string;
-}
-
-/** Six-dot drag-handle affordance. No baked-in pointer-events or color —
- *  a consumer that needs `pointer-events: none` (e.g. a button wrapping it)
- *  or a specific color passes those via `className`/`currentColor`. */
-export function GripIcon({ size = 14, className }: GripIconProps) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 14 14"
-      fill="none"
-      aria-hidden="true"
-      className={className}
-    >
-      {/* Two columns of three dots */}
-      {[3, 7, 11].map((cy) =>
-        [4, 10].map((cx) => (
-          <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.2} fill="currentColor" />
-        )),
-      )}
-    </svg>
-  );
-}

package/src/components/Header/Header.module.css

@@ -1,62 +0,0 @@
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 48px;
-  padding: var(--sv-space-2) var(--sv-space-4);
-  border-bottom: var(--sv-border-width-hairline) solid var(--sv-color-border);
-  background-color: var(--sv-color-surface);
-}
-
-.left {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-2);
-  min-width: 0;
-}
-
-.right {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  flex-shrink: 0;
-}
-
-.brandBadge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  border-radius: var(--sv-radius-md);
-  background-color: var(--sv-color-accent);
-  color: var(--sv-color-text-on-accent);
-  font-size: var(--sv-font-size-xs);
-  font-weight: var(--sv-font-weight-semibold);
-  text-decoration: none;
-  overflow: hidden;
-}
-
-.brandLogoImg {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.plugin {
-  display: flex;
-  align-items: center;
-  gap: var(--sv-space-1);
-  min-width: 0;
-  text-decoration: none;
-  color: var(--sv-color-text-primary);
-}
-
-.pluginName {
-  font-size: var(--sv-font-size-md);
-  font-weight: var(--sv-font-weight-semibold);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}