speak-friend-react 0.1.0-alpha.1 → 0.1.0-alpha.2

package/README.md

@@ -58,6 +58,7 @@ await tours.start("welcome");
 | --------------- | -------- | ----------------------------------------------------------- |
 | `labels`        | required | Every string: `counter`, `back`, `next`, `finish`, `close`. |
 | `position`      | `end`    | `start` or `end`.                                           |
+| `theme`         |          | `light` or `dark` forces a theme. Default: follows the OS.  |
 | `headingLevel`  | `2`      | Heading level of the step title.                            |
 | `announce`      | `focus`  | `focus` or `live`.                                          |
 | `closeOnEscape` | `true`   |                                                             |

package/dist/guide.d.ts

@@ -13,6 +13,8 @@ export interface TourGuideProps {
     labels: GuideLabels;
     /** Horizontal side of the dock. Logical, so it mirrors in right-to-left layouts. Default `end`. */
     position?: "start" | "end";
+    /** `light` or `dark` forces a theme. By default the guide follows the operating system. */
+    theme?: "light" | "dark";
     /** Heading level of the step title. Default 2. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     /** `focus` moves focus to the step title; `live` keeps focus and announces the step. Default `focus`. */
@@ -22,4 +24,4 @@ export interface TourGuideProps {
     className?: string;
 }
 /** The docked guide with its highlight ring. Renders only while a tour is running. */
-export declare function TourGuide({ labels, position, headingLevel, announce, closeOnEscape, className, }: TourGuideProps): JSX.Element | null;
+export declare function TourGuide({ labels, position, theme, headingLevel, announce, closeOnEscape, className, }: TourGuideProps): JSX.Element | null;

package/dist/guide.js

@@ -7,7 +7,7 @@ import { findTarget } from "./wait-for-target.js";
 const noSubscription = () => () => undefined;
 const reducedMotion = () => typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 /** The docked guide with its highlight ring. Renders only while a tour is running. */
-export function TourGuide({ labels, position = "end", headingLevel = 2, announce = "focus", closeOnEscape = true, className, }) {
+export function TourGuide({ labels, position = "end", theme, headingLevel = 2, announce = "focus", closeOnEscape = true, className, }) {
     const tours = useTours();
     const run = useRun();
     const state = useTourState();
@@ -74,5 +74,5 @@ export function TourGuide({ labels, position = "end", headingLevel = 2, announce
     const { step, index, total } = state;
     const last = index === total - 1;
     const counter = labels.counter(index + 1, total);
-    return (_jsxs(_Fragment, { children: [_jsx(Ring, { target: step.target }, step.id), createPortal(_jsxs("section", { ref: guideRef, role: "dialog", "aria-labelledby": id, className: className ? `sf-guide ${className}` : "sf-guide", "data-position": position, children: [_jsxs("div", { className: "sf-band", children: [_jsx("span", { className: "sf-count", children: counter }), _jsx("span", { className: "sf-progress", "aria-hidden": "true", children: Array.from({ length: total }, (_, i) => (_jsx("i", { className: i < index ? "sf-done" : i === index ? "sf-current" : undefined }, i))) })] }), _jsxs("div", { className: "sf-body", children: [createElement(`h${headingLevel}`, { id, ref: titleRef, tabIndex: -1, className: "sf-title" }, step.title), _jsx("p", { className: "sf-text", children: step.body }), _jsxs("div", { className: "sf-actions", children: [_jsx("button", { type: "button", className: "sf-button", onClick: () => run(tours.back()), disabled: index === 0, children: labels.back }), _jsx("button", { type: "button", className: "sf-button sf-primary", onClick: () => run(tours.next()), children: last ? labels.finish : labels.next }), _jsx("button", { type: "button", className: "sf-button sf-quiet", onClick: () => run(tours.close()), children: labels.close })] })] }), announce === "live" && (_jsx("div", { className: "sf-visually-hidden", role: "status", children: `${counter}: ${step.title}` }))] }), document.body)] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Ring, { target: step.target, theme: theme }, step.id), createPortal(_jsxs("section", { ref: guideRef, role: "dialog", "aria-labelledby": id, className: className ? `sf-guide ${className}` : "sf-guide", "data-position": position, "data-theme": theme, children: [_jsxs("div", { className: "sf-band", children: [_jsx("span", { className: "sf-count", children: counter }), _jsx("span", { className: "sf-progress", "aria-hidden": "true", children: Array.from({ length: total }, (_, i) => (_jsx("i", { className: i < index ? "sf-done" : i === index ? "sf-current" : undefined }, i))) })] }), _jsxs("div", { className: "sf-body", children: [createElement(`h${headingLevel}`, { id, ref: titleRef, tabIndex: -1, className: "sf-title" }, step.title), _jsx("p", { className: "sf-text", children: step.body }), _jsxs("div", { className: "sf-actions", children: [_jsx("button", { type: "button", className: "sf-button", onClick: () => run(tours.back()), disabled: index === 0, children: labels.back }), _jsx("button", { type: "button", className: "sf-button sf-primary", onClick: () => run(tours.next()), children: last ? labels.finish : labels.next }), _jsx("button", { type: "button", className: "sf-button sf-quiet", onClick: () => run(tours.close()), children: labels.close })] })] }), announce === "live" && (_jsx("div", { className: "sf-visually-hidden", role: "status", children: `${counter}: ${step.title}` }))] }), document.body)] }));
 }

package/dist/ring.d.ts

@@ -1,5 +1,6 @@
 import { type JSX } from "react";
 /** A ring around the element marked `data-tour="<target>"`. It never blocks pointer events. */
-export declare function Ring({ target }: {
+export declare function Ring({ target, theme }: {
     target: string;
+    theme?: "light" | "dark";
 }): JSX.Element | null;

package/dist/ring.js

@@ -37,9 +37,9 @@ function useBox(target) {
     return box;
 }
 /** A ring around the element marked `data-tour="<target>"`. It never blocks pointer events. */
-export function Ring({ target }) {
+export function Ring({ target, theme }) {
     const box = useBox(target);
     if (!box || typeof document === "undefined")
         return null;
-    return createPortal(_jsx("div", { className: "sf-ring", "aria-hidden": "true", style: { top: box.top, left: box.left, width: box.width, height: box.height } }), document.body);
+    return createPortal(_jsx("div", { className: "sf-ring", "data-theme": theme, "aria-hidden": "true", style: { top: box.top, left: box.left, width: box.width, height: box.height } }), document.body);
 }

package/dist/styles.css

@@ -1,29 +1,26 @@
 .sf-guide,
 .sf-ring {
-  --sf-surface: oklch(100% 0 0);
-  --sf-ink: oklch(23% 0.03 285);
-  --sf-line: oklch(62% 0.02 285);
-  --sf-accent: oklch(44% 0.19 290);
-  --sf-accent-ink: oklch(100% 0 0);
+  color-scheme: light dark;
+  --sf-surface: light-dark(oklch(100% 0 0), oklch(23% 0.035 285));
+  --sf-ink: light-dark(oklch(23% 0.03 285), oklch(95% 0.012 95));
+  --sf-line: light-dark(oklch(62% 0.02 285), oklch(62% 0.04 285));
+  --sf-accent: light-dark(oklch(44% 0.19 290), oklch(80% 0.11 300));
+  --sf-accent-ink: light-dark(oklch(100% 0 0), oklch(19% 0.02 285));
   --sf-primary: oklch(87% 0.2 125);
   --sf-primary-ink: oklch(19% 0.02 285);
-  --sf-primary-edge: oklch(53% 0.13 125);
-  --sf-done: oklch(53% 0.13 125);
-  --sf-halo: oklch(100% 0 0);
+  --sf-primary-edge: light-dark(oklch(53% 0.13 125), transparent);
+  --sf-done: light-dark(oklch(53% 0.13 125), oklch(81% 0.16 125));
+  --sf-halo: light-dark(oklch(100% 0 0), oklch(19% 0.02 285));
 }
 
-@media (prefers-color-scheme: dark) {
-  .sf-guide,
-  .sf-ring {
-    --sf-surface: oklch(23% 0.035 285);
-    --sf-ink: oklch(95% 0.012 95);
-    --sf-line: oklch(62% 0.04 285);
-    --sf-accent: oklch(80% 0.11 300);
-    --sf-accent-ink: oklch(19% 0.02 285);
-    --sf-primary-edge: transparent;
-    --sf-done: oklch(81% 0.16 125);
-    --sf-halo: oklch(19% 0.02 285);
-  }
+.sf-guide[data-theme="light"],
+.sf-ring[data-theme="light"] {
+  color-scheme: light;
+}
+
+.sf-guide[data-theme="dark"],
+.sf-ring[data-theme="dark"] {
+  color-scheme: dark;
 }
 
 .sf-visually-hidden {

package/dist/wait-for-target.d.ts

@@ -1,4 +1,4 @@
-/** The visible element marked `data-tour="<target>"`, or null. */
+/** The first visible element marked `data-tour="<target>"`, or null. */
 export declare const findTarget: (target: string) => HTMLElement | null;
 /** Resolves true when the target is on the page, waiting up to `timeout` ms for it to appear. */
 export declare function waitForTarget(target: string, timeout: number): Promise<boolean>;

package/dist/wait-for-target.js

@@ -1,9 +1,9 @@
 const escapeValue = (value) => typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
 const find = (target) => {
-    const el = document.querySelector(`[data-tour="${escapeValue(target)}"]`);
-    return el && el.getClientRects().length > 0 ? el : null;
+    const candidates = document.querySelectorAll(`[data-tour="${escapeValue(target)}"]`);
+    return Array.from(candidates).find((el) => el.getClientRects().length > 0) ?? null;
 };
-/** The visible element marked `data-tour="<target>"`, or null. */
+/** The first visible element marked `data-tour="<target>"`, or null. */
 export const findTarget = (target) => typeof document === "undefined" ? null : find(target);
 /** Resolves true when the target is on the page, waiting up to `timeout` ms for it to appear. */
 export function waitForTarget(target, timeout) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "speak-friend-react",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.2",
   "description": "React bindings for speak-friend: an accessible docked tour guide with a highlight ring.",
   "license": "MIT",
   "repository": {
@@ -33,7 +33,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "speak-friend": "0.1.0-alpha.1"
+    "speak-friend": "0.1.0-alpha.2"
   },
   "devDependencies": {
     "@testing-library/react": "16.3.0",
@@ -52,13 +52,13 @@
     "react"
   ],
   "publishConfig": {
-    "access": "public",
-    "tag": "next"
+    "access": "public"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "smoke": "node scripts/smoke.mjs"
+    "smoke": "node scripts/smoke.mjs",
+    "test:coverage": "vitest run --coverage"
   }
 }