@vvedantb/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vvedantb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,126 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Shared React 19 UI primitives for vmem, vibot and Verve.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vvedantb/vv-ui.git",
+    "directory": "packages/ui"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./cn": {
+      "types": "./src/utils/cn.ts",
+      "default": "./src/utils/cn.ts"
+    }
+  },
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./src/ui/sonner.css"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.1.7",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
+    "@streamdown/cjk": "*",
+    "@streamdown/code": "*",
+    "@streamdown/math": "*",
+    "@streamdown/mermaid": "*",
+    "@tabler/icons-react": "^3.35.0",
+    "@vvedantb/tokens": "*",
+    "ai": ">=5.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "motion": ">=12.0.0",
+    "nanoid": "^5.1.0",
+    "radix-ui": "^1.4.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "shiki": "^3.0.0",
+    "sonner": "^2.0.3",
+    "streamdown": "*",
+    "tailwind-merge": "^2.6.0",
+    "use-stick-to-bottom": "^1.1.0",
+    "vaul": "^1.1.0"
+  },
+  "devDependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.1.7",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
+    "@streamdown/cjk": "*",
+    "@streamdown/code": "*",
+    "@streamdown/math": "*",
+    "@streamdown/mermaid": "*",
+    "@tabler/icons-react": "^3.35.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vvedantb/tokens": "workspace:*",
+    "ai": "^5.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "motion": "^12.0.0",
+    "nanoid": "^5.1.0",
+    "radix-ui": "^1.4.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "shiki": "^3.0.0",
+    "sonner": "^2.0.3",
+    "streamdown": "*",
+    "tailwind-merge": "^2.6.0",
+    "typescript": "^5.9.0",
+    "use-stick-to-bottom": "^1.1.0",
+    "vaul": "^1.1.0"
+  }
+}

