@bearmenu/ui 0.6.1 → 0.7.1

package/dist/components/sliding-panels.js

@@ -2,6 +2,7 @@ import { Button } from '../chunk-ZFNOCP6W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
+import * as React from 'react';
 import { useRef, useState, useLayoutEffect } from 'react';
 import { ChevronLeft } from 'lucide-react';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -16,6 +17,18 @@ var SlidingPanels = ({
   const currentPanelData = panels[currentIndex];
   const panelRefs = useRef([]);
   const [containerHeight, setContainerHeight] = useState();
+  const usesTreeModel = panels.some((p) => p.parentId);
+  const activeAncestors = React.useMemo(() => {
+    if (!usesTreeModel) return /* @__PURE__ */ new Set();
+    const ancestors = /* @__PURE__ */ new Set();
+    let cursor = panels.find((p) => p.id === currentPanel);
+    while (cursor == null ? void 0 : cursor.parentId) {
+      ancestors.add(cursor.parentId);
+      const nextId = cursor.parentId;
+      cursor = panels.find((p) => p.id === nextId);
+    }
+    return ancestors;
+  }, [panels, currentPanel, usesTreeModel]);
   useLayoutEffect(() => {
     const activeEl = panelRefs.current[currentIndex];
     if (!activeEl) return;
@@ -26,13 +39,16 @@ var SlidingPanels = ({
     return () => ro.disconnect();
   }, [currentIndex]);
   const handleBack = () => {
-    const previousPanel = panels[currentIndex - 1];
-    if (!previousPanel) return;
     if (currentPanelData == null ? void 0 : currentPanelData.onBack) {
       currentPanelData.onBack();
-    } else {
-      onPanelChange(previousPanel.id);
+      return;
     }
+    if (currentPanelData == null ? void 0 : currentPanelData.parentId) {
+      onPanelChange(currentPanelData.parentId);
+      return;
+    }
+    const previousPanel = panels[currentIndex - 1];
+    if (previousPanel) onPanelChange(previousPanel.id);
   };
   return /* @__PURE__ */ jsx(
     "div",
@@ -44,8 +60,8 @@ var SlidingPanels = ({
       style: { height: containerHeight, overflowClipMargin: "8px" },
       children: panels.map((panel, index) => {
         const isActive = panel.id === currentPanel;
-        const isLeft = index < currentIndex;
-        const isRight = index > currentIndex;
+        const isLeft = usesTreeModel ? activeAncestors.has(panel.id) : index < currentIndex;
+        const isRight = !isActive && !isLeft;
         return /* @__PURE__ */ jsxs(
           "div",
           {

package/dist/components/sort-option-list.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type SortOptionListItem<T extends string> = {
+    value: T;
+    label: string;
+};
+interface SortOptionListProps<T extends string> {
+    options: SortOptionListItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    ariaLabel: string;
+    className?: string;
+}
+declare function SortOptionList<T extends string>({ options, value, onChange, ariaLabel, className, }: SortOptionListProps<T>): react_jsx_runtime.JSX.Element;
+
+export { SortOptionList, type SortOptionListItem };

package/dist/components/sort-option-list.js

@@ -0,0 +1,46 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { Check } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SortOptionList({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": ariaLabel,
+      className: cn("px-2 pb-6", className),
+      children: options.map((option) => {
+        const isActive = option.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": isActive,
+            onClick: () => onChange(option.value),
+            className: cn(
+              "flex w-full items-center justify-between rounded-lg px-3 py-3 text-left text-sm cursor-pointer",
+              "transition-colors duration-150 motion-reduce:transition-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+              isActive ? "bg-accent/10 text-accent font-semibold" : "text-foreground hover:bg-muted/50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: option.label }),
+              isActive && /* @__PURE__ */ jsx(Check, { className: "h-4 w-4", "aria-hidden": true })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+export { SortOptionList };

package/dist/components/tabs.js

@@ -1,12 +1,15 @@
+import { archetype } from '../chunk-LEAYBICI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { jsx } from 'react/jsx-runtime';
+import { motion } from 'framer-motion';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var TabsContext = React.createContext({
   variant: "pill",
-  orientation: "horizontal"
+  orientation: "horizontal",
+  indicatorId: "tabs-indicator"
 });
 var Tabs = React.forwardRef((_a, ref) => {
   var _b = _a, { className, orientation = "horizontal" } = _b, props = __objRest(_b, ["className", "orientation"]);
@@ -29,7 +32,8 @@ var TabsList = React.forwardRef((_a, ref) => {
   var _b = _a, { className, variant = "pill", scrollable, children } = _b, props = __objRest(_b, ["className", "variant", "scrollable", "children"]);
   const orientation = props["aria-orientation"] === "vertical" ? "vertical" : "horizontal";
   const allowScroll = scrollable != null ? scrollable : orientation === "horizontal";
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { variant, orientation }, children: /* @__PURE__ */ jsx(
+  const indicatorId = React.useId();
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { variant, orientation, indicatorId }, children: /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     __spreadProps(__spreadValues({
       ref,
@@ -46,36 +50,90 @@ var TabsList = React.forwardRef((_a, ref) => {
 });
 TabsList.displayName = TabsPrimitive.List.displayName;
 var TabsTrigger = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  const { variant, orientation } = React.useContext(TabsContext);
-  return /* @__PURE__ */ jsx(
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  const { variant, orientation, indicatorId } = React.useContext(TabsContext);
+  const triggerRef = React.useRef(null);
+  const [isActive, setIsActive] = React.useState(false);
+  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) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
     TabsPrimitive.Trigger,
-    __spreadValues({
-      ref,
+    __spreadProps(__spreadValues({
+      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",
-        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",
-        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",
-        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",
+        "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]: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",
         className
       )
-    }, props)
+    }, props), {
+      children: [
+        isActive && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            "aria-hidden": true,
+            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"
+            )
+          }
+        ),
+        isActive && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            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"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative z-10 flex items-center gap-2", children })
+      ]
+    })
   );
 });
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 var TabsContent = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Content,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       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)
+    }, props), {
+      children
+    })
   );
 });
 TabsContent.displayName = TabsPrimitive.Content.displayName;

package/dist/components/tag.js

@@ -1,61 +1,3 @@
-import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
-import * as React from 'react';
-import { X } from 'lucide-react';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var tagVariants = cva(
-  "inline-flex items-center gap-1 rounded-full border text-xs font-medium transition-colors",
-  {
-    variants: {
-      variant: {
-        default: "border-border bg-muted text-foreground",
-        primary: "border-primary/30 bg-primary/10 text-primary",
-        success: "border-success/30 bg-success/10 text-success",
-        warning: "border-warning/30 bg-warning/10 text-warning",
-        destructive: "border-destructive/30 bg-destructive/10 text-destructive",
-        outline: "border-border bg-transparent text-foreground"
-      },
-      size: {
-        sm: "h-5 px-2 text-[10px]",
-        default: "h-6 px-2.5",
-        lg: "h-7 px-3 text-sm"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Tag = React.forwardRef(
-  (_a, ref) => {
-    var _b = _a, { className, variant, size, onRemove, removeLabel = "Remove", children } = _b, props = __objRest(_b, ["className", "variant", "size", "onRemove", "removeLabel", "children"]);
-    return /* @__PURE__ */ jsxs(
-      "span",
-      __spreadProps(__spreadValues({
-        ref,
-        "data-slot": "tag",
-        className: cn(tagVariants({ variant, size }), className)
-      }, props), {
-        children: [
-          children,
-          onRemove && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": removeLabel,
-              onClick: onRemove,
-              className: "-mr-0.5 inline-flex size-3.5 items-center justify-center rounded-full transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
-            }
-          )
-        ]
-      })
-    );
-  }
-);
-Tag.displayName = "Tag";
-
-export { Tag, tagVariants };
+export { Tag, tagVariants } from '../chunk-YLNYXPIH.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/toast.js

@@ -1,3 +1,3 @@
-export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '../chunk-7PPCH42H.js';
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '../chunk-VQNDZVI7.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/toaster.js

@@ -1,5 +1,5 @@
-import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from '../chunk-7PPCH42H.js';
 import { useToast } from '../chunk-EBAMCZDW.js';
+import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from '../chunk-VQNDZVI7.js';
 import '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

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.6.1",
+  "version": "0.7.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -17,119 +17,19 @@
   ],
   "exports": {
     "./globals.css": "./src/globals.css",
-    "./components/accordion": "./src/components/accordion.tsx",
-    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
-    "./components/alert": "./src/components/alert.tsx",
-    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
-    "./components/avatar": "./src/components/avatar.tsx",
-    "./components/badge": "./src/components/badge.tsx",
-    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
-    "./components/button-group": "./src/components/button-group.tsx",
-    "./components/button": "./src/components/button.tsx",
-    "./components/calendar": "./src/components/calendar.tsx",
-    "./components/card": "./src/components/card.tsx",
-    "./components/carousel": "./src/components/carousel.tsx",
-    "./components/checkbox": "./src/components/checkbox.tsx",
-    "./components/circular-progress": "./src/components/circular-progress.tsx",
-    "./components/collapsible": "./src/components/collapsible.tsx",
-    "./components/combobox": "./src/components/combobox.tsx",
-    "./components/command": "./src/components/command.tsx",
-    "./components/currency-input": "./src/components/currency-input.tsx",
-    "./components/date-input": "./src/components/date-input.tsx",
-    "./components/description-list": "./src/components/description-list.tsx",
-    "./components/dialog": "./src/components/dialog.tsx",
-    "./components/drawer": "./src/components/drawer.tsx",
-    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
-    "./components/empty-state": "./src/components/empty-state.tsx",
-    "./components/field": "./src/components/field.tsx",
-    "./components/form": "./src/components/form.tsx",
-    "./components/haptic-button": "./src/components/haptic-button.tsx",
-    "./components/input-group": "./src/components/input-group.tsx",
-    "./components/input-otp": "./src/components/input-otp.tsx",
-    "./components/input": "./src/components/input.tsx",
-    "./components/item": "./src/components/item.tsx",
-    "./components/kbd": "./src/components/kbd.tsx",
-    "./components/label": "./src/components/label.tsx",
-    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
-    "./components/link-button": "./src/components/link-button.tsx",
-    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
-    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
-    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
-    "./components/native-select": "./src/components/native-select.tsx",
-    "./components/pagination": "./src/components/pagination.tsx",
-    "./components/phone-frame": "./src/components/phone-frame.tsx",
-    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
-    "./components/place-card": "./src/components/place-card.tsx",
-    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
-    "./components/place-types": "./src/components/place-types.ts",
-    "./components/popover": "./src/components/popover.tsx",
-    "./components/progress": "./src/components/progress.tsx",
-    "./components/radio-group": "./src/components/radio-group.tsx",
-    "./components/rating": "./src/components/rating.tsx",
-    "./components/scroll-area": "./src/components/scroll-area.tsx",
-    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
-    "./components/search-bar": "./src/components/search-bar.tsx",
-    "./components/searchable-select": "./src/components/searchable-select.tsx",
-    "./components/select": "./src/components/select.tsx",
-    "./components/selection-bar": "./src/components/selection-bar.tsx",
-    "./components/separator": "./src/components/separator.tsx",
-    "./components/sheet": "./src/components/sheet.tsx",
-    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
-    "./components/skeleton": "./src/components/skeleton.tsx",
-    "./components/slider": "./src/components/slider.tsx",
-    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
-    "./components/sonner": "./src/components/sonner.tsx",
-    "./components/spinner": "./src/components/spinner.tsx",
-    "./components/stepper": "./src/components/stepper.tsx",
-    "./components/sticky-container": "./src/components/sticky-container.tsx",
-    "./components/switch": "./src/components/switch.tsx",
-    "./components/table": "./src/components/table.tsx",
-    "./components/tabs": "./src/components/tabs.tsx",
-    "./components/tag-group": "./src/components/tag-group.tsx",
-    "./components/tag": "./src/components/tag.tsx",
-    "./components/text": "./src/components/text.tsx",
-    "./components/textarea": "./src/components/textarea.tsx",
-    "./components/toast": "./src/components/toast.tsx",
-    "./components/toaster": "./src/components/toaster.tsx",
-    "./components/toggle-group": "./src/components/toggle-group.tsx",
-    "./components/toggle": "./src/components/toggle.tsx",
-    "./components/tooltip": "./src/components/tooltip.tsx",
-    "./components/use-mobile": "./src/components/use-mobile.tsx",
-    "./components/use-toast": "./src/components/use-toast.ts",
-    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
-    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
-    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
-    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
-    "./lib/utils": "./src/lib/utils.ts"
-  },
-  "publishConfig": {
-    "exports": {
-      "./globals.css": "./src/globals.css",
-      "./components/*": {
-        "types": "./dist/components/*.d.ts",
-        "import": "./dist/components/*.js"
-      },
-      "./hooks/*": {
-        "types": "./dist/hooks/*.d.ts",
-        "import": "./dist/hooks/*.js"
-      },
-      "./lib/*": {
-        "types": "./dist/lib/*.d.ts",
-        "import": "./dist/lib/*.js"
-      }
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js"
     }
   },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -237,5 +137,15 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/accordion.tsx

@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-quick)] ease-[var(--ease-standard)]" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

package/src/components/badge.tsx

@@ -22,9 +22,16 @@ const badgeVariants = cva(
           "border-transparent bg-warning text-warning-foreground",
         brown: "border-transparent bg-brown text-brown-foreground",
       },
+      // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
+      // Pair with a colored variant (e.g. variant="destructive" live).
+      live: {
+        true: "motion-live-pulse motion-reduce:animate-none",
+        false: "",
+      },
     },
     defaultVariants: {
       variant: "default",
+      live: false,
     },
   }
 );
@@ -32,8 +39,8 @@ const badgeVariants = cva(
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
+function Badge({ className, variant, live, ...props }: BadgeProps) {
+  return <div data-slot="badge" className={cn(badgeVariants({ variant, live }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };