@doccov/ui 0.2.1 → 0.2.3

package/dist/{components/api → api}/index.js

@@ -1,11 +1,16 @@
 "use client";
-import {
-  cn
-} from "../../lib/utils.js";
-
 // src/components/api/ParameterItem.tsx
 import { ChevronRight } from "lucide-react";
 import { useState } from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/api/ParameterItem.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
 function getNestedProperties(schema) {

package/dist/badge/index.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const kindBadgeVariants: unknown;
+interface KindBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof kindBadgeVariants> {
+	label?: string;
+}
+declare const KindBadge: unknown;
+declare const statusBadgeVariants: unknown;
+interface StatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusBadgeVariants> {
+	label?: string;
+	icon?: React.ReactNode;
+}
+declare const StatusBadge: unknown;
+export { statusBadgeVariants, kindBadgeVariants, StatusBadgeProps, StatusBadge, KindBadgeProps, KindBadge };

package/dist/badge/index.js

@@ -0,0 +1,86 @@
+// src/components/badge/badge.tsx
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/badge/badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var kindBadgeVariants = cva("inline-flex items-center justify-center font-mono font-medium rounded shrink-0", {
+  variants: {
+    kind: {
+      function: "bg-kind-function/15 text-kind-function",
+      class: "bg-kind-class/15 text-kind-class",
+      interface: "bg-kind-interface/15 text-kind-interface",
+      type: "bg-kind-type/15 text-kind-type",
+      enum: "bg-kind-enum/15 text-kind-enum",
+      variable: "bg-kind-variable/15 text-kind-variable"
+    },
+    size: {
+      sm: "h-4 px-1 text-[10px]",
+      md: "h-5 px-1.5 text-xs"
+    }
+  },
+  defaultVariants: {
+    kind: "function",
+    size: "md"
+  }
+});
+var KindBadge = React.forwardRef(({ className, kind, size, label, ...props }, ref) => {
+  const defaultLabels = {
+    function: "fn",
+    class: "cls",
+    interface: "int",
+    type: "type",
+    enum: "enum",
+    variable: "var"
+  };
+  return /* @__PURE__ */ jsx("span", {
+    ref,
+    className: cn(kindBadgeVariants({ kind, size, className })),
+    ...props,
+    children: label || defaultLabels[kind || "function"]
+  });
+});
+KindBadge.displayName = "KindBadge";
+var statusBadgeVariants = cva("inline-flex items-center justify-center gap-1 font-medium rounded-full", {
+  variants: {
+    status: {
+      success: "bg-success-light text-success",
+      warning: "bg-warning-light text-warning",
+      error: "bg-destructive-light text-destructive",
+      neutral: "bg-muted text-muted-foreground"
+    },
+    size: {
+      sm: "h-5 px-2 text-xs",
+      md: "h-6 px-2.5 text-sm"
+    }
+  },
+  defaultVariants: {
+    status: "neutral",
+    size: "md"
+  }
+});
+var StatusBadge = React.forwardRef(({ className, status, size, label, icon, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs("span", {
+    ref,
+    className: cn(statusBadgeVariants({ status, size, className })),
+    ...props,
+    children: [
+      icon,
+      label || children
+    ]
+  });
+});
+StatusBadge.displayName = "StatusBadge";
+export {
+  statusBadgeVariants,
+  kindBadgeVariants,
+  StatusBadge,
+  KindBadge
+};

package/dist/breadcrumb/index.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+interface BreadcrumbItem {
+	id: string;
+	label: string;
+	truncate?: boolean;
+	maxWidth?: number;
+	hasDropdown?: boolean;
+	onClick?: () => void;
+}
+interface BreadcrumbProps {
+	items: BreadcrumbItem[];
+	separator?: React.ReactNode;
+	className?: string;
+}
+declare const Breadcrumb: unknown;
+interface BreadcrumbDropdownProps {
+	label: string;
+	truncate?: boolean;
+	maxWidth?: number;
+	className?: string;
+	onClick?: () => void;
+}
+declare const BreadcrumbDropdown: unknown;
+export { BreadcrumbProps, BreadcrumbItem, BreadcrumbDropdownProps, BreadcrumbDropdown, Breadcrumb };

package/dist/breadcrumb/index.js

@@ -0,0 +1,77 @@
+"use client";
+// src/components/breadcrumb/breadcrumb.tsx
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/breadcrumb/breadcrumb.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+var Breadcrumb = React.forwardRef(({ items, separator = "/", className }, ref) => {
+  return /* @__PURE__ */ jsx("nav", {
+    ref,
+    className: cn("flex items-center gap-2 text-sm", className),
+    "aria-label": "Breadcrumb",
+    children: items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, {
+      children: [
+        index > 0 && /* @__PURE__ */ jsx("span", {
+          className: "text-muted-foreground/50 select-none",
+          children: separator
+        }),
+        /* @__PURE__ */ jsx(BreadcrumbItemButton, {
+          item
+        })
+      ]
+    }, item.id))
+  });
+});
+Breadcrumb.displayName = "Breadcrumb";
+function BreadcrumbItemButton({ item }) {
+  const { label, truncate, maxWidth = 200, hasDropdown, onClick } = item;
+  return /* @__PURE__ */ jsxs("button", {
+    type: "button",
+    onClick,
+    className: cn("flex items-center gap-1 font-medium text-foreground hover:text-foreground/80 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded", !onClick && "cursor-default"),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: cn(truncate && "truncate"),
+        style: truncate ? { maxWidth } : undefined,
+        title: truncate ? label : undefined,
+        children: label
+      }),
+      hasDropdown && /* @__PURE__ */ jsx(ChevronDown, {
+        className: "size-4 text-muted-foreground"
+      })
+    ]
+  });
+}
+var BreadcrumbDropdown = React.forwardRef(({ label, truncate, maxWidth = 200, className, onClick }, ref) => {
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    type: "button",
+    onClick,
+    className: cn("flex items-center gap-1 font-medium text-foreground hover:text-foreground/80 transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded px-1 -mx-1", className),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: cn(truncate && "truncate"),
+        style: truncate ? { maxWidth } : undefined,
+        title: truncate ? label : undefined,
+        children: label
+      }),
+      /* @__PURE__ */ jsx(ChevronDown, {
+        className: "size-4 text-muted-foreground"
+      })
+    ]
+  });
+});
+BreadcrumbDropdown.displayName = "BreadcrumbDropdown";
+export {
+  BreadcrumbDropdown,
+  Breadcrumb
+};

