@openconsole/shadcn 0.2.5 → 0.2.7

package/components/ai-elements/file-tree.tsx

@@ -1,304 +0,0 @@
-"use client";
-
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "../ui/collapsible";
-import { cn } from "../../lib/utils";
-import {
-  ChevronRightIcon,
-  FileIcon,
-  FolderIcon,
-  FolderOpenIcon,
-} from "lucide-react";
-import type { HTMLAttributes, ReactNode } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from "react";
-
-interface FileTreeContextType {
-  expandedPaths: Set<string>;
-  togglePath: (path: string) => void;
-  selectedPath?: string;
-  onSelect?: (path: string) => void;
-}
-
-// Default noop for context default value
-// oxlint-disable-next-line eslint(no-empty-function)
-const noop = () => {};
-
-const FileTreeContext = createContext<FileTreeContextType>({
-  // oxlint-disable-next-line eslint-plugin-unicorn(no-new-builtin)
-  expandedPaths: new Set(),
-  togglePath: noop,
-});
-
-export type FileTreeProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
-  expanded?: Set<string>;
-  defaultExpanded?: Set<string>;
-  selectedPath?: string;
-  onSelect?: (path: string) => void;
-  onExpandedChange?: (expanded: Set<string>) => void;
-};
-
-export const FileTree = ({
-  expanded: controlledExpanded,
-  defaultExpanded = new Set(),
-  selectedPath,
-  onSelect,
-  onExpandedChange,
-  className,
-  children,
-  ...props
-}: FileTreeProps) => {
-  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
-  const expandedPaths = controlledExpanded ?? internalExpanded;
-
-  const togglePath = useCallback(
-    (path: string) => {
-      const newExpanded = new Set(expandedPaths);
-      if (newExpanded.has(path)) {
-        newExpanded.delete(path);
-      } else {
-        newExpanded.add(path);
-      }
-      setInternalExpanded(newExpanded);
-      onExpandedChange?.(newExpanded);
-    },
-    [expandedPaths, onExpandedChange]
-  );
-
-  const contextValue = useMemo(
-    () => ({ expandedPaths, onSelect, selectedPath, togglePath }),
-    [expandedPaths, onSelect, selectedPath, togglePath]
-  );
-
-  return (
-    <FileTreeContext.Provider value={contextValue}>
-      <div
-        className={cn(
-          "rounded-lg border bg-background font-mono text-sm",
-          className
-        )}
-        role="tree"
-        {...props}
-      >
-        <div className="p-2">{children}</div>
-      </div>
-    </FileTreeContext.Provider>
-  );
-};
-
-export type FileTreeIconProps = HTMLAttributes<HTMLSpanElement>;
-
-export const FileTreeIcon = ({
-  className,
-  children,
-  ...props
-}: FileTreeIconProps) => (
-  <span className={cn("shrink-0", className)} {...props}>
-    {children}
-  </span>
-);
-
-export type FileTreeNameProps = HTMLAttributes<HTMLSpanElement>;
-
-export const FileTreeName = ({
-  className,
-  children,
-  ...props
-}: FileTreeNameProps) => (
-  <span className={cn("truncate", className)} {...props}>
-    {children}
-  </span>
-);
-
-interface FileTreeFolderContextType {
-  path: string;
-  name: string;
-  isExpanded: boolean;
-}
-
-const FileTreeFolderContext = createContext<FileTreeFolderContextType>({
-  isExpanded: false,
-  name: "",
-  path: "",
-});
-
-export type FileTreeFolderProps = HTMLAttributes<HTMLDivElement> & {
-  path: string;
-  name: string;
-};
-
-export const FileTreeFolder = ({
-  path,
-  name,
-  className,
-  children,
-  ...props
-}: FileTreeFolderProps) => {
-  const { expandedPaths, togglePath, selectedPath, onSelect } =
-    useContext(FileTreeContext);
-  const isExpanded = expandedPaths.has(path);
-  const isSelected = selectedPath === path;
-
-  const handleOpenChange = useCallback(() => {
-    togglePath(path);
-  }, [togglePath, path]);
-
-  const handleSelect = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-
-  const folderContextValue = useMemo(
-    () => ({ isExpanded, name, path }),
-    [isExpanded, name, path]
-  );
-
-  return (
-    <FileTreeFolderContext.Provider value={folderContextValue}>
-      <Collapsible onOpenChange={handleOpenChange} open={isExpanded}>
-        <div
-          className={cn("", className)}
-          role="treeitem"
-          tabIndex={0}
-          {...props}
-        >
-          <div
-            className={cn(
-              "flex w-full items-center gap-1 rounded px-2 py-1 text-left transition-colors hover:bg-muted/50",
-              isSelected && "bg-muted"
-            )}
-          >
-            <CollapsibleTrigger asChild>
-              <button
-                className="flex shrink-0 cursor-pointer items-center border-none bg-transparent p-0"
-                type="button"
-              >
-                <ChevronRightIcon
-                  className={cn(
-                    "size-4 shrink-0 text-muted-foreground transition-transform",
-                    isExpanded && "rotate-90"
-                  )}
-                />
-              </button>
-            </CollapsibleTrigger>
-            <button
-              className="flex min-w-0 flex-1 cursor-pointer items-center gap-1 border-none bg-transparent p-0 text-left"
-              onClick={handleSelect}
-              type="button"
-            >
-              <FileTreeIcon>
-                {isExpanded ? (
-                  <FolderOpenIcon className="size-4 text-blue-500" />
-                ) : (
-                  <FolderIcon className="size-4 text-blue-500" />
-                )}
-              </FileTreeIcon>
-              <FileTreeName>{name}</FileTreeName>
-            </button>
-          </div>
-          <CollapsibleContent>
-            <div className="ml-4 border-l pl-2">{children}</div>
-          </CollapsibleContent>
-        </div>
-      </Collapsible>
-    </FileTreeFolderContext.Provider>
-  );
-};
-
-interface FileTreeFileContextType {
-  path: string;
-  name: string;
-}
-
-const FileTreeFileContext = createContext<FileTreeFileContextType>({
-  name: "",
-  path: "",
-});
-
-export type FileTreeFileProps = HTMLAttributes<HTMLDivElement> & {
-  path: string;
-  name: string;
-  icon?: ReactNode;
-};
-
-export const FileTreeFile = ({
-  path,
-  name,
-  icon,
-  className,
-  children,
-  ...props
-}: FileTreeFileProps) => {
-  const { selectedPath, onSelect } = useContext(FileTreeContext);
-  const isSelected = selectedPath === path;
-
-  const handleClick = useCallback(() => {
-    onSelect?.(path);
-  }, [onSelect, path]);
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Enter" || e.key === " ") {
-        onSelect?.(path);
-      }
-    },
-    [onSelect, path]
-  );
-
-  const fileContextValue = useMemo(() => ({ name, path }), [name, path]);
-
-  return (
-    <FileTreeFileContext.Provider value={fileContextValue}>
-      <div
-        className={cn(
-          "flex cursor-pointer items-center gap-1 rounded px-2 py-1 transition-colors hover:bg-muted/50",
-          isSelected && "bg-muted",
-          className
-        )}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        role="treeitem"
-        tabIndex={0}
-        {...props}
-      >
-        {children ?? (
-          <>
-            {/* Spacer for alignment */}
-            <span className="size-4 shrink-0" />
-            <FileTreeIcon>
-              {icon ?? <FileIcon className="size-4 text-muted-foreground" />}
-            </FileTreeIcon>
-            <FileTreeName>{name}</FileTreeName>
-          </>
-        )}
-      </div>
-    </FileTreeFileContext.Provider>
-  );
-};
-
-export type FileTreeActionsProps = HTMLAttributes<HTMLDivElement>;
-
-const stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
-
-export const FileTreeActions = ({
-  className,
-  children,
-  ...props
-}: FileTreeActionsProps) => (
-  <div
-    className={cn("ml-auto flex items-center gap-1", className)}
-    onClick={stopPropagation}
-    onKeyDown={stopPropagation}
-    role="group"
-    {...props}
-  >
-    {children}
-  </div>
-);

