@bearmenu/ui 0.1.0

package/dist/hooks/use-haptic.d.ts

@@ -0,0 +1,22 @@
+type HapticStyle = "light" | "medium" | "heavy" | "success" | "warning" | "error" | "selection";
+interface HapticAPI {
+    isSupported: boolean;
+    platform: "ios" | "android" | "desktop" | "unknown";
+    trigger: (style: HapticStyle) => void;
+}
+declare const useHaptic: () => HapticAPI;
+declare global {
+    interface Window {
+        Telegram?: {
+            WebApp?: {
+                HapticFeedback?: {
+                    impactOccurred: (style: "light" | "medium" | "heavy") => void;
+                    notificationOccurred: (type: "success" | "warning" | "error") => void;
+                    selectionChanged: () => void;
+                };
+            };
+        };
+    }
+}
+
+export { useHaptic };

package/dist/hooks/use-haptic.js

@@ -0,0 +1,2 @@
+export { useHaptic } from '../chunk-R47NEOSI.js';
+import '../chunk-3GWWZKX7.js';

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,3 @@
+declare function useIsMobile(): boolean;
+
+export { useIsMobile };

package/dist/hooks/use-mobile.js

@@ -0,0 +1,19 @@
+import '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+
+var MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(void 0);
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+  return !!isMobile;
+}
+
+export { useIsMobile };

package/dist/hooks/use-mounted-theme.d.ts

@@ -0,0 +1,6 @@
+declare function useMountedTheme(): {
+    mounted: boolean;
+    isDark: boolean;
+};
+
+export { useMountedTheme };

package/dist/hooks/use-mounted-theme.js

@@ -0,0 +1,18 @@
+import '../chunk-3GWWZKX7.js';
+import { useSyncExternalStore } from 'react';
+import { useTheme } from 'next-themes';
+
+var subscribe = () => () => {
+};
+var getClientSnapshot = () => true;
+var getServerSnapshot = () => false;
+function useMountedTheme() {
+  const mounted = useSyncExternalStore(subscribe, getClientSnapshot, getServerSnapshot);
+  const { resolvedTheme } = useTheme();
+  return {
+    mounted,
+    isDark: mounted && resolvedTheme === "dark"
+  };
+}
+
+export { useMountedTheme };

