@evo-web/react 0.0.0 → 0.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @evo-web/react
 
+## 0.0.1
+
+### Patch Changes
+
+- [#525](https://github.com/eBay/evo-web/pull/525) [`4b00ffc`](https://github.com/eBay/evo-web/commit/4b00ffcaf64291002926bb0f43526234f6315396) Thanks [@HenriqueLimas](https://github.com/HenriqueLimas)! - feat(evo-react): add EvoButton component
+
 ## Unreleased
 
 Initial package setup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evo-web/react",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Collection of core eBay components; considered to be the building blocks for all composite structures, pages & apps.",
   "keywords": [
     "React",
@@ -11,13 +11,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/eBay/evo-web",
+    "url": "git+https://github.com/eBay/evo-web.git",
     "directory": "packages/evo-react"
   },
   "license": "MIT",
-  "sideEffects": [
-    "./**/*.css"
-  ],
+  "sideEffects": false,
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -34,37 +32,33 @@
     "lint": "eslint . && prettier . --check --log-level=warn",
     "release": "npm run build",
     "start": "storybook dev -p 9001",
-    "test": "vitest --browser.headless --passWithNoTests",
+    "test": "vitest run --browser.headless --passWithNoTests",
     "type:check": "tsc --noEmit",
     "update-icons": "exit 0",
     "version": "npm run update-icons && git add -A src"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "^0.27.17",
     "classnames": "^2.5.1",
-    "makeup-active-descendant": "^0.7.10",
-    "makeup-expander": "^0.11.9",
+    "makeup-active-descendant": "^0.7.11",
+    "makeup-expander": "^0.11.10",
     "makeup-floating-label": "^0.4.9",
-    "makeup-focusables": "^0.4.5",
-    "makeup-keyboard-trap": "^0.5.7",
-    "makeup-prevent-scroll-keys": "^0.3.4",
-    "makeup-roving-tabindex": "^0.7.7",
-    "makeup-screenreader-trap": "^0.5.6",
-    "makeup-typeahead": "^0.3.3",
+    "makeup-focusables": "^0.4.6",
+    "makeup-keyboard-trap": "^0.5.8",
+    "makeup-prevent-scroll-keys": "^0.3.5",
+    "makeup-roving-tabindex": "^0.7.8",
+    "makeup-screenreader-trap": "^0.5.7",
+    "makeup-typeahead": "^0.3.5",
     "react-remove-scroll": "^2.7.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.3",
     "@vitest/browser-playwright": "^4.0.18",
-    "vitest-browser-react": "^2.0.4"
+    "vitest-browser-react": "^2.0.5"
   },
   "peerDependencies": {
     "@ebay/skin": "^19",
     "react": "^19",
     "react-dom": "^19"
-  },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
   }
 }

package/src/evo-button/button-cell.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+
+type ButtonType = "cta" | "fake" | "expand" | "default";
+type Props = ComponentProps<"span"> & {
+  type?: ButtonType;
+};
+
+const classPrefixes: { [key in ButtonType]: string } = {
+  cta: "cta-",
+  fake: "fake-",
+  expand: "expand-",
+  default: "",
+};
+
+export function EvoButtonCell({ type = "default", children, ...rest }: Props) {
+  return (
+    <span className={`${classPrefixes[type]}btn__cell`} {...rest}>
+      {children}
+    </span>
+  );
+}