package/dist/button/index.d.ts

@@ -0,0 +1,18 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare function ArrowIcon({ className }: {
+	className?: string;
+});
+declare const buttonVariants: unknown;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+	isLoading?: boolean;
+	leftIcon?: React.ReactNode;
+	rightIcon?: React.ReactNode;
+	/** Show the trailing arrow */
+	withArrow?: boolean;
+	/** For nav links with muted count like "GitHub [34K]" */
+	count?: string;
+}
+declare const Button: unknown;
+export { buttonVariants, ButtonProps, Button, ArrowIcon };

package/dist/button/index.js

@@ -0,0 +1,109 @@
+// src/components/button/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/button/button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArrowIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    className,
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M6.5 12L17 12M13 16.5L17.5 12L13 7.5",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square"
+    })
+  });
+}
+var buttonVariants = cva("inline-flex items-center justify-center whitespace-nowrap font-mono font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+  variants: {
+    variant: {
+      primary: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)] border-none rounded hover:opacity-90 active:opacity-80 active:scale-[0.98]",
+      secondary: "bg-transparent text-[var(--btn-secondary-text)] border border-[var(--btn-secondary-border)] rounded hover:bg-[var(--btn-secondary-hover)] active:scale-[0.98]",
+      ghost: "bg-transparent text-[var(--btn-ghost-text)] border-none rounded hover:opacity-70 active:opacity-60 active:scale-[0.98]",
+      nav: "bg-transparent text-[var(--btn-nav-text)] border-none font-normal hover:underline underline-offset-4",
+      danger: "bg-red-50 text-red-600 border border-red-200 rounded hover:bg-red-600 hover:text-white hover:border-red-600 active:bg-red-700 active:scale-[0.98] dark:bg-red-950 dark:text-red-400 dark:border-red-800 dark:hover:bg-red-600 dark:hover:text-white"
+    },
+    size: {
+      sm: "h-8 px-3 py-1 text-sm gap-2 [&_svg]:size-4",
+      md: "h-10 px-5 py-1 text-base gap-3 [&_svg]:size-5",
+      lg: "h-12 px-6 py-2 text-base gap-3 [&_svg]:size-6",
+      nav: "h-auto p-0 text-base"
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "md"
+  }
+});
+var Button = React.forwardRef(({
+  className,
+  variant,
+  size,
+  asChild = false,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  withArrow,
+  count,
+  children,
+  disabled,
+  ...props
+}, ref) => {
+  const _Comp = asChild ? Slot : "button";
+  const effectiveSize = variant === "nav" ? "nav" : size;
+  const arrowPaddingClass = withArrow && effectiveSize !== "nav" ? effectiveSize === "sm" ? "pl-3 pr-2" : effectiveSize === "lg" ? "pl-6 pr-4" : "pl-5 pr-3" : "";
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, {
+      className: cn(buttonVariants({ variant, size: effectiveSize, className }), arrowPaddingClass),
+      ref,
+      ...props,
+      children
+    });
+  }
+  return /* @__PURE__ */ jsxs("button", {
+    className: cn(buttonVariants({ variant, size: effectiveSize, className }), arrowPaddingClass),
+    ref,
+    disabled: disabled || isLoading,
+    ...props,
+    children: [
+      isLoading ? /* @__PURE__ */ jsx(Loader2, {
+        className: "animate-spin"
+      }) : leftIcon ? leftIcon : null,
+      /* @__PURE__ */ jsxs("span", {
+        children: [
+          children,
+          count && /* @__PURE__ */ jsxs("span", {
+            className: "text-[var(--btn-count-text)]",
+            children: [
+              " [",
+              count,
+              "]"
+            ]
+          })
+        ]
+      }),
+      !isLoading && (withArrow ? /* @__PURE__ */ jsx(ArrowIcon, {}) : rightIcon)
+    ]
+  });
+});
+Button.displayName = "Button";
+export {
+  buttonVariants,
+  Button,
+  ArrowIcon
+};

