love-ui 1.2.21 → 1.2.23

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

@@ -19,7 +19,7 @@ type LogoType = {
 	alt: string;
 	isInvertable?: boolean;
 };
-type TileData = { row: number; col: number; logo?: LogoType };
+type TileData = { x: number; y: number; logo: LogoType };
 
 export function Integrations() {
 	return (
@@ -37,19 +37,11 @@ export function Integrations() {
 					<Button size="sm">Explore LoveUI integrations</Button>
 				</div>
 			</div>
-			<div className="place-items-end">
-				<div className="relative size-80">
-					<div
-						className={cn(
-							"absolute inset-0 size-full",
-							"bg-[linear-gradient(to_right,theme(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,theme(--color-border)_1px,transparent_1px)]",
-							"bg-size-[64px_64px]",
-							"mask-[radial-gradient(ellipse_at_center,black,black,transparent)]"
-						)}
-					/>
+			<div className="place-items-center px-8 py-12">
+				<div className="relative h-52 w-full">
 					{tiles.map((tile) => (
 						<IntegrationCard
-							key={String(tile.row) + "_" + String(tile.col)}
+							key={String(tile.x) + "_" + String(tile.y)}
 							{...tile}
 						/>
 					))}
@@ -60,14 +52,17 @@ export function Integrations() {
 	);
 }
 
-function IntegrationCard({ row, col, logo }: TileData) {
+function IntegrationCard({ x, y, logo }: TileData) {
 	return (
 		<div
 			className={cn(
-				"absolute flex size-16 items-center justify-center",
-				logo ? "bg-secondary/40" : ""
+				"absolute z-10 flex size-14 items-center justify-center rounded-md border",
+				logo ? "bg-card shadow-xs" : ""
 			)}
-			style={{ left: col * 64, top: row * 64 }}
+			style={{
+				left: `calc(${x}% - 1.75rem)`,
+				top: `calc(${y}% - 1.75rem)`,
+			}}
 		>
 			{logo && (
 				<LogoAsset
@@ -91,7 +86,7 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={logo.alt}
-			className={cn(className, logo.isInvertable && "dark:invert")}
+			className={cn(className, logo.isInvertable && "text-foreground")}
 			role="img"
 		/>
 	);
@@ -99,39 +94,35 @@ function LogoAsset({
 
 const tiles: TileData[] = [
 	{
-		row: 0,
-		col: 1,
+		x: 14,
+		y: 22,
 		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
 	{
-		row: 0,
-		col: 3,
+		x: 60,
+		y: 22,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{ row: 1, col: 0 },
-	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
-	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
+	{ x: 36, y: 42, logo: { Component: NeonLogo, alt: "Neon Logo" } },
+	{ x: 84, y: 42, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
-		row: 2,
-		col: 1,
+		x: 14,
+		y: 64,
 		logo: {
 			Component: PlanetscaleLogo,
 			alt: "Planetscale Logo",
 			isInvertable: true,
 		},
 	},
-	{ row: 2, col: 3 },
-	{ row: 3, col: 0 },
-	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
+	{ x: 36, y: 84, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
-		row: 3,
-		col: 4,
+		x: 84,
+		y: 82,
 		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
-	{ row: 4, col: 1, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{
-		row: 4,
-		col: 3,
+		x: 60,
+		y: 64,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
 ];

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

@@ -32,7 +32,7 @@ export function Integrations() {
 				</p>
 			</div>
 			<div className="place-items-end">
-				<div className="mask-[radial-gradient(ellipse_at_center,black,black,transparent)] relative size-90">
+				<div className=" relative size-90">
 					{tiles.map((tile) => (
 						<IntegrationCard
 							key={String(tile.row) + "_" + String(tile.col)}
@@ -76,7 +76,7 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={logo.alt}
-			className={cn(className, logo.isInvertable && "dark:invert")}
+			className={cn(className, logo.isInvertable && "text-foreground")}
 			role="img"
 		/>
 	);
@@ -93,7 +93,6 @@ const tiles: TileData[] = [
 		col: 3,
 		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{ row: 1, col: 0 },
 	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
@@ -105,8 +104,6 @@ const tiles: TileData[] = [
 			isInvertable: true,
 		},
 	},
-	{ row: 2, col: 3 },
-	{ row: 3, col: 0 },
 	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
 		row: 3,

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

@@ -19,18 +19,17 @@ type Integration = {
 	Component?: LogoComponent;
 	name: string;
 	isInvertable?: boolean;
+	logoClassName?: string;
 };
 const data: Integration[] = [
-	{ name: "Empty 1" },
 	{ name: "Vercel", Component: VercelLogo, isInvertable: true },
 	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
 	{ name: "Neon", Component: NeonLogo },
 	{ name: "PlanetScale", Component: PlanetscaleLogo, isInvertable: true },
-	{ name: "Notion", Component: NotionLogo },
+	{ name: "Notion", Component: NotionLogo, logoClassName: "text-black" },
 	{ name: "Gmail", Component: GmailLogo },
 	{ name: "Polar", Component: PolarLogo },
 	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
-	{ name: "Empty 2" },
 ];
 
 export function Integrations() {
@@ -45,7 +44,7 @@ export function Integrations() {
 				</p>
 			</div>
 			<div className="flex flex-col justify-center rounded-full border bg-secondary dark:bg-secondary/10">
-				<div className="mask-l-from-90 mask-r-from-90 flex items-center justify-center -space-x-4 p-1">
+				<div className=" flex items-center justify-center -space-x-2 p-1">
 					{data.map((item, index) => (
 						<div
 							className={cn(
@@ -88,7 +87,11 @@ function LogoAsset({
 	return (
 		<Component
 			aria-label={integration.name}
-			className={cn(className, integration.isInvertable && "dark:invert")}
+			className={cn(
+				className,
+				integration.isInvertable && "text-foreground",
+				integration.logoClassName
+			)}
 			role="img"
 		/>
 	);

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

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/logo-cloud-3/app/page.tsx

@@ -9,9 +9,9 @@ export default function Page() {
 					<br />
 					<span className="font-semibold">Used by the leaders.</span>
 				</h2>
-				<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] mx-auto my-5 h-px max-w-sm bg-border" />
+				<div className=" mx-auto my-5 h-px max-w-sm bg-border" />
 				<LogoCloud />
-				<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] mt-5 h-px bg-border" />
+				<div className=" mt-5 h-px bg-border" />
 			</section>
 		</div>
 	);

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

@@ -39,7 +39,7 @@ const logos: Logo[] = [
 
 export function LogoCloud() {
 	return (
-		<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] overflow-hidden py-5">
+		<div className=" overflow-hidden py-5">
 			<InfiniteSlider gap={56} reverse speed={80} speedOnHover={25}>
 				{logos.map((logo) => (
 					<LogoAsset

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

@@ -42,7 +42,7 @@ const logos: Logo[] = [
 
 export function LogoCloud() {
 	return (
-		<div className="relative border-x border-y bg-linear-to-r from-secondary via-transparent to-secondary py-7">
+		<div className="relative overflow-hidden py-7">
 			<InfiniteSlider gap={56} reverse speed={60} speedOnHover={20}>
 				{logos.map((logo) => (
 					<LogoAsset

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

@@ -1,63 +1,57 @@
 "use client";
-import { cn } from "@/lib/utils";
-import { type HTMLMotionProps, motion } from "motion/react";
+import { motion, type HTMLMotionProps } from "motion/react";
 
-export const GRADIENT_ANGLES = {
-	top: 0,
-	right: 90,
-	bottom: 180,
-	left: 270,
+export const BLUR_DIRECTIONS = {
+	top: "to bottom",
+	right: "to left",
+	bottom: "to top",
+	left: "to right",
 };
 
 export type ProgressiveBlurProps = {
-	direction?: keyof typeof GRADIENT_ANGLES;
+	direction?: keyof typeof BLUR_DIRECTIONS;
 	blurLayers?: number;
 	className?: string;
 	blurIntensity?: number;
 } & HTMLMotionProps<"div">;
 
 export function ProgressiveBlur({
-	direction = "bottom",
+	direction = "left",
 	blurLayers = 8,
 	className,
-	blurIntensity = 0.25,
+	blurIntensity = 1,
+	style,
 	...props
 }: ProgressiveBlurProps) {
-	const layers = Math.max(blurLayers, 2);
-	const segmentSize = 1 / (blurLayers + 1);
+	const layers = Math.max(1, blurLayers);
+	const gradientDirection = BLUR_DIRECTIONS[direction];
 
 	return (
-		<div className={cn("relative", className)}>
+		<motion.div
+			aria-hidden="true"
+			className={className}
+			style={{ overflow: "hidden", ...style }}
+			{...props}
+		>
 			{Array.from({ length: layers }).map((_, index) => {
-				const angle = GRADIENT_ANGLES[direction];
-				const gradientStops = [
-					index * segmentSize,
-					(index + 1) * segmentSize,
-					(index + 2) * segmentSize,
-					(index + 3) * segmentSize,
-				].map(
-					(pos, posIndex) =>
-						`rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`
-				);
-
-				const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(
-					", "
-				)})`;
+				const blur = (index + 1) * blurIntensity * 2;
+				const coverage = ((layers - index) / layers) * 100;
+				const fadeEnd = Math.min(coverage + 16, 100);
+				const mask = `linear-gradient(${gradientDirection}, black 0%, black ${coverage}%, transparent ${fadeEnd}%)`;
 
 				return (
-					<motion.div
-						className="pointer-events-none absolute inset-0 rounded-[inherit]"
-						key={index}
+					<div
+						key={String(index)}
+						className="absolute inset-0"
 						style={{
-							maskImage: gradient,
-							WebkitMaskImage: gradient,
-							backdropFilter: `blur(${index * blurIntensity}px)`,
-							WebkitBackdropFilter: `blur(${index * blurIntensity}px)`,
+							backdropFilter: `blur(${blur}px)`,
+							WebkitBackdropFilter: `blur(${blur}px)`,
+							maskImage: mask,
+							WebkitMaskImage: mask,
 						}}
-						{...props}
 					/>
 				);
 			})}
-		</div>
+		</motion.div>
 	);
 }

package/registry/default/blocks/pricing1/components/decor-icon.tsx

@@ -2,44 +2,57 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const DecorIconVariants = cva(
-	"pointer-events-none absolute z-1 size-5 shrink-0 stroke-1 stroke-muted-foreground",
-	{
-		variants: {
-			position: {
-				"top-left":
-					"top-0 left-0 -translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"top-right":
-					"top-0 right-0 translate-x-[calc(50%+0.5px)] -translate-y-[calc(50%+0.5px)]",
-				"bottom-right":
-					"right-0 bottom-0 translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-				"bottom-left":
-					"bottom-0 left-0 -translate-x-[calc(50%+0.5px)] translate-y-[calc(50%+0.5px)]",
-			},
-		},
-		defaultVariants: {
-			position: "top-left",
-		},
-	}
+    "pointer-events-none absolute z-1 size-4 shrink-0 stroke-1 stroke-muted-foreground transition-transform",
+    {
+        variants: {
+            position: {
+                // We also rotate the SVG inside the variant so the bracket always points inward
+                "top-left":
+                    "top-0 left-0 -translate-x-1/2 -translate-y-1/2",
+                "top-right":
+                    "top-0 right-0 translate-x-1/2 -translate-y-1/2 rotate-90",
+                "bottom-right":
+                    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 rotate-180",
+                "bottom-left":
+                    "bottom-0 left-0 -translate-x-1/2 translate-y-1/2 -rotate-90",
+            },
+        },
+        defaultVariants: {
+            position: "top-left",
+        },
+    }
 );
 
 type DecorIconProps = React.ComponentProps<"svg"> &
-	VariantProps<typeof DecorIconVariants>;
+    VariantProps<typeof DecorIconVariants> & {
+        variant?: "bracket" | "dot" | "diagonal";
+    };
 
-export function DecorIcon({ position, className, ...props }: DecorIconProps) {
-	return (
-		<svg
-			aria-hidden="true"
-			className={cn(DecorIconVariants({ position, className }))}
-			fill="none"
-			stroke="currentColor"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-			viewBox="0 0 24 24"
-			xmlns="http://www.w3.org/2000/svg"
-			{...props}
-		>
-			<path d="M5 12h14" />
-			<path d="M12 5v14" />
-		</svg>
-	);
+export function DecorIcon({ position, variant = "bracket", className, ...props }: DecorIconProps) {
+    return (
+        <svg
+            aria-hidden="true"
+            className={cn(DecorIconVariants({ position, className }))}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            {/* OPTION 1: Corner Bracket (Default) */}
+            {variant === "bracket" && (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4H4v8" />
+            )}
+
+            {/* OPTION 2: Minimalist Dot (Change fill to currentColor in class if using this) */}
+            {variant === "dot" && (
+                <circle cx="12" cy="12" r="3" fill="currentColor" />
+            )}
+
+            {/* OPTION 3: Diagonal Accent Line */}
+            {variant === "diagonal" && (
+                <path strokeLinecap="round" d="M4 20L20 4" />
+            )}
+        </svg>
+    );
 }

package/registry/default/blocks/stats10/components/stats.tsx

@@ -138,8 +138,6 @@ export default function Stats10() {
       <dl className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full">
         {summary.map((item) => {
           const sanitizedName = sanitizeName(item.name);
-          const gradientId = `gradient-${sanitizedName}`;
-
           const color =
             item.changeType === "positive" ? "hsl(142.1 76.2% 36.3%)" : "hsl(0 72.2% 50.6%)";
 
@@ -188,17 +186,11 @@ export default function Stats10() {
                     }}
                   >
                     <AreaChart data={data}>
-                      <defs>
-                        <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-                          <stop offset="5%" stopColor={color} stopOpacity={0.3} />
-                          <stop offset="95%" stopColor={color} stopOpacity={0} />
-                        </linearGradient>
-                      </defs>
                       <XAxis dataKey="date" hide={true} />
                       <Area
                         dataKey={item.name}
                         stroke={color}
-                        fill={`url(#${gradientId})`}
+                        fill={color}
                         fillOpacity={0.4}
                         strokeWidth={1.5}
                         type="monotone"

package/registry/default/blocks/testimonials1/components/logo.tsx

@@ -7,21 +7,10 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
 		xmlns="http://www.w3.org/2000/svg"
 		{...props}
 	>
-		<defs>
-			<linearGradient id="loveui-blue" x1="0" x2="48" y1="0" y2="48">
-				<stop stopColor="#38A3FF" />
-				<stop offset="0.55" stopColor="#1266F1" />
-				<stop offset="1" stopColor="#0B3FD8" />
-			</linearGradient>
-
-			<linearGradient id="loveui-shine" x1="0" x2="1" y1="0" y2="1">
-				<stop stopColor="#FFFFFF" stopOpacity="0.9" />
-				<stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
-			</linearGradient>
-		</defs>
+		
 
 		<g transform="translate(0 0)">
-			<rect fill="url(#loveui-blue)" height="48" rx="12" width="48" x="0" y="0" />
+			<rect fill="#1266F1" height="48" rx="12" width="48" x="0" y="0" />
 
 			<path
 				d="
@@ -56,7 +45,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
         H18
         C19.7 29 21 27.7 21 25
         Z"
-				fill="url(#loveui-shine)"
+				fill="#BBD8FF"
 				opacity="0.5"
 			/>
 		</g>

package/registry/default/blocks/testimonials1/components/testimonials.tsx

@@ -18,7 +18,7 @@ export function TestimonialsSection() {
 				control of the code."
 			</blockquote>
 
-			<div className="mask-[linear-gradient(to_right,transparent,black,transparent)] mx-auto my-5 h-px w-full max-w-sm bg-border" />
+			<div className=" mx-auto my-5 h-px w-full max-w-sm bg-border" />
 
 			<figcaption className="flex flex-col items-center gap-5">
 				<div className="space-y-0.5 text-center">

package/registry/default/blocks/testimonials2/components/testimonials.tsx

@@ -16,7 +16,7 @@ export function TestimonialsSection() {
 				<MaskLine className="top-0 md:w-xl" orientation="horizontal" />
 				<MaskLine className="bottom-0 md:w-xl" orientation="horizontal" />
 
-				<Avatar className="mask-[radial-gradient(circle,black_60%,transparent)] size-24 rounded-none *:rounded-none md:size-32">
+				<Avatar className=" size-24 rounded-none *:rounded-none md:size-32">
 					<AvatarImage
 						alt="Connor Love's profile picture"
 						src="https://github.com/loveconnor.png"
@@ -54,9 +54,9 @@ export function MaskLine({
 			className={cn(
 				"absolute bg-foreground/20",
 				orientation === "vertical" &&
-					"mask-t-from-80% mask-b-from-80% -inset-y-1/2 w-px",
+					" -inset-y-1/2 w-px",
 				orientation === "horizontal" &&
-					"mask-l-from-80% mask-r-from-80% -inset-x-1/2 h-px",
+					" -inset-x-1/2 h-px",
 				className
 			)}
 			{...props}