@chatsdk-dev/elements 0.0.1

package/dist/components/ai-elements/chain-of-thought.js

@@ -0,0 +1,159 @@
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { Badge } from '@chatsdk-dev/ui/components/badge';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { BrainIcon, ChevronDownIcon, DotIcon } from 'lucide-react';
+import { createContext, memo, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChainOfThoughtContext = createContext(
+  null
+);
+var useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+var ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+      prop: open
+    });
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+    return /* @__PURE__ */ jsx(ChainOfThoughtContext.Provider, { value: chainOfThoughtContext, children: /* @__PURE__ */ jsx("div", { className: cn("not-prose w-full space-y-4", className), ...props, children }) });
+  }
+);
+var ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { onOpenChange: setIsOpen, open: isOpen, children: /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        className: cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(BrainIcon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: children ?? "Chain of Thought" }),
+          /* @__PURE__ */ jsx(
+            ChevronDownIcon,
+            {
+              className: cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+var stepStatusStyles = {
+  active: "text-foreground",
+  complete: "text-muted-foreground",
+  pending: "text-muted-foreground/50"
+};
+var ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex gap-2 text-sm",
+        stepStatusStyles[status],
+        "fade-in-0 slide-in-from-top-2 animate-in",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5", children: [
+          /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute top-7 bottom-0 left-1/2 -mx-px w-px bg-border" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("div", { children: label }),
+          description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground text-xs", children: description }),
+          children
+        ] })
+      ]
+    }
+  )
+);
+var ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2", className),
+      ...props
+    }
+  )
+);
+var ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+    Badge,
+    {
+      className: cn("gap-1 px-2 py-0.5 font-normal text-xs", className),
+      variant: "secondary",
+      ...props,
+      children
+    }
+  )
+);
+var ChainOfThoughtContent = memo(
+  ({ className, children, ...props }) => {
+    const { isOpen } = useChainOfThought();
+    return /* @__PURE__ */ jsx(Collapsible, { open: isOpen, children: /* @__PURE__ */ jsx(
+      CollapsibleContent,
+      {
+        className: cn(
+          "mt-2 space-y-3",
+          "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+var ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }) => /* @__PURE__ */ jsxs("div", { className: cn("mt-2 space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("div", { className: "relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children }),
+    caption && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: caption })
+  ] })
+);
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";
+
+export { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtImage, ChainOfThoughtSearchResult, ChainOfThoughtSearchResults, ChainOfThoughtStep };

package/dist/components/ai-elements/checkpoint.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes, ComponentProps } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { LucideProps } from 'lucide-react';
+
+type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+declare const Checkpoint: ({ className, children, ...props }: CheckpointProps) => react_jsx_runtime.JSX.Element;
+type CheckpointIconProps = LucideProps;
+declare const CheckpointIcon: ({ className, children, ...props }: CheckpointIconProps) => string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<react.ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<react.ReactNode> | null | undefined>;
+type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+declare const CheckpointTrigger: ({ children, variant, size, tooltip, ...props }: CheckpointTriggerProps) => react_jsx_runtime.JSX.Element;
+
+export { Checkpoint, CheckpointIcon, type CheckpointIconProps, type CheckpointProps, CheckpointTrigger, type CheckpointTriggerProps };

package/dist/components/ai-elements/checkpoint.js

@@ -0,0 +1,47 @@
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Separator } from '@chatsdk-dev/ui/components/separator';
+import { Tooltip, TooltipTrigger, TooltipContent } from '@chatsdk-dev/ui/components/tooltip';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { BookmarkIcon } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Checkpoint = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-0.5 overflow-hidden text-muted-foreground",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(Separator, {})
+    ]
+  }
+);
+var CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}) => children ?? /* @__PURE__ */ jsx(BookmarkIcon, { className: cn("size-4 shrink-0", className), ...props });
+var CheckpointTrigger = ({
+  children,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}) => tooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+  /* @__PURE__ */ jsx(
+    TooltipTrigger,
+    {
+      render: () => /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children })
+    }
+  ),
+  /* @__PURE__ */ jsx(TooltipContent, { align: "start", side: "bottom", children: tooltip })
+] }) : /* @__PURE__ */ jsx(Button, { size, type: "button", variant, ...props, children });
+
+export { Checkpoint, CheckpointIcon, CheckpointTrigger };

