@datum-cloud/datum-ui 0.1.0 → 0.2.0-alpha.0

package/dist/theme.provider-DpFLwtHe.mjs

@@ -0,0 +1,135 @@
+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 };
+//# sourceMappingURL=theme.provider-DpFLwtHe.mjs.map

package/dist/theme.provider-DpFLwtHe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.provider-DpFLwtHe.mjs","names":["React"],"sources":["../src/components/themes/theme.provider.tsx"],"sourcesContent":["'use client'\n\nimport type { Attribute, Theme, ThemeProviderProps, UseThemeProps } from './types'\nimport * as React from 'react'\n\nconst colorSchemes = ['light', 'dark']\nconst MEDIA = '(prefers-color-scheme: dark)'\nconst isServer = typeof window === 'undefined'\nconst ThemeContext = React.createContext<UseThemeProps | undefined>(undefined)\nconst defaultContext: UseThemeProps = {\n  setTheme: (_: Theme | ((theme: Theme) => Theme)) => {},\n  themes: [],\n}\n\nfunction saveToLS(storageKey: string, value: string) {\n  // Save to storage\n  try {\n    localStorage.setItem(storageKey, value)\n  }\n  catch {\n    // Unsupported\n  }\n}\n\nexport const useTheme = () => React.use(ThemeContext) ?? defaultContext\n\nexport function ThemeProvider(props: ThemeProviderProps) {\n  const context = React.use(ThemeContext)\n\n  // Ignore nested context providers, just passthrough children\n  if (context)\n    return <>{props.children}</>\n  return <ThemeImpl {...props} />\n}\n\nconst defaultThemes = ['light', 'dark']\n\nfunction ThemeImpl({\n  forcedTheme,\n  disableTransitionOnChange = false,\n  enableSystem = true,\n  enableColorScheme = true,\n  storageKey = 'theme',\n  themes = defaultThemes,\n  defaultTheme = enableSystem ? 'system' : 'light',\n  attribute = 'data-theme',\n  value,\n  children,\n  nonce,\n  scriptProps: _scriptProps,\n}: ThemeProviderProps) {\n  const [theme, setThemeState] = React.useState<Theme>(\n    () => (isServer ? defaultTheme : getTheme(storageKey, defaultTheme)) as Theme,\n  )\n  const [resolvedTheme, setResolvedTheme] = React.useState<'light' | 'dark'>(() => {\n    if (isServer)\n      return defaultTheme === 'dark' ? 'dark' : 'light'\n    return (theme === 'system' ? getSystemTheme() : theme) as 'light' | 'dark'\n  })\n  const attrs = !value ? themes : Object.values(value)\n\n  const applyTheme = React.useCallback(\n    (theme: string) => {\n      let resolved = theme\n      if (!resolved)\n        return\n\n      // If theme is system, resolve it before setting theme\n      if (theme === 'system' && enableSystem) {\n        resolved = getSystemTheme()\n      }\n\n      const name = value ? value[resolved] : resolved\n      const enable = disableTransitionOnChange ? disableAnimation(nonce) : null\n      const d = document.documentElement\n\n      const handleAttribute = (attr: Attribute) => {\n        if (attr === 'class') {\n          d.classList.remove(...attrs.flatMap(a => a.split(' ')))\n          if (name)\n            d.classList.add(...name.split(' '))\n        }\n        else if (attr.startsWith('data-')) {\n          if (name) {\n            d.setAttribute(attr, name)\n          }\n          else {\n            d.removeAttribute(attr)\n          }\n        }\n      }\n\n      if (Array.isArray(attribute))\n        attribute.forEach(handleAttribute)\n      else handleAttribute(attribute)\n\n      if (enableColorScheme) {\n        const fallback = colorSchemes.includes(defaultTheme) ? defaultTheme : null\n        const colorScheme = colorSchemes.includes(resolved) ? resolved : fallback\n        // @ts-expect-error -- colorScheme may be null but style.colorScheme accepts it\n        d.style.colorScheme = colorScheme\n      }\n\n      enable?.()\n    },\n    [nonce],\n  )\n\n  const setTheme = React.useCallback((value: Theme | ((theme: Theme) => Theme)) => {\n    if (typeof value === 'function') {\n      setThemeState((prevTheme) => {\n        const newTheme = value(prevTheme)\n        saveToLS(storageKey, newTheme)\n        return newTheme\n      })\n    }\n    else {\n      setThemeState(value)\n      saveToLS(storageKey, value)\n    }\n  }, [])\n\n  const handleMediaQuery = React.useCallback(\n    (e: MediaQueryListEvent | MediaQueryList) => {\n      const resolved = getSystemTheme(e)\n      setResolvedTheme(resolved)\n\n      if (theme === 'system' && enableSystem && !forcedTheme) {\n        applyTheme('system')\n      }\n    },\n    [theme, forcedTheme],\n  )\n\n  // Always listen to System preference\n  React.useEffect(() => {\n    if (typeof window === 'undefined')\n      return\n\n    const media = window.matchMedia(MEDIA)\n\n    // Intentionally use deprecated listener methods to support iOS & old browsers\n    media.addListener(handleMediaQuery)\n    handleMediaQuery(media)\n\n    return () => media.removeListener(handleMediaQuery)\n  }, [handleMediaQuery])\n\n  // localStorage event handling\n  React.useEffect(() => {\n    if (typeof window === 'undefined')\n      return\n\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key !== storageKey) {\n        return\n      }\n\n      // If default theme set, use it if localstorage === null (happens on local storage manual deletion)\n      if (!e.newValue) {\n        setTheme(defaultTheme)\n      }\n      else {\n        setThemeState(e.newValue as Theme) // Direct state update to avoid loops\n      }\n    }\n\n    window.addEventListener('storage', handleStorage)\n    return () => window.removeEventListener('storage', handleStorage)\n  }, [setTheme])\n\n  // Whenever theme or forcedTheme changes, apply it\n  React.useEffect(() => {\n    if (typeof window !== 'undefined') {\n      applyTheme(forcedTheme ?? theme)\n    }\n  }, [forcedTheme, theme])\n\n  const providerValue = React.useMemo(\n    () => ({\n      theme,\n      setTheme,\n      forcedTheme,\n      resolvedTheme: (theme === 'system' ? resolvedTheme : theme) as Theme,\n      themes: enableSystem ? [...themes, 'system'] : themes,\n      systemTheme: (enableSystem ? resolvedTheme : undefined) as 'light' | 'dark' | undefined,\n    }),\n    [theme, setTheme, forcedTheme, resolvedTheme, enableSystem, themes],\n  )\n\n  return <ThemeContext value={providerValue}>{children}</ThemeContext>\n}\n\n// Helpers\nfunction getTheme(key: string, fallback?: string): string | undefined {\n  if (isServer)\n    return undefined\n  let theme\n  try {\n    theme = localStorage.getItem(key) || undefined\n  }\n  catch {\n    // Unsupported\n  }\n  return theme || fallback\n}\n\nfunction disableAnimation(nonce?: string) {\n  const css = document.createElement('style')\n  if (nonce)\n    css.setAttribute('nonce', nonce)\n  css.appendChild(\n    document.createTextNode(\n      `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`,\n    ),\n  )\n  document.head.appendChild(css)\n\n  return () => {\n    // Force restyle\n    (() => window.getComputedStyle(document.body))()\n\n    // Wait for next tick before removing\n    setTimeout(() => {\n      document.head.removeChild(css)\n    }, 1)\n  }\n}\n\nfunction getSystemTheme(e?: MediaQueryList | MediaQueryListEvent) {\n  if (!e)\n    e = window.matchMedia(MEDIA)\n  const isDark = e.matches\n  const systemTheme = isDark ? 'dark' : 'light'\n  return systemTheme\n}\n"],"mappings":"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"}

package/dist/types-BoL47uxV.d.mts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+//#region src/components/themes/types.d.ts
+type Theme = 'light' | 'dark' | 'system';
+type ThemeStyle = 'alpha' | 'default' | 'experimental';
+type Attribute = 'class' | `data-${string}`;
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  themes?: string[];
+  forcedTheme?: Theme;
+  enableSystem?: boolean;
+  disableTransitionOnChange?: boolean;
+  enableColorScheme?: boolean;
+  attribute?: Attribute | Attribute[];
+  value?: Record<string, string>;
+  nonce?: string;
+  scriptProps?: {
+    [key: string]: any;
+  };
+}
+interface UseThemeProps {
+  theme?: Theme;
+  setTheme: (theme: Theme | ((theme: Theme) => Theme)) => void;
+  forcedTheme?: Theme;
+  resolvedTheme?: Theme;
+  themes: string[];
+  systemTheme?: 'light' | 'dark';
+  themeStyle?: ThemeStyle;
+}
+//#endregion
+export { UseThemeProps as i, ThemeProviderProps as n, ThemeStyle as r, Theme as t };
+//# sourceMappingURL=types-BoL47uxV.d.mts.map

