@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Divider } from "./Divider.js";
+
+describe("Divider", () => {
+  // ── Rendering ──
+
+  it("renders with separator role", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator")).toBeTruthy();
+  });
+
+  // ── Direction ──
+
+  it("renders horizontal direction by default", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator").className).toContain(
+      "strand-divider--horizontal",
+    );
+  });
+
+  it("renders vertical direction", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator").className).toContain(
+      "strand-divider--vertical",
+    );
+  });
+
+  // ── Aria orientation ──
+
+  it("sets aria-orientation to horizontal by default", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator")).toHaveAttribute(
+      "aria-orientation",
+      "horizontal",
+    );
+  });
+
+  it("sets aria-orientation to vertical", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator")).toHaveAttribute(
+      "aria-orientation",
+      "vertical",
+    );
+  });
+
+  // ── Label ──
+
+  it("renders label text", () => {
+    const { getByText } = render(<Divider label="OR" />);
+    expect(getByText("OR")).toBeTruthy();
+  });
+
+  it("label has monospace styling class", () => {
+    const { getByText } = render(<Divider label="SECTION" />);
+    expect(getByText("SECTION").className).toContain(
+      "strand-divider__label",
+    );
+  });
+
+  it("labeled divider still has separator role", () => {
+    const { getByRole } = render(<Divider label="OR" />);
+    expect(getByRole("separator")).toBeTruthy();
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(<Divider className="custom" />);
+    const el = getByRole("separator");
+    expect(el.className).toContain("strand-divider");
+    expect(el.className).toContain("custom");
+  });
+
+  // ── Element types ──
+
+  it("renders hr element for horizontal without label", () => {
+    const { getByRole } = render(<Divider />);
+    expect(getByRole("separator").tagName).toBe("HR");
+  });
+
+  it("renders div element for vertical", () => {
+    const { getByRole } = render(<Divider direction="vertical" />);
+    expect(getByRole("separator").tagName).toBe("DIV");
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,81 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface DividerProps {
+  /** Separator direction */
+  direction?: "horizontal" | "vertical";
+  /** Optional label text displayed in the middle of the line */
+  label?: string;
+  /** Additional CSS class */
+  className?: string;
+}
+
+export const Divider = forwardRef<HTMLElement, DividerProps>(
+  ({ direction = "horizontal", label, className = "" }, ref) => {
+    const isVertical = direction === "vertical";
+
+    if (isVertical) {
+      const classes = [
+        "strand-divider",
+        "strand-divider--vertical",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <div
+          ref={ref as preact.Ref<HTMLDivElement>}
+          role="separator"
+          aria-orientation="vertical"
+          className={classes}
+        />
+      );
+    }
+
+    if (label) {
+      const classes = [
+        "strand-divider",
+        "strand-divider--horizontal",
+        "strand-divider--labeled",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <div
+          ref={ref as preact.Ref<HTMLDivElement>}
+          role="separator"
+          aria-orientation="horizontal"
+          className={classes}
+        >
+          <span className="strand-divider__line" />
+          <span className="strand-divider__label">{label}</span>
+          <span className="strand-divider__line" />
+        </div>
+      );
+    }
+
+    const classes = [
+      "strand-divider",
+      "strand-divider--horizontal",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <hr
+        ref={ref as preact.Ref<HTMLHRElement>}
+        role="separator"
+        aria-orientation="horizontal"
+        className={classes}
+      />
+    );
+  },
+);
+
+Divider.displayName = "Divider";

package/src/components/Divider/index.ts

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

package/src/components/FormField/FormField.css

@@ -0,0 +1,47 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--strand-space-2);
+}
+
+/* ── Label ── */
+.strand-form-field__label {
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  font-weight: var(--strand-weight-medium);
+  color: var(--strand-gray-700);
+  line-height: var(--strand-leading-snug);
+}
+
+/* ── Required indicator ── */
+.strand-form-field__required {
+  color: var(--strand-red-alert);
+  margin-left: var(--strand-space-1);
+}
+
+/* ── Control wrapper ── */
+.strand-form-field__control {
+  display: flex;
+  flex-direction: column;
+}
+
+/* ── Hint ── */
+.strand-form-field__hint {
+  margin: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  color: var(--strand-gray-500);
+  line-height: var(--strand-leading-normal);
+}
+
+/* ── Error message ── */
+.strand-form-field__error {
+  margin: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  color: var(--strand-red-alert);
+  line-height: var(--strand-leading-normal);
+}

