xiod-ui 1.0.0

package/dist/hooks/use-copy-to-clipboard.d.ts

@@ -0,0 +1,9 @@
+//#region src/hooks/use-copy-to-clipboard.d.ts
+export declare function useCopyToClipboard({ timeout, onCopy }?: {
+  timeout?: number;
+  onCopy?: () => void;
+}): {
+  copyToClipboard: (value: string) => void;
+  isCopied: boolean;
+};
+//#endregion

package/dist/hooks/use-copy-to-clipboard.js

@@ -0,0 +1,36 @@
+"use client";
+import * as React$1 from "react";
+//#region src/hooks/use-copy-to-clipboard.ts
+function useCopyToClipboard({ timeout = 2e3, onCopy } = {}) {
+	const [isCopied, setIsCopied] = React$1.useState(false);
+	const timeoutIdRef = React$1.useRef(null);
+	const copyToClipboard = (value) => {
+		if (typeof window === "undefined" || !navigator.clipboard.writeText) return;
+		if (!value) return;
+		(async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+				setIsCopied(true);
+				onCopy?.();
+				if (timeout !== 0) timeoutIdRef.current = setTimeout(() => {
+					setIsCopied(false);
+					timeoutIdRef.current = null;
+				}, timeout);
+			} catch (error) {
+				console.error(error);
+			}
+		})();
+	};
+	React$1.useEffect(() => {
+		return () => {
+			if (timeoutIdRef.current) clearTimeout(timeoutIdRef.current);
+		};
+	}, []);
+	return {
+		copyToClipboard,
+		isCopied
+	};
+}
+//#endregion
+export { useCopyToClipboard };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,21 @@
+//#region src/hooks/use-media-query.d.ts
+declare const BREAKPOINTS: {
+  readonly "2xl": 1536;
+  readonly "3xl": 1600;
+  readonly "4xl": 2000;
+  readonly lg: 1024;
+  readonly md: 800;
+  readonly sm: 640;
+  readonly xl: 1280;
+};
+type Breakpoint = keyof typeof BREAKPOINTS;
+type BreakpointQuery = Breakpoint | `max-${Breakpoint}` | `${Breakpoint}:max-${Breakpoint}`;
+export type MediaQueryInput = {
+  min?: Breakpoint | number;
+  max?: Breakpoint | number;
+  /** Touch-like input (finger). Use "fine" for mouse/trackpad. */
+  pointer?: "coarse" | "fine";
+};
+export declare function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string & {})): boolean;
+export declare function useIsMobile(): boolean;
+//#endregion

package/dist/hooks/use-media-query.js

