@usequark/quark-create-app 1.23.11

package/templates/ui/src/lightbox.js

@@ -0,0 +1,243 @@
+"use client";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+const BACKDROP_CLS =
+	"absolute inset-0 z-0 bg-[--lightbox-backdrop] px-3 py-4 transition-opacity duration-200 ease-out sm:px-6 sm:py-8 cursor-pointer";
+const DIALOG_CLS =
+	"relative z-10 mx-auto flex h-full w-full max-w-6xl flex-col p-3 transition-all duration-200 ease-out sm:p-5";
+const NAV_BTN_CLS =
+	"inline-flex items-center gap-1.5 rounded-[--radius-default] border border-[--lightbox-btn-border] px-3 py-1.5 text-sm font-medium text-[--lightbox-btn-text] transition-colors duration-200 hover:bg-[--lightbox-btn-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] cursor-pointer";
+const CLOSE_BTN_CLS =
+	"rounded-[--radius-default] border border-[--lightbox-btn-border] font-medium text-[--lightbox-btn-text] transition-colors duration-200 hover:bg-[--lightbox-btn-hover-bg] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--lightbox-btn-ring)] flex items-center cursor-pointer";
+
+const IMG_CLS =
+	"max-h-[72vh] w-auto max-w-full rounded-[--radius-default] object-contain transition-all duration-200 ease-out";
+
+export function Lightbox({
+	src,
+	alt = "",
+	caption = "",
+	onClose,
+	onPrevious,
+	onNext,
+	showPrevious = false,
+	showNext = false,
+	currentIndex = 1,
+	totalCount = 1,
+	open = false,
+	className = "",
+}) {
+	const [visible, setVisible] = useState(false);
+	const closeButtonRef = useRef(null);
+
+	useEffect(() => {
+		if (!open) {
+			setVisible(false);
+			return;
+		}
+		const frame = requestAnimationFrame(() => setVisible(true));
+		return () => cancelAnimationFrame(frame);
+	}, [open]);
+
+	useEffect(() => {
+		if (!open) return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = prev;
+		};
+	}, [open]);
+
+	useEffect(() => {
+		if (!open || !visible) return;
+		closeButtonRef.current?.focus();
+	}, [open, visible]);
+
+	useEffect(() => {
+		if (!open) return;
+		function handleKeyDown(e) {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				onClose?.();
+			} else if (e.key === "ArrowLeft" && onPrevious) {
+				e.preventDefault();
+				onPrevious();
+			} else if (e.key === "ArrowRight" && onNext) {
+				e.preventDefault();
+				onNext();
+			}
+		}
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose, onPrevious, onNext]);
+
+	if (!open) return null;
+
+	const visibleCls = visible ? "opacity-100" : "opacity-0";
+	const visibleTransformCls = visible
+		? "translate-y-0 opacity-100"
+		: "translate-y-2 opacity-0";
+	const visibleScaleCls = visible
+		? "scale-100 opacity-100"
+		: "scale-95 opacity-0";
+
+	const dialogChildren = [
+		React.createElement(
+			"div",
+			{
+				key: "header",
+				className: "mb-3 flex items-center justify-between gap-3",
+			},
+			React.createElement("span", { key: "spacer" }),
+			React.createElement(
+				"button",
+				{
+					key: "close",
+					type: "button",
+					ref: closeButtonRef,
+					onClick: onClose,
+					className: CLOSE_BTN_CLS,
+					style: {
+						paddingLeft: "var(--lightbox-close-padding-x)",
+						paddingRight: "var(--lightbox-close-padding-x)",
+						paddingTop: "var(--lightbox-close-padding-y)",
+						paddingBottom: "var(--lightbox-close-padding-y)",
+						fontSize: "var(--lightbox-close-font-size)",
+					},
+				},
+				React.createElement(X, { className: "size-4", "aria-hidden": true }),
+			),
+		),
+		React.createElement(
+			"div",
+			{
+				key: "image",
+				className: "flex min-h-0 flex-1 items-center justify-center",
+			},
+			React.createElement("img", {
+				src,
+				alt,
+				className: `${IMG_CLS} ${visibleScaleCls}`,
+			}),
+		),
+	];
+
+	if (caption) {
+		dialogChildren.push(
+			React.createElement(
+				"p",
+				{
+					key: "caption",
+					className: "mt-3 text-sm leading-6 text-[--lightbox-caption-text]",
+				},
+				caption,
+			),
+		);
+	}
+
+	if (showPrevious || showNext) {
+		const navChildren = [];
+		if (showPrevious) {
+			navChildren.push(
+				React.createElement(
+					"button",
+					{
+						key: "prev",
+						type: "button",
+						onClick: onPrevious,
+						className: NAV_BTN_CLS,
+						style: {
+							paddingLeft: "var(--lightbox-btn-padding-x)",
+							paddingRight: "var(--lightbox-btn-padding-x)",
+							paddingTop: "var(--lightbox-btn-padding-y)",
+							paddingBottom: "var(--lightbox-btn-padding-y)",
+							fontSize: "var(--lightbox-btn-font-size)",
+						},
+					},
+					React.createElement(ChevronLeft, {
+						className: "size-4",
+						"aria-hidden": true,
+					}),
+					" Previous",
+				),
+			);
+		}
+		if (totalCount > 1) {
+			navChildren.push(
+				React.createElement(
+					"p",
+					{
+						key: "counter",
+						className: "text-center text-[--lightbox-counter-text]",
+						style: {
+							minWidth: "var(--lightbox-counter-min-width)",
+							fontSize: "var(--lightbox-counter-font-size)",
+							fontFamily: "var(--lightbox-counter-font-family)",
+							textTransform: "var(--lightbox-counter-text-transform)",
+							letterSpacing: "var(--lightbox-counter-text-tracking)",
+						},
+					},
+					`${currentIndex} / ${totalCount}`,
+				),
+			);
+		}
+		if (showNext) {
+			navChildren.push(
+				React.createElement(
+					"button",
+					{
+						key: "next",
+						type: "button",
+						onClick: onNext,
+						className: NAV_BTN_CLS,
+						style: {
+							paddingLeft: "var(--lightbox-btn-padding-x)",
+							paddingRight: "var(--lightbox-btn-padding-x)",
+							paddingTop: "var(--lightbox-btn-padding-y)",
+							paddingBottom: "var(--lightbox-btn-padding-y)",
+							fontSize: "var(--lightbox-btn-font-size)",
+						},
+					},
+					"Next ",
+					React.createElement(ChevronRight, {
+						className: "size-4",
+						"aria-hidden": true,
+					}),
+				),
+			);
+		}
+		dialogChildren.push(
+			React.createElement(
+				"div",
+				{
+					key: "nav",
+					className: "mt-4 flex items-center justify-center",
+					style: { gap: "var(--lightbox-nav-gap)" },
+				},
+				...navChildren,
+			),
+		);
+	}
+
+	return React.createElement(
+		"div",
+		{ className: `fixed inset-0 z-[90] ${className}`.trim() },
+		React.createElement("button", {
+			type: "button",
+			"aria-label": "Close lightbox",
+			className: `${BACKDROP_CLS} ${visibleCls}`,
+			onClick: onClose,
+		}),
+		React.createElement(
+			"div",
+			{
+				role: "dialog",
+				"aria-modal": true,
+				"aria-label": alt || "Image lightbox",
+				className: `${DIALOG_CLS} ${visibleTransformCls}`,
+			},
+			...dialogChildren,
+		),
+	);
+}

