@purpurds/popover 0.0.1

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-popover__trigger_10ko3_1{position:relative;width:fit-content}._purpur-popover__trigger-highlight_10ko3_5{position:absolute;inset:-2px;border-radius:var(--purpur-border-radius-sm);pointer-events:none}._purpur-popover__trigger-highlight--state1_10ko3_14{border:var(--purpur-border-radius-xs) solid var(--purpur-color-border-interactive-expressive);box-shadow:0 0 0 4px #990ae380}@media(prefers-reduced-motion:no-preference){._purpur-popover__trigger-highlight--state1_10ko3_14{animation:_highlightState1_10ko3_1 var(--purpur-motion-duration-1500) ease-out 3;animation-fill-mode:forwards}}@media(prefers-reduced-motion:reduce){._purpur-popover__trigger-highlight--state1_10ko3_14{opacity:0}}._purpur-popover__trigger-highlight--state1_10ko3_14._purpur-popover__trigger-highlight--negative_10ko3_29{border-color:var(--purpur-color-purple-200);box-shadow:0 0 0 4px #e4b6fb80}._purpur-popover__trigger-highlight--state2_10ko3_33{border:var(--purpur-border-radius-xs) solid var(--purpur-color-border-interactive-expressive);opacity:1}@media(prefers-reduced-motion:reduce){._purpur-popover__trigger-highlight--state2_10ko3_33{opacity:1}}._purpur-popover__trigger-highlight--state2_10ko3_33._purpur-popover__trigger-highlight--negative_10ko3_29{border-color:var(--purpur-color-purple-200)}._purpur-popover__inner_10ko3_45{display:flex;flex-direction:column;align-items:flex-start;gap:var(--purpur-spacing-100);align-self:stretch}._purpur-popover__content_10ko3_52{display:flex;flex-direction:column;align-items:flex-start;gap:var(--purpur-spacing-300);width:288px;padding:var(--purpur-spacing-200);border-radius:var(--purpur-border-radius-md);box-shadow:var(--purpur-shadow-lg);z-index:var(--popover-z-index)}@media(prefers-reduced-motion:no-preference){._purpur-popover__content_10ko3_52[data-state=open]{animation:_fadeIn_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=open][data-side=top]{animation:_fadeIn_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideFromTop_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=open][data-side=bottom]{animation:_fadeIn_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideFromBottom_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=open][data-side=left]{animation:_fadeIn_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideFromLeft_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=open][data-side=right]{animation:_fadeIn_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideFromRight_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=closed]{animation:_fadeOut_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=closed][data-side=top]{animation:_fadeOut_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideToTop_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=closed][data-side=bottom]{animation:_fadeOut_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideToBottom_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=closed][data-side=left]{animation:_fadeOut_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideToLeft_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-popover__content_10ko3_52[data-state=closed][data-side=right]{animation:_fadeOut_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards,_slideToRight_10ko3_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}}@media(min-width:600px){._purpur-popover__content_10ko3_52{width:400px}}._purpur-popover__content_10ko3_52{background:var(--purpur-color-background-tone-on-tone-primary)}._purpur-popover__content_10ko3_52 ._purpur-popover__arrow_10ko3_103{fill:var(--purpur-color-background-tone-on-tone-primary)}._purpur-popover__content_10ko3_52 ._purpur-popover__body_10ko3_106,._purpur-popover__content_10ko3_52 ._purpur-popover__icon_10ko3_107,._purpur-popover__content_10ko3_52 ._purpur-popover__steps_10ko3_108,._purpur-popover__content_10ko3_52 ._purpur-popover__title_10ko3_109{color:var(--purpur-color-text-tone-on-tone-primary)}._purpur-popover__content--negative_10ko3_112{background:var(--purpur-color-background-tone-on-tone-secondary)}._purpur-popover__content--negative_10ko3_112 ._purpur-popover__arrow_10ko3_103{fill:var(--purpur-color-background-tone-on-tone-secondary)}._purpur-popover__content--negative_10ko3_112 ._purpur-popover__body_10ko3_106,._purpur-popover__content--negative_10ko3_112 ._purpur-popover__icon_10ko3_107,._purpur-popover__content--negative_10ko3_112 ._purpur-popover__steps_10ko3_108,._purpur-popover__content--negative_10ko3_112 ._purpur-popover__title_10ko3_109{color:var(--purpur-color-text-tone-on-tone-secondary)}._purpur-popover__header-content_10ko3_124{display:flex;align-items:flex-start;gap:var(--purpur-spacing-100);align-self:stretch;padding-right:var(--purpur-spacing-300)}._purpur-popover__header-content_10ko3_124 ._purpur-popover__icon_10ko3_107{display:flex;padding-top:var(--purpur-spacing-25);align-items:center;gap:8px}._purpur-popover__content_10ko3_52 ._purpur-popover__close_10ko3_137{position:absolute;top:6.26px;right:6.26px}._purpur-popover__footer_10ko3_142{display:flex;text-align:center;gap:var(--purpur-spacing-150);align-self:stretch;align-items:center;flex-direction:column-reverse}@media(min-width:600px){._purpur-popover__footer_10ko3_142{flex-direction:row}}._purpur-popover__footer-button-group_10ko3_155{display:flex;justify-content:flex-end;align-items:center;gap:var(--purpur-spacing-200);flex:1 0 0}._purpur-popover__steps_10ko3_108{flex-shrink:0;color:var(--purpur-color-text-tone-on-tone-primary);overflow:hidden;text-overflow:ellipsis}@keyframes _fadeIn_10ko3_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_10ko3_1{0%{opacity:1}to{opacity:0}}@keyframes _slideFromTop_10ko3_1{0%{transform:translateY(-8px)}to{transform:translateY(0)}}@keyframes _slideToTop_10ko3_1{0%{transform:translateY(0)}to{transform:translateY(-8px)}}@keyframes _slideFromBottom_10ko3_1{0%{transform:translateY(8px)}to{transform:translateY(0)}}@keyframes _slideToBottom_10ko3_1{0%{transform:translateY(0)}to{transform:translateY(8px)}}@keyframes _slideFromLeft_10ko3_1{0%{transform:translate(-8px)}to{transform:translate(0)}}@keyframes _slideToLeft_10ko3_1{0%{transform:translate(0)}to{transform:translate(-8px)}}@keyframes _slideFromRight_10ko3_1{0%{transform:translate(8px)}to{transform:translate(0)}}@keyframes _slideToRight_10ko3_1{0%{transform:translate(0)}to{transform:translate(8px)}}@keyframes _highlightState1_10ko3_1{0%{opacity:0}50%{opacity:1}to{opacity:0}}

package/dist/use-screen-size.hook.d.ts

@@ -0,0 +1,7 @@
+export declare const SCREEN_MEDIA_QUERY: {
+    readonly MAX_MD: `(max-width: ${string})`;
+};
+export declare const useScreenSize: () => {
+    isMdOrSmaller: boolean;
+};
+//# sourceMappingURL=use-screen-size.hook.d.ts.map

package/dist/use-screen-size.hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-screen-size.hook.d.ts","sourceRoot":"","sources":["../src/use-screen-size.hook.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,kBAAkB;;CAErB,CAAC;AAEX,eAAO,MAAM,aAAa;;CA6BzB,CAAC"}

package/dist/use-smooth-scroll.d.ts

@@ -0,0 +1,5 @@
+export declare const useSmoothScroll: (onComplete?: () => void) => {
+    scrollToElement: (element: HTMLElement, duration?: number) => void;
+    cancelScroll: () => void;
+};
+//# sourceMappingURL=use-smooth-scroll.d.ts.map

package/dist/use-smooth-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-smooth-scroll.d.ts","sourceRoot":"","sources":["../src/use-smooth-scroll.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,GAAI,aAAa,MAAM,IAAI;+BAWzC,WAAW,aAAY,MAAM;;CAgD1C,CAAC"}

package/dist/usePopoverTrigger.d.ts

@@ -0,0 +1,5 @@
+export declare function usePopoverTrigger(ref: React.Ref<HTMLButtonElement>): {
+    triggerRef: import('react').RefObject<HTMLButtonElement | null>;
+    context: import('./popover-internal-context').PopoverInternalContextValue | null;
+};
+//# sourceMappingURL=usePopoverTrigger.d.ts.map

package/dist/usePopoverTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverTrigger.d.ts","sourceRoot":"","sources":["../src/usePopoverTrigger.ts"],"names":[],"mappings":"AAMA,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;;;EAoDlE"}

package/dist/usePopoverWalkthrough.d.ts

@@ -0,0 +1,7 @@
+export declare function usePopoverWalkthrough(step: number): {
+    actuallyOpen: boolean;
+    onScrollStart: () => void;
+    onScrollComplete: () => void;
+    handleOpenChange: (open: boolean, consumerOnOpenChange?: (open: boolean) => void) => void;
+};
+//# sourceMappingURL=usePopoverWalkthrough.d.ts.map

package/dist/usePopoverWalkthrough.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopoverWalkthrough.d.ts","sourceRoot":"","sources":["../src/usePopoverWalkthrough.ts"],"names":[],"mappings":"AAIA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM;;;;6BA6DvC,OAAO,yBAAyB,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI;EAmBjE"}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@purpurds/popover",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/popover.cjs.js",
+  "types": "./dist/popover.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/popover.cjs.js",
+      "types": "./dist/popover.d.ts",
+      "default": "./dist/popover.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/popover.tsx",
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "classnames": "~2.5.1",
+    "@purpurds/button": "8.11.0",
+    "@purpurds/icon": "8.11.0",
+    "@purpurds/heading": "8.11.0",
+    "@purpurds/link": "8.11.0",
+    "@purpurds/paragraph": "8.11.0",
+    "@purpurds/tokens": "8.11.0",
+    "@purpurds/common-types": "8.11.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/react": "^10.0.8",
+    "@testing-library/dom": "~10.4.1",
+    "@testing-library/jest-dom": "~6.9.1",
+    "@testing-library/react": "~16.3.0",
+    "@testing-library/user-event": "~14.5.1",
+    "@types/node": "22.17",
+    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.6",
+    "eslint": "9.39.1",
+    "jsdom": "~27.2.0",
+    "lint-staged": "16.2.6",
+    "prettier": "~2.8.8",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "storybook": "^10.0.8",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vitest": "^4.0.10",
+    "vitest-axe": "~0.1.0",
+    "vitest-canvas-mock": "~0.3.3",
+    "@types/jest-axe": "~3.5.9",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}

