@ucdjs-internal/shared-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-PRESENT Lucas Nørgård
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,27 @@
+# @ucdjs-internal/shared-ui
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![codecov][codecov-src]][codecov-href]
+
+> [!IMPORTANT]
+> This is an internal package. It may change without warning and is not subject to semantic versioning. Use at your own risk.
+
+A collection of shared UI components for UCD.js projects.
+
+## Installation
+
+```bash
+npm install @ucdjs-internal/shared-ui
+```
+
+## 📄 License
+
+Published under [MIT License](./LICENSE).
+
+[npm-version-src]: https://img.shields.io/npm/v/@ucdjs-internal/shared-ui?style=flat&colorA=18181B&colorB=4169E1
+[npm-version-href]: https://npmjs.com/package/@ucdjs-internal/shared-ui
+[npm-downloads-src]: https://img.shields.io/npm/dm/@ucdjs-internal/shared-ui?style=flat&colorA=18181B&colorB=4169E1
+[npm-downloads-href]: https://npmjs.com/package/@ucdjs-internal/shared-ui
+[codecov-src]: https://img.shields.io/codecov/c/gh/ucdjs/ucd?style=flat&colorA=18181B&colorB=4169E1
+[codecov-href]: https://codecov.io/gh/ucdjs/ucd

package/dist/components/shiki-code.d.mts

@@ -0,0 +1,50 @@
+import { BundledLanguage, DecorationItem } from "shiki";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/shiki-code.d.ts
+interface ShikiCodeProps {
+  /**
+   * The code to highlight
+   */
+  code: string;
+  /**
+   * The language to use for syntax highlighting
+   * @default "typescript"
+   */
+  language?: BundledLanguage;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional CSS class names for the `<pre>` element.
+   */
+  preClassName?: string;
+  /**
+   * Additional CSS class names for the `<code>` element.
+   */
+  codeClassName?: string;
+  /**
+   * Shiki decorations for inline annotations/highlights.
+   */
+  decorations?: DecorationItem[];
+}
+/**
+ * A syntax highlighting component powered by Shiki.
+ * Renders code to HTML with syntax highlighting.
+ *
+ * @example
+ * ```tsx
+ * <ShikiCode code="const x = 1;" language="typescript" />
+ * ```
+ */
+declare function ShikiCode({
+  code,
+  language,
+  className,
+  preClassName,
+  codeClassName,
+  decorations
+}: ShikiCodeProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ShikiCode, ShikiCodeProps };

package/dist/components/shiki-code.mjs

