@datum-cloud/datum-ui 0.6.0 → 0.7.0

package/dist/rich-text-editor-CQH_U4T5.mjs

@@ -0,0 +1,293 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as Button } from "./button-BllvE9Lm.mjs";
+import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
+import { t as Input } from "./input-FKGqZypx.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { t as Tooltip } from "./tooltip-a7NTDCWw.mjs";
+import { BoldIcon, ItalicIcon, LinkIcon, StrikethroughIcon, UnderlineIcon, UnlinkIcon } from "lucide-react";
+import { createContext, use, useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import DOMPurify from "isomorphic-dompurify";
+import CharacterCount from "@tiptap/extension-character-count";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import Underline from "@tiptap/extension-underline";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+//#region src/components/features/rich-text-editor/rich-text-content.tsx
+const SANITIZE_CONFIG = {
+	ALLOWED_TAGS: [
+		"strong",
+		"em",
+		"u",
+		"s",
+		"a",
+		"p",
+		"br"
+	],
+	ALLOWED_ATTR: [
+		"href",
+		"target",
+		"rel"
+	]
+};
+/**
+* Post-sanitization: normalizes link hrefs and ensures safe attributes.
+* Applied AFTER DOMPurify so we only touch already-clean HTML.
+*/
+function normalizeLinks(html) {
+	return html.replace(/<a\s([^>]*)>/g, (_match, attrs) => {
+		let normalized = attrs;
+		normalized = normalized.replace(/href="(?!https?:\/\/|mailto:)([^"]+)"/, "href=\"https://$1\"");
+		if (!normalized.includes("target=")) normalized += " target=\"_blank\"";
+		if (!normalized.includes("rel=")) normalized += " rel=\"noopener noreferrer\"";
+		return `<a ${normalized}>`;
+	});
+}
+function RichTextContent({ content, className }) {
+	if (!content) return null;
+	const withSafeLinks = normalizeLinks(DOMPurify.sanitize(content, SANITIZE_CONFIG));
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("prose prose-sm dark:prose-invert max-w-none", "[&_a]:text-primary text-sm [&_a]:underline [&_p]:my-1 [&_p:empty]:min-h-[1em]", className),
+		dangerouslySetInnerHTML: { __html: withSafeLinks }
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/toolbar-button.tsx
+function ToolbarButton({ ref, active, disabled, onClick, tooltip, children, className }) {
+	const button = /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		onMouseDown: (e) => {
+			e.preventDefault();
+		},
+		onClick,
+		disabled,
+		className: cn("flex h-7 w-7 items-center justify-center rounded", "text-muted-foreground hover:bg-accent hover:text-accent-foreground", "disabled:pointer-events-none disabled:opacity-50", "transition-colors", active && "bg-accent text-accent-foreground", className),
+		children
+	});
+	if (!tooltip) return button;
+	return /* @__PURE__ */ jsx(Tooltip, {
+		message: tooltip,
+		children: button
+	});
+}
+ToolbarButton.displayName = "ToolbarButton";
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/bold-toolbar.tsx
+function BoldToolbar() {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		active: editor?.isActive("bold"),
+		disabled: !editor?.can().toggleBold(),
+		onClick: () => editor?.chain().focus().toggleBold().run(),
+		tooltip: "Bold",
+		shortcut: "⌘B",
+		children: /* @__PURE__ */ jsx(BoldIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/italic-toolbar.tsx
+function ItalicToolbar() {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		active: editor?.isActive("italic"),
+		disabled: !editor?.can().toggleItalic(),
+		onClick: () => editor?.chain().focus().toggleItalic().run(),
+		tooltip: "Italic",
+		shortcut: "⌘I",
+		children: /* @__PURE__ */ jsx(ItalicIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/link-toolbar.tsx
+function normalizeUrl(input) {
+	const trimmed = input.trim();
+	if (!trimmed) return trimmed;
+	if (/^https?:\/\/|^mailto:/i.test(trimmed)) return trimmed;
+	if (trimmed.includes("@") && !trimmed.includes(" ")) return `mailto:${trimmed}`;
+	return `https://${trimmed}`;
+}
+function LinkToolbar() {
+	const { editor } = useRichTextEditor();
+	const [open, setOpen] = useState(false);
+	const [url, setUrl] = useState("");
+	const isActive = editor?.isActive("link");
+	const handleSubmit = useCallback((e) => {
+		e.preventDefault();
+		const href = normalizeUrl(url);
+		if (!href) return;
+		editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
+		setUrl("");
+		setOpen(false);
+	}, [editor, url]);
+	const handleUnlink = useCallback(() => {
+		editor?.chain().focus().unsetLink().run();
+	}, [editor]);
+	if (isActive) return /* @__PURE__ */ jsx(ToolbarButton, {
+		active: true,
+		onClick: handleUnlink,
+		tooltip: "Remove link",
+		children: /* @__PURE__ */ jsx(Icon, {
+			icon: UnlinkIcon,
+			className: "size-4"
+		})
+	});
+	return /* @__PURE__ */ jsx(ResponsivePopover, {
+		open,
+		onOpenChange: setOpen,
+		sheetTitle: "Insert link",
+		align: "start",
+		side: "bottom",
+		contentClassName: "w-80 p-3",
+		trigger: /* @__PURE__ */ jsx(ToolbarButton, {
+			tooltip: "Add link",
+			shortcut: "⌘K",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: LinkIcon,
+				className: "size-4"
+			})
+		}),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "p-4 sm:p-0",
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: handleSubmit,
+				className: "flex gap-2",
+				children: [/* @__PURE__ */ jsx(Input, {
+					type: "url",
+					value: url,
+					onChange: (e) => setUrl(e.target.value),
+					placeholder: "https://example.com",
+					className: "h-7 flex-1",
+					autoFocus: true
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "primary",
+					size: "xs",
+					className: "h-7",
+					onClick: handleSubmit,
+					children: "Add"
+				})]
+			})
+		})
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/strike-toolbar.tsx
+function StrikeToolbar() {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		active: editor?.isActive("strike"),
+		disabled: !editor?.can().toggleStrike(),
+		onClick: () => editor?.chain().focus().toggleStrike().run(),
+		tooltip: "Strikethrough",
+		shortcut: "⌘⇧S",
+		children: /* @__PURE__ */ jsx(StrikethroughIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/toolbar.tsx
+function Toolbar({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("border-input-border flex items-center gap-0.5 border-b px-2 py-1", className),
+		children
+	});
+}
+function ToolbarSeparator() {
+	return /* @__PURE__ */ jsx("div", { className: "bg-input-border mx-1 h-5 w-px" });
+}
+//#endregion
+//#region src/components/features/rich-text-editor/toolbar/underline-toolbar.tsx
+function UnderlineToolbar() {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		active: editor?.isActive("underline"),
+		disabled: !editor?.can().toggleUnderline(),
+		onClick: () => editor?.chain().focus().toggleUnderline().run(),
+		tooltip: "Underline",
+		shortcut: "⌘U",
+		children: /* @__PURE__ */ jsx(UnderlineIcon, { className: "h-4 w-4" })
+	});
+}
+//#endregion
+//#region src/components/features/rich-text-editor/rich-text-editor.tsx
+const RichTextEditorContext = createContext({ editor: null });
+function useRichTextEditor() {
+	return use(RichTextEditorContext);
+}
+function RichTextEditorRoot({ content, onChange, onBlur, autoFocus = false, placeholder, disabled = false, children, className }) {
+	return /* @__PURE__ */ jsx(RichTextEditorContext, {
+		value: { editor: useEditor({
+			extensions: [
+				StarterKit.configure({
+					heading: false,
+					codeBlock: false,
+					code: false,
+					blockquote: false,
+					bulletList: false,
+					orderedList: false,
+					listItem: false,
+					horizontalRule: false
+				}),
+				Underline,
+				Link.configure({
+					autolink: true,
+					openOnClick: false,
+					validate: (url) => /^https?:\/\/|^mailto:/.test(url),
+					HTMLAttributes: {
+						target: "_blank",
+						rel: "noopener noreferrer"
+					}
+				}),
+				Placeholder.configure({ placeholder: placeholder ?? "Write something..." }),
+				CharacterCount.configure({ limit: void 0 })
+			],
+			content: content ?? "",
+			editable: !disabled,
+			autofocus: autoFocus ? "end" : false,
+			onUpdate: ({ editor: ed }) => {
+				const text = ed.getText().trim();
+				onChange?.(text ? ed.getHTML() : "");
+			},
+			onBlur: () => {
+				onBlur?.();
+			},
+			editorProps: { attributes: { class: cn("prose prose-sm dark:prose-invert max-w-none", "min-h-[100px] px-3 py-2 text-sm", "focus:outline-none", "[&_p]:my-1 [&_a]:text-primary [&_a]:underline") } }
+		}) },
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("rounded-lg", "bg-input-background/50", "text-input-foreground", "border-input-border border", "placeholder:text-input-placeholder", className),
+			children
+		})
+	});
+}
+function Content({ className }) {
+	const { editor } = useRichTextEditor();
+	return /* @__PURE__ */ jsx(EditorContent, {
+		editor,
+		className: cn("rich-text-content", className)
+	});
+}
+function CharCount({ maxLength }) {
+	const { editor } = useRichTextEditor();
+	if (!editor) return null;
+	const count = editor.storage.characterCount?.characters() ?? 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex justify-end px-3 py-1",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: cn("text-muted-foreground text-xs", maxLength && count > maxLength && "text-destructive"),
+			children: [count, maxLength ? ` / ${maxLength}` : ""]
+		})
+	});
+}
+const RichTextEditor = Object.assign(RichTextEditorRoot, {
+	Toolbar,
+	Content,
+	CharacterCount: CharCount,
+	Bold: BoldToolbar,
+	Italic: ItalicToolbar,
+	Underline: UnderlineToolbar,
+	Strike: StrikeToolbar,
+	Link: LinkToolbar,
+	Separator: ToolbarSeparator
+});
+//#endregion
+export { useRichTextEditor as n, RichTextContent as r, RichTextEditor as t };