@@ -0,0 +1,58 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/hooks/use-media-query.ts
+const BREAKPOINTS = {
+	"2xl": 1536,
+	"3xl": 1600,
+	"4xl": 2e3,
+	lg: 1024,
+	md: 800,
+	sm: 640,
+	xl: 1280
+};
+function resolveMin(value) {
+	return `(min-width: ${typeof value === "number" ? value : BREAKPOINTS[value]}px)`;
+}
+function resolveMax(value) {
+	return `(max-width: ${(typeof value === "number" ? value : BREAKPOINTS[value]) - 1}px)`;
+}
+function parseQuery(query) {
+	if (typeof query !== "string") {
+		const parts = [];
+		if (query.min != null) parts.push(resolveMin(query.min));
+		if (query.max != null) parts.push(resolveMax(query.max));
+		if (query.pointer === "coarse") parts.push("(pointer: coarse)");
+		if (query.pointer === "fine") parts.push("(pointer: fine)");
+		if (parts.length === 0) return "(min-width: 0px)";
+		return parts.join(" and ");
+	}
+	if (query.startsWith("(")) return query;
+	const parts = [];
+	for (const segment of query.split(":")) if (segment.startsWith("max-")) {
+		const bp = segment.slice(4);
+		if (bp in BREAKPOINTS) parts.push(resolveMax(bp));
+	} else if (segment in BREAKPOINTS) parts.push(resolveMin(segment));
+	return parts.length > 0 ? parts.join(" and ") : query;
+}
+function getServerSnapshot() {
+	return false;
+}
+function useMediaQuery(query) {
+	const mediaQuery = parseQuery(query);
+	const subscribe = useCallback((callback) => {
+		if (typeof window === "undefined") return () => {};
+		const mql = window.matchMedia(mediaQuery);
+		mql.addEventListener("change", callback);
+		return () => mql.removeEventListener("change", callback);
+	}, [mediaQuery]);
+	const getSnapshot = useCallback(() => {
+		if (typeof window === "undefined") return false;
+		return window.matchMedia(mediaQuery).matches;
+	}, [mediaQuery]);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+function useIsMobile() {
+	return useMediaQuery("max-md");
+}
+//#endregion
+export { useIsMobile, useMediaQuery };

package/dist/styles.css

@@ -0,0 +1,202 @@
+/**
+ * XiodUI — design system stylesheet.
+ *
+ * Usage in your app's global CSS (Tailwind CSS 4 required):
+ *
+ *   @import "tailwindcss";
+ *   @import "xiod-ui/styles";
+ *
+ * This file provides:
+ *   - the `dark` variant (class-based)
+ *   - semantic design tokens for light + dark
+ *   - the `@theme` mappings that expose those tokens as Tailwind utilities
+ *     (bg-background, text-muted-foreground, border-border, …)
+ *   - the few keyframes/utilities XiodUI components rely on
+ *
+ * It also registers XiodUI's compiled output as a Tailwind source, so the
+ * utility classes used inside the components are generated in your build.
+ */
+
+@source "../dist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --animate-skeleton: skeleton 2s -1s infinite linear;
+
+  @keyframes skeleton {
+    to {
+      background-position: -200% 0;
+    }
+  }
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: var(--color-white);
+  --foreground: var(--color-neutral-800);
+  --card: var(--color-white);
+  --card-foreground: var(--color-neutral-800);
+  --popover: var(--color-white);
+  --popover-foreground: var(--color-neutral-800);
+  --primary: var(--color-neutral-800);
+  --primary-foreground: var(--color-neutral-50);
+  --secondary: --alpha(var(--color-black) / 4%);
+  --secondary-foreground: var(--color-neutral-800);
+  --muted: --alpha(var(--color-black) / 4%);
+  --muted-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-500) 90%,
+    var(--color-black)
+  );
+  --accent: --alpha(var(--color-black) / 4%);
+  --accent-foreground: var(--color-neutral-800);
+  --destructive: var(--color-red-500);
+  --destructive-foreground: var(--color-red-700);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-700);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-700);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-700);
+  --border: --alpha(var(--color-black) / 8%);
+  --input: --alpha(var(--color-black) / 10%);
+  --ring: var(--color-neutral-400);
+  --sidebar: var(--color-neutral-50);
+  --sidebar-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-800) 64%,
+    var(--sidebar)
+  );
+  --sidebar-primary: var(--color-neutral-800);
+  --sidebar-primary-foreground: var(--color-neutral-50);
+  --sidebar-accent: --alpha(var(--color-black) / 4%);
+  --sidebar-accent-foreground: var(--color-neutral-800);
+  --sidebar-border: --alpha(var(--color-black) / 6%);
+  --sidebar-ring: var(--color-neutral-400);
+  --dashed: #b8b8b8;
+}
+
+.dark {
+  --background: color-mix(
+    in srgb,
+    var(--color-neutral-950) 95%,
+    var(--color-white)
+  );
+  --foreground: var(--color-neutral-100);
+  --card: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  --card-foreground: var(--color-neutral-100);
+  --popover: color-mix(in srgb, var(--background) 98%, var(--color-white));
+  --popover-foreground: var(--color-neutral-100);
+  --primary: var(--color-neutral-100);
+  --primary-foreground: var(--color-neutral-800);
+  --secondary: --alpha(var(--color-white) / 4%);
+  --secondary-foreground: var(--color-neutral-100);
+  --muted: --alpha(var(--color-white) / 4%);
+  --muted-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-500) 90%,
+    var(--color-white)
+  );
+  --accent: --alpha(var(--color-white) / 4%);
+  --accent-foreground: var(--color-neutral-100);
+  --destructive: color-mix(
+    in srgb,
+    var(--color-red-500) 90%,
+    var(--color-white)
+  );
+  --destructive-foreground: var(--color-red-400);
+  --info: var(--color-blue-500);
+  --info-foreground: var(--color-blue-400);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-400);
+  --warning: var(--color-amber-500);
+  --warning-foreground: var(--color-amber-400);
+  --border: --alpha(var(--color-white) / 6%);
+  --input: --alpha(var(--color-white) / 8%);
+  --ring: var(--color-neutral-500);
+  --sidebar: color-mix(
+    in srgb,
+    var(--color-neutral-950) 97%,
+    var(--color-white)
+  );
+  --sidebar-foreground: color-mix(
+    in srgb,
+    var(--color-neutral-100) 64%,
+    var(--sidebar)
+  );
+  --sidebar-primary: var(--color-neutral-100);
+  --sidebar-primary-foreground: var(--color-neutral-800);
+  --sidebar-accent: --alpha(var(--color-white) / 4%);
+  --sidebar-accent-foreground: var(--color-neutral-100);
+  --sidebar-border: --alpha(var(--color-white) / 5%);
+  --sidebar-ring: var(--color-neutral-400);
+  --dashed: #292929;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+}
+
+/* Used by Loader / streaming text components. */
+@keyframes shimmer-sweep {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.shimmer-text {
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, var(--foreground) 40%, transparent) 0%,
+    color-mix(in srgb, var(--foreground) 40%, transparent) 40%,
+    var(--foreground) 50%,
+    color-mix(in srgb, var(--foreground) 40%, transparent) 60%,
+    color-mix(in srgb, var(--foreground) 40%, transparent) 100%
+  );
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer-sweep 5s infinite linear;
+}

