@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.css

@@ -0,0 +1,72 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Wrapper ── */
+.strand-badge {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.strand-badge--inline {
+  display: inline-flex;
+}
+
+/* ── Indicator (shared) ── */
+.strand-badge__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-semibold);
+  color: #fff;
+}
+
+/* Position at top-right when wrapping children */
+.strand-badge:not(.strand-badge--inline) > .strand-badge__indicator {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(50%, -50%);
+  z-index: 1;
+}
+
+/* ── Dot variant ── */
+.strand-badge--dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--strand-radius-full);
+  font-size: 0;
+  padding: 0;
+}
+
+/* ── Count variant ── */
+.strand-badge--count {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--strand-space-1);
+  border-radius: var(--strand-radius-full);
+  font-size: var(--strand-text-xs);
+  line-height: 20px;
+}
+
+/* ── Status colors ── */
+.strand-badge--default {
+  background: var(--strand-gray-500);
+}
+
+.strand-badge--teal {
+  background: var(--strand-teal-vital);
+}
+
+.strand-badge--blue {
+  background: var(--strand-blue-primary);
+}
+
+.strand-badge--amber {
+  background: var(--strand-amber-caution);
+  color: var(--strand-blue-midnight);
+}
+
+.strand-badge--red {
+  background: var(--strand-red-alert);
+}

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Badge } from "./Badge.js";
+
+describe("Badge", () => {
+  // ── Rendering ──
+
+  it("renders a span element", () => {
+    const { container } = render(<Badge count={5} />);
+    expect(container.firstElementChild?.tagName).toBe("SPAN");
+  });
+
+  // ── Count variant ──
+
+  it("displays count number", () => {
+    const { getByRole } = render(<Badge count={7} />);
+    expect(getByRole("status")).toHaveTextContent("7");
+  });
+
+  it("truncates count at maxCount", () => {
+    const { getByRole } = render(<Badge count={150} maxCount={99} />);
+    expect(getByRole("status")).toHaveTextContent("99+");
+  });
+
+  it("does not truncate count at maxCount boundary", () => {
+    const { getByRole } = render(<Badge count={99} maxCount={99} />);
+    expect(getByRole("status")).toHaveTextContent("99");
+  });
+
+  it("supports custom maxCount", () => {
+    const { getByRole } = render(<Badge count={15} maxCount={9} />);
+    expect(getByRole("status")).toHaveTextContent("9+");
+  });
+
+  // ── Dot variant ──
+
+  it("renders dot variant as small circle", () => {
+    const { container } = render(<Badge variant="dot" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--dot");
+  });
+
+  // ── Status colors ──
+
+  it("applies default status class by default", () => {
+    const { container } = render(<Badge count={1} />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--default");
+  });
+
+  it("applies teal status class", () => {
+    const { container } = render(<Badge count={1} status="teal" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--teal");
+  });
+
+  it("applies red status class", () => {
+    const { container } = render(<Badge count={1} status="red" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--red");
+  });
+
+  it("applies amber status class", () => {
+    const { container } = render(<Badge count={1} status="amber" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--amber");
+  });
+
+  it("applies blue status class", () => {
+    const { container } = render(<Badge count={1} status="blue" />);
+    const indicator = container.querySelector(".strand-badge__indicator");
+    expect(indicator?.className).toContain("strand-badge--blue");
+  });
+
+  // ── Children wrapping ──
+
+  it("wraps children and positions badge", () => {
+    const { getByText, container } = render(
+      <Badge count={3}>
+        <span>Inbox</span>
+      </Badge>,
+    );
+    expect(getByText("Inbox")).toBeTruthy();
+    const wrapper = container.firstElementChild;
+    expect(wrapper?.className).toContain("strand-badge");
+    expect(wrapper?.className).not.toContain("strand-badge--inline");
+  });
+
+  it("renders inline without children", () => {
+    const { container } = render(<Badge count={5} />);
+    const wrapper = container.firstElementChild;
+    expect(wrapper?.className).toContain("strand-badge--inline");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(<Badge count={1} className="custom" />);
+    const el = container.firstElementChild;
+    expect(el?.className).toContain("strand-badge");
+    expect(el?.className).toContain("custom");
+  });
+
+  // ── Accessibility ──
+
+  it("has aria-label for count variant", () => {
+    const { getByRole } = render(<Badge count={5} />);
+    expect(getByRole("status")).toHaveAttribute(
+      "aria-label",
+      "5 notifications",
+    );
+  });
+
+  it("has aria-label for dot variant", () => {
+    const { getByRole } = render(<Badge variant="dot" />);
+    expect(getByRole("status")).toHaveAttribute(
+      "aria-label",
+      "Status indicator",
+    );
+  });
+});

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,92 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface BadgeProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Badge display mode */
+  variant?: "dot" | "count";
+  /** Color status */
+  status?: "default" | "teal" | "blue" | "amber" | "red";
+  /** Number to display (count variant only) */
+  count?: number;
+  /** Maximum count before showing "N+" */
+  maxCount?: number;
+  /** Wrapped content; when present badge is positioned at top-right */
+  children?: ComponentChildren;
+}
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (
+    {
+      variant = "count",
+      status = "default",
+      count,
+      maxCount = 99,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasChildren = children != null && children !== false;
+
+    const displayValue =
+      variant === "count"
+        ? count != null && count > maxCount
+          ? `${maxCount}+`
+          : count
+        : null;
+
+    const ariaLabel =
+      variant === "dot"
+        ? "Status indicator"
+        : count != null
+          ? `${count} notifications`
+          : undefined;
+
+    const badgeClasses = [
+      "strand-badge__indicator",
+      `strand-badge--${variant}`,
+      `strand-badge--${status}`,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const badge = (
+      <span className={badgeClasses} aria-label={ariaLabel} role="status">
+        {displayValue}
+      </span>
+    );
+
+    if (!hasChildren) {
+      const inlineClasses = [
+        "strand-badge",
+        "strand-badge--inline",
+        className,
+      ]
+        .filter(Boolean)
+        .join(" ");
+
+      return (
+        <span ref={ref} className={inlineClasses} {...rest}>
+          {badge}
+        </span>
+      );
+    }
+
+    const wrapperClasses = ["strand-badge", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span ref={ref} className={wrapperClasses} {...rest}>
+        {children}
+        {badge}
+      </span>
+    );
+  },
+);
+
+Badge.displayName = "Badge";

package/src/components/Badge/index.ts

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

package/src/components/Breadcrumb/Breadcrumb.css

@@ -0,0 +1,45 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+.strand-breadcrumb__list {
+  display: flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+}
+
+.strand-breadcrumb__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+}
+
+.strand-breadcrumb__separator {
+  color: var(--strand-gray-400);
+  user-select: none;
+}
+
+.strand-breadcrumb__link {
+  color: var(--strand-gray-500);
+  text-decoration: none;
+  transition: color var(--strand-duration-fast) ease;
+}
+
+.strand-breadcrumb__link:hover {
+  color: var(--strand-gray-600);
+}
+
+.strand-breadcrumb__current {
+  color: var(--strand-gray-600);
+  font-weight: var(--strand-weight-medium);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-breadcrumb__link {
+    transition: none;
+  }
+}

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,107 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/preact";
+import { Breadcrumb } from "./Breadcrumb.js";
+
+const sampleItems = [
+  { label: "Home", href: "/" },
+  { label: "Products", href: "/products" },
+  { label: "Widget" },
+];
+
+describe("Breadcrumb", () => {
+  // ── Structure ──
+
+  it("renders nav with aria-label Breadcrumb", () => {
+    const { getByRole } = render(<Breadcrumb items={sampleItems} />);
+    const nav = getByRole("navigation");
+    expect(nav).toHaveAttribute("aria-label", "Breadcrumb");
+  });
+
+  it("renders an ol element", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    expect(container.querySelector("ol")).toBeTruthy();
+  });
+
+  it("renders all items", () => {
+    const { getAllByRole } = render(<Breadcrumb items={sampleItems} />);
+    expect(getAllByRole("listitem")).toHaveLength(3);
+  });
+
+  // ── Current page ──
+
+  it("last item has aria-current page", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Widget")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("last item is not a link", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Widget").tagName).toBe("SPAN");
+  });
+
+  // ── Links ──
+
+  it("non-last items are rendered as links", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Home").tagName).toBe("A");
+    expect(getByText("Products").tagName).toBe("A");
+  });
+
+  it("link items have correct href", () => {
+    const { getByText } = render(<Breadcrumb items={sampleItems} />);
+    expect(getByText("Home")).toHaveAttribute("href", "/");
+    expect(getByText("Products")).toHaveAttribute("href", "/products");
+  });
+
+  // ── Separator ──
+
+  it("renders default separator between items", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    expect(separators).toHaveLength(2);
+    expect(separators[0].textContent).toBe("/");
+  });
+
+  it("renders custom separator", () => {
+    const { container } = render(
+      <Breadcrumb items={sampleItems} separator=">" />,
+    );
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    expect(separators[0].textContent).toBe(">");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { getByRole } = render(
+      <Breadcrumb items={sampleItems} className="custom" />,
+    );
+    const nav = getByRole("navigation");
+    expect(nav.className).toContain("strand-breadcrumb");
+    expect(nav.className).toContain("custom");
+  });
+
+  // ── Edge cases ──
+
+  it("single item renders correctly as current page", () => {
+    const { getByText, getAllByRole } = render(
+      <Breadcrumb items={[{ label: "Home" }]} />,
+    );
+    expect(getAllByRole("listitem")).toHaveLength(1);
+    expect(getByText("Home")).toHaveAttribute("aria-current", "page");
+  });
+
+  it("separators have aria-hidden true", () => {
+    const { container } = render(<Breadcrumb items={sampleItems} />);
+    const separators = container.querySelectorAll(
+      ".strand-breadcrumb__separator",
+    );
+    for (const sep of separators) {
+      expect(sep).toHaveAttribute("aria-hidden", "true");
+    }
+  });
+});

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,59 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+export interface BreadcrumbProps
+  extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** Breadcrumb path items; last item is treated as current page */
+  items: BreadcrumbItem[];
+  /** Separator character between items */
+  separator?: string;
+}
+
+export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ items, separator = "/", className = "", ...rest }, ref) => {
+    const classes = ["strand-breadcrumb", className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <nav ref={ref} aria-label="Breadcrumb" className={classes} {...rest}>
+        <ol className="strand-breadcrumb__list">
+          {items.map((item, index) => {
+            const isLast = index === items.length - 1;
+
+            return (
+              <li key={`${item.label}-${index}`} className="strand-breadcrumb__item">
+                {index > 0 && (
+                  <span className="strand-breadcrumb__separator" aria-hidden="true">
+                    {separator}
+                  </span>
+                )}
+                {isLast ? (
+                  <span
+                    className="strand-breadcrumb__current"
+                    aria-current="page"
+                  >
+                    {item.label}
+                  </span>
+                ) : (
+                  <a href={item.href} className="strand-breadcrumb__link">
+                    {item.label}
+                  </a>
+                )}
+              </li>
+            );
+          })}
+        </ol>
+      </nav>
+    );
+  },
+);
+
+Breadcrumb.displayName = "Breadcrumb";

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb } from "./Breadcrumb.js";
+export type { BreadcrumbProps, BreadcrumbItem } from "./Breadcrumb.js";