package/components/ai-elements/image.tsx

@@ -1,24 +0,0 @@
-import { cn } from "../../lib/utils";
-import type { Experimental_GeneratedImage } from "ai";
-
-export type ImageProps = Experimental_GeneratedImage & {
-  className?: string;
-  alt?: string;
-};
-
-export const Image = ({
-  base64,
-  uint8Array: _uint8Array,
-  mediaType,
-  ...props
-}: ImageProps) => (
-  <img
-    {...props}
-    alt={props.alt}
-    className={cn(
-      "h-auto max-w-full overflow-hidden rounded-md",
-      props.className
-    )}
-    src={`data:${mediaType};base64,${base64}`}
-  />
-);

package/components/ai-elements/index.ts

@@ -1,51 +0,0 @@
-// Barrel — re-export every AI SDK Element in this directory.
-// Add a line when you add a component (keep sorted).
-
-export * from "./agent";
-export * from "./artifact";
-export * from "./attachments";
-export * from "./audio-player";
-export * from "./canvas";
-export * from "./chain-of-thought";
-export * from "./checkpoint";
-export * from "./code-block";
-export * from "./commit";
-export * from "./confirmation";
-export * from "./connection";
-export * from "./context";
-export * from "./controls";
-export * from "./conversation";
-export * from "./edge";
-export * from "./environment-variables";
-export * from "./file-tree";
-export * from "./image";
-export * from "./inline-citation";
-export * from "./jsx-preview";
-export * from "./message";
-export * from "./mic-selector";
-export * from "./model-selector";
-export * from "./node";
-export * from "./open-in-chat";
-export * from "./package-info";
-export * from "./panel";
-export * from "./persona";
-export * from "./plan";
-export * from "./prompt-input";
-export * from "./queue";
-export * from "./reasoning";
-export * from "./sandbox";
-export * from "./schema-display";
-export * from "./shimmer";
-export * from "./snippet";
-export * from "./sources";
-export * from "./speech-input";
-export * from "./stack-trace";
-export * from "./suggestion";
-export * from "./task";
-export * from "./terminal";
-export * from "./test-results";
-export * from "./tool";
-export * from "./toolbar";
-export * from "./transcription";
-export * from "./voice-selector";
-export * from "./web-preview";