package/dist/themes/afterglow.css

@@ -0,0 +1,89 @@
+/**
+ * Afterglow — Sunset warmth by day, cerulean by night.
+ *
+ * GENERATED by scripts/build-themes.ts from scripts/palettes.ts.
+ * Do not edit; your changes will be overwritten on the next build.
+ *
+ * Usage:
+ *
+ *   @import "tailwindcss";
+ *   @import "xiod-ui/styles";
+ *   @import "xiod-ui/themes/afterglow";
+ *
+ * Overrides the base tokens directly, so no attribute on `<html>` is needed.
+ * Your own `:root` block placed after this import still wins — same
+ * specificity, later in source order.
+ */
+
+:root {
+  --radius: 0.75rem;
+  --background: #f7f6fb;
+  --foreground: #1a1a33;
+  --card: #ffffff;
+  --card-foreground: #1a1a33;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a33;
+  --primary: #c93f1c;
+  --primary-foreground: #ffffff;
+  --secondary: #cfe4f5;
+  --secondary-foreground: #10405e;
+  --muted: #eeedf5;
+  --muted-foreground: #5a5a78;
+  --accent: #ffe0ec;
+  --accent-foreground: #7a1f47;
+  --destructive: #b81d3f;
+  --destructive-foreground: #8f1630;
+  --info: #3d4bb5;
+  --info-foreground: #2b3789;
+  --success: #2f7d57;
+  --success-foreground: #235d40;
+  --warning: #a86a12;
+  --warning-foreground: #85540e;
+  --border: #e4e2ee;
+  --input: #cfcce0;
+  --ring: #c93f1c;
+  --sidebar: #f2f0fa;
+  --sidebar-foreground: #454460;
+  --sidebar-primary: #c93f1c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e9e6f5;
+  --sidebar-accent-foreground: #1a1a33;
+  --sidebar-border: #e6e3f0;
+  --sidebar-ring: #c93f1c;
+}
+
+.dark {
+  --background: #0d1030;
+  --foreground: #e8eafc;
+  --card: #151a42;
+  --card-foreground: #e8eafc;
+  --popover: #151a42;
+  --popover-foreground: #e8eafc;
+  --primary: #4fc3f7;
+  --primary-foreground: #04243a;
+  --secondary: #4a2436;
+  --secondary-foreground: #ffc9a8;
+  --muted: #141834;
+  --muted-foreground: #9ba0c8;
+  --accent: #2a2a5e;
+  --accent-foreground: #e8eafc;
+  --destructive: #c9432f;
+  --destructive-foreground: #f2a08d;
+  --info: #7f8cff;
+  --info-foreground: #a8b2ff;
+  --success: #6fcf97;
+  --success-foreground: #9be0b5;
+  --warning: #ffb74d;
+  --warning-foreground: #ffd08a;
+  --border: #262b55;
+  --input: #343a6e;
+  --ring: #4fc3f7;
+  --sidebar: #090b26;
+  --sidebar-foreground: #b6bbdd;
+  --sidebar-primary: #4fc3f7;
+  --sidebar-primary-foreground: #04243a;
+  --sidebar-accent: #12163a;
+  --sidebar-accent-foreground: #e8eafc;
+  --sidebar-border: #1b1f47;
+  --sidebar-ring: #4fc3f7;
+}