package/src/components/FormField/FormField.test.tsx

@@ -0,0 +1,99 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { FormField } from "./FormField.js";
+
+describe("FormField", () => {
+  it("renders label text", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Name")).toBeTruthy();
+  });
+
+  it("renders children (input element)", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(container.querySelector("input#name")).toBeTruthy();
+  });
+
+  it("shows hint text when provided", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name" hint="Enter your full name">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Enter your full name")).toBeTruthy();
+  });
+
+  it("shows error text when provided", () => {
+    const { getByText } = render(
+      <FormField label="Name" htmlFor="name" error="Name is required">
+        <input id="name" />
+      </FormField>
+    );
+    expect(getByText("Name is required")).toBeTruthy();
+  });
+
+  it("shows required indicator when required", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" required>
+        <input id="name" />
+      </FormField>
+    );
+    const indicator = container.querySelector(".strand-form-field__required");
+    expect(indicator).toBeTruthy();
+    expect(indicator!.textContent).toBe("*");
+  });
+
+  it("error replaces hint when both are present", () => {
+    const { queryByText } = render(
+      <FormField
+        label="Name"
+        htmlFor="name"
+        hint="Enter your full name"
+        error="Name is required"
+      >
+        <input id="name" />
+      </FormField>
+    );
+    expect(queryByText("Name is required")).toBeTruthy();
+    expect(queryByText("Enter your full name")).toBeNull();
+  });
+
+  it("label has htmlFor attribute", () => {
+    const { container } = render(
+      <FormField label="Email" htmlFor="email">
+        <input id="email" />
+      </FormField>
+    );
+    const label = container.querySelector("label");
+    expect(label).toHaveAttribute("for", "email");
+  });
+
+  it("applies error class when error is present", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" error="Required">
+        <input id="name" />
+      </FormField>
+    );
+    expect(
+      container.querySelector(".strand-form-field--error")
+    ).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <FormField label="Name" htmlFor="name" className="custom">
+        <input id="name" />
+      </FormField>
+    );
+    const wrapper = container.querySelector(".strand-form-field");
+    expect(wrapper?.className).toContain("strand-form-field");
+    expect(wrapper?.className).toContain("custom");
+  });
+});

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,79 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface FormFieldProps {
+  /** Label text */
+  label: string;
+  /** Associates the label with a form control */
+  htmlFor: string;
+  /** Hint text displayed below the input */
+  hint?: string;
+  /** Error text displayed below the input (replaces hint) */
+  error?: string;
+  /** Show required indicator */
+  required?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** The wrapped form control */
+  children: ComponentChildren;
+}
+
+export const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
+  (
+    {
+      label,
+      htmlFor,
+      hint,
+      error,
+      required = false,
+      className = "",
+      children,
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-form-field",
+      error && "strand-form-field--error",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const messageId = error
+      ? `${htmlFor}-error`
+      : hint
+        ? `${htmlFor}-hint`
+        : undefined;
+
+    return (
+      <div ref={ref} className={classes}>
+        <label className="strand-form-field__label" htmlFor={htmlFor}>
+          {label}
+          {required && (
+            <span className="strand-form-field__required" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+        <div className="strand-form-field__control">{children}</div>
+        {error ? (
+          <p
+            className="strand-form-field__error"
+            id={`${htmlFor}-error`}
+            role="alert"
+          >
+            {error}
+          </p>
+        ) : hint ? (
+          <p className="strand-form-field__hint" id={`${htmlFor}-hint`}>
+            {hint}
+          </p>
+        ) : null}
+      </div>
+    );
+  },
+);
+
+FormField.displayName = "FormField";

package/src/components/FormField/index.ts

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

package/src/components/Grid/Grid.css

@@ -0,0 +1,27 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-grid {
+  display: grid;
+  overflow: hidden;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.strand-grid > * {
+  min-width: 0;
+}
+
+/* ── Column utilities ── */
+.strand-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+.strand-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+.strand-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+/* ── Gap utilities ── */
+.strand-grid--gap-1 { gap: var(--strand-space-1); }
+.strand-grid--gap-2 { gap: var(--strand-space-2); }
+.strand-grid--gap-3 { gap: var(--strand-space-3); }
+.strand-grid--gap-4 { gap: var(--strand-space-4); }
+.strand-grid--gap-5 { gap: var(--strand-space-5); }
+.strand-grid--gap-6 { gap: var(--strand-space-6); }
+.strand-grid--gap-8 { gap: var(--strand-space-8); }

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,86 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Grid } from "./Grid.js";
+
+describe("Grid", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Grid>content</Grid>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("renders children in grid", () => {
+    const { getByText } = render(
+      <Grid>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Grid>,
+    );
+    expect(getByText("Item 1")).toBeTruthy();
+    expect(getByText("Item 2")).toBeTruthy();
+    expect(getByText("Item 3")).toBeTruthy();
+  });
+
+  // ── Display ──
+
+  it("has display grid class", () => {
+    const { container } = render(<Grid>content</Grid>);
+    expect(container.firstElementChild?.className).toContain("strand-grid");
+  });
+
+  // ── Columns ──
+
+  it("defaults to 1 column in inline style", () => {
+    const { container } = render(<Grid>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(1, 1fr)");
+  });
+
+  it("applies custom column count in inline style", () => {
+    const { container } = render(<Grid columns={3}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(3, 1fr)");
+  });
+
+  it("applies 4-column layout", () => {
+    const { container } = render(<Grid columns={4}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gridTemplateColumns).toBe("repeat(4, 1fr)");
+  });
+
+  // ── Gap ──
+
+  it("applies default gap as inline style", () => {
+    const { container } = render(<Grid>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gap).toBe("var(--strand-space-4)");
+  });
+
+  it("applies custom gap as inline style", () => {
+    const { container } = render(<Grid gap={8}>content</Grid>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gap).toBe("var(--strand-space-8)");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Grid className="custom">content</Grid>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-grid");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Grid data-testid="my-grid" id="g1">
+        content
+      </Grid>,
+    );
+    expect(container.firstElementChild).toHaveAttribute("id", "g1");
+  });
+});

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,45 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Number of equal-width columns */
+  columns?: number;
+  /** Gap between items, maps to --strand-space-{n} */
+  gap?: number;
+}
+
+export const Grid = forwardRef<HTMLDivElement, GridProps>(
+  (
+    {
+      columns = 1,
+      gap = 4,
+      className = "",
+      style,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = ["strand-grid", className].filter(Boolean).join(" ");
+
+    const inlineStyle: Record<string, string> = {
+      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+      gap: `var(--strand-space-${gap})`,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        style={{ ...inlineStyle, ...(style as Record<string, string>) }}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Grid.displayName = "Grid";

package/src/components/Grid/index.ts

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

package/src/components/Input/Input.css

@@ -0,0 +1,87 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--strand-surface-elevated);
+  border: 1px solid var(--strand-gray-200);
+  border-radius: var(--strand-radius-md);
+  transition:
+    border-color var(--strand-duration-fast) var(--strand-ease-out-quart),
+    box-shadow var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-input:focus-within {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Field ── */
+.strand-input__field {
+  flex: 1;
+  width: 100%;
+  padding: var(--strand-space-3) var(--strand-space-4);
+  background: transparent;
+  border: none;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-base);
+  color: var(--strand-gray-900);
+  outline: none;
+}
+
+.strand-input__field::placeholder {
+  color: var(--strand-gray-400);
+}
+
+/* ── Addons ── */
+.strand-input__leading,
+.strand-input__trailing {
+  display: flex;
+  align-items: center;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-input__leading {
+  padding-left: var(--strand-space-3);
+}
+
+.strand-input__trailing {
+  padding-right: var(--strand-space-3);
+}
+
+.strand-input--has-leading .strand-input__field {
+  padding-left: var(--strand-space-2);
+}
+
+.strand-input--has-trailing .strand-input__field {
+  padding-right: var(--strand-space-2);
+}
+
+/* ── Error ── */
+.strand-input--error {
+  border-color: var(--strand-red-alert);
+}
+
+.strand-input--error:focus-within {
+  border-color: var(--strand-red-alert);
+  box-shadow: var(--strand-focus-ring-error);
+}
+
+/* ── Disabled ── */
+.strand-input--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-input--disabled .strand-input__field {
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-input {
+    transition: none;
+  }
+}