@doccov/ui 0.2.2 → 0.2.3

package/dist/file-chip/index.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface FileChipProps extends React.HTMLAttributes<HTMLSpanElement> {
+	filename: string;
+	clickable?: boolean;
+}
+declare const FileChip: unknown;
+export { FileChipProps, FileChip };

package/dist/file-chip/index.js

@@ -0,0 +1,30 @@
+// src/components/file-chip/file-chip.tsx
+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/file-chip/file-chip.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var FileChip = React.forwardRef(({ filename, clickable = true, className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs("span", {
+    ref,
+    className: cn("inline-flex items-center gap-1 px-1.5 py-0.5 rounded font-mono text-sm", "bg-secondary text-secondary-foreground", clickable && "cursor-pointer hover:bg-accent transition-colors", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "text-muted-foreground",
+        children: "@"
+      }),
+      filename
+    ]
+  });
+});
+FileChip.displayName = "FileChip";
+export {
+  FileChip
+};

package/dist/input/index.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from "class-variance-authority";
+import * as React from "react";
+declare const inputVariants: unknown;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+	label?: string;
+	helperText?: string;
+	error?: string;
+	leftIcon?: React.ReactNode;
+}
+declare const Input: unknown;
+interface InputWithButtonProps extends Omit<InputProps, "rightIcon" | "onSubmit"> {
+	buttonText?: string;
+	buttonLoading?: boolean;
+	onButtonClick?: () => void;
+	onSubmit?: (value: string) => void;
+}
+declare const InputWithButton: unknown;
+interface SearchInputProps extends Omit<InputProps, "leftIcon"> {
+	onClear?: () => void;
+	showClear?: boolean;
+}
+declare const SearchInput: unknown;
+export { inputVariants, SearchInputProps, SearchInput, InputWithButtonProps, InputWithButton, InputProps, Input };

package/dist/input/index.js

@@ -0,0 +1,242 @@
+"use client";
+// src/components/input/input.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/input/input.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+
+var inputVariants = cva([
+  "w-full font-mono text-[var(--input-text)]",
+  "placeholder:text-[var(--input-placeholder)]",
+  "border border-[var(--input-border)]",
+  "bg-[var(--input-bg)]",
+  "rounded-md outline-none transition-all duration-150",
+  "disabled:cursor-not-allowed disabled:opacity-50"
+], {
+  variants: {
+    inputSize: {
+      sm: "h-10 px-3 text-sm",
+      md: "h-12 px-4 text-base",
+      lg: "h-[66px] px-5 text-base"
+    },
+    variant: {
+      default: [
+        "hover:border-[var(--input-border-hover)]",
+        "focus:border-[var(--input-border-focus)]",
+        "focus:bg-[var(--input-bg-focus)]",
+        "focus:shadow-[var(--input-focus-shadow)]"
+      ],
+      error: [
+        "border-destructive/60",
+        "focus:border-destructive",
+        "focus:shadow-[0_0_0_3px_rgb(254,202,202)]"
+      ]
+    }
+  },
+  defaultVariants: {
+    inputSize: "lg",
+    variant: "default"
+  }
+});
+var Input = React.forwardRef(({ className, inputSize, variant, label, helperText, error, leftIcon, id, ...props }, ref) => {
+  const generatedId = React.useId();
+  const inputId = id || `input-${generatedId}`;
+  const hasError = !!error;
+  return /* @__PURE__ */ jsxs("div", {
+    className: "w-full space-y-2",
+    children: [
+      label && /* @__PURE__ */ jsx("label", {
+        htmlFor: inputId,
+        className: "text-sm font-medium text-[var(--input-text)]",
+        children: label
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "relative",
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("div", {
+            className: "absolute left-4 top-1/2 -translate-y-1/2 text-[var(--input-placeholder)] [&_svg]:size-5",
+            children: leftIcon
+          }),
+          /* @__PURE__ */ jsx("input", {
+            id: inputId,
+            ref,
+            className: cn(inputVariants({ inputSize, variant: hasError ? "error" : variant }), leftIcon && "pl-12", className),
+            ...props
+          })
+        ]
+      }),
+      (helperText || error) && /* @__PURE__ */ jsx("p", {
+        className: cn("text-sm font-mono", hasError ? "text-destructive" : "text-[var(--input-placeholder)]"),
+        children: error || helperText
+      })
+    ]
+  });
+});
+Input.displayName = "Input";
+var InputWithButton = React.forwardRef(({
+  className,
+  inputSize = "lg",
+  buttonText = "Subscribe",
+  buttonLoading,
+  onButtonClick,
+  onSubmit,
+  ...props
+}, ref) => {
+  const generatedId = React.useId();
+  const inputId = props.id || `input-${generatedId}`;
+  const inputRef = React.useRef(null);
+  const handleClick = () => {
+    if (onSubmit && inputRef.current) {
+      onSubmit(inputRef.current.value);
+    }
+    onButtonClick?.();
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: "w-full space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx("label", {
+        htmlFor: inputId,
+        className: "text-sm font-medium text-[var(--input-text)]",
+        children: props.label
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "relative",
+        children: [
+          props.leftIcon && /* @__PURE__ */ jsx("div", {
+            className: "absolute left-4 top-1/2 -translate-y-1/2 text-[var(--input-placeholder)] [&_svg]:size-5",
+            children: props.leftIcon
+          }),
+          /* @__PURE__ */ jsx("input", {
+            id: inputId,
+            ref: (node) => {
+              inputRef.current = node;
+              if (typeof ref === "function") {
+                ref(node);
+              } else if (ref) {
+                ref.current = node;
+              }
+            },
+            className: cn(inputVariants({ inputSize, variant: props.error ? "error" : "default" }), props.leftIcon && "pl-12", "pr-36", className),
+            ...props
+          }),
+          /* @__PURE__ */ jsx("button", {
+            type: "button",
+            onClick: handleClick,
+            disabled: props.disabled || buttonLoading,
+            className: cn("absolute top-1/2 right-3 -translate-y-1/2", "h-10 px-5 rounded", "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)]", "font-mono text-base font-medium", "hover:opacity-90", "transition-colors duration-150", "disabled:opacity-50 disabled:cursor-not-allowed"),
+            children: buttonLoading ? /* @__PURE__ */ jsxs("span", {
+              className: "inline-flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxs("svg", {
+                  className: "animate-spin size-4",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx("circle", {
+                      cx: "12",
+                      cy: "12",
+                      r: "10",
+                      stroke: "currentColor",
+                      strokeWidth: "3",
+                      className: "opacity-25"
+                    }),
+                    /* @__PURE__ */ jsx("path", {
+                      fill: "currentColor",
+                      d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                      className: "opacity-75"
+                    })
+                  ]
+                }),
+                "..."
+              ]
+            }) : buttonText
+          })
+        ]
+      }),
+      (props.helperText || props.error) && /* @__PURE__ */ jsx("p", {
+        className: cn("text-sm font-mono", props.error ? "text-destructive" : "text-[var(--input-placeholder)]"),
+        children: props.error || props.helperText
+      })
+    ]
+  });
+});
+InputWithButton.displayName = "InputWithButton";
+var SearchInput = React.forwardRef(({ className, inputSize = "md", showClear, onClear, ...props }, ref) => {
+  const inputId = React.useId();
+  return /* @__PURE__ */ jsxs("div", {
+    className: "w-full space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx("label", {
+        htmlFor: inputId,
+        className: "text-sm font-medium text-[var(--input-text)]",
+        children: props.label
+      }),
+      /* @__PURE__ */ jsxs("div", {
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            className: "absolute left-4 top-1/2 -translate-y-1/2 text-[var(--input-placeholder)]",
+            children: /* @__PURE__ */ jsx("svg", {
+              className: "size-5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              })
+            })
+          }),
+          /* @__PURE__ */ jsx("input", {
+            id: inputId,
+            ref,
+            className: cn(inputVariants({ inputSize, variant: props.error ? "error" : "default" }), "pl-12", showClear && "pr-10", className),
+            ...props
+          }),
+          showClear && /* @__PURE__ */ jsx("button", {
+            type: "button",
+            onClick: onClear,
+            "aria-label": "Clear search",
+            className: "absolute right-3 top-1/2 -translate-y-1/2 text-[var(--input-placeholder)] hover:text-[var(--input-text)] transition-colors",
+            children: /* @__PURE__ */ jsx("svg", {
+              className: "size-5",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M6 18L18 6M6 6l12 12"
+              })
+            })
+          })
+        ]
+      }),
+      (props.helperText || props.error) && /* @__PURE__ */ jsx("p", {
+        className: cn("text-sm font-mono", props.error ? "text-destructive" : "text-[var(--input-placeholder)]"),
+        children: props.error || props.helperText
+      })
+    ]
+  });
+});
+SearchInput.displayName = "SearchInput";
+export {
+  inputVariants,
+  SearchInput,
+  InputWithButton,
+  Input
+};

