love-ui 1.2.17 → 1.2.18

package/registry/default/blocks/blogs2/components/grid-filler.tsx

@@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+
+type GridFillerProps = React.ComponentProps<"div"> & {
+	/**
+	 * The number of items in the grid.
+	 */
+	totalItems: number;
+	/**
+	 * Number of columns for small screens.
+	 */
+	smColumns?: number;
+	/**
+	 * Number of columns for medium screens.
+	 */
+	mdColumns?: number;
+	/**
+	 * Number of columns for large screens.
+	 */
+	lgColumns?: number;
+};
+
+export function GridFiller({
+	totalItems,
+	className,
+	smColumns = 2,
+	mdColumns,
+	lgColumns,
+	...props
+}: GridFillerProps) {
+	const actualMdColumns = mdColumns ?? smColumns;
+	const actualLgColumns = lgColumns ?? actualMdColumns;
+
+	// We need enough iterations to cover the maximum possible remainder.
+	// For N columns, the remainder can be at most N-1.
+	const maxFillers = Math.max(smColumns, actualMdColumns, actualLgColumns) - 1;
+
+	return (
+		<>
+			{Array.from({ length: maxFillers }).map((_, i) => {
+				const neededSm = (smColumns - (totalItems % smColumns)) % smColumns;
+				const neededMd =
+					(actualMdColumns - (totalItems % actualMdColumns)) % actualMdColumns;
+				const neededLg =
+					(actualLgColumns - (totalItems % actualLgColumns)) % actualLgColumns;
+
+				const showSm = i < neededSm ? "sm:block" : "sm:hidden";
+				const showMd = i < neededMd ? "md:block" : "md:hidden";
+				const showLg = i < neededLg ? "lg:block" : "lg:hidden";
+
+				if (
+					showSm === "sm:hidden" &&
+					showMd === "md:hidden" &&
+					showLg === "lg:hidden"
+				) {
+					return null;
+				}
+
+				return (
+					<div
+						className={cn(
+							"pointer-events-none hidden",
+							showSm,
+							showMd,
+							showLg,
+							className
+						)}
+						key={`filler-${i}`}
+						{...props}
+					/>
+				);
+			})}
+		</>
+	);
+}

package/registry/default/blocks/blogs3/app/page.tsx

@@ -0,0 +1,5 @@
+import { BlogsSection } from "../components/blogs";
+
+export default function DemoPage() {
+	return <BlogsSection />;
+}

package/registry/default/blocks/blogs3/components/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils"
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          "--ratio": ratio,
+        } as React.CSSProperties
+      }
+      className={cn("relative aspect-(--ratio)", className)}
+      {...props}
+    />
+  )
+}
+
+export { AspectRatio }

package/registry/default/blocks/blogs3/components/blogs.tsx