package/dist/themes/afterglow.scoped.css

@@ -0,0 +1,90 @@
+/**
+ * Afterglow — Sunset warmth by day, cerulean by night.
+ *
+ * GENERATED by scripts/build-themes.ts from scripts/palettes.ts.
+ * Do not edit; your changes will be overwritten on the next build.
+ *
+ * Usage:
+ *
+ *   @import "tailwindcss";
+ *   @import "xiod-ui/styles";
+ *   @import "xiod-ui/themes/afterglow/scoped";
+ *
+ * Applies only where `data-palette="afterglow"` is set. Use this form when your
+ * app switches palettes at runtime — pass `defaultPalette` to ThemeProvider
+ * and call `setPalette("afterglow")` from `useTheme()`. For a single fixed
+ * palette import "xiod-ui/themes/afterglow" instead, which needs no attribute.
+ */
+
+[data-palette="afterglow"] {
+  --radius: 0.75rem;
+  --background: #f7f6fb;
+  --foreground: #1a1a33;
+  --card: #ffffff;
+  --card-foreground: #1a1a33;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a33;
+  --primary: #c93f1c;
+  --primary-foreground: #ffffff;
+  --secondary: #cfe4f5;
+  --secondary-foreground: #10405e;
+  --muted: #eeedf5;
+  --muted-foreground: #5a5a78;
+  --accent: #ffe0ec;
+  --accent-foreground: #7a1f47;
+  --destructive: #b81d3f;
+  --destructive-foreground: #8f1630;
+  --info: #3d4bb5;
+  --info-foreground: #2b3789;
+  --success: #2f7d57;
+  --success-foreground: #235d40;
+  --warning: #a86a12;
+  --warning-foreground: #85540e;
+  --border: #e4e2ee;
+  --input: #cfcce0;
+  --ring: #c93f1c;
+  --sidebar: #f2f0fa;
+  --sidebar-foreground: #454460;
+  --sidebar-primary: #c93f1c;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #e9e6f5;
+  --sidebar-accent-foreground: #1a1a33;
+  --sidebar-border: #e6e3f0;
+  --sidebar-ring: #c93f1c;
+}
+
+.dark[data-palette="afterglow"] {
+  --background: #0d1030;
+  --foreground: #e8eafc;
+  --card: #151a42;
+  --card-foreground: #e8eafc;
+  --popover: #151a42;
+  --popover-foreground: #e8eafc;
+  --primary: #4fc3f7;
+  --primary-foreground: #04243a;
+  --secondary: #4a2436;
+  --secondary-foreground: #ffc9a8;
+  --muted: #141834;
+  --muted-foreground: #9ba0c8;
+  --accent: #2a2a5e;
+  --accent-foreground: #e8eafc;
+  --destructive: #c9432f;
+  --destructive-foreground: #f2a08d;
+  --info: #7f8cff;
+  --info-foreground: #a8b2ff;
+  --success: #6fcf97;
+  --success-foreground: #9be0b5;
+  --warning: #ffb74d;
+  --warning-foreground: #ffd08a;
+  --border: #262b55;
+  --input: #343a6e;
+  --ring: #4fc3f7;
+  --sidebar: #090b26;
+  --sidebar-foreground: #b6bbdd;
+  --sidebar-primary: #4fc3f7;
+  --sidebar-primary-foreground: #04243a;
+  --sidebar-accent: #12163a;
+  --sidebar-accent-foreground: #e8eafc;
+  --sidebar-border: #1b1f47;
+  --sidebar-ring: #4fc3f7;
+}

