@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Stack/index.ts

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

package/src/components/Switch/Switch.css

@@ -0,0 +1,94 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+  cursor: pointer;
+  user-select: none;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  color: var(--strand-gray-900);
+  line-height: var(--strand-leading-snug);
+}
+
+/* ── Track ── */
+.strand-switch__track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 40px;
+  height: 22px;
+  padding: 0;
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-gray-200);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-switch__track:focus-visible {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+  outline: none;
+}
+
+/* ── Thumb ── */
+.strand-switch__thumb {
+  position: absolute;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-surface-elevated);
+  box-shadow: var(--strand-elevation-1);
+  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+/* ── Checked ── */
+.strand-switch--checked .strand-switch__track {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+.strand-switch--checked .strand-switch__thumb {
+  transform: translateX(18px);
+}
+
+/* ── Hover ── */
+.strand-switch:hover:not(.strand-switch--disabled) .strand-switch__track {
+  border-color: var(--strand-blue-indicator);
+}
+
+.strand-switch--checked:hover:not(.strand-switch--disabled) .strand-switch__track {
+  background: var(--strand-blue-vivid);
+  border-color: var(--strand-blue-vivid);
+}
+
+/* ── Label ── */
+.strand-switch__label {
+  color: var(--strand-gray-900);
+}
+
+/* ── Disabled ── */
+.strand-switch--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-switch--disabled .strand-switch__track {
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-switch__track,
+  .strand-switch__thumb {
+    transition: none;
+  }
+}

package/src/components/Switch/Switch.test.tsx

@@ -0,0 +1,98 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Switch } from "./Switch.js";
+
+describe("Switch", () => {
+  // ── Rendering ──
+
+  it("renders as switch role", () => {
+    const { getByRole } = render(<Switch />);
+    expect(getByRole("switch")).toBeTruthy();
+  });
+
+  // ── Toggle on click ──
+
+  it("calls onChange with toggled value when clicked", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Switch onChange={onChange} />);
+    fireEvent.click(getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("calls onChange with false when checked switch is clicked", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Switch checked onChange={onChange} />);
+    fireEvent.click(getByRole("switch"));
+    expect(onChange).toHaveBeenCalledWith(false);
+  });
+
+  // ── Toggle on Space key ──
+
+  it("toggles on Space key", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Switch onChange={onChange} />);
+    fireEvent.keyDown(getByRole("switch"), { key: " " });
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  // ── Toggle on Enter key ──
+
+  it("toggles on Enter key", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Switch onChange={onChange} />);
+    fireEvent.keyDown(getByRole("switch"), { key: "Enter" });
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  // ── Checked state ──
+
+  it("sets aria-checked true when checked", () => {
+    const { getByRole } = render(<Switch checked />);
+    expect(getByRole("switch")).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("sets aria-checked false when unchecked", () => {
+    const { getByRole } = render(<Switch checked={false} />);
+    expect(getByRole("switch")).toHaveAttribute("aria-checked", "false");
+  });
+
+  it("applies checked class", () => {
+    const { container } = render(<Switch checked />);
+    expect(container.querySelector(".strand-switch--checked")).toBeTruthy();
+  });
+
+  // ── Disabled state ──
+
+  it("disables the switch when disabled prop is set", () => {
+    const { getByRole } = render(<Switch disabled />);
+    expect(getByRole("switch")).toBeDisabled();
+  });
+
+  it("does not call onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Switch disabled onChange={onChange} />);
+    fireEvent.click(getByRole("switch"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("applies disabled class", () => {
+    const { container } = render(<Switch disabled />);
+    expect(container.querySelector(".strand-switch--disabled")).toBeTruthy();
+  });
+
+  // ── Inline label ──
+
+  it("renders inline label text", () => {
+    const { getByText } = render(<Switch label="Dark mode" />);
+    expect(getByText("Dark mode")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Switch className="custom" />);
+    expect(container.querySelector(".strand-switch")?.className).toContain(
+      "custom",
+    );
+  });
+});

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,80 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SwitchProps
+  extends Omit<
+    JSX.HTMLAttributes<HTMLButtonElement>,
+    "checked" | "onChange" | "label" | "type" | "role"
+  > {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Change handler */
+  onChange?: (checked: boolean) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Inline label text */
+  label?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      disabled = false,
+      label,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-switch",
+      checked && "strand-switch--checked",
+      disabled && "strand-switch--disabled",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const handleClick = () => {
+      if (!disabled && onChange) {
+        onChange(!checked);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.key === " " || e.key === "Enter") && !disabled) {
+        e.preventDefault();
+        if (onChange) {
+          onChange(!checked);
+        }
+      }
+    };
+
+    return (
+      <label className={classes}>
+        <button
+          ref={ref}
+          type="button"
+          role="switch"
+          className="strand-switch__track"
+          aria-checked={checked ? "true" : "false"}
+          disabled={disabled}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          {...rest}
+        >
+          <span className="strand-switch__thumb" aria-hidden="true" />
+        </button>
+        {label && <span className="strand-switch__label">{label}</span>}
+      </label>
+    );
+  },
+);
+
+Switch.displayName = "Switch";

package/src/components/Switch/index.ts

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

package/src/components/Table/Table.css

@@ -0,0 +1,83 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Wrapper (responsive scroll) ── */
+.strand-table-wrapper {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* ── Table ── */
+.strand-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* ── Header ── */
+.strand-table__th {
+  padding: var(--strand-space-3) var(--strand-space-4);
+  font-family: var(--strand-font-mono);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  letter-spacing: var(--strand-tracking-widest);
+  text-transform: uppercase;
+  color: var(--strand-gray-500);
+  text-align: left;
+  border-bottom: 1px solid var(--strand-gray-200);
+  white-space: nowrap;
+}
+
+/* ── Sort button ── */
+.strand-table__sort-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-1);
+  padding: 0;
+  border: none;
+  background: none;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.strand-table__sort-btn:hover {
+  color: var(--strand-gray-600);
+}
+
+.strand-table__sort-btn:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-table__sort-indicator {
+  font-size: var(--strand-text-xs);
+  opacity: 0.6;
+}
+
+/* ── Body ── */
+.strand-table__td {
+  padding: var(--strand-space-3) var(--strand-space-4);
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  color: var(--strand-gray-600);
+  border-bottom: 1px solid var(--strand-gray-200);
+}
+
+/* ── Row hover ── */
+.strand-table__row {
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-table__row:hover {
+  background: var(--strand-blue-glow);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-table__row {
+    transition: none;
+  }
+}

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,134 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Table } from "./Table.js";
+
+const columns = [
+  { key: "name", header: "Name", sortable: true },
+  { key: "role", header: "Role" },
+  { key: "status", header: "Status", sortable: true },
+];
+
+const data = [
+  { name: "Alice", role: "Engineer", status: "Active" },
+  { name: "Bob", role: "Designer", status: "Away" },
+];
+
+describe("Table", () => {
+  // ── Rendering ──
+
+  it("renders a table element", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    expect(container.querySelector("table")).toBeTruthy();
+  });
+
+  it("renders column headers", () => {
+    const { getByText } = render(<Table columns={columns} data={data} />);
+    expect(getByText("Name")).toBeTruthy();
+    expect(getByText("Role")).toBeTruthy();
+    expect(getByText("Status")).toBeTruthy();
+  });
+
+  it("renders data rows", () => {
+    const { getByText } = render(<Table columns={columns} data={data} />);
+    expect(getByText("Alice")).toBeTruthy();
+    expect(getByText("Bob")).toBeTruthy();
+  });
+
+  it("renders correct number of cells", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    const cells = container.querySelectorAll(".strand-table__td");
+    // 2 rows x 3 columns = 6 cells
+    expect(cells.length).toBe(6);
+  });
+
+  it("renders correct number of header cells", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    const headers = container.querySelectorAll(".strand-table__th");
+    expect(headers.length).toBe(3);
+  });
+
+  // ── Sorting ──
+
+  it("renders sort button for sortable columns", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    const sortButtons = container.querySelectorAll(".strand-table__sort-btn");
+    // "Name" and "Status" are sortable
+    expect(sortButtons.length).toBe(2);
+  });
+
+  it("does not render sort button for non-sortable columns", () => {
+    const nonSortable = [{ key: "role", header: "Role" }];
+    const { container } = render(
+      <Table columns={nonSortable} data={data} />,
+    );
+    const sortButtons = container.querySelectorAll(".strand-table__sort-btn");
+    expect(sortButtons.length).toBe(0);
+  });
+
+  it("calls onSort with key and asc direction on first click", () => {
+    const onSort = vi.fn();
+    const { container } = render(
+      <Table columns={columns} data={data} onSort={onSort} />,
+    );
+    const sortButtons = container.querySelectorAll(".strand-table__sort-btn");
+    fireEvent.click(sortButtons[0]);
+    expect(onSort).toHaveBeenCalledWith("name", "asc");
+  });
+
+  it("toggles sort direction on second click of same column", () => {
+    const onSort = vi.fn();
+    const { container } = render(
+      <Table columns={columns} data={data} onSort={onSort} />,
+    );
+    const sortButtons = container.querySelectorAll(".strand-table__sort-btn");
+    fireEvent.click(sortButtons[0]); // asc
+    fireEvent.click(sortButtons[0]); // desc
+    expect(onSort).toHaveBeenLastCalledWith("name", "desc");
+  });
+
+  // ── Responsive ──
+
+  it("wraps table in overflow-x scroll container", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    const wrapper = container.querySelector(".strand-table-wrapper");
+    expect(wrapper).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with wrapper classes", () => {
+    const { container } = render(
+      <Table columns={columns} data={data} className="custom" />,
+    );
+    const wrapper = container.querySelector(".strand-table-wrapper");
+    expect(wrapper?.className).toContain("strand-table-wrapper");
+    expect(wrapper?.className).toContain("custom");
+  });
+
+  // ── Empty state ──
+
+  it("renders empty tbody when data is empty", () => {
+    const { container } = render(<Table columns={columns} data={[]} />);
+    const rows = container.querySelectorAll(".strand-table__row");
+    expect(rows.length).toBe(0);
+  });
+
+  // ── Column width ──
+
+  it("applies width style to column headers", () => {
+    const cols = [{ key: "name", header: "Name", width: "200px" }];
+    const { container } = render(<Table columns={cols} data={[]} />);
+    const th = container.querySelector(".strand-table__th") as HTMLElement;
+    expect(th?.style.width).toBe("200px");
+  });
+
+  // ── Sort indicator ──
+
+  it("shows sort indicator on sortable columns", () => {
+    const { container } = render(<Table columns={columns} data={data} />);
+    const indicators = container.querySelectorAll(
+      ".strand-table__sort-indicator",
+    );
+    expect(indicators.length).toBe(2);
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,102 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useState, useCallback } from "preact/hooks";
+
+export interface TableColumn {
+  /** Unique key matching the data field */
+  key: string;
+  /** Display header text */
+  header: string;
+  /** Whether the column is sortable */
+  sortable?: boolean;
+  /** Optional fixed width */
+  width?: string;
+}
+
+export interface TableProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "data"> {
+  /** Column definitions */
+  columns: TableColumn[];
+  /** Row data */
+  data: Array<Record<string, any>>;
+  /** Called when a sortable column header is clicked */
+  onSort?: (key: string, direction: "asc" | "desc") => void;
+}
+
+export const Table = forwardRef<HTMLDivElement, TableProps>(
+  ({ columns, data, onSort, className = "", ...rest }, ref) => {
+    const [sortKey, setSortKey] = useState<string | null>(null);
+    const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
+
+    const handleSort = useCallback(
+      (key: string) => {
+        const nextDirection =
+          sortKey === key && sortDirection === "asc" ? "desc" : "asc";
+        setSortKey(key);
+        setSortDirection(nextDirection);
+        onSort?.(key, nextDirection);
+      },
+      [sortKey, sortDirection, onSort],
+    );
+
+    const wrapperClasses = ["strand-table-wrapper", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={wrapperClasses} {...rest}>
+        <table className="strand-table">
+          <thead className="strand-table__head">
+            <tr>
+              {columns.map((col) => (
+                <th
+                  key={col.key}
+                  className="strand-table__th"
+                  style={col.width ? { width: col.width } : undefined}
+                >
+                  {col.sortable ? (
+                    <button
+                      type="button"
+                      className="strand-table__sort-btn"
+                      onClick={() => handleSort(col.key)}
+                      aria-label={`Sort by ${col.header}`}
+                    >
+                      {col.header}
+                      <span
+                        className="strand-table__sort-indicator"
+                        aria-hidden="true"
+                      >
+                        {sortKey === col.key
+                          ? sortDirection === "asc"
+                            ? "\u2191"
+                            : "\u2193"
+                          : "\u2195"}
+                      </span>
+                    </button>
+                  ) : (
+                    col.header
+                  )}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="strand-table__body">
+            {data.map((row, rowIndex) => (
+              <tr key={rowIndex} className="strand-table__row">
+                {columns.map((col) => (
+                  <td key={col.key} className="strand-table__td">
+                    {row[col.key]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  },
+);
+
+Table.displayName = "Table";

package/src/components/Table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from "./Table.js";
+export type { TableProps, TableColumn } from "./Table.js";

package/src/components/Tabs/Tabs.css

@@ -0,0 +1,51 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Tab list ── */
+.strand-tabs [role="tablist"] {
+  display: flex;
+  gap: var(--strand-space-1);
+  border-bottom: 1px solid var(--strand-gray-400);
+}
+
+/* ── Tab button ── */
+.strand-tabs__tab {
+  position: relative;
+  padding: var(--strand-space-2) var(--strand-space-4);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: none;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-500);
+  cursor: pointer;
+  transition:
+    color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    border-color var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+.strand-tabs__tab:hover {
+  color: var(--strand-gray-600);
+}
+
+.strand-tabs__tab:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+.strand-tabs__tab--active {
+  color: var(--strand-blue-primary);
+  border-bottom-color: var(--strand-blue-primary);
+}
+
+/* ── Panel ── */
+.strand-tabs [role="tabpanel"] {
+  padding: var(--strand-space-4) 0;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-tabs__tab {
+    transition: none;
+  }
+}