@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Nav/Nav.tsx

@@ -0,0 +1,101 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useState, useCallback } from "preact/hooks";
+
+export interface NavItem {
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export interface NavProps
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, "logo"> {
+  /** Logo element rendered on the left */
+  logo?: ComponentChildren;
+  /** Navigation items */
+  items?: NavItem[];
+  /** Right-side action elements */
+  actions?: ComponentChildren;
+}
+
+export const Nav = forwardRef<HTMLElement, NavProps>(
+  ({ logo, items = [], actions, className = "", ...rest }, ref) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const toggleMenu = useCallback(() => {
+      setMenuOpen((prev) => !prev);
+    }, []);
+
+    const classes = ["strand-nav", className].filter(Boolean).join(" ");
+
+    return (
+      <nav ref={ref} className={classes} aria-label="Main navigation" {...rest}>
+        <div className="strand-nav__inner">
+          {logo && <div className="strand-nav__logo">{logo}</div>}
+
+          <div className="strand-nav__items">
+            {items.map((item) => {
+              const linkClasses = [
+                "strand-nav__link",
+                item.active && "strand-nav__link--active",
+              ]
+                .filter(Boolean)
+                .join(" ");
+
+              return (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className={linkClasses}
+                  aria-current={item.active ? "page" : undefined}
+                >
+                  {item.label}
+                </a>
+              );
+            })}
+          </div>
+
+          {actions && <div className="strand-nav__actions">{actions}</div>}
+
+          <button
+            type="button"
+            className="strand-nav__hamburger"
+            aria-expanded={menuOpen ? "true" : "false"}
+            aria-label={menuOpen ? "Close menu" : "Menu"}
+            onClick={toggleMenu}
+          >
+            <span className="strand-nav__hamburger-icon" aria-hidden="true" />
+          </button>
+        </div>
+
+        {menuOpen && (
+          <div className="strand-nav__mobile-menu">
+            {items.map((item) => {
+              const linkClasses = [
+                "strand-nav__mobile-link",
+                item.active && "strand-nav__mobile-link--active",
+              ]
+                .filter(Boolean)
+                .join(" ");
+
+              return (
+                <a
+                  key={item.href}
+                  href={item.href}
+                  className={linkClasses}
+                  aria-current={item.active ? "page" : undefined}
+                >
+                  {item.label}
+                </a>
+              );
+            })}
+          </div>
+        )}
+      </nav>
+    );
+  },
+);
+
+Nav.displayName = "Nav";

package/src/components/Nav/index.ts

@@ -0,0 +1,2 @@
+export { Nav } from "./Nav.js";
+export type { NavProps, NavItem } from "./Nav.js";

package/src/components/Progress/Progress.css

@@ -0,0 +1,93 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Bar base ── */
+.strand-progress--bar {
+  width: 100%;
+  background: var(--strand-gray-200);
+  border-radius: var(--strand-radius-full);
+  overflow: hidden;
+}
+
+/* ── Bar sizes ── */
+.strand-progress--bar.strand-progress--sm {
+  height: 4px;
+}
+
+.strand-progress--bar.strand-progress--md {
+  height: 8px;
+}
+
+.strand-progress--bar.strand-progress--lg {
+  height: 12px;
+}
+
+/* ── Bar fill ── */
+.strand-progress--bar .strand-progress__fill {
+  height: 100%;
+  background: var(--strand-blue-primary);
+  border-radius: var(--strand-radius-full);
+  transition: width var(--strand-duration-normal) var(--strand-ease-out-quart);
+}
+
+/* ── Bar indeterminate ── */
+.strand-progress--bar.strand-progress--indeterminate .strand-progress__fill {
+  width: 40%;
+  animation: strand-progress-shimmer 1.5s var(--strand-ease-in-out-sine) infinite;
+}
+
+@keyframes strand-progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+/* ── Ring base ── */
+.strand-progress--ring {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Ring track and fill ── */
+.strand-progress__track {
+  stroke: var(--strand-gray-200);
+}
+
+.strand-progress__fill {
+  stroke: var(--strand-blue-primary);
+}
+
+.strand-progress--ring .strand-progress__ring {
+  transition: stroke-dashoffset var(--strand-duration-normal) var(--strand-ease-out-quart);
+}
+
+/* ── Ring indeterminate ── */
+.strand-progress--ring.strand-progress--indeterminate .strand-progress__ring {
+  animation: strand-progress-rotate 1.2s linear infinite;
+}
+
+@keyframes strand-progress-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-progress--bar .strand-progress__fill {
+    transition: none;
+  }
+
+  .strand-progress--bar.strand-progress--indeterminate .strand-progress__fill {
+    animation: none;
+    width: 100%;
+    opacity: 0.4;
+  }
+
+  .strand-progress--ring.strand-progress--indeterminate .strand-progress__ring {
+    animation: none;
+  }
+}

