@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/DataReadout/DataReadout.css

@@ -0,0 +1,30 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Layout ── */
+.strand-data-readout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-1);
+}
+
+/* ── Label (overline) ── */
+.strand-data-readout__label {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-ultra);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Value (instrument readout) ── */
+.strand-data-readout__value {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-3xl);
+  font-weight: var(--strand-weight-light);
+  letter-spacing: var(--strand-tracking-tighter);
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-tight);
+  font-variant-numeric: tabular-nums;
+}

package/src/components/DataReadout/DataReadout.test.tsx

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { DataReadout } from "./DataReadout.js";
+
+describe("DataReadout", () => {
+  // ── Rendering ──
+
+  it("renders label text", () => {
+    const { getByText } = render(
+      <DataReadout label="Response Time" value="42ms" />,
+    );
+    expect(getByText("Response Time")).toBeTruthy();
+  });
+
+  it("renders string value", () => {
+    const { getByText } = render(
+      <DataReadout label="Status" value="Online" />,
+    );
+    expect(getByText("Online")).toBeTruthy();
+  });
+
+  it("renders numeric value", () => {
+    const { getByText } = render(
+      <DataReadout label="Count" value={1234} />,
+    );
+    expect(getByText("1234")).toBeTruthy();
+  });
+
+  // ── Typography classes ──
+
+  it("applies monospace font class to label", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const label = container.querySelector(".strand-data-readout__label");
+    expect(label).toBeTruthy();
+  });
+
+  it("applies monospace font class to value", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const value = container.querySelector(".strand-data-readout__value");
+    expect(value).toBeTruthy();
+  });
+
+  it("label has uppercase text transform via CSS class", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const label = container.querySelector(".strand-data-readout__label");
+    expect(label).toBeTruthy();
+    // text-transform: uppercase is applied via .strand-data-readout__label CSS
+  });
+
+  it("value uses light weight via CSS class", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const value = container.querySelector(".strand-data-readout__value");
+    expect(value).toBeTruthy();
+    // font-weight: var(--strand-weight-light) applied via .strand-data-readout__value CSS
+  });
+
+  it("value has tabular-nums via CSS class", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const value = container.querySelector(".strand-data-readout__value");
+    expect(value).toBeTruthy();
+    // font-variant-numeric: tabular-nums applied via .strand-data-readout__value CSS
+  });
+
+  // ── Layout ──
+
+  it("renders as flex column layout", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout).toBeTruthy();
+    // display: flex; flex-direction: column applied via .strand-data-readout CSS
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" className="custom" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.className).toContain("strand-data-readout");
+    expect(readout?.className).toContain("custom");
+  });
+
+  // ── Forwarded props ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <DataReadout label="Metric" value="100" id="readout-1" />,
+    );
+    const readout = container.querySelector(".strand-data-readout");
+    expect(readout?.getAttribute("id")).toBe("readout-1");
+  });
+});

package/src/components/DataReadout/DataReadout.tsx

@@ -0,0 +1,29 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface DataReadoutProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "label"> {
+  /** Overline label text */
+  label: string;
+  /** The large displayed value */
+  value: string | number;
+}
+
+export const DataReadout = forwardRef<HTMLDivElement, DataReadoutProps>(
+  ({ label, value, className = "", ...rest }, ref) => {
+    const classes = ["strand-data-readout", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        <span className="strand-data-readout__label">{label}</span>
+        <span className="strand-data-readout__value">{value}</span>
+      </div>
+    );
+  },
+);
+
+DataReadout.displayName = "DataReadout";

package/src/components/DataReadout/index.ts

@@ -0,0 +1,2 @@
+export { DataReadout } from "./DataReadout.js";
+export type { DataReadoutProps } from "./DataReadout.js";

package/src/components/Dialog/Dialog.css

