@bearmenu/ui 0.5.2 → 0.6.0

package/src/components/tabs.test.tsx

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+
+function Triplet({ defaultValue = "a" }: { defaultValue?: string }) {
+  return (
+    <Tabs defaultValue={defaultValue}>
+      <TabsList>
+        <TabsTrigger value="a">A</TabsTrigger>
+        <TabsTrigger value="b">B</TabsTrigger>
+        <TabsTrigger value="c">C</TabsTrigger>
+      </TabsList>
+      <TabsContent value="a">Panel A</TabsContent>
+      <TabsContent value="b">Panel B</TabsContent>
+      <TabsContent value="c">Panel C</TabsContent>
+    </Tabs>
+  );
+}
+
+describe("Tabs", () => {
+  it("renders tablist with the right number of tabs", () => {
+    render(<Triplet />);
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+  });
+
+  it("first tab is active by default and only its panel is visible", () => {
+    render(<Triplet />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0].getAttribute("data-state")).toBe("active");
+    expect(tabs[1].getAttribute("data-state")).toBe("inactive");
+    expect(screen.getByText("Panel A")).toBeInTheDocument();
+    expect(screen.queryByText("Panel B")).toBeNull();
+  });
+
+  it("switches panel when a different tab is clicked", async () => {
+    const user = userEvent.setup();
+    render(<Triplet />);
+    await user.click(screen.getByRole("tab", { name: "B" }));
+    expect(screen.getByText("Panel B")).toBeInTheDocument();
+    expect(screen.queryByText("Panel A")).toBeNull();
+  });
+
+  it("wires aria-controls and aria-labelledby between tab and panel", () => {
+    render(<Triplet />);
+    const tabA = screen.getByRole("tab", { name: "A" });
+    const panelA = screen.getByText("Panel A");
+    expect(tabA.getAttribute("aria-controls")).toBe(panelA.id);
+    expect(panelA.getAttribute("aria-labelledby")).toBe(tabA.id);
+  });
+
+  it("supports ArrowRight to focus next tab", async () => {
+    const user = userEvent.setup();
+    render(<Triplet />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[0].focus();
+    await user.keyboard("{ArrowRight}");
+    expect(tabs[1]).toHaveFocus();
+  });
+
+  it("supports ArrowLeft to focus previous tab", async () => {
+    const user = userEvent.setup();
+    render(<Triplet defaultValue="b" />);
+    const tabs = screen.getAllByRole("tab");
+    tabs[1].focus();
+    await user.keyboard("{ArrowLeft}");
+    expect(tabs[0]).toHaveFocus();
+  });
+
+  it("fires onValueChange when tab changes", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Tabs defaultValue="a" onValueChange={onValueChange}>
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b">B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">A</TabsContent>
+        <TabsContent value="b">B</TabsContent>
+      </Tabs>
+    );
+    await user.click(screen.getByRole("tab", { name: "B" }));
+    expect(onValueChange).toHaveBeenCalledWith("b");
+  });
+
+  it("supports disabled triggers", async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">A</TabsTrigger>
+          <TabsTrigger value="b" disabled>
+            B
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Panel A</TabsContent>
+        <TabsContent value="b">Panel B</TabsContent>
+      </Tabs>
+    );
+    const tabB = screen.getByRole("tab", { name: "B" });
+    expect(tabB.getAttribute("data-disabled")).not.toBeNull();
+    await user.click(tabB);
+    expect(screen.getByText("Panel A")).toBeInTheDocument();
+  });
+});

package/src/components/tabs.tsx

@@ -5,47 +5,93 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cn } from "../lib/utils";
 
 type TabsVariant = "pill" | "underline";
+type TabsOrientation = "horizontal" | "vertical";
 
-const TabsVariantContext = React.createContext<TabsVariant>("pill");
+type TabsContextValue = {
+  variant: TabsVariant;
+  orientation: TabsOrientation;
+};
 
-const Tabs = TabsPrimitive.Root;
+const TabsContext = React.createContext<TabsContextValue>({
+  variant: "pill",
+  orientation: "horizontal",
+});
+
+const Tabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, orientation = "horizontal", ...props }, ref) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    data-slot="tabs"
+    orientation={orientation}
+    className={cn(
+      "flex",
+      orientation === "vertical" ? "flex-row gap-4" : "flex-col gap-2",
+      className
+    )}
+    {...props}
+  />
+));
+Tabs.displayName = TabsPrimitive.Root.displayName;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsVariant;
+    /** Make horizontal lists scrollable when overflowing. Default true for underline, false for pill. */
+    scrollable?: boolean;
   }
