@sentry/junior-dashboard 0.264.0 → 0.266.0

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

@@ -0,0 +1,53 @@
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a round avatar frame. Use `size="sm"` in dense lists. */
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative inline-grid size-7 shrink-0 place-items-center overflow-hidden rounded-full border-2 border-dashboard-bg bg-dashboard-focus shadow-sm select-none data-[size=sm]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Show the avatar image after it loads. */
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("size-full object-cover", className)}
+      {...props}
+    />
+  );
+}
+
+/** Show initials or a count while the image is missing, loading, or broken. */
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "grid size-full place-items-center font-sans text-xs leading-none font-semibold tracking-tight text-dashboard-text-inverse group-data-[size=sm]/avatar:text-2xs",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

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

@@ -0,0 +1,86 @@
+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, icon, and menu row 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",
+        menu: "flex w-full items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none data-disabled:hover:bg-transparent",
+      },
+    },
+    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/dialog.tsx

@@ -0,0 +1,66 @@
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own the open state and modal focus rules for a dialog. */
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+/** Close the dialog through Base UI dismissal and focus handling. */
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate 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}
+    />
+  );
+}
+
+/** Show the dialog above a backdrop, centered in the viewport. */
+function DialogContent({ className, ...props }: DialogPrimitive.Popup.Props) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        data-dashboard-modal=""
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised p-4 text-sm text-dashboard-text shadow-lg outline-none transition-[opacity,scale] duration-180 motion-reduce:transition-none sm:max-w-sm data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
+          className,
+        )}
+        {...props}
+      />
+    </DialogPortal>
+  );
+}
+
+/** Give the dialog its accessible name. */
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "m-0 text-base leading-none font-medium text-dashboard-text",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Dialog, DialogClose, DialogContent, DialogTitle };

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

@@ -0,0 +1,32 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Frame an empty state inside a page or list region. */
+function Empty({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "min-w-0 rounded-lg border border-dashboard-border-strong bg-dashboard-bg px-4 py-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Explain why the region is empty and what the user can do next. */
+function EmptyDescription({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-base leading-relaxed text-dashboard-text-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyDescription };

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-group.tsx

@@ -0,0 +1,96 @@
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "@dashboard/components/ui/button";
+import { Input } from "@dashboard/components/ui/input";
+
+/** Frame one text input with its icons and inline buttons. */
+function InputGroup({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-dashboard-border bg-dashboard-overlay-soft transition-colors outline-none hover:border-dashboard-border-emphasis has-[[data-slot=input-group-control]:focus-visible]:border-dashboard-focus has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-dashboard-focus/25",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+const inputGroupAddonVariants = cva(
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-dashboard-text-muted select-none",
+  {
+    variants: {
+      align: {
+        "inline-start": "order-first pl-2.5",
+        "inline-end": "order-last pr-1.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  },
+);
+
+/** Place an icon or button before or after the input. A click on the addon focuses the input. */
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return;
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }}
+      {...props}
+    />
+  );
+}
+
+/** Render a compact icon button inside an input group. */
+function InputGroupButton({
+  className,
+  type = "button",
+  ...props
+}: Omit<ComponentProps<typeof Button>, "size" | "type"> & {
+  type?: "button" | "submit" | "reset";
+}) {
+  return (
+    <Button
+      type={type}
+      size="icon"
+      className={cn("size-6", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render the text input inside an input group. */
+function InputGroupInput({
+  className,
+  ...props
+}: ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "h-full min-w-0 flex-1 rounded-none border-0 bg-transparent px-2 focus:ring-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput };

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

@@ -0,0 +1,60 @@
+import type { ComponentProps } from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "@dashboard/components/ui/button";
+
+/** Mark a page control group as navigation. */
+function Pagination({ className, ...props }: ComponentProps<"nav">) {
+  return (
+    <nav
+      role="navigation"
+      aria-label="Pagination"
+      data-slot="pagination"
+      className={cn("flex w-full justify-center", className)}
+      {...props}
+    />
+  );
+}
+
+/** Hold the page controls as a list. */
+function PaginationContent({ className, ...props }: ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="pagination-content"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Hold one page control. */
+function PaginationItem({ ...props }: ComponentProps<"li">) {
+  return <li data-slot="pagination-item" {...props} />;
+}
+
+/** Go to the previous page. */
+function PaginationPrevious(props: ComponentProps<typeof Button>) {
+  return (
+    <Button aria-label="Previous page" size="icon" {...props}>
+      <ChevronLeftIcon aria-hidden="true" size={16} />
+    </Button>
+  );
+}
+
+/** Go to the next page. */
+function PaginationNext(props: ComponentProps<typeof Button>) {
+  return (
+    <Button aria-label="Next page" size="icon" {...props}>
+      <ChevronRightIcon aria-hidden="true" size={16} />
+    </Button>
+  );
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationNext,
+  PaginationPrevious,
+};