@slipstream-ui/core 0.3.0 → 0.4.0

package/src/components/dialog/Dialog.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 import { describe, expect, it, vi } from 'vitest';
-import { Dialog } from './Dialog';
+import { Dialog, DialogBody, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from './Dialog';
 
 function Harness(props: { onOpenChange?: (open: boolean) => void; closeOnBackdrop?: boolean }) {
   const [open, setOpen] = useState(true);
@@ -184,3 +184,66 @@ describe('Dialog animate (optional fade)', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 });
+
+
+describe('Dialog sizes, slots and compound parts', () => {
+  it('applies size presets', () => {
+    const { rerender } = render(
+      <Dialog open onOpenChange={vi.fn()} title="Sized" size="2xl">
+        body
+      </Dialog>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('max-w-2xl');
+    rerender(
+      <Dialog open onOpenChange={vi.fn()} title="Sized" size="sm">
+        body
+      </Dialog>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('max-w-sm');
+  });
+
+  it('wires a composed header through DialogTitle/DialogDescription', () => {
+    render(
+      <Dialog
+        open
+        onOpenChange={vi.fn()}
+        header={
+          <DialogHeader>
+            <DialogTitle>Publish release</DialogTitle>
+          </DialogHeader>
+        }
+      >
+        <DialogDescription>Tag and publish the workspace.</DialogDescription>
+        <DialogBody>Body content</DialogBody>
+      </Dialog>
+    );
+    const dialog = screen.getByRole('dialog', { name: 'Publish release' });
+    expect(dialog).toBeInTheDocument();
+    expect(screen.getByText('Body content')).toBeInTheDocument();
+  });
+
+  it('renders the footer slot inside the panel', () => {
+    render(
+      <Dialog
+        open
+        onOpenChange={vi.fn()}
+        title="Confirm"
+        footer={<DialogFooter><button type="button">Save</button></DialogFooter>}
+      >
+        body
+      </Dialog>
+    );
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
+  });
+
+  it('caps and scrolls the body when scrollable', () => {
+    render(
+      <Dialog open onOpenChange={vi.fn()} title="Long" scrollable>
+        <p>scrollable body</p>
+      </Dialog>
+    );
+    const body = screen.getByText('scrollable body').parentElement!;
+    expect(body.className).toContain('max-h-[60vh]');
+    expect(body.className).toContain('overflow-y-auto');
+  });
+});

package/src/components/dialog/Dialog.tsx

@@ -5,17 +5,34 @@ import { createPortal } from 'react-dom';
 import { cn } from '../../utils/cn';
 import { usePresence } from '../../utils/presence';
 
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
 export type DialogProps = {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  title: string;
+  /** Accessible name + default header title. Optional when composing a custom header. */
+  title?: string;
   description?: string;
   children?: React.ReactNode;
+  /** Panel max-width preset (default 'md'). */
+  size?: DialogSize;
+  /**
+   * Replaces the default header row. Compose with `<DialogHeader>` /
+   * `<DialogTitle>` / `<DialogDescription>` — those parts pick up the
+   * dialog's aria ids automatically.
+   */
+  header?: React.ReactNode;
+  /** Action row pinned under the body. */
+  footer?: React.ReactNode;
+  /** Cap the body height and scroll inside the panel. */
+  scrollable?: boolean;
+  bodyClassName?: string;
   closeOnBackdrop?: boolean;
   /** Hide the close (✕) button in the header; Escape and backdrop still close. */
   showClose?: boolean;
   /** Focused when the dialog opens; defaults to the first focusable element. */
   initialFocusRef?: React.RefObject<HTMLElement | null>;
+  /** Accessible name when `title` is omitted (required with a custom header). */
   ariaLabel?: string;
   /**
    * Fade the backdrop and panel in on open and out on close (requires
@@ -28,10 +45,61 @@ export type DialogProps = {
 const FOCUSABLE =
   'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
+const sizeClasses: Record<DialogSize, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+};
+
+const DialogIdsContext = React.createContext<{ titleId: string; descriptionId: string } | null>(null);
+
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+/** Header row for composed dialogs. */
+function DialogHeader({ className, ...props }: DialogHeaderProps) {
+  return <div className={cn('flex items-start justify-between gap-4', className)} {...props} />;
+}
+
+export type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
+
+/** Dialog heading; automatically wired to aria-labelledby. */
+function DialogTitle({ className, ...props }: DialogTitleProps) {
+  const ids = React.useContext(DialogIdsContext);
+  return <h2 id={ids?.titleId} className={cn('text-lg font-semibold', className)} {...props} />;
+}
+
+export type DialogDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+
+/** Supporting line; automatically wired to aria-describedby. */
+function DialogDescription({ className, ...props }: DialogDescriptionProps) {
+  const ids = React.useContext(DialogIdsContext);
+  return <p id={ids?.descriptionId} className={cn('mt-2 text-sm text-muted-foreground', className)} {...props} />;
+}
+
+export type DialogBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+/** Body wrapper for composed dialogs. */
+function DialogBody({ className, ...props }: DialogBodyProps) {
+  return <div className={cn('mt-4', className)} {...props} />;
+}
+
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+/** Action row pinned to the bottom of the panel. */
+function DialogFooter({ className, ...props }: DialogFooterProps) {
+  return <div className={cn('mt-6 flex items-center justify-end gap-2', className)} {...props} />;
+}
+
 /**
  * Accessible modal dialog: portal, aria-modal + labelled/describedby wiring,
  * Escape and backdrop dismissal, initial focus on open and focus restoration
  * on close, plus a Tab/Shift+Tab focus trap.
+ *
+ * Use `title`/`description` for the default header, or pass `header` with
+ * `<DialogHeader>`/`<DialogTitle>`/`<DialogDescription>` (and an
+ * `ariaLabel` fallback) for full control.
  */
 export function Dialog({
   open,
@@ -39,9 +107,15 @@ export function Dialog({
   title,
   description,
   children,
+  size = 'md',
+  header,
+  footer,
+  scrollable = false,
+  bodyClassName,
   closeOnBackdrop = true,
   showClose = true,
   initialFocusRef,
+  ariaLabel,
   animate = false,
 }: DialogProps) {
   const dialogRef = React.useRef<HTMLDivElement | null>(null);
@@ -119,34 +193,50 @@ export function Dialog({
         ref={dialogRef}
         role="dialog"
         aria-modal="true"
-        aria-labelledby={titleId}
+        aria-labelledby={ariaLabel ? undefined : titleId}
+        aria-label={ariaLabel}
         aria-describedby={description ? descriptionId : undefined}
         tabIndex={-1}
-        className={cn('w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl', motion)}
+        className={cn(
+          'flex w-full flex-col rounded-xl border border-border bg-card p-6 shadow-xl',
+          sizeClasses[size],
+          motion,
+        )}
       >
-        <div className="flex items-start justify-between gap-4">
-          <h2 id={titleId} className="text-lg font-semibold">
-            {title}
-          </h2>
-          {showClose && (
-            <button
-              type="button"
-              onClick={() => onOpenChange(false)}
-              aria-label="Close dialog"
-              className="rounded p-1 text-muted-foreground hover:text-foreground"
-            >
-              ✕
-            </button>
+        <DialogIdsContext.Provider value={{ titleId, descriptionId }}>
+          {header ?? (
+            <DialogHeader>
+              <div className="min-w-0">
+                {title && <DialogTitle>{title}</DialogTitle>}
+                {description && <DialogDescription>{description}</DialogDescription>}
+              </div>
+              {showClose && (
+                <button
+                  type="button"
+                  onClick={() => onOpenChange(false)}
+                  aria-label="Close dialog"
+                  className="rounded p-1 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  ✕
+                </button>
+              )}
+            </DialogHeader>
           )}
-        </div>
-        {description && (
-          <p id={descriptionId} className="mt-2 text-sm text-muted-foreground">
-            {description}
-          </p>
-        )}
-        {children && <div className="mt-4">{children}</div>}
+          <div
+            className={cn(
+              'mt-4 min-h-0',
+              scrollable && 'max-h-[60vh] overflow-y-auto pr-1',
+              bodyClassName,
+            )}
+          >
+            {children}
+          </div>
+          {footer && <DialogFooter>{footer}</DialogFooter>}
+        </DialogIdsContext.Provider>
       </div>
     </div>,
     document.body,
   );
 }
+
+export { DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter };

package/src/components/dialog/index.ts

@@ -1,2 +1 @@
-export { Dialog } from './Dialog';
-export type { DialogProps } from './Dialog';
+export * from './Dialog';

package/src/components/drawer/Drawer.test.tsx

@@ -122,3 +122,53 @@ describe('Drawer animate (optional slide)', () => {
     });
   });
 });
+
+describe('Drawer sizes and custom extents', () => {
+  it('supports xl and 2xl presets on each axis', () => {
+    const { rerender } = render(
+      <Drawer open onOpenChange={vi.fn()} title="Wide" side="right" size="xl">
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('w-[40rem]');
+    rerender(
+      <Drawer open onOpenChange={vi.fn()} title="Wide" side="right" size="2xl">
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('w-[48rem]');
+    rerender(
+      <Drawer open onOpenChange={vi.fn()} title="Tall" side="bottom" size="2xl">
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).toHaveClass('h-[48rem]');
+  });
+
+  it('accepts a pixel width and overrides the preset', () => {
+    render(
+      <Drawer open onOpenChange={vi.fn()} title="Custom" side="right" width={560}>
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).toHaveStyle({ width: '560px' });
+  });
+
+  it('accepts a CSS length height for top/bottom drawers', () => {
+    render(
+      <Drawer open onOpenChange={vi.fn()} title="Custom" side="top" height="60vh">
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).toHaveStyle({ height: '60vh' });
+  });
+
+  it('ignores width/height that do not match the side axis', () => {
+    render(
+      <Drawer open onOpenChange={vi.fn()} title="Mismatch" side="bottom" width={400}>
+        body
+      </Drawer>
+    );
+    expect(screen.getByRole('dialog')).not.toHaveAttribute('style');
+  });
+});

package/src/components/drawer/Drawer.tsx

@@ -6,7 +6,7 @@ import { cn } from '../../utils/cn';
 import { usePresence } from '../../utils/presence';
 
 export type DrawerSide = 'left' | 'right' | 'top' | 'bottom';
-export type DrawerSize = 'sm' | 'md' | 'lg';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 export type DrawerProps = {
   open: boolean;
@@ -16,8 +16,18 @@ export type DrawerProps = {
   children?: React.ReactNode;
   /** Edge the drawer slides from (default 'right'). */
   side?: DrawerSide;
-  /** Extent along the side axis (width for left/right, height for top/bottom). */
+  /** Preset extent along the side axis (width for left/right, height for top/bottom). */
   size?: DrawerSize;
+  /**
+   * Custom extent for left/right drawers: pixels (480) or any CSS length
+   * ("70vw"). Overrides `size`.
+   */
+  width?: number | string;
+  /**
+   * Custom extent for top/bottom drawers: pixels (320) or any CSS length
+   * ("60vh"). Overrides `size`.
+   */
+  height?: number | string;
   /** Clicking the backdrop closes (default true). */
   closeOnBackdrop?: boolean;
   /** Hide the close (✕) button in the header (default true). */
@@ -44,13 +54,35 @@ const sideClasses: Record<DrawerSide, string> = {
   bottom: 'inset-x-0 bottom-0 border-t',
 };
 
+const sideWidths: Record<DrawerSize, string> = {
+  sm: 'w-72',
+  md: 'w-96',
+  lg: 'w-[32rem]',
+  xl: 'w-[40rem]',
+  '2xl': 'w-[48rem]',
+};
+
+const sideHeights: Record<DrawerSize, string> = {
+  sm: 'h-48',
+  md: 'h-80',
+  lg: 'h-[32rem]',
+  xl: 'h-[40rem]',
+  '2xl': 'h-[48rem]',
+};
+
 const sizeClasses: Record<DrawerSide, Record<DrawerSize, string>> = {
-  right: { sm: 'w-72', md: 'w-96', lg: 'w-[32rem]' },
-  left: { sm: 'w-72', md: 'w-96', lg: 'w-[32rem]' },
-  top: { sm: 'h-48', md: 'h-80', lg: 'h-[32rem]' },
-  bottom: { sm: 'h-48', md: 'h-80', lg: 'h-[32rem]' },
+  right: sideWidths,
+  left: sideWidths,
+  top: sideHeights,
+  bottom: sideHeights,
 };
 
+/** Custom extent wins over the preset; numbers are pixels. */
+function extentStyle(value: number | string | undefined): string | undefined {
+  if (value === undefined) return undefined;
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
 // Literal class maps so Tailwind's scanner keeps every slide utility.
 const slideIn: Record<DrawerSide, string> = {
   right: 'slide-in-from-right',
@@ -80,6 +112,8 @@ export function Drawer({
   children,
   side = 'right',
   size = 'md',
+  width,
+  height,
   closeOnBackdrop = true,
   showClose = true,
   initialFocusRef,
@@ -146,6 +180,9 @@ export function Drawer({
 
   if (!present || typeof document === 'undefined') return null;
 
+  const isVerticalSide = side === 'top' || side === 'bottom';
+  const customExtent = isVerticalSide ? extentStyle(height) : extentStyle(width);
+
   const motion = animate
     ? cn(
         'duration-200 motion-reduce:animate-none',
@@ -174,6 +211,7 @@ export function Drawer({
           sizeClasses[side][size],
           motion
         )}
+        style={customExtent ? { [isVerticalSide ? 'height' : 'width']: customExtent } : undefined}
       >
         <div className="flex items-start justify-between gap-4 border-b border-border px-5 py-4">
           <div>

package/src/components/empty-state/EmptyState.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import { describe, expect, it } from 'vitest';
+import { EmptyState } from './EmptyState';
+
+describe('EmptyState', () => {
+  it('renders title, description and actions', () => {
+    render(
+      <EmptyState
+        title="No classes yet"
+        description="Create your first class to get started."
+        action={<button type="button">New class</button>}
+        secondaryAction={<a href="/docs">Learn more</a>}
+      />
+    );
+    expect(screen.getByText('No classes yet')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'New class' })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Learn more' })).toBeInTheDocument();
+  });
+
+  it('supports a compact size', () => {
+    const { container } = render(<EmptyState size="sm" title="Nothing here" />);
+    expect(container.firstChild).toHaveClass('py-6');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<EmptyState title="Empty" description="Nothing to show" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});

package/src/components/empty-state/EmptyState.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cn } from '../../utils/cn';
+
+export type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** Icon or illustration shown above the title. */
+  icon?: React.ReactNode;
+  title: string;
+  description?: string;
+  /** Primary action (button/link). */
+  action?: React.ReactNode;
+  /** Secondary action shown beside the primary one. */
+  secondaryAction?: React.ReactNode;
+  /** Compact padding for use inside panels and table bodies. */
+  size?: 'sm' | 'md';
+};
+
+/**
+ * Placeholder for empty collections, zero-result searches and unconfigured
+ * features. Keeps the title/description/action hierarchy consistent across
+ * the product.
+ */
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
+  { icon, title, description, action, secondaryAction, size = 'md', className, children, ...props },
+  ref
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-col items-center justify-center rounded-lg border border-dashed border-border text-center',
+        size === 'md' ? 'gap-3 px-6 py-12' : 'gap-2 px-4 py-6',
+        className
+      )}
+      {...props}
+    >
+      {icon && <div className="text-muted-foreground [&_svg]:size-8">{icon}</div>}
+      <p className={cn('font-semibold', size === 'md' ? 'text-base' : 'text-sm')}>{title}</p>
+      {description && <p className="max-w-sm text-sm text-muted-foreground">{description}</p>}
+      {children}
+      {(action || secondaryAction) && (
+        <div className="mt-1 flex flex-wrap items-center justify-center gap-2">
+          {action}
+          {secondaryAction}
+        </div>
+      )}
+    </div>
+  );
+});

package/src/components/empty-state/index.ts

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

package/src/components/file-upload/FileUpload.test.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+import { describe, expect, it, vi } from 'vitest';
+import { FileUpload } from './FileUpload';
+
+function file(name: string, size = 4) {
+  return new File([new Uint8Array(size)], name, { type: 'text/plain' });
+}
+
+describe('FileUpload', () => {
+  it('lists selected files and reports changes', async () => {
+    const user = userEvent.setup();
+    const onFilesChange = vi.fn();
+    render(<FileUpload aria-label="Attachments" onFilesChange={onFilesChange} />);
+    await user.upload(screen.getByLabelText(/Drop files here/), [file('a.txt'), file('b.txt')]);
+    expect(onFilesChange).toHaveBeenCalledTimes(1);
+    expect(screen.getByText('a.txt')).toBeInTheDocument();
+    expect(screen.getByText('b.txt')).toBeInTheDocument();
+  });
+
+  it('removes a file and shows progress', async () => {
+    const user = userEvent.setup();
+    const onFilesChange = vi.fn();
+    render(
+      <FileUpload
+        aria-label="Uploads"
+        defaultFiles={[file('report.pdf')]}
+        progress={{ 'report.pdf': 42 }}
+        onFilesChange={onFilesChange}
+      />
+    );
+    expect(screen.getByRole('progressbar', { name: 'Uploading report.pdf' })).toHaveAttribute('aria-valuenow', '42');
+    await user.click(screen.getByRole('button', { name: 'Remove report.pdf' }));
+    expect(onFilesChange).toHaveBeenCalledWith([]);
+    expect(screen.queryByText('report.pdf')).not.toBeInTheDocument();
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<FileUpload aria-label="Files" />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});