@@ -0,0 +1,81 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Backdrop ── */
+.strand-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--strand-backdrop);
+}
+
+/* ── Panel ── */
+.strand-dialog__panel {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  margin: var(--strand-space-4);
+  padding: var(--strand-space-8);
+  background: var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-xl);
+  box-shadow: var(--strand-elevation-4);
+  font-family: var(--strand-font-sans);
+  outline: none;
+}
+
+/* ── Header ── */
+.strand-dialog__header {
+  margin-bottom: var(--strand-space-4);
+  padding-right: var(--strand-space-8);
+}
+
+/* ── Title ── */
+.strand-dialog__title {
+  margin: 0;
+  font-size: var(--strand-text-lg);
+  font-weight: var(--strand-weight-semibold);
+  color: var(--strand-blue-midnight);
+  line-height: var(--strand-leading-snug);
+}
+
+/* ── Close button ── */
+.strand-dialog__close {
+  position: absolute;
+  top: var(--strand-space-6);
+  right: var(--strand-space-6);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--strand-radius-md);
+  background: transparent;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-lg);
+  cursor: pointer;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    color var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-dialog__close:hover {
+  background: var(--strand-gray-200);
+  color: var(--strand-gray-900);
+}
+
+/* ── Body ── */
+.strand-dialog__body {
+  padding-top: var(--strand-space-6);
+  color: var(--strand-gray-600);
+  font-size: var(--strand-text-sm);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-dialog__close {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,203 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Dialog } from "./Dialog.js";
+
+describe("Dialog", () => {
+  const defaultProps = {
+    open: true,
+    onClose: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    // Ensure body overflow is restored
+    document.body.style.overflow = "";
+  });
+
+  // ── Rendering ──
+
+  it("renders nothing when closed", () => {
+    const { container } = render(
+      <Dialog open={false} onClose={defaultProps.onClose}>
+        Content
+      </Dialog>,
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders dialog when open", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toBeTruthy();
+  });
+
+  it("renders children inside the dialog", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>
+        <p>Dialog content</p>
+      </Dialog>,
+    );
+    expect(getByRole("dialog")).toHaveTextContent("Dialog content");
+  });
+
+  // ── ARIA ──
+
+  it("has role dialog", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toBeTruthy();
+  });
+
+  it("has aria-modal true", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+  });
+
+  it("renders title with aria-labelledby linkage", () => {
+    const { getByRole, getByText } = render(
+      <Dialog {...defaultProps} title="My Dialog">
+        Content
+      </Dialog>,
+    );
+    const dialog = getByRole("dialog");
+    const titleEl = getByText("My Dialog");
+    const titleId = titleEl.getAttribute("id");
+    expect(dialog).toHaveAttribute("aria-labelledby", titleId);
+  });
+
+  it("does not set aria-labelledby when no title", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(getByRole("dialog").hasAttribute("aria-labelledby")).toBe(false);
+  });
+
+  // ── Title ──
+
+  it("renders the title text", () => {
+    const { getByText } = render(
+      <Dialog {...defaultProps} title="Confirm Action">
+        Content
+      </Dialog>,
+    );
+    expect(getByText("Confirm Action")).toBeTruthy();
+  });
+
+  // ── Close button ──
+
+  it("close button calls onClose", () => {
+    const onClose = vi.fn();
+    const { getByLabelText } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.click(getByLabelText("Close"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Escape key ──
+
+  it("Escape key calls onClose", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.keyDown(getByRole("dialog").parentElement!, {
+      key: "Escape",
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("Escape key does not call onClose when closeOnEscape is false", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose} closeOnEscape={false}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.keyDown(getByRole("dialog").parentElement!, {
+      key: "Escape",
+    });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  // ── Outside click ──
+
+  it("clicking backdrop calls onClose", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    const backdrop = container.querySelector(".strand-dialog__backdrop")!;
+    fireEvent.click(backdrop);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("clicking inside dialog does not call onClose", () => {
+    const onClose = vi.fn();
+    const { getByRole } = render(
+      <Dialog open={true} onClose={onClose}>
+        Content
+      </Dialog>,
+    );
+    fireEvent.click(getByRole("dialog"));
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("backdrop click disabled when closeOnOutsideClick is false", () => {
+    const onClose = vi.fn();
+    const { container } = render(
+      <Dialog open={true} onClose={onClose} closeOnOutsideClick={false}>
+        Content
+      </Dialog>,
+    );
+    const backdrop = container.querySelector(".strand-dialog__backdrop")!;
+    fireEvent.click(backdrop);
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Dialog {...defaultProps} className="custom-dialog">
+        Content
+      </Dialog>,
+    );
+    const dialog = getByRole("dialog");
+    expect(dialog.className).toContain("strand-dialog__panel");
+    expect(dialog.className).toContain("custom-dialog");
+  });
+
+  // ── Scroll lock ──
+
+  it("sets body overflow hidden when open", () => {
+    render(<Dialog {...defaultProps}>Content</Dialog>);
+    expect(document.body.style.overflow).toBe("hidden");
+  });
+
+  it("restores body overflow when closed", () => {
+    const { rerender } = render(
+      <Dialog {...defaultProps}>Content</Dialog>,
+    );
+    expect(document.body.style.overflow).toBe("hidden");
+    rerender(
+      <Dialog open={false} onClose={defaultProps.onClose}>
+        Content
+      </Dialog>,
+    );
+    expect(document.body.style.overflow).toBe("");
+  });
+});

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,179 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useEffect, useRef, useCallback } from "preact/hooks";
+
+export interface DialogProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title" | "open"> {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Called when the dialog should close */
+  onClose: () => void;
+  /** Optional title rendered in the dialog header */
+  title?: string;
+  /** Close when clicking the backdrop */
+  closeOnOutsideClick?: boolean;
+  /** Close when pressing Escape */
+  closeOnEscape?: boolean;
+  /** Dialog content */
+  children?: ComponentChildren;
+}
+
+const FOCUSABLE_SELECTOR =
+  'a[href], button:not(:disabled), textarea:not(:disabled), input:not(:disabled), select:not(:disabled), [tabindex]:not([tabindex="-1"])';
+
+let dialogIdCounter = 0;
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      open,
+      onClose,
+      title,
+      closeOnOutsideClick = true,
+      closeOnEscape = true,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const panelRef = useRef<HTMLDivElement>(null);
+    const previousFocusRef = useRef<Element | null>(null);
+    const idRef = useRef(`strand-dialog-title-${++dialogIdCounter}`);
+    const titleId = idRef.current;
+
+    // Focus trap and focus restoration
+    useEffect(() => {
+      if (!open) return;
+
+      previousFocusRef.current = document.activeElement;
+
+      // Small delay to allow the DOM to render before querying focusable elements
+      const raf = requestAnimationFrame(() => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const focusable = panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+        if (focusable.length > 0) {
+          focusable[0].focus();
+        } else {
+          panel.focus();
+        }
+      });
+
+      return () => {
+        cancelAnimationFrame(raf);
+        const prev = previousFocusRef.current;
+        if (prev && prev instanceof HTMLElement) {
+          prev.focus();
+        }
+      };
+    }, [open]);
+
+    // Scroll lock
+    useEffect(() => {
+      if (!open) return;
+
+      const original = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+
+      return () => {
+        document.body.style.overflow = original;
+      };
+    }, [open]);
+
+    // Keyboard handler
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === "Escape" && closeOnEscape) {
+          e.stopPropagation();
+          onClose();
+          return;
+        }
+
+        if (e.key === "Tab") {
+          const panel = panelRef.current;
+          if (!panel) return;
+
+          const focusable = Array.from(
+            panel.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+          );
+          if (focusable.length === 0) return;
+
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+
+          if (e.shiftKey) {
+            if (document.activeElement === first) {
+              e.preventDefault();
+              last.focus();
+            }
+          } else {
+            if (document.activeElement === last) {
+              e.preventDefault();
+              first.focus();
+            }
+          }
+        }
+      },
+      [closeOnEscape, onClose],
+    );
+
+    const handleBackdropClick = useCallback(
+      (e: MouseEvent) => {
+        if (closeOnOutsideClick && e.target === e.currentTarget) {
+          onClose();
+        }
+      },
+      [closeOnOutsideClick, onClose],
+    );
+
+    if (!open) return null;
+
+    const classes = ["strand-dialog__panel", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div
+        className="strand-dialog__backdrop"
+        onClick={handleBackdropClick}
+        onKeyDown={handleKeyDown}
+      >
+        <div
+          ref={(el) => {
+            (panelRef as { current: HTMLDivElement | null }).current = el;
+            if (typeof ref === "function") ref(el);
+            else if (ref) (ref as { current: HTMLDivElement | null }).current = el;
+          }}
+          className={classes}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={title ? titleId : undefined}
+          tabIndex={-1}
+          {...rest}
+        >
+          {title && (
+            <div className="strand-dialog__header">
+              <h2 id={titleId} className="strand-dialog__title">
+                {title}
+              </h2>
+            </div>
+          )}
+          <button
+            type="button"
+            className="strand-dialog__close"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            &#215;
+          </button>
+          <div className="strand-dialog__body">{children}</div>
+        </div>
+      </div>
+    );
+  },
+);
+
+Dialog.displayName = "Dialog";

package/src/components/Dialog/index.ts

@@ -0,0 +1,2 @@
+export { Dialog } from "./Dialog.js";
+export type { DialogProps } from "./Dialog.js";

package/src/components/Divider/Divider.css

@@ -0,0 +1,44 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-divider {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Horizontal (hr) ── */
+.strand-divider--horizontal {
+  width: 100%;
+  border-top: 1px solid var(--strand-gray-200);
+}
+
+/* ── Vertical ── */
+.strand-divider--vertical {
+  align-self: stretch;
+  border-left: 1px solid var(--strand-gray-200);
+}
+
+/* ── Labeled ── */
+.strand-divider--labeled {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-3);
+  border-top: 0;
+}
+
+.strand-divider__line {
+  flex: 1;
+  height: 0;
+  border-top: 1px solid var(--strand-gray-200);
+}
+
+.strand-divider__label {
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-400);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  white-space: nowrap;
+}