@@ -0,0 +1,224 @@
+import { cn } from "@/lib/utils";
+import { FullWidthDivider } from "./full-width-divider";
+import { LazyImage } from "./lazy-image";
+
+type BlogType = {
+	title: string;
+	href: string;
+	description: string;
+	author: string;
+	createdAt: string;
+	readTime: string;
+	image: string;
+};
+
+const wikimediaImage = (fileName: string, width = 900) =>
+	`https://commons.wikimedia.org/wiki/Special:Redirect/file/${encodeURIComponent(
+		fileName
+	)}?width=${width}`;
+
+const blogs: BlogType[] = [
+	{
+		title: "Why LoveUI Ships Components as Source",
+		href: "#",
+		description:
+			"How copied source gives product teams the confidence to inspect, change, and own their interface layer.",
+		image: wikimediaImage(
+			"University Hall, The Ohio State University (Columbus, Ohio).jpg"
+		),
+		createdAt: "2026-05-20",
+		author: "Connor Love",
+		readTime: "7 min read",
+	},
+	{
+		title: "Designing Blocks That Feel Ready",
+		href: "#",
+		description:
+			"The decisions behind LoveUI sections that look polished on day one and stay easy to reshape on day two.",
+		image: wikimediaImage("View of Ohio Stadium.jpg"),
+		createdAt: "2026-05-14",
+		author: "Connor Love",
+		readTime: "5 min read",
+	},
+	{
+		title: "Building Better Interfaces with AI Agents",
+		href: "#",
+		description:
+			"Why LoveUI includes agent skills with concrete design rules, implementation steps, and quality checks.",
+		image: wikimediaImage(
+			"Mirror Lake at The Ohio State University - DPLA - f1276865f9c52083353de2c6b0068290.jpg"
+		),
+		createdAt: "2026-04-29",
+		author: "Connor Love",
+		readTime: "6 min read",
+	},
+	{
+		title: "Composing Product Pages from Primitives",
+		href: "#",
+		description:
+			"How buttons, accordions, empty states, and layout helpers become complete LoveUI product sections.",
+		image: wikimediaImage(
+			"Thompson Library at The Ohio State University - DPLA - d4a313f4ce0cca7538bf0ea6508722ae.jpg"
+		),
+		createdAt: "2026-04-12",
+		author: "Connor Love",
+		readTime: "8 min read",
+	},
+	{
+		title: "Keeping Design Systems Close to the App",
+		href: "#",
+		description:
+			"LoveUI keeps components in your repo so teams can review, version, and adapt them with the rest of the product.",
+		image: wikimediaImage("Ohio State University-Ohio Stadium-Rotunda.jpg"),
+		createdAt: "2026-03-23",
+		author: "Connor Love",
+		readTime: "4 min read",
+	},
+	{
+		title: "What Makes a Registry Example Useful",
+		href: "#",
+		description:
+			"Examples should teach real composition patterns, not just show isolated visuals. That idea shapes LoveUI docs.",
+		image: wikimediaImage(
+			"The Spring and Mirror Lake at Ohio State University - DPLA - 238a754a6579c3fd1788745a85caaf4c (page 1).jpg"
+		),
+		createdAt: "2026-03-05",
+		author: "Connor Love",
+		readTime: "9 min read",
+	},
+	{
+		title: "From Component to Full Section",
+		href: "#",
+		description:
+			"The practical path from reusable primitives to CTA, FAQ, pricing, testimonial, and 404 blocks.",
+		image: wikimediaImage(
+			"Ohio Stadium at The Ohio State University - DPLA - fa20937cd54b73c1c34c09ac5d4d3e6d.jpg"
+		),
+		createdAt: "2026-02-18",
+		author: "Connor Love",
+		readTime: "10 min read",
+	},
+	{
+		title: "The Case for Owning Your UI",
+		href: "#",
+		description:
+			"When product details matter, editable source makes styling, behavior, and structure easier to reason about.",
+		image: wikimediaImage(
+			"Ohio State University - Thompson Library from First Floor.jpg"
+		),
+		createdAt: "2026-02-02",
+		author: "Connor Love",
+		readTime: "6 min read",
+	},
+	{
+		title: "Why Blocks Need Real Constraints",
+		href: "#",
+		description:
+			"LoveUI blocks are built around realistic copy, responsive behavior, and controls that work in product contexts.",
+		image: wikimediaImage("OSU Ohio Stadium.JPG"),
+		createdAt: "2026-01-22",
+		author: "Connor Love",
+		readTime: "7 min read",
+	},
+	{
+		title: "Making Components Easier to Customize",
+		href: "#",
+		description:
+			"A look at naming, file structure, and examples that help LoveUI components stay understandable after install.",
+		image: wikimediaImage("Ohio Stadium (37516165921).jpg", 1200),
+		createdAt: "2026-01-09",
+		author: "Connor Love",
+		readTime: "5 min read",
+	},
+	{
+		title: "The LoveUI Approach to Product Polish",
+		href: "#",
+		description:
+			"Polish comes from spacing, states, hierarchy, and composition. LoveUI tries to make those choices reusable.",
+		image: wikimediaImage(
+			"Ohio State University campus - DPLA - 74170bd1ea1086f74720703e80e0dc4c.jpg"
+		),
+		createdAt: "2025-12-18",
+		author: "Connor Love",
+		readTime: "8 min read",
+	},
+	{
+		title: "A Source-First UI Roadmap",
+		href: "#",
+		description:
+			"What is next for LoveUI: more blocks, stronger examples, and better guidance for teams building with AI.",
+		image: wikimediaImage(
+			"Ohio State University campus aerial view looking west - DPLA - cb1a04591333ede0f6ac506328c1c460.jpg"
+		),
+		createdAt: "2025-12-02",
+		author: "Connor Love",
+		readTime: "6 min read",
+	},
+];
+
+export function BlogsSection() {
+	return (
+		<div className="mx-auto w-full max-w-5xl grow">
+			<div className="space-y-1 px-4 py-8 md:px-6">
+				<h1 className="font-semibold text-2xl tracking-wide md:text-4xl">
+					LoveUI Field Notes
+				</h1>
+				<p className="text-muted-foreground text-sm md:text-base">
+					Writing from Connor Love on source-first UI, practical blocks, and
+					building better product surfaces.
+				</p>
+			</div>
+			<FullWidthDivider contained={true} />
+			<div className="z-10 grid p-4 md:grid-cols-2 lg:grid-cols-3">
+				{blogs.map((blog) => (
+					<BlogCard {...blog} key={blog.title} />
+				))}
+			</div>
+		</div>
+	);
+}
+
+function BlogCard({
+	title,
+	description,
+	createdAt,
+	readTime,
+	image,
+	author,
+	className,
+	...props
+}: React.ComponentProps<"a"> & BlogType) {
+	return (
+		<a
+			className={cn(
+				"group cn-rounded flex flex-col gap-2 p-3 hover:bg-muted/50 active:bg-muted",
+				className
+			)}
+			key={title}
+			{...props}
+		>
+			<LazyImage
+				alt={title}
+				className="transition-all duration-500 group-hover:scale-105"
+				containerClassName="cn-rounded shadow-md outline outline-offset-3 outline-border/50"
+				fallback="https://placehold.co/640x360?text=fallback-image"
+				inView={true}
+				ratio={16 / 9}
+				src={image}
+			/>
+			<div className="space-y-2 px-2 pb-2">
+				<div className="flex items-center gap-2 text-[11px] text-muted-foreground group-hover:text-foreground sm:text-xs">
+					<p>by {author}</p>
+					<div className="size-1 rounded-full bg-muted-foreground" />
+					<p>{createdAt}</p>
+					<div className="size-1 rounded-full bg-muted-foreground" />
+					<p>{readTime}</p>
+				</div>
+				<h2 className="line-clamp-2 font-semibold text-lg">{title}</h2>
+				<p className="line-clamp-3 text-muted-foreground text-sm group-active:text-foreground">
+					{description}
+				</p>
+			</div>
+		</a>
+	);
+}

package/registry/default/blocks/blogs3/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/blogs3/components/lazy-image.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useInView } from "motion/react";
+import React from "react";
+import { AspectRatio } from "./aspect-ratio";
+
+type LazyImageProps = {
+	alt: string;
+	src: string;
+	className?: string;
+	containerClassName?: string;
+	/** URL of the fallback image. default: undefined */
+	fallback?: string;
+	/** The ratio of the image. */
+	ratio: number;
+	/** Whether the image should only load when it is in view. default: false */
+	inView?: boolean;
+};
+
+export function LazyImage({
+	alt,
+	src,
+	ratio,
+	fallback,
+	inView = false,
+	className,
+	containerClassName,
+}: LazyImageProps) {
+	const ref = React.useRef<HTMLDivElement | null>(null);
+	const imgRef = React.useRef<HTMLImageElement | null>(null);
+	const isInView = useInView(ref, { once: true });
+
+	const [imgSrc, setImgSrc] = React.useState<string | undefined>(
+		inView ? undefined : src
+	);
+	const [isLoading, setIsLoading] = React.useState(true);
+
+	const handleError = () => {
+		if (fallback) {
+			setImgSrc(fallback);
+		}
+		setIsLoading(false);
+	};
+
+	const handleLoad = React.useCallback(() => {
+		setIsLoading(false);
+	}, []);
+
+	// Load image only when inView
+	React.useEffect(() => {
+		if (inView && isInView && !imgSrc) {
+			setImgSrc(src);
+		}
+	}, [inView, isInView, src, imgSrc]);
+
+	// Handle cached images instantly
+	React.useEffect(() => {
+		if (imgRef.current?.complete) {
+			handleLoad();
+		}
+	}, [handleLoad]);
+
+	return (
+		<AspectRatio
+			className={cn(
+				"relative size-full overflow-hidden border bg-accent/30",
+				containerClassName
+			)}
+			ratio={ratio}
+			ref={ref}
+		>
+			{imgSrc && (
+				// biome-ignore lint/correctness/useImageSize: dynamic image size
+				<img
+					alt={alt}
+					className={cn(
+						"size-full object-cover transition-opacity duration-500",
+						isLoading ? "opacity-0" : "opacity-100",
+						className
+					)}
+					decoding="async"
+					fetchPriority={inView ? "high" : "low"}
+					loading="lazy"
+					onError={handleError}
+					onLoad={handleLoad}
+					ref={imgRef}
+					role="presentation" // Changed from "img" to "presentation" since it's decorative
+					src={imgSrc}
+				/>
+			)}
+		</AspectRatio>
+	);
+}