package/dist/hooks/use-sticky.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+/**
+ * Hook to detect when a sticky element becomes "stuck"
+ * Uses IntersectionObserver with a sentinel element to detect sticky state
+ *
+ * @returns An object with:
+ * - isSticky: boolean indicating if element is currently stuck
+ * - ref: ref to attach to the sticky element
+ * - sentinelRef: ref for the sentinel element (place 1px above sticky element)
+ */
+declare function useSticky(): {
+    isSticky: boolean;
+    ref: React.RefObject<HTMLDivElement | null>;
+    sentinelRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export { useSticky };

package/dist/hooks/use-sticky.js

@@ -0,0 +1,2 @@
+export { useSticky } from '../chunk-EUHEIWHZ.js';
+import '../chunk-3GWWZKX7.js';

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.js

@@ -0,0 +1,2 @@
+export { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/package.json

@@ -0,0 +1,203 @@
+{
+  "name": "@bearmenu/ui",
+  "version": "0.1.0",
+  "description": "BearMenu design system — shared UI tokens, primitives, and components",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bearmenu/bearmenu-ui.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "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": "./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/collapsible": "./src/components/collapsible.tsx",
+    "./components/command": "./src/components/command.tsx",
+    "./components/currency-input": "./src/components/currency-input.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/form": "./src/components/form.tsx",
+    "./components/haptic-button": "./src/components/haptic-button.tsx",
+    "./components/input-otp": "./src/components/input-otp.tsx",
+    "./components/input": "./src/components/input.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/pagination": "./src/components/pagination.tsx",
+    "./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/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/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/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"
+      }
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run build"
+  },
+  "peerDependencies": {
+    "@hookform/resolvers": "^3.0.0",
+    "@radix-ui/react-accordion": "*",
+    "@radix-ui/react-alert-dialog": "*",
+    "@radix-ui/react-aspect-ratio": "*",
+    "@radix-ui/react-avatar": "*",
+    "@radix-ui/react-checkbox": "*",
+    "@radix-ui/react-collapsible": "*",
+    "@radix-ui/react-dialog": "*",
+    "@radix-ui/react-dropdown-menu": "*",
+    "@radix-ui/react-label": "*",
+    "@radix-ui/react-popover": "*",
+    "@radix-ui/react-progress": "*",
+    "@radix-ui/react-radio-group": "*",
+    "@radix-ui/react-scroll-area": "*",
+    "@radix-ui/react-select": "*",
+    "@radix-ui/react-separator": "*",
+    "@radix-ui/react-slider": "*",
+    "@radix-ui/react-slot": "*",
+    "@radix-ui/react-switch": "*",
+    "@radix-ui/react-tabs": "*",
+    "@radix-ui/react-toast": "*",
+    "@radix-ui/react-toggle": "*",
+    "@radix-ui/react-toggle-group": "*",
+    "@radix-ui/react-tooltip": "*",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "cmdk": "*",
+    "embla-carousel-react": "*",
+    "framer-motion": "^12.0.0",
+    "input-otp": "*",
+    "lucide-react": "^0.400.0",
+    "next": ">=14.0.0",
+    "next-themes": "^0.4.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-day-picker": "*",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "react-hook-form": "^7.0.0",
+    "react-markdown": "^10.0.0",
+    "remark-gfm": "^4.0.0",
+    "sonner": "^1.0.0",
+    "tailwind-merge": "^2.0.0",
+    "vaul": "^1.0.0",
+    "zod": "^3.0.0"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "latest",
+    "@radix-ui/react-alert-dialog": "latest",
+    "@radix-ui/react-aspect-ratio": "latest",
+    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-checkbox": "latest",
+    "@radix-ui/react-collapsible": "latest",
+    "@radix-ui/react-dialog": "latest",
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@radix-ui/react-label": "latest",
+    "@radix-ui/react-popover": "latest",
+    "@radix-ui/react-progress": "latest",
+    "@radix-ui/react-radio-group": "latest",
+    "@radix-ui/react-scroll-area": "latest",
+    "@radix-ui/react-select": "latest",
+    "@radix-ui/react-separator": "latest",
+    "@radix-ui/react-slider": "latest",
+    "@radix-ui/react-slot": "latest",
+    "@radix-ui/react-switch": "latest",
+    "@radix-ui/react-tabs": "latest",
+    "@radix-ui/react-toast": "latest",
+    "@radix-ui/react-toggle": "latest",
+    "@radix-ui/react-toggle-group": "latest",
+    "@radix-ui/react-tooltip": "latest",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "latest",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.22",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.577.0",
+    "next": "^16.1.7",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-day-picker": "latest",
+    "react-dom": "19.2.4",
+    "react-hook-form": "7.72.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss": "^4.2.4",
+    "tsup": "^8.5.0",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5",
+    "vaul": "^1.1.2",
+    "zod": "^3.25.67"
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b border-border/50", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all duration-300 hover:underline [&[data-state=open]>svg]:rotate-180 glass-hover rounded-xl px-4 hover:bg-accent/20",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-300" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0 px-4", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/components/alert-dialog.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { cn } from "../lib/utils";
+import { buttonVariants } from "./button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 glass 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-2xl border border-border/50",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/components/alert.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { textVariants } from "./text";
+
+const alertVariants = cva(
+  "relative w-full rounded-xl border border-border/50 px-4 py-3 text-sm glass transition-all duration-300 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10",
+        warning:
+          "border-yellow-500/50 text-yellow-600 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-500/10",
+        success:
+          "border-green-500/50 text-green-600 dark:border-green-500 [&>svg]:text-green-600 bg-green-500/10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5
+      ref={ref}
+      className={cn(
+        "mb-1",
+        textVariants({ weight: "medium", leading: "none", tracking: "tight" }),
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/aspect-ratio.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

package/src/components/avatar.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border/50 shadow-lg backdrop-blur-md bg-card/50 transition-all duration-300 hover:shadow-xl hover:shadow-black/20 hover:border-accent/30",
+      className
+    )}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full object-cover", className)}
+    {...props}
+  />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground text-sm font-medium backdrop-blur-md",
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/badge.tsx

@@ -0,0 +1,38 @@
+import type * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-lg border px-2.5 py-0.5 text-xs font-semibold transition-[background-color,color,box-shadow,border-color] duration-300 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 backdrop-blur-md",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary/80 text-primary-foreground shadow-lg hover:bg-primary hover:shadow-xl hover:shadow-primary/20",
+        secondary:
+          "border-transparent bg-secondary/80 text-secondary-foreground shadow-lg hover:bg-secondary hover:shadow-xl hover:shadow-secondary/20",
+        destructive:
+          "border-transparent bg-destructive/80 text-destructive-foreground shadow-lg hover:bg-destructive hover:shadow-xl hover:shadow-destructive/20",
+        outline: "text-foreground glass glass-hover",
+        overlay: "border-transparent bg-black/50 text-white backdrop-blur-sm shadow-lg",
+        glass: "glass glass-hover text-foreground border-border/50",
+        success:
+          "border-transparent bg-green-500/80 text-primary shadow-lg hover:bg-green-500 hover:shadow-xl hover:shadow-green-500/20",
+        warning:
+          "border-transparent bg-yellow-500/80 text-primary shadow-lg hover:bg-yellow-500 hover:shadow-xl hover:shadow-yellow-500/20",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };