@ekkolyth/ui 0.1.17 → 0.1.19

package/dist/layout.d.ts

@@ -0,0 +1,2 @@
+import { t as Container } from "./index-Bwp0YMmG.js";
+export { Container };

package/dist/layout.js

@@ -0,0 +1,2 @@
+import { t as Container } from "./container-BBg21poC.js";
+export { Container };

package/dist/loading-screen-DB3youyT.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+//#region src/components/blocks/loading-screen/messages.json
+var messages_default = [
+	"Charging ultimate abilities...",
+	"Respawning loot crates...",
+	"Planting parsnips before the frost...",
+	"Calibrating matchmaking karma...",
+	"Untangling the grappling hook...",
+	"Sniffing out anomalies...",
+	"Respawning in 3... 2... 1...",
+	"Listening for enemy footsteps...",
+	"Nudging interstellar gravity...",
+	"Buffing team morale...",
+	"Locking in champion picks...",
+	"Queueing the daily reset...",
+	"Collecting cat hair for spells...",
+	"Tuning the loot tables...",
+	"Stoking the forge coals...",
+	"Feeding pixels to the server hamsters...",
+	"Compiling shaders... still compiling...",
+	"Rolling for RNG blessings...",
+	"Brewing a second pot...",
+	"Polishing the legendary spoon...",
+	"Reticulating quiet splines...",
+	"Petting the office goblin...",
+	"Negotiating with the cache...",
+	"Patching the patch notes...",
+	"Folding fitted sheets in zero-g...",
+	"Kerning the dragon's name...",
+	"Reading the changelog aloud...",
+	"Watering the office fern...",
+	"Dusting the achievement shelf...",
+	"Whispering to the rubber duck..."
+];
+//#endregion
+//#region src/components/blocks/loading-screen/index.tsx
+function LoadingScreen({ message, messages, rotationMs = 3e3 }) {
+	const catalog = messages ?? messages_default;
+	const [index, setIndex] = useState(0);
+	useEffect(() => {
+		if (message !== void 0 || catalog.length < 2) return;
+		const id = setInterval(() => {
+			setIndex((current) => (current + 1) % catalog.length);
+		}, rotationMs);
+		return () => clearInterval(id);
+	}, [
+		catalog.length,
+		message,
+		rotationMs
+	]);
+	const display = message ?? catalog[index] ?? "Loading...";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-full w-full flex-1 flex-col items-center justify-center gap-4 p-8",
+		children: [/* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ jsx("p", {
+			className: "max-w-sm text-center text-sm text-muted-foreground",
+			children: display
+		})]
+	});
+}
+//#endregion
+export { LoadingScreen as t };

package/dist/shiki-code-Bg__Vnt1.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { codeToHtml } from "shiki";
+//#region src/components/rich-text/shiki-code.tsx
+function ShikiCode({ code, language }) {
+	const [html, setHtml] = useState("");
+	useEffect(() => {
+		let cancelled = false;
+		codeToHtml(code, {
+			lang: language === "text" ? "plaintext" : language,
+			themes: {
+				light: "github-light",
+				dark: "github-dark"
+			},
+			defaultColor: false
+		}).then((out) => {
+			if (!cancelled) setHtml(out);
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [code, language]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded bg-muted p-3 text-sm",
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}
+//#endregion
+export { ShikiCode as default };

package/dist/text.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { JSONContent } from "@tiptap/core";
+//#region src/components/rich-text/types.d.ts
+type NodeRenderer = (props: {
+  node: JSONContent;
+  children: ReactNode;
+}) => ReactNode;
+type NodeRegistry = Record<string, NodeRenderer>;
+interface RichTextProps {
+  json: JSONContent;
+  nodes?: NodeRegistry;
+}
+//#endregion
+//#region src/components/rich-text/index.d.ts
+declare function RichText({ json, nodes }: RichTextProps): import("react").JSX.Element;
+//#endregion
+export { type NodeRegistry, type NodeRenderer, RichText, type RichTextProps };

package/dist/text.js

@@ -0,0 +1,177 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, Suspense, lazy } from "react";
+//#region src/components/rich-text/nodes.tsx
+const ShikiCode = lazy(() => import("./shiki-code-Bg__Vnt1.js"));
+const coreNodes = {
+	doc: ({ children }) => /* @__PURE__ */ jsx(Fragment, { children }),
+	paragraph: ({ children }) => /* @__PURE__ */ jsx("p", { children }),
+	heading: ({ node, children }) => {
+		const level = node.attrs?.level ?? 1;
+		if (level === 1) return /* @__PURE__ */ jsx("h1", { children });
+		if (level === 2) return /* @__PURE__ */ jsx("h2", { children });
+		return /* @__PURE__ */ jsx("h3", { children });
+	},
+	bulletList: ({ children }) => /* @__PURE__ */ jsx("ul", { children }),
+	orderedList: ({ children }) => /* @__PURE__ */ jsx("ol", { children }),
+	listItem: ({ children }) => /* @__PURE__ */ jsx("li", { children }),
+	taskList: ({ children }) => /* @__PURE__ */ jsx("ul", {
+		className: "list-none pl-0",
+		children
+	}),
+	taskItem: ({ node, children }) => /* @__PURE__ */ jsxs("li", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("input", {
+			checked: !!node.attrs?.checked,
+			readOnly: true,
+			type: "checkbox"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "[&>p]:m-0",
+			children
+		})]
+	}),
+	blockquote: ({ children }) => /* @__PURE__ */ jsx("blockquote", { children }),
+	table: ({ children }) => /* @__PURE__ */ jsx("div", {
+		className: "my-2 overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			className: "w-full border-collapse",
+			children: /* @__PURE__ */ jsx("tbody", { children })
+		})
+	}),
+	tableRow: ({ children }) => /* @__PURE__ */ jsx("tr", { children }),
+	tableHeader: ({ node, children }) => /* @__PURE__ */ jsx("th", {
+		className: "border px-2 py-1 text-left font-medium",
+		colSpan: node.attrs?.colspan ?? 1,
+		rowSpan: node.attrs?.rowspan ?? 1,
+		children
+	}),
+	tableCell: ({ node, children }) => /* @__PURE__ */ jsx("td", {
+		className: "border px-2 py-1",
+		colSpan: node.attrs?.colspan ?? 1,
+		rowSpan: node.attrs?.rowspan ?? 1,
+		children
+	}),
+	horizontalRule: () => /* @__PURE__ */ jsx("hr", {}),
+	text: ({ node }) => {
+		let out = node.text ?? "";
+		for (const mark of node.marks ?? []) {
+			if (mark.type === "bold") out = /* @__PURE__ */ jsx("strong", { children: out });
+			if (mark.type === "italic") out = /* @__PURE__ */ jsx("em", { children: out });
+			if (mark.type === "underline") out = /* @__PURE__ */ jsx("u", { children: out });
+			if (mark.type === "strike") out = /* @__PURE__ */ jsx("s", { children: out });
+			if (mark.type === "code") out = /* @__PURE__ */ jsx("code", { children: out });
+			if (mark.type === "link") out = /* @__PURE__ */ jsx("a", {
+				href: mark.attrs?.href,
+				rel: "noreferrer",
+				target: "_blank",
+				children: out
+			});
+		}
+		return /* @__PURE__ */ jsx("span", { children: out });
+	},
+	codeBlock: ({ node }) => /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx("pre", {
+			className: "rounded bg-muted p-3 text-sm",
+			children: node.attrs?.code
+		}),
+		children: /* @__PURE__ */ jsx(ShikiCode, {
+			code: node.attrs?.code ?? "",
+			language: node.attrs?.language ?? "text"
+		})
+	}),
+	callout: ({ children }) => /* @__PURE__ */ jsx("aside", {
+		className: "my-3 rounded-md border-l-4 border-l-info bg-info/10 px-3 py-2",
+		children
+	}),
+	toggle: ({ node, children }) => /* @__PURE__ */ jsxs("details", {
+		className: "my-2 rounded-md border",
+		children: [/* @__PURE__ */ jsx("summary", {
+			className: "cursor-pointer px-2 py-1 text-sm font-medium",
+			children: node.attrs?.title ?? "Toggle"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "px-6 pb-2",
+			children
+		})]
+	}),
+	bookmark: ({ node }) => {
+		const url = node.attrs?.url ?? "#";
+		const favicon = node.attrs?.favicon;
+		const title = node.attrs?.title || url;
+		const siteName = node.attrs?.siteName;
+		return /* @__PURE__ */ jsxs("a", {
+			className: "not-prose my-2 flex w-full items-center gap-3 rounded-md border px-3 py-1.5 leading-none no-underline",
+			href: url,
+			rel: "noreferrer",
+			target: "_blank",
+			children: [
+				favicon ? /* @__PURE__ */ jsx("img", {
+					alt: "",
+					className: "size-4 shrink-0",
+					src: favicon
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-sm font-medium",
+					children: title
+				}),
+				siteName ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-sm text-muted-foreground",
+					children: siteName
+				}) : null
+			]
+		});
+	},
+	videoEmbed: ({ node }) => /* @__PURE__ */ jsx("div", {
+		className: "my-2 aspect-video w-full overflow-hidden rounded-md",
+		children: /* @__PURE__ */ jsx("iframe", {
+			allowFullScreen: true,
+			className: "h-full w-full",
+			src: toEmbed(node.attrs?.url ?? ""),
+			title: "Embedded video"
+		})
+	}),
+	imageBlock: ({ node }) => {
+		const src = node.attrs?.src;
+		if (!src) return null;
+		return /* @__PURE__ */ jsx("img", {
+			alt: node.attrs?.alt ?? "",
+			className: "max-w-full rounded-md",
+			src
+		});
+	}
+};
+function toEmbed(url) {
+	try {
+		const parsed = new URL(url);
+		if (parsed.hostname.includes("youtube.com") || parsed.hostname === "youtu.be") {
+			const id = parsed.hostname === "youtu.be" ? parsed.pathname.slice(1) : parsed.searchParams.get("v") ?? "";
+			return id ? `https://www.youtube.com/embed/${id}` : url;
+		}
+		if (parsed.hostname.includes("vimeo.com")) {
+			const id = parsed.pathname.split("/").filter(Boolean).pop();
+			return id ? `https://player.vimeo.com/video/${id}` : url;
+		}
+		return url;
+	} catch {
+		return url;
+	}
+}
+//#endregion
+//#region src/components/rich-text/index.tsx
+function RichText({ json, nodes }) {
+	const registry = nodes ? {
+		...coreNodes,
+		...nodes
+	} : coreNodes;
+	return /* @__PURE__ */ jsx(Fragment, { children: renderNode(json, "root", registry) });
+}
+function renderNode(node, key, registry) {
+	if (!node) return null;
+	const children = (node.content ?? []).map((child, i) => renderNode(child, `${key}-${i}`, registry));
+	const Renderer = node.type ? registry[node.type] : void 0;
+	if (!Renderer) return /* @__PURE__ */ jsx(Fragment$1, { children }, key);
+	return /* @__PURE__ */ jsx(Renderer, {
+		node,
+		children
+	}, key);
+}
+//#endregion
+export { RichText };

package/dist/themes/catpuccin/frappe.css

@@ -1,35 +1,35 @@
 /* Catppuccin Frappe Theme - Dark Mode (Mauve accent) */
-html[data-theme="frappe"] {
-  --radius: 0.625rem;
-  --background: hsl(229 18.64% 23.14%); /* base */
-  --foreground: hsl(227 70.15% 86.86%); /* text */
-  --card: hsl(229 18.64% 23.14%); /* base */
-  --card-foreground: hsl(227 70.15% 86.86%); /* text */
-  --popover: hsl(229 18.64% 23.14%); /* base */
-  --popover-foreground: hsl(227 70.15% 86.86%); /* text */
-  --primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
-  --primary-foreground: hsl(229 18.64% 23.14%); /* base */
-  --secondary: hsl(230 15.58% 30.20%); /* surface0 */
-  --secondary-foreground: hsl(227 70.15% 86.86%); /* text */
-  --muted: hsl(230 15.58% 30.20%); /* surface0 */
-  --muted-foreground: hsl(227 43.69% 79.80%); /* subtext1 */
-  --accent: hsl(230 15.58% 30.20%); /* surface0 */
-  --accent-foreground: hsl(227 70.15% 86.86%); /* text */
-  --destructive: hsl(359 67.79% 70.78%); /* red */
-  --border: hsl(227 14.74% 37.25%); /* surface1 */
-  --input: hsl(227 14.74% 37.25%); /* surface1 */
-  --ring: hsl(227 70.15% 86.86%); /* text */
-  --chart-1: hsl(341 18.43% 40.00%); /* red */
-  --chart-2: hsl(191 18.43% 39.22%); /* teal */
-  --chart-3: hsl(224 23.53% 43.53%); /* blue */
-  --chart-4: hsl(31 9.41% 43.53%); /* yellow */
-  --chart-5: hsl(126 9.41% 41.18%); /* green */
-  --sidebar: hsl(229 18.82% 21.96%); /* mantle */
-  --sidebar-foreground: hsl(227 70.15% 86.86%); /* text */
-  --sidebar-primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
-  --sidebar-primary-foreground: hsl(229 18.64% 23.14%); /* base */
-  --sidebar-accent: hsl(229 18.64% 23.14%); /* surface0 */
-  --sidebar-accent-foreground: hsl(227 70.15% 86.86%); /* text */
-  --sidebar-border: hsl(227 14.74% 37.25%); /* surface1 */
-  --sidebar-ring: hsl(227 14.74% 37.25%); /* surface1 */
+html[data-theme='frappe'] {
+    --radius: 0.625rem;
+    --background: hsl(229 18.64% 23.14%); /* base */
+    --foreground: hsl(227 70.15% 86.86%); /* text */
+    --card: hsl(229 18.64% 23.14%); /* base */
+    --card-foreground: hsl(227 70.15% 86.86%); /* text */
+    --popover: hsl(229 18.64% 23.14%); /* base */
+    --popover-foreground: hsl(227 70.15% 86.86%); /* text */
+    --primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
+    --primary-foreground: hsl(229 18.64% 23.14%); /* base */
+    --secondary: hsl(230 15.58% 30.20%); /* surface0 */
+    --secondary-foreground: hsl(227 70.15% 86.86%); /* text */
+    --muted: hsl(230 15.58% 30.20%); /* surface0 */
+    --muted-foreground: hsl(227 43.69% 79.80%); /* subtext1 */
+    --accent: hsl(230 15.58% 30.20%); /* surface0 */
+    --accent-foreground: hsl(227 70.15% 86.86%); /* text */
+    --destructive: hsl(359 67.79% 70.78%); /* red */
+    --border: hsl(227 14.74% 37.25%); /* surface1 */
+    --input: hsl(227 14.74% 37.25%); /* surface1 */
+    --ring: hsl(227 70.15% 86.86%); /* text */
+    --chart-1: hsl(341 18.43% 40.00%); /* red */
+    --chart-2: hsl(191 18.43% 39.22%); /* teal */
+    --chart-3: hsl(224 23.53% 43.53%); /* blue */
+    --chart-4: hsl(31 9.41% 43.53%); /* yellow */
+    --chart-5: hsl(126 9.41% 41.18%); /* green */
+    --sidebar: hsl(229 18.82% 21.96%); /* mantle */
+    --sidebar-foreground: hsl(227 70.15% 86.86%); /* text */
+    --sidebar-primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
+    --sidebar-primary-foreground: hsl(229 18.64% 23.14%); /* base */
+    --sidebar-accent: hsl(229 18.64% 23.14%); /* surface0 */
+    --sidebar-accent-foreground: hsl(227 70.15% 86.86%); /* text */
+    --sidebar-border: hsl(227 14.74% 37.25%); /* surface1 */
+    --sidebar-ring: hsl(227 14.74% 37.25%); /* surface1 */
 }

package/dist/themes/catpuccin/latte.css

@@ -1,35 +1,35 @@
 /* Catppuccin Latte Theme - Light Mode (Mauve accent) */
-html[data-theme="latte"] {
-  --radius: 0.625rem;
-  --background: hsl(220 23.08% 94.90%); /* base */
-  --foreground: hsl(234 16.02% 35.49%); /* text */
-  --card: hsl(220 23.08% 94.90%); /* base */
-  --card-foreground: hsl(234 16.02% 35.49%); /* text */
-  --popover: hsl(220 23.08% 94.90%); /* base */
-  --popover-foreground: hsl(234 16.02% 35.49%); /* text */
-  --primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
-  --primary-foreground: hsl(220 23.08% 94.90%); /* base */
-  --secondary: hsl(223 15.91% 82.75%); /* surface0 */
-  --secondary-foreground: hsl(234 16.02% 35.49%); /* text */
-  --muted: hsl(223 15.91% 82.75%); /* surface0 */
-  --muted-foreground: hsl(233 12.80% 41.37%); /* subtext1 */
-  --accent: hsl(223 15.91% 82.75%); /* surface0 */
-  --accent-foreground: hsl(234 16.02% 35.49%); /* text */
-  --destructive: hsl(347 86.67% 44.12%); /* red */
-  --border: hsl(225 13.56% 76.86%); /* surface1 */
-  --input: hsl(225 13.56% 76.86%); /* surface1 */
-  --ring: hsl(234 16.02% 35.49%); /* text */
-  --chart-1: hsl(345 57.65% 74.12%); /* red */
-  --chart-2: hsl(185 37.25% 70.59%); /* teal */
-  --chart-3: hsl(219 81.96% 78.43%); /* blue */
-  --chart-4: hsl(35 61.18% 76.86%); /* yellow */
-  --chart-5: hsl(113 32.94% 73.33%); /* green */
-  --sidebar: hsl(218 25.10% 93.73%); /* mantle */
-  --sidebar-foreground: hsl(234 16.02% 35.49%); /* text */
-  --sidebar-primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
-  --sidebar-primary-foreground: hsl(220 23.08% 94.90%); /* base */
-  --sidebar-accent: hsl(220 23.08% 94.90%); /* surface0 */
-  --sidebar-accent-foreground: hsl(234 16.02% 35.49%); /* text */
-  --sidebar-border: hsl(225 13.56% 76.86%); /* surface1 */
-  --sidebar-ring: hsl(225 13.56% 76.86%); /* surface1 */
+html[data-theme='latte'] {
+    --radius: 0.625rem;
+    --background: hsl(220 23.08% 94.90%); /* base */
+    --foreground: hsl(234 16.02% 35.49%); /* text */
+    --card: hsl(220 23.08% 94.90%); /* base */
+    --card-foreground: hsl(234 16.02% 35.49%); /* text */
+    --popover: hsl(220 23.08% 94.90%); /* base */
+    --popover-foreground: hsl(234 16.02% 35.49%); /* text */
+    --primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
+    --primary-foreground: hsl(220 23.08% 94.90%); /* base */
+    --secondary: hsl(223 15.91% 82.75%); /* surface0 */
+    --secondary-foreground: hsl(234 16.02% 35.49%); /* text */
+    --muted: hsl(223 15.91% 82.75%); /* surface0 */
+    --muted-foreground: hsl(233 12.80% 41.37%); /* subtext1 */
+    --accent: hsl(223 15.91% 82.75%); /* surface0 */
+    --accent-foreground: hsl(234 16.02% 35.49%); /* text */
+    --destructive: hsl(347 86.67% 44.12%); /* red */
+    --border: hsl(225 13.56% 76.86%); /* surface1 */
+    --input: hsl(225 13.56% 76.86%); /* surface1 */
+    --ring: hsl(234 16.02% 35.49%); /* text */
+    --chart-1: hsl(345 57.65% 74.12%); /* red */
+    --chart-2: hsl(185 37.25% 70.59%); /* teal */
+    --chart-3: hsl(219 81.96% 78.43%); /* blue */
+    --chart-4: hsl(35 61.18% 76.86%); /* yellow */
+    --chart-5: hsl(113 32.94% 73.33%); /* green */
+    --sidebar: hsl(218 25.10% 93.73%); /* mantle */
+    --sidebar-foreground: hsl(234 16.02% 35.49%); /* text */
+    --sidebar-primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
+    --sidebar-primary-foreground: hsl(220 23.08% 94.90%); /* base */
+    --sidebar-accent: hsl(220 23.08% 94.90%); /* surface0 */
+    --sidebar-accent-foreground: hsl(234 16.02% 35.49%); /* text */
+    --sidebar-border: hsl(225 13.56% 76.86%); /* surface1 */
+    --sidebar-ring: hsl(225 13.56% 76.86%); /* surface1 */
 }

package/dist/themes/catpuccin/macchiato.css

@@ -1,35 +1,35 @@
 /* Catppuccin Macchiato Theme - Dark Mode (Mauve accent) */
-html[data-theme="macchiato"] {
-  --radius: 0.625rem;
-  --background: hsl(232 23.40% 18.43%); /* base */
-  --foreground: hsl(227 68.25% 87.65%); /* text */
-  --card: hsl(232 23.40% 18.43%); /* base */
-  --card-foreground: hsl(227 68.25% 87.65%); /* text */
-  --popover: hsl(232 23.40% 18.43%); /* base */
-  --popover-foreground: hsl(227 68.25% 87.65%); /* text */
-  --primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
-  --primary-foreground: hsl(232 23.40% 18.43%); /* base */
-  --secondary: hsl(230 18.80% 26.08%); /* surface0 */
-  --secondary-foreground: hsl(227 68.25% 87.65%); /* text */
-  --muted: hsl(230 18.80% 26.08%); /* surface0 */
-  --muted-foreground: hsl(228 39.22% 80.00%); /* subtext1 */
-  --accent: hsl(230 18.80% 26.08%); /* surface0 */
-  --accent-foreground: hsl(227 68.25% 87.65%); /* text */
-  --destructive: hsl(351 73.91% 72.94%); /* red */
-  --border: hsl(231 15.61% 33.92%); /* surface1 */
-  --input: hsl(231 15.61% 33.92%); /* surface1 */
-  --ring: hsl(227 68.25% 87.65%); /* text */
-  --chart-1: hsl(333 20.78% 38.04%); /* red */
-  --chart-2: hsl(193 19.61% 38.04%); /* teal */
-  --chart-3: hsl(224 26.67% 41.18%); /* blue */
-  --chart-4: hsl(30 8.24% 42.35%); /* yellow */
-  --chart-5: hsl(139 10.98% 38.82%); /* green */
-  --sidebar: hsl(234 22.75% 17.25%); /* mantle */
-  --sidebar-foreground: hsl(227 68.25% 87.65%); /* text */
-  --sidebar-primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
-  --sidebar-primary-foreground: hsl(232 23.40% 18.43%); /* base */
-  --sidebar-accent: hsl(232 23.40% 18.43%); /* surface0 */
-  --sidebar-accent-foreground: hsl(227 68.25% 87.65%); /* text */
-  --sidebar-border: hsl(231 15.61% 33.92%); /* surface1 */
-  --sidebar-ring: hsl(231 15.61% 33.92%); /* surface1 */
+html[data-theme='macchiato'] {
+    --radius: 0.625rem;
+    --background: hsl(232 23.40% 18.43%); /* base */
+    --foreground: hsl(227 68.25% 87.65%); /* text */
+    --card: hsl(232 23.40% 18.43%); /* base */
+    --card-foreground: hsl(227 68.25% 87.65%); /* text */
+    --popover: hsl(232 23.40% 18.43%); /* base */
+    --popover-foreground: hsl(227 68.25% 87.65%); /* text */
+    --primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
+    --primary-foreground: hsl(232 23.40% 18.43%); /* base */
+    --secondary: hsl(230 18.80% 26.08%); /* surface0 */
+    --secondary-foreground: hsl(227 68.25% 87.65%); /* text */
+    --muted: hsl(230 18.80% 26.08%); /* surface0 */
+    --muted-foreground: hsl(228 39.22% 80.00%); /* subtext1 */
+    --accent: hsl(230 18.80% 26.08%); /* surface0 */
+    --accent-foreground: hsl(227 68.25% 87.65%); /* text */
+    --destructive: hsl(351 73.91% 72.94%); /* red */
+    --border: hsl(231 15.61% 33.92%); /* surface1 */
+    --input: hsl(231 15.61% 33.92%); /* surface1 */
+    --ring: hsl(227 68.25% 87.65%); /* text */
+    --chart-1: hsl(333 20.78% 38.04%); /* red */
+    --chart-2: hsl(193 19.61% 38.04%); /* teal */
+    --chart-3: hsl(224 26.67% 41.18%); /* blue */
+    --chart-4: hsl(30 8.24% 42.35%); /* yellow */
+    --chart-5: hsl(139 10.98% 38.82%); /* green */
+    --sidebar: hsl(234 22.75% 17.25%); /* mantle */
+    --sidebar-foreground: hsl(227 68.25% 87.65%); /* text */
+    --sidebar-primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
+    --sidebar-primary-foreground: hsl(232 23.40% 18.43%); /* base */
+    --sidebar-accent: hsl(232 23.40% 18.43%); /* surface0 */
+    --sidebar-accent-foreground: hsl(227 68.25% 87.65%); /* text */
+    --sidebar-border: hsl(231 15.61% 33.92%); /* surface1 */
+    --sidebar-ring: hsl(231 15.61% 33.92%); /* surface1 */
 }

package/dist/themes/catpuccin/mocha.css

@@ -1,35 +1,35 @@
 /* Catppuccin Mocha Theme - Dark Mode (Mauve accent) */
-html[data-theme="mocha"] {
-  --radius: 0.625rem;
-  --background: hsl(240 21.05% 14.90%); /* base */
-  --foreground: hsl(226 63.93% 88.04%); /* text */
-  --card: hsl(240 21.05% 14.90%); /* base */
-  --card-foreground: hsl(226 63.93% 88.04%); /* text */
-  --popover: hsl(240 21.05% 14.90%); /* base */
-  --popover-foreground: hsl(226 63.93% 88.04%); /* text */
-  --primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
-  --primary-foreground: hsl(240 21.05% 14.90%); /* base */
-  --secondary: hsl(237 16.24% 22.94%); /* surface0 */
-  --secondary-foreground: hsl(226 63.93% 88.04%); /* text */
-  --muted: hsl(237 16.24% 22.94%); /* surface0 */
-  --muted-foreground: hsl(227 35.29% 80.00%); /* subtext1 */
-  --accent: hsl(237 16.24% 22.94%); /* surface0 */
-  --accent-foreground: hsl(226 63.93% 88.04%); /* text */
-  --destructive: hsl(343 81.25% 74.90%); /* red */
-  --border: hsl(234 13.21% 31.18%); /* surface1 */
-  --input: hsl(234 13.21% 31.18%); /* surface1 */
-  --ring: hsl(226 63.93% 88.04%); /* text */
-  --chart-1: hsl(329 21.57% 37.25%); /* red */
-  --chart-2: hsl(188 18.82% 37.25%); /* teal */
-  --chart-3: hsl(221 27.45% 39.61%); /* blue */
-  --chart-4: hsl(30 9.41% 42.35%); /* yellow */
-  --chart-5: hsl(139 12.94% 38.04%); /* green */
-  --sidebar: hsl(240 21.18% 14.12%); /* mantle */
-  --sidebar-foreground: hsl(226 63.93% 88.04%); /* text */
-  --sidebar-primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
-  --sidebar-primary-foreground: hsl(240 21.05% 14.90%); /* base */
-  --sidebar-accent: hsl(240 21.05% 14.90%); /* surface0 */
-  --sidebar-accent-foreground: hsl(226 63.93% 88.04%); /* text */
-  --sidebar-border: hsl(234 13.21% 31.18%); /* surface1 */
-  --sidebar-ring: hsl(234 13.21% 31.18%); /* surface1 */
+html[data-theme='mocha'] {
+    --radius: 0.625rem;
+    --background: hsl(240 21.05% 14.90%); /* base */
+    --foreground: hsl(226 63.93% 88.04%); /* text */
+    --card: hsl(240 21.05% 14.90%); /* base */
+    --card-foreground: hsl(226 63.93% 88.04%); /* text */
+    --popover: hsl(240 21.05% 14.90%); /* base */
+    --popover-foreground: hsl(226 63.93% 88.04%); /* text */
+    --primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
+    --primary-foreground: hsl(240 21.05% 14.90%); /* base */
+    --secondary: hsl(237 16.24% 22.94%); /* surface0 */
+    --secondary-foreground: hsl(226 63.93% 88.04%); /* text */
+    --muted: hsl(237 16.24% 22.94%); /* surface0 */
+    --muted-foreground: hsl(227 35.29% 80.00%); /* subtext1 */
+    --accent: hsl(237 16.24% 22.94%); /* surface0 */
+    --accent-foreground: hsl(226 63.93% 88.04%); /* text */
+    --destructive: hsl(343 81.25% 74.90%); /* red */
+    --border: hsl(234 13.21% 31.18%); /* surface1 */
+    --input: hsl(234 13.21% 31.18%); /* surface1 */
+    --ring: hsl(226 63.93% 88.04%); /* text */
+    --chart-1: hsl(329 21.57% 37.25%); /* red */
+    --chart-2: hsl(188 18.82% 37.25%); /* teal */
+    --chart-3: hsl(221 27.45% 39.61%); /* blue */
+    --chart-4: hsl(30 9.41% 42.35%); /* yellow */
+    --chart-5: hsl(139 12.94% 38.04%); /* green */
+    --sidebar: hsl(240 21.18% 14.12%); /* mantle */
+    --sidebar-foreground: hsl(226 63.93% 88.04%); /* text */
+    --sidebar-primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
+    --sidebar-primary-foreground: hsl(240 21.05% 14.90%); /* base */
+    --sidebar-accent: hsl(240 21.05% 14.90%); /* surface0 */
+    --sidebar-accent-foreground: hsl(226 63.93% 88.04%); /* text */
+    --sidebar-border: hsl(234 13.21% 31.18%); /* surface1 */
+    --sidebar-ring: hsl(234 13.21% 31.18%); /* surface1 */
 }