@datum-cloud/datum-ui 0.6.1 → 0.8.0

package/dist/use-date-constraints-R3H4lIoT.mjs

@@ -0,0 +1,41 @@
+import { useCallback, useMemo } from "react";
+import { endOfDay, startOfDay } from "date-fns";
+//#region src/components/base/date-picker/use-date-constraints.ts
+function useDateConstraints({ minDate, maxDate, disablePast, disableFuture }) {
+	const today = useMemo(() => /* @__PURE__ */ new Date(), []);
+	const effectiveMinDate = useMemo(() => {
+		let min = minDate;
+		if (disablePast) {
+			const todayStart = startOfDay(today);
+			min = min ? min > todayStart ? min : todayStart : todayStart;
+		}
+		return min;
+	}, [
+		minDate,
+		disablePast,
+		today
+	]);
+	const effectiveMaxDate = useMemo(() => {
+		let max = maxDate;
+		if (disableFuture) {
+			const todayEnd = endOfDay(today);
+			max = max ? max < todayEnd ? max : todayEnd : todayEnd;
+		}
+		return max;
+	}, [
+		maxDate,
+		disableFuture,
+		today
+	]);
+	return {
+		effectiveMinDate,
+		effectiveMaxDate,
+		isDateDisabled: useCallback((date) => {
+			if (effectiveMinDate && date < effectiveMinDate) return true;
+			if (effectiveMaxDate && date > effectiveMaxDate) return true;
+			return false;
+		}, [effectiveMinDate, effectiveMaxDate])
+	};
+}
+//#endregion
+export { useDateConstraints as t };

package/dist/use-option-picker-BXQOfyrK.mjs

