@checkmate-monitor/ui 0.1.0

package/src/components/ColorPicker.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+interface ColorPickerProps {
+  id?: string;
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  id,
+  value,
+  onChange,
+  placeholder = "#000000",
+  className,
+}) => {
+  const colorInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Normalize hex color (add # if missing, ensure valid format for color input)
+  const normalizedValue = React.useMemo(() => {
+    if (!value) return "#000000";
+    const hex = value.startsWith("#") ? value : `#${value}`;
+    // Validate hex format for the color input (must be #RRGGBB)
+    if (/^#[0-9A-Fa-f]{6}$/.test(hex)) {
+      return hex;
+    }
+    // Handle 3-character hex
+    if (/^#[0-9A-Fa-f]{3}$/.test(hex)) {
+      const r = hex[1];
+      const g = hex[2];
+      const b = hex[3];
+      return `#${r}${r}${g}${g}${b}${b}`;
+    }
+    return "#000000";
+  }, [value]);
+
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <button
+        type="button"
+        className="h-10 w-10 shrink-0 rounded-md border border-input overflow-hidden focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 transition-shadow"
+        style={{ backgroundColor: normalizedValue }}
+        onClick={() => colorInputRef.current?.click()}
+        aria-label="Pick color"
+      >
+        <input
+          ref={colorInputRef}
+          type="color"
+          value={normalizedValue}
+          onChange={(e) => onChange(e.target.value)}
+          className="sr-only"
+          tabIndex={-1}
+        />
+      </button>
+      <input
+        id={id}
+        type="text"
+        value={value || ""}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50"
+      />
+    </div>
+  );
+};
+
+ColorPicker.displayName = "ColorPicker";

package/src/components/CommandPalette.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { cn } from "../utils";
+import { Command } from "lucide-react";
+
+interface CommandPaletteProps {
+  onClick?: () => void;
+  placeholder?: string;
+  className?: string;
+}
+
+/**
+ * CommandPalette - Hero search bar with keyboard shortcut hint
+ * Displays a prominent search input that triggers a search dialog on click
+ */
+export const CommandPalette: React.FC<CommandPaletteProps> = ({
+  onClick,
+  placeholder = "Search systems, incidents, or run commands...",
+  className,
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        // Base styles
+        "w-full flex items-center gap-3 px-4 py-3 rounded-xl",
+        // Glassmorphism effect
+        "bg-card/50 backdrop-blur-sm border border-border/50",
+        // Glow and shadow
+        "shadow-lg shadow-primary/5 hover:shadow-xl hover:shadow-primary/10",
+        // Hover state
+        "hover:border-primary/30 hover:bg-card/70",
+        // Transition
+        "transition-all duration-300 ease-out",
+        // Focus ring
+        "focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-background",
+        // Cursor
+        "cursor-text",
+        className
+      )}
+    >
+      {/* Search icon */}
+      <svg
+        className="w-5 h-5 text-muted-foreground flex-shrink-0"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        />
+      </svg>
+
+      {/* Placeholder text with typewriter effect */}
+      <span className="flex-1 text-left text-muted-foreground text-sm font-medium truncate">
+        {placeholder}
+      </span>
+
+      {/* Keyboard shortcut badge */}
+      <kbd
+        className={cn(
+          "hidden sm:flex items-center gap-1 px-2 py-1 rounded-md",
+          "bg-muted/50 border border-border/50",
+          "text-xs text-muted-foreground font-mono"
+        )}
+      >
+        <Command className="w-3 h-3" />
+        <span>K</span>
+      </kbd>
+    </button>
+  );
+};

