@techstream/quark-create-app 1.9.0 → 1.10.0

package/templates/ui/src/badge.js

@@ -0,0 +1,32 @@
+import React from "react";
+
+const base =
+	"inline-flex items-center rounded-sm border px-2.5 py-0.5 text-xs font-medium tracking-wide";
+
+const THEMES = {
+	light: {
+		default: "border-gray-200 bg-gray-100 text-gray-800",
+		success: "border-green-200 bg-green-100 text-green-800",
+		warning: "border-yellow-200 bg-yellow-100 text-yellow-800",
+		danger: "border-red-200 bg-red-100 text-red-800",
+		info: "border-blue-200 bg-blue-100 text-blue-800",
+	},
+	dark: {
+		default: "border-[#1e2535] bg-[#1e2535]/50 text-[#6b7a99]",
+		success: "border-emerald-800/50 bg-emerald-900/20 text-emerald-400",
+		warning: "border-yellow-800/50 bg-yellow-900/20 text-yellow-400",
+		danger: "border-[#ff4757]/30 bg-[#ff4757]/10 text-[#ff4757]",
+		info: "border-[#377dff]/30 bg-[#377dff]/10 text-[#377dff]",
+	},
+};
+
+export function Badge({
+	variant = "default",
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	const cls = `${base} ${t[variant] ?? t.default} ${className}`.trim();
+	return React.createElement("span", { className: cls, ...props });
+}

package/templates/ui/src/badge.test.js

@@ -0,0 +1,42 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Badge } from "./badge.js";
+
+test("Badge - exports correctly", () => {
+	assert(typeof Badge === "function");
+});
+
+test("Badge - renders with default props", () => {
+	const result = Badge({});
+	assert.ok(result);
+});
+
+test("Badge - supports default variant", () => {
+	const result = Badge({ variant: "default" });
+	assert.ok(result);
+});
+
+test("Badge - supports success variant", () => {
+	const result = Badge({ variant: "success" });
+	assert.ok(result);
+});
+
+test("Badge - supports warning variant", () => {
+	const result = Badge({ variant: "warning" });
+	assert.ok(result);
+});
+
+test("Badge - supports danger variant", () => {
+	const result = Badge({ variant: "danger" });
+	assert.ok(result);
+});
+
+test("Badge - supports info variant", () => {
+	const result = Badge({ variant: "info" });
+	assert.ok(result);
+});
+
+test("Badge - accepts className override", () => {
+	const result = Badge({ className: "custom" });
+	assert.ok(result);
+});

package/templates/ui/src/button.js

@@ -1,19 +1,68 @@
 import React from "react";
 
