@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

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";

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,80 @@
+/*! 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: rgba(15, 23, 42, 0.5);
+}
+
+/* ── Panel ── */
+.strand-dialog__panel {
+  position: relative;
+  width: 100%;
+  max-width: 560px;
+  margin: var(--strand-space-4);
+  padding: var(--strand-space-6);
+  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-4);
+  right: var(--strand-space-4);
+  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) ease,
+    color var(--strand-duration-fast) ease;
+}
+
+.strand-dialog__close:hover {
+  background: var(--strand-gray-200);
+  color: var(--strand-gray-900);
+}
+
+/* ── Body ── */
+.strand-dialog__body {
+  color: var(--strand-gray-600);
+  font-size: var(--strand-text-sm);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-dialog__close {
+    transition: none;
+  }
+}