package/src/components/ConfirmationModal.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import { cn } from "../utils";
+import { Button } from "./Button";
+import { AlertTriangle, X } from "lucide-react";
+
+export interface ConfirmationModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: "danger" | "warning" | "info";
+  isLoading?: boolean;
+}
+
+export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmText = "Confirm",
+  cancelText = "Cancel",
+  variant = "danger",
+  isLoading = false,
+}) => {
+  if (!isOpen) return;
+
+  const handleConfirm = () => {
+    onConfirm();
+  };
+
+  const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+
+  const variantStyles = {
+    danger: {
+      icon: "text-destructive",
+      iconBg: "bg-destructive/10",
+      button:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+    },
+    warning: {
+      icon: "text-warning",
+      iconBg: "bg-warning/10",
+      button: "bg-warning text-warning-foreground hover:bg-warning/90",
+    },
+    info: {
+      icon: "text-info",
+      iconBg: "bg-info/10",
+      button: "bg-info text-info-foreground hover:bg-info/90",
+    },
+  };
+
+  const styles = variantStyles[variant];
+
+  return (
+    <div
+      className="fixed inset-0 z-[60] !m-0 flex items-center justify-center bg-black/50 transition-opacity pointer-events-auto"
+      onClick={handleBackdropClick}
+    >
+      <div
+        className="bg-background rounded-lg shadow-xl max-w-md w-full mx-4 animate-in fade-in zoom-in duration-200 pointer-events-auto"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+        aria-describedby="modal-description"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-start justify-between p-6 pb-4">
+          <div className="flex items-start gap-4">
+            <div className={cn("rounded-full p-2", styles.iconBg)}>
+              <AlertTriangle className={cn("w-6 h-6", styles.icon)} />
+            </div>
+            <div className="flex-1">
+              <h3
+                id="modal-title"
+                className="text-lg font-semibold text-foreground"
+              >
+                {title}
+              </h3>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            disabled={isLoading}
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="px-6 pb-6">
+          <p
+            id="modal-description"
+            className="text-sm text-muted-foreground pl-14"
+          >
+            {message}
+          </p>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 px-6 py-4 bg-muted/30 rounded-b-lg">
+          <Button
+            variant="ghost"
+            onClick={onClose}
+            disabled={isLoading}
+            type="button"
+          >
+            {cancelText}
+          </Button>
+          <button
+            onClick={handleConfirm}
+            disabled={isLoading}
+            className={cn(
+              "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none h-10 px-4 py-2",
+              styles.button
+            )}
+            type="button"
+          >
+            {isLoading ? "Processing..." : confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/DateRangeFilter.tsx

@@ -0,0 +1,128 @@
+import React, { useState, useMemo } from "react";
+import { subDays, subHours, startOfDay } from "date-fns";
+import { DateTimePicker } from "./DateTimePicker";
+import { Button } from "./Button";
+import { Calendar } from "lucide-react";
+
+export interface DateRange {
+  startDate: Date;
+  endDate: Date;
+}
+
+export type DateRangePreset = "24h" | "7d" | "30d" | "custom";
+
+export interface DateRangeFilterProps {
+  value: DateRange;
+  onChange: (range: DateRange) => void;
+  className?: string;
+}
+
+const PRESETS: Array<{ id: DateRangePreset; label: string }> = [
+  { id: "24h", label: "Last 24h" },
+  { id: "7d", label: "Last 7 days" },
+  { id: "30d", label: "Last 30 days" },
+  { id: "custom", label: "Custom" },
+];
+
+function getPresetRange(preset: DateRangePreset): DateRange {
+  const now = new Date();
+  switch (preset) {
+    case "24h": {
+      return { startDate: subHours(now, 24), endDate: now };
+    }
+    case "7d": {
+      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+    }
+    case "30d": {
+      return { startDate: startOfDay(subDays(now, 30)), endDate: now };
+    }
+    case "custom": {
+      return { startDate: startOfDay(subDays(now, 7)), endDate: now };
+    }
+  }
+}
+
+function detectPreset(range: DateRange): DateRangePreset {
+  const now = new Date();
+  const diffMs = now.getTime() - range.startDate.getTime();
+  const diffHours = diffMs / (1000 * 60 * 60);
+  const diffDays = diffHours / 24;
+
+  if (diffHours <= 25 && diffHours >= 23) return "24h";
+  if (diffDays <= 8 && diffDays >= 6) return "7d";
+  if (diffDays <= 31 && diffDays >= 29) return "30d";
+  return "custom";
+}
+
+/**
+ * Date range filter with preset buttons and custom date pickers.
+ */
+export const DateRangeFilter: React.FC<DateRangeFilterProps> = ({
+  value,
+  onChange,
+  className,
+}) => {
+  const activePreset = useMemo(() => detectPreset(value), [value]);
+  const [showCustom, setShowCustom] = useState(activePreset === "custom");
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    if (preset === "custom") {
+      setShowCustom(true);
+    } else {
+      setShowCustom(false);
+      onChange(getPresetRange(preset));
+    }
+  };
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      <div className="flex items-center gap-2 flex-wrap">
+        <Calendar className="h-4 w-4 text-muted-foreground" />
+        <span className="text-sm font-medium text-muted-foreground">
+          Time range:
+        </span>
+        <div className="flex gap-1">
+          {PRESETS.map((preset) => (
+            <Button
+              key={preset.id}
+              variant={
+                activePreset === preset.id && !showCustom
+                  ? "primary"
+                  : preset.id === "custom" && showCustom
+                  ? "primary"
+                  : "outline"
+              }
+              size="sm"
+              onClick={() => handlePresetClick(preset.id)}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {showCustom && (
+        <div className="flex items-center gap-2 flex-wrap">
+          <span className="text-sm text-muted-foreground">From:</span>
+          <DateTimePicker
+            value={value.startDate}
+            onChange={(startDate) => onChange({ ...value, startDate })}
+            maxDate={value.endDate}
+          />
+          <span className="text-sm text-muted-foreground">To:</span>
+          <DateTimePicker
+            value={value.endDate}
+            onChange={(endDate) => onChange({ ...value, endDate })}
+            minDate={value.startDate}
+            maxDate={new Date()}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+/** Create a default date range (last 7 days) */
+export function getDefaultDateRange(): DateRange {
+  return getPresetRange("7d");
+}

package/src/components/DateTimePicker.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { format } from "date-fns";
+import { Input } from "./Input";
+import { Calendar, Clock } from "lucide-react";
+
+export interface DateTimePickerProps {
+  value: Date;
+  onChange: (date: Date) => void;
+  minDate?: Date;
+  maxDate?: Date;
+  className?: string;
+}
+
+/**
+ * Combined date and time picker component
+ */
+export const DateTimePicker: React.FC<DateTimePickerProps> = ({
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  className,
+}) => {
+  const dateString = format(value, "yyyy-MM-dd");
+  const timeString = format(value, "HH:mm");
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const [year, month, day] = e.target.value.split("-").map(Number);
+    const newDate = new Date(value);
+    newDate.setFullYear(year, month - 1, day);
+    onChange(newDate);
+  };
+
+  const handleTimeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const [hours, minutes] = e.target.value.split(":").map(Number);
+    const newDate = new Date(value);
+    newDate.setHours(hours, minutes);
+    onChange(newDate);
+  };
+
+  return (
+    <div className={`flex gap-2 ${className ?? ""}`}>
+      <div className="relative flex-1">
+        <Input
+          type="date"
+          value={dateString}
+          onChange={handleDateChange}
+          min={minDate ? format(minDate, "yyyy-MM-dd") : undefined}
+          max={maxDate ? format(maxDate, "yyyy-MM-dd") : undefined}
+          className="pl-9"
+        />
+        <Calendar className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+      </div>
+      <div className="relative w-28">
+        <Input
+          type="time"
+          value={timeString}
+          onChange={handleTimeChange}
+          className="pl-9"
+        />
+        <Clock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+      </div>
+    </div>
+  );
+};

package/src/components/Dialog.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogContentVariants = cva(
+  "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background text-foreground p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[85vh] overflow-y-auto",
+  {
+    variants: {
+      size: {
+        sm: "max-w-sm",
+        default: "max-w-lg",
+        lg: "max-w-2xl",
+        xl: "max-w-4xl",
+        full: "max-w-[90vw]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogContentVariants> {}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(dialogContentVariants({ size }), className)}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src/components/DropdownMenu.tsx

@@ -0,0 +1,96 @@
+import React, { useRef, useEffect } from "react";
+import { cn } from "../utils";
+
+export const DropdownMenu: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return <div className="relative inline-block text-left">{children}</div>;
+};
+
+export const DropdownMenuTrigger: React.FC<{
+  children: React.ReactNode;
+  asChild?: boolean;
+  onClick?: () => void;
+}> = ({ children, onClick }) => {
+  return (
+    <div onClick={onClick} className="cursor-pointer">
+      {children}
+    </div>
+  );
+};
+
+export const DropdownMenuContent: React.FC<{
+  children: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  className?: string;
+}> = ({ children, isOpen, onClose, className }) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        contentRef.current &&
+        !contentRef.current.contains(event.target as Node)
+      ) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return <React.Fragment />;
+
+  return (
+    <div
+      ref={contentRef}
+      className={cn(
+        "absolute right-0 mt-2 w-56 origin-top-right rounded-md bg-popover shadow-lg ring-1 ring-border focus:outline-none z-[100] animate-in fade-in zoom-in-95 duration-100",
+        className
+      )}
+    >
+      <div className="py-1" role="none">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const DropdownMenuItem: React.FC<{
+  children: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  icon?: React.ReactNode;
+}> = ({ children, onClick, className, icon }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex items-center w-full px-4 py-2 text-sm text-popover-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+        className
+      )}
+      role="menuitem"
+    >
+      {icon && <span className="mr-3 text-muted-foreground">{icon}</span>}
+      {children}
+    </button>
+  );
+};
+
+export const DropdownMenuSeparator: React.FC = () => (
+  <div className="my-1 h-px bg-border" />
+);
+
+export const DropdownMenuLabel: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => (
+  <div className="px-4 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+    {children}
+  </div>
+);