@bearmenu/ui 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -17,118 +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/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": "*",
@@ -236,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}

package/src/components/input.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const inputVariants = cva(
-  "flex w-full rounded-xl border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {
@@ -11,9 +11,14 @@ const inputVariants = cva(
         default: "h-11 px-4 py-2",
         lg: "h-12 px-5 text-base",
       },
+      shape: {
+        rounded: "rounded-xl focus-visible:ring-ring",
+        pill: "rounded-full bg-background shadow-[var(--shadow-card)] focus-visible:ring-accent/30",
+      },
     },
     defaultVariants: {
       size: "default",
+      shape: "rounded",
     },
   }
 );
@@ -23,12 +28,12 @@ export interface InputProps
     VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, ...props }, ref) => {
+  ({ className, type, size, shape, ...props }, ref) => {
     return (
       <input
         type={type}
         data-slot="input"
-        className={cn(inputVariants({ size }), className)}
+        className={cn(inputVariants({ size, shape }), className)}
         ref={ref}
         {...props}
       />

package/src/components/phone-frame.tsx

@@ -32,7 +32,7 @@ export function PhoneFrame({
 
   return (
     <div className={cn("relative mx-auto shrink-0", className)} style={{ width }}>
-      <div className="rounded-[2.5rem] border-[1.5px] border-white/15 bg-black/80 p-1.5 shadow-2xl shadow-black/40">
+      <div className="rounded-[2.5rem] border-[1.5px] border-white/15 bg-black p-1.5 shadow-2xl shadow-black/40">
         <div className="absolute top-[10px] left-1/2 -translate-x-1/2 w-[68px] h-[20px] bg-black rounded-full z-10" />
         <div
           className="rounded-[2rem] overflow-hidden bg-background relative"

package/src/components/place-about-tab.stories.tsx

@@ -3,27 +3,29 @@ import { PlaceAboutTab } from "./place-about-tab";
 import type { PlaceAboutTabLabels, PlacePreview } from "./place-types";
 
 const labels: PlaceAboutTabLabels = {
-  overview: "Overview",
-  description: "Description",
-  whatPeopleSay: "What people say",
-  contactAndLocation: "Contact & Location",
-  address: "Address",
+  description: "About",
+  contactAndLocation: "Contact",
   instagram: "Instagram",
   facebook: "Facebook",
-  todayHours: "Today's hours",
-  statusOpen: "Open now",
+  todayHours: "Hours",
   statusClosed: "Closed",
   typicalBusyness: "Typical busyness",
   cuisines: "Cuisines",
   amenities: "Amenities",
-  paymentOptions: "Payment options",
+  paymentOptions: "Payment",
   accessibility: "Accessibility",
   parking: "Parking",
-  nearbyLandmarks: "Nearby landmarks",
-  neighborhood: "Neighborhood",
-  businessInformation: "Business information",
-  type: "Type",
-  status: "Status",
+  nearbyLandmarks: "Nearby",
+  scheduleDays: {
+    monday: "Monday",
+    tuesday: "Tuesday",
+    wednesday: "Wednesday",
+    thursday: "Thursday",
+    friday: "Friday",
+    saturday: "Saturday",
+    sunday: "Sunday",
+  },
+  noHoursAvailable: "Hours not available",
   amenityLabels: {
     wifi: "Wi-Fi",
     outdoor_seating: "Outdoor seating",
@@ -62,6 +64,15 @@ const richPlace: PlacePreview = {
     "Diners praise the friendly service and the lamb shoulder; some note that reservations are essential on weekends.",
   open_now: true,
   hours: [{ opens_at: 11, closes_at: 23 }],
+  schedule: {
+    monday: [{ opens_at: 11, closes_at: 23 }],
+    tuesday: [{ opens_at: 11, closes_at: 23 }],
+    wednesday: [{ opens_at: 11, closes_at: 23 }],
+    thursday: [{ opens_at: 11, closes_at: 23 }],
+    friday: [{ opens_at: 11, closes_at: 24 }],
+    saturday: [{ opens_at: 12, closes_at: 24 }],
+    sunday: [],
+  },
   location: { address: "Strada Mihai Eminescu 15, București" },
   phone: "+40 21 555 0123",
   website_url: "https://casagri.example.com",