package/dist/types-BoL47uxV.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-BoL47uxV.d.mts","names":[],"sources":["../src/components/themes/types.ts"],"mappings":";;;KAEY,KAAA;AAAA,KAEA,UAAA;AAAA,KAEA,SAAA;AAAA,UAEK,kBAAA;EACf,QAAA,EAAU,SAAA;EACV,YAAA,GAAe,KAAA;EACf,UAAA;EACA,MAAA;EACA,WAAA,GAAc,KAAA;EACd,YAAA;EACA,yBAAA;EACA,iBAAA;EACA,SAAA,GAAY,SAAA,GAAY,SAAA;EACxB,KAAA,GAAQ,MAAA;EACR,KAAA;EACA,WAAA;IAAA,CACG,GAAA;EAAA;AAAA;AAAA,UAIY,aAAA;EACf,KAAA,GAAQ,KAAA;EACR,QAAA,GAAW,KAAA,EAAO,KAAA,KAAU,KAAA,EAAO,KAAA,KAAU,KAAA;EAC7C,WAAA,GAAc,KAAA;EACd,aAAA,GAAgB,KAAA;EAChB,MAAA;EACA,WAAA;EACA,UAAA,GAAa,UAAA;AAAA"}

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

@@ -0,0 +1,117 @@
+import { t as CloseIcon } from "./close.icon-DgjsP0sw.mjs";
+import { cn } from "@repo/shadcn/lib/utils";
+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 };
+//# sourceMappingURL=use-copy-to-clipboard-D5U8bWsn.mjs.map