package/src/popover-back.test.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { PopoverBack } from "./popover-back";
+import { PopoverFlow } from "./popover-flow";
+import { PopoverInternalContext } from "./popover-internal-context";
+
+describe("PopoverBack", () => {
+  it("renders children and handles click", () => {
+    const onClick = vi.fn();
+    render(
+      <PopoverFlow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+        initialStep={2}
+      >
+        <PopoverInternalContext.Provider
+          value={{
+            isOpen: false,
+            walkthroughStep: 0,
+            negative: false,
+          }}
+        >
+          <PopoverBack onClick={onClick}>Back</PopoverBack>
+        </PopoverInternalContext.Provider>
+      </PopoverFlow>
+    );
+    fireEvent.click(screen.getByText("Back"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("should be accessible", async () => {
+    const { container } = render(
+      <PopoverFlow
+        separatorText="of"
+        stepText="Step"
+        backLabel="Back"
+        nextLabel="Next"
+        finishLabel="Finish"
+        initialStep={2}
+      >
+        <PopoverInternalContext.Provider
+          value={{
+            isOpen: false,
+            walkthroughStep: 0,
+            negative: false,
+          }}
+        >
+          <PopoverBack>Back</PopoverBack>
+        </PopoverInternalContext.Provider>
+      </PopoverFlow>
+    );
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/popover-back.tsx

@@ -0,0 +1,40 @@
+import React, { type ReactNode } from "react";
+import { Button } from "@purpurds/button";
+
+import { usePopoverFlow } from "./popover-flow";
+import { usePopoverNegative } from "./popover-internal-context";
+import { useScreenSize } from "./use-screen-size.hook";
+
+export const PopoverBack = ({
+  children,
+  onClick,
+}: {
+  children: ReactNode;
+  onClick?: () => void;
+}) => {
+  const { back } = usePopoverFlow();
+  const { negative: isNegative } = usePopoverNegative();
+  const { isMdOrSmaller } = useScreenSize();
+
+  // Invert negative: if popover is negative (light), buttons should be normal (dark)
+  const negative = isNegative ? false : true;
+
+  const handleClick = () => {
+    onClick?.();
+    back();
+  };
+
+  return (
+    <Button
+      size="sm"
+      variant="secondary"
+      onClick={handleClick}
+      negative={negative}
+      fullWidth={isMdOrSmaller}
+    >
+      {children}
+    </Button>
+  );
+};
+
+PopoverBack.displayName = "PopoverBack";

package/src/popover-button.test.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { axe } from "vitest-axe";
+
+import { PopoverButton } from "./popover-button";
+import { PopoverInternalContext } from "./popover-internal-context";
+
+describe("PopoverButton", () => {
+  it("renders children and handles click", () => {
+    const onClick = vi.fn();
+    render(
+      <RadixPopover.Root>
+        <PopoverInternalContext.Provider
+          value={{
+            isOpen: false,
+            walkthroughStep: 0,
+            negative: false,
+          }}
+        >
+          <PopoverButton onClick={onClick} dismiss={false}>
+            Button
+          </PopoverButton>
+        </PopoverInternalContext.Provider>
+      </RadixPopover.Root>
+    );
+    fireEvent.click(screen.getByText("Button"));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it("should be accessible", async () => {
+    const { container } = render(
+      <RadixPopover.Root>
+        <PopoverInternalContext.Provider
+          value={{
+            isOpen: false,
+            walkthroughStep: 0,
+            negative: false,
+          }}
+        >
+          <PopoverButton dismiss={false}>Button</PopoverButton>
+        </PopoverInternalContext.Provider>
+      </RadixPopover.Root>
+    );
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/popover-button.tsx

@@ -0,0 +1,84 @@
+import React, { type ReactNode } from "react";
+import { Button, type ButtonProps } from "@purpurds/button";
+import * as RadixPopover from "@radix-ui/react-popover";
+
+import { useOptionalPopoverFlow } from "./popover-flow";
+import { usePopoverNegative } from "./popover-internal-context";
+import { useScreenSize } from "./use-screen-size.hook";
+
+export type PopoverButtonProps = RadixPopover.PopoverCloseProps & {
+  /**
+   * Button label or content.
+   */
+  children: ReactNode;
+  /**
+   * Whether to use the child element as the button instead of wrapping in a Button component.
+   * @default false
+   */
+  asChild?: boolean;
+  /**
+   * Click handler called when the button is clicked.
+   */
+  onClick?: () => void;
+  /**
+   * Visual variant of the button.
+   * @default "primary"
+   */
+  variant?: ButtonProps["variant"];
+  /**
+   * Whether clicking the button should dismiss/close the popover.
+   * @default true
+   */
+  dismiss?: boolean;
+  /**
+   * Whether the button should take full width. If not specified, defaults to true on mobile (md or smaller).
+   */
+  fullWidth?: boolean;
+};
+
+export const PopoverButton = ({
+  children,
+  asChild,
+  onClick,
+  variant = "primary",
+  dismiss = true,
+  fullWidth,
+}: PopoverButtonProps) => {
+  const flow = useOptionalPopoverFlow();
+  const { isMdOrSmaller } = useScreenSize();
+  const { negative: isNegative } = usePopoverNegative();
+  // Invert negative: if popover is negative (light), buttons should be normal (dark)
+  const negative = isNegative ? false : true;
+
+  const handleClick = () => {
+    onClick?.();
+    if (dismiss) {
+      flow?.dismiss();
+    }
+  };
+
+  const isFullWidth = fullWidth ?? isMdOrSmaller;
+
+  const content = asChild ? (
+    children
+  ) : (
+    <Button
+      variant={variant}
+      size="sm"
+      fullWidth={isFullWidth}
+      negative={negative}
+      onClick={handleClick}
+    >
+      {children}
+    </Button>
+  );
+
+  // Always wrap with RadixPopover.Close for proper dismiss behavior
+  if (dismiss) {
+    return <RadixPopover.Close asChild>{content}</RadixPopover.Close>;
+  }
+
+  return content;
+};
+
+PopoverButton.displayName = "PopoverButton";