package/dist/components/ai-elements/code-block.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@chatsdk-dev/ui/components/select';
+import { HTMLAttributes, ComponentProps } from 'react';
+import { BundledLanguage, ThemedToken } from 'shiki';
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+};
+interface TokenizedCode {
+    tokens: ThemedToken[][];
+    fg: string;
+    bg: string;
+}
+declare const highlightCode: (code: string, language: BundledLanguage, callback?: (result: TokenizedCode) => void) => TokenizedCode | null;
+declare const CodeBlockContainer: ({ className, language, style, ...props }: HTMLAttributes<HTMLDivElement> & {
+    language: string;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockHeader: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockTitle: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockFilename: ({ children, className, ...props }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockActions: ({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+declare const CodeBlockContent: ({ code, language, showLineNumbers, }: {
+    code: string;
+    language: BundledLanguage;
+    showLineNumbers?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+declare const CodeBlock: ({ code, language, showLineNumbers, className, children, ...props }: CodeBlockProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CodeBlockCopyButton: ({ onCopy, onError, timeout, children, className, ...props }: CodeBlockCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorProps = ComponentProps<typeof Select>;
+declare const CodeBlockLanguageSelector: (props: CodeBlockLanguageSelectorProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorTriggerProps = ComponentProps<typeof SelectTrigger>;
+declare const CodeBlockLanguageSelectorTrigger: ({ className, ...props }: CodeBlockLanguageSelectorTriggerProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorValueProps = ComponentProps<typeof SelectValue>;
+declare const CodeBlockLanguageSelectorValue: (props: CodeBlockLanguageSelectorValueProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorContentProps = ComponentProps<typeof SelectContent>;
+declare const CodeBlockLanguageSelectorContent: ({ align, ...props }: CodeBlockLanguageSelectorContentProps) => react_jsx_runtime.JSX.Element;
+type CodeBlockLanguageSelectorItemProps = ComponentProps<typeof SelectItem>;
+declare const CodeBlockLanguageSelectorItem: (props: CodeBlockLanguageSelectorItemProps) => react_jsx_runtime.JSX.Element;
+
+export { CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, type CodeBlockCopyButtonProps, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, type CodeBlockLanguageSelectorContentProps, CodeBlockLanguageSelectorItem, type CodeBlockLanguageSelectorItemProps, type CodeBlockLanguageSelectorProps, CodeBlockLanguageSelectorTrigger, type CodeBlockLanguageSelectorTriggerProps, CodeBlockLanguageSelectorValue, type CodeBlockLanguageSelectorValueProps, CodeBlockTitle, highlightCode };

package/dist/components/ai-elements/code-block.js

@@ -0,0 +1 @@
+export { CodeBlock, CodeBlockActions, CodeBlockContainer, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockHeader, CodeBlockLanguageSelector, CodeBlockLanguageSelectorContent, CodeBlockLanguageSelectorItem, CodeBlockLanguageSelectorTrigger, CodeBlockLanguageSelectorValue, CodeBlockTitle, highlightCode } from '../../chunk-CFM57HOS.js';

package/dist/components/ai-elements/commit.d.ts

@@ -0,0 +1,68 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Avatar } from '@chatsdk-dev/ui/components/avatar';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@chatsdk-dev/ui/components/collapsible';
+import { FileIcon } from 'lucide-react';
+import { ComponentProps, HTMLAttributes } from 'react';
+
+type CommitProps = ComponentProps<typeof Collapsible>;
+declare const Commit: ({ className, children, ...props }: CommitProps) => react_jsx_runtime.JSX.Element;
+type CommitHeaderProps = ComponentProps<typeof CollapsibleTrigger>;
+declare const CommitHeader: ({ className, children, ...props }: CommitHeaderProps) => react_jsx_runtime.JSX.Element;
+type CommitHashProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitHash: ({ className, children, ...props }: CommitHashProps) => react_jsx_runtime.JSX.Element;
+type CommitMessageProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitMessage: ({ className, children, ...props }: CommitMessageProps) => react_jsx_runtime.JSX.Element;
+type CommitMetadataProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitMetadata: ({ className, children, ...props }: CommitMetadataProps) => react_jsx_runtime.JSX.Element;
+type CommitSeparatorProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitSeparator: ({ className, children, ...props }: CommitSeparatorProps) => react_jsx_runtime.JSX.Element;
+type CommitInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitInfo: ({ className, children, ...props }: CommitInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitAuthor: ({ className, children, ...props }: CommitAuthorProps) => react_jsx_runtime.JSX.Element;
+type CommitAuthorAvatarProps = ComponentProps<typeof Avatar> & {
+    initials: string;
+};
+declare const CommitAuthorAvatar: ({ initials, className, ...props }: CommitAuthorAvatarProps) => react_jsx_runtime.JSX.Element;
+type CommitTimestampProps = HTMLAttributes<HTMLTimeElement> & {
+    date: Date;
+};
+declare const CommitTimestamp: ({ date, className, children, ...props }: CommitTimestampProps) => react_jsx_runtime.JSX.Element;
+type CommitActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitActions: ({ className, children, ...props }: CommitActionsProps) => react_jsx_runtime.JSX.Element;
+type CommitCopyButtonProps = ComponentProps<typeof Button> & {
+    hash: string;
+    onCopy?: () => void;
+    onError?: (error: Error) => void;
+    timeout?: number;
+};
+declare const CommitCopyButton: ({ hash, onCopy, onError, timeout, children, className, ...props }: CommitCopyButtonProps) => react_jsx_runtime.JSX.Element;
+type CommitContentProps = ComponentProps<typeof CollapsibleContent>;
+declare const CommitContent: ({ className, children, ...props }: CommitContentProps) => react_jsx_runtime.JSX.Element;
+type CommitFilesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFiles: ({ className, children, ...props }: CommitFilesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFile: ({ className, children, ...props }: CommitFileProps) => react_jsx_runtime.JSX.Element;
+type CommitFileInfoProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileInfo: ({ className, children, ...props }: CommitFileInfoProps) => react_jsx_runtime.JSX.Element;
+type CommitFileStatusProps = HTMLAttributes<HTMLSpanElement> & {
+    status: "added" | "modified" | "deleted" | "renamed";
+};
+declare const CommitFileStatus: ({ status, className, children, ...props }: CommitFileStatusProps) => react_jsx_runtime.JSX.Element;
+type CommitFileIconProps = ComponentProps<typeof FileIcon>;
+declare const CommitFileIcon: ({ className, ...props }: CommitFileIconProps) => react_jsx_runtime.JSX.Element;
+type CommitFilePathProps = HTMLAttributes<HTMLSpanElement>;
+declare const CommitFilePath: ({ className, children, ...props }: CommitFilePathProps) => react_jsx_runtime.JSX.Element;
+type CommitFileChangesProps = HTMLAttributes<HTMLDivElement>;
+declare const CommitFileChanges: ({ className, children, ...props }: CommitFileChangesProps) => react_jsx_runtime.JSX.Element;
+type CommitFileAdditionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileAdditions: ({ count, className, children, ...props }: CommitFileAdditionsProps) => react_jsx_runtime.JSX.Element | null;
+type CommitFileDeletionsProps = HTMLAttributes<HTMLSpanElement> & {
+    count: number;
+};
+declare const CommitFileDeletions: ({ count, className, children, ...props }: CommitFileDeletionsProps) => react_jsx_runtime.JSX.Element | null;
+
+export { Commit, CommitActions, type CommitActionsProps, CommitAuthor, CommitAuthorAvatar, type CommitAuthorAvatarProps, type CommitAuthorProps, CommitContent, type CommitContentProps, CommitCopyButton, type CommitCopyButtonProps, CommitFile, CommitFileAdditions, type CommitFileAdditionsProps, CommitFileChanges, type CommitFileChangesProps, CommitFileDeletions, type CommitFileDeletionsProps, CommitFileIcon, type CommitFileIconProps, CommitFileInfo, type CommitFileInfoProps, CommitFilePath, type CommitFilePathProps, type CommitFileProps, CommitFileStatus, type CommitFileStatusProps, CommitFiles, type CommitFilesProps, CommitHash, type CommitHashProps, CommitHeader, type CommitHeaderProps, CommitInfo, type CommitInfoProps, CommitMessage, type CommitMessageProps, CommitMetadata, type CommitMetadataProps, type CommitProps, CommitSeparator, type CommitSeparatorProps, CommitTimestamp, type CommitTimestampProps };

package/dist/components/ai-elements/commit.js

@@ -0,0 +1,314 @@
+import { Avatar, AvatarFallback } from '@chatsdk-dev/ui/components/avatar';
+import { Button } from '@chatsdk-dev/ui/components/button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@chatsdk-dev/ui/components/collapsible';
+import { cn } from '@chatsdk-dev/ui/lib/utils';
+import { GitCommitIcon, CheckIcon, CopyIcon, FileIcon, PlusIcon, MinusIcon } from 'lucide-react';
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var Commit = ({ className, children, ...props }) => /* @__PURE__ */ jsx(
+  Collapsible,
+  {
+    className: cn("rounded-lg border bg-background", className),
+    ...props,
+    children
+  }
+);
+var CommitHeader = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  CollapsibleTrigger,
+  {
+    render: () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "group flex cursor-pointer items-center justify-between gap-4 p-3 text-left transition-colors hover:opacity-80",
+          className
+        ),
+        children
+      }
+    )
+  }
+);
+var CommitHash = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsxs("span", { className: cn("font-mono text-xs", className), ...props, children: [
+  /* @__PURE__ */ jsx(GitCommitIcon, { className: "mr-1 inline-block size-3" }),
+  children
+] });
+var CommitMessage = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("font-medium text-sm", className), ...props, children });
+var CommitMetadata = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center gap-2 text-muted-foreground text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CommitSeparator = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className, ...props, children: children ?? "\u2022" });
+var CommitInfo = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-1 flex-col", className), ...props, children });
+var CommitAuthor = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", className), ...props, children });
+var CommitAuthorAvatar = ({
+  initials,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(Avatar, { className: cn("size-8", className), ...props, children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: initials }) });
+var relativeTimeFormat = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto"
+});
+var formatRelativeDate = (date) => {
+  const days = Math.round(
+    (date.getTime() - Date.now()) / (1e3 * 60 * 60 * 24)
+  );
+  return relativeTimeFormat.format(days, "day");
+};
+var CommitTimestamp = ({
+  date,
+  className,
+  children,
+  ...props
+}) => {
+  const [formatted, setFormatted] = useState("");
+  const updateFormatted = useCallback(() => {
+    setFormatted(formatRelativeDate(date));
+  }, [date]);
+  useEffect(() => {
+    updateFormatted();
+  }, [updateFormatted]);
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      className: cn("text-xs", className),
+      dateTime: date.toISOString(),
+      ...props,
+      children: children ?? formatted
+    }
+  );
+};
+var handleActionsClick = (e) => e.stopPropagation();
+var handleActionsKeyDown = (e) => e.stopPropagation();
+var CommitActions = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex items-center gap-1", className),
+    onClick: handleActionsClick,
+    onKeyDown: handleActionsKeyDown,
+    role: "group",
+    ...props,
+    children
+  }
+);
+var CommitCopyButton = ({
+  hash,
+  onCopy,
+  onError,
+  timeout = 2e3,
+  children,
+  className,
+  ...props
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const timeoutRef = useRef(0);
+  const copyToClipboard = useCallback(async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+    try {
+      if (!isCopied) {
+        await navigator.clipboard.writeText(hash);
+        setIsCopied(true);
+        onCopy?.();
+        timeoutRef.current = window.setTimeout(
+          () => setIsCopied(false),
+          timeout
+        );
+      }
+    } catch (error) {
+      onError?.(error);
+    }
+  }, [hash, onCopy, onError, timeout, isCopied]);
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: cn("size-7 shrink-0", className),
+      onClick: copyToClipboard,
+      size: "icon",
+      variant: "ghost",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(Icon, { size: 14 })
+    }
+  );
+};
+var CommitContent = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(CollapsibleContent, { className: cn("border-t p-3", className), ...props, children });
+var CommitFiles = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), ...props, children });
+var CommitFile = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/50",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CommitFileInfo = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 items-center gap-2", className), ...props, children });
+var fileStatusStyles = {
+  added: "text-green-600 dark:text-green-400",
+  deleted: "text-red-600 dark:text-red-400",
+  modified: "text-yellow-600 dark:text-yellow-400",
+  renamed: "text-blue-600 dark:text-blue-400"
+};
+var fileStatusLabels = {
+  added: "A",
+  deleted: "D",
+  modified: "M",
+  renamed: "R"
+};
+var CommitFileStatus = ({
+  status,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    className: cn(
+      "font-medium font-mono text-xs",
+      fileStatusStyles[status],
+      className
+    ),
+    ...props,
+    children: children ?? fileStatusLabels[status]
+  }
+);
+var CommitFileIcon = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  FileIcon,
+  {
+    className: cn("size-3.5 shrink-0 text-muted-foreground", className),
+    ...props
+  }
+);
+var CommitFilePath = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("span", { className: cn("truncate font-mono text-xs", className), ...props, children });
+var CommitFileChanges = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex shrink-0 items-center gap-1 font-mono text-xs",
+      className
+    ),
+    ...props,
+    children
+  }
+);
+var CommitFileAdditions = ({
+  count,
+  className,
+  children,
+  ...props
+}) => {
+  if (count <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-green-600 dark:text-green-400", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PlusIcon, { className: "inline-block size-3" }),
+        count
+      ] })
+    }
+  );
+};
+var CommitFileDeletions = ({
+  count,
+  className,
+  children,
+  ...props
+}) => {
+  if (count <= 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("text-red-600 dark:text-red-400", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(MinusIcon, { className: "inline-block size-3" }),
+        count
+      ] })
+    }
+  );
+};
+
+export { Commit, CommitActions, CommitAuthor, CommitAuthorAvatar, CommitContent, CommitCopyButton, CommitFile, CommitFileAdditions, CommitFileChanges, CommitFileDeletions, CommitFileIcon, CommitFileInfo, CommitFilePath, CommitFileStatus, CommitFiles, CommitHash, CommitHeader, CommitInfo, CommitMessage, CommitMetadata, CommitSeparator, CommitTimestamp };