love-ui 1.2.21 → 1.2.23

package/dist/mcp-server.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import{Ha as t,e as o,ia as n}from"./chunk-VDMHIXDM.js";import{StdioServerTransport as e}from"@modelcontextprotocol/sdk/server/stdio.js";async function a(){try{let r=new e;await t.connect(r)}catch(r){o.break(),n(r)}}a();
+import{Na as t,f as o,oa as n}from"./chunk-CH2CHRA7.js";import{StdioServerTransport as e}from"@modelcontextprotocol/sdk/server/stdio.js";async function a(){try{let r=new e;await t.connect(r)}catch(r){o.break(),n(r)}}a();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "love-ui",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "private": false,
   "license": "MIT",
   "type": "module",

package/registry/default/blocks/404-2/components/not-found.tsx

@@ -13,7 +13,7 @@ export function NotFoundPage() {
 		<div className="relative flex min-h-screen w-full items-center justify-center overflow-hidden">
 			<Empty>
 				<EmptyHeader>
-					<EmptyTitle className="mask-b-from-20% mask-b-to-80% font-extrabold text-9xl">
+					<EmptyTitle className=" font-extrabold text-9xl">
 						404
 					</EmptyTitle>
 					<EmptyDescription className="-mt-8 text-nowrap text-foreground/80">

package/registry/default/blocks/auth1/components/auth-page.tsx

@@ -1,18 +1,11 @@
 import { Github as GithubIcon, GoogleIcon } from "love-ui/logos";
 import { Logo } from "./logo";
-import { Particles } from "./particles";
 import { Button } from "@/registry/default/ui/button";
 import { ChevronLeft as ChevronLeftIcon } from "love-ui/icons";
 
 export function AuthPage() {
 	return (
 		<div className="relative w-full md:h-screen md:overflow-hidden">
-			<Particles
-				className="absolute inset-0"
-				color="#666666"
-				ease={20}
-				quantity={120}
-			/>
 			<div className="relative mx-auto flex min-h-screen max-w-5xl flex-col justify-center px-8">
 				<Button asChild className="absolute top-4 left-4" variant="ghost">
 					<a href="#">

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

@@ -6,18 +6,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <defs>
-    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
-      <stop stopColor="#38A3FF" />
-      <stop offset="0.55" stopColor="#1266F1" />
-      <stop offset="1" stopColor="#0B3FD8" />
-    </linearGradient>
-
-    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
-      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
-      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
-    </linearGradient>
-  </defs>
+  
 
   <g transform="translate(0 0)">
     <rect
@@ -26,7 +15,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
       width="48"
       height="48"
       rx="12"
-      fill="url(#loveui-blue)"
+      fill="#1266F1"
     />
 
     <path
@@ -69,7 +58,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/auth2/components/auth.tsx

@@ -16,7 +16,7 @@ export function AuthPage() {
 			<div
 				className={cn(
 					"relative flex w-full max-w-sm flex-col justify-between p-6 md:p-8",
-					"dark:bg-[radial-gradient(50%_80%_at_20%_0%,--theme(--color-foreground/.1),transparent)]"
+					""
 				)}
 			>
 				<div className="absolute -inset-y-6 -left-px w-px bg-border" />

package/registry/default/blocks/auth2/components/ui/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/auth3/components/logo.tsx

@@ -6,18 +6,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
 >
-  <defs>
-    <linearGradient id="loveui-blue" x1="0" y1="0" x2="48" y2="48">
-      <stop stopColor="#38A3FF" />
-      <stop offset="0.55" stopColor="#1266F1" />
-      <stop offset="1" stopColor="#0B3FD8" />
-    </linearGradient>
-
-    <linearGradient id="loveui-shine" x1="0" y1="0" x2="1" y2="1">
-      <stop stopColor="#FFFFFF" stopOpacity="0.9" />
-      <stop offset="1" stopColor="#BBD8FF" stopOpacity="0.4" />
-    </linearGradient>
-  </defs>
+  
 
   <g transform="translate(0 0)">
     <rect
@@ -26,7 +15,7 @@ export const Logo = (props: React.ComponentProps<"svg">) => (
       width="48"
       height="48"
       rx="12"
-      fill="url(#loveui-blue)"
+      fill="#1266F1"
     />
 
     <path
@@ -69,7 +58,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/auth3/components/ui/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/contact5/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/cta-3/components/cta.tsx

@@ -4,7 +4,7 @@ import { ArrowRight as ArrowRightIcon } from "love-ui/icons";
 
 export function CallToAction() {
 	return (
-		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-4 border-y px-4 py-8 dark:bg-[radial-gradient(35%_80%_at_25%_0%,--theme(--color-foreground/.08),transparent)]">
+		<div className="relative mx-auto flex w-full max-w-3xl flex-col justify-between gap-y-4 border-y px-4 py-8">
 			<DecorIcon className="size-4" position="top-left" />
 			<DecorIcon className="size-4" position="top-right" />
 			<DecorIcon className="size-4" position="bottom-left" />

package/registry/default/blocks/cta-3/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/cta-5/components/cta.tsx

@@ -42,25 +42,19 @@ export function CallToAction() {
 					<img
 						alt="Avatar 01"
 						height={24}
-						src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=72"
+						src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 					<img
 						alt="Avatar 02"
 						height={24}
-						src="https://images.unsplash.com/photo-1485206412256-701ccc5b93ca?q=80&w=72"
+						src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 					<img
 						alt="Avatar 03"
 						height={24}
-						src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=72"
-						width={24}
-					/>
-					<img
-						alt="Avatar 04"
-						height={24}
-						src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?q=80&w=72"
+						src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
 						width={24}
 					/>
 				</div>

package/registry/default/blocks/faq-3/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>
+    );
 }