@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Slider/Slider.css

@@ -0,0 +1,107 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Field ── */
+.strand-slider__field {
+  width: 100%;
+  height: 6px;
+  appearance: none;
+  background: var(--strand-gray-200);
+  border-radius: var(--strand-radius-full);
+  outline: none;
+  cursor: pointer;
+  transition: background var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+/* ── Thumb: Webkit ── */
+.strand-slider__field::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: var(--strand-blue-primary);
+  border: 2px solid var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-full);
+  cursor: pointer;
+  box-shadow: var(--strand-elevation-1);
+  transition:
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+.strand-slider__field:hover:not(:disabled)::-webkit-slider-thumb {
+  background: var(--strand-blue-vivid);
+  transform: scale(1.15);
+}
+
+.strand-slider__field:active:not(:disabled)::-webkit-slider-thumb {
+  background: var(--strand-blue-deep);
+  transform: scale(1.05);
+}
+
+/* ── Thumb: Firefox ── */
+.strand-slider__field::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: var(--strand-blue-primary);
+  border: 2px solid var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-full);
+  cursor: pointer;
+  box-shadow: var(--strand-elevation-1);
+  transition:
+    background var(--strand-duration-fast) var(--strand-ease-out-quart),
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo);
+}
+
+.strand-slider__field:hover:not(:disabled)::-moz-range-thumb {
+  background: var(--strand-blue-vivid);
+  transform: scale(1.15);
+}
+
+.strand-slider__field:active:not(:disabled)::-moz-range-thumb {
+  background: var(--strand-blue-deep);
+  transform: scale(1.05);
+}
+
+/* ── Track: Firefox ── */
+.strand-slider__field::-moz-range-track {
+  height: 6px;
+  background: var(--strand-gray-200);
+  border-radius: var(--strand-radius-full);
+}
+
+/* ── Focus ── */
+.strand-slider__field:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--strand-focus-ring);
+}
+
+.strand-slider__field:focus-visible::-moz-range-thumb {
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Disabled ── */
+.strand-slider--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-slider--disabled .strand-slider__field {
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-slider__field::-webkit-slider-thumb {
+    transition: none;
+  }
+
+  .strand-slider__field::-moz-range-thumb {
+    transition: none;
+  }
+}

package/src/components/Slider/Slider.test.tsx

@@ -0,0 +1,85 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Slider } from "./Slider.js";
+
+describe("Slider", () => {
+  it("renders a range input", () => {
+    const { getByRole } = render(<Slider aria-label="Volume" />);
+    expect(getByRole("slider")).toBeTruthy();
+  });
+
+  it("has correct default min/max/step", () => {
+    const { getByRole } = render(<Slider aria-label="Volume" />);
+    const slider = getByRole("slider");
+    expect(slider).toHaveAttribute("min", "0");
+    expect(slider).toHaveAttribute("max", "100");
+    expect(slider).toHaveAttribute("step", "1");
+  });
+
+  it("accepts custom min/max/step", () => {
+    const { getByRole } = render(
+      <Slider min={10} max={50} step={5} aria-label="Volume" />
+    );
+    const slider = getByRole("slider");
+    expect(slider).toHaveAttribute("min", "10");
+    expect(slider).toHaveAttribute("max", "50");
+    expect(slider).toHaveAttribute("step", "5");
+  });
+
+  it("calls onChange on input", () => {
+    const onChange = vi.fn();
+    const { getByRole } = render(
+      <Slider onChange={onChange} aria-label="Volume" />
+    );
+    fireEvent.change(getByRole("slider"), { target: { value: "50" } });
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("sets disabled attribute when disabled", () => {
+    const { getByRole } = render(<Slider disabled aria-label="Volume" />);
+    expect(getByRole("slider")).toBeDisabled();
+  });
+
+  it("applies disabled class to wrapper when disabled", () => {
+    const { container } = render(<Slider disabled aria-label="Volume" />);
+    expect(container.querySelector(".strand-slider--disabled")).toBeTruthy();
+  });
+
+  it("sets value on the input", () => {
+    const { getByRole } = render(<Slider value={42} aria-label="Volume" />);
+    expect((getByRole("slider") as HTMLInputElement).value).toBe("42");
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Slider className="custom" aria-label="Volume" />
+    );
+    expect(container.querySelector(".strand-slider")?.className).toContain("custom");
+  });
+
+  it("has aria-valuemin attribute", () => {
+    const { getByRole } = render(<Slider min={5} aria-label="Volume" />);
+    expect(getByRole("slider")).toHaveAttribute("aria-valuemin", "5");
+  });
+
+  it("has aria-valuemax attribute", () => {
+    const { getByRole } = render(<Slider max={200} aria-label="Volume" />);
+    expect(getByRole("slider")).toHaveAttribute("aria-valuemax", "200");
+  });
+
+  it("has aria-valuenow attribute", () => {
+    const { getByRole } = render(<Slider value={75} aria-label="Volume" />);
+    expect(getByRole("slider")).toHaveAttribute("aria-valuenow", "75");
+  });
+
+  it("forwards ref to input element", () => {
+    let inputEl: HTMLInputElement | null = null;
+    render(
+      <Slider
+        aria-label="Volume"
+        ref={(el: HTMLInputElement | null) => { inputEl = el; }}
+      />
+    );
+    expect(inputEl).toBeInstanceOf(HTMLInputElement);
+  });
+});

package/src/components/Slider/Slider.tsx

@@ -0,0 +1,66 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SliderProps
+  extends Omit<JSX.HTMLAttributes<HTMLInputElement>, "type" | "onChange" | "value"> {
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Current value */
+  value?: number;
+  /** Change handler */
+  onChange?: (e: JSX.TargetedEvent<HTMLInputElement>) => void;
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+export const Slider = forwardRef<HTMLInputElement, SliderProps>(
+  (
+    {
+      min = 0,
+      max = 100,
+      step = 1,
+      value,
+      onChange,
+      disabled,
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const wrapperClasses = [
+      "strand-slider",
+      disabled && "strand-slider--disabled",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={wrapperClasses}>
+        <input
+          ref={ref}
+          type="range"
+          className="strand-slider__field"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          onChange={onChange}
+          disabled={disabled}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          {...rest}
+        />
+      </div>
+    );
+  },
+);
+
+Slider.displayName = "Slider";

package/src/components/Slider/index.ts

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

package/src/components/Spinner/Spinner.css

@@ -0,0 +1,61 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ── Ring ── */
+.strand-spinner__ring {
+  display: block;
+  border: 2px solid var(--strand-gray-200);
+  border-top-color: var(--strand-blue-primary);
+  border-radius: var(--strand-radius-full);
+  animation: strand-spinner-rotate 0.8s linear infinite;
+}
+
+/* ── Sizes ── */
+.strand-spinner--sm .strand-spinner__ring {
+  width: 16px;
+  height: 16px;
+}
+
+.strand-spinner--md .strand-spinner__ring {
+  width: 20px;
+  height: 20px;
+}
+
+.strand-spinner--lg .strand-spinner__ring {
+  width: 32px;
+  height: 32px;
+}
+
+/* ── Animation ── */
+@keyframes strand-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Screen reader only text ── */
+.strand-spinner__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-spinner__ring {
+    animation: none;
+    border-style: dotted;
+  }
+}

package/src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Spinner } from "./Spinner.js";
+
+describe("Spinner", () => {
+  // ── ARIA ──
+
+  it("renders with status role", () => {
+    const { getByRole } = render(<Spinner />);
+    expect(getByRole("status")).toBeTruthy();
+  });
+
+  it("has loading text for screen readers", () => {
+    const { getByRole } = render(<Spinner />);
+    expect(getByRole("status")).toHaveTextContent("Loading");
+  });
+
+  // ── Sizes ──
+
+  it("applies md size class by default", () => {
+    const { getByRole } = render(<Spinner />);
+    expect(getByRole("status").className).toContain("strand-spinner--md");
+  });
+
+  it("applies sm size class", () => {
+    const { getByRole } = render(<Spinner size="sm" />);
+    expect(getByRole("status").className).toContain("strand-spinner--sm");
+  });
+
+  it("applies lg size class", () => {
+    const { getByRole } = render(<Spinner size="lg" />);
+    expect(getByRole("status").className).toContain("strand-spinner--lg");
+  });
+
+  // ── Animation ──
+
+  it("has spinning ring element", () => {
+    const { container } = render(<Spinner />);
+    expect(container.querySelector(".strand-spinner__ring")).toBeTruthy();
+  });
+
+  it("ring element is aria-hidden", () => {
+    const { container } = render(<Spinner />);
+    const ring = container.querySelector(".strand-spinner__ring");
+    expect(ring?.getAttribute("aria-hidden")).toBe("true");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(<Spinner className="custom" />);
+    const el = getByRole("status");
+    expect(el.className).toContain("strand-spinner");
+    expect(el.className).toContain("custom");
+  });
+});

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,38 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface SpinnerProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "size"> {
+  /** Size of the spinner */
+  size?: "sm" | "md" | "lg";
+}
+
+export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
+  (
+    {
+      size = "md",
+      className = "",
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-spinner",
+      `strand-spinner--${size}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span ref={ref} className={classes} role="status" {...rest}>
+        <span className="strand-spinner__ring" aria-hidden="true" />
+        <span className="strand-spinner__sr-only">Loading</span>
+      </span>
+    );
+  },
+);
+
+Spinner.displayName = "Spinner";

package/src/components/Spinner/index.ts

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

package/src/components/Stack/Stack.css

@@ -0,0 +1,71 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-stack {
+  display: flex;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.strand-stack > * {
+  min-width: 0;
+}
+
+/* ── Direction ── */
+.strand-stack--vertical {
+  flex-direction: column;
+}
+
+.strand-stack--horizontal {
+  flex-direction: row;
+}
+
+/* ── Alignment ── */
+.strand-stack--align-start {
+  align-items: flex-start;
+}
+
+.strand-stack--align-center {
+  align-items: center;
+}
+
+.strand-stack--align-end {
+  align-items: flex-end;
+}
+
+/* Default stretch handled by flexbox default */
+
+/* ── Justification ── */
+.strand-stack--justify-start {
+  justify-content: flex-start;
+}
+
+.strand-stack--justify-center {
+  justify-content: center;
+}
+
+.strand-stack--justify-end {
+  justify-content: flex-end;
+}
+
+.strand-stack--justify-between {
+  justify-content: space-between;
+}
+
+.strand-stack--justify-around {
+  justify-content: space-around;
+}
+
+/* ── Wrap ── */
+.strand-stack--wrap {
+  flex-wrap: wrap;
+}
+
+/* ── Gap utilities ── */
+.strand-stack--gap-1 { gap: var(--strand-space-1); }
+.strand-stack--gap-2 { gap: var(--strand-space-2); }
+.strand-stack--gap-3 { gap: var(--strand-space-3); }
+.strand-stack--gap-4 { gap: var(--strand-space-4); }
+.strand-stack--gap-5 { gap: var(--strand-space-5); }
+.strand-stack--gap-6 { gap: var(--strand-space-6); }
+.strand-stack--gap-8 { gap: var(--strand-space-8); }

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,130 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Stack } from "./Stack.js";
+
+describe("Stack", () => {
+  // ── Rendering ──
+
+  it("renders a div element", () => {
+    const { container } = render(<Stack>content</Stack>);
+    expect(container.firstElementChild?.tagName).toBe("DIV");
+  });
+
+  it("renders children", () => {
+    const { getByText } = render(
+      <Stack>
+        <span>Child A</span>
+        <span>Child B</span>
+      </Stack>,
+    );
+    expect(getByText("Child A")).toBeTruthy();
+    expect(getByText("Child B")).toBeTruthy();
+  });
+
+  // ── Direction ──
+
+  it("applies vertical direction class by default", () => {
+    const { container } = render(<Stack>content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--vertical",
+    );
+  });
+
+  it("applies horizontal direction class", () => {
+    const { container } = render(
+      <Stack direction="horizontal">content</Stack>,
+    );
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--horizontal",
+    );
+  });
+
+  // ── Gap ──
+
+  it("applies default gap as inline style", () => {
+    const { container } = render(<Stack>content</Stack>);
+    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(<Stack gap={8}>content</Stack>);
+    const el = container.firstElementChild as HTMLElement;
+    expect(el.style.gap).toBe("var(--strand-space-8)");
+  });
+
+  // ── Alignment ──
+
+  it("applies align-center class", () => {
+    const { container } = render(<Stack align="center">content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--align-center",
+    );
+  });
+
+  it("applies align-start class", () => {
+    const { container } = render(<Stack align="start">content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--align-start",
+    );
+  });
+
+  it("does not apply alignment class for default stretch", () => {
+    const { container } = render(<Stack>content</Stack>);
+    expect(container.firstElementChild?.className).not.toContain(
+      "strand-stack--align-",
+    );
+  });
+
+  // ── Justification ──
+
+  it("applies justify-between class", () => {
+    const { container } = render(<Stack justify="between">content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--justify-between",
+    );
+  });
+
+  it("applies justify-center class", () => {
+    const { container } = render(<Stack justify="center">content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--justify-center",
+    );
+  });
+
+  // ── Wrap ──
+
+  it("applies wrap class when wrap is true", () => {
+    const { container } = render(<Stack wrap>content</Stack>);
+    expect(container.firstElementChild?.className).toContain(
+      "strand-stack--wrap",
+    );
+  });
+
+  it("does not apply wrap class by default", () => {
+    const { container } = render(<Stack>content</Stack>);
+    expect(container.firstElementChild?.className).not.toContain(
+      "strand-stack--wrap",
+    );
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Stack className="custom">content</Stack>);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-stack");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Props forwarding ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Stack data-testid="my-stack" id="s1">
+        content
+      </Stack>,
+    );
+    expect(container.firstElementChild).toHaveAttribute("id", "s1");
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,77 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface StackProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** Flex direction */
+  direction?: "vertical" | "horizontal";
+  /** Gap between items, maps to --strand-space-{n} */
+  gap?: number;
+  /** Cross-axis alignment */
+  align?: "start" | "center" | "end" | "stretch";
+  /** Main-axis alignment */
+  justify?: "start" | "center" | "end" | "between" | "around";
+  /** Enable flex-wrap */
+  wrap?: boolean;
+}
+
+const ALIGN_MAP: Record<string, string> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+};
+
+const JUSTIFY_MAP: Record<string, string> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+};
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      direction = "vertical",
+      gap = 4,
+      align = "stretch",
+      wrap = false,
+      justify,
+      className = "",
+      style,
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-stack",
+      `strand-stack--${direction}`,
+      align !== "stretch" && `strand-stack--align-${align}`,
+      justify && `strand-stack--justify-${justify}`,
+      wrap && "strand-stack--wrap",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const inlineStyle: Record<string, string> = {
+      gap: `var(--strand-space-${gap})`,
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={classes}
+        style={{ ...inlineStyle, ...(style as Record<string, string>) }}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+Stack.displayName = "Stack";