@bearmenu/ui 0.7.1 → 0.8.1

package/dist/components/sheet.js

@@ -26,32 +26,69 @@ var SheetOverlay = React.forwardRef((_a, ref) => {
 });
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva(
-  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
+  "fixed z-[1000] gap-4 bg-background border-border shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom rounded-t-2xl",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm rounded-r-2xl",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm rounded-l-2xl"
+        top: "inset-x-0 top-0 data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+        right: "inset-y-0 right-0 h-full w-3/4 data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
+      },
+      attachment: {
+        edge: "p-6",
+        // Padding is the caller's business here: a detail surface runs a gallery
+        // and a sticky action bar to the panel edge, and a fixed p-6 would inset
+        // both. `edge` keeps its p-6 so nothing already shipped shifts.
+        inset: "rounded-2xl overflow-hidden"
       }
     },
+    compoundVariants: [
+      // `edge` restates exactly what each side carried before `attachment`
+      // existed — the seam border and the two inward-facing corners. Kept as
+      // compounds rather than left on `side` so `inset` is not fighting them
+      // through class-merge order.
+      // `sm:max-w-sm` lives here, not on `side`: an inset panel is sized by its
+      // caller, and a responsive cap left on `side` cannot be overridden from
+      // className — tailwind-merge scopes `sm:max-w-*` and `max-w-*` to
+      // different groups, so `max-w-none` loses to it at every width ≥ sm.
+      { side: "top", attachment: "edge", class: "border-b" },
+      { side: "bottom", attachment: "edge", class: "border-t rounded-t-2xl" },
+      { side: "left", attachment: "edge", class: "border-r rounded-r-2xl sm:max-w-sm" },
+      { side: "right", attachment: "edge", class: "border-l rounded-l-2xl sm:max-w-sm" },
+      // The inset offsets live here rather than on `attachment` because each
+      // side has to give up its own edge: a right-side panel clears top, right
+      // and bottom but is still anchored to the right.
+      { side: "right", attachment: "inset", class: "inset-y-3 right-3 h-auto" },
+      { side: "left", attachment: "inset", class: "inset-y-3 left-3 h-auto" },
+      { side: "top", attachment: "inset", class: "inset-x-3 top-3" },
+      { side: "bottom", attachment: "inset", class: "inset-x-3 bottom-3" }
+    ],
     defaultVariants: {
-      side: "right"
+      side: "right",
+      attachment: "edge"
     }
   }
 );
 var SheetContent = React.forwardRef((_a, ref) => {
-  var _b = _a, { side = "right", className, children } = _b, props = __objRest(_b, ["side", "className", "children"]);
+  var _b = _a, { side = "right", attachment = "edge", className, children, hideClose } = _b, props = __objRest(_b, ["side", "attachment", "className", "children", "hideClose"]);
   return /* @__PURE__ */ jsxs(SheetPortal, { children: [
     /* @__PURE__ */ jsx(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs(SheetPrimitive.Content, __spreadProps(__spreadValues({ ref, className: cn(sheetVariants({ side }), className) }, props), { children: [
-      children,
-      /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2", children: [
-        /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-      ] })
-    ] }))
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Content,
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(sheetVariants({ side, attachment }), className)
+      }, props), {
+        children: [
+          children,
+          !hideClose && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary glass-hover p-2", children: [
+            /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+          ] })
+        ]
+      })
+    )
   ] });
 });
 SheetContent.displayName = SheetPrimitive.Content.displayName;

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-ZFNOCP6W.js';
+import { Button } from '../chunk-H3BV4VAG.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
@@ -53,6 +53,7 @@ var SlidingPanels = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
+      "data-slot": "sliding-panels",
       className: cn(
         "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
         className
@@ -68,12 +69,15 @@ var SlidingPanels = ({
             ref: (el) => {
               panelRefs.current[index] = el;
             },
+            "data-slot": "sliding-panel",
+            "data-state": isActive ? "active" : "inactive",
             className: cn(
               "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
               isActive && "translate-x-0",
               isLeft && "-translate-x-[calc(100%+8px)]",
               isRight && "translate-x-[calc(100%+8px)]"
             ),
+            inert: !isActive || void 0,
             "aria-hidden": !isActive,
             children: [
               panel.showBackButton && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-4", children: [

package/dist/components/sonner.js

@@ -1,5 +1,5 @@
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
-import { Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
+import { Loader2Icon, CircleAlertIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 import { jsx } from 'react/jsx-runtime';
@@ -16,7 +16,7 @@ var Toaster = (_a) => {
         success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
         info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
         warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
-        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(CircleAlertIcon, { className: "size-4" }),
         loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
       },
       style: {

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/stepper.js

@@ -58,8 +58,11 @@ var Stepper = React.forwardRef(
                       {
                         className: cn(
                           "whitespace-nowrap transition-colors",
+                          // current and complete share a weight; COLOUR carries the
+                          // state (full → 80% → 40%). `complete` was 500, the one
+                          // step that is not in the 400/600/700 system.
                           status === "current" && "font-semibold text-foreground",
-                          status === "complete" && "font-medium text-foreground/80",
+                          status === "complete" && "font-semibold text-foreground/80",
                           status === "upcoming" && "text-foreground/40"
                         ),
                         children: step.title

package/dist/components/table.js

@@ -51,7 +51,7 @@ var TableFooter = React.forwardRef((_a, ref) => {
     __spreadValues({
       ref,
       "data-slot": "table-footer",
-      className: cn("border-t border-border bg-muted/50 font-medium [&>tr]:last:border-b-0", className)
+      className: cn("border-t border-border bg-muted/50 font-semibold [&>tr]:last:border-b-0", className)
     }, props)
   );
 });

package/dist/components/tabs.js

@@ -77,7 +77,7 @@ var TabsTrigger = React.forwardRef((_a, ref) => {
       ref: composedRef,
       "data-slot": "tabs-trigger",
       className: cn(
-        "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "relative inline-flex items-center justify-center whitespace-nowrap text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         variant === "pill" && "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" && orientation === "horizontal" && "h-11 rounded-none px-4 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" && orientation === "vertical" && "rounded-none px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:text-foreground justify-start",

package/dist/components/tag-group.js

@@ -15,7 +15,7 @@ var TagGroup = React.forwardRef((_a, ref) => {
       className: cn("flex flex-wrap items-center gap-1.5", className)
     }, props), {
       children: [
-        label && !srLabel && /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs font-medium text-muted-foreground", children: label }),
+        label && !srLabel && /* @__PURE__ */ jsx("span", { className: "mr-1 text-xs font-semibold text-muted-foreground", children: label }),
         children
       ]
     })

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "success" | "warning" | "primary" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/tag.js

@@ -1,3 +1,3 @@
-export { Tag, tagVariants } from '../chunk-YLNYXPIH.js';
+export { Tag, tagVariants } from '../chunk-VBA45GLP.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/text.d.ts

@@ -3,10 +3,28 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
+/**
+ * The type scale is a CLOSED set of roles. Seven carry every surface:
+ *
+ *   h1       page title          30/700
+ *   h3       section heading     20/600
+ *   body     running prose       16/400 relaxed
+ *   label    row / item title    14/600
+ *   body-sm  secondary fact      14/400
+ *   overline eyebrow             12/600 uppercase
+ *   caption  fine print          12/400
+ *
+ * Emphasis, colour and tabular figures are ORTHOGONAL modifiers (`weight`,
+ * `color`, className) — they must never be expressed by changing SIZE. A
+ * paragraph that steps 16 → 14 mid-sentence to mark its lead reads as two
+ * paragraphs jammed together; that is what the modifiers exist for.
+ *
+ * Weights are 400 / 600 / 700. 500 is not in the system.
+ */
 declare const textVariants: (props?: ({
-    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
+    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/dist/components/text.js

@@ -1,3 +1,3 @@
-export { Text, textVariants } from '../chunk-Y5D5LP4A.js';
+export { Text, textVariants } from '../chunk-7BWTYWM3.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-ZBBUKXM5.js';
+import { toggleVariants } from '../chunk-X3WMRKOW.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-ZBBUKXM5.js';
+export { Toggle, toggleVariants } from '../chunk-X3WMRKOW.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/lib/card-hover.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Card hover motion tokens — the shared recipe for any card with a cover image.
+ *
+ * Every card type animates the same set of properties (transform on the card
+ * root, transform on the image, box-shadow on the image wrapper) so the timings
+ * must stay in lockstep. Defining the tokens in one place is the only way to
+ * guarantee a hover that feels identical across a mixed grid.
+ *
+ * Prefer the COMPOSED tokens (`HOVER_IMAGE_WRAPPER`, `HOVER_IMAGE_MOTION`) over
+ * re-assembling a recipe from `HOVER_DURATION` + `HOVER_EASE` + a shadow at the
+ * call site. Consumers that did the latter silently shipped without a hover
+ * shadow — the transition and the resting shadow were wired up, the hover state
+ * simply never was, and nothing failed loudly. One class per element is what
+ * stops that.
+ *
+ * Companion CSS custom properties live in `./globals.css`:
+ *   --shadow-card-image / --shadow-card-image-hover / --shadow-menu-cover-inset
+ * They carry the dark-mode override, so none of these tokens needs a `dark:`
+ * twin of every state. A consumer app must NOT redefine them locally — app
+ * stylesheets are imported after this one and would silently win.
+ *
+ * Why we don't animate filter / mix-blend-mode opacity:
+ *   - filter animations (`saturate`, `brightness`) on <img> are CPU-heavy and
+ *     can hitch on lower-end devices.
+ *   - mix-blend-multiply opacity transitions composite at unpredictable frame
+ *     rates so they never sync with transform/opacity transitions.
+ * Restricting hover to transform + box-shadow keeps every element on the same
+ * GPU-composited frame, which is what makes the in/out feel perfectly synced.
+ */
+declare const HOVER_DURATION = "duration-[320ms]";
+declare const HOVER_EASE = "ease-[cubic-bezier(0.4,0,0.2,1)]";
+/** Apply to the card root — composes the base transform transition. */
+declare const HOVER_MOTION = "transition-transform duration-[320ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none will-change-transform";
+/** Apply to elements that animate box-shadow on hover (image wrappers). */
+declare const HOVER_SHADOW_MOTION = "transition-shadow duration-[320ms] ease-[cubic-bezier(0.4,0,0.2,1)]";
+/** Grid/standard/hero card variants — full lift. */
+declare const HOVER_LIFT_GRID = "[@media(hover:hover)]:hover:-translate-y-1";
+/**
+ * Same lift as `HOVER_LIFT_GRID`, but driven by a NAMED `group/card` ancestor
+ * instead of the element's own `:hover`.
+ *
+ * For overlays that must render as SIBLINGS of the interactive card rather than
+ * children — e.g. a pill that is itself a button or link, which would be
+ * invalid ARIA nested inside the card's own `role="button"` / `<a>`. A sibling
+ * can't inherit the card's transform, so it stays pinned while the card lifts
+ * out from under it. Putting `group/card` on the shared wrapper and this token
+ * on BOTH the card and the overlay moves them as one, and means hovering the
+ * overlay lifts the card too (its own `:hover` never fires for a sibling).
+ */
+declare const HOVER_LIFT_GRID_GROUP = "[@media(hover:hover)]:group-hover/card:-translate-y-1";
+/** List/compact row variants — half lift since rows are denser. */
+declare const HOVER_LIFT_LIST = "[@media(hover:hover)]:hover:-translate-y-0.5";
+/** Image inside a card — scales subtly on group hover. */
+declare const HOVER_IMAGE_SCALE = "group-hover:scale-[1.05]";
+/** Drop-in className for the `<img>` element inside card image wrappers. */
+declare const HOVER_IMAGE_MOTION = "transition-transform duration-[320ms] ease-[cubic-bezier(0.4,0,0.2,1)] motion-reduce:transition-none will-change-transform group-hover:scale-[1.05]";
+/** Warm image-wrapper shadow that deepens on group hover. */
+declare const HOVER_IMAGE_SHADOW = "shadow-[var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-card-image-hover)]";
+/**
+ * Same lift, for covers that ALSO carry an inset "well" edge on a generated
+ * illustration rather than a photo. `box-shadow` is a single property, so the
+ * inset can't be a second `shadow-*` class stacked on `HOVER_IMAGE_SHADOW`; it
+ * has to be part of the same value, which is why both states are spelled out.
+ */
+declare const HOVER_IMAGE_SHADOW_INSET = "shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image-hover)]";
+/**
+ * The whole cover-wrapper recipe: shadow transition + the warm lift. Pair with
+ * `HOVER_IMAGE_MOTION` on the image inside (covers that render a generated
+ * illustration have no image to scale and use this alone).
+ */
+declare const HOVER_IMAGE_WRAPPER = "transition-shadow duration-[320ms] ease-[cubic-bezier(0.4,0,0.2,1)] shadow-[var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-card-image-hover)]";
+/** `HOVER_IMAGE_WRAPPER` for the inset-well covers. */
+declare const HOVER_IMAGE_WRAPPER_INSET = "transition-shadow duration-[320ms] ease-[cubic-bezier(0.4,0,0.2,1)] shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image-hover)]";
+
+export { HOVER_DURATION, HOVER_EASE, HOVER_IMAGE_MOTION, HOVER_IMAGE_SCALE, HOVER_IMAGE_SHADOW, HOVER_IMAGE_SHADOW_INSET, HOVER_IMAGE_WRAPPER, HOVER_IMAGE_WRAPPER_INSET, HOVER_LIFT_GRID, HOVER_LIFT_GRID_GROUP, HOVER_LIFT_LIST, HOVER_MOTION, HOVER_SHADOW_MOTION };

package/dist/lib/card-hover.js

@@ -0,0 +1,18 @@
+import '../chunk-3GWWZKX7.js';
+
+// src/lib/card-hover.ts
+var HOVER_DURATION = "duration-[320ms]";
+var HOVER_EASE = "ease-[cubic-bezier(0.4,0,0.2,1)]";
+var HOVER_MOTION = `transition-transform ${HOVER_DURATION} ${HOVER_EASE} motion-reduce:transition-none will-change-transform`;
+var HOVER_SHADOW_MOTION = `transition-shadow ${HOVER_DURATION} ${HOVER_EASE}`;
+var HOVER_LIFT_GRID = "[@media(hover:hover)]:hover:-translate-y-1";
+var HOVER_LIFT_GRID_GROUP = "[@media(hover:hover)]:group-hover/card:-translate-y-1";
+var HOVER_LIFT_LIST = "[@media(hover:hover)]:hover:-translate-y-0.5";
+var HOVER_IMAGE_SCALE = "group-hover:scale-[1.05]";
+var HOVER_IMAGE_MOTION = `${HOVER_MOTION} ${HOVER_IMAGE_SCALE}`;
+var HOVER_IMAGE_SHADOW = "shadow-[var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-card-image-hover)]";
+var HOVER_IMAGE_SHADOW_INSET = "shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image)] [@media(hover:hover)]:group-hover:shadow-[var(--shadow-menu-cover-inset),var(--shadow-card-image-hover)]";
+var HOVER_IMAGE_WRAPPER = `${HOVER_SHADOW_MOTION} ${HOVER_IMAGE_SHADOW}`;
+var HOVER_IMAGE_WRAPPER_INSET = `${HOVER_SHADOW_MOTION} ${HOVER_IMAGE_SHADOW_INSET}`;
+
+export { HOVER_DURATION, HOVER_EASE, HOVER_IMAGE_MOTION, HOVER_IMAGE_SCALE, HOVER_IMAGE_SHADOW, HOVER_IMAGE_SHADOW_INSET, HOVER_IMAGE_WRAPPER, HOVER_IMAGE_WRAPPER_INSET, HOVER_LIFT_GRID, HOVER_LIFT_GRID_GROUP, HOVER_LIFT_LIST, HOVER_MOTION, HOVER_SHADOW_MOTION };

package/package.json

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

package/src/components/accordion.tsx

@@ -29,7 +29,7 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       data-slot="accordion-trigger"
       className={cn(
-        "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium text-foreground transition-colors hover:text-foreground/80",
+        "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-semibold text-foreground transition-colors hover:text-foreground/80",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm",
         "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         "[&[data-state=open]>svg]:rotate-180",

package/src/components/avatar.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize } from "./avatar";
+
+const sizes: AvatarSize[] = ["xs", "sm", "default", "lg", "xl"];
+
+const people = ["AB", "CD", "EF", "GH", "IJ", "KL", "MN"];
 
 const meta = {
   title: "Components/Avatar",
@@ -30,37 +34,66 @@ export const Fallback: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">
-      <Avatar className="h-8 w-8">
-        <AvatarFallback className="text-xs">S</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar className="h-14 w-14">
-        <AvatarFallback className="text-lg">LG</AvatarFallback>
-      </Avatar>
-      <Avatar className="h-20 w-20">
-        <AvatarFallback className="text-xl">XL</AvatarFallback>
-      </Avatar>
+      {sizes.map((size) => (
+        <Avatar key={size} size={size}>
+          <AvatarFallback>{size.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+      ))}
     </div>
   ),
 };
 
 export const Group: Story = {
   render: () => (
-    <div className="flex -space-x-3">
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>A</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>B</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>C</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback className="text-xs">+3</AvatarFallback>
-      </Avatar>
+    <AvatarGroup max={4} spacing="tight">
+      {people.map((initials) => (
+        <Avatar key={initials}>
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      ))}
+    </AvatarGroup>
+  ),
+};
+
+/**
+ * `AvatarGroup` takes the same `size` union as `Avatar`. It sizes the "+N"
+ * overflow chip and is inherited by child avatars, so the row stays one
+ * consistent height without per-call-site class overrides.
+ */
+export const GroupSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {sizes.map((size) => (
+        <div key={size} className="flex items-center gap-4">
+          <span className="w-16 text-xs text-muted-foreground">{size}</span>
+          <AvatarGroup max={3} spacing="tight" size={size}>
+            {people.map((initials) => (
+              <Avatar key={initials}>
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+            ))}
+          </AvatarGroup>
+        </div>
+      ))}
     </div>
   ),
 };
+
+/**
+ * An individual `Avatar` can still opt out of the group size — useful for
+ * highlighting "you" inside a roster.
+ */
+export const GroupSizeOverride: Story = {
+  render: () => (
+    <AvatarGroup max={4} spacing="tight" size="sm">
+      <Avatar size="lg">
+        <AvatarFallback>ME</AvatarFallback>
+      </Avatar>
+      {people.map((initials) => (
+        <Avatar key={initials}>
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      ))}
+    </AvatarGroup>
+  ),
+};

package/src/components/avatar.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup } from "./avatar";
+
+// Returned as an array, not a fragment: AvatarGroup counts its direct children,
+// and a fragment would collapse the whole set into one child.
+const members = (count: number) =>
+  Array.from({ length: count }, (_, i) => (
+    <Avatar key={i}>
+      <AvatarFallback>{String.fromCharCode(65 + i)}</AvatarFallback>
+    </Avatar>
+  ));
+
+const overflowChip = () => document.querySelector('[data-slot="avatar-group-overflow"]');
+const avatars = () => Array.from(document.querySelectorAll('[data-slot="avatar"]'));
+
+describe("Avatar", () => {
+  it("applies the default size scale when no size is given", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+    expect(avatars()[0]).toHaveClass("size-10", "text-sm");
+  });
+
+  it("applies an explicit size variant", () => {
+    render(
+      <Avatar size="xs">
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+    expect(avatars()[0]).toHaveClass("size-6", "text-[10px]");
+  });
+
+  it("scales AvatarBadge off the avatar size via context", () => {
+    render(
+      <Avatar size="xl">
+        <AvatarFallback>JD</AvatarFallback>
+        <AvatarBadge />
+      </Avatar>
+    );
+    expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-4");
+  });
+});
+
+describe("AvatarGroup", () => {
+  it("renders no overflow chip when the item count fits within max", () => {
+    render(
+      <AvatarGroup max={3}>
+        {members(3)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toBeNull();
+  });
+
+  it("renders a +N overflow chip for the hidden remainder", () => {
+    render(
+      <AvatarGroup max={2}>
+        {members(5)}
+      </AvatarGroup>
+    );
+    expect(screen.getByText("+3")).toBeInTheDocument();
+    expect(avatars()).toHaveLength(2);
+  });
+
+  it("keeps the pre-existing chip appearance when no size is passed", () => {
+    render(
+      <AvatarGroup max={1}>
+        {members(3)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toHaveClass("size-10", "text-xs");
+  });
+
+  it.each([
+    ["xs", "size-6", "text-[9px]"],
+    ["sm", "size-8", "text-[10px]"],
+    ["default", "size-10", "text-xs"],
+    ["lg", "size-12", "text-sm"],
+    ["xl", "size-16", "text-base"],
+  ] as const)("sizes the overflow chip to match a %s group", (size, sizeClass, textClass) => {
+    render(
+      <AvatarGroup max={1} size={size}>
+        {members(4)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toHaveClass(sizeClass, textClass);
+  });
+
+  it("passes the group size down to child avatars", () => {
+    render(
+      <AvatarGroup max={2} size="sm">
+        {members(4)}
+      </AvatarGroup>
+    );
+    for (const avatar of avatars()) {
+      expect(avatar).toHaveClass("size-8");
+    }
+  });
+
+  it("lets an individual avatar override the group size", () => {
+    render(
+      <AvatarGroup size="sm">
+        <Avatar>
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+    );
+    const [inherited, overridden] = avatars();
+    expect(inherited).toHaveClass("size-8");
+    expect(overridden).toHaveClass("size-12");
+  });
+
+  it("scales avatar and chip together so the group reads as one row", () => {
+    render(
+      <AvatarGroup max={2} size="xs">
+        {members(9)}
+      </AvatarGroup>
+    );
+    for (const avatar of avatars()) {
+      expect(avatar).toHaveClass("size-6");
+    }
+    expect(overflowChip()).toHaveClass("size-6");
+  });
+});