@bearmenu/ui 0.5.1 → 0.6.0

package/src/components/button.test.tsx

@@ -0,0 +1,174 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Button, buttonVariants } from "./button";
+
+// ─── buttonVariants CVA ───────────────────────────────────────────────────────
+
+describe("buttonVariants", () => {
+  it("returns default variant + size classes when called with no args", () => {
+    const result = buttonVariants({});
+    expect(result).toContain("bg-primary");
+    expect(result).toContain("text-primary-foreground");
+    expect(result).toContain("h-11");
+  });
+
+  it("maps variant prop to correct classes", () => {
+    expect(buttonVariants({ variant: "default" })).toContain("bg-primary");
+    expect(buttonVariants({ variant: "destructive" })).toContain("bg-destructive");
+    expect(buttonVariants({ variant: "outline" })).toContain("border-border");
+    expect(buttonVariants({ variant: "secondary" })).toContain("bg-secondary");
+    expect(buttonVariants({ variant: "ghost" })).toContain("hover:bg-accent");
+    expect(buttonVariants({ variant: "link" })).toContain("text-primary");
+    expect(buttonVariants({ variant: "glass" })).toContain("glass");
+    expect(buttonVariants({ variant: "brown" })).toContain("bg-brown");
+    expect(buttonVariants({ variant: "antagonist" })).toContain("bg-primary-foreground");
+  });
+
+  it("maps size prop to correct classes", () => {
+    expect(buttonVariants({ size: "xs" })).toContain("h-8");
+    expect(buttonVariants({ size: "sm" })).toContain("h-9");
+    expect(buttonVariants({ size: "default" })).toContain("h-11");
+    expect(buttonVariants({ size: "lg" })).toContain("h-12");
+    expect(buttonVariants({ size: "icon" })).toContain("rounded-full");
+    expect(buttonVariants({ size: "icon-xs" })).toContain("h-8");
+    expect(buttonVariants({ size: "icon-sm" })).toContain("h-9");
+    expect(buttonVariants({ size: "icon-lg" })).toContain("h-12");
+  });
+
+  it("applies fullWidth class when fullWidth is true", () => {
+    expect(buttonVariants({ fullWidth: true })).toContain("w-full");
+    expect(buttonVariants({ fullWidth: false })).not.toContain("w-full");
+  });
+});
+
+// ─── <Button> component ───────────────────────────────────────────────────────
+
+describe("Button component", () => {
+  it("renders as <button> by default", () => {
+    render(<Button>click</Button>);
+    const el = screen.getByRole("button", { name: "click" });
+    expect(el.tagName).toBe("BUTTON");
+  });
+
+  it("renders children correctly", () => {
+    render(<Button>label content</Button>);
+    expect(screen.getByText("label content")).toBeDefined();
+  });
+
+  it("forwards ref to the underlying button element", () => {
+    const ref = { current: null as HTMLButtonElement | null };
+    render(<Button ref={ref}>ref</Button>);
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("renders as Slot child when asChild is true", () => {
+    render(
+      <Button asChild>
+        <a href="/x">link</a>
+      </Button>
+    );
+    const el = screen.getByRole("link", { name: "link" });
+    expect(el.tagName).toBe("A");
+    expect(el.getAttribute("href")).toBe("/x");
+  });
+
+  it("applies data-slot=button attribute", () => {
+    render(<Button>x</Button>);
+    expect(screen.getByRole("button").getAttribute("data-slot")).toBe("button");
+  });
+
+  // Disabled / loading states
+
+  it("disables the button when disabled prop is set", () => {
+    render(<Button disabled>x</Button>);
+    expect((screen.getByRole("button") as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("disables the button and sets aria-busy when isLoading", () => {
+    render(<Button isLoading>x</Button>);
+    const el = screen.getByRole("button");
+    expect((el as HTMLButtonElement).disabled).toBe(true);
+    expect(el.getAttribute("aria-busy")).toBe("true");
+  });
+
+  it("renders spinner when isLoading", () => {
+    const { container } = render(<Button isLoading>x</Button>);
+    expect(container.querySelector(".animate-spin")).not.toBeNull();
+  });
+
+  it("does not set aria-busy when not loading", () => {
+    render(<Button>x</Button>);
+    expect(screen.getByRole("button").getAttribute("aria-busy")).toBeNull();
+  });
+
+  // Click behavior
+
+  it("calls onClick when clicked", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(<Button onClick={onClick}>x</Button>);
+    await user.click(screen.getByRole("button"));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not call onClick when disabled", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Button onClick={onClick} disabled>
+        x
+      </Button>
+    );
+    await user.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it("does not call onClick when loading", async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    render(
+      <Button onClick={onClick} isLoading>
+        x
+      </Button>
+    );
+    await user.click(screen.getByRole("button"));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  // Class output
+
+  it("applies variant class from variant prop", () => {
+    render(<Button variant="destructive">x</Button>);
+    expect(screen.getByRole("button").className).toContain("bg-destructive");
+  });
+
+  it("applies size class from size prop", () => {
+    render(<Button size="sm">x</Button>);
+    expect(screen.getByRole("button").className).toContain("h-9");
+  });
+
+  it("applies fullWidth class when fullWidth is true", () => {
+    render(<Button fullWidth>x</Button>);
+    expect(screen.getByRole("button").className).toContain("w-full");
+  });
+
+  it("merges className via twMerge (overrides defaults)", () => {
+    render(<Button className="bg-red-500">x</Button>);
+    const el = screen.getByRole("button");
+    expect(el.className).toContain("bg-red-500");
+    // twMerge strips conflicting bg-primary (but not hover:bg-primary/90)
+    expect(el.className).not.toMatch(/(^|\s)bg-primary(\s|$)/);
+  });
+
+  it("passes through arbitrary HTML attributes", () => {
+    render(
+      <Button id="my-btn" type="submit">
+        x
+      </Button>
+    );
+    const el = screen.getByRole("button") as HTMLButtonElement;
+    expect(el.id).toBe("my-btn");
+    expect(el.type).toBe("submit");
+  });
+});

package/src/components/button.tsx

@@ -1,40 +1,50 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
 import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-3xl text-sm font-medium 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
   {
     variants: {
       variant: {
         default:
-          "bg-primary backdrop-blur-sm text-primary-foreground shadow-lg hover:bg-primary/85 border border-primary/20 transition-colors duration-200",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 hover:shadow",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-lg hover:bg-destructive/90 hover:shadow-destructive/20 backdrop-blur-sm border border-destructive/20",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/85 hover:shadow",
         outline:
-          "border border-border bg-sidebar backdrop-blur-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-foreground/20 hover:shadow-lg",
+          "border border-border bg-background hover:bg-accent hover:text-accent-foreground hover:border-accent",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-lg hover:bg-secondary/90 hover:shadow-secondary/20 backdrop-blur-sm border border-secondary/20",
-        ghost: "hover:bg-foreground/10 hover:text-foreground transition-colors duration-200",
-        link: "text-primary underline-offset-4 hover:underline hover:text-primary/80",
-        glass: "glass glass-hover text-foreground hover:text-accent-foreground",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        glass: "glass glass-hover text-foreground",
         brown:
-          "bg-[#482E1F] text-white shadow-lg hover:bg-[#352317] hover:shadow-[#482E1F]/20 backdrop-blur-sm border border-[#482E1F]/30 transition-all duration-300",
+          "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:
-          "bg-primary-foreground text-primary shadow-lg hover:bg-primary-foreground/90 hover:shadow-primary-foreground/20 backdrop-blur-sm border border-primary-foreground/20 transition-all duration-300",
+          "bg-primary-foreground text-primary shadow-sm hover:bg-accent hover:text-accent-foreground border border-border hover:border-accent",
       },
       size: {
-        default: "h-11 px-6 py-2",
+        xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
         sm: "h-9 rounded-lg px-4",
-        lg: "h-12 rounded-xl px-8",
-        icon: "h-11 w-11",
+        default: "h-11 px-6 py-2",
+        lg: "h-12 rounded-2xl px-8",
+        icon: "h-11 w-11 rounded-full",
+        "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
+        "icon-sm": "h-9 w-9 rounded-full",
+        "icon-lg": "h-12 w-12 rounded-full",
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "",
       },
     },
     defaultVariants: {
       variant: "default",
       size: "default",
+      fullWidth: false,
     },
   }
 );
@@ -44,6 +54,7 @@ export interface ButtonProps
   asChild?: boolean;
   haptic?: boolean;
   hapticStyle?: "light" | "medium" | "heavy";
+  isLoading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -52,10 +63,14 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       className,
       variant,
       size,
+      fullWidth,
       asChild = false,
       haptic = true,
       hapticStyle = "light",
+      isLoading = false,
+      disabled,
       onClick,
+      children,
       ...props
     },
     ref
@@ -64,28 +79,36 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const { trigger } = useHaptic();
     const [isMounted, setIsMounted] = React.useState(false);
 
-    // Track mounted state to prevent hydration issues
     React.useEffect(() => {
       setIsMounted(true);
     }, []);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      // Only trigger haptic feedback after component has mounted to prevent hydration issues
       if (haptic && isMounted) {
         trigger(hapticStyle);
       }
-
-      // Call the original onClick handler
       onClick?.(event);
     };
 
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size, fullWidth, className }))}
         ref={ref}
         onClick={handleClick}
