@bearmenu/ui 0.5.2 → 0.6.0

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

@@ -1,10 +1,11 @@
 "use client";
 
 import * as React from "react";
-import { Check, ChevronsUpDown, X } from "lucide-react";
+import { ChevronsUpDown, X } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { Badge } from "./badge";
+import { Checkbox } from "./checkbox";
 import {
   Command,
   CommandEmpty,
@@ -50,6 +51,7 @@ export function MultiSelectCombobox({
   shouldFilter = true,
 }: MultiSelectComboboxProps) {
   const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
 
   const handleSelect = (value: string) => {
     const newSelected = selected.includes(value)
@@ -58,91 +60,92 @@ export function MultiSelectCombobox({
     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;
+  const visible = selected.slice(0, maxDisplay);
+  const remaining = 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={cn("flex flex-col gap-2", className)}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-controls={open ? listboxId : undefined}
+            className={cn(
+              "w-full justify-between font-normal",
+              selected.length === 0 && "text-muted-foreground"
+            )}
+            disabled={disabled}
+          >
+            <span className="truncate">
+              {selected.length === 0
+                ? placeholder
+                : `${selected.length} selected`}
+            </span>
+            <ChevronsUpDown className="size-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          id={listboxId}
+          className="w-[var(--radix-popover-trigger-width)] p-0"
+          align="start"
         >
-          <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);
-                        }
-                      }}
+          <Command shouldFilter={shouldFilter}>
+            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            <CommandList>
+              <CommandEmpty>{loading ? "Loading…" : emptyText}</CommandEmpty>
+              <CommandGroup>
+                {options.map((option) => {
+                  const isSelected = selected.includes(option.value);
+                  return (
+                    <CommandItem
+                      key={option.value}
+                      value={option.value}
+                      onSelect={() => handleSelect(option.value)}
+                      className="gap-2"
                     >
-                      <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)}
+                      <Checkbox
+                        checked={isSelected}
+                        tabIndex={-1}
+                        aria-hidden
+                        className="pointer-events-none"
+                      />
+                      {option.label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {selected.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {visible.map((value) => {
+            const label = options.find((opt) => opt.value === value)?.label || value;
+            return (
+              <Badge key={value} variant="secondary" className="gap-1 pr-1">
+                {label}
+                <button
+                  type="button"
+                  aria-label={`Remove ${label}`}
+                  onClick={() =>
+                    onSelectionChange(selected.filter((item) => item !== value))
+                  }
+                  className="rounded-full p-0.5 hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring transition-colors"
                 >
-                  <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>
+                  <X className="size-3" />
+                </button>
+              </Badge>
+            );
+          })}
+          {remaining > 0 && (
+            <Badge variant="secondary">+{remaining} more</Badge>
+          )}
+        </div>
+      )}
+    </div>
   );
 }

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

@@ -1,9 +1,9 @@
 "use client";
 
 import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cn } from "../lib/utils";
 import { Checkbox } from "./checkbox";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
 
 export interface MultiSelectMenuOption {
   value: string;
@@ -15,14 +15,10 @@ export interface MultiSelectMenuProps {
   options: MultiSelectMenuOption[];
   selected: string[];
   onSelectedChange: (values: string[]) => void;
-  /** Trigger element rendered via Radix `asChild` — typically a Button. */
   trigger: React.ReactNode;
-  /** Optional heading rendered above the option list. */
   label?: string;
   align?: "start" | "center" | "end";
-  /** Pixel width of the popover content. Defaults to 220. */
   width?: number;
-  /** className for the popover content. */
   contentClassName?: string;
   emptyText?: string;
 }
@@ -51,46 +47,58 @@ export function MultiSelectMenu({
   }
 
   return (
-    <Popover>
-      <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent
-        align={align}
-        className={cn("p-2", contentClassName)}
-        style={{ width }}
-      >
-        {label && (
-          <div className="text-foreground px-2 py-1.5 text-sm font-semibold">
-            {label}
-          </div>
-        )}
-        <div role="group" aria-label={label} className="flex flex-col gap-0.5">
+    <DropdownMenuPrimitive.Root>
+      <DropdownMenuPrimitive.Trigger asChild>{trigger}</DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          align={align}
+          sideOffset={4}
+          style={{ width }}
+          className={cn(
+            "z-50 overflow-hidden rounded-xl border border-border bg-popover p-2 text-popover-foreground shadow-xl",
+            "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",
+            contentClassName
+          )}
+        >
+          {label && (
+            <DropdownMenuPrimitive.Label className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+              {label}
+            </DropdownMenuPrimitive.Label>
+          )}
           {options.length === 0 ? (
-            <p className="text-muted-foreground px-2 py-1.5 text-sm">{emptyText}</p>
+            <p className="px-2 py-1.5 text-sm text-muted-foreground">{emptyText}</p>
           ) : (
-            options.map((option) => {
-              const checked = selectedSet.has(option.value);
-              return (
-                <label
-                  key={option.value}
-                  className={cn(
-                    "flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm select-none",
-                    "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-                    option.disabled && "pointer-events-none opacity-50",
-                  )}
-                >
-                  <Checkbox
+            <DropdownMenuPrimitive.Group className="flex flex-col gap-0.5">
+              {options.map((option) => {
+                const checked = selectedSet.has(option.value);
+                return (
+                  <DropdownMenuPrimitive.CheckboxItem
+                    key={option.value}
                     checked={checked}
+                    disabled={option.disabled ?? false}
+                    onSelect={(e) => e.preventDefault()}
                     onCheckedChange={() => handleToggle(option.value)}
-                    disabled={option.disabled}
-                    aria-label={typeof option.label === "string" ? option.label : option.value}
-                  />
-                  <span className="flex-1">{option.label}</span>
-                </label>
-              );
-            })
+                    className={cn(
+                      "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none",
+                      "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+                      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+                    )}
+                  >
+                    <Checkbox
+                      checked={checked}
+                      tabIndex={-1}
+                      aria-hidden
+                      className="pointer-events-none"
+                    />
+                    <span className="flex-1">{option.label}</span>
+                  </DropdownMenuPrimitive.CheckboxItem>
+                );
+              })}
+            </DropdownMenuPrimitive.Group>
           )}
-        </div>
-      </PopoverContent>
-    </Popover>
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
+    </DropdownMenuPrimitive.Root>
   );
 }

package/src/components/native-select.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NativeSelect } from "./native-select";
+
+const meta = {
+  title: "Components/NativeSelect",
+  component: NativeSelect,
+  tags: ["autodocs"],
+} satisfies Meta<typeof NativeSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <NativeSelect className="w-64" defaultValue="">
+      <option value="" disabled>
+        Pick a fruit…
+      </option>
+      <option value="apple">Apple</option>
+      <option value="banana">Banana</option>
+      <option value="cherry">Cherry</option>
+    </NativeSelect>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex w-64 flex-col gap-3">
+      <NativeSelect size="sm" defaultValue="small">
+        <option value="small">Small</option>
+      </NativeSelect>
+      <NativeSelect size="default" defaultValue="default">
+        <option value="default">Default</option>
+      </NativeSelect>
+      <NativeSelect size="lg" defaultValue="large">
+        <option value="large">Large</option>
+      </NativeSelect>
+    </div>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <NativeSelect className="w-64" aria-invalid defaultValue="">
+      <option value="" disabled>
+        Required field…
+      </option>
+      <option value="a">Option A</option>
+      <option value="b">Option B</option>
+    </NativeSelect>
+  ),
+};

