love-ui 1.2.19 → 1.2.21

package/registry/default/blocks/hero1/components/mobile-nav.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Portal, PortalBackdrop } from "./ui/portal";
 import { navLinks } from "./header";
-import { XIcon, MenuIcon } from "lucide-react";
+import { X as XIcon, Menu as MenuIcon } from "love-ui/icons";
 
 export function MobileNav() {
 	const [open, setOpen] = React.useState(false);

package/registry/default/blocks/hero2/components/hero.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/registry/default/ui/button";
 import { DecorIcon } from "./decor-icon";
 import { FullWidthDivider } from "./full-width-divider";
-import { ArrowRightIcon, PhoneCallIcon } from "lucide-react";
+import { ArrowRight as ArrowRightIcon, PhoneCall as PhoneCallIcon } from "love-ui/icons";
 
 export function HeroSection() {
 	return (

package/registry/default/blocks/hero2/components/logo-cloud.tsx

@@ -1,120 +1,51 @@
-import { cn } from "@/lib/utils";
-import { DecorIcon } from "./decor-icon";
-import ClaudeLogo from "./logos/claude-wordmark.svg";
-import ClerkLogo from "./logos/clerk-wordmark.svg";
-import GithubLogo from "./logos/github-wordmark.svg";
-import NvidiaLogo from "./logos/nvidia-wordmark.svg";
-import OpenAILogo from "./logos/openai-wordmark.svg";
-import SupabaseLogo from "./logos/supabase-wordmark.svg";
-import TursoLogo from "./logos/turso-wordmark.svg";
-import VercelLogo from "./logos/vercel-wordmark.svg";
+import type { ElementType, SVGProps } from "react";
+import {
+	ClaudeAIWordmark as ClaudeLogo,
+	ClerkWordmark as ClerkLogo,
+	GithubWordmark as GithubLogo,
+	IBMWordmark as IBMLogo,
+	NextjsWordmark as NextjsLogo,
+	OpenAIWordmark as OpenAILogo,
+	ResendWordmark as ResendLogo,
+	VercelWordmark as VercelLogo,
+} from "love-ui/logos";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type Logo = {
-	src: { src: string } | string;
+	Component: LogoComponent;
 	alt: string;
+	className?: string;
 };
 
-const getLogoSrc = (source: Logo["src"]) =>
-	typeof source === "string" ? source : source.src;
+function LogoAsset({ logo, className }: { logo: Logo; className: string }) {
+	const Component = logo.Component;
+	const logoClassName = [className, logo.className].filter(Boolean).join(" ");
 
-export function LogoCloud() {
-	return (
-		<div className="grid grid-cols-2 border md:grid-cols-4">
-			<LogoCard
-				className="relative border-r border-b bg-secondary dark:bg-secondary/30"
-				logo={{
-					src: NvidiaLogo,
-					alt: "Nvidia Logo",
-				}}
-			>
-				<DecorIcon className="z-10" position="bottom-right" />
-			</LogoCard>
-
-			<LogoCard
-				className="border-b md:border-r"
-				logo={{
-					src: SupabaseLogo,
-					alt: "Supabase Logo",
-				}}
-			/>
-
-			<LogoCard
-				className="relative border-r border-b md:bg-secondary dark:md:bg-secondary/30"
-				logo={{
-					src: GithubLogo,
-					alt: "GitHub Logo",
-				}}
-			>
-				<DecorIcon className="z-10" position="bottom-right" />
-				<DecorIcon className="z-10 hidden md:block" position="bottom-left" />
-			</LogoCard>
-
-			<LogoCard
-				className="relative border-b bg-secondary md:bg-background dark:bg-secondary/30 md:dark:bg-background"
-				logo={{
-					src: OpenAILogo,
-					alt: "OpenAI Logo",
-				}}
-			/>
-
-			<LogoCard
-				className="relative border-r border-b bg-secondary md:border-b-0 md:bg-background dark:bg-secondary/30 md:dark:bg-background"
-				logo={{
-					src: TursoLogo,
-					alt: "Turso Logo",
-				}}
-			>
-				<DecorIcon className="z-10 md:hidden" position="bottom-right" />
-			</LogoCard>
-
-			<LogoCard
-				className="border-b bg-background md:border-r md:border-b-0 md:bg-secondary dark:md:bg-secondary/30"
-				logo={{
-					src: ClerkLogo,
-					alt: "Clerk Logo",
-				}}
-			/>
-
-			<LogoCard
-				className="border-r"
-				logo={{
-					src: ClaudeLogo,
-					alt: "Claude AI Logo",
-				}}
-			/>
-
-			<LogoCard
-				className="bg-secondary dark:bg-secondary/30"
-				logo={{
-					src: VercelLogo,
-					alt: "Vercel Logo",
-				}}
-			/>
-		</div>
-	);
+	return <Component aria-label={logo.alt} className={logoClassName} role="img" />;
 }
 
-type LogoCardProps = React.ComponentProps<"div"> & {
-	logo: Logo;
-};
+const logos: Logo[] = [
+	{ Component: VercelLogo, alt: "Vercel Logo" },
+	{ Component: NextjsLogo, alt: "Next.js Logo" },
+	{ Component: OpenAILogo, alt: "OpenAI Logo" },
+	{ Component: ResendLogo, alt: "Resend Logo" },
+	{ Component: GithubLogo, alt: "GitHub Logo" },
+	{ Component: ClaudeLogo, alt: "Claude AI Logo" },
+	{ Component: IBMLogo, alt: "IBM Logo" },
+	{ Component: ClerkLogo, alt: "Clerk Logo" },
+];
 
-function LogoCard({ logo, className, children, ...props }: LogoCardProps) {
+export function LogoCloud() {
 	return (
-		<div
-			className={cn(
-				"flex items-center justify-center bg-background px-4 py-8 md:p-8",
-				className
-			)}
-			{...props}
-		>
-			<img
-				alt={logo.alt}
-				className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
-				height="auto"
-				src={getLogoSrc(logo.src)}
-				width="auto"
-			/>
-			{children}
+		<div className="relative flex flex-wrap items-center justify-center gap-x-8 gap-y-8 py-6 sm:gap-x-12 sm:gap-y-10">
+			{logos.map((logo) => (
+				<LogoAsset
+					className="pointer-events-none h-8 w-32 select-none text-foreground sm:h-9 sm:w-36"
+					key={logo.alt}
+					logo={logo}
+				/>
+			))}
 		</div>
 	);
 }

package/registry/default/blocks/hero2/components/mobile-nav.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Portal, PortalBackdrop } from "./ui/portal";
 import { navLinks } from "./header";
-import { XIcon, MenuIcon } from "lucide-react";
+import { X as XIcon, Menu as MenuIcon } from "love-ui/icons";
 
 export function MobileNav() {
 	const [open, setOpen] = React.useState(false);

package/registry/default/blocks/hero3/components/hero.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import { Button } from "@/registry/default/ui/button";
-import { ArrowRightIcon, PhoneCallIcon } from "lucide-react";
+import { ArrowRight as ArrowRightIcon, PhoneCall as PhoneCallIcon } from "love-ui/icons";
 
 export function HeroSection() {
 	return (

package/registry/default/blocks/hero3/components/logo-cloud.tsx

@@ -1,67 +1,51 @@
-import ClaudeLogo from "./logos/claude-wordmark.svg";
-import ClerkLogo from "./logos/clerk-wordmark.svg";
-import GithubLogo from "./logos/github-wordmark.svg";
-import NvidiaLogo from "./logos/nvidia-wordmark.svg";
-import OpenAILogo from "./logos/openai-wordmark.svg";
-import SupabaseLogo from "./logos/supabase-wordmark.svg";
-import TursoLogo from "./logos/turso-wordmark.svg";
-import VercelLogo from "./logos/vercel-wordmark.svg";
+import type { ElementType, SVGProps } from "react";
+import {
+	ClaudeAIWordmark as ClaudeLogo,
+	ClerkWordmark as ClerkLogo,
+	GithubWordmark as GithubLogo,
+	IBMWordmark as IBMLogo,
+	NextjsWordmark as NextjsLogo,
+	OpenAIWordmark as OpenAILogo,
+	ResendWordmark as ResendLogo,
+	VercelWordmark as VercelLogo,
+} from "love-ui/logos";
 
-type LogoSource = { src: string } | string;
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
-const getLogoSrc = (source: LogoSource) =>
-	typeof source === "string" ? source : source.src;
+type Logo = {
+	Component: LogoComponent;
+	alt: string;
+	className?: string;
+};
+
+function LogoAsset({ logo, className }: { logo: Logo; className: string }) {
+	const Component = logo.Component;
+	const logoClassName = [className, logo.className].filter(Boolean).join(" ");
+
+	return <Component aria-label={logo.alt} className={logoClassName} role="img" />;
+}
+
+const logos: Logo[] = [
+	{ Component: VercelLogo, alt: "Vercel Logo" },
+	{ Component: NextjsLogo, alt: "Next.js Logo" },
+	{ Component: OpenAILogo, alt: "OpenAI Logo" },
+	{ Component: ResendLogo, alt: "Resend Logo" },
+	{ Component: GithubLogo, alt: "GitHub Logo" },
+	{ Component: ClaudeLogo, alt: "Claude AI Logo" },
+	{ Component: IBMLogo, alt: "IBM Logo" },
+	{ Component: ClerkLogo, alt: "Clerk Logo" },
+];
 
 export function LogoCloud() {
 	return (
-		<div className="relative flex flex-wrap items-center justify-center gap-x-10 gap-y-8 py-6 sm:gap-x-12 sm:gap-y-12">
+		<div className="relative flex flex-wrap items-center justify-center gap-x-8 gap-y-8 py-6 sm:gap-x-12 sm:gap-y-10">
 			{logos.map((logo) => (
-				<img
-					alt={logo.alt}
-					className="pointer-events-none h-5 w-fit select-none dark:brightness-0 dark:invert"
-					height="auto"
+				<LogoAsset
+					className="pointer-events-none h-8 w-32 select-none text-foreground sm:h-9 sm:w-36"
 					key={logo.alt}
-					loading="lazy"
-					src={getLogoSrc(logo.src)}
-					width="auto"
+					logo={logo}
 				/>
 			))}
 		</div>
 	);
 }
-
-const logos = [
-	{
-		src: VercelLogo,
-		alt: "Vercel Logo",
-	},
-	{
-		src: SupabaseLogo,
-		alt: "Supabase Logo",
-	},
-	{
-		src: OpenAILogo,
-		alt: "OpenAI Logo",
-	},
-	{
-		src: TursoLogo,
-		alt: "Turso Logo",
-	},
-
-	{
-		src: GithubLogo,
-		alt: "GitHub Logo",
-	},
-	{
-		src: ClaudeLogo,
-		alt: "Claude AI Logo",
-	},
-	{
-		src: NvidiaLogo,
-		alt: "Nvidia Logo",
-	},
-	{
-		src: ClerkLogo,
-		alt: "Clerk Logo",
-	},
-];

package/registry/default/blocks/hero3/components/mobile-nav.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Portal, PortalBackdrop } from "./ui/portal";
 import { navLinks } from "./header";
-import { XIcon, MenuIcon } from "lucide-react";
+import { X as XIcon, Menu as MenuIcon } from "love-ui/icons";
 
 export function MobileNav() {
 	const [open, setOpen] = React.useState(false);

package/registry/default/blocks/integrations1/components/integrations.tsx

@@ -1,43 +1,49 @@
+import type { ElementType, SVGProps } from "react";
+import {
+	Cursor as CursorLogo,
+	Neon as NeonLogo,
+	Notion as NotionLogo,
+	Vercel as VercelLogo,
+} from "love-ui/logos";
+
 import { cn } from "@/lib/utils";
 import { Button } from "@/registry/default/ui/button";
-import { ArrowUpRightIcon } from "lucide-react";
-import NotionLogo from "./logos/notion.svg";
-import SupabaseLogo from "./logos/supabase.svg";
-import VercelLogo from "./logos/vercel.svg";
-import CursorLogo from "./logos/cursor.svg";
+import { ArrowUpRight as ArrowUpRightIcon } from "love-ui/icons";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type Integration = {
-	src: { src: string } | string;
+	Component: LogoComponent;
 	name: string;
 	description: string;
 	isInvertable?: boolean;
 };
 
-const getLogoSrc = (source: Integration["src"]) =>
-	typeof source === "string" ? source : source.src;
-
 const data: Integration[] = [
 	{
-		src: VercelLogo,
+		Component: VercelLogo,
 		name: "Vercel",
-		description: "Deploy LoveUI examples, docs, and product pages with fast previews.",
+		description:
+			"Deploy LoveUI examples, docs, and product pages with fast previews.",
 		isInvertable: true,
 	},
 	{
-		src: CursorLogo,
+		Component: CursorLogo,
 		name: "Cursor",
-		description: "Use LoveUI Skills to guide AI-assisted interface work in your editor.",
+		description:
+			"Use LoveUI Skills to guide AI-assisted interface work in your editor.",
 		isInvertable: true,
 	},
 	{
-		src: SupabaseLogo,
-		name: "Supabase",
-		description: "Pair LoveUI app screens with auth, storage, and product data.",
+		Component: NeonLogo,
+		name: "Neon",
+		description: "Pair LoveUI app screens with serverless Postgres and product data.",
 	},
 	{
-		src: NotionLogo,
+		Component: NotionLogo,
 		name: "Notion",
-		description: "Document component decisions, block usage, and product patterns.",
+		description:
+			"Document component decisions, block usage, and product patterns.",
 	},
 ];
 
@@ -55,15 +61,9 @@ export function Integrations() {
 					)}
 					key={item.name}
 				>
-					<img
-						alt={item.name}
-						className={cn(
-							"pointer-events-none size-8 shrink-0 select-none object-contain",
-							item.isInvertable && "dark:invert"
-						)}
-						height={32}
-						src={getLogoSrc(item.src)}
-						width={32}
+					<LogoAsset
+						className="pointer-events-none size-9 shrink-0 select-none object-contain"
+						integration={item}
 					/>
 					<div className="space-y-1">
 						<h3 className="font-semibold">{item.name}</h3>
@@ -84,3 +84,21 @@ export function Integrations() {
 		</div>
 	);
 }
+
+function LogoAsset({
+	integration,
+	className,
+}: {
+	integration: Integration;
+	className: string;
+}) {
+	const Component = integration.Component;
+
+	return (
+		<Component
+			aria-label={integration.name}
+			className={cn(className, integration.isInvertable && "dark:invert")}
+			role="img"
+		/>
+	);
+}

package/registry/default/blocks/integrations2/components/integrations.tsx

@@ -1,33 +1,36 @@
+import type { ElementType, SVGProps } from "react";
+import {
+	Cursor as CursorLogo,
+	GoogleGmail as GmailLogo,
+	Neon as NeonLogo,
+	Notion as NotionLogo,
+	PlanetScale as PlanetscaleLogo,
+	Vercel as VercelLogo,
+} from "love-ui/logos";
+
 import { cn } from "@/lib/utils";
 import { DecorIcon } from "./decor-icon";
-import CursorLogo from "./logos/cursor.svg";
-import GmailLogo from "./logos/gmail.svg";
-import NotionLogo from "./logos/notion.svg";
-import SupabaseLogo from "./logos/supabase.svg";
-import VercelLogo from "./logos/vercel.svg";
-import PlanetscaleLogo from "./logos/planetscale.svg";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type Integration = {
-	src: { src: string } | string;
+	Component: LogoComponent;
 	name: string;
 	description: string;
 	isInvertable?: boolean;
 	icon?: React.ReactNode;
 };
 
-const getLogoSrc = (source: Integration["src"]) =>
-	typeof source === "string" ? source : source.src;
-
 const data: Integration[] = [
 	{
-		src: VercelLogo,
+		Component: VercelLogo,
 		name: "Vercel",
 		description:
 			"Deploy LoveUI block previews, docs, and production product pages.",
 		isInvertable: true,
 	},
 	{
-		src: CursorLogo,
+		Component: CursorLogo,
 		name: "Cursor",
 		description:
 			"Use LoveUI Skills to give AI agents concrete interface guidance.",
@@ -35,29 +38,26 @@ const data: Integration[] = [
 		icon: <DecorIcon position="bottom-left" />,
 	},
 	{
-		src: SupabaseLogo,
-		name: "Supabase",
+		Component: NeonLogo,
+		name: "Neon",
 		description:
-			"Connect polished LoveUI surfaces to auth, storage, and application data.",
+			"Connect polished LoveUI surfaces to serverless Postgres and application data.",
 	},
 	{
-		src: PlanetscaleLogo,
+		Component: PlanetscaleLogo,
 		name: "PlanetScale",
-		description:
-			"Back product screens with schema changes your team can review.",
+		description: "Back product screens with schema changes your team can review.",
 		isInvertable: true,
 	},
 	{
-		src: NotionLogo,
+		Component: NotionLogo,
 		name: "Notion",
-		description:
-			"Track component decisions, block adoption, and design system notes.",
+		description: "Track component decisions, block adoption, and design system notes.",
 	},
 	{
-		src: GmailLogo,
+		Component: GmailLogo,
 		name: "Gmail",
-		description:
-			"Send product notifications from interfaces built with LoveUI forms.",
+		description: "Send product notifications from interfaces built with LoveUI forms.",
 		icon: <DecorIcon position="top-left" />,
 	},
 ];
@@ -85,9 +85,7 @@ function IntegrationCard({
 	className,
 	children,
 	...props
-}: React.ComponentProps<"div"> & {
-	integration: Integration;
-}) {
+}: React.ComponentProps<"div"> & { integration: Integration }) {
 	return (
 		<div
 			className={cn(
@@ -96,15 +94,9 @@ function IntegrationCard({
 			)}
 			{...props}
 		>
-			<img
-				alt={integration.name}
-				className={cn(
-					"pointer-events-none size-8 shrink-0 select-none object-contain",
-					integration.isInvertable && "dark:invert"
-				)}
-				height={32}
-				src={getLogoSrc(integration.src)}
-				width={32}
+			<LogoAsset
+				className="pointer-events-none size-9 shrink-0 select-none object-contain"
+				integration={integration}
 			/>
 			<div className="space-y-1">
 				<h3 className="font-semibold">{integration.name}</h3>
@@ -116,3 +108,21 @@ function IntegrationCard({
 		</div>
 	);
 }
+
+function LogoAsset({
+	integration,
+	className,
+}: {
+	integration: Integration;
+	className: string;
+}) {
+	const Component = integration.Component;
+
+	return (
+		<Component
+			aria-label={integration.name}
+			className={cn(className, integration.isInvertable && "dark:invert")}
+			role="img"
+		/>
+	);
+}