@sentry/junior-dashboard 0.263.0 → 0.265.0

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

@@ -0,0 +1,151 @@
+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 { XIcon } from "lucide-react";
+
+/** Own the open state and modal focus rules for a shadcn sheet. */
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+/** Open the sheet from a button and restore focus when it closes. */
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+/** Close the sheet through Base UI dismissal and focus handling. */
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-dashboard-overlay transition-opacity duration-180 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Place the sheet on one edge with themed chrome and a close control. */
+function SheetContent({
+  className,
+  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);
+  return (
+    <>
+      <div ref={portalRef} className="contents" />
+      <SheetPortal container={portalRef}>
+        <SheetOverlay />
+        <SheetPrimitive.Popup
+          data-slot="sheet-content"
+          data-dashboard-modal=""
+          data-side={side}
+          className={cn(
+            "fixed z-50 flex flex-col gap-4 border-dashboard-border-strong bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.2,0.8,0.2,1)] motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <SheetPrimitive.Close
+              data-slot="sheet-close"
+              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>
+            </SheetPrimitive.Close>
+          )}
+        </SheetPrimitive.Popup>
+      </SheetPortal>
+    </>
+  );
+}
+
+/** Group the sheet title and description clear of the close control. */
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1 p-4 pr-14", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep sheet actions at the bottom of the content. */
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+/** Give the sheet its accessible name. */
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-lg font-semibold text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/** Describe the sheet for assistive technology. */
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

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/table.tsx

@@ -0,0 +1,80 @@
+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 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, 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 };