@datum-cloud/datum-ui 0.1.1 → 0.2.0-alpha.1

package/dist/theme.provider-DpFLwtHe.mjs

@@ -0,0 +1,134 @@
+import * as React$1 from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+//#region src/components/themes/theme.provider.tsx
+const colorSchemes = ["light", "dark"];
+const MEDIA = "(prefers-color-scheme: dark)";
+const isServer = typeof window === "undefined";
+const ThemeContext = React$1.createContext(void 0);
+const defaultContext = {
+	setTheme: (_) => {},
+	themes: []
+};
+function saveToLS(storageKey, value) {
+	try {
+		localStorage.setItem(storageKey, value);
+	} catch {}
+}
+const useTheme = () => React$1.use(ThemeContext) ?? defaultContext;
+function ThemeProvider(props) {
+	if (React$1.use(ThemeContext)) return /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
+	return /* @__PURE__ */ jsx(ThemeImpl, { ...props });
+}
+const defaultThemes = ["light", "dark"];
+function ThemeImpl({ forcedTheme, disableTransitionOnChange = false, enableSystem = true, enableColorScheme = true, storageKey = "theme", themes = defaultThemes, defaultTheme = enableSystem ? "system" : "light", attribute = "data-theme", value, children, nonce, scriptProps: _scriptProps }) {
+	const [theme, setThemeState] = React$1.useState(() => isServer ? defaultTheme : getTheme(storageKey, defaultTheme));
+	const [resolvedTheme, setResolvedTheme] = React$1.useState(() => {
+		if (isServer) return defaultTheme === "dark" ? "dark" : "light";
+		return theme === "system" ? getSystemTheme() : theme;
+	});
+	const attrs = !value ? themes : Object.values(value);
+	const applyTheme = React$1.useCallback((theme) => {
+		let resolved = theme;
+		if (!resolved) return;
+		if (theme === "system" && enableSystem) resolved = getSystemTheme();
+		const name = value ? value[resolved] : resolved;
+		const enable = disableTransitionOnChange ? disableAnimation(nonce) : null;
+		const d = document.documentElement;
+		const handleAttribute = (attr) => {
+			if (attr === "class") {
+				d.classList.remove(...attrs.flatMap((a) => a.split(" ")));
+				if (name) d.classList.add(...name.split(" "));
+			} else if (attr.startsWith("data-")) if (name) d.setAttribute(attr, name);
+			else d.removeAttribute(attr);
+		};
+		if (Array.isArray(attribute)) attribute.forEach(handleAttribute);
+		else handleAttribute(attribute);
+		if (enableColorScheme) {
+			const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null;
+			const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback;
+			d.style.colorScheme = colorScheme;
+		}
+		enable?.();
+	}, [nonce]);
+	const setTheme = React$1.useCallback((value) => {
+		if (typeof value === "function") setThemeState((prevTheme) => {
+			const newTheme = value(prevTheme);
+			saveToLS(storageKey, newTheme);
+			return newTheme;
+		});
+		else {
+			setThemeState(value);
+			saveToLS(storageKey, value);
+		}
+	}, []);
+	const handleMediaQuery = React$1.useCallback((e) => {
+		setResolvedTheme(getSystemTheme(e));
+		if (theme === "system" && enableSystem && !forcedTheme) applyTheme("system");
+	}, [theme, forcedTheme]);
+	React$1.useEffect(() => {
+		if (typeof window === "undefined") return;
+		const media = window.matchMedia(MEDIA);
+		media.addListener(handleMediaQuery);
+		handleMediaQuery(media);
+		return () => media.removeListener(handleMediaQuery);
+	}, [handleMediaQuery]);
+	React$1.useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleStorage = (e) => {
+			if (e.key !== storageKey) return;
+			if (!e.newValue) setTheme(defaultTheme);
+			else setThemeState(e.newValue);
+		};
+		window.addEventListener("storage", handleStorage);
+		return () => window.removeEventListener("storage", handleStorage);
+	}, [setTheme]);
+	React$1.useEffect(() => {
+		if (typeof window !== "undefined") applyTheme(forcedTheme ?? theme);
+	}, [forcedTheme, theme]);
+	return /* @__PURE__ */ jsx(ThemeContext, {
+		value: React$1.useMemo(() => ({
+			theme,
+			setTheme,
+			forcedTheme,
+			resolvedTheme: theme === "system" ? resolvedTheme : theme,
+			themes: enableSystem ? [...themes, "system"] : themes,
+			systemTheme: enableSystem ? resolvedTheme : void 0
+		}), [
+			theme,
+			setTheme,
+			forcedTheme,
+			resolvedTheme,
+			enableSystem,
+			themes
+		]),
+		children
+	});
+}
+function getTheme(key, fallback) {
+	if (isServer) return void 0;
+	let theme;
+	try {
+		theme = localStorage.getItem(key) || void 0;
+	} catch {}
+	return theme || fallback;
+}
+function disableAnimation(nonce) {
+	const css = document.createElement("style");
+	if (nonce) css.setAttribute("nonce", nonce);
+	css.appendChild(document.createTextNode(`*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`));
+	document.head.appendChild(css);
+	return () => {
+		window.getComputedStyle(document.body);
+		setTimeout(() => {
+			document.head.removeChild(css);
+		}, 1);
+	};
+}
+function getSystemTheme(e) {
+	if (!e) e = window.matchMedia(MEDIA);
+	return e.matches ? "dark" : "light";
+}
+
+//#endregion
+export { useTheme as n, ThemeProvider as t };