->(({ className, variant = "pill", children, ...props }, ref) => (
-  <TabsVariantContext.Provider value={variant}>
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn(
-        variant === "pill"
-          ? "inline-flex h-12 items-center justify-center gap-2 rounded-3xl bg-sidebar p-1 text-muted-foreground border border-border/50 shadow-lg"
-          : "inline-flex h-auto items-center gap-0 rounded-none bg-transparent border-b border-border p-0 shadow-none text-muted-foreground",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </TabsPrimitive.List>
-  </TabsVariantContext.Provider>
-));
+>(({ className, variant = "pill", scrollable, children, ...props }, ref) => {
+  const orientation: TabsOrientation = props["aria-orientation"] === "vertical" ? "vertical" : "horizontal";
+  const allowScroll = scrollable ?? orientation === "horizontal";
+
+  return (
+    <TabsContext.Provider value={{ variant, orientation }}>
+      <TabsPrimitive.List
+        ref={ref}
+        data-slot="tabs-list"
+        className={cn(
+          variant === "pill"
+            ? orientation === "vertical"
+              ? "inline-flex flex-col items-stretch gap-1 rounded-2xl bg-muted p-1 text-muted-foreground"
+              : "inline-flex h-11 max-w-full items-center justify-start gap-1 rounded-2xl bg-muted p-1 text-muted-foreground"
+            : orientation === "vertical"
+              ? "inline-flex flex-col items-stretch gap-0 border-r border-border bg-transparent text-muted-foreground"
+              : "inline-flex h-auto max-w-full items-center gap-0 border-b border-border bg-transparent text-muted-foreground",
+          allowScroll &&
+            "overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&>*]:shrink-0",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.List>
+    </TabsContext.Provider>
+  );
+});
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => {
-  const variant = React.useContext(TabsVariantContext);
+  const { variant, orientation } = React.useContext(TabsContext);
 
   return (
     <TabsPrimitive.Trigger
       ref={ref}
+      data-slot="tabs-trigger"
       className={cn(
-        variant === "pill"
-          ? "inline-flex items-center justify-center whitespace-nowrap rounded-2xl px-4 py-2 text-sm font-medium 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 data-[state=active]:bg-primary/90 data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg data-[state=active]:backdrop-blur-md data-[state=active]:border data-[state=active]:border-border/50 hover:bg-accent/50 hover:text-accent-foreground [@media(pointer:coarse)]:active:scale-95"
-          : "relative inline-flex items-center justify-center whitespace-nowrap rounded-none px-4 h-12 text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none text-muted-foreground hover:text-foreground/80 cursor-pointer",
+        "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        variant === "pill" &&
+          "rounded-xl px-4 py-1.5 text-muted-foreground hover:text-foreground data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        variant === "underline" &&
+          orientation === "horizontal" &&
+          "relative h-11 rounded-none border-b-2 border-transparent px-4 text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground",
+        variant === "underline" &&
+          orientation === "vertical" &&
+          "relative rounded-none border-r-2 border-transparent px-4 py-2 -mr-px text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground justify-start",
         className
       )}
       {...props}
@@ -60,8 +106,9 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
+    data-slot="tabs-content"
     className={cn(
-      "mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "flex-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-md",
       className
     )}
     {...props}

package/src/components/tag-group.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TagGroup } from "./tag-group";
+import { Tag } from "./tag";
+
+const meta = {
+  title: "Components/TagGroup",
+  component: TagGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof TagGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <TagGroup label="Tags">
+      <Tag>Design</Tag>
+      <Tag>Engineering</Tag>
+      <Tag>Product</Tag>
+      <Tag>Research</Tag>
+    </TagGroup>
+  ),
+};
+
+export const VisibleLabel: Story = {
+  render: () => (
+    <TagGroup label="Filters" srLabel={false}>
+      <Tag variant="primary" onRemove={() => {}}>
+        Active
+      </Tag>
+      <Tag variant="primary" onRemove={() => {}}>
+        Last 7 days
+      </Tag>
+      <Tag variant="primary" onRemove={() => {}}>
+        Owner: me
+      </Tag>
+    </TagGroup>
+  ),
+};

package/src/components/tag-group.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const TagGroup = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+    /** Visually hide the label, keep accessible. */
+    srLabel?: boolean;
+  }
+>(({ className, label, srLabel = true, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="group"
+    aria-label={label}
+    data-slot="tag-group"
+    className={cn("flex flex-wrap items-center gap-1.5", className)}
+    {...props}
+  >
+    {label && !srLabel && (
+      <span className="mr-1 text-xs font-medium text-muted-foreground">{label}</span>
+    )}
+    {children}
+  </div>
+));
+TagGroup.displayName = "TagGroup";
+
+export { TagGroup };

package/src/components/tag.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "./tag";
+
+const meta = {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>Default</Tag>
+      <Tag variant="primary">Primary</Tag>
+      <Tag variant="success">Success</Tag>
+      <Tag variant="warning">Warning</Tag>
+      <Tag variant="destructive">Destructive</Tag>
+      <Tag variant="outline">Outline</Tag>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag size="sm">Small</Tag>
+      <Tag size="default">Default</Tag>
+      <Tag size="lg">Large</Tag>
+    </div>
+  ),
+};
+
+export const Removable: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag variant="primary" onRemove={() => {}}>
+        React
+      </Tag>
+      <Tag variant="primary" onRemove={() => {}}>
+        TypeScript
+      </Tag>
+      <Tag variant="primary" onRemove={() => {}}>
+        Tailwind
+      </Tag>
+    </div>
+  ),
+};