package/src/evo-button/button.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { EvoButton } from "./button";
+import { EvoButtonCell } from "./button-cell";
+
+const meta: Meta<typeof EvoButton> = {
+  title: "Components/EvoButton",
+  component: EvoButton,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A flexible button component that can render as either a \`<button>\` or \`<a>\` element based on the \`href\` prop.
+
+## Usage
+
+\`\`\`tsx
+import { EvoButton } from "@evo-web/react";
+\`\`\`
+        `,
+      },
+    },
+  },
+  argTypes: {
+    priority: {
+      control: "select",
+      options: ["primary", "secondary", "tertiary", "none"],
+      description: "Button priority level",
+    },
+    variant: {
+      control: "select",
+      options: ["standard", "destructive", "form"],
+      description: "Button variant style",
+    },
+    size: {
+      control: "select",
+      options: ["small", "large"],
+      description: "Button size",
+    },
+    bodyState: {
+      control: "select",
+      options: ["loading", "expand", "reset", "none"],
+      description: "Button body state",
+    },
+    split: {
+      control: "select",
+      options: ["start", "end"],
+      description: "Split button position",
+    },
+    fluid: {
+      control: "boolean",
+      description: "Full width button",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disabled state",
+    },
+    partiallyDisabled: {
+      control: "boolean",
+      description: "Partially disabled (aria-disabled)",
+    },
+    transparent: {
+      control: "boolean",
+      description: "Transparent background",
+    },
+    borderless: {
+      control: "boolean",
+      description: "No border",
+    },
+    fixedHeight: {
+      control: "boolean",
+      description: "Fixed height",
+    },
+    truncate: {
+      control: "boolean",
+      description: "Truncate text with ellipsis",
+    },
+    href: {
+      control: "text",
+      description: "Link URL (renders as anchor)",
+    },
+    children: {
+      control: "text",
+      description: "Button text content",
+    },
+  },
+  args: {
+    priority: "primary",
+    variant: "standard",
+    children: "Button",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EvoButton>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+  },
+};
+
+export const WithButtonCell: Story = {
+  render: (args) => (
+    <EvoButton {...args}>
+      <EvoButtonCell style={{ justifyContent: "space-between" }}>
+        <span>Select</span>
+        <span>Any</span>
+      </EvoButtonCell>
+    </EvoButton>
+  ),
+};

package/src/evo-button/button.tsx