@@ -0,0 +1,76 @@
+import { use, useMemo } from "react";
+import { createJavaScriptRegexEngine } from "shiki";
+import { createCssVariablesTheme, createHighlighterCore } from "shiki/core";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/shiki-code.tsx
+const highlighterPromise = createHighlighterCore({
+	themes: [createCssVariablesTheme({
+		name: "ucd-code",
+		variablePrefix: "--shiki-"
+	})],
+	langs: [
+		import("shiki/langs/javascript.mjs"),
+		import("shiki/langs/typescript.mjs"),
+		import("shiki/langs/json.mjs")
+	],
+	engine: createJavaScriptRegexEngine()
+});
+/**
+* A syntax highlighting component powered by Shiki.
+* Renders code to HTML with syntax highlighting.
+*
+* @example
+* ```tsx
+* <ShikiCode code="const x = 1;" language="typescript" />
+* ```
+*/
+function ShikiCode({ code, language = "typescript", className, preClassName, codeClassName, decorations }) {
+	const highlighter = use(highlighterPromise);
+	const rootClassName = className ? `shiki-root ${className}` : "shiki-root";
+	const preClasses = [
+		"shiki",
+		"shiki-code",
+		preClassName
+	].filter((value) => Boolean(value));
+	const codeClasses = ["shiki-code__code", codeClassName].filter((value_0) => Boolean(value_0));
+	const html = useMemo(() => {
+		return highlighter.codeToHtml(code, {
+			lang: language,
+			theme: "ucd-code",
+			rootStyle: false,
+			transformers: [{
+				name: "shiki:code-theme",
+				pre(hast) {
+					this.addClassToHast(hast, preClasses);
+					hast.properties ||= {};
+					hast.properties["data-language"] = this.options.lang;
+				},
+				code(hast_0) {
+					this.addClassToHast(hast_0, codeClasses);
+				},
+				line(hast_1, line) {
+					this.addClassToHast(hast_1, "shiki-code__line");
+					hast_1.properties ||= {};
+					hast_1.properties["data-line"] = line;
+				}
+			}],
+			decorations
+		});
+	}, [
+		code,
+		codeClasses,
+		decorations,
+		highlighter,
+		language,
+		preClasses
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: rootClassName,
+		"data-shiki-root": true,
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+
+//#endregion
+export { ShikiCode };

package/dist/components/theme-toggle.d.mts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/theme-toggle.d.ts
+declare function ThemeToggle(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ThemeToggle };

package/dist/components/theme-toggle.mjs

@@ -0,0 +1,75 @@
+import { useTheme } from "../hooks/use-theme.mjs";
+import { Button } from "../ui/button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { Moon, Sun, SunMoon } from "lucide-react";
+
+//#region src/components/theme-toggle.tsx
+const labelByTheme = {
+	light: "Light",
+	dark: "Dark",
+	system: "System"
+};
+function ThemeToggle() {
+	const $ = c(9);
+	const { theme, setTheme, resolvedTheme } = useTheme();
+	const Icon = resolvedTheme === "dark" ? Moon : Sun;
+	let t0;
+	if ($[0] !== Icon) {
+		t0 = /* @__PURE__ */ jsx(DropdownMenuTrigger, { render: (props) => /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			...props,
+			children: [/* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Toggle theme"
+			})]
+		}) });
+		$[0] = Icon;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = Object.entries(labelByTheme);
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== setTheme || $[4] !== theme) {
+		t2 = /* @__PURE__ */ jsx(DropdownMenuContent, {
+			align: "end",
+			className: "min-w-40",
+			children: t1.map((t3) => {
+				const [value, label] = t3;
+				return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onClick: () => setTheme(value),
+					children: [
+						value === "system" ? /* @__PURE__ */ jsx(SunMoon, { className: "mr-2 h-4 w-4" }) : null,
+						value === "light" ? /* @__PURE__ */ jsx(Sun, { className: "mr-2 h-4 w-4" }) : null,
+						value === "dark" ? /* @__PURE__ */ jsx(Moon, { className: "mr-2 h-4 w-4" }) : null,
+						label,
+						theme === value ? /* @__PURE__ */ jsx("span", {
+							className: "ml-auto text-xs text-muted-foreground",
+							children: "Active"
+						}) : null
+					]
+				}, value);
+			})
+		});
+		$[3] = setTheme;
+		$[4] = theme;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== t0 || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(DropdownMenu, { children: [t0, t2] });
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+
+//#endregion
+export { ThemeToggle };

package/dist/hooks/index.d.mts

@@ -0,0 +1,3 @@
+import { useIsMobile } from "./use-mobile.mjs";
+import { ThemeMode, UseThemeReturn, useTheme } from "./use-theme.mjs";
+export { type ThemeMode, type UseThemeReturn, useIsMobile, useTheme };

package/dist/hooks/index.mjs

@@ -0,0 +1,4 @@
+import { useTheme } from "./use-theme.mjs";
+import { useIsMobile } from "./use-mobile.mjs";
+
+export { useIsMobile, useTheme };

package/dist/hooks/use-mobile.d.mts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-mobile.mjs

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { c } from "react/compiler-runtime";
+
+//#region src/hooks/use-mobile.ts
+const MOBILE_BREAKPOINT = 768;
+function useIsMobile() {
+	const $ = c(3);
+	const getIsMobile = _temp;
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => getIsMobile();
+		$[0] = t0;
+	} else t0 = $[0];
+	const [isMobile, setIsMobile] = React.useState(t0);
+	let t1;
+	let t2;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+			const onChange = () => {
+				setIsMobile(getIsMobile());
+			};
+			mql.addEventListener("change", onChange);
+			return () => mql.removeEventListener("change", onChange);
+		};
+		t2 = [];
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	React.useEffect(t1, t2);
+	return !!isMobile;
+}
+function _temp() {
+	return typeof window !== "undefined" ? window.innerWidth < MOBILE_BREAKPOINT : false;
+}
+
+//#endregion
+export { useIsMobile };

package/dist/hooks/use-theme.d.mts

@@ -0,0 +1,11 @@
+//#region src/hooks/use-theme.d.ts
+type ThemeMode = "light" | "dark" | "system";
+interface UseThemeReturn {
+  theme: ThemeMode;
+  resolvedTheme: "light" | "dark";
+  setTheme: (theme: ThemeMode) => void;
+  toggleTheme: () => void;
+}
+declare function useTheme(): UseThemeReturn;
+//#endregion
+export { ThemeMode, UseThemeReturn, useTheme };

package/dist/hooks/use-theme.mjs

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
+
+//#region src/hooks/use-theme.ts
+const STORAGE_KEY = "theme";
+const DARK_CLASS = "dark";
+function getSystemTheme() {
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getStoredTheme() {
+	if (typeof window === "undefined") return "system";
+	const value = window.localStorage.getItem(STORAGE_KEY);
+	if (value === "light" || value === "dark" || value === "system") return value;
+	return "system";
+}
+function syncTheme(resolved) {
+	if (typeof document === "undefined") return;
+	document.documentElement.classList.toggle(DARK_CLASS, resolved === "dark");
+	document.documentElement.style.colorScheme = resolved;
+}
+function useTheme() {
+	const $ = c(11);
+	const [theme, setThemeState] = useState(_temp);
+	const [systemTheme, setSystemTheme] = useState(_temp2);
+	const resolvedTheme = theme === "system" ? systemTheme : theme;
+	let t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = () => {
+			if (typeof window === "undefined") return;
+			const media = window.matchMedia("(prefers-color-scheme: dark)");
+			const handler = () => setSystemTheme(media.matches ? "dark" : "light");
+			media.addEventListener("change", handler);
+			return () => media.removeEventListener("change", handler);
+		};
+		t1 = [];
+		$[0] = t0;
+		$[1] = t1;
+	} else {
+		t0 = $[0];
+		t1 = $[1];
+	}
+	useEffect(t0, t1);
+	let t2;
+	let t3;
+	if ($[2] !== resolvedTheme || $[3] !== theme) {
+		t2 = () => {
+			syncTheme(resolvedTheme);
+			if (typeof window !== "undefined") window.localStorage.setItem(STORAGE_KEY, theme);
+		};
+		t3 = [resolvedTheme, theme];
+		$[2] = resolvedTheme;
+		$[3] = theme;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = (nextTheme) => {
+			setThemeState(nextTheme);
+		};
+		$[6] = t4;
+	} else t4 = $[6];
+	const setTheme = t4;
+	let t5;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = () => {
+			setThemeState(_temp3);
+		};
+		$[7] = t5;
+	} else t5 = $[7];
+	const toggleTheme = t5;
+	let t6;
+	if ($[8] !== resolvedTheme || $[9] !== theme) {
+		t6 = {
+			theme,
+			resolvedTheme,
+			setTheme,
+			toggleTheme
+		};
+		$[8] = resolvedTheme;
+		$[9] = theme;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+}
+function _temp3(current) {
+	if (current === "light") return "dark";
+	if (current === "dark") return "system";
+	return "light";
+}
+function _temp2() {
+	return getSystemTheme();
+}
+function _temp() {
+	return getStoredTheme();
+}
+
+//#endregion
+export { useTheme };

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+import { THEME_STORAGE_KEY, createThemeScript } from "./lib/theme-script.mjs";
+import { cn } from "./lib/utils.mjs";
+export { THEME_STORAGE_KEY, cn, createThemeScript };

package/dist/index.mjs

@@ -0,0 +1,4 @@
+import { THEME_STORAGE_KEY, createThemeScript } from "./lib/theme-script.mjs";
+import { cn } from "./lib/utils.mjs";
+
+export { THEME_STORAGE_KEY, cn, createThemeScript };

package/dist/lib/theme-script.d.mts

@@ -0,0 +1,5 @@
+//#region src/lib/theme-script.d.ts
+declare const THEME_STORAGE_KEY = "theme";
+declare function createThemeScript(): string;
+//#endregion
+export { THEME_STORAGE_KEY, createThemeScript };

package/dist/lib/theme-script.mjs

@@ -0,0 +1,26 @@
+//#region src/lib/theme-script.ts
+const THEME_STORAGE_KEY = "theme";
+function createThemeScript() {
+	return `
+(function(){
+  try {
+    var key = "${THEME_STORAGE_KEY}";
+    var stored = localStorage.getItem(key);
+    var theme = stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+    var prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    var resolved = theme === "system" ? (prefersDark ? "dark" : "light") : theme;
+    var root = document.documentElement;
+    if (resolved === "dark") {
+      root.classList.add("dark");
+      root.style.colorScheme = "dark";
+    } else {
+      root.classList.remove("dark");
+      root.style.colorScheme = "light";
+    }
+  } catch (_) {}
+})();
+  `.trim();
+}
+
+//#endregion
+export { THEME_STORAGE_KEY, createThemeScript };

package/dist/lib/utils.d.mts

@@ -0,0 +1,6 @@
+import { ClassValue } from "clsx";
+
+//#region src/lib/utils.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { cn };

package/dist/lib/utils.mjs

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };