@bearmenu/ui 0.5.1 → 0.6.0

package/src/components/searchable-select.tsx

@@ -46,11 +46,9 @@ export function SearchableSelect({
   onSearchChange,
 }: SearchableSelectProps) {
   const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
 
   const selectedOption = options.find((opt) => opt.value === value);
-
-  // Fallback: if we have a value but no matching option, display the value itself
-  // This handles the case where the selected concept hasn't been fetched yet
   const displayLabel = selectedOption?.label || (value ? value : undefined);
 
   const handleSelect = (selectedValue: string) => {
@@ -58,77 +56,75 @@ export function SearchableSelect({
     setOpen(false);
   };
 
-  const handleClear = (e: React.MouseEvent | React.KeyboardEvent) => {
-    e.stopPropagation();
-    onValueChange(undefined);
-  };
-
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          className={cn(
-            "w-full justify-between h-10",
-            !value && "text-muted-foreground",
-            className
-          )}
-          disabled={disabled}
-        >
-          <span className="truncate">{displayLabel || placeholder}</span>
-          <div className="flex items-center gap-1">
-            {value && (
-              <div
-                role="button"
-                tabIndex={0}
-                className="rounded-full p-0.5 hover:bg-accent cursor-pointer"
-                onClick={handleClear}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleClear(e);
-                  }
-                }}
-              >
-                <X className="h-3 w-3" />
-              </div>
+    <div className={cn("relative", 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",
+              value && "pr-16",
+              !value && "text-muted-foreground"
             )}
-            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
-          </div>
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-full p-0" align="start">
-        <Command shouldFilter={!onSearchChange}>
-          <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",
-                      value === option.value ? "opacity-100" : "opacity-0"
-                    )}
-                  />
-                  <div className="flex flex-col">
-                    <span>{option.label}</span>
-                    {option.description && (
-                      <span className="text-xs text-muted-foreground">{option.description}</span>
-                    )}
-                  </div>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
+            disabled={disabled}
+          >
+            <span className="truncate">{displayLabel || placeholder}</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"
+        >
+          <Command shouldFilter={!onSearchChange}>
+            <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 size-4",
+                        value === option.value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                    <div className="flex flex-col">
+                      <span>{option.label}</span>
+                      {option.description && (
+                        <span className="text-xs text-muted-foreground">{option.description}</span>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      {value && !disabled && (
+        <button
+          type="button"
+          aria-label="Clear selection"
+          onClick={(e) => {
+            e.stopPropagation();
+            onValueChange(undefined);
+          }}
+          className="absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors"
+        >
+          <X className="size-3.5" />
+        </button>
+      )}
+    </div>
   );
 }

package/src/components/select.tsx

@@ -2,30 +2,44 @@
 
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "../lib/utils";
 
 const Select = SelectPrimitive.Root;
-
 const SelectGroup = SelectPrimitive.Group;
-
 const SelectValue = SelectPrimitive.Value;
 
+const selectTriggerVariants = cva(
+  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-medium text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3",
+        default: "h-11 px-4 py-2",
+        lg: "h-12 px-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
+    VariantProps<typeof selectTriggerVariants>
+>(({ className, size, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
-    className={cn(
-      "flex h-11 w-full items-center justify-between rounded-xl bg-surface border border-border px-4 py-2 text-sm font-medium text-muted-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 hover:border-foreground/20 hover:text-foreground",
-      className
-    )}
+    data-slot="select-trigger"
+    className={cn(selectTriggerVariants({ size }), className)}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4" />
+      <ChevronDown className="size-4 opacity-60" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -40,7 +54,7 @@ const SelectScrollUpButton = React.forwardRef<
     className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="size-4" />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -54,7 +68,7 @@ const SelectScrollDownButton = React.forwardRef<
     className={cn("flex cursor-default items-center justify-center py-1", className)}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="size-4" />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
@@ -66,8 +80,9 @@ const SelectContent = React.forwardRef<
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
+      data-slot="select-content"
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card text-popover-foreground shadow-lg 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",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg 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",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -78,7 +93,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1 flex flex-col gap-1",
+          "p-1 flex flex-col gap-0.5",
           position === "popper" &&
             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
@@ -97,7 +112,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("py-1.5 pl-8 pr-2 text-xs font-semibold text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -109,18 +124,18 @@ const SelectItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
+    data-slot="select-item"
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary data-[state=checked]:font-medium",
+      "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <Check className="size-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));
@@ -132,7 +147,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
 ));

package/src/components/selection-bar.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SelectionBar } from "./selection-bar";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/SelectionBar",
+  component: SelectionBar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof SelectionBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[36rem]">
+      <SelectionBar count={3} onClear={() => {}} itemNoun="row">
+        <Button size="sm" variant="outline">
+          Archive
+        </Button>
+        <Button size="sm" variant="destructive">
+          Delete
+        </Button>
+      </SelectionBar>
+    </div>
+  ),
+};
+
+export const SingleSelection: Story = {
+  render: () => (
+    <div className="w-[36rem]">
+      <SelectionBar count={1} onClear={() => {}} itemNoun="file">
+        <Button size="sm">Download</Button>
+      </SelectionBar>
+    </div>
+  ),
+};