package/templates/ui/src/logo.js

@@ -0,0 +1,52 @@
+import React from "react";
+
+/**
+ * QuarkLogo - inline SVG of the Quark ring+dash mark.
+ * Pure server component. Accepts `size` (number, default 40) and `className`.
+ */
+export function QuarkLogo({ size = 40, className = "", ...props }) {
+	return React.createElement(
+		"svg",
+		{
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 200 200",
+			fill: "none",
+			width: size,
+			height: size,
+			"aria-hidden": "true",
+			className,
+			...props,
+		},
+		// Dark arc - upper semicircle
+		React.createElement("path", {
+			d: "M 35,100 A 65,65 0 0,1 165,100",
+			stroke: "var(--quark-logo-dark-arc, #2d3436)",
+			strokeWidth: 26,
+			strokeLinecap: "butt",
+		}),
+		// Blue arc - bottom-left
+		React.createElement("path", {
+			d: "M 119.1,162.1 A 65,65 0 0,1 35,100",
+			stroke: "var(--logo-blue-arc)",
+			strokeWidth: 26,
+			strokeLinecap: "butt",
+		}),
+		// Red arc - tiny pre-gap sliver
+		React.createElement("path", {
+			d: "M 165,100 A 65,65 0 0,1 161.5,121",
+			stroke: "var(--logo-red-arc)",
+			strokeWidth: 26,
+			strokeLinecap: "butt",
+		}),
+		// Red dash - radial tail through the gap
+		React.createElement("line", {
+			x1: 116.3,
+			y1: 116.8,
+			x2: 172,
+			y2: 174.2,
+			stroke: "var(--logo-red-dash)",
+			strokeWidth: 28,
+			strokeLinecap: "butt",
+		}),
+	);
+}