@tangle-network/ui 11.16.11 → 11.19.0

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";
@@ -136,6 +193,18 @@ export type { PageHeaderProps } from "./page-header";
 export { StatusPill } from "./status-pill";
 export type { StatusPillProps, StatusTone } from "./status-pill";
 
+export { Tag } from "./tag";
+export type { TagProps } from "./tag";
+
+export { Chip } from "./chip";
+export type { ChipProps } from "./chip";
+
+export { IconTile, initialsOf } from "./icon-tile";
+export type { IconTileProps } from "./icon-tile";
+
+export { CATEGORY_TONES, TONE_CLASSES, toneFor } from "./tone";
+export type { CategoryTone, Tone, ToneClasses } from "./tone";
+
 export { MetricStrip, Metric } from "./metric-strip";
 export type { MetricStripProps, MetricProps } from "./metric-strip";
 

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 };

package/src/primitives/sheet.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  [
+    "fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
+    "data-[state=closed]:animate-out data-[state=open]:animate-in",
+    "data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none",
+  ],
+  {
+    variants: {
+      side: {
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+      },
+    },
+    defaultVariants: { side: "right" },
+  },
+);
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content> &
+    VariantProps<typeof sheetVariants> & {
+      /** Hide only the built-in close button; Escape and outside clicks still dismiss. */
+      hideCloseButton?: boolean;
+    }
+>(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      {!hideCloseButton && (
+        <SheetPrimitive.Close
+          className={cn(
+            "absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none",
+            focusRing,
+          )}
+        >
+          <X className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      )}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col gap-1.5 p-4 pr-10", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("font-semibold text-base text-foreground leading-tight", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};

package/src/primitives/slider.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+import { focusRing } from "../lib/focus";
+import { cn } from "../lib/utils";
+
+/**
+ * Range input with one thumb per value. A single value renders one thumb; an
+ * array of two renders a range. The thumbs are what assistive technology
+ * focuses, so the names go on them: `aria-label` / `aria-labelledby` name a
+ * single thumb, and `thumbLabels` names each thumb of a range.
+ */
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+    thumbLabels?: string[];
+  }
+>(
+  (
+    {
+      className,
+      defaultValue,
+      value,
+      min = 0,
+      max = 100,
+      thumbLabels,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...props
+    },
+    ref,
+  ) => {
+  const values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min];
+  const single = values.length === 1;
+
+  return (
+    <SliderPrimitive.Root
+      ref={ref}
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50",
+        "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track className="relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5">
+        <SliderPrimitive.Range className="absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+      </SliderPrimitive.Track>
+      {values.map((_, index) => (
+        <SliderPrimitive.Thumb
+          key={index}
+          aria-label={thumbLabels?.[index] ?? (single ? ariaLabel : undefined)}
+          aria-labelledby={single && !thumbLabels?.[index] ? ariaLabelledBy : undefined}
+          className={cn(
+            "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] disabled:pointer-events-none",
+            focusRing,
+          )}
+        />
+      ))}
+    </SliderPrimitive.Root>
+  );
+  },
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };