@bearmenu/ui 0.6.0 → 0.7.0

package/src/components/tabs.tsx

@@ -2,6 +2,8 @@
 
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { motion } from "framer-motion";
+import { archetype } from "../lib/motion";
 import { cn } from "../lib/utils";
 
 type TabsVariant = "pill" | "underline";
@@ -10,11 +12,15 @@ type TabsOrientation = "horizontal" | "vertical";
 type TabsContextValue = {
   variant: TabsVariant;
   orientation: TabsOrientation;
+  /** Unique id used by Framer Motion `layoutId` to morph the active indicator
+   * between triggers. Generated once per <TabsList>. */
+  indicatorId: string;
 };
 
 const TabsContext = React.createContext<TabsContextValue>({
   variant: "pill",
   orientation: "horizontal",
+  indicatorId: "tabs-indicator",
 });
 
 const Tabs = React.forwardRef<
@@ -45,9 +51,10 @@ const TabsList = React.forwardRef<
 >(({ className, variant = "pill", scrollable, children, ...props }, ref) => {
   const orientation: TabsOrientation = props["aria-orientation"] === "vertical" ? "vertical" : "horizontal";
   const allowScroll = scrollable ?? orientation === "horizontal";
+  const indicatorId = React.useId();
 
   return (
-    <TabsContext.Provider value={{ variant, orientation }}>
+    <TabsContext.Provider value={{ variant, orientation, indicatorId }}>
       <TabsPrimitive.List
         ref={ref}
         data-slot="tabs-list"
@@ -75,27 +82,80 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => {
-  const { variant, orientation } = React.useContext(TabsContext);
+>(({ className, children, ...props }, ref) => {
+  const { variant, orientation, indicatorId } = React.useContext(TabsContext);
+  // Inspect data-state at render to know whether to render the indicator.
+  // Radix sets data-state="active" | "inactive" on the trigger via its primitive.
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const [isActive, setIsActive] = React.useState(false);
+
+  // Sync isActive from Radix's data-state. Tracking via mutation observer
+  // keeps the indicator in sync without needing controlled state from consumers.
+  React.useEffect(() => {
+    const node = triggerRef.current;
+    if (!node) return;
+    const sync = () => setIsActive(node.getAttribute("data-state") === "active");
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, []);
+
+  const composedRef = React.useCallback(
+    (node: HTMLButtonElement | null) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+    },
+    [ref]
+  );
 
   return (
     <TabsPrimitive.Trigger
-      ref={ref}
+      ref={composedRef}
       data-slot="tabs-trigger"
       className={cn(
-        "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-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",
         variant === "pill" &&
-          "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" &&
           orientation === "horizontal" &&
-          "relative h-11 rounded-none border-b-2 border-transparent px-4 text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground",
+          "h-11 rounded-none px-4 text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
         variant === "underline" &&
           orientation === "vertical" &&
-          "relative rounded-none border-r-2 border-transparent px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground justify-start",
+          "rounded-none px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:text-foreground justify-start",
         className
       )}
       {...props}
-    />
+    >
+      {/* Active indicator: shared-layout element morphs between triggers */}
+      {isActive && (
+        <motion.span
+          aria-hidden
+          layoutId={indicatorId}
+          transition={archetype.indicatorMorph}
+          className={cn(
+            "absolute inset-0 -z-0 motion-reduce:hidden",
+            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
+            variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
+          )}
+        />
+      )}
+      {/* Static fallback for reduced-motion: keep the legacy active styling */}
+      {isActive && (
+        <span
+          aria-hidden
+          className={cn(
+            "absolute inset-0 -z-0 hidden motion-reduce:block",
+            variant === "pill" && "rounded-xl bg-background shadow-sm",
+            variant === "underline" && orientation === "horizontal" && "border-b-2 border-primary",
+            variant === "underline" && orientation === "vertical" && "border-r-2 border-primary"
+          )}
+        />
+      )}
+      <span className="relative z-10 flex items-center gap-2">{children}</span>
+    </TabsPrimitive.Trigger>
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
@@ -103,16 +163,21 @@ TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({ className, children, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
     data-slot="tabs-content"
     className={cn(
       "flex-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
+      // v1.0 motion: content-swap on activation. CSS animation so this works
+      // even outside a Framer-Motion-wrapped layout. Disabled for reduced-motion.
+      "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:duration-[var(--duration-quick)] data-[state=active]:ease-[var(--ease-standard)] motion-reduce:data-[state=active]:animate-none",
       className
     )}
     {...props}
-  />
+  >
+    {children}
+  </TabsPrimitive.Content>
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 

package/src/components/toast.tsx

@@ -24,7 +24,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-[transform,opacity] duration-[var(--duration-standard)] ease-[var(--ease-standard)] data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=open]:duration-[var(--duration-standard)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)] data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {

package/src/globals.css

@@ -89,18 +89,30 @@ h6 {
   --shadow-alpha-xl: 0.18;
   --shadow-alpha-2xl: 0.25;
 
-  /* Motion */
-  --duration-instant: 0ms;
-  --duration-fast: 150ms;
-  --duration-base: 200ms;
-  --duration-slow: 300ms;
-  --duration-slower: 500ms;
-  --duration-drawer: 350ms;
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
-  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
-  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
+  /* ─── Motion System v1.0 ─────────────────────────────────────────────
+     Three layers of tokens. Feature code reads only `--duration-*` and
+     `--ease-*` semantic names; raw values live here.
+
+     JS twin: @bearmenu/ui/lib/motion (duration / ease / archetype). */
+
+  /* Durations */
+  --duration-none: 0ms;             /* literal "no animation" */
+  --duration-instant: 120ms;        /* tap feedback, icon swap */
+  --duration-quick: 180ms;          /* chip toggle, tab indicator */
+  --duration-standard: 260ms;       /* component entrance — workhorse */
+  --duration-deliberate: 360ms;     /* drawer / sheet open */
+  --duration-narrative: 500ms;      /* editorial hero (sparingly) */
+  --duration-exit-quick: 110ms;     /* content exit inside a surface */
+  --duration-exit-standard: 210ms;  /* surface / overlay exit */
+
+  /* Easings */
+  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-exit: cubic-bezier(0.55, 0, 1, 0.45);
+  /* CSS equivalents for the JS spring presets — for keyframe / transition use */
+  --ease-spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-spring-smooth: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-spring-soft: cubic-bezier(0.16, 1, 0.3, 1);
 
   /* Z-index scale */
   --z-base: 0;
@@ -246,8 +258,8 @@ h6 {
   --shadow-2xl: 0 25px 50px -12px hsl(var(--shadow-color) / var(--shadow-alpha-2xl));
 
   /* Default transition tokens — consumed by Tailwind's `transition-*` utilities */
-  --default-transition-duration: var(--duration-base);
-  --default-transition-timing-function: var(--ease-out);
+  --default-transition-duration: var(--duration-standard);
+  --default-transition-timing-function: var(--ease-standard);
 
   --animate-highlight-ring: highlight-ring 5s ease-out forwards;
 }
@@ -296,8 +308,8 @@ h6 {
 
 .glass-hover {
   transition:
-    background-color var(--duration-base) var(--ease-out),
-    border-color var(--duration-base) var(--ease-out);
+    background-color var(--duration-standard) var(--ease-standard),
+    border-color var(--duration-standard) var(--ease-standard);
 }
 
 .glass-hover:hover {
@@ -407,11 +419,11 @@ h6 {
 }
 
 .animate-collapsible-down {
-  animation: collapsible-down var(--duration-slow) var(--ease-out);
+  animation: collapsible-down var(--duration-deliberate) var(--ease-enter);
 }
 
 .animate-collapsible-up {
-  animation: collapsible-up var(--duration-base) var(--ease-in);
+  animation: collapsible-up var(--duration-exit-standard) var(--ease-exit);
 }
 
 /* Shimmer — referenced by Skeleton (was undefined → animation was dead) */
@@ -421,13 +433,59 @@ h6 {
   }
 }
 
+/* Live-pulse — referenced by Badge `live` variant, EventBanner live indicator,
+   and any "this is happening right now" surface. Subtle to avoid distraction. */
+@keyframes live-pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.08);
+    opacity: 0.7;
+  }
+}
+
+.motion-live-pulse {
+  animation: live-pulse 1.8s ease-in-out infinite;
+  transform-origin: center;
+}
+
+/* Image-enter — gallery / hero photographs. Slight scale-down + fade so images
+   read as "arriving" rather than popping. Standalone CSS so consumers don't
+   need framer-motion on every photo. */
+@keyframes image-enter {
+  from {
+    opacity: 0;
+    transform: scale(1.04);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.motion-image-enter {
+  animation: image-enter var(--duration-standard) var(--ease-standard) both;
+}
+
+/* Reduced-motion: instant — no scale, no fade. */
+@media (prefers-reduced-motion: reduce) {
+  .motion-image-enter {
+    animation: none;
+  }
+  .motion-live-pulse {
+    animation: none;
+  }
+}
+
 /* Swiper pagination styling for experience cards */
 .swiper-pagination-bullet {
   background: color-mix(in oklch, var(--foreground) 30%, transparent) !important;
   opacity: 1 !important;
   width: 6px !important;
   height: 6px !important;
-  transition: all var(--duration-slow) var(--ease-out) !important;
+  transition: width var(--duration-standard) var(--ease-standard), background var(--duration-standard) var(--ease-standard) !important;
 }
 
 .swiper-pagination-bullet-active {

package/src/lib/motion.ts

@@ -0,0 +1,137 @@
+import type { 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
+ */
+
+// ─── Layer 1: Primitives ─────────────────────────────────────────────────
+
+export const duration = {
+  instant: 0.12,
+  quick: 0.18,
+  standard: 0.26,
+  deliberate: 0.36,
+  narrative: 0.5,
+  exitQuick: 0.11,
+  exitStandard: 0.21,
+} as const;
+
+export const ease = {
+  enter: [0.0, 0.0, 0.2, 1.0] as const,
+  standard: [0.4, 0.0, 0.2, 1.0] as const,
+  exit: [0.55, 0.0, 1.0, 0.45] as const,
+} as const;
+
+// ─── Layer 2: Springs ────────────────────────────────────────────────────
+
+export const springSnappy: Transition = {
+  type: "spring",
+  damping: 30,
+  stiffness: 380,
+};
+
+export const springSmooth: Transition = {
+  type: "spring",
+  damping: 30,
+  stiffness: 220,
+};
+
+export const springSoft: Transition = {
+  type: "spring",
+  damping: 35,
+  stiffness: 140,
+};
+
+/** @deprecated use `springSoft`. Kept as alias during migration. */
+export const springGentle = springSoft;
+
+// ─── Layer 3: Archetypes (composed presets) ──────────────────────────────
+
+export const archetype = {
+  /** Drawer / Sheet / Dialog entrance. Surface arrives first; content layers after. */
+  surfaceOpen: { ...springSmooth } as Transition,
+  surfaceClose: { duration: duration.exitStandard, ease: ease.exit } as Transition,
+
+  /** First-reveal stagger for card grids. Per-item spring. Cap stagger at 8 items. */
+  listReveal: { ...springSoft } as Transition,
+  listRevealStagger: 0.04,
+  listRevealMaxItems: 8,
+
+  /** Tab content swap, skeleton → data swap. Opacity-only — no transform. */
+  contentSwap: { duration: duration.quick, ease: ease.standard } as Transition,
+  contentSwapExit: { duration: duration.exitQuick, ease: ease.exit } as Transition,
+
+  /** Bottom-sheet / side-drawer entry. */
+  edgeEnter: { ...springSmooth } as Transition,
+  edgeExit: { duration: duration.exitStandard, ease: ease.exit } as Transition,
+
+  /** Card / button tap feedback. */
+  pressResponse: { duration: duration.instant, ease: ease.enter } as Transition,
+
+  /** Active tab pill, active filter chip — use with Framer Motion `layoutId`. */
+  indicatorMorph: { ...springSnappy } as Transition,
+
+  /** Image enter — slight scale on load. */
+  imageEnter: { duration: 0.3, ease: ease.standard } as Transition,
+} as const;
+
+// ─── Stagger gaps (seconds, for `staggerChildren`) ───────────────────────
+
+export const stagger = {
+  tight: 0.03,
+  standard: 0.04,
+  loose: 0.06,
+} as const;
+
+// ─── Variant builders (common patterns) ──────────────────────────────────
+
+/**
+ * List-reveal container + item variants. Pair with Framer Motion `motion.ul`/`motion.div`.
+ * Container drives stagger; item handles the actual fade + Y-shift.
+ */
+export const listRevealVariants: { container: Variants; item: Variants } = {
+  container: {
+    hidden: { opacity: 1 },
+    show: {
+      opacity: 1,
+      transition: { staggerChildren: stagger.standard },
+    },
+  },
+  item: {
+    hidden: { opacity: 0, y: 8 },
+    show: { opacity: 1, y: 0, transition: archetype.listReveal },
+  },
+};
+
+/**
+ * Content-swap variants for `AnimatePresence mode="wait"`. Opacity + tiny Y shift.
+ * Use for tab panels.
+ */
+export const contentSwapVariants: Variants = {
+  hidden: { opacity: 0, y: 6 },
+  show: { opacity: 1, y: 0, transition: archetype.contentSwap },
+  exit: { opacity: 0, y: -4, transition: archetype.contentSwapExit },
+};
+
+/**
+ * Skeleton → data swap. Opacity-only to prevent layout shift on slow networks.
+ */
+export const skeletonSwapVariants: Variants = {
+  hidden: { opacity: 0 },
+  show: { opacity: 1, transition: archetype.contentSwap },
+  exit: { opacity: 0, transition: archetype.contentSwapExit },
+};