package/src/ai-elements/artifact.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+
+import { Button } from "../ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { cn } from "../utils/cn";
+import { flatElevatedSurfaceClass } from "../ui/surface-classes";
+
+export type ArtifactProps = ComponentProps<"div">;
+
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
+  <div
+    className={cn(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}
+  />
+);
+
+export type ArtifactTitleProps = ComponentProps<"p">;
+
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
+  <p
+    className={cn("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", className)} {...props} />
+);
+
+export type ArtifactActionsProps = ComponentProps<"div">;
+
+export const ArtifactActions = ({
+  className,
+  ...props
+}: ArtifactActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props} />
+);
+
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+  tooltip: string;
+  icon: ReactNode;
+  label?: string;
+};
+
+export const ArtifactAction = ({
+  tooltip,
+  icon,
+  label,
+  className,
+  variant = "ghost",
+  size = "icon",
+  ...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>
+);
+
+export type ArtifactContentProps = ComponentProps<"div">;
+
+export const ArtifactContent = ({
+  className,
+  ...props
+}: ArtifactContentProps) => (
+  <div className={cn("px-4 pb-4", className)} {...props} />
+);

package/src/ai-elements/attachments.tsx

@@ -0,0 +1,366 @@
+"use client";
+import type { FileUIPart, SourceDocumentUIPart } from "ai";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { Button } from "../ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../ui/hover-card";
+import { cn } from "../utils/cn";
+import {
+  flatElevatedSurfaceHoverClass,
+  flatPanelSubtleClass,
+} from "../ui/surface-classes";
+import {
+  IconFileText,
+  IconMusic,
+  IconPaperclip,
+  IconPhoto,
+  IconVideo,
+  IconWorld,
+  IconX,
+} from "@tabler/icons-react";
+import { createContext, useContext } from "react";
+// ============================================================================
+// Types
+// ============================================================================
+export type AttachmentData =
+  | (FileUIPart & {
+      id: string;
+    })
+  | (SourceDocumentUIPart & {
+      id: string;
+    });
+export type AttachmentMediaCategory =
+  | "image"
+  | "video"
+  | "audio"
+  | "document"
+  | "source"
+  | "unknown";
+export type AttachmentVariant = "grid" | "inline" | "list";
+const mediaCategoryIcons: Record<AttachmentMediaCategory, typeof IconPhoto> = {
+  audio: IconMusic,
+  document: IconFileText,
+  image: IconPhoto,
+  source: IconWorld,
+  unknown: IconPaperclip,
+  video: IconVideo,
+};
+// ============================================================================
+// Utility Functions
+// ============================================================================
+export const getMediaCategory = (
+  data: AttachmentData,
+): AttachmentMediaCategory => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+  const mediaType = data.mediaType ?? "";
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+  return "unknown";
+};
+export const getAttachmentLabel = (data: AttachmentData): string => {
+  if (data.type === "source-document") {
+    return data.title || data.filename || "Source";
+  }
+  const category = getMediaCategory(data);
+  return data.filename || (category === "image" ? "Image" : "Attachment");
+};
+const renderAttachmentImage = (
+  url: string,
+  filename: string | undefined,
+  isGrid: boolean,
+) =>
+  isGrid ? (
+    <img
+      alt={filename || "Image"}
+      className="size-full object-cover"
+      height={96}
+      src={url}
+      width={96}
+    />
+  ) : (
+    <img
+      alt={filename || "Image"}
+      className="size-full rounded object-cover"
+      height={20}
+      src={url}
+      width={20}
+    />
+  );
+// ============================================================================
+// Contexts
+// ============================================================================
+interface AttachmentsContextValue {
+  variant: AttachmentVariant;
+}
+const AttachmentsContext = createContext<AttachmentsContextValue | null>(null);
+interface AttachmentContextValue {
+  data: AttachmentData;
+  mediaCategory: AttachmentMediaCategory;
+  onRemove?: () => void;
+  variant: AttachmentVariant;
+}
+const AttachmentContext = createContext<AttachmentContextValue | null>(null);
+// ============================================================================
+// Hooks
+// ============================================================================
+export const useAttachmentsContext = () =>
+  useContext(AttachmentsContext) ?? { variant: "grid" as const };
+export const useAttachmentContext = () => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+// ============================================================================
+// Attachments - Container
+// ============================================================================
+export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: AttachmentVariant;
+};
+export const Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}: AttachmentsProps) => {
+  const contextValue = { variant };
+  return (
+    <AttachmentsContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex items-start",
+          variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+          variant === "grid" && "ml-auto w-fit",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentsContext.Provider>
+  );
+};
+// ============================================================================
+// Attachment - Item
+// ============================================================================
+export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
+  data: AttachmentData;
+  onRemove?: () => void;
+};
+export const Attachment = ({
+  data,
+  onRemove,
+  className,
+  children,
+  ...props
+}: AttachmentProps) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+  const contextValue = { data, mediaCategory, onRemove, variant };
+  return (
+    <AttachmentContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "group relative",
+          variant === "grid" && "size-24 overflow-hidden rounded-lg",
+          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" && [
+            "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",
+          ],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentContext.Provider>
+  );
+};
+// ============================================================================
+// AttachmentPreview - Media preview
+// ============================================================================
+export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  fallbackIcon?: ReactNode;
+};
+export const AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}: AttachmentPreviewProps) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+  const renderIcon = (Icon: typeof IconPhoto) => (
+    <Icon className={cn(iconSize, "text-muted")} />
+  );
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderAttachmentImage(data.url, data.filename, variant === "grid");
+    }
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return <video className="size-full object-cover" muted src={data.url} />;
+    }
+    const Icon = mediaCategoryIcons[mediaCategory];
+    return fallbackIcon ?? renderIcon(Icon);
+  };
+  return (
+    <div
+      className={cn(
+        "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),
+        className,
+      )}
+      {...props}
+    >
+      {renderContent()}
+    </div>
+  );
+};
+// ============================================================================
+// AttachmentInfo - Name and type display
+// ============================================================================
+export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
+  showMediaType?: boolean;
+};
+export const AttachmentInfo = ({
+  showMediaType = false,
+  className,
+  ...props
+}: AttachmentInfoProps) => {
+  const { data, variant } = useAttachmentContext();
+  const label = getAttachmentLabel(data);
+  if (variant === "grid") {
+    return null;
+  }
+  return (
+    <div className={cn("min-w-0 flex-1", className)} {...props}>
+      <span className="block truncate">{label}</span>
+      {showMediaType && data.mediaType && (
+        <span className="block truncate text-muted text-xs">
+          {data.mediaType}
+        </span>
+      )}
+    </div>
+  );
+};
+// ============================================================================
+// AttachmentRemove - Remove button
+// ============================================================================
+export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
+  label?: string;
+};
+export const AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}: AttachmentRemoveProps) => {
+  const { onRemove, variant } = useAttachmentContext();
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onRemove?.();
+  };
+  if (!onRemove) {
+    return null;
+  }
+  return (
+    <Button
+      aria-label={label}
+      className={cn(
+        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" && [
+          "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"],
+        className,
+      )}
+      onClick={handleClick}
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <IconX />}
+      <span className="sr-only">{label}</span>
+    </Button>
+  );
+};
+// ============================================================================
+// AttachmentHoverCard - Hover preview
+// ============================================================================
+export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
+export const AttachmentHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}: AttachmentHoverCardProps) => (
+  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
+);
+export type AttachmentHoverCardTriggerProps = ComponentProps<
+  typeof HoverCardTrigger
+>;
+export const AttachmentHoverCardTrigger = (
+  props: AttachmentHoverCardTriggerProps,
+) => <HoverCardTrigger {...props} />;
+export type AttachmentHoverCardContentProps = ComponentProps<
+  typeof HoverCardContent
+>;
+export const AttachmentHoverCardContent = ({
+  align = "start",
+  className,
+  ...props
+}: AttachmentHoverCardContentProps) => (
+  <HoverCardContent
+    align={align}
+    className={cn("w-auto p-2", className)}
+    {...props}
+  />
+);
+// ============================================================================
+// AttachmentEmpty - Empty state
+// ============================================================================
+export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
+export const AttachmentEmpty = ({
+  className,
+  children,
+  ...props
+}: AttachmentEmptyProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-center p-4 text-muted text-sm",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? "No attachments"}
+  </div>
+);