package/dist/tabs/index.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+interface TabCellBase {
+	id: string;
+	label: string;
+	isActive?: boolean;
+}
+interface TextTab extends TabCellBase {
+	type: "text";
+}
+interface CountTab extends TabCellBase {
+	type: "count";
+	count: number;
+}
+interface FileTab extends TabCellBase {
+	type: "file";
+	fileType?: "ts" | "tsx" | "js" | "jsx" | "html" | "css" | "json" | "md";
+	closeable?: boolean;
+}
+interface ProgressTab extends TabCellBase {
+	type: "progress";
+	percent: number;
+}
+interface ActionTab {
+	id: string;
+	type: "action";
+	icon: React.ReactNode;
+	label?: string;
+}
+type TabCell = TextTab | CountTab | FileTab | ProgressTab | ActionTab;
+interface SegmentedTabsProps {
+	tabs: TabCell[];
+	activeTab?: string;
+	onTabChange?: (id: string) => void;
+	onTabClose?: (id: string) => void;
+	onAction?: (id: string) => void;
+	className?: string;
+}
+declare const SegmentedTabs: unknown;
+interface TabItem {
+	id: string;
+	label: string;
+	icon?: React.ReactNode;
+	count?: number;
+	closeable?: boolean;
+}
+interface TabsProps {
+	tabs: TabItem[];
+	activeTab: string;
+	onTabChange: (id: string) => void;
+	onTabClose?: (id: string) => void;
+	onAddTab?: () => void;
+	className?: string;
+	size?: "default" | "lg";
+}
+declare const Tabs: unknown;
+export { TabsProps, Tabs, TabItem, TabCell, SegmentedTabsProps, SegmentedTabs };

package/dist/tabs/index.js

