@litelens/design-system 1.0.3

package/dist/chunk-OI5436K4.js

@@ -0,0 +1,822 @@
+import { Tooltip, TooltipTrigger, TooltipContent, Button, DropdownMenuItem, TooltipProvider, Sheet, SheetContent, SheetHeader, ScrollArea, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, TableRow, TableCell, toast, Badge } from './chunk-NPDXDIXD.js';
+import { CheckIcon, CopyIcon, Loader2Icon, MinusIcon, PlusIcon, Trash2Icon, PencilIcon, RefreshCwIcon, ScalingIcon, XCircleIcon, CheckCircle2Icon, SearchIcon, Input, ChevronDownIcon, CircleCheckIcon, CircleXIcon } from './chunk-7YPL4ZPM.js';
+import { cn } from './chunk-QUNCRUSO.js';
+import { useRef, useState, useLayoutEffect, Component, useMemo, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+var AnnotationBadge = ({ label }) => {
+  const spanRef = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useLayoutEffect(() => {
+    const el = spanRef.current;
+    if (el) setIsOverflowing(el.scrollWidth > el.clientWidth);
+  }, [label]);
+  const badge = /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "max-w-xs cursor-default font-mono text-xs", children: /* @__PURE__ */ jsx("span", { ref: spanRef, className: "block truncate", children: label }) });
+  if (!isOverflowing) return badge;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { className: "text-left", children: badge }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children: label }) })
+  ] });
+};
+var Divider = ({ className }) => {
+  return /* @__PURE__ */ jsx("hr", { className: cn("border-border w-full", className) });
+};
+var ResourceLink = ({
+  children,
+  className,
+  truncate,
+  truncateTextClassName,
+  onClick
+}) => {
+  const ref = useRef(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  useLayoutEffect(() => {
+    if (!truncate) return;
+    const el = ref.current;
+    if (el) setIsOverflowing(el.scrollWidth > el.clientWidth);
+  }, [truncate, children]);
+  const inner = onClick ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "link",
+      type: "button",
+      size: "xs",
+      className: cn("text-info h-auto w-fit p-0", className),
+      onClick,
+      children: truncate ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref,
+          className: cn(
+            "max-w-65 inline-block truncate group-hover/button:[box-shadow:0_1px_0_0_currentColor]",
+            truncateTextClassName
+          ),
+          children
+        }
+      ) : children
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: cn("text-info cursor-default", className), children: truncate ? /* @__PURE__ */ jsx("span", { ref, className: cn("max-w-65 inline-block truncate", truncateTextClassName), children }) : children });
+  if (!truncate || !isOverflowing) return inner;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { children: inner }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("span", { className: "break-all font-mono", children }) })
+  ] });
+};
+var RADIUS = 36;
+var CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+var colorClass = {
+  green: "bg-success",
+  amber: "bg-warning",
+  red: "bg-destructive"
+};
+var DonutChart = ({
+  label,
+  total,
+  running,
+  pending = 0,
+  failed = 0,
+  items,
+  onNavigate
+}) => {
+  const runRatio = total === 0 ? 0 : running / total;
+  const pendingRatio = total === 0 ? 0 : pending / total;
+  const failRatio = total === 0 ? 0 : failed / total;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-xs", children: /* @__PURE__ */ jsxs(ResourceLink, { onClick: onNavigate, children: [
+      label,
+      " (",
+      total,
+      ")"
+    ] }) }),
+    /* @__PURE__ */ jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", children: [
+      /* @__PURE__ */ jsx("circle", { cx: "44", cy: "44", r: RADIUS, fill: "none", strokeWidth: "8", className: "stroke-muted" }),
+      /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "44",
+          cy: "44",
+          r: RADIUS,
+          fill: "none",
+          strokeWidth: "8",
+          strokeDasharray: `${runRatio * CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+          strokeLinecap: "round",
+          className: "stroke-success",
+          transform: "rotate(-90 44 44)"
+        }
+      ),
+      pending > 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "44",
+          cy: "44",
+          r: RADIUS,
+          fill: "none",
+          strokeWidth: "8",
+          strokeDasharray: `${pendingRatio * CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+          strokeLinecap: "round",
+          className: "stroke-warning",
+          transform: `rotate(${ -90 + runRatio * 360} 44 44)`
+        }
+      ),
+      failed > 0 && /* @__PURE__ */ jsx(
+        "circle",
+        {
+          cx: "44",
+          cy: "44",
+          r: RADIUS,
+          fill: "none",
+          strokeWidth: "8",
+          strokeDasharray: `${failRatio * CIRCUMFERENCE} ${CIRCUMFERENCE}`,
+          strokeLinecap: "round",
+          className: "stroke-destructive",
+          transform: `rotate(${ -90 + (runRatio + pendingRatio) * 360} 44 44)`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-1 flex flex-col gap-1", children: items.flatMap(
+      (i) => i.count > 0 ? [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: `h-2 w-2 shrink-0 rounded-sm ${colorClass[i.color]}` }),
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            i.label,
+            ": ",
+            i.count
+          ] })
+        ] }, i.label)
+      ] : []
+    ) })
+  ] });
+};
+var EmptyState = ({ icon, title, description, action }) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 py-12", children: [
+  /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }),
+  /* @__PURE__ */ jsx("h3", { className: "text-h3", children: title }),
+  description && /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: description }),
+  action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+] });
+var ErrorBoundary = class extends Component {
+  state = { error: null, copied: false };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[ErrorBoundary]", error, info.componentStack);
+  }
+  reset = () => this.setState({ error: null, copied: false });
+  copyError = () => {
+    const { error } = this.state;
+    if (!error) return;
+    const text = `${error.message}
+${error.stack ?? ""}`;
+    navigator.clipboard.writeText(text).then(() => {
+      this.setState({ copied: true });
+      setTimeout(() => this.setState({ copied: false }), 2e3);
+    });
+  };
+  render() {
+    const { error, copied } = this.state;
+    if (error) {
+      if (this.props.fallback) return this.props.fallback(error, this.reset);
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 p-8 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-destructive font-semibold", children: "Something went wrong" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full max-w-xl", children: [
+          /* @__PURE__ */ jsxs("pre", { className: "bg-muted text-muted-foreground overflow-auto rounded p-4 text-left text-xs", children: [
+            error.message,
+            "\n",
+            error.stack
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "absolute right-2 top-2 h-6 w-6",
+              "aria-label": "Copy error",
+              onClick: this.copyError,
+              children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-success size-3.5" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", onClick: this.reset, className: "text-sm", children: "Try again" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+var LoadingSpinner = ({ className }) => /* @__PURE__ */ jsx("div", { className: cn("flex h-full items-center justify-center", className), children: /* @__PURE__ */ jsx(Loader2Icon, { className: "text-muted-foreground size-5 animate-spin" }) });
+function barColor(percent) {
+  if (percent <= 50) return "bg-success";
+  if (percent <= 80) return "bg-warning";
+  return "bg-destructive";
+}
+var ResourceCell = ({ label, percent }) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-36 flex-col gap-1", children: [
+  /* @__PURE__ */ jsx("div", { className: "bg-muted h-1.5 w-full rounded-full", children: percent > 0 && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("transition-interactive h-full rounded-full", barColor(percent)),
+      style: { width: `${Math.min(percent, 100)}%` }
+    }
+  ) }),
+  /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: label })
+] });
+var ButtonGroup = ({ children, className }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "data-slot": "button-group",
+    className: cn(
+      "flex -space-x-px [&>button:first-child]:rounded-l-lg [&>button:focus-visible]:z-10 [&>button:last-child]:rounded-r-lg [&>button]:rounded-none",
+      className
+    ),
+    children
+  }
+);
+var ResourceBulkDeletionButton = ({
+  count,
+  ariaLabel,
+  tooltip,
+  onClick
+}) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsxs(
+    Button,
+    {
+      size: "icon-sm",
+      variant: "destructive",
+      className: "relative rounded-full",
+      disabled: count === 0,
+      "aria-label": ariaLabel,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(MinusIcon, { className: "size-3.5" }),
+        count > 0 && /* @__PURE__ */ jsx("span", { className: "bg-destructive absolute -right-2.5 -top-2.5 flex size-5 items-center justify-center rounded-full text-[10px] font-bold text-white", children: count })
+      ]
+    }
+  ) }),
+  /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+] });
+var ResourceCreationButton = ({
+  ariaLabel,
+  tooltip,
+  onClick
+}) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(Button, { size: "icon-sm", className: "rounded-full", "aria-label": ariaLabel, onClick, children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" }) }) }),
+  /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+] });
+var ResourceDeletionButton = ({
+  onClick,
+  mode = "menu-item",
+  ariaLabel = "Delete",
+  disabled,
+  isPending,
+  label = "Delete",
+  className
+}) => {
+  const isDisabled = disabled || isPending;
+  if (mode === "icon-button") {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": ariaLabel,
+              variant: "ghost",
+              size: "icon-sm",
+              disabled: isDisabled,
+              onClick,
+              className,
+              children: isPending ? /* @__PURE__ */ jsx(Loader2Icon, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Trash2Icon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: isDisabled, onClick, className, children: [
+    isPending ? /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-2 size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Trash2Icon, { className: "mr-2 size-3.5" }),
+    label
+  ] });
+};
+var ResourceModificationButton = ({
+  onClick,
+  mode = "menu-item",
+  ariaLabel = "Edit",
+  disabled
+}) => {
+  if (mode === "icon-button") {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx(
+            Button,
+            {
+              "aria-label": ariaLabel,
+              variant: "ghost",
+              size: "icon-sm",
+              disabled,
+              onClick,
+              children: /* @__PURE__ */ jsx(PencilIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Edit" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled, onClick, children: [
+    /* @__PURE__ */ jsx(PencilIcon, { className: "mr-2 size-3.5" }),
+    "Edit"
+  ] });
+};
+var ResourceRestartButton = ({
+  onClick,
+  mode = "menu-item",
+  ariaLabel = "Restart",
+  disabled
+}) => {
+  if (mode === "icon-button") {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": ariaLabel,
+          variant: "ghost",
+          size: "icon-sm",
+          disabled,
+          onClick,
+          children: /* @__PURE__ */ jsx(RefreshCwIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Restart" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled, onClick, children: [
+    /* @__PURE__ */ jsx(RefreshCwIcon, { className: "mr-2 size-3.5" }),
+    "Restart"
+  ] });
+};
+var ResourceScaleButton = ({
+  onClick,
+  mode = "menu-item",
+  ariaLabel = "Scale",
+  disabled,
+  isNotAllowed,
+  notAllowedReason
+}) => {
+  if (mode === "icon-button") {
+    if (isNotAllowed) {
+      return /* @__PURE__ */ jsxs(Tooltip, { children: [
+        /* @__PURE__ */ jsx(
+          TooltipTrigger,
+          {
+            render: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: /* @__PURE__ */ jsx(Button, { "aria-label": ariaLabel, variant: "ghost", size: "icon-sm", disabled: true, children: /* @__PURE__ */ jsx(ScalingIcon, {}) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: notAllowedReason ?? "Not allowed" })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          "aria-label": ariaLabel,
+          variant: "ghost",
+          size: "icon-sm",
+          disabled,
+          onClick,
+          children: /* @__PURE__ */ jsx(ScalingIcon, {})
+        }
+      ) }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "bottom", children: "Scale" })
+    ] });
+  }
+  if (isNotAllowed) {
+    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(
+        TooltipTrigger,
+        {
+          render: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled: true, children: [
+            /* @__PURE__ */ jsx(ScalingIcon, { className: "mr-2 size-3.5" }),
+            "Scale"
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "left", positionerClassName: "z-popover-nested", children: notAllowedReason ?? "Not allowed" })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenuItem, { disabled, onClick, children: [
+    /* @__PURE__ */ jsx(ScalingIcon, { className: "mr-2 size-3.5" }),
+    "Scale"
+  ] });
+};
+var ResourceDetailEmptyBody = ({ resourceKind }) => /* @__PURE__ */ jsxs("p", { className: "text-muted-foreground p-4 text-xs", children: [
+  "There are no information for this ",
+  resourceKind,
+  "."
+] });
+var ResourceDetailDrawer = ({
+  open,
+  onClose,
+  children,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    Sheet,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) onClose();
+      },
+      children: /* @__PURE__ */ jsx(
+        SheetContent,
+        {
+          side: "right",
+          className: cn("w-200 sm:max-w-200 flex flex-col gap-0 p-0", className),
+          children
+        }
+      )
+    }
+  );
+};
+var ResourceDetailDrawerHeader = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx(
+  SheetHeader,
+  {
+    className: cn("flex flex-row items-center justify-between border-b px-4 py-3", className),
+    children
+  }
+);
+var ResourceDetailDrawerBody = ({
+  children,
+  className
+}) => /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: cn("p-4", className), children }) });
+var LineIcon = ({
+  isError,
+  isSpinning
+}) => {
+  if (isError) return /* @__PURE__ */ jsx(XCircleIcon, { className: "text-destructive mt-0.5 h-3.5 w-3.5 shrink-0" });
+  if (isSpinning)
+    return /* @__PURE__ */ jsx(Loader2Icon, { className: "text-info mt-0.5 h-3.5 w-3.5 shrink-0 animate-spin" });
+  return /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "text-success mt-0.5 h-3.5 w-3.5 shrink-0" });
+};
+var SearchInput = ({
+  wrapperClassName = "w-68",
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2" }),
+    /* @__PURE__ */ jsx(Input, { className: cn("pl-8 text-xs", className), ...props })
+  ] });
+};
+var TIMEZONES = Intl.supportedValuesOf("timeZone");
+var TimezoneSelect = ({
+  value,
+  onChange,
+  "aria-labelledby": ariaLabelledBy
+}) => {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const [dropdownRect, setDropdownRect] = useState(null);
+  const triggerRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const searchRef = useRef(null);
+  const filtered = useMemo(
+    () => search.trim() ? TIMEZONES.filter((tz) => tz.toLowerCase().includes(search.toLowerCase())) : TIMEZONES,
+    [search]
+  );
+  function handleOpen() {
+    const rect = triggerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setDropdownRect({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+    setSearch("");
+    setOpen(true);
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }
+  useEffect(() => {
+    if (!open) return;
+    function handlePointerDown(e) {
+      const target = e.target;
+      if (triggerRef.current?.contains(target) || dropdownRef.current?.contains(target)) return;
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", handlePointerDown);
+    return () => document.removeEventListener("mousedown", handlePointerDown);
+  }, [open]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: triggerRef,
+        variant: "outline",
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-labelledby": ariaLabelledBy,
+        onClick: handleOpen,
+        className: "w-full justify-between font-normal",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: value }),
+          /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground size-4 shrink-0" })
+        ]
+      }
+    ),
+    open && dropdownRect && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: dropdownRef,
+          style: {
+            position: "fixed",
+            top: dropdownRect.top,
+            left: dropdownRect.left,
+            width: dropdownRect.width,
+            zIndex: 50
+          },
+          className: "bg-popover text-popover-foreground ring-foreground/10 flex flex-col overflow-hidden rounded-lg shadow-md ring-1",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "border-b p-1.5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx(SearchIcon, { className: "text-muted-foreground pointer-events-none absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ref: searchRef,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value),
+                  placeholder: "Search timezone\u2026",
+                  className: "pl-8 text-sm"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { role: "listbox", "aria-label": "Timezone", className: "max-h-56 overflow-y-auto p-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-3 py-4 text-center text-sm", children: "No timezone found." }) : filtered.map((tz) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "option",
+                "aria-selected": tz === value,
+                tabIndex: -1,
+                onClick: () => {
+                  onChange(tz);
+                  setOpen(false);
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onChange(tz);
+                    setOpen(false);
+                  }
+                },
+                className: cn(
+                  "flex cursor-pointer items-center justify-between rounded-md px-3 py-1.5 text-sm",
+                  tz === value ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
+                ),
+                children: [
+                  tz,
+                  tz === value && /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 shrink-0" })
+                ]
+              },
+              tz
+            )) })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var ConfirmationModal = ({
+  open,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  confirmVariant = "default",
+  isPending,
+  onClose,
+  onConfirm
+}) => /* @__PURE__ */ jsx(
+  Dialog,
+  {
+    open,
+    onOpenChange: (o) => {
+      if (!o && !isPending) onClose();
+    },
+    children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-h2 flex gap-2", children: title }) }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-body", children: description }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: isPending, onClick: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsxs(Button, { variant: confirmVariant, disabled: isPending, onClick: onConfirm, children: [
+          isPending && /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
+          confirmLabel
+        ] })
+      ] })
+    ] })
+  }
+);
+var FormModal = ({
+  open,
+  onOpenChange,
+  onClose,
+  title,
+  children,
+  onSubmit,
+  isLoading = false,
+  submitDisabled = false,
+  submitLabel = "Submit",
+  cancelLabel = "Cancel",
+  size = "sm"
+}) => /* @__PURE__ */ jsx(
+  Dialog,
+  {
+    open,
+    onOpenChange: (o) => {
+      if (!o && !isLoading) onClose();
+      onOpenChange?.(o);
+    },
+    children: /* @__PURE__ */ jsxs(DialogContent, { size, children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-h2", children: title }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: isLoading, onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ jsxs(Button, { disabled: isLoading || submitDisabled, onClick: onSubmit, children: [
+          isLoading && /* @__PURE__ */ jsx(Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
+          submitLabel
+        ] })
+      ] })
+    ] })
+  }
+);
+var EMPTY_COLUMN_WIDTHS = [];
+var TableSkeletonRow = ({
+  columns,
+  includeCheckbox = false,
+  columnWidths = EMPTY_COLUMN_WIDTHS
+}) => /* @__PURE__ */ jsxs(TableRow, { children: [
+  includeCheckbox && /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("div", { className: "bg-muted h-4 w-4 animate-pulse rounded-[4px]" }) }),
+  Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("bg-muted h-4 animate-pulse rounded-sm", columnWidths[i] ?? "w-[70%]")
+    }
+  ) }, i)),
+  /* @__PURE__ */ jsx(TableCell, {})
+] });
+var EMPTY_COLUMN_WIDTHS2 = [];
+var TableSkeletonLoader = ({
+  rows = 5,
+  columns,
+  includeCheckbox = false,
+  columnWidths = EMPTY_COLUMN_WIDTHS2
+}) => /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsx(
+  TableSkeletonRow,
+  {
+    columns,
+    includeCheckbox,
+    columnWidths
+  },
+  i
+)) });
+var markdownComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-foreground mb-3 mt-4 text-lg font-bold leading-tight", children }),
+  h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-foreground border-border/50 mb-2.5 mt-3.5 border-b pb-2 text-base font-semibold leading-snug", children }),
+  h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-foreground mb-2 mt-3 text-sm font-semibold leading-snug", children }),
+  h4: ({ children }) => /* @__PURE__ */ jsx("h4", { className: "text-foreground mb-1.5 mt-2.5 text-sm font-semibold leading-snug", children }),
+  h5: ({ children }) => /* @__PURE__ */ jsx("h5", { className: "text-foreground mb-1.5 mt-2.5 text-xs font-semibold leading-snug", children }),
+  h6: ({ children }) => /* @__PURE__ */ jsx("h6", { className: "text-muted-foreground mb-1.5 mt-2.5 text-xs font-semibold leading-snug", children }),
+  p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "text-foreground mb-2.5 text-xs leading-relaxed", children }),
+  ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "text-foreground mb-2.5 list-inside list-disc space-y-1 text-xs leading-relaxed", children }),
+  ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "text-foreground mb-2.5 list-inside list-decimal space-y-1 text-xs leading-relaxed", children }),
+  li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "text-foreground text-xs leading-relaxed", children }),
+  pre: ({ children }) => /* @__PURE__ */ jsx("pre", { className: "bg-muted/40 border-border/40 my-3 overflow-x-auto rounded border p-3", children }),
+  code: ({ children, className }) => {
+    const isBlock = !!className;
+    if (isBlock) {
+      return /* @__PURE__ */ jsx("code", { className: "text-foreground block font-mono text-xs leading-relaxed", children });
+    }
+    return /* @__PURE__ */ jsx("code", { className: "bg-muted/60 text-foreground rounded px-1.5 py-0.5 font-mono text-xs", children });
+  },
+  table: ({ children }) => /* @__PURE__ */ jsx("div", { className: "my-3 overflow-x-auto", children: /* @__PURE__ */ jsx("table", { className: "border-collapse text-xs", children }) }),
+  thead: ({ children }) => /* @__PURE__ */ jsx("thead", { className: "bg-muted/50", children }),
+  th: ({ children }) => /* @__PURE__ */ jsx("th", { className: "text-foreground border-border/40 border px-2.5 py-2 text-left text-xs font-semibold", children }),
+  td: ({ children }) => /* @__PURE__ */ jsx("td", { className: "border-border/40 text-foreground border px-2.5 py-2 text-xs", children }),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { className: "border-border/60 text-muted-foreground my-2.5 border-l-4 py-1 pl-3 text-xs italic", children }),
+  a: ({ children, href }) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "wrap-break-word cursor-pointer text-blue-500 underline-offset-1 hover:underline",
+      children
+    }
+  ),
+  img: ({ src, alt }) => /* @__PURE__ */ jsx("img", { src, alt, className: "border-border/40 my-2.5 h-auto max-w-full rounded border" }),
+  hr: () => /* @__PURE__ */ jsx("hr", { className: "border-border/40 my-3 border-t" })
+};
+var Markdown = ({ children, className }) => /* @__PURE__ */ jsx("div", { className: cn("text-foreground", className), children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents, children: children.replace(/<!--[\s\S]*?-->/g, "") }) });
+var TruncatedText = ({ text, className, tooltipClassName, positionerClassName }) => {
+  const wrapperRef = useRef(null);
+  const textRef = useRef(null);
+  const [overflowing, setOverflowing] = useState(false);
+  useLayoutEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const check = () => {
+      const el = textRef.current;
+      if (el) setOverflowing(el.scrollWidth > el.clientWidth);
+    };
+    check();
+    const observer = new ResizeObserver(check);
+    observer.observe(wrapper);
+    return () => observer.disconnect();
+  }, [text]);
+  const content = /* @__PURE__ */ jsx("span", { ref: textRef, className: cn("block truncate font-mono text-xs", className), children: text });
+  return /* @__PURE__ */ jsx("span", { ref: wrapperRef, className: "block min-w-0 overflow-hidden", children: overflowing ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { className: "block w-full", children: content }),
+    /* @__PURE__ */ jsx(TooltipContent, { className: tooltipClassName, positionerClassName, children: /* @__PURE__ */ jsx("p", { children: text }) })
+  ] }) : content });
+};
+var SuccessToast = ({ title, description, action }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-(--radius) bg-success flex w-full flex-col gap-1.5 px-4 py-3 text-white shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(CircleCheckIcon, { className: "mt-0.5 h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm font-semibold", children: title }),
+      action && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "xs",
+          className: "shrink-0 border-white/40 bg-transparent text-white hover:bg-white/10 hover:text-white",
+          onClick: action.onClick,
+          children: action.label
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "pl-7 text-xs opacity-90", children: description })
+  ] });
+};
+
+// src/components/toasts/const.ts
+var TOAST_STYLE = { "--width": "450px" };
+function renderSuccessToast(props) {
+  toast.custom(
+    (t) => /* @__PURE__ */ jsx(
+      SuccessToast,
+      {
+        ...props,
+        action: props.action && {
+          label: props.action.label,
+          onClick: () => {
+            toast.dismiss(t);
+            props.action.onClick();
+          }
+        }
+      }
+    ),
+    { style: TOAST_STYLE }
+  );
+}
+var ErrorToast = ({ title, description, action }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-(--radius) bg-destructive flex w-full flex-col gap-1.5 px-4 py-3 text-white shadow-lg", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx(CircleXIcon, { className: "mt-0.5 h-4 w-4 shrink-0" }),
+      /* @__PURE__ */ jsx("p", { className: "flex-1 text-sm font-semibold", children: title }),
+      action && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "xs",
+          className: "shrink-0 border-white/40 bg-transparent text-white hover:bg-white/10 hover:text-white",
+          onClick: action.onClick,
+          children: action.label
+        }
+      )
+    ] }),
+    description && /* @__PURE__ */ jsx("p", { className: "pl-7 text-xs opacity-90", children: description })
+  ] });
+};
+function renderErrorToast(props) {
+  toast.custom(
+    (t) => /* @__PURE__ */ jsx(
+      ErrorToast,
+      {
+        ...props,
+        action: props.action && {
+          label: props.action.label,
+          onClick: () => {
+            toast.dismiss(t);
+            props.action.onClick();
+          }
+        }
+      }
+    ),
+    { style: TOAST_STYLE }
+  );
+}
+
+export { AnnotationBadge, ButtonGroup, ConfirmationModal, Divider, DonutChart, EmptyState, ErrorBoundary, ErrorToast, FormModal, LineIcon, LoadingSpinner, Markdown, ResourceBulkDeletionButton, ResourceCell, ResourceCreationButton, ResourceDeletionButton, ResourceDetailDrawer, ResourceDetailDrawerBody, ResourceDetailDrawerHeader, ResourceDetailEmptyBody, ResourceLink, ResourceModificationButton, ResourceRestartButton, ResourceScaleButton, SearchInput, SuccessToast, TOAST_STYLE, TableSkeletonLoader, TableSkeletonRow, TimezoneSelect, TruncatedText, renderErrorToast, renderSuccessToast };