@bearmenu/ui 0.8.15 → 0.8.17

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-HDR7V6IZ.js';
+import { toggleVariants } from '../chunk-TIQNM4XD.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -29,6 +29,9 @@ function ToggleGroup(_a) {
       "data-size": size,
       className: cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        // The segmented control's capsule: muted ground, the on cell a raised
+        // card inside it (see `toggleVariants.segmented`). 44px tall.
+        "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
         className
       )
     }, props), {
@@ -49,18 +52,20 @@ function ToggleGroupItem(_a) {
     "size"
   ]);
   const context = React.useContext(ToggleGroupContext);
+  const resolved = context.variant || variant;
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     __spreadProps(__spreadValues({
       "data-slot": "toggle-group-item",
-      "data-variant": context.variant || variant,
+      "data-variant": resolved,
       "data-size": context.size || size,
       className: cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: resolved,
           size: context.size || size
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )
     }, props), {

package/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-HDR7V6IZ.js';
+export { Toggle, toggleVariants } from '../chunk-TIQNM4XD.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-T6S2ZBV6.js';
-import '../chunk-S33K4RC5.js';
+import { MenuItem } from '../chunk-SDWN6L4O.js';
+import '../chunk-BKKQ7GCZ.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-P43B3ONY.js';
+import '../chunk-5XREWOBB.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/dist/hooks/use-haptic.d.ts

@@ -4,6 +4,14 @@ interface HapticAPI {
     platform: "ios" | "android" | "desktop" | "unknown";
     trigger: (style: HapticStyle) => void;
 }
+/**
+ * iOS Safari, including iPadOS masquerading as a Mac. Haptics there come from
+ * `HapticSwitch`, not from `trigger`: WebKit has no Vibration API, and since
+ * iOS 26.5 the only haptic it plays is a native switch flipping under the
+ * user's own finger — a programmatic click on the switch or its label no
+ * longer counts (WebKit #65327).
+ */
+declare function isIos(): boolean;
 declare const useHaptic: () => HapticAPI;
 declare global {
     interface Window {
@@ -19,4 +27,4 @@ declare global {
     }
 }
 
-export { useHaptic };
+export { isIos, useHaptic };

package/dist/hooks/use-haptic.js

@@ -1,2 +1,2 @@
-export { useHaptic } from '../chunk-V4E333QS.js';
+export { isIos, useHaptic } from '../chunk-5YNIQ2BL.js';
 import '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Badge } from "./badge";
+import { Button } from "./button";
 
 const meta = {
   title: "Components/Badge",
@@ -8,7 +9,18 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["default", "secondary", "destructive", "outline", "overlay", "glass", "success", "warning"],
+      options: [
+        "default",
+        "secondary",
+        "destructive",
+        "outline",
+        "overlay",
+        "glass",
+        "success",
+        "warning",
+        "brown",
+        "onPrimary",
+      ],
     },
   },
 } satisfies Meta<typeof Badge>;
@@ -44,6 +56,18 @@ export const Warning: Story = {
   args: { children: "Warning", variant: "warning" },
 };
 