package/dist/themes/blacklight.css

@@ -0,0 +1,89 @@
+/**
+ * Blacklight — Ultraviolet, acid green and hot pink.
+ *
+ * GENERATED by scripts/build-themes.ts from scripts/palettes.ts.
+ * Do not edit; your changes will be overwritten on the next build.
+ *
+ * Usage:
+ *
+ *   @import "tailwindcss";
+ *   @import "xiod-ui/styles";
+ *   @import "xiod-ui/themes/blacklight";
+ *
+ * Overrides the base tokens directly, so no attribute on `<html>` is needed.
+ * Your own `:root` block placed after this import still wins — same
+ * specificity, later in source order.
+ */
+
+:root {
+  --radius: 0.75rem;
+  --background: #f7f3ff;
+  --foreground: #1f1233;
+  --card: #fdfbff;
+  --card-foreground: #1f1233;
+  --popover: #fdfbff;
+  --popover-foreground: #1f1233;
+  --primary: #7b16d6;
+  --primary-foreground: #ffffff;
+  --secondary: #d9ffb0;
+  --secondary-foreground: #2e4a05;
+  --muted: #f0eaf9;
+  --muted-foreground: #5f5178;
+  --accent: #ffd6f5;
+  --accent-foreground: #78156a;
+  --destructive: #c4204f;
+  --destructive-foreground: #9a1a3e;
+  --info: #4a3fc4;
+  --info-foreground: #342c94;
+  --success: #3f7a2e;
+  --success-foreground: #2e5a22;
+  --warning: #9c6a0a;
+  --warning-foreground: #7d5408;
+  --border: #e8dff5;
+  --input: #d5c7e8;
+  --ring: #7b16d6;
+  --sidebar: #f3edfc;
+  --sidebar-foreground: #453a5c;
+  --sidebar-primary: #7b16d6;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ece2f8;
+  --sidebar-accent-foreground: #1f1233;
+  --sidebar-border: #e9e0f6;
+  --sidebar-ring: #7b16d6;
+}
+
+.dark {
+  --background: #0d0418;
+  --foreground: #f0e4ff;
+  --card: #170a26;
+  --card-foreground: #f0e4ff;
+  --popover: #170a26;
+  --popover-foreground: #f0e4ff;
+  --primary: #e05aff;
+  --primary-foreground: #22003d;
+  --secondary: #1f3d0a;
+  --secondary-foreground: #c4ff70;
+  --muted: #150a20;
+  --muted-foreground: #a893bd;
+  --accent: #3d0a35;
+  --accent-foreground: #ff9ae8;
+  --destructive: #d92b4a;
+  --destructive-foreground: #ff9aad;
+  --info: #7f8cff;
+  --info-foreground: #a8b2ff;
+  --success: #8fff5c;
+  --success-foreground: #b5ff94;
+  --warning: #ffcc33;
+  --warning-foreground: #ffe08a;
+  --border: #26113a;
+  --input: #35194f;
+  --ring: #e05aff;
+  --sidebar: #08020f;
+  --sidebar-foreground: #bda8cf;
+  --sidebar-primary: #e05aff;
+  --sidebar-primary-foreground: #22003d;
+  --sidebar-accent: #130820;
+  --sidebar-accent-foreground: #f0e4ff;
+  --sidebar-border: #1c0d2b;
+  --sidebar-ring: #e05aff;
+}

