// Ported from vercel/ai-elements @ main (packages/elements/src/package-info.tsx). // Customizations applied on import: import-alias rewrites, RTL physical→logical // class swap, Vercel theme-token sweep. See scripts/registry/port-ai-elements.mjs // for the deterministic transforms — re-run to re-sync against upstream. "use client"; import { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from "lucide-react"; import type { HTMLAttributes } from "react"; import { createContext, useContext, useMemo } from "react"; import { Badge } from "@/components/registry/primitives/core/badge"; import { cn } from "@/lib/registry/cn"; type ChangeType = "major" | "minor" | "patch" | "added" | "removed"; interface PackageInfoContextType { name: string; currentVersion?: string; newVersion?: string; changeType?: ChangeType; } const PackageInfoContext = createContext({ name: "", }); export type PackageInfoHeaderProps = HTMLAttributes; export const PackageInfoHeader = ({ className, children, ...props }: PackageInfoHeaderProps) => (

{children}

); export type PackageInfoNameProps = HTMLAttributes; export const PackageInfoName = ({ className, children, ...props }: PackageInfoNameProps) => { const { name } = useContext(PackageInfoContext); return (

{children ?? name}

); }; const changeTypeStyles: Record = { added: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400", major: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400", minor: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400", patch: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400", removed: "bg-muted text-gray-700 dark:bg-foreground/30 dark:text-gray-400", }; const changeTypeIcons: Record = { added: , major: , minor: , patch: , removed: , }; export type PackageInfoChangeTypeProps = HTMLAttributes; export const PackageInfoChangeType = ({ className, children, ...props }: PackageInfoChangeTypeProps) => { const { changeType } = useContext(PackageInfoContext); if (!changeType) { return null; } return ( {changeTypeIcons[changeType]} {children ?? changeType} ); }; export type PackageInfoVersionProps = HTMLAttributes; export const PackageInfoVersion = ({ className, children, ...props }: PackageInfoVersionProps) => { const { currentVersion, newVersion } = useContext(PackageInfoContext); if (!(currentVersion || newVersion)) { return null; } return (

{children ?? ( <> {currentVersion && {currentVersion}} {currentVersion && newVersion && ( )} {newVersion && ( {newVersion} )} )}

); }; export type PackageInfoProps = HTMLAttributes & { name: string; currentVersion?: string; newVersion?: string; changeType?: ChangeType; }; export const PackageInfo = ({ name, currentVersion, newVersion, changeType, className, children, ...props }: PackageInfoProps) => { const contextValue = useMemo( () => ({ changeType, currentVersion, name, newVersion }), [changeType, currentVersion, name, newVersion], ); return (

{children ?? ( <> {changeType && } {(currentVersion || newVersion) && } )}

); }; export type PackageInfoDescriptionProps = HTMLAttributes; export const PackageInfoDescription = ({ className, children, ...props }: PackageInfoDescriptionProps) => (

{children}

); export type PackageInfoContentProps = HTMLAttributes; export const PackageInfoContent = ({ className, children, ...props }: PackageInfoContentProps) => (

{children}

); export type PackageInfoDependenciesProps = HTMLAttributes; export const PackageInfoDependencies = ({ className, children, ...props }: PackageInfoDependenciesProps) => (

Dependencies

{children}

); export type PackageInfoDependencyProps = HTMLAttributes & { name: string; version?: string; }; export const PackageInfoDependency = ({ name, version, className, children, ...props }: PackageInfoDependencyProps) => (

{children ?? ( <> {name} {version && {version}} )}

);

Package Info

Showcase

Package Info