+/** The count inside a filled button: a translucent step on the primary fill. */
+export const OnPrimary: Story = {
+  render: () => (
+    <Button size="pill">
+      Filters
+      <Badge as="span" variant="onPrimary">
+        3
+      </Badge>
+    </Button>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
@@ -55,6 +79,12 @@ export const AllVariants: Story = {
       <Badge variant="glass">Glass</Badge>
       <Badge variant="success">Success</Badge>
       <Badge variant="warning">Warning</Badge>
+      <Badge variant="brown">Brown</Badge>
+      <span className="rounded-lg bg-primary p-1.5">
+        <Badge as="span" variant="onPrimary">
+          On primary
+        </Badge>
+      </span>
     </div>
   ),
 };

package/src/components/badge.tsx

@@ -21,6 +21,8 @@ const badgeVariants = cva(
         warning:
           "border-transparent bg-warning text-warning-foreground",
         brown: "border-transparent bg-brown text-brown-foreground",
+        /** A count sitting INSIDE a primary-filled control: its own ink, lifted a notch. */
+        onPrimary: "border-transparent bg-primary-foreground/20 text-primary-foreground",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).

package/src/components/button.stories.tsx

@@ -18,9 +18,9 @@ const meta = {
         "link",
         "glass",
         "brown",
-        "antagonist",
         "overlay",
         "ink",
+        "warning",
       ],
     },
     size: {
@@ -86,8 +86,9 @@ export const Brown: Story = {
   args: { children: "Brown", variant: "brown" },
 };
 
-export const Antagonist: Story = {
-  args: { children: "Antagonist", variant: "antagonist" },
+/** A control that is ON in a mode the reader should notice — a guide while it runs. */
+export const Warning: Story = {
+  args: { children: "Guide · 2 of 6", variant: "warning", size: "pill" },
 };
 
 export const Small: Story = {
@@ -121,7 +122,7 @@ export const AllVariants: Story = {
       <Button variant="link">Link</Button>
       <Button variant="glass">Glass</Button>
       <Button variant="brown">Brown</Button>
-      <Button variant="antagonist">Antagonist</Button>
+      <Button variant="warning">Warning</Button>
     </div>
   ),
 };

package/src/components/button.test.tsx

@@ -22,7 +22,17 @@ describe("buttonVariants", () => {
     expect(buttonVariants({ variant: "link" })).toContain("text-primary");
     expect(buttonVariants({ variant: "glass" })).toContain("glass");
     expect(buttonVariants({ variant: "brown" })).toContain("bg-brown");
-    expect(buttonVariants({ variant: "antagonist" })).toContain("bg-primary-foreground");
+  });
+
+  // The quiet variants step the surface on hover; none of them inverts to
+  // the brand fill, which would read as a second primary on every row.
+  it("outline, secondary and ghost tint on hover and never fill with the accent", () => {
+    for (const variant of ["outline", "secondary", "ghost"] as const) {
+      const classes = buttonVariants({ variant });
+      expect(classes).toContain("hover:bg-accent-subtle");
+      expect(classes).not.toContain("hover:bg-accent ");
+      expect(classes).not.toContain("hover:text-accent-foreground");
+    }
   });
 
   it("maps size prop to correct classes", () => {

package/src/components/button.tsx

@@ -4,6 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
+import { HapticSwitch, isHapticSwitchTarget } from "./haptic-switch";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
@@ -14,11 +15,21 @@ const buttonVariants = cva(
           "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/85 hover:shadow",
+        /**
+         * The quiet variants tint on hover, they do not invert. `--accent`
+         * here is the brand brown, so the shadcn default (`hover:bg-accent`,
+         * written for an accent that is a pale grey) turned every outline,
+         * ghost and secondary button into a filled brown block the moment the
+         * pointer touched it — a second primary on every row. The standard
+         * (shadcn on its own tokens, Radix, Polaris, Material) is a step of the
+         * surface: the fill darkens a notch, the border firms up, the type
+         * stays put. `--accent-subtle` is that step; `active:` goes one more.
+         */
         outline:
-          "border border-border bg-background hover:bg-accent hover:text-accent-foreground hover:border-accent",
+          "border border-border bg-background hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground shadow-sm border border-border hover:bg-accent-subtle hover:border-accent/40 active:bg-muted",
+        ghost: "hover:bg-accent-subtle active:bg-muted",
         link: "text-primary underline-offset-4 hover:underline",
         glass: "glass glass-hover text-foreground",
         /**
@@ -48,8 +59,9 @@ const buttonVariants = cva(
         ink: "border border-white/20 bg-white/[0.16] text-white hover:bg-white/25 focus-visible:ring-white/70 focus-visible:ring-offset-0",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
-        antagonist:
-          "bg-primary-foreground text-primary shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
+        /** An ON state that is not the primary — a toggled mode, a guide running. */
+        warning:
+          "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 hover:shadow",
       },
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
@@ -82,6 +94,10 @@ export interface ButtonProps
   /**
    * Off by default. Haptics are for actions that change state — a save, a
    * toggle, a destructive confirm — not for every button, so each site opts in.
+   *
+   * Android vibrates through `useHaptic`; iOS ticks through a `HapticSwitch`
+   * laid over the button, which needs a real element, so `asChild` gets the
+   * vibration only.
    */
   haptic?: boolean;
   hapticStyle?: "light" | "medium" | "heavy";
@@ -100,6 +116,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       hapticStyle = "light",
       isLoading = false,
       disabled,
+      type,
       onClick,
       children,
       ...props
@@ -109,6 +126,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     const { trigger } = useHaptic();
     const [isMounted, setIsMounted] = React.useState(false);
+    const withSwitch = haptic && !asChild;
 
     React.useEffect(() => {
       setIsMounted(true);
@@ -119,13 +137,25 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         trigger(hapticStyle);
       }
       onClick?.(event);
+      // On iOS the tap lands on the overlay switch, so the button's own
+      // implicit submission never runs; forward it once the handler has had
+      // its say.
+      if (
+        withSwitch &&
+        type === "submit" &&
+        !event.defaultPrevented &&
+        isHapticSwitchTarget(event.target)
+      ) {
+        event.currentTarget.form?.requestSubmit(event.currentTarget);
+      }
     };
 
     return (
       <Comp
         data-slot="button"
-        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
+        className={cn(buttonVariants({ variant, size, fullWidth, className }), withSwitch && "relative")}
         ref={ref}
+        type={type}
         onClick={handleClick}
         disabled={disabled || isLoading}
         aria-busy={isLoading || undefined}
@@ -136,6 +166,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             <Loader2 className="animate-spin" aria-hidden="true" />
             {!asChild && children}
           </>
+        ) : withSwitch ? (
+          <>
+            {children}
+            <HapticSwitch disabled={disabled} />
+          </>
         ) : (
           children
         )}

package/src/components/coach-marks.stories.tsx

@@ -0,0 +1,79 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { CoachMarks, type CoachMarkStop } from "./coach-marks";
+import { Button } from "./button";
+
+const meta: Meta<typeof CoachMarks> = {
+  title: "Overlays/CoachMarks",
+  component: CoachMarks,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "A guided tour drawn over the real page: the page dims, the current step's target is cut out in a spotlight with its step number on the corner, one callout says what the target is. Targets are `data-coach-mark` attributes on the page's own elements.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CoachMarks>;
+
+const STOPS: CoachMarkStop[] = [
+  {
+    id: "search",
+    title: "One place to search",
+    body: "Type and tick in the same sheet. Nothing filters from the page itself, so there is only ever one thing open.",
+  },
+  {
+    id: "receipt",
+    title: "Your search, as a receipt",
+    body: "Whatever is applied prints here in the order it was added. Each chip's X takes it off again.",
+  },
+  {
+    id: "view",
+    title: "Cards, or rows",
+    body: "The same menu items either way: rows fit three times as many.",
+  },
+];
+
+function Demo() {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="min-h-[720px] bg-background p-8 text-foreground">
+      <div className="flex items-center gap-3">
+        <Button data-coach-mark="search">Search and filter</Button>
+        <Button variant="outline" data-coach-mark="view">
+          Rows
+        </Button>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          Guide
+        </Button>
+      </div>
+      <div data-coach-mark="receipt" className="mt-6 inline-flex gap-2 rounded-full border border-border px-3 py-2 text-sm">
+        <span>20–40 lei ×</span>
+        <span>Centru ×</span>
+      </div>
+      <p className="mt-10 max-w-[60ch] text-sm text-muted-foreground">
+        The page beneath the tour. Nothing here re-renders; the overlay measures the three targets
+        and draws over them.
+      </p>
+      <CoachMarks
+        open={open}
+        stops={STOPS}
+        onClose={() => setOpen(false)}
+        labels={{
+          progress: (n, total) => `Step ${n} of ${total}`,
+          back: "Back",
+          next: "Next",
+          done: "Done",
+          skip: "Skip the tour",
+        }}
+      />
+    </div>
+  );
+}
+
+export const Default: Story = { render: () => <Demo /> };

package/src/components/coach-marks.test.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { CoachMarks, type CoachMarkStop } from "./coach-marks";
+
+const STOPS: CoachMarkStop[] = [
+  { id: "a", title: "First", body: "The first thing." },
+  { id: "b", title: "Second", body: "The second thing." },
+  { id: "c", title: "Third", body: "The third thing." },
+];
+
+const labels = {
+  progress: (n: number, total: number) => `Step ${n} of ${total}`,
+  back: "Back",
+  next: "Next",
+  done: "Done",
+  skip: "Skip",
+};
+
+function Page({
+  onClose,
+  onProgress,
+  open = true,
+  targets = ["a", "b", "c"],
+  stops = STOPS,
+}: {
+  onClose: () => void;
+  onProgress?: (step: number, total: number, stop: CoachMarkStop) => void;
+  open?: boolean;
+  targets?: string[];
+  stops?: CoachMarkStop[];
+}) {
+  return (
+    <>
+      {targets.map((id) => (
+        <button key={id} type="button" data-coach-mark={id}>
+          {id}
+        </button>
+      ))}
+      <CoachMarks
+        open={open}
+        stops={stops}
+        onClose={onClose}
+        onProgress={onProgress}
+        labels={labels}
+      />
+    </>
+  );
+}
+
+/** The numbered discs on the page, in order — only the current stop wears one. */
+function pins(): string[] {
+  return Array.from(document.querySelectorAll<HTMLElement>('[role="dialog"] > :is(span, button)'))
+    .map((pin) => pin.textContent?.trim() ?? "")
+    .filter((text) => /^\d+$/.test(text));
+}
+
+// jsdom has no layout: every rect is zero, which is enough to render. A
+// target has boxes when it is in the document, none when it is not.
+Element.prototype.scrollIntoView = vi.fn();
+Element.prototype.getClientRects = function () {
+  return (this.isConnected ? [{}] : []) as unknown as DOMRectList;
+};
+
+describe("CoachMarks", () => {
+  it("opens on the first stop, numbering only the stop the reader is at", () => {
+    render(<Page onClose={vi.fn()} />);
+    expect(screen.getByRole("dialog", { name: "First" })).toBeInTheDocument();
+    expect(screen.getByText("Step 1 of 3")).toBeInTheDocument();
+    expect(pins()).toEqual(["1"]);
+    fireEvent.click(screen.getByText("Next"));
+    expect(pins()).toEqual(["2"]);
+  });
+
+  it("renders above the page, not inside the consumer's wrapper", () => {
+    render(
+      <div data-testid="wrapper">
+        <Page onClose={vi.fn()} />
+      </div>
+    );
+    const dialog = screen.getByRole("dialog", { name: "First" });
+    expect(screen.getByTestId("wrapper")).not.toContainElement(dialog);
+    expect(dialog.parentElement).toBe(document.body);
+  });
+
+  it("rebuilds the tour when the itinerary changes, not when only its words do", () => {
+    const { rerender } = render(<Page onClose={vi.fn()} />);
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    rerender(
+      <Page onClose={vi.fn()} stops={STOPS.map((stop) => ({ ...stop, title: `${stop.title}!` }))} />
+    );
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    rerender(<Page onClose={vi.fn()} stops={STOPS.slice(0, 2)} />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+  });
+
+  it("Next and Back walk the stops; the last stop's forward action closes", () => {
+    const onClose = vi.fn();
+    const onProgress = vi.fn();
+    render(<Page onClose={onClose} onProgress={onProgress} />);
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 2 of 3")).toBeInTheDocument();
+    expect(onProgress).toHaveBeenLastCalledWith(2, 3, STOPS[1]);
+    fireEvent.click(screen.getByText("Back"));
+    expect(screen.getByText("Step 1 of 3")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Next"));
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByText("Step 3 of 3")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Done"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("counts only the stops whose target is on the page, so every step is reachable", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} targets={["a", "c"]} />);
+    expect(screen.getByText("Step 1 of 2")).toBeInTheDocument();
+    fireEvent.click(screen.getByText("Next"));
+    expect(screen.getByRole("dialog", { name: "Third" })).toBeInTheDocument();
+    expect(screen.getByText("Step 2 of 2")).toBeInTheDocument();
+    expect(screen.getByText("Done")).toBeInTheDocument();
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("Skip, Escape and the dimmed page all close", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} />);
+    fireEvent.click(screen.getByText("Skip"));
+    fireEvent.keyDown(window, { key: "Escape" });
+    fireEvent.click(screen.getAllByRole("button", { name: "Skip" })[0]);
+    expect(onClose).toHaveBeenCalledTimes(3);
+  });
+
+  it("closes at once when no stop has a target, and renders nothing while closed", () => {
+    const onClose = vi.fn();
+    render(<Page onClose={onClose} targets={[]} />);
+    expect(onClose).toHaveBeenCalled();
+    render(<Page onClose={vi.fn()} open={false} />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});