package/src/components/tag.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+const tagVariants = cva(
+  "inline-flex items-center gap-1 rounded-full border text-xs font-medium transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-muted text-foreground",
+        primary: "border-primary/30 bg-primary/10 text-primary",
+        success: "border-success/30 bg-success/10 text-success",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        destructive: "border-destructive/30 bg-destructive/10 text-destructive",
+        outline: "border-border bg-transparent text-foreground",
+      },
+      size: {
+        sm: "h-5 px-2 text-[10px]",
+        default: "h-6 px-2.5",
+        lg: "h-7 px-3 text-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+type TagProps = React.HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof tagVariants> & {
+    onRemove?: () => void;
+    removeLabel?: string;
+  };
+
+const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
+  ({ className, variant, size, onRemove, removeLabel = "Remove", children, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="tag"
+      className={cn(tagVariants({ variant, size }), className)}
+      {...props}
+    >
+      {children}
+      {onRemove && (
+        <button
+          type="button"
+          aria-label={removeLabel}
+          onClick={onRemove}
+          className="-mr-0.5 inline-flex size-3.5 items-center justify-center rounded-full transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X className="size-3" />
+        </button>
+      )}
+    </span>
+  )
+);
+Tag.displayName = "Tag";
+
+export { Tag, tagVariants };

package/src/components/text.test.tsx

