@bearmenu/ui 0.8.3 → 0.8.4

package/dist/components/motion-icon-set.js

@@ -0,0 +1,139 @@
+import { beats, MotionIcon, returnTransition } from '../chunk-2WDJR6K7.js';
+import '../chunk-FEK5XGZW.js';
+import { __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var HOUSE_TIMES = [0, 0.16, 0.44, 0.72, 1];
+var houseRoof = {
+  rest: { y: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, scaleY: 1, transition: returnTransition },
+  play: {
+    // Dips into the walls, launches 9 units clear and stretches, falls, lands
+    // 0.9 low onto walls that compress under it, settles.
+    y: [0, 1.5, -9, 0.9, 0],
+    scaleY: [1, 0.92, 1.06, 0.86, 1],
+    transition: beats(HOUSE_TIMES)
+  }
+};
+var houseWalls = {
+  rest: { scaleY: 1, transition: returnTransition },
+  active: { scaleY: 1, transition: returnTransition },
+  play: { scaleY: [1, 1, 1, 0.9, 1], transition: beats(HOUSE_TIMES) }
+};
+function MotionHouse(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: houseRoof,
+        style: { originX: "12px", originY: "10px" },
+        d: "M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10"
+      }
+    ),
+    /* @__PURE__ */ jsxs(motion.g, { variants: houseWalls, style: { originX: "12px", originY: "21px" }, children: [
+      /* @__PURE__ */ jsx("path", { d: "M21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V10" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" })
+    ] })
+  ] }));
+}
+var UTENSILS_TIMES = [0, 0.18, 0.72, 1];
+var SEPARATION = 5;
+var fork = {
+  rest: { rotate: 0, x: 0, transition: returnTransition },
+  active: { rotate: -44, x: -SEPARATION, transition: returnTransition },
+  play: {
+    rotate: [0, 6, -50, -44],
+    x: [0, 0.8, -6, -SEPARATION],
+    transition: beats(UTENSILS_TIMES, 0.6)
+  }
+};
+var knife = {
+  rest: { rotate: 0, x: 0, transition: returnTransition },
+  active: { rotate: 45, x: SEPARATION, transition: returnTransition },
+  play: {
+    rotate: [0, -6, 51, 45],
+    x: [0, -0.8, 6, SEPARATION],
+    transition: beats(UTENSILS_TIMES, 0.6)
+  }
+};
+var CROSSING = { originX: "12px", originY: "12px" };
+function MotionUtensils(props) {
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx(
+      motion.path,
+      {
+        variants: knife,
+        style: CROSSING,
+        d: "M15 15 3.3 3.3a4.2 4.2 0 0 0 0 6l7.3 7.3c.7.7 2 .7 2.8 0L15 15Zm0 0 7 7"
+      }
+    ),
+    /* @__PURE__ */ jsxs(motion.g, { variants: fork, style: CROSSING, children: [
+      /* @__PURE__ */ jsx("path", { d: "m16 2-2.3 2.3a3 3 0 0 0 0 4.2l1.8 1.8a3 3 0 0 0 4.2 0L22 8" }),
+      /* @__PURE__ */ jsx("path", { d: "m2.1 21.8 6.4-6.3" }),
+      /* @__PURE__ */ jsx("path", { d: "m19 5-7 7" })
+    ] })
+  ] }));
+}
+var PIN_TIMES = [0, 0.16, 0.44, 0.72, 1];
+var pinBody = {
+  rest: { y: 0, scaleY: 1, transition: returnTransition },
+  active: { y: 0, scaleY: 1, transition: returnTransition },
+  play: {
+    y: [0, 1.2, -9, 0, 0],
+    scaleY: [1, 0.86, 1.08, 0.84, 1],
+    transition: beats(PIN_TIMES)
+  }
+};
+var pinDot = {
+  rest: { fillOpacity: 0, scale: 1, transition: { duration: 0.18 } },
+  active: { fillOpacity: 1, scale: 1, transition: { duration: 0.18 } },
+  play: {
+    fillOpacity: [0, 0, 0, 1, 1],
+    scale: [1, 1, 1, 1.35, 1],
+    transition: beats(PIN_TIMES)
+  }
+};
+function MotionMapPin(props) {
+  return /* @__PURE__ */ jsx(MotionIcon, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsxs(motion.g, { variants: pinBody, style: { originX: "12px", originY: "22px" }, children: [
+    /* @__PURE__ */ jsx("path", { d: "M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" }),
+    /* @__PURE__ */ jsx(
+      motion.circle,
+      {
+        variants: pinDot,
+        style: { originX: "12px", originY: "10px" },
+        fill: "currentColor",
+        fillOpacity: 0,
+        cx: "12",
+        cy: "10",
+        r: "3"
+      }
+    )
+  ] }) }));
+}
+var ROWS = [14, 18, 22, 26, 30, 34];
+var COLS = [8, 12, 16];
+var reel = {
+  rest: { y: 0, transition: returnTransition },
+  active: { y: 0, transition: returnTransition },
+  play: {
+    // Exactly four rows (16 units, ~15px), so arriving rows land where the
+    // departing ones began and the end pose is identical to the rest pose.
+    y: [0, -4, -8, -12, -17, -16],
+    transition: beats([0, 0.18, 0.34, 0.5, 0.85, 1], 0.65)
+  }
+};
+function MotionCalendar(props) {
+  const clipId = `cal-body-${React.useId().replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsxs(MotionIcon, __spreadProps(__spreadValues({}, props), { children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx("rect", { x: "3.5", y: "10.5", width: "17", height: "11", rx: "1.5" }) }) }),
+    /* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
+    /* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
+    /* @__PURE__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: /* @__PURE__ */ jsx(motion.g, { variants: reel, children: ROWS.map((y) => COLS.map((x) => /* @__PURE__ */ jsx("path", { d: `M${x} ${y}h.01` }, `${x}-${y}`))) }) })
+  ] }));
+}
+
+export { MotionCalendar, MotionHouse, MotionMapPin, MotionUtensils };

package/dist/components/motion-icon.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as framer_motion from 'framer-motion';
+import { Transition, Variants } from 'framer-motion';
+import * as React from 'react';
+
+type MotionIconProps = {
+    /** The held state. Drives `active` vs `rest`, and the stroke weight. */
+    active?: boolean;
+    /**
+     * Bump on pointer down to perform the gesture. Changing this value replays
+     * `play` even when `active` has not changed, which is what makes the icon
+     * respond to the touch rather than to its consequence.
+     */
+    replayToken?: number;
+    className?: string;
+};
+type MotionIconVariant = "rest" | "active" | "play";
+/**
+ * A gesture is a performance with beats, so it is a tween with explicit
+ * `times`. A spring interpolates two keyframes and puts its overshoot at the
+ * end, which cannot express anticipation.
+ */
+declare function beats(times: number[], duration?: number): Transition;
+/** Leaving is not a performance — it returns the glyph, firmly and fast. */
+declare const returnTransition: Transition;
+type PoseValues = Record<string, number>;
+/**
+ * Builds the three variants for a moving part.
+ * `play` values are keyframe arrays; `rest`/`active` are the two held poses.
+ */
+declare function poses(rest: PoseValues, active: PoseValues, play: Record<string, number[]>, transition: Transition): Variants;
+/**
+ * Mount poses without playing; pointer down plays; arriving plays unless the
+ * pointer already started it; leaving returns.
+ *
+ * Both effects compare against a ref rather than trusting the dependency array,
+ * so they fire once per actual change and not once per render.
+ */
+declare function useIconGesture(active: boolean, replayToken: number): framer_motion.LegacyAnimationControls;
+declare function MotionIcon({ active, replayToken, className, children, }: MotionIconProps & {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { MotionIcon, type MotionIconProps, type MotionIconVariant, beats, poses, returnTransition, useIconGesture };

package/dist/components/motion-icon.js

@@ -0,0 +1,3 @@
+export { MotionIcon, beats, poses, returnTransition, useIconGesture } from '../chunk-2WDJR6K7.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/lib/icon-registry.d.ts

@@ -0,0 +1,58 @@
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * The purpose → glyph registry.
+ *
+ * One place recording which glyph means what. Before this existed, ~10 ad-hoc
+ * glyph maps were scattered across the app and the same purpose ended up drawn
+ * two different ways: back as both an arrow and a chevron, "open filters" as
+ * both a funnel and sliders (one surface used both, chosen by which view you
+ * were in), clear and close sharing a bare X.
+ *
+ * Only GENERIC action vocabulary lives here. Product taxonomy — cuisine
+ * shortcuts, facet dimensions, digest categories — stays in the consuming app.
+ *
+ * ## The rules this encodes
+ *
+ * 1. **Arrow leaves, chevron stays.** `ArrowRight` means "you are going to a new
+ *    destination" (see-all links, banner CTAs). `ChevronRight` means "reveal
+ *    more, in place" and is scoped to exactly two jobs: carousel paging and
+ *    row-contained drill-in. Collapsing these is what produced a glyph with
+ *    four meanings.
+ * 2. **Sliders, not a funnel.** A funnel reads as "narrow a list" and collides
+ *    with search and sort iconography at 24px; three sliders read
+ *    unambiguously as "adjust parameters" and carry a badge count cleanly.
+ * 3. **Containment separates clear from close.** A bare `X` leaves a layer. A
+ *    contained `XCircle` resets a value in place without leaving. In a dense
+ *    filter row, bare Xs beside each other cannot say which layer they close.
+ * 4. **Tappable has a container or a colour state; information is muted and
+ *    bare.** This is what disambiguates the overloaded glyphs (`MapPin`,
+ *    `Star`) rather than picking different glyphs for each sense. An
+ *    interactive instance sits in a chip or button and takes an active colour;
+ *    a decorative one is `text-muted-foreground`, `aria-hidden`, outside any
+ *    button, with no hover or active transition.
+ * 5. **Loved and want-to-try are two actions, not one.** `Heart` is
+ *    retrospective ("I have had this and I love it"), `Bookmark` is prospective
+ *    ("I want to try this"). They feed different lists and are mutually
+ *    exclusive per item.
+ */
+
+type IconPurpose = "back" | "seeAll" | "drillIn" | "carouselPrev" | "carouselNext" | "directions" | "externalLink" | "close" | "clear" | "expand" | "filter" | "sort" | "search" | "share" | "favorite" | "wantToTry" | "confirm" | "add" | "remove" | "refresh" | "call" | "report" | "info";
+declare const iconFor: Record<IconPurpose, LucideIcon>;
+/**
+ * Purposes whose glyph must rotate to show state, and by how much.
+ * `expand` is the disclosure chevron: pointing down at rest, up when open.
+ */
+declare const iconRotation: Partial<Record<IconPurpose, number>>;
+/**
+ * Retired glyphs and what replaced them. Kept so a reviewer can tell a
+ * deliberate choice from a regression, and so lint/codemods have a source.
+ */
+declare const retiredIcons: {
+    readonly Filter: "filter → SlidersHorizontal";
+    readonly ChevronRightAsSeeAll: "seeAll → ArrowRight";
+    readonly ChevronLeftAsBack: "back → ArrowLeft";
+    readonly XAsClear: "clear → XCircle";
+};
+
+export { type IconPurpose, iconFor, iconRotation, retiredIcons };

package/dist/lib/icon-registry.js

@@ -0,0 +1,39 @@
+import '../chunk-3GWWZKX7.js';
+import { Info, Flag, Phone, RefreshCw, Trash2, Plus, Check, Bookmark, Heart, Share2, Search, ArrowUpDown, SlidersHorizontal, ChevronDown, XCircle, X, ExternalLink, Navigation, ChevronRight, ChevronLeft, ArrowRight, ArrowLeft } from 'lucide-react';
+
+var iconFor = {
+  back: ArrowLeft,
+  seeAll: ArrowRight,
+  drillIn: ChevronRight,
+  carouselPrev: ChevronLeft,
+  carouselNext: ChevronRight,
+  directions: Navigation,
+  externalLink: ExternalLink,
+  close: X,
+  clear: XCircle,
+  expand: ChevronDown,
+  filter: SlidersHorizontal,
+  sort: ArrowUpDown,
+  search: Search,
+  share: Share2,
+  favorite: Heart,
+  wantToTry: Bookmark,
+  confirm: Check,
+  add: Plus,
+  remove: Trash2,
+  refresh: RefreshCw,
+  call: Phone,
+  report: Flag,
+  info: Info
+};
+var iconRotation = {
+  expand: 180
+};
+var retiredIcons = {
+  Filter: "filter \u2192 SlidersHorizontal",
+  ChevronRightAsSeeAll: "seeAll \u2192 ArrowRight",
+  ChevronLeftAsBack: "back \u2192 ArrowLeft",
+  XAsClear: "clear \u2192 XCircle"
+};
+
+export { iconFor, iconRotation, retiredIcons };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -102,6 +102,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@storybook/addon-a11y": "^10.3.5",
     "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react": "^10.3.5",
     "@storybook/react-vite": "^10.3.5",
     "@tailwindcss/postcss": "^4.2.4",
     "@tailwindcss/vite": "^4.2.4",

package/src/components/accordion.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof Accordion>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Accordion>;
 
 export const Default: Story = {
   render: () => (

package/src/components/combobox.stories.tsx

@@ -9,7 +9,7 @@ const meta = {
 } satisfies Meta<typeof Combobox>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Combobox>;
 
 const frameworks: ComboboxOption[] = [
   { value: "next", label: "Next.js", description: "React framework" },

package/src/components/currency-input.stories.tsx

@@ -3,14 +3,14 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { CurrencyInput } from "./currency-input";
 import { Label } from "./label";
 
-const meta = {
+const meta: Meta<typeof CurrencyInput> = {
   title: "Components/CurrencyInput",
   component: CurrencyInput,
   tags: ["autodocs"],
-} satisfies Meta<typeof CurrencyInput>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof CurrencyInput>;
 
 function CurrencyInputDemo() {
   const [value, setValue] = useState<number | null>(null);

package/src/components/empty-state.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { EmptyState, SearchEmptyState, ErrorEmptyState } from "./empty-state";
 
-const meta = {
+const meta: Meta<typeof EmptyState> = {
   title: "Components/EmptyState",
   component: EmptyState,
   tags: ["autodocs"],
@@ -15,10 +15,10 @@ const meta = {
       options: ["sm", "md", "lg"],
     },
   },
-} satisfies Meta<typeof EmptyState>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof EmptyState>;
 
 export const Default: Story = {
   args: {

package/src/components/form.stories.tsx

@@ -20,7 +20,7 @@ const meta = {
 } satisfies Meta<typeof Form>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Form>;
 
 function FormDemo() {
   const form = useForm({

package/src/components/icon.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+/**
+ * Icon — the static iconography contract.
+ *
+ *   - `strokeWidth` 1.75, locking the global stroke to a refined-but-robust weight
+ *   - Three canonical sizes:
+ *       "xs" → 12px  inline with small text, filter pills, badge labels
+ *       "sm" → 16px  default: buttons, nav rows, card metadata
+ *       "md" → 20px  nav tabs, dialog headers
+ *
+ * Usage:
+ *   import { Icon } from "@bearmenu/ui/components/icon";
+ *   <Icon icon={Star} size="sm" className="text-primary fill-primary" aria-hidden />
+ *
+ * Raw lucide imports remain acceptable where all three of strokeWidth, sizing
+ * and colouring are intentionally non-standard (an illustrated 48px empty
+ * state, a map marker). In those cases the caller sets `strokeWidth` itself.
+ *
+ * For icons that perform a gesture on interaction, see `motion-icon.tsx`.
+ * Which glyph means what is recorded in `lib/icon-registry.ts`.
+ */
+
+import { type LucideIcon, type LucideProps } from "lucide-react";
+
+import { cn } from "../lib/utils";
+
+const SIZE_CLASSES = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+} as const;
+
+export type IconSize = keyof typeof SIZE_CLASSES;
+
+export type IconProps = Omit<LucideProps, "size"> & {
+  /** The lucide icon component to render. */
+  icon: LucideIcon;
+  /** Canonical size stop. "xs" = 12px | "sm" = 16px (default) | "md" = 20px */
+  size?: IconSize;
+};
+
+export function Icon({
+  icon: LucideIconComponent,
+  size = "sm",
+  strokeWidth = 1.75,
+  className,
+  ...props
+}: IconProps) {
+  return (
+    <LucideIconComponent
+      strokeWidth={strokeWidth}
+      className={cn(SIZE_CLASSES[size], className)}
+      {...props}
+    />
+  );
+}

package/src/components/input-otp.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof InputOTP>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof InputOTP>;
 
 export const Default: Story = {
   render: () => (

package/src/components/markdown-renderer.stories.tsx

@@ -8,7 +8,7 @@ const meta = {
 } satisfies Meta<typeof MarkdownRenderer>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof MarkdownRenderer>;
 
 export const Default: Story = {
   render: () => (

package/src/components/motion-icon-controls.test.tsx

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import * as React from "react";
+
+/**
+ * First-paint correctness.
+ *
+ * `MotionIcon` poses itself with `controls.set()` inside an effect, which runs
+ * AFTER the first paint. Any sub-part whose rest pose is hidden therefore needs
+ * a matching static SVG attribute, or it paints one frame fully visible — a
+ * flash of a drawn check on every unselected row of a selection list, or of a
+ * moon behind a sun.
+ *
+ * The mock renders variants inertly, so what these assertions see is exactly
+ * what the browser paints before framer takes over.
+ */
+vi.mock("framer-motion", () => {
+  const passthrough =
+    (tag: string) =>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ({ variants: _v, style: _s, ...rest }: any) =>
+      React.createElement(tag, rest);
+  return {
+    useAnimationControls: () => ({ set: () => {}, start: () => Promise.resolve() }),
+    motion: {
+      svg: passthrough("svg"),
+      g: passthrough("g"),
+      path: passthrough("path"),
+      circle: passthrough("circle"),
+      rect: passthrough("rect"),
+    },
+  };
+});
+
+import {
+  MotionCheck,
+  MotionEye,
+  MotionCopy,
+  MotionTheme,
+  MotionSearch,
+  MotionPlayPause,
+  MotionHeart,
+  MotionBookmark,
+  MotionStar,
+} from "./motion-icon-controls";
+
+/** Every element that should be invisible until the icon becomes active. */
+const HIDDEN_AT_REST: Array<[string, React.ComponentType<Record<string, never>>, number]> = [
+  ["MotionCheck", MotionCheck, 1],
+  ["MotionEye", MotionEye, 1],
+  ["MotionCopy", MotionCopy, 1],
+  ["MotionTheme", MotionTheme, 1],
+  ["MotionSearch", MotionSearch, 1],
+  ["MotionPlayPause", MotionPlayPause, 2],
+];
+
+describe("first paint, before the pose effect runs", () => {
+  it.each(HIDDEN_AT_REST)(
+    "%s hides its active-only parts with a static attribute",
+    (_name, Icon, expectedHidden) => {
+      const { container } = render(<Icon />);
+      const hidden = container.querySelectorAll('[opacity="0"]');
+      expect(hidden.length).toBe(expectedHidden);
+    }
+  );
+
+  it.each([
+    ["MotionHeart", MotionHeart],
+    ["MotionBookmark", MotionBookmark],
+    ["MotionStar", MotionStar],
+  ] as Array<[string, React.ComponentType<Record<string, never>>]>)(
+    "%s starts unfilled rather than solid",
+    (_name, Icon) => {
+      const { container } = render(<Icon />);
+      expect(container.querySelector('[fill-opacity="0"]')).not.toBeNull();
+    }
+  );
+});