package/dist/use-copy-to-clipboard-D5U8bWsn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-to-clipboard-D5U8bWsn.mjs","names":["sonnerToast","toast"],"sources":["../src/components/features/toast/headless-toast.tsx","../src/components/features/toast/toast.ts","../src/hooks/use-copy-to-clipboard.ts"],"sourcesContent":["import { cn } from '@repo/shadcn/lib/utils'\nimport * as React from 'react'\nimport { CloseIcon } from '../../icons/close.icon'\n\nexport type HeadlessToastVariant = 'message' | 'success' | 'error' | 'info' | 'warning'\n\nexport interface HeadlessToastProps {\n  variant: HeadlessToastVariant\n  title: string\n  description?: React.ReactNode\n  onDismiss: () => void\n}\n\nconst variantAccentClass: Record<HeadlessToastVariant, string> = {\n  message: 'bg-toast-success-background text-toast-success-foreground',\n  info: 'bg-toast-success-background text-toast-success-foreground',\n  success: 'bg-toast-success-background text-toast-success-foreground',\n  warning: 'bg-toast-error-background text-toast-error-foreground',\n  error: 'bg-toast-error-background text-toast-error-foreground',\n}\n\nconst variantIconClass: Record<HeadlessToastVariant, string> = {\n  message: 'fill-toast-success-icon',\n  info: 'fill-toast-success-icon',\n  success: 'fill-toast-success-icon',\n  warning: 'fill-toast-error-icon',\n  error: 'fill-toast-error-icon',\n}\n\nexport function HeadlessToast({ variant, title, description, onDismiss }: HeadlessToastProps) {\n  return (\n    <div\n      className={cn(\n        'bg-background text-foreground pointer-events-auto w-90 max-w-[calc(100vw-2rem)] overflow-hidden rounded-[10px]',\n        'grid grid-cols-[1fr_auto] px-5 py-4 text-xs',\n        variantAccentClass[variant],\n      )}\n    >\n      <div className=\"relative flex w-full flex-col gap-1\">\n        <div className=\"font-semibold\">{title}</div>\n        {description ? <div>{description}</div> : null}\n\n        <button\n          type=\"button\"\n          onClick={onDismiss}\n          aria-label=\"Dismiss notification\"\n          className=\"absolute -top-1.5 -right-2.5 transition-opacity hover:opacity-90\"\n        >\n          <CloseIcon className=\"size-4.5\" fill={variantIconClass[variant]} />\n        </button>\n      </div>\n    </div>\n  )\n}\n","import type { ExternalToast } from 'sonner'\nimport type { HeadlessToastVariant } from './headless-toast'\nimport { createElement } from 'react'\nimport { toast as sonnerToast } from 'sonner'\nimport { HeadlessToast } from './headless-toast'\n\nconst defaultOptions = {\n  message: { duration: 5000 },\n  success: { duration: 5000 },\n  error: { duration: Infinity },\n  info: { duration: 5000 },\n  warning: { duration: 5000 },\n}\n\nfunction show(variant: HeadlessToastVariant, title: string, options?: ExternalToast) {\n  const merged = { ...defaultOptions[variant], ...options }\n  const {\n    description,\n    action: _action,\n    cancel: _cancel,\n    ...sonnerOptions\n  } = merged as ExternalToast\n  const resolvedDescription = typeof description === 'function' ? description() : description\n\n  return sonnerToast.custom(\n    (t: string | number) =>\n      createElement(HeadlessToast, {\n        variant,\n        title,\n        description: resolvedDescription,\n        onDismiss: () => sonnerToast.dismiss(t),\n      }),\n    sonnerOptions,\n  )\n}\n\nexport const toast = {\n  message: (title: string, options?: ExternalToast) => {\n    return show('message', title, options)\n  },\n  success: (title: string, options?: ExternalToast) => {\n    return show('success', title, options)\n  },\n  error: (title: string, options?: ExternalToast) => {\n    return show('error', title, options)\n  },\n  info: (title: string, options?: ExternalToast) => {\n    return show('info', title, options)\n  },\n  warning: (title: string, options?: ExternalToast) => {\n    return show('warning', title, options)\n  },\n}\n","import { useCallback, useEffect, useRef, useState } from 'react'\nimport { toast } from '../components/features/toast'\n\ninterface CopyOptions {\n  withToast?: boolean\n  toastMessage?: string\n}\n\ntype CopyFn = (text: string, options?: CopyOptions) => Promise<boolean>\n\nexport function useCopyToClipboard(): [boolean, CopyFn] {\n  const [isCopied, setIsCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current)\n      }\n    }\n  }, [])\n\n  const copy: CopyFn = useCallback(async (text, options) => {\n    if (!navigator?.clipboard) {\n      return false\n    }\n\n    try {\n      await navigator.clipboard.writeText(text)\n      setIsCopied(true)\n\n      if (options?.withToast) {\n        toast.success(options.toastMessage ?? 'Copied to clipboard')\n      }\n\n      timeoutRef.current = setTimeout(() => {\n        setIsCopied(false)\n      }, 2000)\n\n      return true\n    }\n    catch {\n      setIsCopied(false)\n      return false\n    }\n  }, [])\n\n  return [isCopied, copy]\n}\n"],"mappings":";;;;;;;AAaA,MAAM,qBAA2D;CAC/D,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACR;AAED,MAAM,mBAAyD;CAC7D,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACR;AAED,SAAgB,cAAc,EAAE,SAAS,OAAO,aAAa,aAAiC;AAC5F,QACE,oBAAC;EACC,WAAW,GACT,kHACA,+CACA,mBAAmB,SACpB;YAED,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eAAiB;MAAY;IAC3C,cAAc,oBAAC,mBAAK,cAAkB,GAAG;IAE1C,oBAAC;KACC,MAAK;KACL,SAAS;KACT,cAAW;KACX,WAAU;eAEV,oBAAC;MAAU,WAAU;MAAW,MAAM,iBAAiB;OAAY;MAC5D;;IACL;GACF;;;;;AC7CV,MAAM,iBAAiB;CACrB,SAAS,EAAE,UAAU,KAAM;CAC3B,SAAS,EAAE,UAAU,KAAM;CAC3B,OAAO,EAAE,UAAU,UAAU;CAC7B,MAAM,EAAE,UAAU,KAAM;CACxB,SAAS,EAAE,UAAU,KAAM;CAC5B;AAED,SAAS,KAAK,SAA+B,OAAe,SAAyB;CAEnF,MAAM,EACJ,aACA,QAAQ,SACR,QAAQ,SACR,GAAG,kBALU;EAAE,GAAG,eAAe;EAAU,GAAG;EAAS;CAOzD,MAAM,sBAAsB,OAAO,gBAAgB,aAAa,aAAa,GAAG;AAEhF,QAAOA,MAAY,QAChB,MACC,cAAc,eAAe;EAC3B;EACA;EACA,aAAa;EACb,iBAAiBA,MAAY,QAAQ,EAAE;EACxC,CAAC,EACJ,cACD;;AAGH,MAAaC,UAAQ;CACnB,UAAU,OAAe,YAA4B;AACnD,SAAO,KAAK,WAAW,OAAO,QAAQ;;CAExC,UAAU,OAAe,YAA4B;AACnD,SAAO,KAAK,WAAW,OAAO,QAAQ;;CAExC,QAAQ,OAAe,YAA4B;AACjD,SAAO,KAAK,SAAS,OAAO,QAAQ;;CAEtC,OAAO,OAAe,YAA4B;AAChD,SAAO,KAAK,QAAQ,OAAO,QAAQ;;CAErC,UAAU,OAAe,YAA4B;AACnD,SAAO,KAAK,WAAW,OAAO,QAAQ;;CAEzC;;;;AC1CD,SAAgB,qBAAwC;CACtD,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,aAAa,OAA8B,KAAK;AAEtD,iBAAgB;AACd,eAAa;AACX,OAAI,WAAW,QACb,cAAa,WAAW,QAAQ;;IAGnC,EAAE,CAAC;AA2BN,QAAO,CAAC,UAzBa,YAAY,OAAO,MAAM,YAAY;AACxD,MAAI,CAAC,WAAW,UACd,QAAO;AAGT,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,KAAK;AACzC,eAAY,KAAK;AAEjB,OAAI,SAAS,UACX,SAAM,QAAQ,QAAQ,gBAAgB,sBAAsB;AAG9D,cAAW,UAAU,iBAAiB;AACpC,gBAAY,MAAM;MACjB,IAAK;AAER,UAAO;UAEH;AACJ,eAAY,MAAM;AAClB,UAAO;;IAER,EAAE,CAAC,CAEiB"}

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