package/dist/select/index.mjs

@@ -1,2 +1,2 @@
-import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../select-CiLR_DiQ.mjs";
+import { a as SelectLabel, c as SelectSeparator, i as SelectItem, l as SelectTrigger, n as SelectContent, o as SelectScrollDownButton, r as SelectGroup, s as SelectScrollUpButton, t as Select, u as SelectValue } from "../select-zxwykvQn.mjs";
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };

package/dist/sheet/index.mjs

@@ -1,3 +1,3 @@
-import { a as SheetHeader, i as SheetFooter, o as SheetTitle, r as SheetDescription, s as SheetTrigger } from "../sheet-Di3b-oPu.mjs";
-import { i as SheetOverlay, n as SheetClose, r as SheetContent, t as Sheet } from "../sheet-BzXksqYY.mjs";
+import { a as SheetHeader, i as SheetFooter, o as SheetTitle, r as SheetDescription, s as SheetTrigger } from "../sheet-DVEToCVY.mjs";
+import { i as SheetOverlay, n as SheetClose, r as SheetContent, t as Sheet } from "../sheet-LhUgozvg.mjs";
 export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetTitle, SheetTrigger };

package/dist/{sheet-BzXksqYY.mjs → sheet-LhUgozvg.mjs}

@@ -1,6 +1,6 @@
 import { t as cn } from "./cn-D2KYQ917.mjs";
 import { t as CloseIcon } from "./close.icon-HCfS4Y-N.mjs";
