@sentry/junior-dashboard 0.263.0 → 0.265.0

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

@@ -0,0 +1,77 @@
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { cn } from "@dashboard/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+/** Group sections with Base UI disclosure and keyboard behavior. */
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+/** Keep one section’s trigger and panel state together. */
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn(
+        "not-last:border-b not-last:border-dashboard-border-subtle",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Render the section heading and its expand or collapse control. */
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex min-w-0 flex-1 cursor-pointer items-center justify-between gap-3 rounded-sm py-2.5 text-left font-sans text-sm font-medium text-dashboard-text transition-colors hover:text-dashboard-text-solid outline-none focus-visible:outline-2 focus-visible:outline-dashboard-focus aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-dashboard-text-muted",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+/** Reveal section content with measured height and reduced-motion support. */
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-180 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-2.5", className)}>{children}</div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/src/client/components/ui/alert-dialog.tsx

@@ -0,0 +1,89 @@
+import type { ComponentProps } from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+import { cn } from "@dashboard/lib/utils";
+import { Button } from "./button";
+
+/** Require an explicit response before a destructive action. */
+export function AlertDialog(props: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root {...props} />;
+}
+
+/** Show a named confirmation above the page with modal focus handling. */
+export function AlertDialogContent({
+  className,
+  ...props
+}: AlertDialogPrimitive.Popup.Props) {
+  return (
+    <AlertDialogPrimitive.Portal>
+      <AlertDialogPrimitive.Backdrop className="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" />
+      <AlertDialogPrimitive.Popup
+        data-dashboard-modal=""
+        data-slot="alert-dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid grid-cols-1 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-5 text-dashboard-text shadow-lg outline-none 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}
+      />
+    </AlertDialogPrimitive.Portal>
+  );
+}
+
+/** Name the action that needs confirmation. */
+export function AlertDialogTitle({
+  className,
+  ...props
+}: AlertDialogPrimitive.Title.Props) {
+  return (
+    <AlertDialogPrimitive.Title
+      className={cn("m-0 font-display text-lg font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+/** Describe what the action changes before the user confirms it. */
+export function AlertDialogDescription({
+  className,
+  ...props
+}: AlertDialogPrimitive.Description.Props) {
+  return (
+    <AlertDialogPrimitive.Description
+      className={cn(
+        "m-0 break-words text-sm leading-relaxed text-dashboard-text-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Keep confirmation controls together and reachable on small screens. */
+export function AlertDialogFooter({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-wrap justify-end gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Run the confirmed action; its owner decides when the dialog can close. */
+export function AlertDialogAction(props: ComponentProps<typeof Button>) {
+  return (
+    <Button data-slot="alert-dialog-action" className="min-h-11" {...props} />
+  );
+}
+
+/** Cancel through Base UI so focus returns to the source control. */
+export function AlertDialogCancel(props: AlertDialogPrimitive.Close.Props) {
+  return (
+    <AlertDialogPrimitive.Close
+      render={<Button className="min-h-11" />}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,85 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+const commandButtonClass =
+  "inline-flex h-9 max-w-full items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium leading-none focus-visible:outline-2 focus-visible:outline-offset-2";
+
+/** Style the dashboard command, primary, danger, and icon button surfaces. Links use it with `className`. */
+const buttonVariants = cva(
+  "cursor-pointer font-sans no-underline transition-colors data-disabled:cursor-not-allowed data-disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "",
+        primary: "",
+        danger: "",
+      },
+      size: {
+        default: "",
+        icon: "grid size-9 place-items-center rounded-md border-0 bg-transparent p-0 text-dashboard-text-muted focus-visible:outline-2 focus-visible:outline-offset-1 data-disabled:hover:!bg-transparent data-disabled:hover:!text-dashboard-text-muted",
+      },
+    },
+    compoundVariants: [
+      {
+        size: "default",
+        variant: "default",
+        className: cn(
+          commandButtonClass,
+          "border-dashboard-border-emphasis bg-dashboard-surface-raised text-dashboard-text hover:border-dashboard-border-heavy hover:bg-dashboard-surface-hover hover:text-dashboard-text focus-visible:outline-dashboard-focus data-disabled:hover:border-dashboard-border-emphasis data-disabled:hover:bg-dashboard-surface-raised data-disabled:hover:text-dashboard-text",
+        ),
+      },
+      {
+        size: "default",
+        variant: "primary",
+        className: cn(
+          commandButtonClass,
+          "border-dashboard-text-solid bg-dashboard-text-solid text-dashboard-text-inverse hover:border-dashboard-text-subtle hover:bg-dashboard-text-subtle focus-visible:outline-dashboard-focus data-disabled:hover:border-dashboard-text-solid data-disabled:hover:bg-dashboard-text-solid",
+        ),
+      },
+      {
+        size: "default",
+        variant: "danger",
+        className: cn(
+          commandButtonClass,
+          "border-dashboard-border-strong bg-transparent text-dashboard-text-muted hover:border-rose-300/40 hover:text-rose-300 focus-visible:outline-rose-300/55 data-disabled:hover:border-dashboard-border-strong data-disabled:hover:text-dashboard-text-muted",
+        ),
+      },
+      {
+        size: "icon",
+        variant: ["default", "primary"],
+        className:
+          "hover:!bg-dashboard-fill-strong hover:!text-dashboard-text focus-visible:outline-dashboard-focus",
+      },
+      {
+        size: "icon",
+        variant: "danger",
+        className:
+          "hover:!bg-rose-300/10 hover:!text-rose-300 focus-visible:outline-rose-300/55",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+/** Render a Base UI button with a dashboard button surface. */
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: Omit<ButtonPrimitive.Props, "className"> &
+  VariantProps<typeof buttonVariants> & { className?: string }) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import { cn } from "@dashboard/lib/utils";
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const;
+
+type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    color?: string;
+  }
+>;
+
+/**
+ * Size a Recharts chart to its box and expose each config color as
+ * `var(--color-<key>)` inside it.
+ */
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <div
+      data-slot="chart"
+      data-chart={chartId}
+      className={cn(
+        "flex aspect-video justify-center font-sans text-2xs tabular-nums [&_.recharts-cartesian-axis-tick-value]:fill-dashboard-text-muted [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-dashboard-border-subtle [&_.recharts-curve.recharts-tooltip-cursor]:stroke-dashboard-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-dashboard-fill-soft [&_.recharts-reference-line_[stroke='#ccc']]:stroke-dashboard-border [&_.recharts-surface]:outline-hidden [&_.recharts-surface]:focus-visible:outline-2 [&_.recharts-surface]:focus-visible:outline-dashboard-focus",
+        className,
+      )}
+      {...props}
+    >
+      <ChartStyle id={chartId} config={config} />
+      <RechartsPrimitive.ResponsiveContainer
+        initialDimension={INITIAL_DIMENSION}
+      >
+        {children}
+      </RechartsPrimitive.ResponsiveContainer>
+    </div>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colors = Object.entries(config).flatMap(([key, { color }]) =>
+    color ? [`  --color-${key}: ${color};`] : [],
+  );
+
+  if (!colors.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: `[data-chart=${id}] {\n${colors.join("\n")}\n}`,
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+export { ChartContainer, ChartTooltip };

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

@@ -0,0 +1,26 @@
+import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
+import { cn } from "@dashboard/lib/utils";
+import { CheckIcon } from "lucide-react";
+
+/** Render a Base UI checkbox with the dashboard control surface. */
+function Checkbox({
+  className,
+  ...props
+}: Omit<CheckboxPrimitive.Root.Props, "className"> & { className?: string }) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "grid size-4 shrink-0 cursor-pointer place-items-center rounded-sm border border-dashboard-border-interactive bg-dashboard-control text-dashboard-text-inverse 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}
+    >
+      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator">
+        <CheckIcon aria-hidden="true" size={12} strokeWidth={3} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

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

@@ -0,0 +1,22 @@
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+
+/** Own open state for one trigger and its panel. */
+function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+/** Toggle the panel and expose its state with `aria-expanded`. */
+function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
+  return (
+    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
+  );
+}
+
+/** Render the panel only while open, unless `keepMounted` is set. */
+function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
+  return (
+    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

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

@@ -0,0 +1,49 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Stack a label, control, and messages for one form field. */
+function Field({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div data-slot="field" className={cn("grid gap-2", className)} {...props} />
+  );
+}
+
+/** Label the field control. */
+function FieldLabel({ className, ...props }: ComponentProps<"label">) {
+  return (
+    <label
+      data-slot="field-label"
+      className={cn("text-sm font-semibold text-dashboard-text", className)}
+      {...props}
+    />
+  );
+}
+
+/** Give help text below the field control. */
+function FieldDescription({ className, ...props }: ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "m-0 text-xs leading-relaxed text-dashboard-text-muted sm:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Announce a field validation error. Render nothing when there is no error. */
+function FieldError({ className, ...props }: ComponentProps<"p">) {
+  if (!props.children) return null;
+  return (
+    <p
+      role="alert"
+      data-slot="field-error"
+      className={cn("m-0 text-xs leading-relaxed text-rose-300", className)}
+      {...props}
+    />
+  );
+}
+
+export { Field, FieldDescription, FieldError, FieldLabel };

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

@@ -0,0 +1,35 @@
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+/** Style the dashboard text control surface shared by inputs and text areas. */
+export const textControlClass =
+  "block w-full rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 font-sans text-sm text-dashboard-text placeholder:text-dashboard-text-muted/70 focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
+
+const inputVariants = cva(textControlClass, {
+  variants: {
+    size: {
+      default: "",
+      comfortable: "min-h-11 text-base sm:min-h-10 sm:text-sm",
+    },
+  },
+  defaultVariants: { size: "default" },
+});
+
+/** Render a Base UI text input. Use `size="comfortable"` for larger mobile controls. */
+function Input({
+  className,
+  size,
+  ...props
+}: Omit<InputPrimitive.Props, "className" | "size"> &
+  VariantProps<typeof inputVariants> & { className?: string }) {
+  return (
+    <InputPrimitive
+      data-slot="input"
+      className={cn(inputVariants({ size }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/src/client/components/ui/native-select.tsx

@@ -0,0 +1,57 @@
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "@dashboard/lib/utils";
+
+const nativeSelectVariants = cva(
+  "block w-full min-w-0 appearance-none pr-9 disabled:cursor-not-allowed disabled:opacity-60 forced-colors:appearance-auto [color-scheme:var(--dashboard-color-scheme,dark)]",
+  {
+    variants: {
+      variant: {
+        /** Form field. Touch screens get the taller target. */
+        form: "min-h-11 rounded-md border border-dashboard-border-emphasis bg-dashboard-ink py-2 pl-3 text-base text-dashboard-text focus:border-dashboard-focus focus:outline-none aria-invalid:border-rose-300 sm:min-h-10 sm:text-sm",
+        /** Compact control in a filter bar. */
+        filter:
+          "h-9 rounded-lg border border-dashboard-border-emphasis bg-dashboard-control pl-2 text-sm text-dashboard-text transition-colors hover:border-dashboard-border-interactive focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25",
+        /** Borderless sort control that fills its frame. */
+        sort: "h-full bg-dashboard-control pl-2 font-sans text-xs text-dashboard-text-muted outline-none",
+      },
+    },
+    defaultVariants: { variant: "form" },
+  },
+);
+
+/** Keep native choices and draw the dashboard arrow. */
+function NativeSelect({
+  className,
+  variant,
+  ...props
+}: Omit<ComponentProps<"select">, "size"> &
+  VariantProps<typeof nativeSelectVariants>) {
+  return (
+    <span
+      data-slot="native-select-wrapper"
+      className={cn(
+        "relative block w-full min-w-0",
+        variant === "sort" && "h-full",
+        className,
+      )}
+    >
+      <select
+        data-slot="native-select"
+        className={nativeSelectVariants({ variant })}
+        {...props}
+      />
+      <ChevronDownIcon
+        aria-hidden="true"
+        data-slot="native-select-icon"
+        className={cn(
+          "pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2 text-dashboard-text-muted forced-colors:hidden",
+          props.disabled && "opacity-60",
+        )}
+      />
+    </span>
+  );
+}
+
+export { NativeSelect };

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