+        disabled={disabled || isLoading}
+        aria-busy={isLoading || undefined}
         {...props}
-      />
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="animate-spin" aria-hidden="true" />
+            {!asChild && children}
+          </>
+        ) : (
+          children
+        )}
+      </Comp>
     );
   }
 );

package/src/components/calendar.tsx

@@ -25,7 +25,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(9)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -168,7 +168,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square h-(--cell-size) w-(--cell-size) size-auto min-w-0 flex-col items-center justify-center gap-1 rounded-md p-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

package/src/components/card.tsx

@@ -1,21 +1,42 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 import { textVariants } from "./text";
 
-type CardVariant = "glass" | "surface";
+const cardVariants = cva("rounded-3xl text-card-foreground transition-colors", {
+  variants: {
+    variant: {
+      surface: "bg-card border border-border",
+      glass: "glass",
+      outline: "bg-transparent border border-border",
+      muted: "bg-muted border border-transparent",
+    },
+    size: {
+      sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
+      default:
+        "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:p-6 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-6 [&_[data-slot=card-footer]]:pt-0",
+      lg: "[&_[data-slot=card-header]]:p-8 [&_[data-slot=card-content]]:p-8 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-8 [&_[data-slot=card-footer]]:pt-0",
+    },
+    interactive: {
+      true: "cursor-pointer hover:border-primary/40 hover:-translate-y-0.5 transition-[transform,border-color] duration-200",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "surface",
+    size: "default",
+    interactive: false,
+  },
+});
 
 const Card = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { variant?: CardVariant }
->(({ className, variant = "glass", ...props }, ref) => (
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
+>(({ className, variant, size, interactive, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn(
-      variant === "glass"
-        ? "glass rounded-[22px] border border-transparent text-card-foreground transition-[transform,border-color] duration-300 [@media(hover:hover)]:hover:-translate-y-0.5 hover:border-primary/40"
-        : "bg-surface rounded-[22px] border border-border text-card-foreground transition-all duration-200 hover:border-primary/40 hover:-translate-y-0.5",
-      className
-    )}
+    data-slot="card"
+    className={cn(cardVariants({ variant, size, interactive }), className)}
     {...props}
   />
 ));
@@ -23,7 +44,12 @@ Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
   )
 );
 CardHeader.displayName = "CardHeader";
@@ -32,6 +58,7 @@ const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="card-title"
       className={cn(textVariants({ variant: "h4", wrap: "balance" }), className)}
       {...props}
     />
@@ -43,6 +70,7 @@ const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
+      data-slot="card-description"
       className={cn("text-sm", textVariants({ color: "muted", wrap: "pretty" }), className)}
       {...props}
     />
@@ -52,7 +80,7 @@ CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+    <div ref={ref} data-slot="card-content" className={cn("p-6 pt-0", className)} {...props} />
   )
 );
 CardContent.displayName = "CardContent";
