@dillingerstaffing/strand-ui 0.1.0 → 0.1.1

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: #0D7377;
+}
+
+.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: #92400E;
+}
+
+.strand-tag--solid.strand-tag--red {
+  background: rgba(239, 68, 68, 0.1);
+  color: #991B1B;
+}
+
+/* ── 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: #0D7377;
+}
+
+.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: #92400E;
+}
+
+.strand-tag--outlined.strand-tag--red {
+  border-color: var(--strand-red-alert);
+  color: #991B1B;
+}
+
+/* ── 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) ease;
+}
+
+.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,73 @@
+/*! 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) ease,
+    box-shadow var(--strand-duration-fast) ease;
+}
+
+.strand-textarea:focus-within {
+  border-color: var(--strand-blue-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* ── 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: 0 0 0 3px rgba(239, 68, 68, 0.1);
+}
+
+/* ── Disabled ── */
+.strand-textarea--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.strand-textarea--disabled .strand-textarea__field {
+  cursor: not-allowed;
+}

package/src/components/Textarea/Textarea.test.tsx

@@ -0,0 +1,89 @@
+import { describe, expect, it, vi } from "vitest";
+import { render, fireEvent } from "@testing-library/preact";
+import { Textarea } from "./Textarea.js";
+
+describe("Textarea", () => {
+  it("renders a textarea element", () => {
+    const { container } = render(<Textarea aria-label="Message" />);
+    expect(container.querySelector("textarea")).toBeTruthy();
+  });
+
+  it("displays placeholder text", () => {
+    const { getByPlaceholderText } = render(
+      <Textarea placeholder="Enter message" aria-label="Message" />
+    );
+    expect(getByPlaceholderText("Enter message")).toBeTruthy();
+  });
+
+  it("calls onInput when value changes", () => {
+    const onInput = vi.fn();
+    const { container } = render(
+      <Textarea aria-label="Message" onInput={onInput} />
+    );
+    fireEvent.input(container.querySelector("textarea")!, {
+      target: { value: "hello" },
+    });
+    expect(onInput).toHaveBeenCalled();
+  });
+
+  it("shows character count when showCount and maxLength are set", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" showCount maxLength={100} value="hello" />
+    );
+    const count = container.querySelector(".strand-textarea__count");
+    expect(count).toBeTruthy();
+    expect(count!.textContent).toBe("5/100");
+  });
+
+  it("does not show character count without showCount", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" maxLength={100} value="hello" />
+    );
+    expect(container.querySelector(".strand-textarea__count")).toBeNull();
+  });
+
+  it("applies auto-resize class when autoResize is true", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" autoResize />
+    );
+    expect(
+      container.querySelector(".strand-textarea--auto-resize")
+    ).toBeTruthy();
+  });
+
+  it("applies error class when error is true", () => {
+    const { container } = render(<Textarea aria-label="Message" error />);
+    expect(
+      container.querySelector(".strand-textarea--error")
+    ).toBeTruthy();
+  });
+
+  it("sets aria-invalid when error is true", () => {
+    const { container } = render(<Textarea aria-label="Message" error />);
+    expect(container.querySelector("textarea")).toHaveAttribute(
+      "aria-invalid",
+      "true"
+    );
+  });
+
+  it("sets disabled attribute when disabled", () => {
+    const { container } = render(<Textarea aria-label="Message" disabled />);
+    expect(container.querySelector("textarea")).toBeDisabled();
+  });
+
+  it("applies disabled class when disabled", () => {
+    const { container } = render(<Textarea aria-label="Message" disabled />);
+    expect(
+      container.querySelector(".strand-textarea--disabled")
+    ).toBeTruthy();
+  });
+
+  it("merges custom className", () => {
+    const { container } = render(
+      <Textarea aria-label="Message" className="custom" />
+    );
+    const wrapper = container.querySelector(".strand-textarea");
+    expect(wrapper?.className).toContain("custom");
+    expect(wrapper?.className).toContain("strand-textarea");
+  });
+});

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,102 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+import type { JSX } from "preact";
+import { forwardRef } from "preact/compat";
+import { useCallback, useRef } from "preact/hooks";
+
+export interface TextareaProps
+  extends Omit<JSX.HTMLAttributes<HTMLTextAreaElement>, "onInput" | "value"> {
+  /** Auto-resize to fit content */
+  autoResize?: boolean;
+  /** Show character count (requires maxLength) */
+  showCount?: boolean;
+  /** Show error styling */
+  error?: boolean;
+  /** Maximum character count */
+  maxLength?: number;
+  /** Input handler */
+  onInput?: JSX.GenericEventHandler<HTMLTextAreaElement>;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Controlled value */
+  value?: string;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  (
+    {
+      autoResize = false,
+      showCount = false,
+      error = false,
+      maxLength,
+      disabled,
+      className = "",
+      value,
+      onInput,
+      ...rest
+    },
+    ref,
+  ) => {
+    const internalRef = useRef<HTMLTextAreaElement | null>(null);
+
+    const setRef = useCallback(
+      (el: HTMLTextAreaElement | null) => {
+        internalRef.current = el;
+        if (typeof ref === "function") {
+          ref(el);
+        } else if (ref) {
+          (ref as { current: HTMLTextAreaElement | null }).current = el;
+        }
+      },
+      [ref],
+    );
+
+    const handleInput: JSX.GenericEventHandler<HTMLTextAreaElement> = useCallback(
+      (e) => {
+        if (autoResize && internalRef.current) {
+          internalRef.current.style.height = "auto";
+          internalRef.current.style.height = `${internalRef.current.scrollHeight}px`;
+        }
+        if (onInput) {
+          onInput(e);
+        }
+      },
+      [autoResize, onInput],
+    );
+
+    const wrapperClasses = [
+      "strand-textarea",
+      error && "strand-textarea--error",
+      disabled && "strand-textarea--disabled",
+      autoResize && "strand-textarea--auto-resize",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    const currentLength =
+      typeof value === "string" ? value.length : 0;
+
+    return (
+      <div className={wrapperClasses}>
+        <textarea
+          ref={setRef}
+          className="strand-textarea__field"
+          disabled={disabled}
+          aria-invalid={error ? "true" : undefined}
+          maxLength={maxLength}
+          value={value}
+          onInput={handleInput}
+          {...rest}
+        />
+        {showCount && maxLength != null && (
+          <span className="strand-textarea__count" aria-live="polite">
+            {currentLength}/{maxLength}
+          </span>
+        )}
+      </div>
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";

package/src/components/Textarea/index.ts

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

package/src/components/Toast/Toast.css

@@ -0,0 +1,103 @@
+/*! Strand UI | MIT License | dillingerstaffing.com */
+
+/* ── Container ── */
+.strand-toast__container {
+  position: fixed;
+  right: var(--strand-space-6);
+  bottom: var(--strand-space-6);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--strand-space-3);
+  pointer-events: none;
+}
+
+/* ── Toast ── */
+.strand-toast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 280px;
+  max-width: 420px;
+  padding: var(--strand-space-4);
+  background: var(--strand-surface-elevated);
+  border-radius: var(--strand-radius-lg);
+  border-left: 4px solid transparent;
+  box-shadow: var(--strand-elevation-3);
+  font-family: var(--strand-font-sans);
+  font-size: var(--strand-text-sm);
+  pointer-events: auto;
+  animation: strand-toast-in var(--strand-duration-normal) var(--strand-ease-out-expo);
+}
+
+/* ── Status accents ── */
+.strand-toast--info {
+  border-left-color: var(--strand-blue-primary);
+}
+
+.strand-toast--success {
+  border-left-color: var(--strand-green-positive);
+}
+
+.strand-toast--warning {
+  border-left-color: var(--strand-amber-caution);
+}
+
+.strand-toast--error {
+  border-left-color: var(--strand-red-alert);
+}
+
+/* ── Message ── */
+.strand-toast__message {
+  flex: 1;
+  min-width: 0;
+  color: var(--strand-gray-900);
+}
+
+/* ── Dismiss button ── */
+.strand-toast__dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: var(--strand-space-3);
+  padding: 0;
+  border: none;
+  border-radius: var(--strand-radius-md);
+  background: transparent;
+  color: var(--strand-gray-500);
+  font-size: var(--strand-text-base);
+  cursor: pointer;
+  transition: background var(--strand-duration-fast) ease,
+    color var(--strand-duration-fast) ease;
+}
+
+.strand-toast__dismiss:hover {
+  background: var(--strand-gray-200);
+  color: var(--strand-gray-600);
+}
+
+/* ── Animations ── */
+@keyframes strand-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ── Reduced motion ── */
+@media (prefers-reduced-motion: reduce) {
+  .strand-toast {
+    animation: none;
+  }
+
+  .strand-toast__dismiss {
+    transition: none;
+  }
+}