package/dist/use-copy-to-clipboard-BfrpD6G8.mjs

@@ -0,0 +1,116 @@
+import { t as cn } from "./cn-DWCc1QRE.mjs";
+import { t as CloseIcon } from "./close.icon-chkXPAUC.mjs";
+import { createElement, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+
+//#region src/components/features/toast/headless-toast.tsx
+const variantAccentClass = {
+	message: "bg-toast-success-background text-toast-success-foreground",
+	info: "bg-toast-success-background text-toast-success-foreground",
+	success: "bg-toast-success-background text-toast-success-foreground",
+	warning: "bg-toast-error-background text-toast-error-foreground",
+	error: "bg-toast-error-background text-toast-error-foreground"
+};
+const variantIconClass = {
+	message: "fill-toast-success-icon",
+	info: "fill-toast-success-icon",
+	success: "fill-toast-success-icon",
+	warning: "fill-toast-error-icon",
+	error: "fill-toast-error-icon"
+};
+function HeadlessToast({ variant, title, description, onDismiss }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("bg-background text-foreground pointer-events-auto w-90 max-w-[calc(100vw-2rem)] overflow-hidden rounded-[10px]", "grid grid-cols-[1fr_auto] px-5 py-4 text-xs", variantAccentClass[variant]),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative flex w-full flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "font-semibold",
+					children: title
+				}),
+				description ? /* @__PURE__ */ jsx("div", { children: description }) : null,
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onDismiss,
+					"aria-label": "Dismiss notification",
+					className: "absolute -top-1.5 -right-2.5 transition-opacity hover:opacity-90",
+					children: /* @__PURE__ */ jsx(CloseIcon, {
+						className: "size-4.5",
+						fill: variantIconClass[variant]
+					})
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+//#region src/components/features/toast/toast.ts
+const defaultOptions = {
+	message: { duration: 5e3 },
+	success: { duration: 5e3 },
+	error: { duration: Infinity },
+	info: { duration: 5e3 },
+	warning: { duration: 5e3 }
+};
+function show(variant, title, options) {
+	const { description, action: _action, cancel: _cancel, ...sonnerOptions } = {
+		...defaultOptions[variant],
+		...options
+	};
+	const resolvedDescription = typeof description === "function" ? description() : description;
+	return toast.custom((t) => createElement(HeadlessToast, {
+		variant,
+		title,
+		description: resolvedDescription,
+		onDismiss: () => toast.dismiss(t)
+	}), sonnerOptions);
+}
+const toast$1 = {
+	message: (title, options) => {
+		return show("message", title, options);
+	},
+	success: (title, options) => {
+		return show("success", title, options);
+	},
+	error: (title, options) => {
+		return show("error", title, options);
+	},
+	info: (title, options) => {
+		return show("info", title, options);
+	},
+	warning: (title, options) => {
+		return show("warning", title, options);
+	}
+};
+
+//#endregion
+//#region src/hooks/use-copy-to-clipboard.ts
+function useCopyToClipboard() {
+	const [isCopied, setIsCopied] = useState(false);
+	const timeoutRef = useRef(null);
+	useEffect(() => {
+		return () => {
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return [isCopied, useCallback(async (text, options) => {
+		if (!navigator?.clipboard) return false;
+		try {
+			await navigator.clipboard.writeText(text);
+			setIsCopied(true);
+			if (options?.withToast) toast$1.success(options.toastMessage ?? "Copied to clipboard");
+			timeoutRef.current = setTimeout(() => {
+				setIsCopied(false);
+			}, 2e3);
+			return true;
+		} catch {
+			setIsCopied(false);
+			return false;
+		}
+	}, [])];
+}
+
+//#endregion
+export { toast$1 as n, useCopyToClipboard as t };

package/dist/use-debounce-BYB-jPeX.mjs

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+//#region src/hooks/use-debounce.ts
+/**
+* Custom hook that debounces a value
+* @param value - The value to debounce
+* @param delay - The delay in milliseconds
+* @returns The debounced value
+*/
+function useDebounce(value, delay) {
+	const [debouncedValue, setDebouncedValue] = useState(value);
+	useEffect(() => {
+		const handler = setTimeout(() => {
+			setDebouncedValue(value);
+		}, delay);
+		return () => {
+			clearTimeout(handler);
+		};
+	}, [value, delay]);
+	return debouncedValue;
+}
+
+//#endregion
+export { useDebounce as t };

package/dist/utils/cn.d.ts

@@ -0,0 +1,3 @@
+import type { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

package/dist/utils/cn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/utils/cn.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAA;AAItC,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { cn } from './cn';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA"}

package/dist/utils/index.mjs

@@ -0,0 +1,4 @@
+import '../style.css';
+import { t as cn } from "../cn-DWCc1QRE.mjs";
+
+export { cn };

package/package.json

@@ -1,83 +1,236 @@
 {
   "name": "@datum-cloud/datum-ui",
-  "version": "0.1.1",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "type": "module",
+  "version": "0.2.0-alpha.1",
   "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
   },
-  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "default": "./dist/index.mjs"
     },
-    "./styles": {
-      "default": "./src/styles/root.css"
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "default": "./dist/components/index.mjs"
     },
-    "./styles/*": {
-      "default": "./src/styles/*"
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "default": "./dist/providers/index.mjs"
     },
-    "./styles/*/*": {
-      "default": "./src/styles/*/*"
-    }
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "default": "./dist/hooks/index.mjs"
+    },
+    "./icons": {
+      "types": "./dist/components/icons/index.d.ts",
+      "default": "./dist/icons/index.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.mjs"
+    },
+    "./styles": "./dist/style.css"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
-    "dist",
-    "src/styles",
+    "LICENSE",
     "README.md",
-    "LICENSE"
+    "dist"
   ],
-  "devDependencies": {
-    "@types/react": "^19.2.3",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^8.57.0",
-    "prettier": "^3.8.1",
-    "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
-    "@types/nprogress": "^0.2.3",
-    "react": "^19.2.3",
-    "tsup": "^8.5.1",
-    "typescript": "5.9.3",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/tailwind-config": "0.0.0",
-    "@repo/shadcn": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+  "peerDependencies": {
+    "@conform-to/react": ">=1",
+    "@conform-to/zod": ">=1",
+    "@radix-ui/react-avatar": ">=1",
+    "@radix-ui/react-checkbox": ">=1",
+    "@radix-ui/react-collapsible": ">=1",
+    "@radix-ui/react-dialog": ">=1",
+    "@radix-ui/react-dropdown-menu": ">=2",
+    "@radix-ui/react-hover-card": ">=1",
+    "@radix-ui/react-label": ">=2",
+    "@radix-ui/react-popover": ">=1",
+    "@radix-ui/react-radio-group": ">=1",
+    "@radix-ui/react-select": ">=2",
+    "@radix-ui/react-separator": ">=1",
+    "@radix-ui/react-slot": ">=1",
+    "@radix-ui/react-switch": ">=1",
+    "@radix-ui/react-tabs": ">=1",
+    "@radix-ui/react-tooltip": ">=1",
+    "@radix-ui/react-visually-hidden": ">=1",
+    "@stepperize/react": ">=4",
+    "@tanstack/react-virtual": ">=3",
+    "cmdk": ">=1",
+    "date-fns": ">=4",
+    "date-fns-tz": ">=3",
+    "motion": ">=11",
+    "nprogress": ">=0.2",
+    "react": ">=19",
+    "react-day-picker": ">=9",
+    "react-dom": ">=19",
+    "react-dropzone": ">=14",
+    "react-number-format": ">=5",
+    "recharts": ">=2",
+    "sonner": ">=2",
+    "zod": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "@conform-to/react": {
+      "optional": true
+    },
+    "@conform-to/zod": {
+      "optional": true
+    },
+    "@radix-ui/react-avatar": {
+      "optional": true
+    },
+    "@radix-ui/react-checkbox": {
+      "optional": true
+    },
+    "@radix-ui/react-collapsible": {
+      "optional": true
+    },
+    "@radix-ui/react-dialog": {
+      "optional": true
+    },
+    "@radix-ui/react-dropdown-menu": {
+      "optional": true
+    },
+    "@radix-ui/react-hover-card": {
+      "optional": true
+    },
+    "@radix-ui/react-label": {
+      "optional": true
+    },
+    "@radix-ui/react-popover": {
+      "optional": true
+    },
+    "@radix-ui/react-radio-group": {
+      "optional": true
+    },
+    "@radix-ui/react-select": {
+      "optional": true
+    },
+    "@radix-ui/react-separator": {
+      "optional": true
+    },
+    "@radix-ui/react-slot": {
+      "optional": true
+    },
+    "@radix-ui/react-switch": {
+      "optional": true
+    },
+    "@radix-ui/react-tabs": {
+      "optional": true
+    },
+    "@radix-ui/react-tooltip": {
+      "optional": true
+    },
+    "@radix-ui/react-visually-hidden": {
+      "optional": true
+    },
+    "@stepperize/react": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "optional": true
+    },
+    "cmdk": {
+      "optional": true
+    },
+    "date-fns": {
+      "optional": true
+    },
+    "date-fns-tz": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    },
+    "nprogress": {
+      "optional": true
+    },
+    "react-day-picker": {
+      "optional": true
+    },
+    "react-dropzone": {
+      "optional": true
+    },
+    "react-number-format": {
+      "optional": true
+    },
+    "recharts": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "dependencies": {
+    "class-variance-authority": "^0.7",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.556",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@bosh-code/tsdown-plugin-tailwindcss": "^1.0.1",
+    "@conform-to/react": "^1.17.1",
+    "@conform-to/zod": "^1.17.1",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@stepperize/react": "^3.0.0",
-    "class-variance-authority": "^0.7.1",
-    "lucide-react": "^0.556.0",
+    "@stepperize/react": "^6.1.0",
+    "@tailwindcss/node": "^4.2.1",
+    "@tailwindcss/oxide": "^4.2.1",
+    "@tanstack/react-virtual": "^3.13.19",
+    "@testing-library/jest-dom": "^6",
+    "@testing-library/react": "^16",
+    "@testing-library/user-event": "^14",
+    "@types/nprogress": "^0.2.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
+    "eslint": "^9.39.3",
+    "jsdom": "^26",
+    "motion": "^12.34.4",
     "nprogress": "^0.2.0",
+    "react": "^19",
+    "react-day-picker": "^9.14.0",
+    "react-dom": "^19",
+    "react-dropzone": "^15.0.0",
+    "react-number-format": "^5.4.4",
     "sonner": "^2.0.7",
-    "tailwind-scrollbar-hide": "^2.0.0"
-  },
-  "peerDependencies": {
-    "react": ">=18",
-    "react-router": "^7.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react-router": {
-      "optional": true
-    }
+    "tailwindcss": "^4.2.1",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9",
+    "vitest": "^3",
+    "zod": "^4.3.6",
+    "@repo/config": "0.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint . --max-warnings 0",
-    "clean": "rm -rf .turbo node_modules dist"
+    "build": "tsdown --config-loader native && tsc -p tsconfig.build.json && node scripts/fix-dts-imports.mjs && cp -r src/styles/fonts dist/fonts",
+    "dev": "tsdown --config-loader native --watch",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "clean": "rm -rf dist .turbo node_modules coverage"
   }
 }