love-ui 1.2.22 → 1.2.23

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}

package/registry/default/blocks/testimonials3/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/testimonials3/components/testimonials.tsx

@@ -71,7 +71,6 @@ function TestimonialCard({
 		<figure
 			className={cn(
 				"relative flex flex-col justify-between gap-6 px-8 pt-8 pb-6 shadow-xs md:translate-y-[calc(3rem*var(--t-card-index))]",
-				"dark:bg-[radial-gradient(50%_80%_at_25%_0%,--theme(--color-foreground/.1),transparent)]",
 				className
 			)}
 			style={

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

@@ -155,7 +155,7 @@ function TestimonialsCard({
 			)}
 			{...props}
 		>
-			<div className="mask-[radial-gradient(farthest-side_at_top,white,transparent)] pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full">
+			<div className=" pointer-events-none absolute top-0 left-1/2 -mt-2 -ml-20 size-full">
 				<GridPattern
 					className="absolute inset-0 size-full stroke-border"
 					height={25}

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

@@ -114,7 +114,7 @@ export function TestimonialsSection() {
 				<div
 					className={cn(
 						"mt-10 flex max-h-160 justify-center gap-6 overflow-hidden",
-						"mask-[linear-gradient(to_bottom,transparent,black_25%,black_75%,transparent)]"
+						""
 					)}
 				>
 					<InfiniteSlider direction="vertical" speed={30} speedOnHover={15}>

package/registry/default/examples/preview-card-profile.tsx

@@ -5,11 +5,11 @@ import { PreviewCard, PreviewCardPopup, PreviewCardTrigger } from "@/registry/de
 export default function PreviewCardProfile() {
   return (
     <PreviewCard>
-      <PreviewCardTrigger render={<Button variant="ghost" />}>Morgan Chen</PreviewCardTrigger>
+      <PreviewCardTrigger render={<Button variant="ghost" />}>Connor Love</PreviewCardTrigger>
       <PreviewCardPopup>
         <div className="flex gap-3">
-          <Avatar><AvatarImage src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&fit=crop" alt="Morgan" /><AvatarFallback>MC</AvatarFallback></Avatar>
-          <div><div className="font-medium">Morgan Chen</div><p className="text-sm text-muted-foreground">Design systems engineer</p></div>
+          <Avatar><AvatarImage src="https://github.com/loveconnor" alt="Connor" /><AvatarFallback>CL</AvatarFallback></Avatar>
+          <div><div className="font-medium">Connor Love</div><p className="text-sm text-muted-foreground">Designer & Developer</p></div>
         </div>
       </PreviewCardPopup>
     </PreviewCard>

package/registry/default/ui/button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         outline:
           "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-accent/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
         secondary:
-          "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90",
+          "border-border bg-secondary text-secondary-foreground shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-secondary/80 data-pressed:bg-secondary/80 dark:border-secondary dark:shadow-none dark:not-disabled:not-active:not-data-pressed:before:shadow-none dark:hover:bg-secondary/90 dark:data-pressed:bg-secondary/90",
         destructive:
           "border-destructive bg-destructive text-white shadow-xs shadow-destructive/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-destructive/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
         "destructive-outline":

package/registry/default/ui/toggle.tsx

@@ -13,7 +13,8 @@ const toggleVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent",
+        default:
+          "border-transparent bg-transparent text-foreground shadow-none data-pressed:border-border data-pressed:bg-accent data-pressed:text-accent-foreground dark:data-pressed:border-transparent dark:data-pressed:bg-input/80",
         outline:
           "border-border bg-clip-padding shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:hover:bg-input/64 [&:is(:disabled,:active,[data-pressed])]:shadow-none",
       },