@@ -0,0 +1,215 @@
+import { a as CommandInput, i as CommandGroup, o as CommandItem, r as CommandEmpty, s as CommandList, t as Command } from "./command-DqHWukGK.mjs";
+import { t as LoaderOverlay } from "./loader-overlay-C2WDla6V.mjs";
+import { CheckIcon } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/base/option-picker/types.ts
+/**
+* Detect whether an options prop is grouped.
+*
+* Treats empty arrays as flat (zero-option lists do not need group headings).
+*/
+function isGroupedOptions(options) {
+	if (options.length === 0) return false;
+	return "options" in options[0];
+}
+/** Internal helper — flatten grouped or flat options into a single array. */
+function flattenOptions(options) {
+	return isGroupedOptions(options) ? options.flatMap((g) => g.options) : options;
+}
+//#endregion
+//#region src/components/base/option-picker/option-list.tsx
+function defaultRenderOption(option, isSelected) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: option.label
+		}), option.description && /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground truncate text-xs",
+			children: option.description
+		})]
+	}), isSelected && /* @__PURE__ */ jsx(CheckIcon, { className: "text-primary ml-auto size-4 shrink-0" })] });
+}
+function OptionList({ picker, searchPlaceholder, disableSearch, emptyContent, renderOption, header, footer, loading, virtualize, itemSize = 36, listClassName }) {
+	const { filteredOptions, search, setSearch, isSelected, toggle, creatableValue } = picker;
+	const grouped = isGroupedOptions(filteredOptions);
+	const row = renderOption ?? defaultRenderOption;
+	const canVirtualize = virtualize && !grouped;
+	return /* @__PURE__ */ jsxs(Command, {
+		shouldFilter: false,
+		children: [
+			header,
+			!disableSearch && /* @__PURE__ */ jsx(CommandInput, {
+				className: "!text-xs placeholder:text-xs",
+				placeholder: searchPlaceholder,
+				value: search,
+				onValueChange: setSearch
+			}),
+			/* @__PURE__ */ jsxs(CommandList, {
+				ref: picker.listRef,
+				className: listClassName,
+				children: [
+					loading && /* @__PURE__ */ jsx(LoaderOverlay, {}),
+					/* @__PURE__ */ jsx(CommandEmpty, { children: emptyContent ?? "No results found." }),
+					grouped ? filteredOptions.map((group) => /* @__PURE__ */ jsx(CommandGroup, {
+						heading: group.label,
+						children: group.options.map((option) => /* @__PURE__ */ jsx(CommandItem, {
+							value: option.value,
+							disabled: option.disabled,
+							onSelect: () => toggle(option.value),
+							children: row(option, isSelected(option.value))
+						}, option.value))
+					}, group.label)) : canVirtualize ? /* @__PURE__ */ jsx(VirtualCommandGroup, {
+						options: filteredOptions,
+						isSelected,
+						toggle,
+						renderOption: row,
+						listRef: picker.listRef,
+						itemSize
+					}) : /* @__PURE__ */ jsx(CommandGroup, { children: filteredOptions.map((option) => /* @__PURE__ */ jsx(CommandItem, {
+						value: option.value,
+						disabled: option.disabled,
+						onSelect: () => toggle(option.value),
+						children: row(option, isSelected(option.value))
+					}, option.value)) }),
+					creatableValue && /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx(CommandItem, {
+						value: `__create_${creatableValue}`,
+						onSelect: () => toggle(creatableValue),
+						children: /* @__PURE__ */ jsxs("span", { children: [
+							"Use \"",
+							creatableValue,
+							"\""
+						] })
+					}) })
+				]
+			}),
+			footer
+		]
+	});
+}
+function VirtualCommandGroup({ options, isSelected, toggle, renderOption, listRef, itemSize }) {
+	const virtualizer = useVirtualizer({
+		count: options.length,
+		getScrollElement: () => listRef.current,
+		estimateSize: () => itemSize,
+		overscan: 8
+	});
+	return /* @__PURE__ */ jsx(CommandGroup, { children: /* @__PURE__ */ jsx("div", {
+		style: {
+			height: virtualizer.getTotalSize(),
+			position: "relative"
+		},
+		children: virtualizer.getVirtualItems().map((virtualRow) => {
+			const option = options[virtualRow.index];
+			return /* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					transform: `translateY(${virtualRow.start}px)`
+				},
+				children: /* @__PURE__ */ jsx(CommandItem, {
+					value: option.value,
+					disabled: option.disabled,
+					onSelect: () => toggle(option.value),
+					children: renderOption(option, isSelected(option.value))
+				})
+			}, option.value);
+		})
+	}) });
+}
+//#endregion
+//#region src/components/base/option-picker/use-option-picker.ts
+function useOptionPicker(args) {
+	const { options, multiple, value, defaultValue, onValueChange, onSearchChange, creatable = false, closeOnSelect = true, onOpenChange } = args;
+	const [internalValue, setInternalValue] = useState(() => {
+		if (value !== void 0) return Array.isArray(value) ? value : [value];
+		if (defaultValue !== void 0) return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+		return [];
+	});
+	const selection = useMemo(() => {
+		if (value === void 0) return internalValue;
+		return Array.isArray(value) ? value : [value];
+	}, [value, internalValue]);
+	const selectionSet = useMemo(() => new Set(selection), [selection]);
+	const [search, setSearchState] = useState("");
+	const setSearch = useCallback((next) => {
+		setSearchState(next);
+		onSearchChange?.(next);
+	}, [onSearchChange]);
+	const isSelected = useCallback((v) => selectionSet.has(v), [selectionSet]);
+	const toggle = useCallback((v) => {
+		if (multiple) {
+			const next = selectionSet.has(v) ? selection.filter((x) => x !== v) : [...selection, v];
+			if (value === void 0) setInternalValue(next);
+			onValueChange?.(next);
+		} else {
+			if (value === void 0) setInternalValue([v]);
+			onValueChange?.(v);
+			if (closeOnSelect) onOpenChange(false);
+		}
+	}, [
+		multiple,
+		selection,
+		selectionSet,
+		value,
+		onValueChange,
+		closeOnSelect,
+		onOpenChange
+	]);
+	const clear = useCallback(() => {
+		if (!multiple) return;
+		if (value === void 0) setInternalValue([]);
+		onValueChange?.([]);
+	}, [
+		multiple,
+		value,
+		onValueChange
+	]);
+	const filteredOptions = useMemo(() => {
+		if (onSearchChange || !search) return options;
+		const q = search.toLowerCase().trim();
+		if (!q) return options;
+		if (isGroupedOptions(options)) return options.map((g) => ({
+			label: g.label,
+			options: g.options.filter((o) => o.label.toLowerCase().includes(q))
+		})).filter((g) => g.options.length > 0);
+		return options.filter((o) => o.label.toLowerCase().includes(q));
+	}, [
+		options,
+		search,
+		onSearchChange
+	]);
+	const hasMatches = useMemo(() => {
+		if (isGroupedOptions(filteredOptions)) return filteredOptions.some((g) => g.options.length > 0);
+		return filteredOptions.length > 0;
+	}, [filteredOptions]);
+	const creatableValue = useMemo(() => {
+		if (!creatable || multiple) return null;
+		const trimmed = search.trim();
+		if (!trimmed) return null;
+		return flattenOptions(options).some((o) => o.label.toLowerCase() === trimmed.toLowerCase()) ? null : trimmed;
+	}, [
+		creatable,
+		multiple,
+		search,
+		options
+	]);
+	return {
+		search,
+		setSearch,
+		filteredOptions,
+		hasMatches,
+		isSelected,
+		toggle,
+		clear,
+		hasSelection: selection.length > 0,
+		creatableValue,
+		listRef: useRef(null)
+	};
+}
+//#endregion
+export { OptionList as n, useOptionPicker as t };

