@vvedantb/ui 0.17.1 → 0.18.0

package/src/ai-elements/artifact.tsx

@@ -1,66 +1,157 @@
 "use client";
 
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
+import { isValidElement } from "react";
+import { IconX } from "@tabler/icons-react";
 
 import { Button } from "../ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "../ui/ui-config";
 import { flatElevatedSurfaceClass } from "../ui/surface-classes";
 
+/**
+ * `UiConfig.Artifact`: classes replace each part's built-in classes
+ * (`action` covers `ArtifactAction` and `ArtifactClose`). `actionSize` is the
+ * actions' default button size; `actionLabel: "sr-only"` names an action with
+ * a visually hidden span instead of `aria-label`.
+ */
+export interface ArtifactConfig {
+  actionSize?: ComponentProps<typeof Button>["size"];
+  actionLabel?: "aria-label" | "sr-only";
+  classes?: {
+    root?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+    action?: string;
+    /** Class of an icon given as a component (`icon={IconCopy}`). */
+    actionIcon?: string;
+    content?: string;
+  };
+}
+
 export type ArtifactProps = ComponentProps<"div">;
 
-export const Artifact = ({ className, ...props }: ArtifactProps) => (
-  <div
-    className={cn(flatElevatedSurfaceClass, "rounded-lg", className)}
-    {...props}
-  />
-);
+export const Artifact = ({ className, ...props }: ArtifactProps) => {
+  const root = useUiConfig("Artifact")?.classes?.root;
+  const merge = useCn();
+  return (
+    <div
+      className={merge(root ?? [flatElevatedSurfaceClass, "rounded-lg"], className)}
+      {...props}
+    />
+  );
+};
 
 export type ArtifactHeaderProps = ComponentProps<"div">;
 
 export const ArtifactHeader = ({
   className,
   ...props
-}: ArtifactHeaderProps) => (
-  <div
-    className={cn(
-      "flex items-start justify-between gap-2 px-4 py-3",
-      className,
-    )}
-    {...props}
-  />
-);
+}: ArtifactHeaderProps) => {
+  const header = useUiConfig("Artifact")?.classes?.header;
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        header ?? "flex items-start justify-between gap-2 px-4 py-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
 
 export type ArtifactTitleProps = ComponentProps<"p">;
 
-export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
-  <p
-    className={cn("text-sm font-medium text-foreground", className)}
-    {...props}
-  />
-);
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => {
+  const title = useUiConfig("Artifact")?.classes?.title;
+  const merge = useCn();
+  return (
+    <p
+      className={merge(title ?? "text-sm font-medium text-foreground", className)}
+      {...props}
+    />
+  );
+};
 
 export type ArtifactDescriptionProps = ComponentProps<"p">;
 
 export const ArtifactDescription = ({
   className,
   ...props
-}: ArtifactDescriptionProps) => (
-  <p className={cn("text-xs text-muted-foreground", className)} {...props} />
-);
+}: ArtifactDescriptionProps) => {
+  const description = useUiConfig("Artifact")?.classes?.description;
+  const merge = useCn();
+  return (
+    <p
+      className={merge(description ?? "text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  );
+};
 
 export type ArtifactActionsProps = ComponentProps<"div">;
 
 export const ArtifactActions = ({
   className,
   ...props
-}: ArtifactActionsProps) => (
-  <div className={cn("flex items-center gap-1", className)} {...props} />
-);
+}: ArtifactActionsProps) => {
+  const actions = useUiConfig("Artifact")?.classes?.actions;
+  const merge = useCn();
+  return (
+    <div className={merge(actions ?? "flex items-center gap-1", className)} {...props} />
+  );
+};
+
+type ArtifactIcon = ComponentType<{ className?: string }>;
+
+/** A component (`IconCopy`) rather than a rendered node (`<IconCopy />`). */
+function isIconComponent(icon: ReactNode | ArtifactIcon): icon is ArtifactIcon {
+  if (typeof icon === "function") return true;
+  // forwardRef / memo components are objects with `render` / `type`.
+  return (
+    typeof icon === "object" &&
+    icon !== null &&
+    !isValidElement(icon) &&
+    ("render" in icon || "type" in icon)
+  );
+}
+
+const renderIcon = (Icon: ArtifactIcon, className: string) => <Icon className={className} />;
+
+/** Button shared by `ArtifactAction` and `ArtifactClose`. */
+function ArtifactActionButton({
+  label,
+  className,
+  variant = "ghost",
+  size,
+  children,
+  ...props
+}: Omit<ComponentProps<typeof Button>, "aria-label"> & { label?: string }) {
+  const config = useUiConfig("Artifact");
+  const merge = useCn();
+  const srOnly = config?.actionLabel === "sr-only";
+  return (
+    <Button
+      variant={variant}
+      size={size ?? config?.actionSize ?? "icon"}
+      className={merge(config?.classes?.action ?? "min-w-6 h-6", className)}
+      {...(srOnly ? { type: "button" } : { "aria-label": label })}
+      {...props}
+    >
+      {children}
+      {srOnly ? <span className="sr-only">{label}</span> : null}
+    </Button>
+  );
+}
 
 export type ArtifactActionProps = ComponentProps<typeof Button> & {
-  tooltip: string;
-  icon: ReactNode;
+  /** Without it the button renders alone, with no tooltip. */
+  tooltip?: string;
+  /** A node (`<IconCopy />`) or an icon component (`IconCopy`). */
+  icon?: ReactNode | ArtifactIcon;
   label?: string;
 };
 
@@ -68,25 +159,42 @@ export const ArtifactAction = ({
   tooltip,
   icon,
   label,
-  className,
-  variant = "ghost",
-  size = "icon",
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}: ArtifactActionProps) => {
+  const actionIcon = useUiConfig("Artifact")?.classes?.actionIcon;
+  const content = isIconComponent(icon)
+    ? renderIcon(icon, actionIcon ?? "size-4")
+    : (icon ?? children);
+  const button = (
+    <ArtifactActionButton label={ariaLabel ?? label ?? tooltip} {...props}>
+      {content}
+    </ArtifactActionButton>
+  );
+  if (!tooltip) return button;
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent>{tooltip}</TooltipContent>
+    </Tooltip>
+  );
+};
+
+export type ArtifactCloseProps = ComponentProps<typeof Button> & {
+  /** Accessible name. Default `"Close"`. */
+  label?: string;
+};
+
+/** Close button for the artifact header, an `ArtifactAction` with an X. */
+export const ArtifactClose = ({
+  label = "Close",
+  children,
   ...props
-}: ArtifactActionProps) => (
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button
-        variant={variant}
-        size={size}
-        className={cn("min-w-6 h-6", className)}
-        aria-label={label ?? tooltip}
-        {...props}
-      >
-        {icon}
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>{tooltip}</TooltipContent>
-  </Tooltip>
+}: ArtifactCloseProps) => (
+  <ArtifactActionButton label={label} {...props}>
+    {children ?? <IconX className="size-4" />}
+  </ArtifactActionButton>
 );
 
 export type ArtifactContentProps = ComponentProps<"div">;