package/src/components/Button/Button.css

@@ -0,0 +1,188 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--strand-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--strand-radius-md);
+  font-family: var(--strand-font-sans);
+  font-weight: var(--strand-weight-medium);
+  line-height: var(--strand-leading-snug);
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background var(--strand-duration-fast) ease,
+    border-color var(--strand-duration-fast) ease,
+    color var(--strand-duration-fast) ease,
+    transform var(--strand-duration-fast) var(--strand-ease-out-expo),
+    box-shadow var(--strand-duration-fast) ease;
+}
+
+.strand-btn:active:not(:disabled) {
+  transform: translateY(0);
+  transition-duration: 75ms;
+}
+
+.strand-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Sizes ── */
+.strand-btn--sm {
+  padding: var(--strand-space-1) var(--strand-space-3);
+  font-size: var(--strand-text-sm);
+  min-height: 32px;
+}
+
+.strand-btn--md {
+  padding: calc(var(--strand-space-2) + var(--strand-space-1) / 2) var(--strand-space-5);
+  font-size: var(--strand-text-sm);
+  min-height: 40px;
+}
+
+.strand-btn--lg {
+  padding: var(--strand-space-3) var(--strand-space-6);
+  font-size: var(--strand-text-base);
+  min-height: 48px;
+}
+
+/* ── Icon-only ── */
+.strand-btn--icon-only.strand-btn--sm {
+  padding: var(--strand-space-1);
+  min-width: 32px;
+}
+
+.strand-btn--icon-only.strand-btn--md {
+  padding: var(--strand-space-2);
+  min-width: 40px;
+}
+
+.strand-btn--icon-only.strand-btn--lg {
+  padding: var(--strand-space-3);
+  min-width: 48px;
+}
+
+/* ── Full width ── */
+.strand-btn--full-width {
+  width: 100%;
+}
+
+/* ── Primary variant ── */
+.strand-btn--primary {
+  background: var(--strand-blue-primary);
+  color: var(--strand-on-blue-primary);
+}
+
+.strand-btn--primary:hover:not(:disabled) {
+  background: var(--strand-blue-vivid);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
+}
+
+.strand-btn--primary:active:not(:disabled) {
+  background: var(--strand-blue-deep);
+}
+
+/* ── Secondary variant ── */
+.strand-btn--secondary {
+  background: var(--strand-surface-elevated);
+  color: var(--strand-blue-midnight);
+  border-color: var(--strand-gray-200);
+}
+
+.strand-btn--secondary:hover:not(:disabled) {
+  background: var(--strand-blue-glow);
+  border-color: var(--strand-blue-indicator);
+  transform: translateY(-1px);
+  box-shadow: var(--strand-elevation-1);
+}
+
+.strand-btn--secondary:active:not(:disabled) {
+  background: var(--strand-blue-wash);
+}
+
+/* ── Ghost variant ── */
+.strand-btn--ghost {
+  background: transparent;
+  color: var(--strand-blue-primary);
+}
+
+.strand-btn--ghost:hover:not(:disabled) {
+  background: var(--strand-blue-glow);
+}
+
+.strand-btn--ghost:active:not(:disabled) {
+  background: var(--strand-blue-wash);
+}
+
+/* ── Danger variant ── */
+.strand-btn--danger {
+  background: var(--strand-red-alert);
+  color: var(--strand-on-red-alert);
+}
+
+.strand-btn--danger:hover:not(:disabled) {
+  background: #DC2626;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
+}
+
+.strand-btn--danger:active:not(:disabled) {
+  background: #B91C1C;
+}
+
+/* ── Loading state ── */
+.strand-btn--loading {
+  pointer-events: none;
+}
+
+.strand-btn__spinner {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: var(--strand-radius-full);
+  animation: strand-btn-spin 0.8s linear infinite;
+  opacity: 0.8;
+}
+
+.strand-btn--lg .strand-btn__spinner {
+  width: 20px;
+  height: 20px;
+}
+
+@keyframes strand-btn-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── Content wrapper ── */
+.strand-btn__content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-2);
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-btn {
+    transition: none;
+  }
+
+  .strand-btn:hover:not(:disabled) {
+    transform: none;
+  }
+
+  .strand-btn__spinner {
+    animation: none;
+    border-style: dotted;
+  }
+}