package/registry/default/blocks/contact1/app/page.tsx

@@ -0,0 +1,9 @@
+import { Contact } from "../components/contact";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center overflow-hidden px-4">
+			<Contact />
+		</div>
+	);
+}

package/registry/default/blocks/contact1/components/contact.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils";
+import { FullWidthDivider } from "./full-width-divider";
+import { Phone, Mail, MapPin } from "lucide-react";
+
+const data = [
+	{
+		title: "Ask about LoveUI",
+		value: "+1 (555) 014-2026",
+		icon: (
+			<Phone
+			/>
+		),
+	},
+	{
+		title: "Email the team",
+		value: "hello@loveui.dev",
+		icon: (
+			<Mail
+			/>
+		),
+	},
+	{
+		title: "Product studio",
+		value: "Built by Connor Love",
+		icon: (
+			<MapPin
+			/>
+		),
+	},
+];
+
+export function Contact() {
+	return (
+		<div className="mx-auto max-w-4xl">
+			<h2 className="mb-6 font-medium text-lg md:text-2xl">
+				Need help building with LoveUI?
+			</h2>
+			<div className="relative">
+				<FullWidthDivider position="top" />
+				<div className="grid gap-px overflow-hidden bg-border px-px md:grid-cols-3">
+					{data.map((item) => (
+						<div
+							className="flex items-center gap-3 bg-background p-2 shadow-xs"
+							key={item.title}
+						>
+							<div
+								className={cn(
+									"flex size-12 shrink-0 items-center justify-center rounded-lg bg-muted/50",
+									"[&_svg]:size-4 [&_svg]:text-muted-foreground"
+								)}
+							>
+								{item.icon}
+							</div>
+							<div className={cn("flex flex-col gap-y-0.5")}>
+								<h2 className="text-sm">{item.title}</h2>
+								<p className="text-muted-foreground text-xs">{item.value}</p>
+							</div>
+						</div>
+					))}
+				</div>
+				<FullWidthDivider position="bottom" />
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/contact1/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/contact2/app/page.tsx

@@ -0,0 +1,9 @@
+import { Contact } from "../components/contact";
+
+export default function Page() {
+	return (
+		<div className="min-h-screen w-full place-content-center overflow-hidden px-4">
+			<Contact />
+		</div>
+	);
+}

package/registry/default/blocks/contact2/components/contact.tsx

@@ -0,0 +1,74 @@
+import { cn } from "@/lib/utils";
+import { XIcon } from "./icons/x-icon";
+import { Button } from "@/registry/default/ui/button";
+import { Mail, Users } from "lucide-react";
+
+const APP_EMAIL = "hello@loveui.dev";
+
+const data = [
+	{
+		title: "Email LoveUI",
+		description: "Ask about components, blocks, registry setup, or implementation details.",
+		icon: (
+			<Mail
+			/>
+		),
+		href: `mailto:${APP_EMAIL}`,
+		label: APP_EMAIL,
+	},
+	{
+		title: "Send a DM",
+		description: "Reach out on X with LoveUI questions, ideas, or bug reports.",
+		icon: <XIcon />,
+		href: "#",
+		label: "@connorlove",
+	},
+	{
+		title: "Join the community",
+		description: "Connect with builders using LoveUI in real product interfaces.",
+		icon: (
+			<Users
+			/>
+		),
+		href: "#",
+		label: "Join Discord",
+	},
+];
+
+export function Contact() {
+	return (
+		<div className="mx-auto max-w-4xl">
+			<div className="mb-12 flex max-w-md flex-col justify-center gap-2">
+				<h1 className="font-bold text-2xl md:text-3xl">Contact Us</h1>
+				<p className="text-base text-muted-foreground">
+					Get help with LoveUI components, blocks, registry installs, and
+					source-first UI workflows.
+				</p>
+			</div>
+			<div className="grid gap-0.5 overflow-hidden rounded-lg bg-muted p-0.5 md:grid-cols-3 dark:bg-muted/50">
+				{data.map((item) => (
+					<div
+						className="flex flex-col gap-3 rounded-lg bg-background px-6 py-6 shadow-xs"
+						key={item.title}
+					>
+						<div
+							className={cn(
+								"flex items-center gap-x-2",
+								"[&_svg]:size-4 [&_svg]:text-muted-foreground"
+							)}
+						>
+							{item.icon}
+							<h2 className="text-sm">{item.title}</h2>
+						</div>
+						<p className="text-muted-foreground text-sm">{item.description}</p>
+						<div className="mt-1 flex items-center gap-x-2">
+							<Button asChild variant="link">
+								<a href={item.href}>{item.label}</a>
+							</Button>
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

package/registry/default/blocks/contact2/components/full-width-divider.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type FullWidthDividerProps = React.ComponentProps<"div"> & {
+	contained?: boolean;
+	position?: "top" | "bottom";
+};
+
+export function FullWidthDivider({
+	className,
+	contained = false,
+	position,
+	...props
+}: FullWidthDividerProps) {
+	return (
+		<div
+			aria-hidden="true"
+			className={cn(
+				"pointer-events-none absolute h-px bg-border",
+				// full-bleed (default)
+				"data-[contained=false]:left-1/2 data-[contained=false]:w-screen data-[contained=false]:-translate-x-1/2",
+				// contained
+				"data-[contained=true]:inset-x-0 data-[contained=true]:w-full",
+				// position
+				position &&
+					"data-[position=top]:-top-px data-[position=bottom]:-bottom-px",
+				className
+			)}
+			data-contained={contained}
+			data-position={position}
+			{...props}
+		/>
+	);
+}

package/registry/default/blocks/contact2/components/icons/x-icon.tsx

@@ -0,0 +1,12 @@
+export function XIcon(props: React.ComponentProps<"svg">) {
+	return (
+		<svg
+			fill="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<path d="m18.9,1.153h3.682l-8.042,9.189,9.46,12.506h-7.405l-5.804-7.583-6.634,7.583H.469l8.6-9.831L0,1.153h7.593l5.241,6.931,6.065-6.931Zm-1.293,19.494h2.039L6.482,3.239h-2.19l13.314,17.408Z" />
+		</svg>
+	);
+}