package/src/components/Progress/Progress.test.tsx

@@ -0,0 +1,93 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Progress } from "./Progress.js";
+
+describe("Progress", () => {
+  // ── ARIA ──
+
+  it("renders with progressbar role", () => {
+    const { getByRole } = render(<Progress value={50} />);
+    expect(getByRole("progressbar")).toBeTruthy();
+  });
+
+  it("has aria-valuemin of 0", () => {
+    const { getByRole } = render(<Progress value={50} />);
+    expect(getByRole("progressbar")).toHaveAttribute("aria-valuemin", "0");
+  });
+
+  it("has aria-valuemax of 100", () => {
+    const { getByRole } = render(<Progress value={50} />);
+    expect(getByRole("progressbar")).toHaveAttribute("aria-valuemax", "100");
+  });
+
+  it("has aria-valuenow when determinate", () => {
+    const { getByRole } = render(<Progress value={75} />);
+    expect(getByRole("progressbar")).toHaveAttribute("aria-valuenow", "75");
+  });
+
+  it("has no aria-valuenow when indeterminate", () => {
+    const { getByRole } = render(<Progress />);
+    expect(getByRole("progressbar")).not.toHaveAttribute("aria-valuenow");
+  });
+
+  // ── Variants ──
+
+  it("applies bar variant class by default", () => {
+    const { getByRole } = render(<Progress value={50} />);
+    expect(getByRole("progressbar").className).toContain(
+      "strand-progress--bar",
+    );
+  });
+
+  it("applies ring variant class", () => {
+    const { getByRole } = render(<Progress variant="ring" value={50} />);
+    expect(getByRole("progressbar").className).toContain(
+      "strand-progress--ring",
+    );
+  });
+
+  it("renders SVG for ring variant", () => {
+    const { container } = render(<Progress variant="ring" value={50} />);
+    expect(container.querySelector("svg")).toBeTruthy();
+  });
+
+  // ── Sizes ──
+
+  it("applies md size class by default", () => {
+    const { getByRole } = render(<Progress value={50} />);
+    expect(getByRole("progressbar").className).toContain(
+      "strand-progress--md",
+    );
+  });
+
+  it("applies sm size class", () => {
+    const { getByRole } = render(<Progress value={50} size="sm" />);
+    expect(getByRole("progressbar").className).toContain(
+      "strand-progress--sm",
+    );
+  });
+
+  it("applies lg size class", () => {
+    const { getByRole } = render(<Progress value={50} size="lg" />);
+    expect(getByRole("progressbar").className).toContain(
+      "strand-progress--lg",
+    );
+  });
+
+  // ── Fill width ──
+
+  it("sets fill width to match value for bar variant", () => {
+    const { container } = render(<Progress value={60} />);
+    const fill = container.querySelector(".strand-progress__fill");
+    expect((fill as HTMLElement)?.style.width).toBe("60%");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(<Progress value={50} className="custom" />);
+    const el = getByRole("progressbar");
+    expect(el.className).toContain("strand-progress");
+    expect(el.className).toContain("custom");
+  });
+});

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,104 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface ProgressProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "size"> {
+  /** Visual variant */
+  variant?: "bar" | "ring";
+  /** Completion percentage (0-100). Omit for indeterminate. */
+  value?: number;
+  /** Size of the progress indicator */
+  size?: "sm" | "md" | "lg";
+}
+
+const RING_SIZES: Record<string, number> = { sm: 24, md: 40, lg: 56 };
+const RING_STROKE = 3;
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  (
+    {
+      variant = "bar",
+      value,
+      size = "md",
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const isDeterminate = value != null;
+
+    const classes = [
+      "strand-progress",
+      `strand-progress--${variant}`,
+      `strand-progress--${size}`,
+      !isDeterminate && "strand-progress--indeterminate",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const ariaProps: Record<string, string | number | undefined> = {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+    };
+
+    if (isDeterminate) {
+      ariaProps["aria-valuenow"] = value;
+    }
+
+    if (variant === "ring") {
+      const dim = RING_SIZES[size] ?? RING_SIZES.md;
+      const radius = (dim - RING_STROKE) / 2;
+      const circumference = 2 * Math.PI * radius;
+      const offset = isDeterminate
+        ? circumference - (circumference * (value as number)) / 100
+        : 0;
+
+      return (
+        <div ref={ref} className={classes} {...ariaProps} {...rest}>
+          <svg
+            width={dim}
+            height={dim}
+            viewBox={`0 0 ${dim} ${dim}`}
+            className="strand-progress__ring"
+          >
+            <circle
+              cx={dim / 2}
+              cy={dim / 2}
+              r={radius}
+              fill="none"
+              stroke-width={RING_STROKE}
+              className="strand-progress__track"
+            />
+            <circle
+              cx={dim / 2}
+              cy={dim / 2}
+              r={radius}
+              fill="none"
+              stroke-width={RING_STROKE}
+              stroke-dasharray={circumference}
+              stroke-dashoffset={isDeterminate ? offset : undefined}
+              stroke-linecap="round"
+              className="strand-progress__fill"
+              transform={`rotate(-90 ${dim / 2} ${dim / 2})`}
+            />
+          </svg>
+        </div>
+      );
+    }
+
+    return (
+      <div ref={ref} className={classes} {...ariaProps} {...rest}>
+        <div
+          className="strand-progress__fill"
+          style={isDeterminate ? { width: `${value}%` } : undefined}
+        />
+      </div>
+    );
+  },
+);
+
+Progress.displayName = "Progress";

package/src/components/Progress/index.ts

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

package/src/components/Radio/Radio.css

@@ -0,0 +1,98 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-radio {
+  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-radio__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-radio__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-full);
+  background: var(--strand-surface-elevated);
+  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-radio__dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--strand-radius-full);
+  background: var(--strand-on-blue-primary);
+  transform: scale(0);
+  transition: transform var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+/* ── Focus ring ── */
+.strand-radio__native:focus-visible ~ .strand-radio__control {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Checked ── */
+.strand-radio--checked .strand-radio__control {
+  background: var(--strand-blue-primary);
+  border-color: var(--strand-blue-primary);
+}
+
+.strand-radio--checked .strand-radio__dot {
+  transform: scale(1);
+}
+
+/* ── Hover ── */
+.strand-radio:hover:not(.strand-radio--disabled) .strand-radio__control {
+  border-color: var(--strand-blue-indicator);
+}
+
+.strand-radio--checked:hover:not(.strand-radio--disabled) .strand-radio__control {
+  background: var(--strand-blue-vivid);
+  border-color: var(--strand-blue-vivid);
+}
+
+/* ── Label ── */
+.strand-radio__label {
+  color: var(--strand-gray-900);
+}
+
+/* ── Disabled ── */
+.strand-radio--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-radio__control,
+  .strand-radio__dot {
+    transition: none;
+  }
+}