@@ -94,6 +202,8 @@ export type ArtifactContentProps = ComponentProps<"div">;
 export const ArtifactContent = ({
   className,
   ...props
-}: ArtifactContentProps) => (
-  <div className={cn("px-4 pb-4", className)} {...props} />
-);
+}: ArtifactContentProps) => {
+  const content = useUiConfig("Artifact")?.classes?.content;
+  const merge = useCn();
+  return <div className={merge(content ?? "px-4 pb-4", className)} {...props} />;
+};

package/src/ai-elements/attachments.tsx

@@ -12,6 +12,7 @@ import {
   flatElevatedSurfaceHoverClass,
   flatPanelSubtleClass,
 } from "../ui/surface-classes";
+import { useCn, useUiConfig } from "../ui/ui-config";
 import {
   IconFileText,
   IconMusic,
@@ -40,6 +41,18 @@ export type AttachmentMediaCategory =
   | "source"
   | "unknown";
 export type AttachmentVariant = "grid" | "inline" | "list";
+/**
+ * `UiConfig.Attachments`: per-variant classes that replace the variant part
+ * of an `Attachment`, its `AttachmentPreview` and its `AttachmentRemove`.
+ * The shared base classes stay.
+ */
+export interface AttachmentsConfig {
+  classes?: {
+    item?: Partial<Record<AttachmentVariant, string>>;
+    preview?: Partial<Record<AttachmentVariant, string>>;
+    remove?: Partial<Record<AttachmentVariant, string>>;
+  };
+}
 const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof IconPhoto> = {
   audio: IconMusic,
   document: IconFileText,
@@ -139,11 +152,12 @@ export const Attachments = ({
   children,
   ...props
 }: AttachmentsProps) => {
+  const merge = useCn();
   const contextValue = { variant };
   return (
     <AttachmentsContext.Provider value={contextValue}>
       <div
-        className={cn(
+        className={merge(
           "flex items-start",
           variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
           variant === "grid" && "ml-auto w-fit",
@@ -171,21 +185,24 @@ export const Attachment = ({
   ...props
 }: AttachmentProps) => {
   const { variant } = useAttachmentsContext();
+  const item = useUiConfig("Attachments")?.classes?.item?.[variant];
+  const merge = useCn();
   const mediaCategory = getMediaCategory(data);
   const contextValue = { data, mediaCategory, onRemove, variant };
   return (
     <AttachmentContext.Provider value={contextValue}>
       <div
-        className={cn(
+        className={merge(
           "group relative",
-          variant === "grid" && "size-24 overflow-hidden rounded-lg",
-          variant === "inline" && [
+          item,
+          item === undefined && variant === "grid" && "size-24 overflow-hidden rounded-lg",
+          item === undefined && variant === "inline" && [
             "flex h-8 cursor-pointer select-none items-center gap-1.5",
             "rounded-md px-1.5",
             "font-medium text-sm transition-[background-color,color,transform] duration-150 ease-out",
             "active:scale-[0.97] hover:bg-surface-secondary hover:text-foreground",
           ],
-          variant === "list" && [
+          item === undefined && variant === "list" && [
             "flex w-full items-center gap-3 rounded-lg p-3",
             "transition-[background-color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary",
           ],
@@ -210,6 +227,8 @@ export const AttachmentPreview = ({
   ...props
 }: AttachmentPreviewProps) => {
   const { data, mediaCategory, variant } = useAttachmentContext();
+  const preview = useUiConfig("Attachments")?.classes?.preview?.[variant];
+  const merge = useCn();
   const iconSize = variant === "inline" ? "size-3" : "size-4";
   const renderIcon = (Icon: typeof IconPhoto) => (
     <Icon className={cn(iconSize, "text-muted-foreground")} />
@@ -226,11 +245,12 @@ export const AttachmentPreview = ({
   };
   return (
     <div
-      className={cn(
+      className={merge(
         "flex shrink-0 items-center justify-center overflow-hidden",
-        variant === "grid" && cn("size-full", flatPanelSubtleClass),
-        variant === "inline" && cn("size-5 rounded", flatPanelSubtleClass),
-        variant === "list" && cn("size-12 rounded", flatPanelSubtleClass),
+        preview,
+        preview === undefined && variant === "grid" && cn("size-full", flatPanelSubtleClass),
+        preview === undefined && variant === "inline" && cn("size-5 rounded", flatPanelSubtleClass),
+        preview === undefined && variant === "list" && cn("size-12 rounded", flatPanelSubtleClass),
         className,
       )}
       {...props}
@@ -251,12 +271,13 @@ export const AttachmentInfo = ({
   ...props
 }: AttachmentInfoProps) => {
   const { data, variant } = useAttachmentContext();
+  const merge = useCn();
   const label = getAttachmentLabel(data);
   if (variant === "grid") {
     return null;
   }
   return (
-    <div className={cn("min-w-0 flex-1", className)} {...props}>
+    <div className={merge("min-w-0 flex-1", className)} {...props}>
       <span className="block truncate">{label}</span>
       {showMediaType && data.mediaType && (
         <span className="block truncate text-muted-foreground text-xs">
@@ -279,6 +300,8 @@ export const AttachmentRemove = ({
   ...props
 }: AttachmentRemoveProps) => {
   const { onRemove, variant } = useAttachmentContext();
+  const remove = useUiConfig("Attachments")?.classes?.remove?.[variant];
+  const merge = useCn();
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
     onRemove?.();
@@ -289,19 +312,20 @@ export const AttachmentRemove = ({
   return (
     <Button
       aria-label={label}
-      className={cn(
-        variant === "grid" && [
+      className={merge(
+        remove,
+        remove === undefined && variant === "grid" && [
           "absolute top-2 right-2 size-6 rounded-full p-0",
           cn(flatPanelSubtleClass, flatElevatedSurfaceHoverClass),
           "opacity-0 transition-opacity group-hover:opacity-100",
           "[&>svg]:size-3",
         ],
-        variant === "inline" && [
+        remove === undefined && variant === "inline" && [
           "size-5 rounded p-0",
           "opacity-0 transition-opacity group-hover:opacity-100",
           "[&>svg]:size-2.5",
         ],
-        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        remove === undefined && variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
         className,
       )}
       onClick={handleClick}
@@ -338,13 +362,16 @@ export const AttachmentHoverCardContent = ({
   align = "start",
   className,
   ...props
-}: AttachmentHoverCardContentProps) => (
-  <HoverCardContent
-    align={align}
-    className={cn("w-auto p-2", className)}
-    {...props}
-  />
-);
+}: AttachmentHoverCardContentProps) => {
+  const merge = useCn();
+  return (
+    <HoverCardContent
+      align={align}
+      className={merge("w-auto p-2", className)}
+      {...props}
+    />
+  );
+};
 // ============================================================================
 // AttachmentEmpty - Empty state
 // ============================================================================
@@ -353,14 +380,17 @@ export const AttachmentEmpty = ({
   className,
   children,
   ...props
-}: AttachmentEmptyProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-center p-4 text-muted-foreground text-sm",
-      className,
-    )}
-    {...props}
-  >
-    {children ?? "No attachments"}
-  </div>
-);
+}: AttachmentEmptyProps) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        "flex items-center justify-center p-4 text-muted-foreground text-sm",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "No attachments"}
+    </div>
+  );
+};

package/src/ai-elements/code-block.tsx

@@ -16,6 +16,7 @@ import {
 } from "../ui/radix-select";
 import { cn } from "../utils/cn";
 import { flatPanelSubtleClass } from "../ui/surface-classes";
+import { useCn, useUiConfig } from "../ui/ui-config";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { bundledLanguages, createHighlighter } from "shiki";
@@ -87,9 +88,38 @@ const LineSpan = ({
 // Types
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
   code: string;
-  language: string;
+  /** Shiki language id. Without it the code renders unhighlighted. */
+  language?: string;
   showLineNumbers?: boolean;
+  /**
+   * Plain text, no shiki: a `pre` with the code. `children`, when given,
+   * replace that `pre` (and carry their own copy button) instead of sitting
+   * above the highlighted body.
+   */
+  plain?: boolean;
 };
+/**
+ * `UiConfig.CodeBlock`: `plain` default, and classes that replace the
+ * container, the plain-mode `pre`, the copy button and its icon. A
+ * `copyLabel` adds a screen-reader label to the copy button.
+ * `copyEveryClick` makes the copy button copy again while it still shows
+ * the check; by default those clicks do nothing until it resets.
+ */
+export interface CodeBlockConfig {
+  plain?: boolean;
+  copyEveryClick?: boolean;
+  copyButtonSize?: ComponentProps<typeof Button>["size"];
+  copyLabel?: string;
+  classes?: {
+    container?: string;
+    pre?: string;
+    copyButton?: string;
+    /** Replaces the icon's `size={14}` with a class. */
+    copyIcon?: string;
+  };
+}
+const containerClasses =
+  "relative w-full overflow-hidden rounded-lg bg-surface-secondary/60 text-foreground";
 interface TokenizedCode {
   tokens: ThemedToken[][];
   fg: string;
@@ -261,21 +291,22 @@ export const CodeBlockContainer = ({
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
   language: string;
-}) => (
-  <div
-    className={cn(
-      "relative w-full overflow-hidden rounded-lg bg-surface-secondary/60 text-foreground",
-      className,
-    )}
-    data-language={language}
-    style={{
-      containIntrinsicSize: "auto 200px",
-      contentVisibility: "auto",
-      ...style,
-    }}
-    {...props}
-  />
-);
+}) => {
+  const container = useUiConfig("CodeBlock")?.classes?.container;
+  const merge = useCn();
+  return (
+    <div
+      className={merge(container ?? containerClasses, className)}
+      data-language={language}
+      style={{
+        containIntrinsicSize: "auto 200px",
+        contentVisibility: "auto",
+        ...style,
+      }}
+      {...props}
+    />
+  );
+};
 export const CodeBlockHeader = ({
   children,
   className,
@@ -363,18 +394,37 @@ export const CodeBlock = ({
   code,
   language,
   showLineNumbers = false,
+  plain,
   className,
   children,
   ...props
 }: CodeBlockProps) => {
+  const config = useUiConfig("CodeBlock");
+  const merge = useCn();
   const contextValue = { code };
+  if (plain ?? config?.plain) {
+    return (
+      <CodeBlockContext.Provider value={contextValue}>
+        <div
+          className={merge(config?.classes?.container ?? containerClasses, className)}
+          {...props}
+        >
+          {children ?? (
+            <pre className={config?.classes?.pre ?? "m-0 overflow-x-auto p-4 text-sm"}>
+              <code data-language={language}>{code}</code>
+            </pre>
+          )}
+        </div>
+      </CodeBlockContext.Provider>
+    );
+  }
   return (
     <CodeBlockContext.Provider value={contextValue}>
-      <CodeBlockContainer className={className} language={language} {...props}>
+      <CodeBlockContainer className={className} language={language ?? "text"} {...props}>
         {children}
         <CodeBlockContent
           code={code}
-          language={language}
+          language={language ?? "text"}
           showLineNumbers={showLineNumbers}
         />
       </CodeBlockContainer>
@@ -397,13 +447,16 @@ export const CodeBlockCopyButton = ({
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
   const { code } = useContext(CodeBlockContext);
+  const config = useUiConfig("CodeBlock");
+  const merge = useCn();
+  const iconClass = config?.classes?.copyIcon;
   const copyToClipboard = async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
       onError?.(new Error("Clipboard API not available"));
       return;
     }
     try {
-      if (!isCopied) {
+      if (!isCopied || config?.copyEveryClick) {
         await navigator.clipboard.writeText(code);
         setIsCopied(true);
         onCopy?.();
@@ -425,13 +478,14 @@ export const CodeBlockCopyButton = ({
   const Icon = isCopied ? IconCheck : IconCopy;
   return (
     <Button
-      className={cn("shrink-0", className)}
+      className={merge(config?.classes?.copyButton ?? "shrink-0", className)}
       onClick={copyToClipboard}
-      size="icon"
+      size={config?.copyButtonSize ?? "icon"}
       variant="ghost"
       {...props}
     >
-      {children ?? <Icon size={14} />}
+      {children ?? (iconClass === undefined ? <Icon size={14} /> : <Icon className={iconClass} />)}
+      {config?.copyLabel ? <span className="sr-only">{config.copyLabel}</span> : null}
     </Button>
   );
 };