@slipstream-ui/core 0.3.0 → 0.4.0

package/src/components/time-picker/TimePicker.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import { Input, type InputProps } from '../input/Input';
+
+export type TimePickerProps = Omit<InputProps, 'type' | 'onChange' | 'value' | 'defaultValue'> & {
+  /** "HH:MM" (24h) — controlled. */
+  value?: string;
+  /** "HH:MM" — initial value when uncontrolled. */
+  defaultValue?: string;
+  /** Fired with the time string ('' when cleared). */
+  onValueChange?: (value: string) => void;
+  /** Show a clear button once a time is selected. */
+  clearable?: boolean;
+};
+
+/**
+ * Native time field with an "HH:MM" contract. The platform supplies the
+ * picker, keyboard editing and locale behavior.
+ */
+export const TimePicker = React.forwardRef<HTMLInputElement, TimePickerProps>(function TimePicker(
+  { value, defaultValue, onValueChange, clearable = false, className, ...props },
+  ref
+) {
+  const [internal, setInternal] = React.useState(defaultValue ?? '');
+  const current = value ?? internal;
+
+  const commit = (next: string) => {
+    if (value === undefined) setInternal(next);
+    onValueChange?.(next);
+  };
+
+  return (
+    <div className={cn('relative flex items-center', className)}>
+      <Input
+        ref={ref}
+        type="time"
+        value={current}
+        onChange={(event) => commit(event.target.value)}
+        className={clearable && current ? 'pr-9' : undefined}
+        {...props}
+      />
+      {clearable && current && (
+        <button
+          type="button"
+          onClick={() => commit('')}
+          aria-label="Clear time"
+          className="absolute right-2 rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          ✕
+        </button>
+      )}
+    </div>
+  );
+});

package/src/components/time-picker/index.ts

@@ -0,0 +1 @@
+export * from './TimePicker';