package/components/ai-elements/inline-citation.tsx

@@ -1,296 +0,0 @@
-"use client";
-
-import { Badge } from "../ui/badge";
-import type { CarouselApi } from "../ui/carousel";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-} from "../ui/carousel";
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from "../ui/hover-card";
-import { cn } from "../../lib/utils";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import type { ComponentProps } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
-
-export type InlineCitationProps = ComponentProps<"span">;
-
-export const InlineCitation = ({
-  className,
-  ...props
-}: InlineCitationProps) => (
-  <span
-    className={cn("group inline items-center gap-1", className)}
-    {...props}
-  />
-);
-
-export type InlineCitationTextProps = ComponentProps<"span">;
-
-export const InlineCitationText = ({
-  className,
-  ...props
-}: InlineCitationTextProps) => (
-  <span
-    className={cn("transition-colors group-hover:bg-accent", className)}
-    {...props}
-  />
-);
-
-export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
-
-export const InlineCitationCard = (props: InlineCitationCardProps) => (
-  <HoverCard closeDelay={0} openDelay={0} {...props} />
-);
-
-export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
-  sources: string[];
-};
-
-export const InlineCitationCardTrigger = ({
-  sources,
-  className,
-  ...props
-}: InlineCitationCardTriggerProps) => (
-  <HoverCardTrigger asChild>
-    <Badge
-      className={cn("ml-1 rounded-full", className)}
-      variant="secondary"
-      {...props}
-    >
-      {sources[0] ? (
-        <>
-          {new URL(sources[0]).hostname}{" "}
-          {sources.length > 1 && `+${sources.length - 1}`}
-        </>
-      ) : (
-        "unknown"
-      )}
-    </Badge>
-  </HoverCardTrigger>
-);
-
-export type InlineCitationCardBodyProps = ComponentProps<"div">;
-
-export const InlineCitationCardBody = ({
-  className,
-  ...props
-}: InlineCitationCardBodyProps) => (
-  <HoverCardContent className={cn("relative w-80 p-0", className)} {...props} />
-);
-
-const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
-
-const useCarouselApi = () => {
-  const context = useContext(CarouselApiContext);
-  return context;
-};
-
-export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
-
-export const InlineCitationCarousel = ({
-  className,
-  children,
-  ...props
-}: InlineCitationCarouselProps) => {
-  const [api, setApi] = useState<CarouselApi>();
-
-  return (
-    <CarouselApiContext.Provider value={api}>
-      <Carousel className={cn("w-full", className)} setApi={setApi} {...props}>
-        {children}
-      </Carousel>
-    </CarouselApiContext.Provider>
-  );
-};
-
-export type InlineCitationCarouselContentProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselContent = (
-  props: InlineCitationCarouselContentProps
-) => <CarouselContent {...props} />;
-
-export type InlineCitationCarouselItemProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselItem = ({
-  className,
-  ...props
-}: InlineCitationCarouselItemProps) => (
-  <CarouselItem
-    className={cn("w-full space-y-2 p-4 pl-8", className)}
-    {...props}
-  />
-);
-
-export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselHeader = ({
-  className,
-  ...props
-}: InlineCitationCarouselHeaderProps) => (
-  <div
-    className={cn(
-      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
-      className
-    )}
-    {...props}
-  />
-);
-
-export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
-
-export const InlineCitationCarouselIndex = ({
-  children,
-  className,
-  ...props
-}: InlineCitationCarouselIndexProps) => {
-  const api = useCarouselApi();
-  const [current, setCurrent] = useState(0);
-  const [count, setCount] = useState(0);
-
-  const syncState = useCallback(() => {
-    if (!api) {
-      return;
-    }
-    setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap() + 1);
-  }, [api]);
-
-  useEffect(() => {
-    if (!api) {
-      return;
-    }
-
-    syncState();
-
-    api.on("select", syncState);
-
-    return () => {
-      api.off("select", syncState);
-    };
-  }, [api, syncState]);
-
-  return (
-    <div
-      className={cn(
-        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
-        className
-      )}
-      {...props}
-    >
-      {children ?? `${current}/${count}`}
-    </div>
-  );
-};
-
-export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
-
-export const InlineCitationCarouselPrev = ({
-  className,
-  ...props
-}: InlineCitationCarouselPrevProps) => {
-  const api = useCarouselApi();
-
-  const handleClick = useCallback(() => {
-    if (api) {
-      api.scrollPrev();
-    }
-  }, [api]);
-
-  return (
-    <button
-      aria-label="Previous"
-      className={cn("shrink-0", className)}
-      onClick={handleClick}
-      type="button"
-      {...props}
-    >
-      <ArrowLeftIcon className="size-4 text-muted-foreground" />
-    </button>
-  );
-};
-
-export type InlineCitationCarouselNextProps = ComponentProps<"button">;
-
-export const InlineCitationCarouselNext = ({
-  className,
-  ...props
-}: InlineCitationCarouselNextProps) => {
-  const api = useCarouselApi();
-
-  const handleClick = useCallback(() => {
-    if (api) {
-      api.scrollNext();
-    }
-  }, [api]);
-
-  return (
-    <button
-      aria-label="Next"
-      className={cn("shrink-0", className)}
-      onClick={handleClick}
-      type="button"
-      {...props}
-    >
-      <ArrowRightIcon className="size-4 text-muted-foreground" />
-    </button>
-  );
-};
-
-export type InlineCitationSourceProps = ComponentProps<"div"> & {
-  title?: string;
-  url?: string;
-  description?: string;
-};
-
-export const InlineCitationSource = ({
-  title,
-  url,
-  description,
-  className,
-  children,
-  ...props
-}: InlineCitationSourceProps) => (
-  <div className={cn("space-y-1", className)} {...props}>
-    {title && (
-      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
-    )}
-    {url && (
-      <p className="truncate break-all text-muted-foreground text-xs">{url}</p>
-    )}
-    {description && (
-      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
-        {description}
-      </p>
-    )}
-    {children}
-  </div>
-);
-
-export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
-
-export const InlineCitationQuote = ({
-  children,
-  className,
-  ...props
-}: InlineCitationQuoteProps) => (
-  <blockquote
-    className={cn(
-      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </blockquote>
-);