@bearmenu/ui 0.6.1 → 0.7.0

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,38 @@
 import { cn } from '../chunk-FEK5XGZW.js';
-import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
+import { __spreadValues, __objRest, __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 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"
+  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 +55,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 +73,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/package.json

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

package/src/components/card.tsx

@@ -3,25 +3,29 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { textVariants } from "./text";
 
-const cardVariants = cva("rounded-3xl text-card-foreground transition-colors", {
-  variants: {
-    variant: {
-      surface: "bg-card border border-border",
-      glass: "glass",
-      outline: "bg-transparent border border-border",
-      muted: "bg-muted border border-transparent",
+const cardVariants = cva(
+  "rounded-3xl text-card-foreground transition-[background-color,border-color] duration-[var(--duration-quick)] ease-[var(--ease-standard)]",
+  {
+    variants: {
+      variant: {
+        surface: "bg-card border border-border",
+        glass: "glass",
+        outline: "bg-transparent border border-border",
+        muted: "bg-muted border border-transparent",
+      },
+      size: {
+        sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
+        default:
+          "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
+        lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0",
+      },
+      // Interactive variant follows v1.0 `press-response` archetype:
+      // hover lift via shadow + translate (200ms), press scale-down (instant).
+      interactive: {
+        true: "cursor-pointer transition-[transform,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-standard)] hover:border-primary/40 hover:-translate-y-0.5 hover:shadow-md active:scale-[0.97] active:duration-[var(--duration-instant)] motion-reduce:hover:translate-y-0 motion-reduce:active:scale-100",
+        false: "",
+      },
     },
-    size: {
-      sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
-      default:
-        "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
-      lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0",
-    },
-    interactive: {
-      true: "cursor-pointer hover:border-primary/40 hover:-translate-y-0.5 transition-[transform,border-color] duration-200",
-      false: "",
-    },
-  },
   defaultVariants: {
     variant: "surface",
     size: "default",

package/src/components/dialog.tsx

@@ -28,7 +28,7 @@ const DialogOverlay = React.forwardRef<
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const dialogContentVariants = cva(
-  "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card p-6 shadow-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
+  "fixed left-[50%] top-[50%] z-[1000] grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 bg-card 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)] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl border border-border",
   {
     variants: {
       size: {

package/src/components/filter-category-row.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { ChevronRight, type LucideIcon } from "lucide-react";
+import { Badge } from "./badge";
+import { Text } from "./text";
+
+interface FilterCategoryRowProps {
+  icon: LucideIcon;
+  label: string;
+  description: string;
+  count?: number;
+  onClick: () => void;
+}
+
+export function FilterCategoryRow({
+  icon: Icon,
+  label,
+  description,
+  count = 0,
+  onClick,
+}: FilterCategoryRowProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="flex items-center justify-between w-full py-3 transition-colors hover:bg-muted/50 rounded-lg px-2 -mx-2"
+    >
+      <div className="flex items-center gap-3">
+        <Icon
+          aria-hidden="true"
+          className="w-5 h-5 text-muted-foreground flex-shrink-0"
+        />
+        <div className="text-left">
+          <Text as="p" weight="medium">
+            {label}
+          </Text>
+          <Text as="p" variant="body-sm" color="muted">
+            {description}
+          </Text>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {count > 0 && (
+          <Badge variant="secondary" className="text-xs">
+            {count}
+          </Badge>
+        )}
+        <ChevronRight className="w-5 h-5 text-muted-foreground" />
+      </div>
+    </button>
+  );
+}

package/src/components/input-group.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const inputGroupVariants = cva(
-  "flex items-center w-full rounded-xl border border-border bg-background text-base md:text-sm text-foreground transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 aria-invalid:border-destructive aria-invalid:focus-within:ring-destructive/40",
+  "flex items-center w-full border border-border bg-background text-base md:text-sm text-foreground transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50 aria-invalid:border-destructive aria-invalid:focus-within:ring-destructive/40",
   {
     variants: {
       size: {
@@ -14,9 +14,14 @@ const inputGroupVariants = cva(
         default: "h-11",
         lg: "h-12",
       },
+      shape: {
+        rounded: "rounded-xl focus-within:ring-ring",
+        pill: "rounded-full shadow-[var(--shadow-card)] focus-within:ring-accent/30",
+      },
     },
     defaultVariants: {
       size: "default",
+      shape: "rounded",
     },
   }
 );
@@ -27,12 +32,12 @@ const InputGroupContext = React.createContext<InputGroupContextValue>({});
 const InputGroup = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof inputGroupVariants>
->(({ className, size, children, ...props }, ref) => (
-  <InputGroupContext.Provider value={{ size }}>
+>(({ className, size, shape, children, ...props }, ref) => (
+  <InputGroupContext.Provider value={{ size, shape }}>
     <div
       ref={ref}
       data-slot="input-group"
-      className={cn(inputGroupVariants({ size }), className)}
+      className={cn(inputGroupVariants({ size, shape }), className)}
       {...props}
     >
       {children}