@@ -26,7 +26,7 @@ describe("textVariants", () => {
     expect(textVariants({ variant: "h3" })).toContain("text-xl");
     expect(textVariants({ variant: "h4" })).toContain("text-lg");
     expect(textVariants({ variant: "body-lg" })).toContain("text-base");
-    expect(textVariants({ variant: "body" })).toContain("text-sm");
+    expect(textVariants({ variant: "body" })).toContain("text-base");
     expect(textVariants({ variant: "body-sm" })).toContain("text-sm");
     expect(textVariants({ variant: "caption" })).toContain("text-xs");
     expect(textVariants({ variant: "label" })).toContain("font-medium");

package/src/components/text.tsx

@@ -11,9 +11,10 @@ const textVariants = cva("", {
       h3: "text-xl font-semibold",
       h4: "text-lg font-semibold leading-none tracking-tight",
       "body-lg": "text-base leading-relaxed",
-      body: "text-sm leading-normal",
+      body: "text-base leading-normal",
       "body-sm": "text-sm leading-relaxed",
-      caption: "text-xs leading-normal",
+      small: "text-sm text-muted-foreground",
+      caption: "text-xs leading-normal text-muted-foreground",
       label: "text-sm font-medium",
       overline: "text-xs font-semibold uppercase tracking-wider",
     },
@@ -89,6 +90,21 @@ type TextOwnProps<T extends TextTag = "p"> = {
 type TextProps<T extends TextTag = "p"> = TextOwnProps<T> &
   Omit<React.ComponentPropsWithoutRef<T>, keyof TextOwnProps<T> | "color">;
 
+const defaultTagForVariant: Record<NonNullable<VariantProps<typeof textVariants>["variant"]>, TextTag> = {
+  display: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  "body-lg": "p",
+  body: "p",
+  "body-sm": "p",
+  small: "p",
+  caption: "span",
+  label: "span",
+  overline: "span",
+};
+
 function Text<T extends TextTag = "p">({
   as,
   variant,
@@ -100,7 +116,7 @@ function Text<T extends TextTag = "p">({
   className,
   ...props
 }: TextProps<T>) {
-  const Comp = (as ?? "p") as React.ElementType;
+  const Comp = (as ?? (variant ? defaultTagForVariant[variant] : "p")) as React.ElementType;
   return (
     <Comp
       className={cn(textVariants({ variant, color, weight, leading, tracking, wrap }), className)}

package/src/components/textarea.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Textarea } from "./textarea";
+
+describe("Textarea", () => {
+  it("renders a textarea", () => {
+    render(<Textarea aria-label="bio" />);
+    expect(screen.getByRole("textbox")).toBeDefined();
+  });
+
+  it("uses text-base (16px) so iOS does not zoom on focus", () => {
+    render(<Textarea aria-label="bio" />);
+    expect(screen.getByRole("textbox").className).toContain("text-base");
+  });
+
+  it("fires onChange when typing", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Textarea aria-label="bio" onChange={onChange} />);
+    await user.type(screen.getByRole("textbox"), "hi");
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  it("respects disabled", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<Textarea aria-label="bio" disabled onChange={onChange} />);
+    await user.type(screen.getByRole("textbox"), "hi");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it("reflects aria-invalid", () => {
+    render(<Textarea aria-label="bio" aria-invalid />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("merges className", () => {
+    render(<Textarea aria-label="bio" className="custom" />);
+    expect(screen.getByRole("textbox").className).toContain("custom");
+  });
+
+  it("forwards ref to the textarea element", () => {
+    const ref = { current: null as HTMLTextAreaElement | null };
+    render(<Textarea aria-label="bio" ref={ref} />);
+    expect(ref.current?.tagName).toBe("TEXTAREA");
+  });
+});

package/src/components/textarea.tsx

@@ -7,8 +7,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
+        data-slot="textarea"
         className={cn(
-          "flex min-h-[80px] w-full rounded-xl border border-border bg-input/50 backdrop-blur-md px-4 py-3 text-base transition-all duration-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input focus-visible:border-accent-foreground/30 focus-visible:shadow-lg focus-visible:shadow-accent/10 disabled:cursor-not-allowed disabled:opacity-50 resize-none",
+          "flex min-h-20 w-full rounded-xl border border-border bg-input/50 px-4 py-3 text-base transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 resize-y aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
           className
         )}
         ref={ref}

package/src/components/toast.tsx

@@ -24,12 +24,13 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl glass p-6 pr-8 shadow-2xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full border border-border/50",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-xl p-6 pr-8 shadow-2xl transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive: "destructive border-destructive/50 bg-destructive text-destructive-foreground",
+        default: "glass text-foreground border border-border/50",
+        destructive:
+          "destructive border border-destructive/60 bg-destructive text-destructive-foreground",
       },
     },
     defaultVariants: {

package/src/components/toggle.tsx

@@ -7,13 +7,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-accent/50 hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors aria-invalid:ring-2 aria-invalid:ring-destructive/40 whitespace-nowrap",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:border-primary",
       },
       size: {
         default: "h-9 px-2 min-w-9",

package/src/components/tooltip.tsx

@@ -4,9 +4,19 @@ import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = ({
+  delayDuration = 200,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => (
+  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
+);
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = ({
+  delayDuration = 200,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) => (
+  <TooltipPrimitive.Root delayDuration={delayDuration} {...props} />
+);
 
 const TooltipTrigger = TooltipPrimitive.Trigger;