@@ -0,0 +1,25 @@
+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 };
+//# sourceMappingURL=use-debounce-BYB-jPeX.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce-BYB-jPeX.mjs","names":[],"sources":["../src/hooks/use-debounce.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\n/**\n * Custom hook that debounces a value\n * @param value - The value to debounce\n * @param delay - The delay in milliseconds\n * @returns The debounced value\n */\nexport function useDebounce<T>(value: T, delay: number): T {\n  const [debouncedValue, setDebouncedValue] = useState<T>(value)\n\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => {\n      clearTimeout(handler)\n    }\n  }, [value, delay])\n\n  return debouncedValue\n}\n"],"mappings":";;;;;;;;;AAQA,SAAgB,YAAe,OAAU,OAAkB;CACzD,MAAM,CAAC,gBAAgB,qBAAqB,SAAY,MAAM;AAE9D,iBAAgB;EACd,MAAM,UAAU,iBAAiB;AAC/B,qBAAkB,MAAM;KACvB,MAAM;AAET,eAAa;AACX,gBAAa,QAAQ;;IAEtB,CAAC,OAAO,MAAM,CAAC;AAElB,QAAO"}

package/dist/use-debounce-Dg9zNz9U.d.mts

@@ -0,0 +1,19 @@
+//#region src/hooks/use-copy-to-clipboard.d.ts
+interface CopyOptions {
+  withToast?: boolean;
+  toastMessage?: string;
+}
+type CopyFn = (text: string, options?: CopyOptions) => Promise<boolean>;
+declare function useCopyToClipboard(): [boolean, CopyFn];
+//#endregion
+//#region src/hooks/use-debounce.d.ts
+/**
+ * Custom hook that debounces a value
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds
+ * @returns The debounced value
+ */
+declare function useDebounce<T>(value: T, delay: number): T;
+//#endregion
+export { useCopyToClipboard as n, useDebounce as t };
+//# sourceMappingURL=use-debounce-Dg9zNz9U.d.mts.map

