@dillingerstaffing/strand-ui 0.1.0 → 0.2.0

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,164 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Tabs } from "./Tabs.js";
+
+const sampleTabs = [
+  { id: "one", label: "Tab One", content: <div>Content One</div> },
+  { id: "two", label: "Tab Two", content: <div>Content Two</div> },
+  { id: "three", label: "Tab Three", content: <div>Content Three</div> },
+];
+
+describe("Tabs", () => {
+  // ── Structure ──
+
+  it("renders tablist role", () => {
+    const { getByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    expect(getByRole("tablist")).toBeTruthy();
+  });
+
+  it("renders tab buttons for each tab", () => {
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    expect(getAllByRole("tab")).toHaveLength(3);
+  });
+
+  // ── Active state ──
+
+  it("active tab has aria-selected true", () => {
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    const tabs = getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("inactive tabs have aria-selected false", () => {
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    const tabs = getAllByRole("tab");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[2]).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("active tab has tabindex 0, inactive tabs have tabindex -1", () => {
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="two" onChange={() => {}} />,
+    );
+    const tabs = getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("tabindex", "-1");
+    expect(tabs[1]).toHaveAttribute("tabindex", "0");
+    expect(tabs[2]).toHaveAttribute("tabindex", "-1");
+  });
+
+  // ── Interaction ──
+
+  it("clicking tab calls onChange with the tab id", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={onChange} />,
+    );
+    fireEvent.click(getAllByRole("tab")[1]);
+    expect(onChange).toHaveBeenCalledWith("two");
+  });
+
+  // ── Panels ──
+
+  it("active panel is visible", () => {
+    const { getByText } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    expect(getByText("Content One").closest("[role='tabpanel']")).not.toHaveAttribute("hidden");
+  });
+
+  it("inactive panels are hidden", () => {
+    const { getByText } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    expect(getByText("Content Two").closest("[role='tabpanel']")).toHaveAttribute("hidden");
+    expect(getByText("Content Three").closest("[role='tabpanel']")).toHaveAttribute("hidden");
+  });
+
+  it("tabpanel has aria-labelledby pointing to its tab", () => {
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={() => {}} />,
+    );
+    const panels = getAllByRole("tabpanel", { hidden: true });
+    expect(panels[0]).toHaveAttribute("aria-labelledby", "tab-one");
+  });
+
+  // ── Keyboard navigation ──
+
+  it("ArrowRight moves to next tab", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[0], { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalledWith("two");
+  });
+
+  it("ArrowLeft moves to previous tab", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="two" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[1], { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenCalledWith("one");
+  });
+
+  it("ArrowRight wraps to first tab from last", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="three" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[2], { key: "ArrowRight" });
+    expect(onChange).toHaveBeenCalledWith("one");
+  });
+
+  it("ArrowLeft wraps to last tab from first", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[0], { key: "ArrowLeft" });
+    expect(onChange).toHaveBeenCalledWith("three");
+  });
+
+  it("Home moves focus to first tab", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="three" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[2], { key: "Home" });
+    expect(onChange).toHaveBeenCalledWith("one");
+  });
+
+  it("End moves focus to last tab", () => {
+    const onChange = vi.fn();
+    const { getAllByRole } = render(
+      <Tabs tabs={sampleTabs} activeTab="one" onChange={onChange} />,
+    );
+    fireEvent.keyDown(getAllByRole("tab")[0], { key: "End" });
+    expect(onChange).toHaveBeenCalledWith("three");
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Tabs
+        tabs={sampleTabs}
+        activeTab="one"
+        onChange={() => {}}
+        className="custom"
+      />,
+    );
+    const root = container.firstElementChild as HTMLElement;
+    expect(root.className).toContain("strand-tabs");
+    expect(root.className).toContain("custom");
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,126 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useRef, useCallback } from "preact/hooks";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ComponentChildren;
+}
+
+export interface TabsProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Tab definitions */
+  tabs: TabItem[];
+  /** Currently active tab id (controlled) */
+  activeTab: string;
+  /** Called when active tab changes */
+  onChange: (id: string) => void;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ tabs, activeTab, onChange, className = "", ...rest }, ref) => {
+    const tablistRef = useRef<HTMLDivElement>(null);
+
+    const classes = ["strand-tabs", className].filter(Boolean).join(" ");
+
+    const focusAndSelect = useCallback(
+      (index: number) => {
+        const tab = tabs[index];
+        if (tab) {
+          onChange(tab.id);
+          const buttons =
+            tablistRef.current?.querySelectorAll<HTMLButtonElement>(
+              '[role="tab"]',
+            );
+          buttons?.[index]?.focus();
+        }
+      },
+      [tabs, onChange],
+    );
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+        let nextIndex: number | null = null;
+
+        switch (e.key) {
+          case "ArrowRight":
+            nextIndex = (currentIndex + 1) % tabs.length;
+            break;
+          case "ArrowLeft":
+            nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            break;
+          case "Home":
+            nextIndex = 0;
+            break;
+          case "End":
+            nextIndex = tabs.length - 1;
+            break;
+          default:
+            return;
+        }
+
+        e.preventDefault();
+        focusAndSelect(nextIndex);
+      },
+      [tabs, activeTab, focusAndSelect],
+    );
+
+    return (
+      <div ref={ref} className={classes} {...rest}>
+        <div
+          ref={tablistRef}
+          role="tablist"
+          onKeyDown={handleKeyDown}
+        >
+          {tabs.map((tab) => {
+            const isActive = tab.id === activeTab;
+            const buttonClasses = [
+              "strand-tabs__tab",
+              isActive && "strand-tabs__tab--active",
+            ]
+              .filter(Boolean)
+              .join(" ");
+
+            return (
+              <button
+                key={tab.id}
+                id={`tab-${tab.id}`}
+                role="tab"
+                type="button"
+                className={buttonClasses}
+                aria-selected={isActive ? "true" : "false"}
+                aria-controls={`panel-${tab.id}`}
+                tabIndex={isActive ? 0 : -1}
+                onClick={() => onChange(tab.id)}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        {tabs.map((tab) => {
+          const isActive = tab.id === activeTab;
+          return (
+            <div
+              key={tab.id}
+              id={`panel-${tab.id}`}
+              role="tabpanel"
+              aria-labelledby={`tab-${tab.id}`}
+              hidden={!isActive}
+              tabIndex={0}
+            >
+              {tab.content}
+            </div>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Tabs.displayName = "Tabs";

package/src/components/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from "./Tabs.js";
+export type { TabsProps, TabItem } from "./Tabs.js";

package/src/components/Tag/Tag.css

@@ -0,0 +1,98 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--strand-space-1);
+  padding: var(--strand-space-1) var(--strand-space-2);
+  border-radius: var(--strand-radius-sm);
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  font-weight: var(--strand-weight-medium);
+  line-height: var(--strand-leading-snug);
+  white-space: nowrap;
+  border: 1px solid transparent;
+}
+
+/* ── Solid variant ── */
+.strand-tag--solid.strand-tag--default {
+  background: var(--strand-surface-recessed);
+  color: var(--strand-gray-600);
+}
+
+.strand-tag--solid.strand-tag--teal {
+  background: rgba(20, 184, 166, 0.1);
+  color: var(--strand-on-teal-tint);
+}
+
+.strand-tag--solid.strand-tag--blue {
+  background: var(--strand-blue-glow);
+  color: var(--strand-blue-deep);
+}
+
+.strand-tag--solid.strand-tag--amber {
+  background: rgba(245, 158, 11, 0.1);
+  color: var(--strand-on-amber-tint);
+}
+
+.strand-tag--solid.strand-tag--red {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--strand-on-red-tint);
+}
+
+/* ── Outlined variant ── */
+.strand-tag--outlined {
+  background: transparent;
+}
+
+.strand-tag--outlined.strand-tag--default {
+  border-color: var(--strand-gray-200);
+  color: var(--strand-gray-600);
+}
+
+.strand-tag--outlined.strand-tag--teal {
+  border-color: var(--strand-teal-vital);
+  color: var(--strand-on-teal-tint);
+}
+
+.strand-tag--outlined.strand-tag--blue {
+  border-color: var(--strand-blue-primary);
+  color: var(--strand-blue-deep);
+}
+
+.strand-tag--outlined.strand-tag--amber {
+  border-color: var(--strand-amber-caution);
+  color: var(--strand-on-amber-tint);
+}
+
+.strand-tag--outlined.strand-tag--red {
+  border-color: var(--strand-red-alert);
+  color: var(--strand-on-red-tint);
+}
+
+/* ── Remove button ── */
+.strand-tag__remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: var(--strand-radius-sm);
+  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
+}
+
+.strand-tag__remove:hover {
+  opacity: 1;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-tag__remove {
+    transition: none;
+  }
+}

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,112 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Tag } from "./Tag.js";
+
+describe("Tag", () => {
+  // ── Rendering ──
+
+  it("renders children text", () => {
+    const { getByText } = render(<Tag>Active</Tag>);
+    expect(getByText("Active")).toBeTruthy();
+  });
+
+  it("renders as a span element", () => {
+    const { container } = render(<Tag>Test</Tag>);
+    expect(container.querySelector("span.strand-tag")).toBeTruthy();
+  });
+
+  // ── Variants ──
+
+  it("applies solid variant class by default", () => {
+    const { container } = render(<Tag>Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--solid");
+  });
+
+  it("applies outlined variant class", () => {
+    const { container } = render(<Tag variant="outlined">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--outlined");
+  });
+
+  // ── Status colors ──
+
+  it("applies default status class by default", () => {
+    const { container } = render(<Tag>Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--default");
+  });
+
+  it("applies teal status class", () => {
+    const { container } = render(<Tag status="teal">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--teal");
+  });
+
+  it("applies blue status class", () => {
+    const { container } = render(<Tag status="blue">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--blue");
+  });
+
+  it("applies amber status class", () => {
+    const { container } = render(<Tag status="amber">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--amber");
+  });
+
+  it("applies red status class", () => {
+    const { container } = render(<Tag status="red">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag--red");
+  });
+
+  // ── Removable ──
+
+  it("shows remove button when removable", () => {
+    const { getByLabelText } = render(<Tag removable>Test</Tag>);
+    expect(getByLabelText("Remove")).toBeTruthy();
+  });
+
+  it("does not show remove button when not removable", () => {
+    const { queryByLabelText } = render(<Tag>Test</Tag>);
+    expect(queryByLabelText("Remove")).toBeNull();
+  });
+
+  it("calls onRemove when remove button is clicked", () => {
+    const onRemove = vi.fn();
+    const { getByLabelText } = render(
+      <Tag removable onRemove={onRemove}>Test</Tag>,
+    );
+    fireEvent.click(getByLabelText("Remove"));
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  // ── Custom className ──
+
+  it("merges custom className with component classes", () => {
+    const { container } = render(<Tag className="custom">Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.className).toContain("strand-tag");
+    expect(tag?.className).toContain("custom");
+  });
+
+  // ── Typography ──
+
+  it("uses xs font size class", () => {
+    const { container } = render(<Tag>Test</Tag>);
+    const tag = container.querySelector(".strand-tag");
+    expect(tag).toBeTruthy();
+    // Font size is applied via CSS class .strand-tag which uses --strand-text-xs
+  });
+
+  // ── Forwarded props ──
+
+  it("forwards additional props", () => {
+    const { container } = render(
+      <Tag data-testid="my-tag" id="tag-1">Test</Tag>,
+    );
+    const tag = container.querySelector(".strand-tag");
+    expect(tag?.getAttribute("id")).toBe("tag-1");
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,73 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { ComponentChildren, JSX } from "preact";
+import { forwardRef } from "preact/compat";
+
+export interface TagProps
+  extends Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> {
+  /** Visual style variant */
+  variant?: "solid" | "outlined";
+  /** Color status */
+  status?: "default" | "teal" | "blue" | "amber" | "red";
+  /** Show remove button */
+  removable?: boolean;
+  /** Called when remove button is clicked */
+  onRemove?: () => void;
+  /** Tag text content */
+  children?: ComponentChildren;
+}
+
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  (
+    {
+      variant = "solid",
+      status = "default",
+      removable = false,
+      onRemove,
+      className = "",
+      children,
+      ...rest
+    },
+    ref,
+  ) => {
+    const classes = [
+      "strand-tag",
+      `strand-tag--${variant}`,
+      `strand-tag--${status}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <span ref={ref} className={classes} {...rest}>
+        <span className="strand-tag__text">{children}</span>
+        {removable && (
+          <button
+            type="button"
+            className="strand-tag__remove"
+            aria-label="Remove"
+            onClick={onRemove}
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M3 3l6 6M9 3l-6 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+              />
+            </svg>
+          </button>
+        )}
+      </span>
+    );
+  },
+);
+
+Tag.displayName = "Tag";

package/src/components/Tag/index.ts

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

package/src/components/Textarea/Textarea.css

@@ -0,0 +1,80 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Base ── */
+.strand-textarea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  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-textarea:focus-within {
+  border-color: var(--strand-blue-primary);
+  box-shadow: var(--strand-focus-ring);
+}
+
+/* ── Field ── */
+.strand-textarea__field {
+  width: 100%;
+  min-height: 80px;
+  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;
+  resize: vertical;
+  line-height: var(--strand-leading-normal);
+}
+
+.strand-textarea__field::placeholder {
+  color: var(--strand-gray-400);
+}
+
+/* ── Auto-resize ── */
+.strand-textarea--auto-resize .strand-textarea__field {
+  resize: none;
+  overflow: hidden;
+}
+
+/* ── Character count ── */
+.strand-textarea__count {
+  align-self: flex-end;
+  padding: var(--strand-space-1) var(--strand-space-3) var(--strand-space-2);
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-xs);
+  color: var(--strand-gray-500);
+}
+
+/* ── Error ── */
+.strand-textarea--error {
+  border-color: var(--strand-red-alert);
+}
+
+.strand-textarea--error:focus-within {
+  border-color: var(--strand-red-alert);
+  box-shadow: var(--strand-focus-ring-error);
+}
+
+/* ── Disabled ── */
+.strand-textarea--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-textarea--disabled .strand-textarea__field {
+  cursor: not-allowed;
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-textarea {
+    transition: none;
+  }
+}