@tangle-network/ui 11.17.0 → 11.19.0

package/src/primitives/context-menu.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * Right-click (and long-press) menu with the same surface and item styles as
+ * `DropdownMenu`. Anything reachable here must also be reachable from a
+ * visible control, because touch and keyboard users rarely open it.
+ */
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const menuSurface = cn(
+  "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]",
+  "data-[state=closed]:animate-out data-[state=open]:animate-in",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "motion-reduce:animate-none",
+);
+
+const menuItem =
+  "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & { inset?: boolean }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(menuItem, "data-[state=open]:bg-muted/50", inset && "pl-8", className)}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.SubContent ref={ref} className={cn(menuSurface, className)} {...props} />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content ref={ref} className={cn(menuSurface, className)} {...props} />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+/** `tone="destructive"` paints the label and icon with the danger text token. */
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+    tone?: "default" | "destructive";
+  }
+>(({ className, inset, tone = "default", ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      menuItem,
+      tone === "destructive" && "text-destructive focus:bg-destructive/10 focus:text-destructive",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(menuItem, "pl-8", className)}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem ref={ref} className={cn(menuItem, "pl-8", className)} {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="!size-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)} {...props} />
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};

package/src/primitives/index.ts

@@ -24,6 +24,44 @@ export {
   DialogDescription,
 } from "./dialog";
 
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./popover";
+
+export { Slider } from "./slider";
+
 export { Input, Textarea } from "./input";
 export type { InputProps, TextareaProps } from "./input";
 
@@ -87,6 +125,25 @@ export { Progress } from "./progress";
 
 export { Switch } from "./switch";
 
+export { Checkbox } from "./checkbox";
+
+export { Separator } from "./separator";
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+} from "./sheet";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
+
 export { Skeleton, SkeletonCard, SkeletonTable } from "./skeleton";
 
 export { TextShimmer } from "./text-shimmer";

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChevronRight } from 'lucide-react'
+import { useState } from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog'
+import { Button } from './button'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './collapsible'
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+} from './context-menu'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import { Slider } from './slider'
+
+const meta: Meta = {
+  title: 'Primitives/Popover, Collapsible, AlertDialog, ContextMenu, Slider',
+  parameters: { layout: 'centered' },
+}
+
+export default meta
+type Story = StoryObj
+
+const LONG_NAME = 'customer-onboarding-agent-with-a-very-long-project-name-that-never-wraps-on-its-own'
+
+export const PopoverWithLongContent: Story = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">Project details</Button>
+      </PopoverTrigger>
+      <PopoverContent className="[overflow-wrap:anywhere]">
+        <p className="font-medium text-sm">{LONG_NAME}</p>
+        <p className="mt-1 text-muted-foreground text-sm">Created by a teammate. Last deployed from the develop branch.</p>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const CollapsibleSection: Story = {
+  render: () => (
+    <Collapsible className="w-80">
+      <CollapsibleTrigger className="group flex w-full items-center gap-2 text-sm">
+        <ChevronRight className="size-4 transition-transform group-data-[state=open]:rotate-90" />
+        Advanced settings
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-2 text-muted-foreground text-sm">
+        Retry each failed step once before the run is marked failed.
+      </CollapsibleContent>
+    </Collapsible>
+  ),
+}
+
+export const DestructiveConfirm: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete project</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete {LONG_NAME}?</AlertDialogTitle>
+          <AlertDialogDescription>Its sandboxes stop and its deployments are removed.</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction tone="destructive">Delete</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+}
+
+export const FileContextMenu: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-24 w-72 items-center justify-center rounded-lg border border-border border-dashed text-muted-foreground text-sm">
+        Right-click this file
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem>
+          Rename <ContextMenuShortcut>F2</ContextMenuShortcut>
+        </ContextMenuItem>
+        <ContextMenuItem>Copy path</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+}
+
+function RangeDemo() {
+  const [value, setValue] = useState([20, 80])
+  return (
+    <div className="w-72 space-y-2">
+      <Slider value={value} onValueChange={setValue} thumbLabels={['Minimum', 'Maximum']} />
+      <p className="text-muted-foreground text-sm">
+        {value[0]} to {value[1]}
+      </p>
+    </div>
+  )
+}
+
+export const Sliders: Story = {
+  render: () => (
+    <div className="flex flex-col gap-8">
+      <Slider aria-label="Temperature" defaultValue={[40]} className="w-72" />
+      <RangeDemo />
+      <Slider aria-label="Disabled" defaultValue={[60]} disabled className="w-72" />
+    </div>
+  ),
+}

package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.test.tsx