package/src/components/Radio/Radio.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Radio } from "./Radio.js";
+
+describe("Radio", () => {
+  // ── Rendering ──
+
+  it("renders a radio input", () => {
+    const { getByRole } = render(<Radio />);
+    expect(getByRole("radio")).toBeTruthy();
+  });
+
+  // ── Selection ──
+
+  it("calls onChange when clicked", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Radio onChange={onChange} />);
+    fireEvent.click(getByRole("radio"));
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Name and value ──
+
+  it("has the correct name attribute", () => {
+    const { getByRole } = render(<Radio name="color" value="red" />);
+    expect(getByRole("radio")).toHaveAttribute("name", "color");
+  });
+
+  it("has the correct value attribute", () => {
+    const { getByRole } = render(<Radio name="color" value="red" />);
+    expect(getByRole("radio")).toHaveAttribute("value", "red");
+  });
+
+  // ── Checked state ──
+
+  it("reflects checked state", () => {
+    const { getByRole } = render(<Radio checked />);
+    expect((getByRole("radio") as HTMLInputElement).checked).toBe(true);
+  });
+
+  it("applies checked class", () => {
+    const { container } = render(<Radio checked />);
+    expect(container.querySelector(".strand-radio--checked")).toBeTruthy();
+  });
+
+  // ── Disabled state ──
+
+  it("disables the radio when disabled prop is set", () => {
+    const { getByRole } = render(<Radio disabled />);
+    expect(getByRole("radio")).toBeDisabled();
+  });
+
+  it("does not call onChange when disabled", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(<Radio disabled onChange={onChange} />);
+    fireEvent.click(getByRole("radio"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("applies disabled class", () => {
+    const { container } = render(<Radio disabled />);
+    expect(container.querySelector(".strand-radio--disabled")).toBeTruthy();
+  });
+
+  // ── Label ──
+
+  it("renders label text", () => {
+    const { getByText } = render(<Radio label="Option A" />);
+    expect(getByText("Option A")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Radio className="custom" />);
+    expect(container.querySelector(".strand-radio")?.className).toContain(
+      "custom",
+    );
+  });
+});

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,72 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface RadioProps
+  extends Omit<
+    JSX.HTMLAttributes<HTMLInputElement>,
+    "checked" | "onChange" | "label" | "type"
+  > {
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Change handler */
+  onChange?: (e: Event) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Radio group name */
+  name?: string;
+  /** Radio value */
+  value?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      disabled = false,
+      label,
+      name,
+      value,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-radio",
+      checked && "strand-radio--checked",
+      disabled && "strand-radio--disabled",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <label className={classes}>
+        <input
+          ref={ref}
+          type="radio"
+          className="strand-radio__native"
+          checked={checked}
+          disabled={disabled}
+          onChange={disabled ? undefined : onChange}
+          name={name}
+          value={value}
+          {...rest}
+        />
+        <span className="strand-radio__control" aria-hidden="true">
+          <span className="strand-radio__dot" />
+        </span>
+        {label && <span className="strand-radio__label">{label}</span>}
+      </label>
+    );
+  },
+);
+
+Radio.displayName = "Radio";

package/src/components/Radio/index.ts

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

package/src/components/Section/Section.css

@@ -0,0 +1,28 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-section {
+  width: 100%;
+}
+
+/* ── Variants ── */
+.strand-section--standard {
+  padding-block: clamp(4rem, 8vw, 8rem);
+}
+
+.strand-section--hero {
+  padding-block: clamp(6rem, 12vw, 12rem);
+}
+
+/* ── Backgrounds ── */
+.strand-section--bg-primary {
+  background-color: var(--strand-surface-primary);
+}
+
+.strand-section--bg-elevated {
+  background-color: var(--strand-surface-elevated);
+}
+
+.strand-section--bg-recessed {
+  background-color: var(--strand-surface-recessed);
+}