-import { a as SheetHeader, i as SheetFooter, o as SheetTitle, r as SheetDescription, s as SheetTrigger, t as Sheet$1 } from "./sheet-Di3b-oPu.mjs";
+import { a as SheetHeader, i as SheetFooter, o as SheetTitle, r as SheetDescription, s as SheetTrigger, t as Sheet$1 } from "./sheet-DVEToCVY.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as SheetPrimitive from "@radix-ui/react-dialog";

package/dist/sidebar/index.mjs

@@ -1,2 +1,2 @@
-import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../sidebar-BnhnjvfO.mjs";
+import { C as SidebarTrigger, S as SidebarSeparator, _ as SidebarMenuSub, a as SidebarGroupAction, b as SidebarProvider, c as SidebarHeader, d as SidebarMenu, f as SidebarMenuAction, g as SidebarMenuSkeleton, h as SidebarMenuItem, i as SidebarGroup, l as SidebarInput, m as SidebarMenuButton, n as SidebarContent, o as SidebarGroupContent, p as SidebarMenuBadge, r as SidebarFooter, s as SidebarGroupLabel, t as Sidebar, u as SidebarInset, v as SidebarMenuSubButton, w as useSidebar, x as SidebarRail, y as SidebarMenuSubItem } from "../sidebar-B8LQJiNI.mjs";
 export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };

