@bearmenu/ui 0.7.0 → 0.8.1

package/dist/components/place-schedule-week.js

@@ -1,4 +1,4 @@
-export { PlaceScheduleWeek } from '../chunk-A5ONAJCE.js';
-import '../chunk-Y5D5LP4A.js';
+export { PlaceScheduleWeek } from '../chunk-VG3PND3D.js';
+import '../chunk-7BWTYWM3.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/popover.js

@@ -1,3 +1,3 @@
-export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-UUJVXN2O.js';
+export { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '../chunk-66MAPLXS.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-UUJVXN2O.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-HCM6LKM5.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-66MAPLXS.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-XNA2INVQ.js';
 import '../chunk-FRPPIXMY.js';
-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';

package/dist/components/select.js

@@ -10,7 +10,7 @@ var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var selectTriggerVariants = cva(
-  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-medium text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-semibold text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {
@@ -118,7 +118,7 @@ var SelectItem = React.forwardRef((_a, ref) => {
       ref,
       "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium",
+        "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-semibold",
         className
       )
     }, props), {

package/dist/components/selection-bar.js

@@ -36,7 +36,7 @@ var SelectionBar = React.forwardRef(
         )
       }, props), {
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-semibold text-foreground", children: [
             onClear && /* @__PURE__ */ jsx(
               "button",
               {

package/dist/components/sheet.d.ts

@@ -9,10 +9,33 @@ declare const SheetTrigger: React.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * `attachment` controls whether the panel is welded to the viewport edge or
+ * floats clear of it.
+ *
+ * - `edge` (default) — the classic sheet: full bleed against its side, only the
+ *   two corners facing inward rounded. Every existing consumer gets this, so
+ *   adding `inset` changes nothing already shipped.
+ * - `inset` — a floating panel: held off all four edges, rounded on every
+ *   corner, page visible around it. Reads as a surface laid ON the page rather
+ *   than one grafted to it, which is what detail surfaces want — the content
+ *   behind stays legible as context instead of being cropped away.
+ *
+ * `inset` deliberately drops the border. At an edge the border is the seam
+ * between panel and viewport and has work to do; floating, the shadow already
+ * separates the two and a border only draws a hard line around the radius.
+ */
 declare const sheetVariants: (props?: ({
     side?: "left" | "right" | "bottom" | "top" | null | undefined;
+    attachment?: "inset" | "edge" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+    /**
+     * Suppress the built-in floating close button. Use when the panel renders its
+     * own header row with a close control, which would otherwise stack two close
+     * buttons in the same corner.
+     */
+    hideClose?: boolean;
 }
 declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const SheetHeader: {

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

@@ -1,34 +1,11 @@
+import { archetype } from '../chunk-LEAYBICI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __spreadValues, __objRest, __spreadProps } from '../chunk-3GWWZKX7.js';
+import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { motion } from 'framer-motion';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var springSnappy = {
-  type: "spring",
-  damping: 30,
-  stiffness: 380
-};
-var springSmooth = {
-  type: "spring",
-  damping: 30,
-  stiffness: 220
-};
-var springSoft = {
-  type: "spring",
-  damping: 35,
-  stiffness: 140
-};
-var archetype = {
-  /** Drawer / Sheet / Dialog entrance. Surface arrives first; content layers after. */
-  surfaceOpen: __spreadValues({}, springSmooth),
-  /** First-reveal stagger for card grids. Per-item spring. Cap stagger at 8 items. */
-  listReveal: __spreadValues({}, springSoft),
-  /** Bottom-sheet / side-drawer entry. */
-  edgeEnter: __spreadValues({}, springSmooth),
-  /** Active tab pill, active filter chip — use with Framer Motion `layoutId`. */
-  indicatorMorph: __spreadValues({}, springSnappy)};
 var TabsContext = React.createContext({
   variant: "pill",
   orientation: "horizontal",
@@ -100,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/dist/lib/motion.d.ts

@@ -0,0 +1,83 @@
+import { Transition, Variants } from 'framer-motion';
+
+/**
+ * BearMenu Motion System — v1.0
+ *
+ * Three layers:
+ *   1. Primitives — durations + easing curves (raw values)
+ *   2. Springs    — Framer Motion spring configs (named)
+ *   3. Archetypes — compound presets that compose primitives + springs
+ *
+ * Feature code reaches for archetypes, never primitives.
+ * Adding a new archetype is a DS-maintainer task.
+ *
+ * Companion CSS custom properties live in `./globals.css`:
+ *   --duration-instant / --duration-quick / --duration-standard /
+ *   --duration-deliberate / --duration-narrative /
+ *   --duration-exit-quick / --duration-exit-standard
+ *   --ease-enter / --ease-standard / --ease-exit
+ */
+declare const duration: {
+    readonly instant: 0.12;
+    readonly quick: 0.18;
+    readonly standard: 0.26;
+    readonly deliberate: 0.36;
+    readonly narrative: 0.5;
+    readonly exitQuick: 0.11;
+    readonly exitStandard: 0.21;
+};
+declare const ease: {
+    readonly enter: readonly [0, 0, 0.2, 1];
+    readonly standard: readonly [0.4, 0, 0.2, 1];
+    readonly exit: readonly [0.55, 0, 1, 0.45];
+};
+declare const springSnappy: Transition;
+declare const springSmooth: Transition;
+declare const springSoft: Transition;
+/** @deprecated use `springSoft`. Kept as alias during migration. */
+declare const springGentle: Transition;
+declare const archetype: {
+    /** Drawer / Sheet / Dialog entrance. Surface arrives first; content layers after. */
+    readonly surfaceOpen: Transition;
+    readonly surfaceClose: Transition;
+    /** First-reveal stagger for card grids. Per-item spring. Cap stagger at 8 items. */
+    readonly listReveal: Transition;
+    readonly listRevealStagger: 0.04;
+    readonly listRevealMaxItems: 8;
+    /** Tab content swap, skeleton → data swap. Opacity-only — no transform. */
+    readonly contentSwap: Transition;
+    readonly contentSwapExit: Transition;
+    /** Bottom-sheet / side-drawer entry. */
+    readonly edgeEnter: Transition;
+    readonly edgeExit: Transition;
+    /** Card / button tap feedback. */
+    readonly pressResponse: Transition;
+    /** Active tab pill, active filter chip — use with Framer Motion `layoutId`. */
+    readonly indicatorMorph: Transition;
+    /** Image enter — slight scale on load. */
+    readonly imageEnter: Transition;
+};
+declare const stagger: {
+    readonly tight: 0.03;
+    readonly standard: 0.04;
+    readonly loose: 0.06;
+};
+/**
+ * List-reveal container + item variants. Pair with Framer Motion `motion.ul`/`motion.div`.
+ * Container drives stagger; item handles the actual fade + Y-shift.
+ */
+declare const listRevealVariants: {
+    container: Variants;
+    item: Variants;
+};
+/**
+ * Content-swap variants for `AnimatePresence mode="wait"`. Opacity + tiny Y shift.
+ * Use for tab panels.
+ */
+declare const contentSwapVariants: Variants;
+/**
+ * Skeleton → data swap. Opacity-only to prevent layout shift on slow networks.
+ */
+declare const skeletonSwapVariants: Variants;
+
+export { archetype, contentSwapVariants, duration, ease, listRevealVariants, skeletonSwapVariants, springGentle, springSmooth, springSnappy, springSoft, stagger };

package/dist/lib/motion.js

@@ -0,0 +1,2 @@
+export { archetype, contentSwapVariants, duration, ease, listRevealVariants, skeletonSwapVariants, springGentle, springSmooth, springSnappy, springSoft, stagger } from '../chunk-LEAYBICI.js';
+import '../chunk-3GWWZKX7.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.7.0",
+  "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",