@checkstack/ui 0.0.2

package/src/components/Pagination.tsx

@@ -0,0 +1,195 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "./Button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./Select";
+import { cn } from "../utils";
+
+export interface PaginationProps {
+  /** Current page (1-indexed) */
+  page: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Callback when page changes */
+  onPageChange: (page: number) => void;
+  /** Total number of items (optional, for display) */
+  total?: number;
+  /** Items per page (for page size selector) */
+  limit?: number;
+  /** Available page sizes */
+  pageSizes?: number[];
+  /** Callback when page size changes */
+  onPageSizeChange?: (limit: number) => void;
+  /** Show page size selector */
+  showPageSize?: boolean;
+  /** Show total items count */
+  showTotal?: boolean;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * Pagination component for navigating through paginated data.
+ * Works seamlessly with usePagination hook.
+ *
+ * @example
+ * ```tsx
+ * const { items, pagination } = usePagination({ ... });
+ *
+ * <Pagination
+ *   page={pagination.page}
+ *   totalPages={pagination.totalPages}
+ *   onPageChange={pagination.setPage}
+ *   limit={pagination.limit}
+ *   onPageSizeChange={pagination.setLimit}
+ *   total={pagination.total}
+ *   showPageSize
+ *   showTotal
+ * />
+ * ```
+ */
+export function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  total,
+  limit,
+  pageSizes = [10, 25, 50, 100],
+  onPageSizeChange,
+  showPageSize = false,
+  showTotal = false,
+  className,
+}: PaginationProps) {
+  const hasPrev = page > 1;
+  const hasNext = page < totalPages;
+
+  // Generate page numbers to show
+  const getPageNumbers = (): (number | "ellipsis")[] => {
+    const pages: (number | "ellipsis")[] = [];
+    const maxVisible = 5;
+
+    if (totalPages <= maxVisible) {
+      // Show all pages
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first page
+      pages.push(1);
+
+      if (page > 3) {
+        pages.push("ellipsis");
+      }
+
+      // Show pages around current
+      const start = Math.max(2, page - 1);
+      const end = Math.min(totalPages - 1, page + 1);
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+
+      if (page < totalPages - 2) {
+        pages.push("ellipsis");
+      }
+
+      // Always show last page
+      if (totalPages > 1) {
+        pages.push(totalPages);
+      }
+    }
+
+    return pages;
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-4 flex-wrap",
+        className
+      )}
+    >
+      {/* Left side: Page size selector and total */}
+      <div className="flex items-center gap-4">
+        {showPageSize && limit && onPageSizeChange && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Show</span>
+            <Select
+              value={String(limit)}
+              onValueChange={(value) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger className="h-8 w-[70px]">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizes.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        {showTotal && total !== undefined && (
+          <span className="text-sm text-muted-foreground">
+            {total} {total === 1 ? "item" : "items"}
+          </span>
+        )}
+      </div>
+
+      {/* Right side: Page navigation */}
+      <div className="flex items-center gap-1">
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => onPageChange(page - 1)}
+          disabled={!hasPrev}
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+
+        {getPageNumbers().map((pageNum, idx) =>
+          pageNum === "ellipsis" ? (
+            <span
+              key={`ellipsis-${idx}`}
+              className="px-2 text-muted-foreground"
+            >
+              ...
+            </span>
+          ) : (
+            <Button
+              key={pageNum}
+              variant={pageNum === page ? "primary" : "outline"}
+              size="sm"
+              className="h-8 w-8 p-0"
+              onClick={() => onPageChange(pageNum)}
+              aria-label={`Page ${pageNum}`}
+              aria-current={pageNum === page ? "page" : undefined}
+            >
+              {pageNum}
+            </Button>
+          )
+        )}
+
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={() => onPageChange(page + 1)}
+          disabled={!hasNext}
+          aria-label="Next page"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/components/PermissionDenied.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { ShieldAlert } from "lucide-react";
+import { Card, CardHeader, CardTitle, CardContent } from "./Card";
+import { cn } from "../utils";
+
+export const PermissionDenied: React.FC<{
+  message?: string;
+  className?: string;
+}> = ({
+  message = "You do not have permission to view this page.",
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center min-h-[50vh] p-4",
+        className
+      )}
+    >
+      <Card className="max-w-md w-full border-destructive/30 bg-destructive/10">
+        <CardHeader className="flex flex-row items-center gap-4 pb-2">
+          <ShieldAlert className="w-8 h-8 text-destructive" />
+          <CardTitle className="text-destructive">Access Denied</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-destructive">{message}</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/components/PermissionGate.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { PermissionDenied } from "./PermissionDenied";
+import { LoadingSpinner } from "./LoadingSpinner";
+
+/**
+ * Props for the PermissionGate component.
+ */
+export interface PermissionGateProps {
+  /**
+   * The permission ID to check for access.
+   */
+  permission: string;
+  /**
+   * Content to render when permission is granted.
+   */
+  children: React.ReactNode;
+  /**
+   * Custom fallback to render when permission is denied.
+   * If not provided and showDenied is false, renders nothing.
+   */
+  fallback?: React.ReactNode;
+  /**
+   * If true, shows a PermissionDenied component when access is denied.
+   * Useful for entire page sections. Overridden by fallback if provided.
+   */
+  showDenied?: boolean;
+  /**
+   * Custom message to show in the PermissionDenied component.
+   */
+  deniedMessage?: string;
+  /**
+   * Hook to check permissions. Must be provided by the consumer.
+   * This allows the component to be used without depending on auth-frontend directly.
+   */
+  usePermission: (permission: string) => { loading: boolean; allowed: boolean };
+}
+
+/**
+ * Conditionally renders children based on whether the user has a required permission.
+ *
+ * @example
+ * // Hide content if permission denied
+ * <PermissionGate permission="catalog.manage" usePermission={permissionApi.usePermission}>
+ *   <ManageButton />
+ * </PermissionGate>
+ *
+ * @example
+ * // Show permission denied message
+ * <PermissionGate
+ *   permission="catalog.read"
+ *   usePermission={permissionApi.usePermission}
+ *   showDenied
+ *   deniedMessage="You don't have access to view the catalog."
+ * >
+ *   <CatalogList />
+ * </PermissionGate>
+ *
+ * @example
+ * // Custom fallback
+ * <PermissionGate
+ *   permission="admin.manage"
+ *   usePermission={permissionApi.usePermission}
+ *   fallback={<p>Admin access required</p>}
+ * >
+ *   <AdminPanel />
+ * </PermissionGate>
+ */
+export const PermissionGate: React.FC<PermissionGateProps> = ({
+  permission,
+  children,
+  fallback,
+  showDenied = false,
+  deniedMessage,
+  usePermission,
+}) => {
+  const { loading, allowed } = usePermission(permission);
+
+  if (loading) {
+    return <LoadingSpinner size="sm" />;
+  }
+
+  if (!allowed) {
+    if (fallback) {
+      return <>{fallback}</>;
+    }
+    if (showDenied) {
+      return (
+        <PermissionDenied
+          message={deniedMessage ?? `You don't have permission: ${permission}`}
+        />
+      );
+    }
+    return <></>;
+  }
+
+  return <>{children}</>;
+};

package/src/components/PluginConfigForm.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  DynamicForm,
+} from "..";
+import { JsonSchema } from "./DynamicForm";
+
+export interface PluginOption {
+  id: string;
+  displayName: string;
+  description?: string;
+  configSchema: JsonSchema;
+}
+
+interface PluginConfigFormProps {
+  label: string;
+  plugins: PluginOption[];
+  selectedPluginId: string;
+  onPluginChange: (id: string) => void;
+  config: Record<string, unknown>;
+  onConfigChange: (config: Record<string, unknown>) => void;
+  onValidChange?: (isValid: boolean) => void;
+  disabled?: boolean;
+}
+
+export const PluginConfigForm: React.FC<PluginConfigFormProps> = ({
+  label,
+  plugins,
+  selectedPluginId,
+  onPluginChange,
+  config,
+  onConfigChange,
+  onValidChange,
+  disabled,
+}) => {
+  const selectedPlugin = plugins.find((p) => p.id === selectedPluginId);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Label htmlFor="plugin-select">{label}</Label>
+        <Select
+          value={selectedPluginId}
+          onValueChange={onPluginChange}
+          disabled={disabled}
+        >
+          <SelectTrigger id="plugin-select">
+            <SelectValue placeholder={`Select ${label.toLowerCase()}`} />
+          </SelectTrigger>
+          <SelectContent>
+            {plugins.map((plugin) => (
+              <SelectItem key={plugin.id} value={plugin.id}>
+                <div>
+                  <div className="font-medium">{plugin.displayName}</div>
+                  {plugin.description && (
+                    <div className="text-xs text-muted-foreground">
+                      {plugin.description}
+                    </div>
+                  )}
+                </div>
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {selectedPlugin && (
+        <div className="space-y-4">
+          <div className="pt-4 border-t border-border">
+            <h3 className="text-lg font-semibold">Configuration</h3>
+            <p className="text-sm text-muted-foreground">
+              Configure the settings for {selectedPlugin.displayName}
+            </p>
+          </div>
+
+          <DynamicForm
+            schema={selectedPlugin.configSchema}
+            value={config}
+            onChange={onConfigChange}
+            onValidChange={onValidChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/SectionHeader.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { cn } from "../utils";
+
+interface SectionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  icon?: React.ReactNode;
+  description?: string;
+}
+
+export const SectionHeader: React.FC<SectionHeaderProps> = ({
+  title,
+  icon,
+  description,
+  className,
+  ...props
+}) => {
+  return (
+    <div className={cn("flex items-center gap-2 mb-6", className)} {...props}>
+      {icon && <div className="text-primary">{icon}</div>}
+      <div>
+        <h2 className="text-xl font-semibold tracking-tight text-foreground">
+          {title}
+        </h2>
+        {description && (
+          <p className="text-sm text-muted-foreground mt-1">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Select.tsx

@@ -0,0 +1,157 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "../utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm text-left ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-[100] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/components/StatusCard.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { Card, CardHeader, CardTitle, CardContent } from "./Card";
+import { cn } from "../utils";
+
+interface StatusCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  value: React.ReactNode;
+  description?: string;
+  icon?: React.ReactNode;
+  variant?: "default" | "gradient";
+}
+
+export const StatusCard: React.FC<StatusCardProps> = ({
+  title,
+  value,
+  description,
+  icon,
+  variant = "default",
+  className,
+  ...props
+}) => {
+  const isGradient = variant === "gradient";
+
+  return (
+    <Card
+      className={cn(
+        "border-none shadow-sm transition-all duration-200",
+        isGradient
+          ? "bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md active:scale-[0.98]"
+          : "bg-card hover:border-border",
+        className
+      )}
+      {...props}
+    >
+      <CardHeader className="pb-2">
+        <CardTitle
+          className={cn(
+            "text-lg font-medium",
+            isGradient ? "opacity-90 text-white" : "text-muted-foreground"
+          )}
+        >
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-baseline gap-2">
+          <span
+            className={cn(
+              "text-2xl font-semibold",
+              isGradient ? "text-3xl font-bold" : "text-foreground"
+            )}
+          >
+            {value}
+          </span>
+          {icon && (
+            <div
+              className={cn(
+                isGradient ? "text-white" : "text-muted-foreground/60"
+              )}
+            >
+              {icon}
+            </div>
+          )}
+        </div>
+        {description && (
+          <p
+            className={cn(
+              "mt-1 text-sm",
+              isGradient ? "opacity-80" : "text-muted-foreground"
+            )}
+          >
+            {description}
+          </p>
+        )}
+      </CardContent>
+    </Card>
+  );
+};