package/dist/{sidebar-BnhnjvfO.mjs → sidebar-B8LQJiNI.mjs}

@@ -3,9 +3,9 @@ import { t as Separator } from "./separator-DXVTncCK.mjs";
 import { t as Button } from "./button-D3RrsMfQ.mjs";
 import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
 import { t as Input } from "./input-FKGqZypx.mjs";
-import { a as SheetHeader, n as SheetContent, o as SheetTitle, r as SheetDescription, t as Sheet } from "./sheet-Di3b-oPu.mjs";
-import { t as Skeleton } from "./skeleton-BKl4mfJt.mjs";
-import { i as TooltipProvider, t as Tooltip } from "./tooltip-Cruvl5F6.mjs";
+import { a as SheetHeader, n as SheetContent, o as SheetTitle, r as SheetDescription, t as Sheet } from "./sheet-DVEToCVY.mjs";
+import { t as Skeleton } from "./skeleton-D2xuJdE1.mjs";
+import { i as TooltipProvider, t as Tooltip } from "./tooltip-a7NTDCWw.mjs";
 import { cva } from "class-variance-authority";
 import { PanelLeftCloseIcon, PanelLeftOpenIcon } from "lucide-react";
 import * as React$1 from "react";

package/dist/skeleton/index.mjs

@@ -1,2 +1,2 @@
-import { t as Skeleton } from "../skeleton-D1MUhAVo.mjs";
+import { t as Skeleton } from "../skeleton-D4HOEiOZ.mjs";
 export { Skeleton };

package/dist/{skeleton-D1MUhAVo.mjs → skeleton-D4HOEiOZ.mjs}

@@ -1,5 +1,5 @@
 import { t as cn } from "./cn-D2KYQ917.mjs";
-import { t as Skeleton$1 } from "./skeleton-BKl4mfJt.mjs";
+import { t as Skeleton$1 } from "./skeleton-D2xuJdE1.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/base/skeleton/skeleton.tsx

package/dist/spinner/index.mjs

@@ -1,2 +1,2 @@
-import { t as Spinner } from "../spinner-OyOf9-Yu.mjs";
+import { t as Spinner } from "../spinner-CgPI3DDi.mjs";
 export { Spinner };

package/dist/stepper/index.mjs

@@ -1,2 +1,2 @@
-import { t as defineStepper } from "../stepper-DvIOp0hh.mjs";
+import { t as defineStepper } from "../stepper-Beb-zbdL.mjs";
 export { defineStepper };

package/dist/styles/canela.css