package/dist/themes/blacklight.scoped.css

@@ -0,0 +1,90 @@
+/**
+ * Blacklight — Ultraviolet, acid green and hot pink.
+ *
+ * GENERATED by scripts/build-themes.ts from scripts/palettes.ts.
+ * Do not edit; your changes will be overwritten on the next build.
+ *
+ * Usage:
+ *
+ *   @import "tailwindcss";
+ *   @import "xiod-ui/styles";
+ *   @import "xiod-ui/themes/blacklight/scoped";
+ *
+ * Applies only where `data-palette="blacklight"` is set. Use this form when your
+ * app switches palettes at runtime — pass `defaultPalette` to ThemeProvider
+ * and call `setPalette("blacklight")` from `useTheme()`. For a single fixed
+ * palette import "xiod-ui/themes/blacklight" instead, which needs no attribute.
+ */
+
+[data-palette="blacklight"] {
+  --radius: 0.75rem;
+  --background: #f7f3ff;
+  --foreground: #1f1233;
+  --card: #fdfbff;
+  --card-foreground: #1f1233;
+  --popover: #fdfbff;
+  --popover-foreground: #1f1233;
+  --primary: #7b16d6;
+  --primary-foreground: #ffffff;
+  --secondary: #d9ffb0;
+  --secondary-foreground: #2e4a05;
+  --muted: #f0eaf9;
+  --muted-foreground: #5f5178;
+  --accent: #ffd6f5;
+  --accent-foreground: #78156a;
+  --destructive: #c4204f;
+  --destructive-foreground: #9a1a3e;
+  --info: #4a3fc4;
+  --info-foreground: #342c94;
+  --success: #3f7a2e;
+  --success-foreground: #2e5a22;
+  --warning: #9c6a0a;
+  --warning-foreground: #7d5408;
+  --border: #e8dff5;
+  --input: #d5c7e8;
+  --ring: #7b16d6;
+  --sidebar: #f3edfc;
+  --sidebar-foreground: #453a5c;
+  --sidebar-primary: #7b16d6;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ece2f8;
+  --sidebar-accent-foreground: #1f1233;
+  --sidebar-border: #e9e0f6;
+  --sidebar-ring: #7b16d6;
+}
+
+.dark[data-palette="blacklight"] {
+  --background: #0d0418;
+  --foreground: #f0e4ff;
+  --card: #170a26;
+  --card-foreground: #f0e4ff;
+  --popover: #170a26;
+  --popover-foreground: #f0e4ff;
+  --primary: #e05aff;
+  --primary-foreground: #22003d;
+  --secondary: #1f3d0a;
+  --secondary-foreground: #c4ff70;
+  --muted: #150a20;
+  --muted-foreground: #a893bd;
+  --accent: #3d0a35;
+  --accent-foreground: #ff9ae8;
+  --destructive: #d92b4a;
+  --destructive-foreground: #ff9aad;
+  --info: #7f8cff;
+  --info-foreground: #a8b2ff;
+  --success: #8fff5c;
+  --success-foreground: #b5ff94;
+  --warning: #ffcc33;
+  --warning-foreground: #ffe08a;
+  --border: #26113a;
+  --input: #35194f;
+  --ring: #e05aff;
+  --sidebar: #08020f;
+  --sidebar-foreground: #bda8cf;
+  --sidebar-primary: #e05aff;
+  --sidebar-primary-foreground: #22003d;
+  --sidebar-accent: #130820;
+  --sidebar-accent-foreground: #f0e4ff;
+  --sidebar-border: #1c0d2b;
+  --sidebar-ring: #e05aff;
+}