@usequark/quark-create-app 1.23.11

package/templates/ui/src/select.js

@@ -0,0 +1,317 @@
+"use client";
+import { Check, ChevronDown } from "lucide-react";
+import React, {
+	useCallback,
+	useEffect,
+	useId,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+
+const triggerCls =
+	"flex h-10 w-full items-center justify-between rounded-[--radius-default] border border-[--select-border] bg-[--select-bg] px-3 text-sm text-[--select-text] shadow-sm transition-all duration-200 cursor-pointer hover:border-[--select-border-hover] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--select-ring)] disabled:cursor-not-allowed disabled:opacity-50";
+
+const panelCls =
+	"absolute z-30 max-h-60 w-full overflow-auto rounded-[--radius-default] border border-[--select-border] bg-[--select-panel-bg] shadow-xl origin-top transition-all duration-200 ease-out";
+
+const optionBaseCls =
+	"flex w-full items-center justify-between rounded-[--radius-default] px-2.5 py-2 text-left text-sm transition-colors duration-150";
+
+const optionIdleCls =
+	"cursor-pointer text-[--select-text] hover:bg-[--select-option-hover-bg] hover:text-[--select-option-hover-text]";
+
+const optionActiveCls =
+	"bg-[--select-option-active-bg] text-[--select-option-active-text]";
+
+function normalizeValue(value) {
+	if (value === undefined || value === null) return "";
+	return String(value);
+}
+
+function toText(value) {
+	if (value === undefined || value === null) return "";
+	if (typeof value === "string" || typeof value === "number") {
+		return String(value);
+	}
+	if (Array.isArray(value)) {
+		return value
+			.map((item) => toText(item))
+			.join(" ")
+			.trim();
+	}
+	if (React.isValidElement(value)) {
+		return toText(value.props?.children);
+	}
+	return "";
+}
+
+function collectOptions(children) {
+	const items = React.Children.toArray(children);
+
+	return items.flatMap((child, index) => {
+		if (!React.isValidElement(child)) return [];
+		if (child.type === React.Fragment) {
+			return collectOptions(child.props?.children);
+		}
+		if (
+			typeof child.type !== "string" ||
+			child.type.toLowerCase() !== "option"
+		) {
+			return [];
+		}
+
+		const label = toText(child.props?.children);
+		const rawValue = child.props?.value ?? label;
+
+		return [
+			{
+				key: child.key ?? `${rawValue}-${index}`,
+				value: normalizeValue(rawValue),
+				label,
+				disabled: Boolean(child.props?.disabled),
+			},
+		];
+	});
+}
+
+function createChangeEvent(nextValue, name, id) {
+	const target = {
+		value: nextValue,
+		name,
+		id,
+	};
+
+	return {
+		type: "change",
+		target,
+		currentTarget: target,
+	};
+}
+
+export function Select({
+	className = "",
+	children,
+	value,
+	defaultValue,
+	onChange,
+	disabled = false,
+	id,
+	name,
+	placeholder = "Choose...",
+	required = false,
+	onBlur,
+	onFocus,
+	...props
+}) {
+	const options = useMemo(() => collectOptions(children), [children]);
+	const generatedId = useId();
+	const selectId = id ?? generatedId;
+	const panelId = `${selectId}-panel`;
+	const isControlled = value !== undefined;
+
+	const initialValue = useMemo(() => {
+		if (isControlled) return normalizeValue(value);
+		if (defaultValue !== undefined) return normalizeValue(defaultValue);
+		return options[0]?.value ?? "";
+	}, [isControlled, value, defaultValue, options]);
+
+	const [open, setOpen] = useState(false);
+	const [internalValue, setInternalValue] = useState(initialValue);
+	const rootRef = useRef(null);
+
+	const selectedValue = isControlled ? normalizeValue(value) : internalValue;
+	const selectedOption = options.find(
+		(option) => option.value === selectedValue,
+	);
+	const triggerDisabled = disabled || options.length === 0;
+	const panelStateCls = open
+		? "opacity-100 scale-y-100 pointer-events-auto"
+		: "opacity-0 scale-y-0 pointer-events-none";
+
+	useEffect(() => {
+		if (isControlled) {
+			setInternalValue(normalizeValue(value));
+		}
+	}, [isControlled, value]);
+
+	useEffect(() => {
+		if (isControlled) return;
+		const hasValue = options.some((option) => option.value === internalValue);
+		if (hasValue) return;
+		setInternalValue(initialValue);
+	}, [isControlled, options, internalValue, initialValue]);
+
+	useEffect(() => {
+		if (!open) return;
+
+		function onPointerDown(event) {
+			if (rootRef.current?.contains(event.target)) return;
+			setOpen(false);
+		}
+
+		function onEscape(event) {
+			if (event.key === "Escape") setOpen(false);
+		}
+
+		document.addEventListener("mousedown", onPointerDown);
+		document.addEventListener("keydown", onEscape);
+
+		return () => {
+			document.removeEventListener("mousedown", onPointerDown);
+			document.removeEventListener("keydown", onEscape);
+		};
+	}, [open]);
+
+	const commitValue = useCallback(
+		(nextValue) => {
+			if (!isControlled) {
+				setInternalValue(nextValue);
+			}
+			onChange?.(createChangeEvent(nextValue, name, selectId));
+		},
+		[isControlled, onChange, name, selectId],
+	);
+
+	const toggleOpen = useCallback(() => {
+		if (triggerDisabled) return;
+		setOpen((state) => !state);
+	}, [triggerDisabled]);
+
+	const handleTriggerKeyDown = useCallback(
+		(event) => {
+			if (triggerDisabled) return;
+
+			if (
+				event.key === "ArrowDown" ||
+				event.key === "Enter" ||
+				event.key === " "
+			) {
+				event.preventDefault();
+				setOpen(true);
+			}
+
+			if (event.key === "Escape") {
+				event.preventDefault();
+				setOpen(false);
+			}
+		},
+		[triggerDisabled],
+	);
+
+	return React.createElement(
+		"div",
+		{ className: "relative", ref: rootRef },
+		name
+			? React.createElement(
+					"select",
+					{
+						name,
+						value: selectedValue,
+						required,
+						disabled: triggerDisabled,
+						tabIndex: -1,
+						"aria-hidden": "true",
+						onChange: (event) => commitValue(event.target.value),
+						className: "sr-only",
+					},
+					options.map((option) =>
+						React.createElement(
+							"option",
+							{
+								key: option.key,
+								value: option.value,
+								disabled: option.disabled,
+							},
+							option.label || option.value,
+						),
+					),
+				)
+			: null,
+		React.createElement(
+			"button",
+			{
+				type: "button",
+				id: selectId,
+				disabled: triggerDisabled,
+				onBlur,
+				onFocus,
+				onClick: toggleOpen,
+				onKeyDown: handleTriggerKeyDown,
+				"aria-haspopup": "listbox",
+				"aria-expanded": open,
+				"aria-controls": panelId,
+				"aria-required": required,
+				className: `${triggerCls} ${className}`.trim(),
+				...props,
+			},
+			React.createElement(
+				"span",
+				{
+					className: selectedOption
+						? "text-[--select-text]"
+						: "text-[--select-text-faint]",
+				},
+				selectedOption?.label ??
+					(options.length === 0 ? "No options" : placeholder),
+			),
+			React.createElement(
+				"span",
+				{
+					"aria-hidden": "true",
+					className:
+						`ml-2 text-[--select-text-faint] transition-transform duration-200 ease-in-out ${open ? "rotate-180" : "rotate-0"}`.trim(),
+				},
+				React.createElement(ChevronDown, { size: 16 }),
+			),
+		),
+		React.createElement(
+			"div",
+			{
+				id: panelId,
+				role: "listbox",
+				"aria-hidden": !open,
+				className: `${panelCls} ${panelStateCls}`.trim(),
+			},
+			options.length === 0
+				? React.createElement(
+						"p",
+						{ className: "px-2.5 py-2 text-sm text-[--select-text-faint]" },
+						"No options",
+					)
+				: options.map((option) => {
+						const selected = option.value === selectedValue;
+						const isOptionDisabled = option.disabled || !open;
+						return React.createElement(
+							"button",
+							{
+								type: "button",
+								key: option.key,
+								role: "option",
+								"aria-selected": selected,
+								disabled: isOptionDisabled,
+								tabIndex: open ? 0 : -1,
+								onClick: () => {
+									if (option.disabled) return;
+									commitValue(option.value);
+									setOpen(false);
+								},
+								className:
+									`${optionBaseCls} ${selected ? optionActiveCls : optionIdleCls} ${option.disabled ? "cursor-not-allowed opacity-50" : ""}`.trim(),
+							},
+							React.createElement("span", null, option.label || option.value),
+							selected
+								? React.createElement(
+										"span",
+										{
+											"aria-hidden": "true",
+											className: "text-[--select-option-active-text]",
+										},
+										React.createElement(Check, { size: 16 }),
+									)
+								: null,
+						);
+					}),
+		),
+	);
+}

package/templates/ui/src/skeleton.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const base = "animate-pulse rounded-lg bg-[--skeleton-bg]";
+
+export function Skeleton({ className = "", ...props }) {
+	return React.createElement("div", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/spinner.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+/**
+ * Animated SVG spinner for loading states.
+ * Server Component-safe — uses Tailwind's animate-spin.
+ */
+export function Spinner({ className = "h-4 w-4", label = "Loading" }) {
+	return React.createElement(
+		"svg",
+		{
+			role: "img",
+			"aria-label": label,
+			className: `animate-spin ${className}`,
+			viewBox: "0 0 24 24",
+			fill: "none",
+		},
+		React.createElement("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4",
+		}),
+		React.createElement("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z",
+		}),
+	);
+}

package/templates/ui/src/table.js

@@ -0,0 +1,169 @@
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import React from "react";
+
+const wrapperCls =
+	"w-full overflow-auto rounded-[--radius-default] border border-[--table-border] bg-[--table-bg]";
+
+const tableCls = "w-full caption-bottom text-sm";
+
+const headerCls = "border-b border-[--table-border] bg-[--table-header-bg]";
+
+const bodyCls = "[&_tr:last-child]:border-0";
+
+const rowCls =
+	"border-b border-[var(--table-border)] transition-colors hover:bg-[var(--table-row-hover-bg)] active:bg-[var(--table-row-active-bg)]";
+
+const headCls =
+	"h-11 text-left align-middle font-medium text-[--table-head-text]";
+
+const cellCls = "align-middle text-[--table-cell-text]";
+
+const sortButtonCls =
+	"group inline-flex w-full items-center justify-between gap-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-[var(--table-ring)] rounded-[--radius-default]";
+
+const sortIconCls =
+	"text-[--table-sort-icon] transition-colors group-hover:text-[--table-sort-icon-hover]";
+
+function toAriaSort(direction) {
+	if (direction === "asc") return "ascending";
+	if (direction === "desc") return "descending";
+	return "none";
+}
+
+function nextDirection(direction) {
+	if (direction === "none") return "asc";
+	if (direction === "asc") return "desc";
+	return "none";
+}
+
+function sortIndicator(direction) {
+	if (direction === "asc") return React.createElement(ChevronUp, { size: 14 });
+	if (direction === "desc")
+		return React.createElement(ChevronDown, { size: 14 });
+	return React.createElement(ChevronsUpDown, { size: 14 });
+}
+
+function headingText(children) {
+	if (typeof children === "string" || typeof children === "number") {
+		return String(children);
+	}
+	return "column";
+}
+
+export function Table({ className = "", ...props }) {
+	return React.createElement(
+		"div",
+		{ className: wrapperCls },
+		React.createElement("table", {
+			className: `${tableCls} ${className}`.trim(),
+			...props,
+		}),
+	);
+}
+
+export function TableHeader({ className = "", ...props }) {
+	return React.createElement("thead", {
+		className: `${headerCls} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableBody({ className = "", ...props }) {
+	return React.createElement("tbody", {
+		className: `${bodyCls} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableRow({ className = "", ...props }) {
+	return React.createElement("tr", {
+		className: `${rowCls} ${className}`.trim(),
+		...props,
+	});
+}
+
+export function TableHead({
+	className = "",
+	sortable = false,
+	sortDirection = "none",
+	onSort,
+	sortLabel,
+	children,
+	...props
+}) {
+	const direction =
+		sortDirection === "asc" || sortDirection === "desc"
+			? sortDirection
+			: "none";
+
+	if (!sortable) {
+		return React.createElement(
+			"th",
+			{
+				className: `${headCls} ${className}`.trim(),
+				style: {
+					paddingLeft: "var(--table-head-padding-x)",
+					paddingRight: "var(--table-head-padding-x)",
+					fontSize: "var(--table-head-font-size)",
+					textTransform: "var(--table-head-text-transform)",
+					letterSpacing: "var(--table-head-text-tracking)",
+					fontFamily: "var(--table-head-font-family)",
+				},
+				...props,
+			},
+			children,
+		);
+	}
+
+	return React.createElement(
+		"th",
+		{
+			className: `${headCls} ${className}`.trim(),
+			style: {
+				paddingLeft: "var(--table-head-padding-x)",
+				paddingRight: "var(--table-head-padding-x)",
+				fontSize: "var(--table-head-font-size)",
+				textTransform: "var(--table-head-text-transform)",
+				letterSpacing: "var(--table-head-text-tracking)",
+				fontFamily: "var(--table-head-font-family)",
+			},
+			"aria-sort": toAriaSort(direction),
+			...props,
+		},
+		React.createElement(
+			"button",
+			{
+				type: "button",
+				onClick:
+					typeof onSort === "function"
+						? () => onSort(nextDirection(direction))
+						: undefined,
+				disabled: typeof onSort !== "function",
+				"aria-label": sortLabel ?? `Sort by ${headingText(children)}`,
+				className: `${sortButtonCls} ${typeof onSort !== "function" ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+			},
+			React.createElement("span", null, children),
+			React.createElement(
+				"span",
+				{
+					"aria-hidden": "true",
+					className:
+						`${sortIconCls} ${direction !== "none" ? "text-[--table-sort-active]" : ""}`.trim(),
+				},
+				sortIndicator(direction),
+			),
+		),
+	);
+}
+
+export function TableCell({ className = "", ...props }) {
+	return React.createElement("td", {
+		className: `${cellCls} ${className}`.trim(),
+		style: {
+			padding: "var(--table-cell-padding)",
+			fontSize: "var(--table-cell-font-size)",
+			fontFamily: "var(--table-cell-font-family)",
+		},
+		...props,
+	});
+}

package/templates/ui/src/textarea.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const base =
+	"block w-full rounded-[--radius-default] border border-[--input-border] bg-[--input-bg] px-3 py-2 text-sm text-[--input-text] placeholder:text-[--input-placeholder] transition-colors duration-200 hover:border-[--input-border-hover] focus-visible:border-[--input-border-focus] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--input-ring-focus)] disabled:opacity-[--input-disabled-opacity] disabled:cursor-not-allowed resize-y";
+
+export function Textarea({ className = "", ...props }) {
+	return React.createElement("textarea", {
+		className: `${base} ${className}`.trim(),
+		...props,
+	});
+}

package/templates/ui/src/theme-constants.js

@@ -0,0 +1,24 @@
+/**
+ * Theme system constants for @techstream/quark-ui.
+ *
+ * These three values form the contract between ThemeProvider and any
+ * out-of-tree component (e.g. HomeThemeToggle in apps/web) that interoperates
+ * with it via the shared localStorage key, HTML attribute, and DOM event.
+ *
+ * An identical copy lives in apps/web/src/lib/theme.js - each package owns
+ * its own copy so there is no cross-package import. If you rename any of
+ * these, update both files and the CSS selectors in globals.css.
+ */
+
+/** Key used to persist the user's explicit theme choice in localStorage. */
+export const THEME_STORAGE_KEY = "quark-theme";
+
+/**
+ * Attribute set on <html> so CSS custom properties can react to JS state.
+ * Use via element.setAttribute(THEME_ATTR, value) / element.getAttribute(THEME_ATTR).
+ * Referenced in globals.css as [data-theme="light"] / [data-theme="dark"].
+ */
+export const THEME_ATTR = "data-theme";
+
+/** CustomEvent name dispatched when the theme changes outside a ThemeProvider. */
+export const THEME_CHANGE_EVENT = "quark-theme-change";