@@ -0,0 +1,224 @@
+"use client";
+// src/components/tabs/tabs.tsx
+import { Plus, X } 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/tabs/tabs.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+
+var fileTypeColors = {
+  ts: "bg-blue-500",
+  tsx: "bg-blue-500",
+  js: "bg-yellow-500",
+  jsx: "bg-yellow-500",
+  html: "bg-orange-500",
+  css: "bg-purple-500",
+  json: "bg-green-600",
+  md: "bg-stone-500"
+};
+var fileTypeLabels = {
+  ts: "TS",
+  tsx: "TS",
+  js: "JS",
+  jsx: "JS",
+  html: "HTML",
+  css: "CSS",
+  json: "JSON",
+  md: "MD"
+};
+function MiniProgress({ percent, className }) {
+  const radius = 5;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = circumference - percent / 100 * circumference;
+  return /* @__PURE__ */ jsxs("svg", {
+    className: cn("size-4", className),
+    viewBox: "0 0 14 14",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", {
+        cx: "7",
+        cy: "7",
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        className: "opacity-20"
+      }),
+      /* @__PURE__ */ jsx("circle", {
+        cx: "7",
+        cy: "7",
+        r: radius,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeDasharray: circumference,
+        strokeDashoffset,
+        strokeLinecap: "round",
+        transform: "rotate(-90 7 7)"
+      })
+    ]
+  });
+}
+var SegmentedTabs = React.forwardRef(({ tabs, activeTab, onTabChange, onTabClose, onAction, className }, ref) => {
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    className: cn("inline-flex items-stretch", "border border-border rounded-md", "bg-background shadow-sm", className),
+    children: tabs.map((tab, index) => {
+      const isLast = index === tabs.length - 1;
+      const isActive = "isActive" in tab ? tab.isActive : tab.id === activeTab;
+      const isAction = tab.type === "action";
+      const isFileWithClose = tab.type === "file" && tab.closeable && onTabClose;
+      if (isFileWithClose && tab.type === "file") {
+        return /* @__PURE__ */ jsxs("div", {
+          className: cn("relative flex items-center", !isLast && "border-r border-border"),
+          children: [
+            /* @__PURE__ */ jsxs("button", {
+              type: "button",
+              onClick: () => onTabChange?.(tab.id),
+              className: cn("flex items-center gap-1.5 pl-3 pr-1 py-2 text-[13px] transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", isActive ? "bg-accent text-foreground font-medium" : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"),
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  className: cn("flex items-center justify-center size-4 rounded-[3px] text-[8px] font-bold text-white", fileTypeColors[tab.fileType || "ts"] || "bg-stone-500"),
+                  children: fileTypeLabels[tab.fileType || "ts"]
+                }),
+                /* @__PURE__ */ jsx("span", {
+                  className: "font-mono text-[13px]",
+                  children: tab.label
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("button", {
+              type: "button",
+              onClick: () => onTabClose(tab.id),
+              className: cn("p-0.5 mr-2 rounded-sm transition-colors", "text-muted-foreground/50 hover:text-foreground hover:bg-accent", isActive ? "bg-accent" : ""),
+              "aria-label": `Close ${tab.label}`,
+              children: /* @__PURE__ */ jsx(X, {
+                className: "size-3"
+              })
+            })
+          ]
+        }, tab.id);
+      }
+      return /* @__PURE__ */ jsxs("button", {
+        type: "button",
+        onClick: () => {
+          if (isAction) {
+            onAction?.(tab.id);
+          } else {
+            onTabChange?.(tab.id);
+          }
+        },
+        className: cn("relative flex items-center gap-1.5 px-3 py-2 text-[13px] 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", isAction && "px-2.5"),
+        children: [
+          tab.type === "text" && /* @__PURE__ */ jsx("span", {
+            children: tab.label
+          }),
+          tab.type === "count" && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                children: tab.label
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "text-xs text-muted-foreground tabular-nums",
+                children: [
+                  "(",
+                  tab.count,
+                  ")"
+                ]
+              })
+            ]
+          }),
+          tab.type === "file" && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx("span", {
+                className: cn("flex items-center justify-center size-4 rounded-[3px] text-[8px] font-bold text-white", fileTypeColors[tab.fileType || "ts"] || "bg-stone-500"),
+                children: fileTypeLabels[tab.fileType || "ts"]
+              }),
+              /* @__PURE__ */ jsx("span", {
+                className: "font-mono text-[13px]",
+                children: tab.label
+              })
+            ]
+          }),
+          tab.type === "progress" && /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx(MiniProgress, {
+                percent: tab.percent
+              }),
+              /* @__PURE__ */ jsxs("span", {
+                className: "tabular-nums",
+                children: [
+                  tab.percent,
+                  "%"
+                ]
+              })
+            ]
+          }),
+          tab.type === "action" && /* @__PURE__ */ jsx(Fragment, {
+            children: tab.icon
+          })
+        ]
+      }, tab.id);
+    })
+  });
+});
+SegmentedTabs.displayName = "SegmentedTabs";
+var Tabs = React.forwardRef(({ tabs, activeTab, onTabChange, onTabClose, onAddTab, className, size = "default" }, ref) => {
+  const convertedTabs = tabs.map((tab) => {
+    if (tab.count !== undefined) {
+      return {
+        id: tab.id,
+        type: "count",
+        label: tab.label,
+        count: tab.count
+      };
+    }
+    if (tab.closeable) {
+      return {
+        id: tab.id,
+        type: "file",
+        label: tab.label,
+        closeable: true
+      };
+    }
+    return {
+      id: tab.id,
+      type: "text",
+      label: tab.label
+    };
+  });
+  if (onAddTab) {
+    convertedTabs.push({
+      id: "__add__",
+      type: "action",
+      icon: /* @__PURE__ */ jsx(Plus, {
+        className: "size-4"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(SegmentedTabs, {
+    ref,
+    tabs: convertedTabs,
+    activeTab,
+    onTabChange,
+    onTabClose,
+    onAction: (id) => {
+      if (id === "__add__" && onAddTab) {
+        onAddTab();
+      }
+    },
+    className: cn(size === "lg" && "[&_button]:px-4 [&_button]:py-3", className)
+  });
+});
+Tabs.displayName = "Tabs";
+export {
+  Tabs,
+  SegmentedTabs
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doccov/ui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -18,6 +18,38 @@
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.ts",
+      "import": "./dist/button/index.js"
+    },
+    "./badge": {
+      "types": "./dist/badge/index.d.ts",
+      "import": "./dist/badge/index.js"
+    },
+    "./breadcrumb": {
+      "types": "./dist/breadcrumb/index.d.ts",
+      "import": "./dist/breadcrumb/index.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "import": "./dist/input/index.js"
+    },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "import": "./dist/tabs/index.js"
+    },
+    "./file-chip": {
+      "types": "./dist/file-chip/index.d.ts",
+      "import": "./dist/file-chip/index.js"
+    },
+    "./file-change-row": {
+      "types": "./dist/file-change-row/index.d.ts",
+      "import": "./dist/file-change-row/index.js"
+    },
+    "./coverage-trends": {
+      "types": "./dist/coverage-trends/index.d.ts",
+      "import": "./dist/coverage-trends/index.js"
     }
   },
   "scripts": {