@@ -0,0 +1,165 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+} from "./context-menu";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+import { Slider } from "./slider";
+
+const PALETTE = /\b(?:bg|text|border)-(?:slate|zinc|gray|neutral|blue|green|red|amber|emerald|black|white)(?:-\d|\b)/;
+
+describe("Popover", () => {
+  it("opens from its trigger on a token surface and closes on Escape", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Filters</PopoverTrigger>
+        <PopoverContent>Only failed runs</PopoverContent>
+      </Popover>,
+    );
+    await user.click(screen.getByRole("button", { name: "Filters" }));
+    const content = await screen.findByRole("dialog");
+    expect(content).toHaveTextContent("Only failed runs");
+    expect(content.className).toContain("bg-card");
+    expect(content.className).not.toMatch(PALETTE);
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+});
+
+describe("Collapsible", () => {
+  it("reports its expanded state on the trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <Collapsible>
+        <CollapsibleTrigger>Details</CollapsibleTrigger>
+        <CollapsibleContent>Hidden body</CollapsibleContent>
+      </Collapsible>,
+    );
+    const trigger = screen.getByRole("button", { name: "Details" });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+    expect(screen.queryByText("Hidden body")).toBeNull();
+    await user.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Hidden body")).toBeVisible();
+  });
+});
+
+describe("AlertDialog", () => {
+  it("focuses Cancel on open so a destructive action is never under Enter", async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn();
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Delete project</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogTitle>Delete this project?</AlertDialogTitle>
+          <AlertDialogDescription>Its sandboxes stop.</AlertDialogDescription>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction tone="destructive" onClick={onDelete}>
+            Delete
+          </AlertDialogAction>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+    await user.click(screen.getByRole("button", { name: "Delete project" }));
+    const dialog = await screen.findByRole("alertdialog", { name: "Delete this project?" });
+    expect(dialog).toHaveAccessibleDescription("Its sandboxes stop.");
+    expect(screen.getByRole("button", { name: "Cancel" })).toHaveFocus();
+    const action = screen.getByRole("button", { name: "Delete" });
+    expect(action.className).toContain("bg-destructive");
+    await user.click(action);
+    expect(onDelete).toHaveBeenCalledOnce();
+    await waitFor(() => expect(screen.queryByRole("alertdialog")).toBeNull());
+  });
+});
+
+describe("ContextMenu", () => {
+  it("opens on contextmenu and runs the chosen item", async () => {
+    const onRename = vi.fn();
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>File row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem onSelect={onRename}>Rename</ContextMenuItem>
+          <ContextMenuItem tone="destructive">Delete</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText("File row"));
+    const menu = await screen.findByRole("menu");
+    expect(menu.className).toContain("bg-card");
+    expect(screen.getByRole("menuitem", { name: "Delete" }).className).toContain("text-destructive");
+    fireEvent.click(screen.getByRole("menuitem", { name: "Rename" }));
+    expect(onRename).toHaveBeenCalledOnce();
+  });
+
+  it("portals submenu content out of the clipped parent menu", async () => {
+    const user = userEvent.setup();
+    render(
+      <ContextMenu>
+        <ContextMenuTrigger>File row</ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger>Move to</ContextMenuSubTrigger>
+            <ContextMenuSubContent>
+              <ContextMenuItem>Archive</ContextMenuItem>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
+        </ContextMenuContent>
+      </ContextMenu>,
+    );
+    fireEvent.contextMenu(screen.getByText("File row"));
+    const parent = await screen.findByRole("menu");
+    await user.hover(screen.getByRole("menuitem", { name: "Move to" }));
+    await user.keyboard("{ArrowRight}");
+    const archive = await screen.findByRole("menuitem", { name: "Archive" });
+    expect(parent.contains(archive)).toBe(false);
+  });
+});
+
+describe("Slider", () => {
+  beforeAll(() => {
+    // Radix measures the thumb with ResizeObserver, which jsdom lacks.
+    globalThis.ResizeObserver ??= class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+  });
+
+  it("renders one labelled thumb per value", () => {
+    render(<Slider defaultValue={[20, 80]} thumbLabels={["Minimum", "Maximum"]} />);
+    const thumbs = screen.getAllByRole("slider");
+    expect(thumbs).toHaveLength(2);
+    expect(thumbs[0]).toHaveAccessibleName("Minimum");
+    expect(thumbs[1]).toHaveAttribute("aria-valuenow", "80");
+  });
+
+  it("moves with the keyboard and reports the value", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<Slider aria-label="Budget" defaultValue={[50]} step={10} onValueChange={onValueChange} />);
+    expect(screen.getByRole("slider")).toHaveAccessibleName("Budget");
+    screen.getByRole("slider").focus();
+    await user.keyboard("{ArrowRight}");
+    expect(onValueChange).toHaveBeenLastCalledWith([60]);
+  });
+});

package/src/primitives/popover.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverClose = PopoverPrimitive.Close;
+
+/**
+ * A floating card anchored to its trigger, on the same surface, border and
+ * shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
+ * for wider content and keep long text wrapping inside it.
+ */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden",
+        "data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "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",
+        "motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };

package/src/primitives/separator.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * A hairline rule on the border token. Decorative by default, so assistive
+ * technology skips it; pass `decorative={false}` when it separates groups a
+ * screen reader should announce.
+ */
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };