love-ui 1.2.19 → 1.2.20

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

@@ -1,70 +1,55 @@
-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="grid grid-cols-2 rounded-lg bg-border shadow md:grid-cols-4">
 			{logos.map((logo) => (
 				<div
-					className="flex items-center justify-center rounded-lg border bg-background p-8"
+					className="flex min-h-28 items-center justify-center rounded-lg border bg-background p-6"
 					key={logo.alt}
 				>
-					<img
-						alt={logo.alt}
-						className="pointer-events-none block h-4 select-none md:h-5 dark:brightness-0 dark:invert"
-						height="auto"
-						loading="lazy"
-						src={getLogoSrc(logo.src)}
-						width="auto"
+					<LogoAsset
+						className="pointer-events-none h-9 w-36 select-none text-foreground md:h-11 md:w-44"
+						logo={logo}
 					/>
 				</div>
 			))}
 		</div>
 	);
 }
-
-const logos = [
-	{
-		src: NvidiaLogo,
-		alt: "Nvidia Logo",
-	},
-	{
-		src: SupabaseLogo,
-		alt: "Supabase Logo",
-	},
-	{
-		src: OpenAILogo,
-		alt: "OpenAI Logo",
-	},
-	{
-		src: TursoLogo,
-		alt: "Turso Logo",
-	},
-	{
-		src: VercelLogo,
-		alt: "Vercel Logo",
-	},
-	{
-		src: GithubLogo,
-		alt: "GitHub Logo",
-	},
-	{
-		src: ClaudeLogo,
-		alt: "Claude AI Logo",
-	},
-	{
-		src: ClerkLogo,
-		alt: "Clerk Logo",
-	},
-];

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

@@ -1,49 +1,56 @@
+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";
+
 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";
+
+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;
+
+	return (
+		<Component
+			aria-label={logo.alt}
+			className={cn(className, logo.className)}
+			role="img"
+		/>
+	);
+}
 
 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",
-				}}
+				logo={{ Component: NextjsLogo, alt: "Next.js Logo" }}
 			>
 				<DecorIcon className="z-10" position="bottom-right" />
 			</LogoCard>
 
 			<LogoCard
 				className="border-b md:border-r"
-				logo={{
-					src: SupabaseLogo,
-					alt: "Supabase Logo",
-				}}
+				logo={{ Component: ResendLogo, alt: "Resend Logo" }}
 			/>
 
 			<LogoCard
 				className="relative border-r border-b md:bg-secondary dark:md:bg-secondary/30"
-				logo={{
-					src: GithubLogo,
-					alt: "GitHub Logo",
-				}}
+				logo={{ Component: GithubLogo, alt: "GitHub Logo" }}
 			>
 				<DecorIcon className="z-10" position="bottom-right" />
 				<DecorIcon className="z-10 hidden md:block" position="bottom-left" />
@@ -51,44 +58,29 @@ export function LogoCloud() {
 
 			<LogoCard
 				className="relative border-b bg-secondary md:bg-background dark:bg-secondary/30 md:dark:bg-background"
-				logo={{
-					src: OpenAILogo,
-					alt: "OpenAI Logo",
-				}}
+				logo={{ Component: 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",
-				}}
+				logo={{ Component: IBMLogo, alt: "IBM 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",
-				}}
+				logo={{ Component: ClerkLogo, alt: "Clerk Logo" }}
 			/>
 
 			<LogoCard
 				className="border-r"
-				logo={{
-					src: ClaudeLogo,
-					alt: "Claude AI Logo",
-				}}
+				logo={{ Component: ClaudeLogo, alt: "Claude AI Logo" }}
 			/>
 
 			<LogoCard
 				className="bg-secondary dark:bg-secondary/30"
-				logo={{
-					src: VercelLogo,
-					alt: "Vercel Logo",
-				}}
+				logo={{ Component: VercelLogo, alt: "Vercel Logo" }}
 			/>
 		</div>
 	);
