@sentry/junior-dashboard 0.264.0 → 0.266.0

package/src/client/components/ui/popover.tsx

@@ -0,0 +1,67 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own an anchored popover's state and dismissal. */
+export function Popover(props: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root {...props} />;
+}
+
+/** Open a popover from the owning control. */
+export function PopoverTrigger(props: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+/** Position popover content within the viewport and share its themed surface. */
+export function PopoverContent({
+  className,
+  align = "center",
+  side = "bottom",
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<PopoverPrimitive.Positioner.Props, "align" | "side">) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        side={side}
+        sideOffset={8}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "w-80 max-w-[calc(100vw-2rem)] max-h-(--available-height) origin-(--transform-origin) overflow-y-auto rounded-lg border border-dashboard-border-emphasis bg-dashboard-surface-raised p-4 text-sm text-dashboard-text shadow-lg outline-none focus-visible:outline-2 focus-visible:outline-dashboard-focus transition-[opacity,scale] duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+/** Name a popover through its visible heading. */
+export function PopoverTitle({
+  className,
+  ...props
+}: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      className={cn("m-0 text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+/** Explain a popover without duplicating its heading. */
+export function PopoverDescription({
+  className,
+  ...props
+}: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      className={cn("m-0 leading-relaxed text-dashboard-text-muted", className)}
+      {...props}
+    />
+  );
+}

package/src/client/components/ui/radio-group.tsx

@@ -0,0 +1,32 @@
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own the selected value and arrow-key focus for a set of radios. */
+function RadioGroup<Value>(props: RadioGroupPrimitive.Props<Value>) {
+  return <RadioGroupPrimitive data-slot="radio-group" {...props} />;
+}
+
+/** Render one Base UI radio with the dashboard control surface. */
+function RadioGroupItem({
+  className,
+  ...props
+}: Omit<RadioPrimitive.Root.Props, "className"> & { className?: string }) {
+  return (
+    <RadioPrimitive.Root
+      data-slot="radio-group-item"
+      className={cn(
+        "grid size-4 shrink-0 cursor-pointer place-items-center rounded-full border border-dashboard-border-interactive bg-dashboard-control transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus data-checked:border-dashboard-focus data-checked:bg-dashboard-focus data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="size-1.5 rounded-full bg-dashboard-text-inverse"
+      />
+    </RadioPrimitive.Root>
+  );
+}
+
+export { RadioGroup, RadioGroupItem };

package/src/client/components/ui/sheet.tsx

@@ -1,9 +1,8 @@
-// Adapted from shadcn/ui Base UI Sheet. See sheet.LICENSE.
 import * as React from "react";
 import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
 import { cn } from "@dashboard/lib/utils";
 
-import { Button } from "../Button";
+import { Button } from "./button";
 import { XIcon } from "lucide-react";
 
 /** Own the open state and modal focus rules for a shadcn sheet. */
@@ -44,10 +43,12 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  closeButtonProps,
   ...props
 }: SheetPrimitive.Popup.Props & {
   side?: "top" | "right" | "bottom" | "left";
   showCloseButton?: boolean;
+  closeButtonProps?: React.ComponentProps<typeof Button>;
 }) {
   // Keep portal order tied to the app tree when a resize mounts another sheet.
   const portalRef = React.useRef<HTMLDivElement>(null);
@@ -70,7 +71,16 @@ function SheetContent({
           {showCloseButton && (
             <SheetPrimitive.Close
               data-slot="sheet-close"
-              render={<Button className="absolute top-3 right-3" size="icon" />}
+              render={
+                <Button
+                  {...closeButtonProps}
+                  className={cn(
+                    "absolute top-3 right-3",
+                    closeButtonProps?.className,
+                  )}
+                  size="icon"
+                />
+              }
             >
               <XIcon aria-hidden="true" size={15} strokeWidth={2.25} />
               <span className="sr-only">Close</span>

package/src/client/components/ui/skeleton.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Hide one content placeholder from assistive technology. */
+function Skeleton({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      aria-hidden="true"
+      data-slot="skeleton"
+      className={cn(
+        "animate-pulse rounded-md bg-dashboard-fill-soft motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/client/components/ui/spinner.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a loading spinner. It stops spinning when the user prefers reduced motion. */
+function Spinner({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      data-slot="spinner"
+      role="status"
+      aria-label="Loading"
+      className={cn(
+        "size-4 animate-spin motion-reduce:animate-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/client/components/ui/table.tsx

@@ -0,0 +1,101 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a data table that scrolls sideways when it is wider than its box. */
+function Table({ className, ...props }: ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full border-collapse text-left text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:hover:bg-transparent", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "border-t border-dashboard-border font-medium [&>tr]:last:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-dashboard-border-subtle transition-colors hover:bg-dashboard-fill-soft has-aria-expanded:bg-dashboard-fill-soft data-[state=selected]:bg-dashboard-surface-active",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Render a column header in the dashboard label style. */
+function TableHead({ className, ...props }: ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "px-2 py-2.5 text-left align-middle font-sans text-xs font-medium whitespace-nowrap text-dashboard-text-muted [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap text-dashboard-text [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+};

package/src/client/components/ui/tabs.tsx

@@ -0,0 +1,75 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own the selected panel and link each tab to its panel. */
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("grid min-w-0 gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva("group/tabs-list flex min-w-0", {
+  variants: {
+    variant: {
+      /** A pill track. Tabs share the row equally on wide screens. */
+      default:
+        "gap-1 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-1",
+      /** Underlined tabs on a bottom border, for collection filters. */
+      line: "gap-1 border-b border-dashboard-border-subtle",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+/** Hold the tabs. `variant` sets the look of the row and its tabs. */
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+/** Select one panel. The active tab uses the strong fill or the accent line. */
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex min-w-0 cursor-pointer items-center gap-1.5 border-0 bg-transparent font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        "group-data-[variant=default]/tabs-list:min-h-9 group-data-[variant=default]/tabs-list:flex-auto group-data-[variant=default]/tabs-list:justify-center group-data-[variant=default]/tabs-list:rounded-md group-data-[variant=default]/tabs-list:px-1.5 group-data-[variant=default]/tabs-list:py-2 group-data-[variant=default]/tabs-list:hover:bg-dashboard-fill-faint group-data-[variant=default]/tabs-list:data-active:bg-dashboard-fill-strong group-data-[variant=default]/tabs-list:data-active:text-dashboard-text group-data-[variant=default]/tabs-list:sm:flex-1",
+        "group-data-[variant=line]/tabs-list:relative group-data-[variant=line]/tabs-list:gap-2 group-data-[variant=line]/tabs-list:px-3 group-data-[variant=line]/tabs-list:py-2.5 group-data-[variant=line]/tabs-list:after:absolute group-data-[variant=line]/tabs-list:after:inset-x-2 group-data-[variant=line]/tabs-list:after:bottom-0 group-data-[variant=line]/tabs-list:after:h-px group-data-[variant=line]/tabs-list:data-active:text-dashboard-accent-text group-data-[variant=line]/tabs-list:data-active:after:bg-dashboard-accent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Show the content for the selected tab. */
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn(
+        "min-w-0 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/client/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+import { textControlClass } from "./input";
+
+/** Render a text area with the dashboard text control surface. */
+function Textarea({ className, ...props }: ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(textControlClass, "min-h-36", className)}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/client/components/ui/toast.tsx

@@ -0,0 +1,215 @@
+import * as React from "react";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "./button";
+import {
+  XIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react";
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />;
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />;
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed inset-x-4 bottom-[max(5.25rem,env(safe-area-inset-bottom))] z-[60] mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-lg border border-dashboard-border-emphasis bg-dashboard-surface-raised text-dashboard-text shadow-lg will-change-transform outline-none select-none focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_180ms_ease-out,opacity_180ms,height_180ms] motion-reduce:transition-none",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-180 motion-reduce:transition-none ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("break-words text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("break-words text-sm text-dashboard-text-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastAction({
+  className,
+  render = <Button />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button size="icon" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-dashboard-text-muted after:absolute after:-inset-2 after:content-[''] hover:text-dashboard-text",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <XIcon aria-hidden="true" />}
+    </ToastPrimitive.Close>
+  );
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null;
+
+  if (type === "success") {
+    icon = <CircleCheckIcon aria-hidden="true" />;
+  }
+
+  if (type === "info") {
+    icon = <InfoIcon aria-hidden="true" />;
+  }
+
+  if (type === "warning") {
+    icon = <TriangleAlertIcon aria-hidden="true" />;
+  }
+
+  if (type === "error") {
+    icon = <OctagonXIcon className="text-rose-300" aria-hidden="true" />;
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon
+        className="animate-spin motion-reduce:animate-none"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  );
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        {toastItem.actionProps ? (
+          <ToastAction {...toastItem.actionProps} />
+        ) : null}
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ));
+}
+
+/** Own notification state for one mounted dashboard and render its toast stack. */
+function Toaster({ children, ...props }: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider limit={3} timeout={4000} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  );
+}
+
+/** Show short notifications through the nearest mounted Toaster. */
+const useToastManager = ToastPrimitive.useToastManager;
+
+export { Toaster, useToastManager };

package/src/client/components/ui/toggle-group.tsx

@@ -0,0 +1,36 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+import { toggleVariants } from "./toggle";
+
+/** Own the pressed values and arrow-key focus across a row of items. */
+function ToggleGroup<Value extends string>({
+  className,
+  ...props
+}: ToggleGroupPrimitive.Props<Value>) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render one item with a `ui/toggle` look. */
+function ToggleGroupItem<Value extends string>({
+  className,
+  variant,
+  ...props
+}: TogglePrimitive.Props<Value> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      className={cn(toggleVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/client/components/ui/toggle.tsx

@@ -0,0 +1,37 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+/** Pressed-state looks shared by `Toggle` and `ToggleGroupItem`. */
+const toggleVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center font-sans text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
+  {
+    variants: {
+      variant: {
+        /** Quiet when off. The pressed state uses the active surface. */
+        default:
+          "h-7 min-w-10 rounded-md border border-transparent bg-transparent px-2 text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text data-pressed:border-dashboard-border-interactive data-pressed:bg-dashboard-surface-active data-pressed:text-dashboard-text",
+        /** A bordered filter chip. The pressed state fills solid. */
+        pill: "rounded-md border border-dashboard-border-strong bg-dashboard-surface-raised px-2 py-1 leading-tight text-dashboard-text-muted hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover hover:text-dashboard-text data-pressed:border-dashboard-border-heavy data-pressed:bg-dashboard-text-solid data-pressed:text-dashboard-text-inverse",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+/** Turn one setting on or off. */
+function Toggle<Value extends string>({
+  className,
+  variant,
+  ...props
+}: TogglePrimitive.Props<Value> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };