@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Card/Card.css

@@ -0,0 +1,68 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-card {
+  border-radius: var(--strand-radius-lg);
+  background: var(--strand-surface-elevated);
+  font-family: var(--strand-font-sans);
+  overflow: hidden;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+/* ── Variants ── */
+.strand-card--elevated {
+  box-shadow: var(--strand-elevation-1);
+}
+
+.strand-card--outlined {
+  box-shadow: none;
+  border: 1px solid var(--strand-gray-200);
+}
+
+.strand-card--interactive {
+  box-shadow: var(--strand-elevation-1);
+  cursor: pointer;
+  transition:
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+.strand-card--interactive:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--strand-elevation-2);
+}
+
+/* ── Padding ── */
+.strand-card--pad-none {
+  padding: 0;
+}
+
+.strand-card--pad-sm {
+  padding: var(--strand-space-4);
+}
+
+.strand-card--pad-md {
+  padding: var(--strand-space-6);
+}
+
+.strand-card--pad-lg {
+  padding: var(--strand-space-10);
+}
+
+/* ── Focus ring (interactive cards) ── */
+.strand-card--interactive:focus-visible {
+  outline: 2px solid var(--strand-blue-primary);
+  outline-offset: 2px;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-card--interactive {
+    transition: none;
+  }
+
+  .strand-card--interactive:hover {
+    transform: none;
+  }
+}

package/src/components/Card/Card.test.tsx

@@ -0,0 +1,90 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Card } from "./Card.js";
+
+describe("Card", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Card>Content</Card>);
+    const el = container.firstElementChild;
+    expect(el?.tagName).toBe("DIV");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(<Card>Hello world</Card>);
+    expect(getByText("Hello world")).toBeTruthy();
+  });
+
+  // ── Variants ──
+
+  it("applies elevated variant class by default", () => {
+    const { container } = render(<Card>Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--elevated",
+    );
+  });
+
+  it("applies outlined variant class", () => {
+    const { container } = render(<Card variant="outlined">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--outlined",
+    );
+  });
+
+  it("applies interactive variant class with cursor pointer", () => {
+    const { container } = render(<Card variant="interactive">Test</Card>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-card--interactive");
+  });
+
+  // ── Padding ──
+
+  it("applies md padding class by default", () => {
+    const { container } = render(<Card>Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-md",
+    );
+  });
+
+  it("applies none padding class", () => {
+    const { container } = render(<Card padding="none">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-none",
+    );
+  });
+
+  it("applies sm padding class", () => {
+    const { container } = render(<Card padding="sm">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-sm",
+    );
+  });
+
+  it("applies lg padding class", () => {
+    const { container } = render(<Card padding="lg">Test</Card>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-card--pad-lg",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(<Card className="custom">Test</Card>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-card");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Card data-testid="my-card" id="card-1">
+        Test
+      </Card>,
+    );
+    expect(container.firstElementChild?.getAttribute("id")).toBe("card-1");
+  });
+});

package/src/components/Card/Card.tsx

@@ -0,0 +1,41 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Visual style variant */
+  variant?: "elevated" | "outlined" | "interactive";
+  /** Inner padding */
+  padding?: "none" | "sm" | "md" | "lg";
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  (
+    {
+      variant = "elevated",
+      padding = "md",
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-card",
+      `strand-card--${variant}`,
+      `strand-card--pad-${padding}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+Card.displayName = "Card";

package/src/components/Card/index.ts

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

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,97 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-checkbox {
+  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);
+}
+
+/* ── Hidden native input ── */
+.strand-checkbox__native {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Custom visual ── */
+.strand-checkbox__control {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-sm);
+  background: var(--strand-surface-elevated);
+  color: var(--strand-on-blue-primary);
+  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-checkbox__icon {
+  width: 14px;
+  height: 14px;
+}
+
+/* ── Focus ring ── */
+.strand-checkbox__native:focus-visible ~ .strand-checkbox__control {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Checked ── */
+.strand-checkbox--checked .strand-checkbox__control {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+/* ── Indeterminate ── */
+.strand-checkbox--indeterminate .strand-checkbox__control {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+/* ── Hover ── */
+.strand-checkbox:hover:not(.strand-checkbox--disabled) .strand-checkbox__control {
+  border-color: var(--strand-blue-indicator);
+}
+
+.strand-checkbox--checked:hover:not(.strand-checkbox--disabled) .strand-checkbox__control,
+.strand-checkbox--indeterminate:hover:not(.strand-checkbox--disabled) .strand-checkbox__control {
+  background: var(--strand-blue-vivid);
+  border-color: var(--strand-blue-vivid);
+}
+
+/* ── Label ── */
+.strand-checkbox__label {
+  color: var(--strand-gray-900);
+}
+
+/* ── Disabled ── */
+.strand-checkbox--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-checkbox__control {
+    transition: none;
+  }
+}

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,92 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Checkbox } from "./Checkbox.js";
+
+describe("Checkbox", () => {
+  // ── Rendering ──
+
+  it("renders a checkbox", () => {
+    const { getByRole } = render(<Checkbox />);
+    expect(getByRole("checkbox")).toBeTruthy();
+  });
+
+  // ── Toggle on click ──
+
+  it("calls onChange when clicked", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox onChange={onChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Toggle on Space key ──
+
+  it("toggles on Space key via native input", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox onChange={onChange} />);
+    const input = getByRole("checkbox");
+    fireEvent.keyDown(input, { key: " " });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  // ── Indeterminate state ──
+
+  it("shows indeterminate state with aria-checked mixed", () => {
+    const { getByRole } = render(<Checkbox indeterminate />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "mixed");
+  });
+
+  it("applies indeterminate class", () => {
+    const { container } = render(<Checkbox indeterminate />);
+    expect(
+      container.querySelector(".strand-checkbox--indeterminate"),
+    ).toBeTruthy();
+  });
+
+  // ── Checked state ──
+
+  it("sets aria-checked true when checked", () => {
+    const { getByRole } = render(<Checkbox checked />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("sets aria-checked false when unchecked", () => {
+    const { getByRole } = render(<Checkbox checked={false} />);
+    expect(getByRole("checkbox")).toHaveAttribute("aria-checked", "false");
+  });
+
+  // ── Disabled state ──
+
+  it("disables the checkbox when disabled prop is set", () => {
+    const { getByRole } = render(<Checkbox disabled />);
+    expect(getByRole("checkbox")).toBeDisabled();
+  });
+
+  it("does not call onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Checkbox disabled onChange={onChange} />);
+    fireEvent.click(getByRole("checkbox"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("applies disabled class", () => {
+    const { container } = render(<Checkbox disabled />);
+    expect(container.querySelector(".strand-checkbox--disabled")).toBeTruthy();
+  });
+
+  // ── Label ──
+
+  it("renders label text", () => {
+    const { getByText } = render(<Checkbox label="Accept terms" />);
+    expect(getByText("Accept terms")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Checkbox className="custom" />);
+    expect(container.querySelector(".strand-checkbox")?.className).toContain(
+      "custom",
+    );
+  });
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,137 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useRef, useEffect } from "preact/hooks";
+
+export interface CheckboxProps
+  extends Omit<
+    JSX.HTMLAttributes<HTMLInputElement>,
+    "checked" | "onChange" | "label" | "type" | "role"
+  > {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Indeterminate visual state */
+  indeterminate?: boolean;
+  /** Change handler */
+  onChange?: (e: Event) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      checked = false,
+      indeterminate = false,
+      onChange,
+      disabled = false,
+      label,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      const el =
+        typeof ref === "function"
+          ? internalRef.current
+          : ref?.current ?? internalRef.current;
+      if (el) {
+        el.indeterminate = indeterminate;
+      }
+    }, [indeterminate, ref]);
+
+    const classes = [
+      "strand-checkbox",
+      checked && "strand-checkbox--checked",
+      indeterminate && "strand-checkbox--indeterminate",
+      disabled && "strand-checkbox--disabled",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const ariaChecked = indeterminate ? "mixed" : checked ? "true" : "false";
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === " " && !disabled) {
+        e.preventDefault();
+        const input = internalRef.current;
+        if (input) {
+          input.click();
+        }
+      }
+    };
+
+    const setRefs = (el: HTMLInputElement | null) => {
+      (internalRef as { current: HTMLInputElement | null }).current = el;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref) {
+        (ref as { current: HTMLInputElement | null }).current = el;
+      }
+    };
+
+    return (
+      <label
+        className={classes}
+        onKeyDown={handleKeyDown}
+      >
+        <input
+          ref={setRefs}
+          type="checkbox"
+          className="strand-checkbox__native"
+          checked={checked}
+          disabled={disabled}
+          onChange={disabled ? undefined : onChange}
+          aria-checked={ariaChecked}
+          role="checkbox"
+          {...rest}
+        />
+        <span className="strand-checkbox__control" aria-hidden="true">
+          {indeterminate ? (
+            <svg
+              className="strand-checkbox__icon"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <line
+                x1="4"
+                y1="8"
+                x2="12"
+                y2="8"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+              />
+            </svg>
+          ) : checked ? (
+            <svg
+              className="strand-checkbox__icon"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <path
+                d="M3.5 8L6.5 11L12.5 5"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          ) : null}
+        </span>
+        {label && <span className="strand-checkbox__label">{label}</span>}
+      </label>
+    );
+  },
+);
+
+Checkbox.displayName = "Checkbox";

package/src/components/Checkbox/index.ts

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

package/src/components/Container/Container.css

@@ -0,0 +1,25 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: clamp(1.5rem, 5vw, 4rem);
+}
+
+/* ── Sizes ── */
+.strand-container--narrow {
+  max-width: var(--strand-content-narrow);
+}
+
+.strand-container--default {
+  max-width: var(--strand-content-default);
+}
+
+.strand-container--wide {
+  max-width: var(--strand-content-wide);
+}
+
+.strand-container--full {
+  max-width: var(--strand-content-full);
+}

package/src/components/Container/Container.test.tsx

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Container } from "./Container.js";
+
+describe("Container", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Container>content</Container>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <Container>
+        <p>Hello world</p>
+      </Container>,
+    );
+    expect(getByText("Hello world")).toBeTruthy();
+  });
+
+  // ── Size variants ──
+
+  it("applies default size class by default", () => {
+    const { container } = render(<Container>content</Container>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-container--default",
+    );
+  });
+
+  it("applies narrow size class", () => {
+    const { container } = render(<Container size="narrow">content</Container>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-container--narrow",
+    );
+  });
+
+  it("applies wide size class", () => {
+    const { container } = render(<Container size="wide">content</Container>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-container--wide",
+    );
+  });
+
+  it("applies full size class", () => {
+    const { container } = render(<Container size="full">content</Container>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-container--full",
+    );
+  });
+
+  // ── Base class ──
+
+  it("has base container class for auto margin", () => {
+    const { container } = render(<Container>content</Container>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-container",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Container className="custom">content</Container>,
+    );
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-container");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Container data-testid="my-container" id="c1">
+        content
+      </Container>,
+    );
+    expect(container.firstElementChild).toHaveAttribute("id", "c1");
+  });
+});

package/src/components/Container/Container.tsx

@@ -0,0 +1,37 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Max-width constraint */
+  size?: "narrow" | "default" | "wide" | "full";
+}
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  (
+    {
+      size = "default",
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-container",
+      `strand-container--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        {children}
+      </div>
+    );
+  },
+);
+
+Container.displayName = "Container";

package/src/components/Container/index.ts

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