@@ -71,9 +99,23 @@ CardAction.displayName = "CardAction";
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+    <div
+      ref={ref}
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
   )
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+  cardVariants,
+};

package/src/components/carousel.tsx

@@ -16,6 +16,8 @@ type CarouselProps = {
   opts?: CarouselOptions;
   plugins?: CarouselPlugin;
   orientation?: "horizontal" | "vertical";
+  /** Gap between slides in pixels. Defaults to 16. */
+  gap?: number;
   setApi?: (api: CarouselApi) => void;
 };
 
@@ -24,19 +26,21 @@ type CarouselContextProps = {
   api: ReturnType<typeof useEmblaCarousel>[1];
   scrollPrev: () => void;
   scrollNext: () => void;
+  scrollTo: (index: number) => void;
   canScrollPrev: boolean;
   canScrollNext: boolean;
+  selectedIndex: number;
+  slideCount: number;
+  gap: number;
 } & CarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
   const context = React.useContext(CarouselContext);
-
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
-
   return context;
 }
 
@@ -45,6 +49,7 @@ function Carousel({
   opts,
   setApi,
   plugins,
+  gap = 16,
   className,
   children,
   ...props
@@ -58,11 +63,15 @@ function Carousel({
   );
   const [canScrollPrev, setCanScrollPrev] = React.useState(false);
   const [canScrollNext, setCanScrollNext] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  const [slideCount, setSlideCount] = React.useState(0);
 
   const onSelect = React.useCallback((api: CarouselApi) => {
     if (!api) return;
     setCanScrollPrev(api.canScrollPrev());
     setCanScrollNext(api.canScrollNext());
+    setSelectedIndex(api.selectedScrollSnap());
+    setSlideCount(api.scrollSnapList().length);
   }, []);
 
   const scrollPrev = React.useCallback(() => {
@@ -73,6 +82,13 @@ function Carousel({
     api?.scrollNext();
   }, [api]);
 
+  const scrollTo = React.useCallback(
+    (index: number) => {
+      api?.scrollTo(index);
+    },
+    [api]
+  );
+
   const handleKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLDivElement>) => {
       if (event.key === "ArrowLeft") {
@@ -96,7 +112,6 @@ function Carousel({
     onSelect(api);
     api.on("reInit", onSelect);
     api.on("select", onSelect);
-
     return () => {
       api?.off("select", onSelect);
     };
@@ -106,13 +121,17 @@ function Carousel({
     <CarouselContext.Provider
       value={{
         carouselRef,
-        api: api,
+        api,
         opts,
         orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        gap,
         scrollPrev,
         scrollNext,
+        scrollTo,
         canScrollPrev,
         canScrollNext,
+        selectedIndex,
+        slideCount,
       }}
     >
       <div
@@ -130,31 +149,36 @@ function Carousel({
 }
 
 function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation, gap } = useCarousel();
 
   return (
     <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
       <div
-        className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+        className={cn("flex", orientation === "horizontal" ? "" : "flex-col", className)}
+        style={
+          orientation === "horizontal"
+            ? { marginLeft: `-${gap}px` }
+            : { marginTop: `-${gap}px` }
+        }
         {...props}
       />
     </div>
   );
 }
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
-  const { orientation } = useCarousel();
+function CarouselItem({ className, style, ...props }: React.ComponentProps<"div">) {
+  const { orientation, gap } = useCarousel();
 
   return (
     <div
       role="group"
       aria-roledescription="slide"
       data-slot="carousel-item"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
+      className={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
+      style={{
+        ...(orientation === "horizontal" ? { paddingLeft: `${gap}px` } : { paddingTop: `${gap}px` }),
+        ...style,
+      }}
       {...props}
     />
   );
@@ -220,6 +244,51 @@ function CarouselNext({
   );
 }
 
+function CarouselDots({ className, ...props }: React.ComponentProps<"div">) {
+  const { slideCount, selectedIndex, scrollTo } = useCarousel();
+
+  if (slideCount === 0) return null;
+
+  return (
+    <div
+      data-slot="carousel-dots"
+      className={cn("flex items-center justify-center gap-1.5", className)}
+      {...props}
+    >
+      {Array.from({ length: slideCount }).map((_, i) => (
+        <button
+          key={i}
+          type="button"
+          aria-label={`Go to slide ${i + 1}`}
+          aria-current={i === selectedIndex ? "true" : undefined}
+          onClick={() => scrollTo(i)}
+          className={cn(
+            "size-2 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            i === selectedIndex ? "w-6 bg-primary" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CarouselCounter({ className, ...props }: React.ComponentProps<"div">) {
+  const { slideCount, selectedIndex } = useCarousel();
+
+  if (slideCount === 0) return null;
+
+  return (
+    <div
+      data-slot="carousel-counter"
+      aria-live="polite"
+      className={cn("text-xs tabular-nums text-muted-foreground", className)}
+      {...props}
+    >
+      {selectedIndex + 1} / {slideCount}
+    </div>
+  );
+}
+
 export {
   type CarouselApi,
   Carousel,
@@ -227,4 +296,7 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
+  CarouselDots,
+  CarouselCounter,
+  useCarousel,
 };