@@ -0,0 +1,138 @@
+import type { KeyboardEvent } from "react";
+import React from "react";
+import classNames from "classnames";
+import type {
+  AnchorButtonProps,
+  NativeButtonProps,
+  Priority,
+  Size,
+  Split,
+} from "./types";
+import "@ebay/skin/button";
+
+export function EvoButton(props: AnchorButtonProps): React.JSX.Element;
+export function EvoButton(props: NativeButtonProps): React.JSX.Element;
+export function EvoButton(
+  props: AnchorButtonProps | NativeButtonProps,
+): React.JSX.Element {
+  const {
+    priority = "secondary",
+    variant = "standard",
+    size,
+    bodyState,
+    split,
+    transparent = false,
+    fluid = false,
+    disabled,
+    partiallyDisabled,
+    children,
+    onKeyDown,
+    onEscape,
+    truncate = false,
+    href,
+    className: extraClasses,
+    borderless,
+    fixedHeight,
+    ...rest
+  } = props;
+  const classPrefix = href ? "fake-btn" : "btn";
+  const priorityStyles: { [key in Priority]: string } = {
+    primary: `${classPrefix}--primary`,
+    secondary: `${classPrefix}--secondary`,
+    tertiary: `${classPrefix}--tertiary`,
+    none: "",
+  };
+  const sizeStyles: { [key in Size]: string } = {
+    large: `${classPrefix}--large`,
+    small: `${classPrefix}--small`,
+  };
+  const splitStyles: { [key in Split]: string } = {
+    start: `${classPrefix}--split-start`,
+    end: `${classPrefix}--split-end`,
+  };
+  const isDestructive = variant === "destructive";
+  const isForm = variant === "form";
+  const className = classNames(
+    classPrefix,
+    extraClasses,
+    priorityStyles[isForm || borderless ? "none" : priority],
+    size && sizeStyles[size],
+    split && splitStyles[split],
+    isDestructive && `${classPrefix}--destructive`,
+    isForm && `${classPrefix}--form`,
+    transparent && `${classPrefix}--transparent`,
+    fluid && `${classPrefix}--fluid`,
+    truncate && `${classPrefix}--truncated`,
+    borderless && `${classPrefix}--borderless`,
+    fixedHeight &&
+      (size && sizeStyles[size]
+        ? `${sizeStyles[size]}-fixed-height`
+        : `${classPrefix}--fixed-height`),
+  );
+
+  const bodyContent = (() => {
+    switch (bodyState) {
+      case "loading":
+        return (
+          <span className="btn__cell">
+            {/* TODO: Replace with <EvoProgressSpinner /> when available */}
+            <span>Loading...</span>
+          </span>
+        );
+      case "expand":
+        return (
+          <span className="btn__cell">
+            <span className="btn__text">{children}</span>
+            {/* TODO: Replace with <EvoIconChevronDown16 /> when available */}
+            <span>▼</span>
+          </span>
+        );
+      default:
+        return children;
+    }
+  })();
+
+  const ariaLive = bodyState === "loading" ? "polite" : undefined;
+
+  const keyDownHandler = (
+    event: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
+  ) => {
+    onKeyDown?.(
+      event as KeyboardEvent<HTMLButtonElement> &
+        KeyboardEvent<HTMLAnchorElement>,
+    );
+    if (event.key === "Escape" && !disabled && onEscape) {
+      onEscape(
+        event as KeyboardEvent<HTMLButtonElement> &
+          KeyboardEvent<HTMLAnchorElement>,
+      );
+    }
+  };
+
+  if (href) {
+    return (
+      <a
+        {...(rest as React.ComponentProps<"a">)}
+        className={className}
+        href={disabled ? undefined : href}
+        onKeyDown={keyDownHandler}
+        aria-live={ariaLive}
+      >
+        {bodyContent}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      {...(rest as React.ComponentProps<"button">)}
+      disabled={disabled}
+      aria-disabled={partiallyDisabled ? "true" : undefined}
+      aria-live={ariaLive}
+      className={className}
+      onKeyDown={keyDownHandler}
+    >
+      {bodyContent}
+    </button>
+  );
+}

package/src/evo-button/index.ts

@@ -0,0 +1,10 @@
+export { EvoButton } from "./button";
+export { EvoButtonCell } from "./button-cell";
+export type {
+  EvoButtonProps,
+  Size,
+  Priority,
+  Variant,
+  BodyState,
+  Split,
+} from "./types";

package/src/evo-button/test/__snapshots__/test.server.tsx.snap

@@ -0,0 +1,83 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`EvoButton SSR > should render button with bodyState=expand 1`] = `"<button class="btn btn--secondary"><span class="btn__cell"><span class="btn__text">Button</span><span>▼</span></span></button>"`;
+
+exports[`EvoButton SSR > should render button with bodyState=loading 1`] = `"<button aria-live="polite" class="btn btn--secondary"><span class="btn__cell"><span>Loading...</span></span></button>"`;
+
+exports[`EvoButton SSR > should render button with borderless=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with borderless=true 1`] = `"<button class="btn btn--borderless">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with disabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with disabled=true 1`] = `"<button disabled="" class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with fixedHeight=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with fixedHeight=true 1`] = `"<button class="btn btn--secondary btn--fixed-height">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with fluid=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with fluid=true 1`] = `"<button class="btn btn--secondary btn--fluid">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with partiallyDisabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with partiallyDisabled=true 1`] = `"<button aria-disabled="true" class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with priority=none 1`] = `"<button class="btn">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with priority=primary 1`] = `"<button class="btn btn--primary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with priority=secondary 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with priority=tertiary 1`] = `"<button class="btn btn--tertiary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with size=large 1`] = `"<button class="btn btn--secondary btn--large">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with size=small 1`] = `"<button class="btn btn--secondary btn--small">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with split=end 1`] = `"<button class="btn btn--primary btn--split-end">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with split=start 1`] = `"<button class="btn btn--primary btn--split-start">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with transparent=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with transparent=true 1`] = `"<button class="btn btn--secondary btn--transparent">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with truncate=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with truncate=true 1`] = `"<button class="btn btn--secondary btn--truncated">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with variant=destructive 1`] = `"<button class="btn btn--secondary btn--destructive">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with variant=form 1`] = `"<button class="btn btn--form">Button</button>"`;
+
+exports[`EvoButton SSR > should render button with variant=standard 1`] = `"<button class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render combined: primary large fluid 1`] = `"<button class="btn btn--primary btn--large btn--fluid">Combined</button>"`;
+
+exports[`EvoButton SSR > should render defaults 1`] = `"<button class="btn btn--secondary">Default Button</button>"`;
+
+exports[`EvoButton SSR > should render destructive primary large 1`] = `"<button class="btn btn--primary btn--large btn--destructive">Delete</button>"`;
+
+exports[`EvoButton SSR > should render disabled link without href 1`] = `"<a class="fake-btn fake-btn--secondary">Disabled Link</a>"`;
+
+exports[`EvoButton SSR > should render fake version (anchor) 1`] = `"<a aria-label="fake button" class="fake-btn fake-btn--primary fake-btn--large" href="https://ebay.com">Link Button</a>"`;
+
+exports[`EvoButton SSR > should render form variant with expand 1`] = `"<button class="btn btn--form"><span class="btn__cell"><span class="btn__text">Form Expand</span><span>▼</span></span></button>"`;
+
+exports[`EvoButton SSR > should render large fixed-height button 1`] = `"<button class="btn btn--secondary btn--large btn--large-fixed-height">Large Fixed Height</button>"`;
+
+exports[`EvoButton SSR > should render large truncated button 1`] = `"<button class="btn btn--secondary btn--large btn--truncated">Large Truncated</button>"`;
+
+exports[`EvoButton SSR > should render with ButtonCell 1`] = `"<button class="btn btn--secondary"><span class="btn__cell" style="justify-content:space-between"><span>Left</span><span>Right</span></span></button>"`;
+
+exports[`EvoButton SSR > should render with aria-label 1`] = `"<button aria-label="Submit form" class="btn btn--secondary">Submit</button>"`;
+
+exports[`EvoButton SSR > should render with custom className 1`] = `"<button class="btn custom-class btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render with data attributes 1`] = `"<button data-testid="button" class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render with id override 1`] = `"<button id="test" class="btn btn--secondary">Button</button>"`;
+
+exports[`EvoButton SSR > should render with type override 1`] = `"<button type="submit" class="btn btn--secondary">Submit</button>"`;