package/dist/coverage-trends/index.d.ts

@@ -0,0 +1,46 @@
+interface CoverageDataPoint {
+	version: string;
+	date: string;
+	coverageScore: number;
+	documentedExports: number;
+	totalExports: number;
+	driftCount: number;
+}
+type TimeRange = "7d" | "30d" | "90d" | "all" | "versions";
+type TrendDirection = "up" | "down" | "stable";
+interface CoverageInsight {
+	type: "improvement" | "regression" | "prediction" | "milestone";
+	message: string;
+	severity?: "info" | "warning" | "success";
+}
+interface RegressionInfo {
+	fromVersion: string;
+	toVersion: string;
+	coverageDrop: number;
+	exportsLost: number;
+}
+interface InsightsPanelProps {
+	insights: CoverageInsight[];
+	className?: string;
+}
+declare function InsightsPanel({ insights, className }: InsightsPanelProps);
+interface RegressionAlertProps {
+	regression: RegressionInfo;
+	className?: string;
+}
+declare function RegressionAlert({ regression, className }: RegressionAlertProps);
+interface TimeRangeSelectorProps {
+	value: TimeRange;
+	onChange: (range: TimeRange) => void;
+	className?: string;
+}
+declare function TimeRangeSelector({ value, onChange, className }: TimeRangeSelectorProps);
+interface TrendIndicatorProps {
+	value: number;
+	direction: TrendDirection;
+	size?: "sm" | "md";
+	showIcon?: boolean;
+	className?: string;
+}
+declare function TrendIndicator({ value, direction, size, showIcon, className }: TrendIndicatorProps);
+export { TrendIndicator, TrendDirection, TimeRangeSelector, TimeRange, RegressionInfo, RegressionAlert, InsightsPanel, CoverageInsight, CoverageDataPoint };