@@ -0,0 +1,23 @@
+/* Optional Canela Text title font.
+ *
+ * Import this file to opt into Datum's Canela Text typography for
+ * titles. Without it, the font-title utility falls back to the
+ * system sans stack declared in tokens/figma-tokens.css.
+ *
+ * Usage:
+ *   import '@datum-cloud/datum-ui/styles/canela'
+ */
+
+@font-face {
+  font-family: 'Canela Text';
+  src: url('./fonts/CanelaText-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --font-title:
+    'Canela Text', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+}

package/dist/styles/tokens/figma-tokens.css

@@ -125,6 +125,10 @@
   --potted-olive: oklch(0.776 0.02 152.7); /* #c2ddb6 */
   --white: oklch(1 0 0); /* #ffffff */
 
+  /* Title font — default fallback. Consumers opt into Canela via
+   * @datum-cloud/datum-ui/styles/canela, which overrides this via :root. */
+  --font-title: ui-sans-serif, system-ui, sans-serif;
+
   /* Collection: Typography */
   --app-body-font-family: var(--font-families-alliance);
   --app-body-font-size: var(--text-sizes-13px);

package/dist/switch/index.mjs

@@ -1,2 +1,2 @@
-import { t as Switch } from "../switch-DQJQhPIQ.mjs";
+import { t as Switch } from "../switch-DcSF42Kc.mjs";
 export { Switch };

package/dist/table/index.mjs

@@ -1,2 +1,2 @@
-import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-Cdsh-39-.mjs";
+import { a as TableFooter, c as TableRow, i as TableCell, n as TableBody, o as TableHead, r as TableCaption, s as TableHeader, t as Table } from "../table-DWGT4cqh.mjs";
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/dist/tag-input/index.mjs

@@ -1,2 +1,2 @@
-import { t as TagsInput } from "../tag-input-T9cUX9-G.mjs";
+import { t as TagsInput } from "../tag-input-Bf4GMptp.mjs";
 export { TagsInput };

package/dist/{tag-input-T9cUX9-G.mjs → tag-input-Bf4GMptp.mjs}

@@ -18,8 +18,10 @@ const SPLITTER_REGEX = /[\n\t;,|]+/;
 * Preserves alphanumeric characters, dots, @, hyphens, and underscores
 */
 const FORMATTING_REGEX = /^[\s"'<>]+|[\s"'<>]+$/g;
+/** Default keys that confirm the current input as a tag */
+const DEFAULT_DELIMITERS = ["Enter", ","];
 const TagInputContext = React.createContext(null);
-function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems, className, dir, validator, onValidationError, error, showValidationErrors = true, name, key, ...props }) {
+function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems, className, dir, delimiters = DEFAULT_DELIMITERS, normalizer, validator, onValidationError, error, showValidationErrors = true, name, key, ...props }) {
 	const [activeIndex, setActiveIndex] = React.useState(-1);
 	const [inputValue, setInputValue] = React.useState("");
 	const [disableInput, setDisableInput] = React.useState(false);
@@ -35,8 +37,10 @@ function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems,
 			if (onValidationError) onValidationError(errorMessage);
 		};
 		setError(null);
-		if (!val.trim()) return;
-		if (value.includes(val)) {
+		const trimmed = val.trim();
+		const normalized = normalizer ? normalizer(trimmed) : trimmed;
+		if (!normalized) return;
+		if (value.includes(normalized)) {
 			setError("This tag already exists");
 			return;
 		}
@@ -45,17 +49,18 @@ function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems,
 			return;
 		}
 		if (validator) try {
-			validator.parse(val);
-			onValueChange([...value, val]);
+			validator.parse(normalized);
+			onValueChange([...value, normalized]);
 		} catch (error) {
 			if (error instanceof z.ZodError) setError(error.issues[0]?.message || "Invalid input");
 			else setError("Validation failed");
 		}