package/src/evo-button/test/test.browser.tsx

@@ -0,0 +1,298 @@
+import React from "react";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render } from "vitest-browser-react";
+import { userEvent } from "vitest/browser";
+import { EvoButton } from "../button";
+import { EvoButtonCell } from "../button-cell";
+
+describe("evo-button", () => {
+  let user: ReturnType<typeof userEvent.setup>;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  afterEach(() => {
+    user.cleanup();
+  });
+
+  describe("given button is enabled", () => {
+    it("emits click event when clicked", async () => {
+      const onClick = vi.fn();
+      const screen = await render(
+        <EvoButton onClick={onClick}>Click Me</EvoButton>,
+      );
+
+      await user.click(screen.getByRole("button"));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("emits escape event when escape key is pressed", async () => {
+      const onEscape = vi.fn();
+      const screen = await render(
+        <EvoButton onEscape={onEscape}>Button</EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await user.click(button);
+      await user.keyboard("{Escape}");
+
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+
+    it("emits both onKeyDown and onEscape on escape key", async () => {
+      const onKeyDown = vi.fn();
+      const onEscape = vi.fn();
+      const screen = await render(
+        <EvoButton onKeyDown={onKeyDown} onEscape={onEscape}>
+          Button
+        </EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await user.click(button);
+      await user.keyboard("{Escape}");
+
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+
+    it("emits focus event when focused", async () => {
+      const onFocus = vi.fn();
+      const screen = await render(
+        <EvoButton onFocus={onFocus}>Button</EvoButton>,
+      );
+
+      await user.click(screen.getByRole("button"));
+
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it("emits blur event when blurred", async () => {
+      const onBlur = vi.fn();
+      const screen = await render(
+        <EvoButton onBlur={onBlur}>Button</EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await user.click(button);
+      await user.tab();
+
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("given button is disabled", () => {
+    it("does not emit click event when clicked", async () => {
+      const onClick = vi.fn();
+      const screen = await render(
+        <EvoButton onClick={onClick} disabled>
+          Button
+        </EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await expect.element(button).toBeDisabled();
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it("does not emit escape event when escape key is pressed", async () => {
+      const onEscape = vi.fn();
+      const screen = await render(
+        <EvoButton onEscape={onEscape} disabled>
+          Button
+        </EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await expect.element(button).toBeDisabled();
+      expect(onEscape).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("forwards ref to button element", async () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      await render(<EvoButton ref={ref}>Button</EvoButton>);
+
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+      expect(ref.current?.tagName).toBe("BUTTON");
+    });
+
+    it("forwards ref to anchor element when href is provided", async () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      await render(
+        <EvoButton href="https://ebay.com" ref={ref}>
+          Link
+        </EvoButton>,
+      );
+
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+      expect(ref.current?.tagName).toBe("A");
+    });
+  });
+
+  describe("anchor element behavior", () => {
+    it("renders as link when href is provided", async () => {
+      const screen = await render(
+        <EvoButton
+          href="https://ebay.com"
+          priority="primary"
+          onClick={(e) => e.preventDefault()}
+        >
+          Link Button
+        </EvoButton>,
+      );
+
+      const link = screen.getByRole("link");
+      await expect.element(link).toHaveAttribute("href", "https://ebay.com");
+    });
+
+    it("does not render href when disabled", async () => {
+      const screen = await render(
+        <EvoButton href="https://ebay.com" disabled>
+          Disabled Link
+        </EvoButton>,
+      );
+
+      const link = screen.getByText("Disabled Link");
+      await expect.element(link).not.toHaveAttribute("href");
+    });
+
+    it("emits escape event on anchor element", async () => {
+      const onEscape = vi.fn();
+      const screen = await render(
+        <EvoButton
+          href="https://ebay.com"
+          onEscape={onEscape}
+          onClick={(e) => e.preventDefault()}
+        >
+          Link
+        </EvoButton>,
+      );
+
+      const link = screen.getByRole("link");
+      await user.click(link);
+      await user.keyboard("{Escape}");
+
+      expect(onEscape).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("body states", () => {
+    it("renders loading state with aria-live", async () => {
+      const screen = await render(
+        <EvoButton bodyState="loading">Submit</EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      expect(button).toHaveAttribute("aria-live", "polite");
+    });
+
+    it("renders expand state with correct structure", async () => {
+      const screen = await render(
+        <EvoButton bodyState="expand">Options</EvoButton>,
+      );
+
+      const text = screen.getByText("Options");
+      await expect.element(text).toBeInTheDocument();
+    });
+
+    it("maintains interactivity in loading state", async () => {
+      const onClick = vi.fn();
+      const screen = await render(
+        <EvoButton bodyState="loading" onClick={onClick}>
+          Submit
+        </EvoButton>,
+      );
+
+      await user.click(screen.getByRole("button"));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("partially disabled state", () => {
+    it("renders with aria-disabled but remains clickable", async () => {
+      const onClick = vi.fn();
+      const screen = await render(
+        <EvoButton partiallyDisabled onClick={onClick}>
+          Partially Disabled
+        </EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await expect.element(button).toHaveAttribute("aria-disabled", "true");
+
+      await button.click({ force: true });
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("keyboard navigation", () => {
+    it("can be focused via keyboard", async () => {
+      const onFocus = vi.fn();
+      await render(<EvoButton onFocus={onFocus}>Button</EvoButton>);
+
+      await user.tab();
+
+      expect(onFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it("emits onKeyDown for all keys", async () => {
+      const onKeyDown = vi.fn();
+      const screen = await render(
+        <EvoButton onKeyDown={onKeyDown}>Button</EvoButton>,
+      );
+
+      const button = screen.getByRole("button");
+      await user.click(button);
+      await user.keyboard("{Enter}");
+
+      expect(onKeyDown).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("button cell", () => {
+    it("renders custom layout with ButtonCell", async () => {
+      const onClick = vi.fn();
+      const screen = await render(
+        <EvoButton onClick={onClick}>
+          <EvoButtonCell style={{ justifyContent: "space-between" }}>
+            <span>Left</span>
+            <span>Right</span>
+          </EvoButtonCell>
+        </EvoButton>,
+      );
+
+      await expect.element(screen.getByText("Left")).toBeInTheDocument();
+      await expect.element(screen.getByText("Right")).toBeInTheDocument();
+
+      await user.click(screen.getByRole("button"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("accessibility", () => {
+    it("has correct role for button", async () => {
+      const screen = await render(<EvoButton>Button</EvoButton>);
+      await expect.element(screen.getByRole("button")).toBeInTheDocument();
+    });
+
+    it("has correct role for link", async () => {
+      const screen = await render(
+        <EvoButton href="https://ebay.com">Link</EvoButton>,
+      );
+      await expect.element(screen.getByRole("link")).toBeInTheDocument();
+    });
+
+    it("supports aria-label", async () => {
+      const screen = await render(
+        <EvoButton aria-label="Submit form">Submit</EvoButton>,
+      );
+      const button = screen.getByRole("button", { name: "Submit form" });
+      await expect.element(button).toBeInTheDocument();
+    });
+  });
+});

package/src/evo-button/test/test.server.tsx

@@ -0,0 +1,245 @@
+import { it, expect, describe } from "vitest";
+import { renderToString } from "react-dom/server";
+import { EvoButton } from "../button";
+import { EvoButtonCell } from "../button-cell";
+import type { Priority, Size, Variant, Split, BodyState } from "../types";
+
+describe("EvoButton SSR", () => {
+  it.each<Priority>(["primary", "secondary", "tertiary", "none"])(
+    "should render button with priority=%s",
+    (priority) => {
+      expect(
+        renderToString(<EvoButton priority={priority}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<Size>(["large", "small"])(
+    "should render button with size=%s",
+    (size) => {
+      expect(
+        renderToString(<EvoButton size={size}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<Variant>(["standard", "destructive", "form"])(
+    "should render button with variant=%s",
+    (variant) => {
+      expect(
+        renderToString(<EvoButton variant={variant}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<Split>(["start", "end"])(
+    "should render button with split=%s",
+    (split) => {
+      expect(
+        renderToString(
+          <EvoButton split={split} priority="primary">
+            Button
+          </EvoButton>,
+        ),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<BodyState>(["loading", "expand"])(
+    "should render button with bodyState=%s",
+    (bodyState) => {
+      expect(
+        renderToString(<EvoButton bodyState={bodyState}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with fluid=%s",
+    (fluid) => {
+      expect(
+        renderToString(<EvoButton fluid={fluid}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with disabled=%s",
+    (disabled) => {
+      expect(
+        renderToString(<EvoButton disabled={disabled}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with partiallyDisabled=%s",
+    (partiallyDisabled) => {
+      expect(
+        renderToString(
+          <EvoButton partiallyDisabled={partiallyDisabled}>Button</EvoButton>,
+        ),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with transparent=%s",
+    (transparent) => {
+      expect(
+        renderToString(<EvoButton transparent={transparent}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with borderless=%s",
+    (borderless) => {
+      expect(
+        renderToString(<EvoButton borderless={borderless}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with truncate=%s",
+    (truncate) => {
+      expect(
+        renderToString(<EvoButton truncate={truncate}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it.each<boolean>([false, true])(
+    "should render button with fixedHeight=%s",
+    (fixedHeight) => {
+      expect(
+        renderToString(<EvoButton fixedHeight={fixedHeight}>Button</EvoButton>),
+      ).toMatchSnapshot();
+    },
+  );
+
+  it("should render defaults", () => {
+    expect(
+      renderToString(<EvoButton>Default Button</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with id override", () => {
+    expect(
+      renderToString(<EvoButton id="test">Button</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with type override", () => {
+    expect(
+      renderToString(<EvoButton type="submit">Submit</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render fake version (anchor)", () => {
+    expect(
+      renderToString(
+        <EvoButton
+          href="https://ebay.com"
+          size="large"
+          priority="primary"
+          aria-label="fake button"
+        >
+          Link Button
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render disabled link without href", () => {
+    expect(
+      renderToString(
+        <EvoButton href="https://ebay.com" disabled>
+          Disabled Link
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render large truncated button", () => {
+    expect(
+      renderToString(
+        <EvoButton truncate size="large">
+          Large Truncated
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render large fixed-height button", () => {
+    expect(
+      renderToString(
+        <EvoButton fixedHeight size="large">
+          Large Fixed Height
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render form variant with expand", () => {
+    expect(
+      renderToString(
+        <EvoButton variant="form" bodyState="expand">
+          Form Expand
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render destructive primary large", () => {
+    expect(
+      renderToString(
+        <EvoButton variant="destructive" priority="primary" size="large">
+          Delete
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with custom className", () => {
+    expect(
+      renderToString(<EvoButton className="custom-class">Button</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with aria-label", () => {
+    expect(
+      renderToString(<EvoButton aria-label="Submit form">Submit</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with data attributes", () => {
+    expect(
+      renderToString(<EvoButton data-testid="button">Button</EvoButton>),
+    ).toMatchSnapshot();
+  });
+
+  it("should render with ButtonCell", () => {
+    expect(
+      renderToString(
+        <EvoButton>
+          <EvoButtonCell style={{ justifyContent: "space-between" }}>
+            <span>Left</span>
+            <span>Right</span>
+          </EvoButtonCell>
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  it("should render combined: primary large fluid", () => {
+    expect(
+      renderToString(
+        <EvoButton priority="primary" size="large" fluid>
+          Combined
+        </EvoButton>,
+      ),
+    ).toMatchSnapshot();
+  });
+});

package/src/evo-button/types.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, KeyboardEvent } from "react";
+
+export type Priority = "primary" | "secondary" | "tertiary" | "none";
+export type Variant = "standard" | "destructive" | "form";
+export type Size = "small" | "large";
+export type BodyState = "loading" | "expand" | "reset" | "none";
+export type Split = "start" | "end";
+
+type BaseButtonProps = {
+  fluid?: boolean;
+  partiallyDisabled?: boolean;
+  truncate?: boolean;
+  priority?: Priority;
+  variant?: Variant;
+  size?: Size;
+  bodyState?: BodyState;
+  split?: Split;
+  transparent?: boolean;
+  borderless?: boolean;
+  fixedHeight?: boolean;
+};
+
+export type AnchorButtonProps = ComponentProps<"a"> &
+  BaseButtonProps & {
+    href: string;
+    onEscape?: (e: KeyboardEvent<HTMLAnchorElement>) => void;
+    disabled?: boolean;
+  };
+
+export type NativeButtonProps = ComponentProps<"button"> &
+  BaseButtonProps & {
+    href?: never;
+    onEscape?: (e: KeyboardEvent<HTMLButtonElement>) => void;
+  };
+
+export type EvoButtonProps = AnchorButtonProps | NativeButtonProps;

package/src/index.ts

@@ -1 +1,9 @@
-export const VERSION = "0.0.0";
+export { EvoButton, EvoButtonCell } from "./evo-button";
+export type {
+  EvoButtonProps,
+  Size,
+  Priority,
+  Variant,
+  BodyState,
+  Split,
+} from "./evo-button";

package/test.setup.ts

@@ -1,3 +1,4 @@
+import "vitest-browser-react";
 import "@ebay/skin/dist/tokens/evo-core.css";
 import "@ebay/skin/dist/tokens/evo-light.css";
 import "@ebay/skin/dist/tokens/evo-dark.css";

package/tsconfig.prod.json

@@ -1,5 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": ["./**/__tests__/*", "./**/*.stories.tsx"],
+  "exclude": ["./**/*.stories.tsx", "./**/test/*"],
   "include": ["./src/**/*"]
 }

package/vite.config.js

@@ -18,10 +18,12 @@ export default defineConfig({
     lib: {
       entry: "./src/index.ts",
       formats: ["es"],
-      fileName: "index",
     },
     rollupOptions: {
       output: {
+        preserveModules: true,
+        preserveModulesRoot: "src",
+        entryFileNames: "[name].js",
         banner: `"use client";\n`,
       },
       plugins: [
@@ -59,6 +61,7 @@ export default defineConfig({
         extends: true,
         test: {
           name: "browser",
+          setupFiles: ["./test.setup.ts"],
           browser: {
             enabled: true,
             provider: playwright(),