@@ -102,17 +94,14 @@ function LogoCard({ logo, className, children, ...props }: LogoCardProps) {
 	return (
 		<div
 			className={cn(
-				"flex items-center justify-center bg-background px-4 py-8 md:p-8",
+				"flex min-h-28 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"
+			<LogoAsset
+				className="pointer-events-none h-9 w-36 select-none text-foreground md:h-11 md:w-44"
+				logo={logo}
 			/>
 			{children}
 		</div>

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

@@ -1,69 +1,54 @@
 import { InfiniteSlider } from "./infinite-slider";
-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="mask-[linear-gradient(to_right,transparent,black,transparent)] overflow-hidden py-4">
-			<InfiniteSlider gap={42} reverse speed={80} speedOnHover={25}>
+		<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] overflow-hidden py-5">
+			<InfiniteSlider gap={56} reverse speed={80} speedOnHover={25}>
 				{logos.map((logo) => (
-					<img
-						alt={logo.alt}
-						className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
-						height="auto"
-						key={`logo-${logo.alt}`}
-						loading="lazy"
-						src={getLogoSrc(logo.src)}
-						width="auto"
+					<LogoAsset
+						className="pointer-events-none h-9 w-36 select-none text-foreground md:h-10 md:w-40"
+						key={logo.alt}
+						logo={logo}
 					/>
 				))}
 			</InfiniteSlider>
 		</div>
 	);
 }
-
-const logos = [
-	{
-		src: NvidiaLogo,
-		alt: "Nvidia Logo",
-	},
-	{
-		src: SupabaseLogo,
-		alt: "Supabase Logo",
-	},
-	{
-		src: OpenAILogo,
-		alt: "OpenAI Logo",
-	},
-	{
-		src: TursoLogo,
-		alt: "Turso Logo",
-	},
-	{
-		src: VercelLogo,
-		alt: "Vercel Logo",
-	},
-	{
-		src: GithubLogo,
-		alt: "GitHub Logo",
-	},
-	{
-		src: ClaudeLogo,
-		alt: "Claude AI Logo",
-	},
-	{
-		src: ClerkLogo,
-		alt: "Clerk Logo",
-	},
-];

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

@@ -2,33 +2,53 @@
 import { InfiniteSlider } from "./infinite-slider";
 // https://motion-primitives.com/docs/progressive-blur
 import { ProgressiveBlur } from "./progressive-blur";
-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 border-x border-y bg-linear-to-r from-secondary via-transparent to-secondary py-6">
-			<InfiniteSlider gap={42} reverse speed={60} speedOnHover={20}>
+		<div className="relative border-x border-y bg-linear-to-r from-secondary via-transparent to-secondary py-7">
+			<InfiniteSlider gap={56} reverse speed={60} speedOnHover={20}>
 				{logos.map((logo) => (
-					<img
-						alt={logo.alt}
-						className="pointer-events-none h-4 select-none md:h-5 dark:brightness-0 dark:invert"
-						height="auto"
-						key={`logo-${logo.alt}`}
-						loading="lazy"
-						src={getLogoSrc(logo.src)}
-						width="auto"
+					<LogoAsset
+						className="pointer-events-none h-9 w-36 select-none text-foreground md:h-10 md:w-40"
+						key={logo.alt}
+						logo={logo}
 					/>
 				))}
 			</InfiniteSlider>
@@ -46,38 +66,3 @@ export function LogoCloud() {
 		</div>
 	);
 }
-
-const logos = [
-	{
-		src: NvidiaLogo,
-		alt: "Nvidia Logo",
-	},
-	{
-		src: SupabaseLogo,
-		alt: "Supabase Logo",
-	},
-	{
-		src: OpenAILogo,
-		alt: "OpenAI Logo",
-	},
-	{
-		src: TursoLogo,
-		alt: "Turso Logo",
-	},
-	{
-		src: VercelLogo,
-		alt: "Vercel Logo",
-	},
-	{
-		src: GithubLogo,
-		alt: "GitHub Logo",
-	},
-	{
-		src: ClaudeLogo,
-		alt: "Claude AI Logo",
-	},
-	{
-		src: ClerkLogo,
-		alt: "Clerk Logo",
-	},
-];

package/registry/default/blocks/logo-cloud-5/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/onboarding1/components/onboarding.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import {
-  ArchiveIcon,
-  ChevronRightIcon,
-  CircleCheckIcon,
-  CircleDashedIcon,
-  MailIcon,
-  MoreHorizontalIcon,
-} from 'lucide-react';
+  Archive as ArchiveIcon,
+  ChevronRight as ChevronRightIcon,
+  CircleCheck as CircleCheckIcon,
+  CircleDashed as CircleDashedIcon,
+  Mail as MailIcon,
+  Ellipsis as MoreHorizontalIcon,
+} from 'love-ui/icons';
 import { useState } from 'react';
 import { Button } from '@/registry/default/ui/button';
 import { Collapsible, CollapsibleContent } from '@/registry/default/ui/collapsible';

package/registry/default/blocks/onboarding2/components/onboarding.tsx

@@ -1,21 +1,31 @@
 'use client';
 
 import {
-  CircleCheckIcon,
-  FolderIcon,
-  PlugIcon,
-  RocketIcon,
-  UsersIcon,
-  type LucideIcon,
-} from 'lucide-react';
-import { useState } from 'react';
+  CircleCheck as CircleCheckIcon,
+  Folder as FolderIcon,
+  Plug as PlugIcon,
+  Rocket as RocketIcon,
+  Users as UsersIcon,
+} from 'love-ui/icons';
+import {
+  useState,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  type SVGProps,
+} from 'react';
 import { Button } from '@/registry/default/ui/button';
 import { cn } from '@/lib/utils';
 
+type IconComponent = ForwardRefExoticComponent<
+  SVGProps<SVGSVGElement> &
+    { size?: number | string; strokeWidth?: number } &
+    RefAttributes<SVGSVGElement>
+>;
+
 interface StepData {
   title: string;
   description: string;
-  icon: LucideIcon;
+  icon: IconComponent;
   actionLabel: string;
 }
 

package/registry/default/blocks/onboarding3/components/onboarding.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { CircleCheckIcon } from 'lucide-react';
+import { CircleCheck as CircleCheckIcon } from 'love-ui/icons';
 import { useState } from 'react';
 import { Progress } from '@/registry/default/ui/progress';
 import { cn } from '@/lib/utils';

package/registry/default/blocks/onboarding4/components/onboarding.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import {
-  ChartBarIcon,
-  CircleCheckIcon,
-  Code2Icon,
-  DatabaseIcon,
-  SlidersHorizontalIcon,
-} from 'lucide-react';
+  ChartBar as ChartBarIcon,
+  CircleCheck as CircleCheckIcon,
+  Code as Code2Icon,
+  Database as DatabaseIcon,
+  SlidersHorizontal as SlidersHorizontalIcon,
+} from 'love-ui/icons';
 import { useState } from 'react';
 import {
   Accordion,