package/src/components/native-select.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const nativeSelectVariants = cva(
+  "w-full appearance-none rounded-xl border border-border bg-background pr-9 text-sm text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9 pl-3",
+        default: "h-11 pl-4",
+        lg: "h-12 pl-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+type NativeSelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> &
+  VariantProps<typeof nativeSelectVariants>;
+
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size, children, ...props }, ref) => (
+    <div className="relative inline-flex w-full">
+      <select
+        ref={ref}
+        data-slot="native-select"
+        className={cn(nativeSelectVariants({ size }), className)}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown
+        aria-hidden
+        className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+      />
+    </div>
+  )
+);
+NativeSelect.displayName = "NativeSelect";
+
+export { NativeSelect, nativeSelectVariants };

package/src/components/pagination.tsx

@@ -1,5 +1,11 @@
 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  MoreHorizontalIcon,
+} from "lucide-react";
 
 import { cn } from "../lib/utils";
 import { Button, buttonVariants } from "./button";
@@ -32,20 +38,33 @@ function PaginationItem({ ...props }: React.ComponentProps<"li">) {
 
 type PaginationLinkProps = {
   isActive?: boolean;
+  disabled?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
   React.ComponentProps<"a">;
 
-function PaginationLink({ className, isActive, size = "icon", ...props }: PaginationLinkProps) {
+function PaginationLink({
+  className,
+  isActive,
+  disabled,
+  size = "icon",
+  onClick,
+  ...props
+}: PaginationLinkProps) {
   return (
     <a
       aria-current={isActive ? "page" : undefined}
+      aria-disabled={disabled || undefined}
       data-slot="pagination-link"
       data-active={isActive}
+      tabIndex={disabled ? -1 : undefined}
+      onClick={disabled ? (e) => e.preventDefault() : onClick}
       className={cn(
         buttonVariants({
-          variant: isActive ? "outline" : "ghost",
+          variant: isActive ? "default" : "ghost",
           size,
         }),
+        isActive && "pointer-events-none",
+        disabled && "pointer-events-none opacity-50",
         className
       )}
       {...props}
@@ -53,7 +72,26 @@ function PaginationLink({ className, isActive, size = "icon", ...props }: Pagina
   );
 }
 
-function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+function PaginationFirst({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to first page"
+      size="icon"
+      className={cn(className)}
+      {...props}
+    >
+      <ChevronsLeftIcon />
+    </PaginationLink>
+  );
+}
+
+function PaginationPrevious({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -67,7 +105,10 @@ function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof
   );
 }
 
-function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>) {
+function PaginationNext({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -81,6 +122,22 @@ function PaginationNext({ className, ...props }: React.ComponentProps<typeof Pag
   );
 }
 
+function PaginationLast({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) {
+  return (
+    <PaginationLink
+      aria-label="Go to last page"
+      size="icon"
+      className={cn(className)}
+      {...props}
+    >
+      <ChevronsRightIcon />
+    </PaginationLink>
+  );
+}
+
 function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -100,7 +157,9 @@ export {
   PaginationContent,
   PaginationLink,
   PaginationItem,
+  PaginationFirst,
   PaginationPrevious,
   PaginationNext,
+  PaginationLast,
   PaginationEllipsis,
 };

package/src/components/popover.tsx

@@ -5,8 +5,9 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "../lib/utils";
 
 const Popover = PopoverPrimitive.Root;
-
 const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -15,10 +16,12 @@ const PopoverContent = React.forwardRef<
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
+      data-slot="popover-content"
       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",
+        "z-50 w-72 rounded-xl border border-border bg-popover p-4 text-popover-foreground shadow-xl 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",
         className
       )}
       {...props}
@@ -27,4 +30,64 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent };
+const PopoverArrow = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Arrow>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>
+>(({ className, ...props }, ref) => (
+  <PopoverPrimitive.Arrow
+    ref={ref}
+    data-slot="popover-arrow"
+    className={cn("fill-popover stroke-border", className)}
+    {...props}
+  />
+));
+PopoverArrow.displayName = PopoverPrimitive.Arrow.displayName;
+
+const PopoverHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="popover-header"
+      className={cn("flex flex-col space-y-1.5 pb-3", className)}
+      {...props}
+    />
+  )
+);
+PopoverHeader.displayName = "PopoverHeader";
+
+const PopoverTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      data-slot="popover-title"
+      className={cn("text-sm font-semibold leading-none", className)}
+      {...props}
+    />
+  )
+);
+PopoverTitle.displayName = "PopoverTitle";
+
+const PopoverDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="popover-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+PopoverDescription.displayName = "PopoverDescription";
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverClose,
+  PopoverArrow,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+};

package/src/components/progress.tsx

@@ -4,20 +4,43 @@ import * as React from "react";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { cn } from "../lib/utils";
 
+type ProgressTone = "primary" | "success" | "warning" | "destructive";
+
+type ProgressProps = React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+  tone?: ProgressTone;
+  size?: "sm" | "default" | "lg";
+};
+
+const toneClasses: Record<ProgressTone, string> = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  destructive: "bg-destructive",
+};
+
+const sizeClasses = {
+  sm: "h-1",
+  default: "h-2",
+  lg: "h-3",
+} as const;
+
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  ProgressProps
+>(({ className, value, tone = "primary", size = "default", ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
+    data-slot="progress"
     className={cn(
-      "relative h-2 w-full overflow-hidden rounded-full glass border border-border/50",
+      "relative w-full overflow-hidden rounded-full bg-muted",
+      sizeClasses[size],
       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"
+      data-slot="progress-indicator"
+      className={cn("h-full w-full flex-1 transition-transform duration-500 ease-out", toneClasses[tone])}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>