package/dist/coverage-trends/index.js

@@ -0,0 +1,182 @@
+"use client";
+// src/components/coverage-trends/insights-panel.tsx
+import { Award, Target, TrendingDown, TrendingUp } from "lucide-react";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/coverage-trends/insights-panel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+var insightIcons = {
+  improvement: TrendingUp,
+  regression: TrendingDown,
+  prediction: Target,
+  milestone: Award
+};
+var insightColors = {
+  info: "text-muted-foreground",
+  warning: "text-warning",
+  success: "text-success"
+};
+function InsightsPanel({ insights, className }) {
+  if (insights.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs("div", {
+    className: cn("space-y-2", className),
+    children: [
+      /* @__PURE__ */ jsx("h4", {
+        className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+        children: "Insights"
+      }),
+      /* @__PURE__ */ jsx("div", {
+        className: "space-y-1.5",
+        children: insights.map((insight) => {
+          const Icon = insightIcons[insight.type];
+          const colorClass = insightColors[insight.severity || "info"];
+          return /* @__PURE__ */ jsxs("div", {
+            className: cn("flex items-start gap-2 text-sm", colorClass),
+            children: [
+              /* @__PURE__ */ jsx(Icon, {
+                className: "size-4 mt-0.5 shrink-0"
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "text-foreground",
+                children: insight.message
+              })
+            ]
+          }, `${insight.type}-${insight.message}`);
+        })
+      })
+    ]
+  });
+}
+// src/components/coverage-trends/regression-alert.tsx
+import { AlertTriangle } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+
+function RegressionAlert({ regression, className }) {
+  return /* @__PURE__ */ jsxs2("div", {
+    className: cn("flex items-start gap-3 p-3 rounded-lg", "bg-warning-light border border-warning/20", className),
+    children: [
+      /* @__PURE__ */ jsx2(AlertTriangle, {
+        className: "size-4 text-warning mt-0.5 shrink-0"
+      }),
+      /* @__PURE__ */ jsxs2("div", {
+        className: "flex-1 min-w-0",
+        children: [
+          /* @__PURE__ */ jsxs2("p", {
+            className: "text-sm font-medium text-foreground",
+            children: [
+              "Coverage dropped ",
+              regression.coverageDrop,
+              "%"
+            ]
+          }),
+          /* @__PURE__ */ jsxs2("p", {
+            className: "text-xs text-muted-foreground mt-0.5",
+            children: [
+              regression.exportsLost,
+              " exports lost documentation between",
+              " ",
+              /* @__PURE__ */ jsx2("span", {
+                className: "font-mono",
+                children: regression.fromVersion
+              }),
+              " and",
+              " ",
+              /* @__PURE__ */ jsx2("span", {
+                className: "font-mono",
+                children: regression.toVersion
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
+// src/components/coverage-trends/time-range-selector.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+
+var ranges = [
+  { value: "7d", label: "7d" },
+  { value: "30d", label: "30d" },
+  { value: "90d", label: "90d" },
+  { value: "all", label: "All" },
+  { value: "versions", label: "Versions" }
+];
+function TimeRangeSelector({ value, onChange, className }) {
+  return /* @__PURE__ */ jsx3("div", {
+    className: cn("inline-flex items-stretch border border-border rounded-md bg-background", className),
+    children: ranges.map((range, index) => {
+      const isActive = range.value === value;
+      const isLast = index === ranges.length - 1;
+      return /* @__PURE__ */ jsx3("button", {
+        type: "button",
+        onClick: () => onChange(range.value),
+        className: cn("px-3 py-1.5 text-xs font-mono transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !isLast && "border-r border-border", isActive ? "bg-accent text-foreground font-medium" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"),
+        children: range.label
+      }, range.value);
+    })
+  });
+}
+// src/components/coverage-trends/trend-indicator.tsx
+import { Minus, TrendingDown as TrendingDown2, TrendingUp as TrendingUp2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+
+function TrendIndicator({
+  value,
+  direction,
+  size = "md",
+  showIcon = true,
+  className
+}) {
+  const isPositive = direction === "up";
+  const isNegative = direction === "down";
+  const isStable = direction === "stable";
+  const sizeClasses = {
+    sm: "text-xs px-1.5 py-0.5 gap-0.5",
+    md: "text-sm px-2 py-1 gap-1"
+  };
+  const iconSizes = {
+    sm: "size-3",
+    md: "size-3.5"
+  };
+  return /* @__PURE__ */ jsxs3("span", {
+    className: cn("inline-flex items-center font-mono font-medium rounded-full", sizeClasses[size], isPositive && "bg-success-light text-success", isNegative && "bg-destructive-light text-destructive", isStable && "bg-muted text-muted-foreground", className),
+    children: [
+      showIcon && /* @__PURE__ */ jsxs3(Fragment, {
+        children: [
+          isPositive && /* @__PURE__ */ jsx4(TrendingUp2, {
+            className: iconSizes[size]
+          }),
+          isNegative && /* @__PURE__ */ jsx4(TrendingDown2, {
+            className: iconSizes[size]
+          }),
+          isStable && /* @__PURE__ */ jsx4(Minus, {
+            className: iconSizes[size]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs3("span", {
+        className: "tabular-nums",
+        children: [
+          isPositive ? "+" : isNegative ? "" : "",
+          value,
+          "%"
+        ]
+      })
+    ]
+  });
+}
+export {
+  TrendIndicator,
+  TimeRangeSelector,
+  RegressionAlert,
+  InsightsPanel
+};

package/dist/{components/docskit → docskit}/index.js

@@ -1,9 +1,21 @@
 "use client";
-import {
-  __commonJS,
-  __toESM,
-  cn
-} from "../../lib/utils.js";
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __toESM = (mod, isNodeMode, target) => {
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: () => mod[key],
+        enumerable: true
+      });
+  return to;
+};
+var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 
 // ../../node_modules/seti-icons/lib/definitions.json
 var require_definitions = __commonJS((exports, module) => {
@@ -157,6 +169,13 @@ var callout = {
 // src/components/docskit/code.tsx
 import { highlight, Pre } from "codehike/code";
 
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
 // src/components/docskit/code.config.ts
 var theme = "github-from-css";
 function flagsToOptions(flags = "") {

package/dist/file-change-row/index.d.ts

@@ -0,0 +1,34 @@
+import { AnnotationHandler, RawCode } from "codehike/code";
+import * as React from "react";
+declare function StackedChevrons({ isOpen, className }: {
+	isOpen?: boolean;
+	className?: string;
+});
+/** Get language from filename extension */
+declare function getLangFromFilename(filename: string): string;
+interface FileChangeRowProps {
+	path: string;
+	filename: string;
+	additions?: number;
+	deletions?: number;
+	/** Code block to highlight and render */
+	codeblock?: RawCode;
+	/** Extra annotation handlers for code */
+	handlers?: AnnotationHandler[];
+	/** Show copy button */
+	showCopy?: boolean;
+	/** Fallback children if no codeblock provided */
+	children?: React.ReactNode;
+	defaultOpen?: boolean;
+	className?: string;
+}
+declare function FileChangeRow({ path, filename, additions, deletions, codeblock, handlers: extraHandlers, showCopy, children, defaultOpen, className }: FileChangeRowProps);
+interface FileChangeListProps {
+	title?: string;
+	count?: number;
+	children: React.ReactNode;
+	defaultOpen?: boolean;
+	className?: string;
+}
+declare function FileChangeList({ title, count, children, defaultOpen, className }: FileChangeListProps);
+export { getLangFromFilename, StackedChevrons, FileChangeRowProps, FileChangeRow, FileChangeListProps, FileChangeList };