package/src/components/timeline/Timeline.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { Timeline } from './Timeline';
+
+describe('Timeline', () => {
+  it('renders an ordered chronology with periods and descriptions', () => {
+    const { container } = render(
+      <Timeline
+        items={[
+          { title: 'Senior Engineer', period: '2023 — Present', description: 'Platform team' },
+          { title: 'Engineer', period: '2020 — 2023' },
+        ]}
+      />
+    );
+    expect(container.querySelector('ol')).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    expect(screen.getByText('2023 — Present')).toBeInTheDocument();
+    expect(screen.getByText('Platform team')).toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Timeline items={[{ title: 'Started' }]} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/timeline/Timeline.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+
+export type TimelineItem = {
+  title: string;
+  /** Period/date label (e.g. "2023 — Present"). */
+  period?: string;
+  description?: string;
+  icon?: React.ReactNode;
+  /** Muted items render dimmed (upcoming/archived). */
+  muted?: boolean;
+};
+
+export type TimelineProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, 'children'> & {
+  items: TimelineItem[];
+};
+
+/**
+ * Vertical chronology (experience, activity, audit trail). Renders an
+ * ordered list with a connector rule, so the sequence is conveyed
+ * structurally instead of by decoration alone.
+ */
+export const Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(function Timeline(
+  { items, className, ...props },
+  ref
+) {
+  return (
+    <ol ref={ref} className={cn('relative flex flex-col gap-6', className)} {...props}>
+      {items.map((item, index) => (
+        <li key={`${item.title}-${index}`} className="relative flex gap-4">
+          <div className="flex flex-col items-center">
+            <span
+              aria-hidden="true"
+              className={cn(
+                'mt-1 flex h-3 w-3 shrink-0 items-center justify-center rounded-full border-2',
+                item.muted ? 'border-border bg-background' : 'border-primary bg-primary'
+              )}
+            />
+            {index < items.length - 1 && <span aria-hidden="true" className="mt-1 w-px flex-1 bg-border" />}
+          </div>
+          <div className={cn('min-w-0 pb-1', item.muted && 'opacity-60')}>
+            {item.period && (
+              <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{item.period}</p>
+            )}
+            <p className="text-sm font-semibold">{item.title}</p>
+            {item.description && <p className="mt-1 text-sm text-muted-foreground">{item.description}</p>}
+            {item.icon && <div className="mt-1 text-muted-foreground [&_svg]:size-4">{item.icon}</div>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+});

package/src/components/timeline/index.ts

@@ -0,0 +1 @@
+export * from './Timeline';

package/src/components/toast/Toast.test.tsx

@@ -48,7 +48,12 @@ describe('Toast', () => {
 
   it('throws when useToast is used outside the provider', () => {
     const spy = vi.spyOn(console, 'error').mockImplementation(() => undefined);
+    // React 18 re-reports render errors asynchronously via jsdom's error
+    // event; swallow them so they cannot leak into the next test file.
+    const swallow = (event: ErrorEvent) => event.preventDefault();
+    window.addEventListener('error', swallow);
     expect(() => render(<Trigger options={{ title: 'x' }} />)).toThrow(/ToastProvider/);
+    window.removeEventListener('error', swallow);
     spy.mockRestore();
   });
 });

package/src/components/toast/Toast.tsx

@@ -1,23 +1,9 @@
 'use client';
 
 import * as React from 'react';
+import type { ToastAction, ToastOptions, ToastRecord } from './toast-store';
 
-export type ToastAction = {
-  label: string;
-  onClick: () => void;
-};
-
-export type ToastOptions = {
-  title: string;
-  description?: string;
-  action?: ToastAction;
-  /** Auto-dismiss delay in ms; 0 keeps the toast until dismissed. Default 5000. */
-  duration?: number;
-};
-
-export type ToastRecord = ToastOptions & {
-  id: string;
-};
+export type { ToastAction, ToastOptions, ToastRecord };
 
 export type ToastContextValue = {
   toasts: ToastRecord[];

package/src/components/toast/Toaster.test.tsx

@@ -0,0 +1,84 @@
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Toaster } from './Toaster';
+import { toast } from './toast-store';
+
+afterEach(() => {
+  toast.clear();
+  vi.useRealTimers();
+});
+
+describe('imperative toast', () => {
+  it('renders a toast fired outside React with its description', () => {
+    render(<Toaster />);
+    act(() => {
+      toast.success('Saved', 'Your changes are live');
+    });
+    expect(screen.getByText('Saved')).toBeInTheDocument();
+    expect(screen.getByText('Your changes are live')).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+  });
+
+  it('supports every variant helper and dismisses by id', async () => {
+    const user = userEvent.setup();
+    render(<Toaster richColors />);
+    act(() => {
+      toast.error('Upload failed');
+      toast.warning('Slow network');
+      toast.info('Heads up');
+    });
+    expect(screen.getByText('Upload failed')).toBeInTheDocument();
+    expect(screen.getByText('Slow network')).toBeInTheDocument();
+    expect(screen.getByText('Heads up')).toBeInTheDocument();
+
+    const ids = toast.dismiss;
+    expect(typeof ids).toBe('function');
+    await user.click(screen.getByRole('button', { name: 'Dismiss Upload failed' }));
+    expect(screen.queryByText('Upload failed')).not.toBeInTheDocument();
+  });
+
+  it('auto-dismisses after the duration', () => {
+    vi.useFakeTimers();
+    render(<Toaster />);
+    act(() => {
+      toast({ title: 'Ephemeral', duration: 1000 });
+    });
+    expect(screen.getByText('Ephemeral')).toBeInTheDocument();
+    act(() => {
+      vi.advanceTimersByTime(1200);
+    });
+    expect(screen.queryByText('Ephemeral')).not.toBeInTheDocument();
+  });
+
+  it('keeps duration=0 toasts until dismissed manually', async () => {
+    const user = userEvent.setup();
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+    render(<Toaster />);
+    act(() => {
+      toast({ title: 'Sticky', duration: 0 });
+    });
+    act(() => {
+      vi.advanceTimersByTime(10000);
+    });
+    expect(screen.getByText('Sticky')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Dismiss Sticky' }));
+    expect(screen.queryByText('Sticky')).not.toBeInTheDocument();
+  });
+
+  it('honours the position prop and exposes a labelled live region', () => {
+    const { container } = render(<Toaster position="top-left" label="Alerts" />);
+    const region = screen.getByRole('list', { name: 'Alerts' });
+    expect(region).toHaveClass('left-4', 'top-4', 'z-[60]');
+    expect(container).toBeTruthy();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Toaster />);
+    act(() => {
+      toast.info('Info', 'Details');
+    });
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/toast/Toaster.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+import {
+  getToastServerSnapshot,
+  getToastSnapshot,
+  subscribeToToasts,
+  toast as imperativeToast,
+  type ToastRecord,
+  type ToastVariant,
+} from './toast-store';
+
+export type ToasterPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right';
+
+export type ToasterProps = {
+  /** Corner/edge the stack renders at. Default 'bottom-right'. */
+  position?: ToasterPosition;
+  /** Accessible name of the live region. Default 'Notifications'. */
+  label?: string;
+  /** Tint the toast surface with its status color (neutral by default). */
+  richColors?: boolean;
+};
+
+const positionClasses: Record<ToasterPosition, string> = {
+  'top-left': 'left-4 top-4 items-start',
+  'top-center': 'left-1/2 top-4 -translate-x-1/2 items-center',
+  'top-right': 'right-4 top-4 items-end',
+  'bottom-left': 'bottom-4 left-4 items-start',
+  'bottom-center': 'bottom-4 left-1/2 -translate-x-1/2 items-center',
+  'bottom-right': 'bottom-4 right-4 items-end',
+};
+
+const richClasses: Record<ToastVariant, string> = {
+  default: 'border-border bg-card',
+  success: 'border-success/50 bg-success/10',
+  error: 'border-destructive/50 bg-destructive/10',
+  warning: 'border-warning/50 bg-warning/10',
+  info: 'border-info/50 bg-info/10',
+};
+
+const dotClasses: Record<ToastVariant, string> = {
+  default: 'bg-muted-foreground',
+  success: 'bg-success',
+  error: 'bg-destructive',
+  warning: 'bg-warning',
+  info: 'bg-info',
+};
+
+/**
+ * Renders the imperative toast queue. Mount once near the app root:
+ *
+ *   <Toaster />
+ *   toast.success('Saved')
+ *
+ * The region is a polite live region, so announcements don't steal focus.
+ */
+export function Toaster({ position = 'bottom-right', label = 'Notifications', richColors = false }: ToasterProps) {
+  const entries = React.useSyncExternalStore(subscribeToToasts, getToastSnapshot, getToastServerSnapshot);
+
+  return (
+    <ol
+      aria-label={label}
+      className={cn('fixed z-[60] flex w-full max-w-sm flex-col gap-2', positionClasses[position])}
+    >
+      {entries.map((entry) => {
+        const variant = entry.variant ?? 'default';
+        return (
+          <li
+            key={entry.id}
+            className={cn(
+              'rounded-lg border p-4 shadow-lg',
+              richColors ? richClasses[variant] : 'border-border bg-card',
+            )}
+          >
+            <div role="status" className="flex items-start gap-3">
+              <span aria-hidden="true" className={cn('mt-1 h-2 w-2 shrink-0 rounded-full', dotClasses[variant])} />
+              <div className="min-w-0 flex-1">
+                <p className="text-sm font-semibold">{entry.title}</p>
+                {entry.description && <p className="mt-1 text-sm text-muted-foreground">{entry.description}</p>}
+                {entry.action && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      entry.action?.onClick();
+                      imperativeToast.dismiss(entry.id);
+                    }}
+                    className="mt-2 text-sm font-medium text-primary hover:underline"
+                  >
+                    {entry.action.label}
+                  </button>
+                )}
+              </div>
+              <button
+                type="button"
+                onClick={() => imperativeToast.dismiss(entry.id)}
+                aria-label={`Dismiss ${entry.title}`}
+                className="rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                ✕
+              </button>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
+export type { ToastRecord };

package/src/components/toast/index.ts

@@ -1,2 +1,6 @@
 export { ToastProvider, useToast } from './Toast';
 export type { ToastOptions, ToastRecord, ToastAction, ToastContextValue } from './Toast';
+export { Toaster } from './Toaster';
+export type { ToasterProps, ToasterPosition } from './Toaster';
+export { toast } from './toast-store';
+export type { ToastVariant } from './toast-store';

package/src/components/toast/toast-store.ts

@@ -0,0 +1,117 @@
+/**
+ * Imperative toast store.
+ *
+ * Components can call `toast(...)` from anywhere — event handlers, data
+ * layers, async catch blocks — without threading a hook through the tree.
+ * `<Toaster />` subscribes to this store and renders the queue. The
+ * provider/hook API in Toast.tsx remains for tree-scoped usage.
+ */
+
+export type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info';
+
+export type ToastAction = {
+  label: string;
+  onClick: () => void;
+};
+
+export type ToastOptions = {
+  title: string;
+  description?: string;
+  action?: ToastAction;
+  variant?: ToastVariant;
+  /** Auto-dismiss delay in ms; 0 keeps the toast until dismissed. Default 5000. */
+  duration?: number;
+};
+
+export type ToastRecord = ToastOptions & { id: string };
+
+type Listener = (toasts: readonly ToastRecord[]) => void;
+
+const DEFAULT_DURATION = 5000;
+
+let toasts: readonly ToastRecord[] = [];
+const EMPTY: readonly ToastRecord[] = [];
+const listeners = new Set<Listener>();
+const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function emit() {
+  for (const listener of listeners) listener(toasts);
+}
+
+function dismiss(id: string) {
+  const timer = timers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    timers.delete(id);
+  }
+  toasts = toasts.filter((entry) => entry.id !== id);
+  emit();
+}
+
+function show(options: ToastOptions): string {
+  const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+  toasts = [...toasts, { ...options, id }];
+  emit();
+
+  const duration = options.duration ?? DEFAULT_DURATION;
+  if (duration > 0) {
+    timers.set(
+      id,
+      setTimeout(() => dismiss(id), duration),
+    );
+  }
+  return id;
+}
+
+type ToastFunction = ((options: ToastOptions) => string) & {
+  success: (title: string, description?: string) => string;
+  error: (title: string, description?: string) => string;
+  warning: (title: string, description?: string) => string;
+  info: (title: string, description?: string) => string;
+  dismiss: (id?: string) => void;
+  clear: () => void;
+};
+
+/**
+ * Fire a toast from anywhere. Variant helpers mirror the sonner/Radix
+ * shape most codebases already call:
+ *
+ *   toast.success('Saved')
+ *   toast.error('Upload failed', 'Check your connection')
+ *   toast({ title: 'Heads up', duration: 0 })
+ */
+export const toast: ToastFunction = Object.assign(
+  (options: ToastOptions) => show({ ...options, variant: options.variant ?? 'default' }),
+  {
+    success: (title: string, description?: string) => show({ title, description, variant: 'success' }),
+    error: (title: string, description?: string) => show({ title, description, variant: 'error' }),
+    warning: (title: string, description?: string) => show({ title, description, variant: 'warning' }),
+    info: (title: string, description?: string) => show({ title, description, variant: 'info' }),
+    dismiss: (id?: string) => {
+      if (id) {
+        dismiss(id);
+        return;
+      }
+      for (const entry of [...toasts]) dismiss(entry.id);
+    },
+    clear: () => {
+      for (const entry of [...toasts]) dismiss(entry.id);
+    },
+  },
+);
+
+/** Subscribe to the queue (used by `<Toaster />`). */
+export function subscribeToToasts(listener: Listener): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/** Current queue; the reference is stable between mutations. */
+export function getToastSnapshot(): readonly ToastRecord[] {
+  return toasts;
+}
+
+/** SSR-safe snapshot — always empty (toasts only exist client-side). */
+export function getToastServerSnapshot(): readonly ToastRecord[] {
+  return EMPTY;
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './types/manifest';
 export * from './utils/cn';
 export * from './utils/gap';
 export * from './utils/presence';
+export * from './components/app-shell';
 export * from './components/button';
 export * from './components/button-group';
 export * from './components/input';
@@ -13,6 +14,8 @@ export * from './components/toast';
 export * from './components/dialog';
 export * from './components/drawer';
 export * from './components/select';
+export * from './components/table-card';
+export * from './components/select-menu';
 export * from './components/search';
 export * from './components/autocomplete';
 export * from './components/checkbox';
@@ -36,6 +39,17 @@ export * from './components/data-table';
 export * from './components/list';
 export * from './components/text';
 export * from './components/heading';
+export * from './components/empty-state';
+export * from './components/page-header';
+export * from './components/metric-card';
+export * from './components/password-input';
+export * from './components/auth-layout';
+export * from './components/filter-bar';
+export * from './components/date-picker';
+export * from './components/time-picker';
+export * from './components/stepper';
+export * from './components/file-upload';
+export * from './components/timeline';
 export * from './components/block';
 export * from './components/flex';
 export * from './components/grid';