-export const Button = ({ variant = "primary", className, ...props }) => {
-	const baseStyles = "px-4 py-2 rounded-md font-medium transition-colors";
-	const variants = {
-		primary: "bg-blue-600 text-white hover:bg-blue-700",
-		secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
-	};
+const base =
+	"inline-flex items-center justify-center rounded-sm font-medium transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none active:translate-y-px";
 
-	return React.createElement(
-		"button",
-		{
-			type: "button",
-			className: `${baseStyles} ${variants[variant]} ${className || ""}`,
-			...props,
-		},
-		props.children,
-	);
+const THEMES = {
+	light: {
+		primary:
+			"bg-blue-600 text-white shadow-sm hover:bg-blue-700 hover:shadow focus-visible:ring-blue-500",
+		secondary:
+			"border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow focus-visible:ring-gray-400",
+		danger:
+			"bg-red-600 text-white shadow-sm hover:bg-red-700 hover:shadow focus-visible:ring-red-500",
+		ghost:
+			"bg-transparent text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus-visible:ring-gray-400",
+		success:
+			"bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 hover:shadow focus-visible:ring-emerald-500",
+		warning:
+			"bg-amber-500 text-white shadow-sm hover:bg-amber-600 hover:shadow focus-visible:ring-amber-400",
+		info: "bg-cyan-600 text-white shadow-sm hover:bg-cyan-700 hover:shadow focus-visible:ring-cyan-500",
+		outline:
+			"border border-blue-600 text-blue-600 bg-transparent hover:bg-blue-50 focus-visible:ring-blue-500",
+		solid:
+			"bg-blue-700 text-white shadow-sm hover:bg-blue-800 hover:shadow focus-visible:ring-blue-600",
+	},
+	dark: {
+		primary:
+			"bg-[#377dff]/10 border border-[#377dff]/40 text-[#377dff] hover:bg-[#377dff]/20 hover:border-[#377dff]/80 focus-visible:ring-[#377dff]/40 focus-visible:ring-offset-0",
+		secondary:
+			"border border-[#1e2535] text-[#6b7a99] hover:border-[#377dff]/30 hover:text-[#e0e0e0] focus-visible:ring-[#377dff]/30 focus-visible:ring-offset-0",
+		danger:
+			"bg-[#ff4757]/10 border border-[#ff4757]/40 text-[#ff4757] hover:bg-[#ff4757]/20 hover:border-[#ff4757]/80 focus-visible:ring-[#ff4757]/40 focus-visible:ring-offset-0",
+		ghost:
+			"text-[#4a4a6a] hover:bg-[#1e2535] hover:text-[#e0e0e0] focus-visible:ring-[#377dff]/30 focus-visible:ring-offset-0",
+		success:
+			"bg-emerald-500/10 border border-emerald-500/40 text-emerald-400 hover:bg-emerald-500/20 hover:border-emerald-500/80 focus-visible:ring-emerald-400/40 focus-visible:ring-offset-0",
+		warning:
+			"bg-amber-500/10 border border-amber-400/40 text-amber-400 hover:bg-amber-500/20 hover:border-amber-400/80 focus-visible:ring-amber-400/40 focus-visible:ring-offset-0",
+		info: "bg-cyan-500/10 border border-cyan-400/40 text-cyan-400 hover:bg-cyan-500/20 hover:border-cyan-400/80 focus-visible:ring-cyan-400/40 focus-visible:ring-offset-0",
+		outline:
+			"border border-[#377dff]/60 text-[#377dff] bg-transparent hover:bg-[#377dff]/10 focus-visible:ring-[#377dff]/40 focus-visible:ring-offset-0",
+		solid:
+			"bg-[#377dff] text-white hover:bg-[#2563eb] focus-visible:ring-[#377dff]/60 focus-visible:ring-offset-0",
+	},
 };
+
+const sizes = {
+	sm: "h-8 px-3 text-sm",
+	md: "h-10 px-4 text-sm",
+	lg: "h-11 px-6 text-base",
+};
+
+export function Button({
+	variant = "primary",
+	size = "md",
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	const cls =
+		`${base} ${t[variant] ?? t.primary} ${sizes[size] ?? sizes.md} ${className}`.trim();
+	return React.createElement("button", {
+		type: "button",
+		className: cls,
+		...props,
+	});
+}

package/templates/ui/src/button.test.js

@@ -6,18 +6,47 @@ test("Button - component exports correctly", () => {
 	assert(typeof Button === "function", "Button should be a function");
 });
 
-test("Button - component accepts props", () => {
-	// Test that component can be called with props
-	const result = Button({ variant: "primary", className: "custom" });
+test("Button - renders with default props", () => {
+	const result = Button({});
 	assert.ok(result, "Component should return an element");
 });
 
 test("Button - supports primary variant", () => {
 	const result = Button({ variant: "primary" });
-	assert.ok(result, "Primary variant should be supported");
+	assert.ok(result);
 });
 
 test("Button - supports secondary variant", () => {
 	const result = Button({ variant: "secondary" });
-	assert.ok(result, "Secondary variant should be supported");
+	assert.ok(result);
+});
+
+test("Button - supports danger variant", () => {
+	const result = Button({ variant: "danger" });
+	assert.ok(result);
+});
+
+test("Button - supports ghost variant", () => {
+	const result = Button({ variant: "ghost" });
+	assert.ok(result);
+});
+
+test("Button - supports sm size", () => {
+	const result = Button({ size: "sm" });
+	assert.ok(result);
+});
+
+test("Button - supports md size", () => {
+	const result = Button({ size: "md" });
+	assert.ok(result);
+});
+
+test("Button - supports lg size", () => {
+	const result = Button({ size: "lg" });
+	assert.ok(result);
+});
+
+test("Button - accepts className override", () => {
+	const result = Button({ className: "custom-class" });
+	assert.ok(result);
 });

package/templates/ui/src/card.js

@@ -0,0 +1,58 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		card: "rounded border border-gray-200 bg-white/95 shadow-sm transition-shadow duration-200 hover:shadow-md",
+		header: "flex flex-col space-y-1.5 p-6",
+		title: "text-lg font-semibold leading-none tracking-tight text-gray-900",
+		content: "p-6 pt-0",
+		footer: "flex items-center p-6 pt-0",
+	},
+	dark: {
+		card: "rounded border border-[#1e2535] bg-[#0d1117] transition-all duration-200 hover:border-[#377dff]/30",
+		header: "flex flex-col space-y-1.5 p-6",
+		title: "text-lg font-semibold leading-none tracking-tight text-[#e0e0e0]",
+		content: "p-6 pt-0",
+		footer: "flex items-center p-6 pt-0",
+	},
+};
+
+export function Card({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.card} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardHeader({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.header} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardTitle({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("h3", {
+		className: `${t.title} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardContent({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.content} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function CardFooter({ theme = "light", className = "", ...props }) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement("div", {
+		className: `${t.footer} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/card.test.js

@@ -0,0 +1,59 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "./card.js";
+
+test("Card - exports correctly", () => {
+	assert(typeof Card === "function");
+});
+
+test("CardHeader - exports correctly", () => {
+	assert(typeof CardHeader === "function");
+});
+
+test("CardTitle - exports correctly", () => {
+	assert(typeof CardTitle === "function");
+});
+
+test("CardContent - exports correctly", () => {
+	assert(typeof CardContent === "function");
+});
+
+test("CardFooter - exports correctly", () => {
+	assert(typeof CardFooter === "function");
+});
+
+test("Card - renders with default props", () => {
+	const result = Card({});
+	assert.ok(result);
+});
+
+test("CardHeader - renders with default props", () => {
+	const result = CardHeader({});
+	assert.ok(result);
+});
+
+test("CardTitle - renders with default props", () => {
+	const result = CardTitle({});
+	assert.ok(result);
+});
+
+test("CardContent - renders with default props", () => {
+	const result = CardContent({});
+	assert.ok(result);
+});
+
+test("CardFooter - renders with default props", () => {
+	const result = CardFooter({});
+	assert.ok(result);
+});
+
+test("Card - accepts className override", () => {
+	const result = Card({ className: "custom" });
+	assert.ok(result);
+});

package/templates/ui/src/checkbox.js

@@ -0,0 +1,35 @@
+import React from "react";
+
+const THEMES = {
+	light: {
+		input:
+			"h-4 w-4 rounded border-gray-300 text-blue-600 shadow-sm transition-colors cursor-pointer focus-visible:ring-2 focus-visible:ring-blue-500/40 disabled:cursor-not-allowed disabled:opacity-60",
+		label: "text-sm text-gray-700 select-none",
+	},
+	dark: {
+		input:
+			"h-4 w-4 rounded border-[#1e2535] bg-[#090d14] accent-[#377dff] cursor-pointer focus-visible:ring-2 focus-visible:ring-[#377dff]/40 disabled:cursor-not-allowed disabled:opacity-40",
+		label: "text-sm text-[#6b7a99] font-mono select-none",
+	},
+};
+
+export function Checkbox({
+	id,
+	label,
+	theme = "light",
+	className = "",
+	...props
+}) {
+	const t = THEMES[theme] ?? THEMES.light;
+	return React.createElement(
+		"div",
+		{ className: "flex items-center gap-2" },
+		React.createElement("input", {
+			id,
+			type: "checkbox",
+			className: `${t.input} ${className}`.trim(),
+			...props,
+		}),
+		React.createElement("label", { htmlFor: id, className: t.label }, label),
+	);
+}

package/templates/ui/src/checkbox.test.js

@@ -0,0 +1,35 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Checkbox } from "./checkbox.js";
+
+test("Checkbox - exports correctly", () => {
+	assert(typeof Checkbox === "function");
+});
+
+test("Checkbox - renders with default props", () => {
+	const result = Checkbox({ id: "check1", label: "Accept terms" });
+	assert.ok(result);
+});
+
+test("Checkbox - accepts className override", () => {
+	const result = Checkbox({
+		id: "check2",
+		label: "Option",
+		className: "custom",
+	});
+	assert.ok(result);
+});
+
+test("Checkbox - accepts checked prop", () => {
+	const result = Checkbox({
+		id: "check3",
+		label: "Checked",
+		defaultChecked: true,
+	});
+	assert.ok(result);
+});
+
+test("Checkbox - accepts disabled prop", () => {
+	const result = Checkbox({ id: "check4", label: "Disabled", disabled: true });
+	assert.ok(result);
+});

package/templates/ui/src/dialog.js

@@ -0,0 +1,139 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Dialog — centered modal built on the native <dialog> element.
+ *
+ * Props:
+ *   open      (bool)    — controlled open state
+ *   onClose   (fn)      — called when the dialog should close
+ *   title     (string)  — header text
+ *   children            — dialog body content
+ *   theme     (string)  — 'light' (default) | 'dark'
+ *   className (string)  — merged onto the <dialog> element
+ *
+ * Architecture:
+ *   • ALL close paths (header ×, backdrop click, Escape, external button)
+ *     flow through the `open` prop → useEffect, which owns the single
+ *     animation + el.close() call. handleClose() just calls onClose().
+ *   • isClosingRef (ref, not state) prevents the effect from double-firing.
+ */
+
+const THEMES = {
+	light: {
+		dialog:
+			"backdrop:bg-black/50 rounded border border-gray-200 bg-white p-0 shadow-2xl w-full max-w-lg",
+		header:
+			"flex items-center justify-between border-b border-gray-200 px-5 py-4",
+		title: "text-base font-semibold text-gray-900",
+		close:
+			"flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 active:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-300",
+		body: "px-5 py-4 text-gray-700",
+	},
+	dark: {
+		dialog:
+			"backdrop:bg-black/70 rounded border border-[#1e2535] bg-[#0d1117] p-0 shadow-2xl w-full max-w-lg",
+		header:
+			"flex items-center justify-between border-b border-[#1e2535] px-5 py-4",
+		title: "text-base font-semibold text-[#e0e0e0]",
+		close:
+			"flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm text-lg text-[#4a4a6a] transition-colors hover:bg-[#1e2535] hover:text-[#e0e0e0] active:bg-[#1e2535] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#377dff]/40",
+		body: "px-5 py-4 text-[#6b7a99]",
+	},
+};
+
+export function Dialog({
+	open,
+	onClose,
+	title,
+	children,
+	theme = "light",
+	className = "",
+}) {
+	const ref = useRef(null);
+	const [isClosing, setIsClosing] = useState(false);
+	const isClosingRef = useRef(false);
+	const t = THEMES[theme] ?? THEMES.light;
+
+	// Single source of truth for open/close — drives both animation and native element
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+
+		if (open) {
+			if (!el.open && typeof el.showModal === "function") el.showModal();
+			isClosingRef.current = false;
+			setIsClosing(false);
+		} else {
+			// Play exit animation then close native element — regardless of who triggered close
+			if (isClosingRef.current) return; // already animating out, don't double-trigger
+			isClosingRef.current = true;
+			setIsClosing(true);
+			const t = setTimeout(() => {
+				if (el.open && typeof el.close === "function") el.close();
+				setIsClosing(false);
+				isClosingRef.current = false;
+			}, 180);
+			return () => clearTimeout(t);
+		}
+	}, [open]);
+
+	// All close-trigger sources just call onClose() — parent sets open=false,
+	// which re-runs the effect above and plays the animation.
+	const handleClose = useCallback(() => {
+		if (!isClosingRef.current) onClose?.();
+	}, [onClose]);
+
+	// Backdrop click (target is the <dialog> element itself)
+	const handleDialogClick = useCallback(
+		(e) => {
+			if (e.target === ref.current) handleClose();
+		},
+		[handleClose],
+	);
+
+	// Intercept Escape so we can animate before the native dialog closes
+	const handleCancel = useCallback(
+		(e) => {
+			e.preventDefault();
+			handleClose();
+		},
+		[handleClose],
+	);
+
+	const animStyle =
+		open || isClosing
+			? isClosing
+				? { animation: "quark-dialog-out 0.18s ease-in forwards" }
+				: { animation: "quark-dialog-in 0.2s ease-out forwards" }
+			: {};
+
+	return React.createElement(
+		"dialog",
+		{
+			ref,
+			onClick: handleDialogClick,
+			onCancel: handleCancel,
+			style: animStyle,
+			className: `${t.dialog} ${className}`.trim(),
+		},
+		// Header
+		React.createElement(
+			"div",
+			{ className: t.header },
+			React.createElement("h2", { className: t.title }, title),
+			React.createElement(
+				"button",
+				{
+					type: "button",
+					"aria-label": "Close dialog",
+					onClick: handleClose,
+					className: t.close,
+				},
+				"\u00d7",
+			),
+		),
+		// Body
+		React.createElement("div", { className: t.body }, children),
+	);
+}

package/templates/ui/src/dialog.test.js

@@ -0,0 +1,15 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Dialog } from "./dialog.js";
+
+// Dialog uses React hooks (useRef, useEffect) and requires a React renderer to
+// render correctly. Full render tests belong in an integration test suite with
+// jsdom + react-dom. Here we verify the export contract only.
+
+test("Dialog - exports correctly", () => {
+	assert(typeof Dialog === "function");
+});
+
+test("Dialog - has expected function name", () => {
+	assert.strictEqual(Dialog.name, "Dialog");
+});

package/templates/ui/src/index.js

@@ -1 +1,17 @@
+// Server components
+export * from "./badge.js";
 export * from "./button.js";
+export * from "./card.js";
+export * from "./checkbox.js";
+// Client components ("use client")
+export * from "./dialog.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./select.js";
+export * from "./skeleton.js";
+export * from "./table.js";
+export * from "./textarea.js";
+export * from "./theme.js";
+// Theme context
+export * from "./theme-constants.js";
+export * from "./toast.js";

package/templates/ui/src/input.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const THEMES = {
+	light:
+		"block h-10 w-full rounded-sm border border-gray-300 bg-white px-3 text-sm text-gray-900 placeholder-gray-400 shadow-sm transition-all duration-200 hover:border-gray-400 focus-visible:border-blue-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/30 disabled:bg-gray-100 disabled:text-gray-500 disabled:cursor-not-allowed",
+	dark: "block h-10 w-full rounded-sm border border-[#1e2535] bg-[#090d14] px-3 text-sm text-[#e0e0e0] placeholder-[#2d3a52] font-mono transition-all duration-200 hover:border-[#377dff]/30 focus-visible:border-[#377dff]/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#377dff]/15 disabled:opacity-30 disabled:cursor-not-allowed",
+};
+
+export function Input({ theme = "light", className = "", ...props }) {
+	const base = THEMES[theme] ?? THEMES.light;
+	return React.createElement("input", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/input.test.js

@@ -0,0 +1,27 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Input } from "./input.js";
+
+test("Input - exports correctly", () => {
+	assert(typeof Input === "function");
+});
+
+test("Input - renders with default props", () => {
+	const result = Input({});
+	assert.ok(result);
+});
+
+test("Input - accepts className override", () => {
+	const result = Input({ className: "w-32", placeholder: "test" });
+	assert.ok(result);
+});
+
+test("Input - accepts type prop", () => {
+	const result = Input({ type: "email" });
+	assert.ok(result);
+});
+
+test("Input - accepts disabled prop", () => {
+	const result = Input({ disabled: true });
+	assert.ok(result);
+});

package/templates/ui/src/label.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const THEMES = {
+	light: "block text-sm font-medium text-gray-700 tracking-tight",
+	dark: "block text-sm font-medium text-[#4a4a6a] tracking-tight font-mono",
+};
+
+export function Label({ theme = "light", className = "", ...props }) {
+	const base = THEMES[theme] ?? THEMES.light;
+	return React.createElement("label", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/label.test.js

@@ -0,0 +1,22 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { Label } from "./label.js";
+
+test("Label - exports correctly", () => {
+	assert(typeof Label === "function");
+});
+
+test("Label - renders with default props", () => {
+	const result = Label({});
+	assert.ok(result);
+});
+
+test("Label - accepts className override", () => {
+	const result = Label({ className: "custom" });
+	assert.ok(result);
+});
+
+test("Label - accepts htmlFor prop", () => {
+	const result = Label({ htmlFor: "my-input", children: "My label" });
+	assert.ok(result);
+});