package/src/components/selection-bar.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../lib/utils";
+
+type SelectionBarProps = React.HTMLAttributes<HTMLDivElement> & {
+  count: number;
+  /** Hide bar when count is 0. Defaults to true. */
+  hideWhenEmpty?: boolean;
+  onClear?: () => void;
+  itemNoun?: string;
+};
+
+const SelectionBar = React.forwardRef<HTMLDivElement, SelectionBarProps>(
+  (
+    {
+      className,
+      count,
+      hideWhenEmpty = true,
+      onClear,
+      itemNoun = "item",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    if (hideWhenEmpty && count <= 0) return null;
+    const noun = count === 1 ? itemNoun : `${itemNoun}s`;
+
+    return (
+      <div
+        ref={ref}
+        role="region"
+        aria-label={`${count} ${noun} selected`}
+        data-slot="selection-bar"
+        className={cn(
+          "flex w-full items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 shadow-lg",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+          {onClear && (
+            <button
+              type="button"
+              aria-label="Clear selection"
+              onClick={onClear}
+              className="inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              <X className="size-4" />
+            </button>
+          )}
+          <span aria-live="polite">
+            {count} {noun} selected
+          </span>
+        </div>
+        {children && <div className="ml-auto flex items-center gap-2">{children}</div>}
+      </div>
+    );
+  }
+);
+SelectionBar.displayName = "SelectionBar";
+
+export { SelectionBar };

package/src/components/separator.tsx

@@ -10,11 +10,14 @@ const Separator = React.forwardRef<
 >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
   <SeparatorPrimitive.Root
     ref={ref}
+    data-slot="separator"
     decorative={decorative}
     orientation={orientation}
     className={cn(
-      "shrink-0 bg-gradient-to-r from-transparent via-border to-transparent backdrop-blur-sm",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      "shrink-0",
+      orientation === "horizontal"
+        ? "h-px w-full bg-gradient-to-r from-transparent via-border to-transparent"
+        : "h-full w-px bg-gradient-to-b from-transparent via-border to-transparent",
       className
     )}
     {...props}

package/src/components/sheet.tsx

@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-[1000] gap-4 glass bg-background p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
   {
     variants: {
       side: {

package/src/components/skeleton.tsx

@@ -6,8 +6,8 @@ function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>)
     <div
       data-slot="skeleton"
       className={cn(
-        "animate-pulse rounded-xl glass border border-border/30 relative overflow-hidden",
-        "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
+        "relative overflow-hidden rounded-xl bg-muted",
+        "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-foreground/[0.04] before:to-transparent",
         className
       )}
       {...props}

package/src/components/slider.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Slider } from "./slider";
+
+describe("Slider", () => {
+  it("renders a single thumb for a scalar default value", () => {
+    render(<Slider defaultValue={[50]} aria-label="volume" />);
+    expect(screen.getAllByRole("slider")).toHaveLength(1);
+  });
+
+  it("renders N thumbs for an N-length value array (range slider)", () => {
+    render(<Slider defaultValue={[20, 80]} aria-label="range" />);
+    expect(screen.getAllByRole("slider")).toHaveLength(2);
+  });
+
+  it("renders thumbs equal to length of controlled value", () => {
+    render(<Slider value={[10, 40, 70]} onValueChange={() => {}} aria-label="three" />);
+    expect(screen.getAllByRole("slider")).toHaveLength(3);
+  });
+
+  it("fires onValueChange via ArrowRight", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Slider defaultValue={[50]} onValueChange={onValueChange} aria-label="x" />);
+    screen.getByRole("slider").focus();
+    await user.keyboard("{ArrowRight}");
+    expect(onValueChange).toHaveBeenCalled();
+  });
+
+  it("sets data-disabled when disabled", () => {
+    const { container } = render(
+      <Slider defaultValue={[50]} disabled aria-label="x" />
+    );
+    expect(container.querySelector("[data-slot=slider]")).toHaveAttribute("data-disabled");
+  });
+
+  it("respects min/max bounds in aria attributes", () => {
+    render(<Slider defaultValue={[5]} min={0} max={10} aria-label="x" />);
+    const thumb = screen.getByRole("slider");
+    expect(thumb).toHaveAttribute("aria-valuemin", "0");
+    expect(thumb).toHaveAttribute("aria-valuemax", "10");
+    expect(thumb).toHaveAttribute("aria-valuenow", "5");
+  });
+});

package/src/components/slider.tsx

@@ -7,18 +7,37 @@ import { cn } from "../lib/utils";
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full glass border border-border/50">
-      <SliderPrimitive.Range className="absolute h-full bg-white shadow-lg" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-primary ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:shadow-lg hover:shadow-primary/20 hover:scale-110" />
-  </SliderPrimitive.Root>
-));
+>(({ className, value, defaultValue, ...props }, ref) => {
+  const thumbCount = React.useMemo(() => {
+    if (Array.isArray(value)) return value.length;
+    if (Array.isArray(defaultValue)) return defaultValue.length;
+    return 1;
+  }, [value, defaultValue]);
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      data-slot="slider"
+      value={value}
+      defaultValue={defaultValue}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted">
+        <SliderPrimitive.Range className="absolute h-full bg-primary" />
+      </SliderPrimitive.Track>
+      {Array.from({ length: thumbCount }, (_, i) => (
+        <SliderPrimitive.Thumb
+          key={i}
+          className="block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:scale-110"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+});
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };

package/src/components/sliding-panels.tsx

@@ -46,20 +46,22 @@ export const SlidingPanels = ({
   }, [currentIndex]);
 
   const handleBack = () => {
-    if (currentIndex > 0) {
-      const previousPanel = panels[currentIndex - 1];
-      if (currentPanelData?.onBack) {
-        currentPanelData.onBack();
-      } else {
-        onPanelChange(previousPanel.id);
-      }
+    const previousPanel = panels[currentIndex - 1];
+    if (!previousPanel) return;
+    if (currentPanelData?.onBack) {
+      currentPanelData.onBack();
+    } else {
+      onPanelChange(previousPanel.id);
     }
   };
 
   return (
     <div
-      className={cn("relative overflow-hidden transition-[height] duration-300", className)}
-      style={{ height: containerHeight }}
+      className={cn(
+        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        className
+      )}
+      style={{ height: containerHeight, overflowClipMargin: "8px" }}
     >
       {panels.map((panel, index) => {
         const isActive = panel.id === currentPanel;
@@ -73,10 +75,10 @@ export const SlidingPanels = ({
               panelRefs.current[index] = el;
             }}
             className={cn(
-              "absolute top-0 left-0 w-full transition-transform duration-300",
+              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
               isActive && "translate-x-0",
-              isLeft && "-translate-x-full",
-              isRight && "translate-x-full"
+              isLeft && "-translate-x-[calc(100%+8px)]",
+              isRight && "translate-x-[calc(100%+8px)]"
             )}
             aria-hidden={!isActive}
           >

package/src/components/spinner.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Spinner } from "./spinner";
+
+const meta = {
+  title: "Components/Spinner",
+  component: Spinner,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="xs" />
+      <Spinner size="sm" />
+      <Spinner size="default" />
+      <Spinner size="lg" />
+      <Spinner size="xl" />
+    </div>
+  ),
+};
+
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Spinner tone="default" />
+      <Spinner tone="primary" />
+      <Spinner tone="destructive" />
+    </div>
+  ),
+};