@checkstack/ui 0.0.2

package/src/components/Card.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { cn } from "../utils";
+
+export const Card = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "rounded-lg border border-border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+);
+
+export const CardHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+);
+
+export const CardTitle = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) => (
+  <h3
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+);
+
+export const CardDescription = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) => (
+  <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+);
+
+export const CardContent = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("p-6 pt-0", className)} {...props} />
+);
+
+export const CardFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex items-center p-6 pt-0", className)} {...props} />
+);

package/src/components/Checkbox.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Check } from "lucide-react";
+import { cn } from "../utils";
+
+interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  className,
+  checked,
+  onCheckedChange,
+  ...props
+}) => {
+  // Compute styles to avoid nested ternary
+  const getBackgroundStyles = () => {
+    if (props.disabled) {
+      return "bg-muted border-border cursor-not-allowed";
+    }
+    if (checked) {
+      return "bg-primary border-primary cursor-pointer";
+    }
+    return "bg-background border-input cursor-pointer";
+  };
+
+  return (
+    <div
+      className={cn(
+        "peer h-4 w-4 shrink-0 rounded-sm border ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 flex items-center justify-center transition-colors",
+        getBackgroundStyles(),
+        className
+      )}
+      onClick={() => !props.disabled && onCheckedChange?.(!checked)}
+    >
+      {checked && (
+        <Check
+          className={cn(
+            "h-3 w-3",
+            props.disabled ? "text-muted-foreground" : "text-primary-foreground"
+          )}
+          strokeWidth={3}
+        />
+      )}
+    </div>
+  );
+};

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