-		else onValueChange([...value, val]);
+		else onValueChange([...value, normalized]);
 	}, [
 		value,
 		validator,
-		parseMaxItems
+		parseMaxItems,
+		normalizer
 	]);
 	const RemoveValue = React.useCallback((val) => {
 		if (value.includes(val) && value.length > parseMinItems) onValueChange(value.filter((item) => item !== val));
@@ -156,14 +161,20 @@ function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems,
 			case "Escape":
 				setActiveIndex(activeIndex === -1 ? value.length - 1 : -1);
 				break;
-			case "Enter":
-			case ",":
+			case "Tab":
 				if (inputValue.trim() !== "") {
 					e.preventDefault();
 					onValueChangeHandler(inputValue);
 					setInputValue("");
 				}
 				break;
+			default:
+				if (delimiters.includes(e.key) && inputValue.trim() !== "") {
+					e.preventDefault();
+					onValueChangeHandler(inputValue);
+					setInputValue("");
+				}
+				break;
 		}
 	}, [
 		activeIndex,
@@ -173,7 +184,8 @@ function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems,
 		dir,
 		selectedValue,
 		isValueSelected,
-		onValueChangeHandler
+		onValueChangeHandler,
+		delimiters
 	]);
 	const mousePreventDefault = React.useCallback((e) => {
 		e.preventDefault();
@@ -183,11 +195,14 @@ function TagsInput({ ref, value, onValueChange, placeholder, maxItems, minItems,
 		setInputValue(e.currentTarget.value);
 	}, []);
 	const handleBlur = React.useCallback((e) => {
+		if (inputValue.trim() === "") return;
+		onValueChangeHandler(inputValue);
+		setInputValue("");
 		const relatedTarget = e.relatedTarget;
-		if (!(relatedTarget?.tagName === "BUTTON" && (relatedTarget?.getAttribute("type") === "submit" || relatedTarget?.closest("button[type=\"submit\"]"))) && inputValue.trim() !== "") {
-			onValueChangeHandler(inputValue);
-			setInputValue("");
-		}
+		const submitButton = relatedTarget?.getAttribute("type") === "submit" ? relatedTarget : relatedTarget?.closest("button[type=\"submit\"]");
+		if (submitButton) requestAnimationFrame(() => {
+			submitButton.click();
+		});
 	}, [inputValue, onValueChangeHandler]);
 	return /* @__PURE__ */ jsxs(TagInputContext, {
 		value: React.useMemo(() => ({

package/dist/task-queue/index.mjs

@@ -1,2 +1,2 @@
-import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-Wcbj-f0V.mjs";
+import { _ as RedisTaskStorage, a as TaskPanelItem, b as createProjectMetadata, c as TaskPanelHeader, d as useCurrentScope, f as useTasksWithLabels, g as detectStorage, h as TaskQueue, i as TaskPanel, l as getContextLabel, m as TaskQueueProvider, n as TaskSummaryDialog, o as TaskPanelCounter, p as useTaskQueue, r as TaskQueueTrigger, s as TaskPanelActions, t as TaskQueueDropdown, u as matchesCurrentScope, v as LocalTaskStorage, x as createUserMetadata, y as createOrgMetadata } from "../task-queue-dropdown-D-LncEWm.mjs";
 export { LocalTaskStorage, RedisTaskStorage, TaskPanel, TaskPanelActions, TaskPanelCounter, TaskPanelHeader, TaskPanelItem, TaskQueue, TaskQueueDropdown, TaskQueueProvider, TaskQueueTrigger, TaskSummaryDialog, createOrgMetadata, createProjectMetadata, createUserMetadata, detectStorage, getContextLabel, matchesCurrentScope, useCurrentScope, useTaskQueue, useTasksWithLabels };

package/dist/{task-queue-dropdown-Wcbj-f0V.mjs → task-queue-dropdown-D-LncEWm.mjs}

@@ -4,9 +4,9 @@ import { t as SpinnerIcon } from "./spinner.icon-C-vjSM6o.mjs";
 import { t as Button } from "./button-BllvE9Lm.mjs";
 import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
 import { t as Dialog } from "./dialog-Bm2H9lrx.mjs";
-import { a as TooltipTrigger, n as Tooltip, r as TooltipContent, t as Tooltip$1 } from "./tooltip-Cruvl5F6.mjs";
-import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "./table-Cdsh-39-.mjs";
-import { h as DropdownMenuTrigger, r as DropdownMenuContent, t as DropdownMenu } from "./dropdown-DZiAt-jS.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-IFroDgKn.mjs";
+import { a as TooltipTrigger, n as Tooltip, r as TooltipContent, t as Tooltip$1 } from "./tooltip-a7NTDCWw.mjs";
+import { c as TableRow, i as TableCell, n as TableBody, o as TableHead, s as TableHeader, t as Table } from "./table-DWGT4cqh.mjs";
 import { Ban, CheckCircle2, CircleAlert, CircleCheck, CornerDownRightIcon, FileIcon, ListTodo, X, XCircle } from "lucide-react";
 import { createContext, use, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1283,45 +1283,45 @@ function TaskQueueDropdown() {
 		}
 	}, [tasks]);
 	const hasDismissable = tasks.some((t) => t.status !== "running" && t.status !== "pending");
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenu, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(ResponsiveDropdown, {
 		open,
 		onOpenChange: setOpen,
-		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(TaskQueueTrigger, { tasks })
-		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-			align: "end",
-			className: "w-96 rounded-lg p-0",
-			onCloseAutoFocus: (e) => e.preventDefault(),
-			children: [
-				/* @__PURE__ */ jsx(TaskPanelHeader, {}),
-				/* @__PURE__ */ jsx("div", {
-					className: "max-h-[350px] overflow-y-auto",
-					children: tasks.length === 0 && !activeSummary ? /* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col items-center justify-center px-4 py-12 text-center",
-						children: [/* @__PURE__ */ jsx(CheckCircle2, { className: "text-muted-foreground/30 mb-3 h-12 w-12" }), /* @__PURE__ */ jsx("p", {
-							className: "text-muted-foreground text-sm",
-							children: "No tasks currently scheduled"
-						})]
-					}) : tasks.map((task) => /* @__PURE__ */ jsx(TaskPanelItem, {
-						task,
-						contextLabel: getContextLabel(task.metadata),
-						onCancel: () => cancel(task.id)
-					}, task.id))
-				}),
-				hasDismissable && /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: () => {
-						dismissAll();
-					},
-					className: "border-border hover:bg-accent flex w-full cursor-pointer items-center justify-center gap-2 border-t px-3 py-2 transition-colors",
-					children: /* @__PURE__ */ jsx("span", {
-						className: "text-destructive text-xs",
-						children: "Clear tasks"
-					})
+		sheetTitle: "Tasks",
+		sheetDescription: "View running and completed tasks",
+		contentClassName: "w-[calc(100vw-2rem)] sm:w-96",
+		onCloseAutoFocus: (e) => e.preventDefault(),
+		trigger: /* @__PURE__ */ jsx(TaskQueueTrigger, { tasks }),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "hidden md:block",
+				children: /* @__PURE__ */ jsx(TaskPanelHeader, {})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "max-h-[350px] overflow-y-auto",
+				children: tasks.length === 0 && !activeSummary ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center justify-center px-4 py-12 text-center",
+					children: [/* @__PURE__ */ jsx(CheckCircle2, { className: "text-muted-foreground/30 mb-3 h-12 w-12" }), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-sm",
+						children: "No tasks currently scheduled"
+					})]
+				}) : tasks.map((task) => /* @__PURE__ */ jsx(TaskPanelItem, {
+					task,
+					contextLabel: getContextLabel(task.metadata),
+					onCancel: () => cancel(task.id)
+				}, task.id))
+			}),
+			hasDismissable && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => {
+					dismissAll();
+				},
+				className: "border-border hover:bg-accent flex w-full cursor-pointer items-center justify-center gap-2 border-t px-3 py-2 transition-colors",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-destructive text-xs",
+					children: "Clear tasks"
 				})
-			]
-		})]
+			})
+		]
 	}), activeSummary && /* @__PURE__ */ jsx(TaskSummaryDialog, {
 		open: true,
 		onOpenChange: (isOpen) => {

package/dist/textarea/index.mjs

@@ -1,2 +1,2 @@
-import { t as Textarea } from "../textarea-BwD-MmTV.mjs";
+import { t as Textarea } from "../textarea-BoChBcFz.mjs";
 export { Textarea };

package/dist/theme/index.mjs

@@ -1,2 +1,2 @@
-import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider } from "../themes-DG1md8FI.mjs";
+import { i as ClientOnly, n as useTheme, r as ThemeScript, t as ThemeProvider } from "../themes-CAiN4b6G.mjs";
 export { ClientOnly, ThemeProvider, ThemeScript, useTheme };

package/dist/time-picker/index.mjs

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../time-picker-BoF7pZZ2.mjs";
+import { t as TimePicker } from "../time-picker-BZF5jbF6.mjs";
 export { TimePicker };