package/dist/utils/index.d.ts

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

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

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

package/dist/utils/index.mjs

@@ -1,2 +1,3 @@
 import { t as cn } from "../cn-D2KYQ917.mjs";
-export { cn };
+import { n as toUTCTimestampStartOfDay, t as toUTCTimestampEndOfDay } from "../utils-BwB1mIdZ.mjs";
+export { cn, toUTCTimestampEndOfDay, toUTCTimestampStartOfDay };

package/dist/utils/timezone.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Convert a date to start of day in the specified timezone, then to a UTC
+ * timestamp in seconds.
+ *
+ * @param date - The date to convert.
+ * @param timezone - The IANA timezone to interpret the date in (e.g. `'America/New_York'`).
+ * @returns Unix timestamp in seconds (UTC).
+ */
+export declare function toUTCTimestampStartOfDay(date: Date, timezone: string): number;
+/**
+ * Convert a date to end of day in the specified timezone, then to a UTC
+ * timestamp in seconds.
+ *
+ * @param date - The date to convert.
+ * @param timezone - The IANA timezone to interpret the date in.
+ * @returns Unix timestamp in seconds (UTC).
+ */
+export declare function toUTCTimestampEndOfDay(date: Date, timezone: string): number;
+//# sourceMappingURL=timezone.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timezone.d.ts","sourceRoot":"","sources":["../../src/utils/timezone.ts"],"names":[],"mappings":"AASA;;;;;;;GAOG;AACH,wBAAgB,wBAAwB,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAK7E;AAED;;;;;;;GAOG;AACH,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAK3E"}

package/dist/utils-BwB1mIdZ.mjs

@@ -0,0 +1,35 @@
+import { endOfDay, startOfDay } from "date-fns";
+import { fromZonedTime, toZonedTime } from "date-fns-tz";
+//#region src/utils/timezone.ts
+/**
+* Timezone-aware conversion utilities for date filters.
+*
+* Handles conversion between a user's timezone and UTC for accurate
+* time-range queries (e.g. log/metric filtering, date-based search).
+*/
+/**
+* Convert a date to start of day in the specified timezone, then to a UTC
+* timestamp in seconds.
+*
+* @param date - The date to convert.
+* @param timezone - The IANA timezone to interpret the date in (e.g. `'America/New_York'`).
+* @returns Unix timestamp in seconds (UTC).
+*/
+function toUTCTimestampStartOfDay(date, timezone) {
+	const utcDate = fromZonedTime(startOfDay(toZonedTime(date, timezone)), timezone);
+	return Math.floor(utcDate.getTime() / 1e3);
+}
+/**
+* Convert a date to end of day in the specified timezone, then to a UTC
+* timestamp in seconds.
+*
+* @param date - The date to convert.
+* @param timezone - The IANA timezone to interpret the date in.
+* @returns Unix timestamp in seconds (UTC).
+*/
+function toUTCTimestampEndOfDay(date, timezone) {
+	const utcDate = fromZonedTime(endOfDay(toZonedTime(date, timezone)), timezone);
+	return Math.floor(utcDate.getTime() / 1e3);
+}
+//#endregion
+export { toUTCTimestampStartOfDay as n, toUTCTimestampEndOfDay as t };

package/dist/visually-hidden/index.mjs

@@ -1,2 +1,2 @@
-import { t as VisuallyHidden } from "../visuallyhidden-BLUsJpYH.mjs";
+import { t as VisuallyHidden } from "../visuallyhidden-BHOPczmW.mjs";
 export { VisuallyHidden };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"
@@ -19,6 +19,10 @@
       "style": "./dist/styles/root.css",
       "default": "./dist/styles/root.css"
     },