package/dist/use-debounce-Dg9zNz9U.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce-Dg9zNz9U.d.mts","names":[],"sources":["../src/hooks/use-copy-to-clipboard.ts","../src/hooks/use-debounce.ts"],"mappings":";UAGU,WAAA;EACR,SAAA;EACA,YAAA;AAAA;AAAA,KAGG,MAAA,IAAU,IAAA,UAAc,OAAA,GAAU,WAAA,KAAgB,OAAA;AAAA,iBAEvC,kBAAA,CAAA,aAAgC,MAAA;;;;;;;;;iBCFhC,WAAA,GAAA,CAAe,KAAA,EAAO,CAAA,EAAG,KAAA,WAAgB,CAAA"}

package/dist/utils/index.d.mts

@@ -0,0 +1,3 @@
+import '../style.css';
+import { cn } from "@repo/shadcn/lib/utils";
+export { cn };

package/dist/utils/index.mjs

@@ -0,0 +1,4 @@
+import '../style.css';
+import { cn } from "@repo/shadcn/lib/utils";
+
+export { cn };

package/package.json

@@ -1,80 +1,159 @@
 {
   "name": "@datum-cloud/datum-ui",
-  "version": "0.1.0",
+  "type": "module",
+  "version": "0.2.0-alpha.0",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/datum-cloud/datum-ui"
+  },
   "sideEffects": [
     "**/*.css"
   ],
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
     },
-    "./styles": {
-      "default": "./src/styles/root.css"
+    "./components": {
+      "types": "./dist/components/index.d.mts",
+      "default": "./dist/components/index.mjs"
     },
-    "./styles/*": {
-      "default": "./src/styles/*"
+    "./providers": {
+      "types": "./dist/providers/index.d.mts",
+      "default": "./dist/providers/index.mjs"
     },
-    "./styles/*/*": {
-      "default": "./src/styles/*/*"
-    }
+    "./hooks": {
+      "types": "./dist/hooks/index.d.mts",
+      "default": "./dist/hooks/index.mjs"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.mts",
+      "default": "./dist/icons/index.mjs"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.mts",
+      "default": "./dist/utils/index.mjs"
+    },
+    "./styles": "./dist/style.css"
   },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "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/typescript-config": "0.0.0",
-    "@repo/shadcn": "0.0.0",
-    "@repo/tailwind-config": "0.0.0"
+  "peerDependencies": {
+    "@conform-to/react": ">=1",
+    "@conform-to/zod": ">=1",
+    "@stepperize/react": ">=4",
+    "@tanstack/react-virtual": ">=3",
+    "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",
+    "zod": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "@conform-to/react": {
+      "optional": true
+    },
+    "@conform-to/zod": {
+      "optional": true
+    },
+    "@stepperize/react": {
+      "optional": true
+    },
+    "@tanstack/react-virtual": {
+      "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
+    },
+    "zod": {
+      "optional": true
+    }
   },
   "dependencies": {
+    "class-variance-authority": "^0.7",
+    "lucide-react": "^0.556",
+    "tailwind-scrollbar-hide": "^4.0.0",
+    "tw-animate-css": "^1.4.0",
+    "@repo/shadcn": "0.0.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 && 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"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Datum Cloud
-
-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.