@bearmenu/ui 0.1.0

package/src/components/markdown-renderer.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import ReactMarkdown, { type Components } from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+type MarkdownRendererProps = {
+  content: string;
+  className?: string;
+  components?: Components;
+};
+
+export function MarkdownRenderer({ content, className, components }: MarkdownRendererProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/src/components/multi-select-combobox.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Badge } from "./badge";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+export interface MultiSelectOption {
+  value: string;
+  label: string;
+}
+
+interface MultiSelectComboboxProps {
+  options: MultiSelectOption[];
+  selected: string[];
+  onSelectionChange: (values: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  className?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  maxDisplay?: number;
+  onSearchChange?: (value: string) => void;
+  shouldFilter?: boolean;
+}
+
+export function MultiSelectCombobox({
+  options,
+  selected,
+  onSelectionChange,
+  placeholder = "Select items...",
+  searchPlaceholder = "Search...",
+  emptyText = "No items found.",
+  className,
+  disabled = false,
+  loading = false,
+  maxDisplay = 3,
+  onSearchChange,
+  shouldFilter = true,
+}: MultiSelectComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+
+  const handleSelect = (value: string) => {
+    const newSelected = selected.includes(value)
+      ? selected.filter((item) => item !== value)
+      : [...selected, value];
+    onSelectionChange(newSelected);
+  };
+
+  const handleRemove = (value: string, e: React.MouseEvent | React.KeyboardEvent) => {
+    e.stopPropagation();
+    onSelectionChange(selected.filter((item) => item !== value));
+  };
+
+  const selectedLabels = selected
+    .map((value) => options.find((opt) => opt.value === value)?.label || value)
+    .slice(0, maxDisplay);
+
+  const remainingCount = selected.length - maxDisplay;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className={cn(
+            "w-full justify-between h-auto min-h-10 py-2",
+            selected.length === 0 && "text-muted-foreground",
+            className
+          )}
+          disabled={disabled}
+        >
+          <div className="flex flex-wrap gap-1 flex-1 text-left">
+            {selected.length === 0 ? (
+              <span>{placeholder}</span>
+            ) : (
+              <>
+                {selectedLabels.map((label, i) => (
+                  <Badge key={selected[i]} variant="secondary" className="text-xs">
+                    {label}
+                    <div
+                      role="button"
+                      tabIndex={0}
+                      className="ml-1 rounded-full outline-none ring-offset-background focus:ring-2 focus:ring-ring focus:ring-offset-2 cursor-pointer"
+                      onClick={(e) => handleRemove(selected[i], e)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          handleRemove(selected[i], e);
+                        }
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </div>
+                  </Badge>
+                ))}
+                {remainingCount > 0 && (
+                  <Badge variant="secondary" className="text-xs">
+                    +{remainingCount} more
+                  </Badge>
+                )}
+              </>
+            )}
+          </div>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" align="start">
+        <Command shouldFilter={shouldFilter}>
+          <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+          <CommandList>
+            <CommandEmpty>{loading ? "Loading..." : emptyText}</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => handleSelect(option.value)}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      selected.includes(option.value) ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/pagination.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+
+import { cn } from "../lib/utils";
+import { Button, buttonVariants } from "./button";
+
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="pagination"
+      data-slot="pagination"
+      className={cn("mx-auto flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationContent({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex flex-row items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
+  React.ComponentProps<"a">;
+
+function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+  return (
+    <a
+      aria-current={isActive ? "page" : undefined}
+      data-slot="pagination-link"
+      data-active={isActive}
+      className={cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size,
+        }),
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to previous page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+      {...props}
+    >
+      <ChevronLeftIcon />
+      <span className="hidden sm:block">Previous</span>
+    </PaginationLink>
+  );
+}
+
+function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to next page"
+      size="default"
+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+      {...props}
+    >
+      <span className="hidden sm:block">Next</span>
+      <ChevronRightIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      aria-hidden
+      data-slot="pagination-ellipsis"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontalIcon className="size-4" />
+      <span className="sr-only">More pages</span>
+    </span>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+};

package/src/components/popover.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-xl bg-cave-depth p-4 text-popover-foreground shadow-2xl outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border/50",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };

package/src/components/progress.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full glass border border-border/50",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-gradient-to-r from-primary to-secondary transition-all duration-500 ease-out shadow-lg"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/src/components/radio-group.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { cn } from "../lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-5 w-5 rounded-full border border-border glass text-primary transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:border-accent/50 hover:shadow-md",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current animate-in zoom-in-50 duration-200" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/components/rating.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Star, StarHalf } from "lucide-react";
+
+interface RatingProps {
+  value: number; // 1-5
+  max?: number; // default 5
+  size?: "sm" | "md" | "lg";
+  showCount?: boolean;
+  reviewCount?: number;
+  readonly?: boolean;
+  onRatingChange?: (rating: number) => void;
+  className?: string;
+}
+
+const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
+  (
+    {
+      value,
+      max = 5,
+      size = "md",
+      showCount = true,
+      reviewCount,
+      readonly = true,
+      onRatingChange,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [hoverValue, setHoverValue] = React.useState<number | null>(null);
+
+    const sizeClasses = {
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-5 w-5",
+    };
+
+    const textSizeClasses = {
+      sm: "text-xs",
+      md: "text-sm",
+      lg: "text-base",
+    };
+
+    const handleClick = (rating: number) => {
+      if (!readonly && onRatingChange) {
+        onRatingChange(rating);
+      }
+    };
+
+    const handleMouseEnter = (rating: number) => {
+      if (!readonly) {
+        setHoverValue(rating);
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (!readonly) {
+        setHoverValue(null);
+      }
+    };
+
+    const displayValue = hoverValue ?? value;
+    const fullStars = Math.floor(displayValue);
+    const hasHalfStar = displayValue % 1 !== 0;
+    const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
+
+    return (
+      <div
+        ref={ref}
+        className={cn("flex items-center gap-1", !readonly && "cursor-pointer", className)}
+        {...props}
+      >
+        {/* Stars */}
+        <div className="flex items-center gap-0.5">
+          {/* Full stars */}
+          {Array.from({ length: fullStars }).map((_, i) => (
+            <Star
+              key={`full-${i}`}
+              className={cn(
+                sizeClasses[size],
+                "fill-primary text-primary transition-colors",
+                !readonly && "hover:fill-primary/80"
+              )}
+              onClick={() => handleClick(i + 1)}
+              onMouseEnter={() => handleMouseEnter(i + 1)}
+              onMouseLeave={handleMouseLeave}
+            />
+          ))}
+
+          {/* Half star */}
+          {hasHalfStar && (
+            <StarHalf
+              className={cn(
+                sizeClasses[size],
+                "fill-primary text-primary transition-colors",
+                !readonly && "hover:fill-primary/80"
+              )}
+              onClick={() => handleClick(fullStars + 1)}
+              onMouseEnter={() => handleMouseEnter(fullStars + 1)}
+              onMouseLeave={handleMouseLeave}
+            />
+          )}
+
+          {/* Empty stars */}
+          {Array.from({ length: emptyStars }).map((_, i) => (
+            <Star
+              key={`empty-${i}`}
+              className={cn(
+                sizeClasses[size],
+                "text-muted-foreground/30 transition-colors",
+                !readonly && "hover:text-primary/50"
+              )}
+              onClick={() => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
+              onMouseEnter={() => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1)}
+              onMouseLeave={handleMouseLeave}
+            />
+          ))}
+        </div>
+
+        {/* Review count */}
+        {showCount && reviewCount !== undefined && (
+          <span className={cn("text-muted-foreground ml-1", textSizeClasses[size])}>
+            ({reviewCount})
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Rating.displayName = "Rating";
+
+export { Rating };

package/src/components/scroll-area.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border/50 backdrop-blur-sm hover:bg-border transition-colors" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/components/search-bar.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import type { ChangeEvent } from "react";
+import { Card } from "./card";
+import { Loader2, Search } from "lucide-react";
+import { cn } from "../lib/utils";
+
+interface SearchBarProps {
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  isSearching?: boolean;
+  className?: string;
+  inputClassName?: string;
+  autoFocus?: boolean;
+  inputAriaLabel?: string;
+  size?: "default" | "compact";
+  variant?: "primary" | "secondary" | "editorial";
+}
+
+export function SearchBar({
+  placeholder = "Search...",
+  value = "",
+  onChange,
+  isSearching = false,
+  className,
+  inputClassName,
+  autoFocus = false,
+  inputAriaLabel,
+  size = "default",
+  variant = "editorial",
+}: SearchBarProps) {
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    onChange?.(newValue);
+  };
+
+  const Wrapper = variant === "editorial" ? "div" : Card;
+  const wrapperClassName =
+    variant === "editorial"
+      ? cn(
+          "bg-surface border border-border rounded-[14px] h-12 flex items-center transition-colors focus-within:border-primary",
+          className
+        )
+      : cn(
+          "border-2 border-primary-foreground/20 backdrop-blur-xl rounded-lg p-0",
+          size === "compact" ? "md:p-1.5" : "md:p-2",
+          variant === "primary"
+            ? "!bg-primary-foreground/10 !text-primary !border-primary/20"
+            : "!bg-primary !text-primary-foreground !border-primary/20",
+          className
+        );
+
+  return (
+    <Wrapper className={wrapperClassName}>
+      <div className="flex items-center relative">
+        <div
+          className={cn(
+            "absolute top-1/2 z-10 -translate-y-1/2",
+            size === "compact" ? "left-3.5" : "left-4"
+          )}
+        >
+          <Search
+            className={cn(
+              variant === "editorial"
+                ? "text-muted-foreground"
+                : variant === "primary"
+                  ? "text-primary"
+                  : "text-primary-foreground",
+              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
+            )}
+          />
+        </div>
+        <input
+          type="text"
+          placeholder={placeholder}
+          value={value}
+          onChange={handleInputChange}
+          autoFocus={autoFocus}
+          aria-label={inputAriaLabel ?? placeholder}
+          className={cn(
+            "w-full bg-transparent border-0 focus:outline-none focus-visible:outline-none",
+            size === "compact"
+              ? "pl-9 pr-3 py-2.5 text-sm placeholder:text-sm rounded-lg"
+              : "pl-10 pr-4 py-3 text-[14px] placeholder:text-[14px] rounded-[14px]",
+            variant === "editorial"
+              ? "text-foreground placeholder:text-muted-foreground"
+              : variant === "primary"
+                ? "!text-primary placeholder:text-primary/60"
+                : "!text-primary-foreground placeholder:text-primary-foreground/60",
+            inputClassName
+          )}
+        />
+        {isSearching && (
+          <div
+            className={cn(
+              "absolute top-1/2 -translate-y-1/2",
+              size === "compact" ? "right-3.5" : "right-4"
+            )}
+          >
+            <Loader2
+              className={cn(
+                "animate-spin",
+                variant === "editorial" ? "text-muted-foreground" : "text-primary/60",
+                size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
+              )}
+            />
+          </div>
+        )}
+      </div>
+    </Wrapper>
+  );
+}