+    "./styles/canela": {
+      "style": "./dist/styles/canela.css",
+      "default": "./dist/styles/canela.css"
+    },
     "./theme": {
       "source": "./src/components/themes/index.ts",
       "types": "./dist/components/themes/index.d.ts",
@@ -139,6 +143,21 @@
       "types": "./dist/components/base/radio-group/index.d.ts",
       "default": "./dist/radio-group/index.mjs"
     },
+    "./responsive-dropdown": {
+      "source": "./src/components/base/responsive-dropdown/index.ts",
+      "types": "./dist/components/base/responsive-dropdown/index.d.ts",
+      "default": "./dist/responsive-dropdown/index.mjs"
+    },
+    "./responsive-popover": {
+      "source": "./src/components/base/responsive-popover/index.ts",
+      "types": "./dist/components/base/responsive-popover/index.d.ts",
+      "default": "./dist/responsive-popover/index.mjs"
+    },
+    "./rich-text-editor": {
+      "source": "./src/components/features/rich-text-editor/index.ts",
+      "types": "./dist/components/features/rich-text-editor/index.d.ts",
+      "default": "./dist/rich-text-editor/index.mjs"
+    },
     "./select": {
       "source": "./src/components/base/select/index.ts",
       "types": "./dist/components/base/select/index.d.ts",
@@ -209,11 +228,6 @@
       "types": "./dist/components/features/autosearch/index.d.ts",
       "default": "./dist/autosearch/index.mjs"
     },
-    "./combobox": {
-      "source": "./src/components/features/combobox/index.ts",
-      "types": "./dist/components/features/combobox/index.d.ts",
-      "default": "./dist/combobox/index.mjs"
-    },
     "./avatar-stack": {
       "source": "./src/components/features/avatar-stack/index.ts",
       "types": "./dist/components/features/avatar-stack/index.d.ts",
@@ -284,6 +298,11 @@
       "types": "./dist/exports/map.d.ts",
       "default": "./dist/map/index.mjs"
     },
+    "./mobile-sheet": {
+      "source": "./src/components/base/mobile-sheet/index.ts",
+      "types": "./dist/components/base/mobile-sheet/index.d.ts",
+      "default": "./dist/mobile-sheet/index.mjs"
+    },
     "./more-actions": {
       "source": "./src/components/features/more-actions/index.ts",
       "types": "./dist/components/features/more-actions/index.d.ts",
@@ -348,6 +367,11 @@
       "source": "./src/components/features/transfer/index.ts",
       "types": "./dist/components/features/transfer/index.d.ts",
       "default": "./dist/transfer/index.mjs"
+    },
+    "./multi-select": {
+      "source": "./src/components/features/multi-select/index.ts",
+      "types": "./dist/components/features/multi-select/index.d.ts",
+      "default": "./dist/multi-select/index.mjs"
     }
   },
   "main": "./dist/index.mjs",
@@ -368,6 +392,12 @@
     "@stepperize/react": ">=4",
     "@tanstack/react-table": ">=8",
     "@tanstack/react-virtual": ">=3",
+    "@tiptap/extension-character-count": ">=3",
+    "@tiptap/extension-link": ">=3",
+    "@tiptap/extension-placeholder": ">=3",
+    "@tiptap/extension-underline": ">=3",
+    "@tiptap/react": ">=3",
+    "@tiptap/starter-kit": ">=3",
     "date-fns": ">=4",
     "date-fns-tz": ">=3",
     "js-yaml": "^4.1.0",
@@ -420,6 +450,24 @@
     "@tanstack/react-virtual": {
       "optional": true
     },
+    "@tiptap/extension-character-count": {
+      "optional": true
+    },
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extension-placeholder": {
+      "optional": true
+    },
+    "@tiptap/extension-underline": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
     "date-fns": {
       "optional": true
     },
@@ -503,6 +551,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1",
+    "isomorphic-dompurify": "^3.8.0",
     "tailwind-merge": "^3.5.0",
     "tw-animate-css": "^1"
   },
@@ -519,6 +568,12 @@
     "@testing-library/jest-dom": "^6",
     "@testing-library/react": "^16",
     "@testing-library/user-event": "^14",
+    "@tiptap/extension-character-count": "^3.22.3",
+    "@tiptap/extension-link": "^3.22.3",
+    "@tiptap/extension-placeholder": "^3.22.3",
+    "@tiptap/extension-underline": "^3.22.3",
+    "@tiptap/react": "^3.22.3",
+    "@tiptap/starter-kit": "^3.22.3",
     "@types/js-yaml": "^4.0.9",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet-draw": "^1.0.13",