@datum-cloud/datum-ui 0.6.0 → 0.7.0

package/dist/time-picker-BZF5jbF6.mjs

@@ -0,0 +1,99 @@
+import { t as cn } from "./cn-D2KYQ917.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { n as OptionList, t as useOptionPicker } from "./use-option-picker-BXQOfyrK.mjs";
+import { Clock } from "lucide-react";
+import * as React$1 from "react";
+import { useMemo } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/features/time-picker/use-time-slots.ts
+function timeToMinutes(time) {
+	const [h, m] = time.split(":").map(Number);
+	return h * 60 + m;
+}
+function minutesToTime(totalMinutes) {
+	const h = Math.floor(totalMinutes / 60);
+	const m = totalMinutes % 60;
+	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
+}
+function formatTimeLabel(time) {
+	const [hStr, mStr] = time.split(":");
+	let h = Number(hStr);
+	const m = mStr;
+	const period = h >= 12 ? "PM" : "AM";
+	if (h === 0) h = 12;
+	else if (h > 12) h -= 12;
+	return `${h}:${m} ${period}`;
+}
+function useTimeSlots({ min, max, step = 15 }) {
+	return useMemo(() => {
+		const minMinutes = min ? timeToMinutes(min) : 0;
+		const maxMinutes = max ? timeToMinutes(max) : 1439;
+		const slots = [];
+		for (let m = minMinutes; m <= maxMinutes; m += step) {
+			if (m >= 1440) break;
+			const value = minutesToTime(m);
+			slots.push({
+				value,
+				label: formatTimeLabel(value)
+			});
+		}
+		return slots;
+	}, [
+		min,
+		max,
+		step
+	]);
+}
+//#endregion
+//#region src/components/features/time-picker/time-picker.tsx
+function TimePicker({ value, onChange, min, max, step = 15, placeholder = "Select time", disabled = false, className, id, name, responsive = true, sheetTitle }) {
+	const [open, setOpen] = React$1.useState(false);
+	const slots = useTimeSlots({
+		min,
+		max,
+		step
+	});
+	const picker = useOptionPicker({
+		multiple: false,
+		options: slots,
+		value,
+		onValueChange: onChange,
+		open,
+		onOpenChange: setOpen
+	});
+	const displayValue = value ? formatTimeLabel(value) : void 0;
+	const trigger = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		id,
+		role: "combobox",
+		"aria-expanded": open,
+		disabled,
+		className: cn("text-input-foreground placeholder:text-input-placeholder", "border-input-border bg-input-background/50 relative flex h-10 w-full items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition-all", "focus-visible:border-input-focus-border focus-visible:shadow-(--input-focus-shadow)", "focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-hidden", disabled && "cursor-not-allowed opacity-50", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(!displayValue && "text-muted-foreground"),
+			children: displayValue ?? placeholder
+		}), /* @__PURE__ */ jsx(Clock, { className: "text-muted-foreground ml-2 size-4 shrink-0" })]
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResponsivePopover, {
+		open,
+		onOpenChange: setOpen,
+		responsive,
+		sheetTitle: sheetTitle ?? placeholder,
+		trigger,
+		align: "start",
+		children: /* @__PURE__ */ jsx(OptionList, {
+			picker,
+			disableSearch: slots.length <= 48,
+			searchPlaceholder: "Search time...",
+			listClassName: "max-h-[200px]"
+		})
+	}), name && /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		name,
+		value: value ?? "",
+		readOnly: true
+	})] });
+}
+TimePicker.displayName = "TimePicker";
+//#endregion
+export { TimePicker as t };

package/dist/{to-api-format-Bh3c01gr.mjs → to-api-format-CgKcC9SK.mjs}

@@ -2,13 +2,16 @@ import { t as cn } from "./cn-D2KYQ917.mjs";
 import { t as Button } from "./button-BllvE9Lm.mjs";
 import { t as Separator } from "./separator-DXVTncCK.mjs";
 import { t as Icon } from "./icon-wrapper-DuLp3RM1.mjs";
-import { t as Calendar$1 } from "./calendar-DEkCw7I1.mjs";
+import { t as Calendar$1 } from "./calendar-C-Hbf74r.mjs";
 import { t as Input } from "./input-FKGqZypx.mjs";
-import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-FJAcbYoH.mjs";
-import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-CiLR_DiQ.mjs";
+import { t as MobileSheet } from "./mobile-sheet-BxMvkzAj.mjs";
+import { i as PopoverTrigger, r as PopoverContent, t as Popover } from "./popover-JOuXJOZ2.mjs";
+import { t as useBreakpoint } from "./use-breakpoint-DGcVmB3c.mjs";
+import { t as ResponsivePopover } from "./responsive-popover-D-t9bxSN.mjs";
+import { i as SelectItem, l as SelectTrigger, n as SelectContent, t as Select, u as SelectValue } from "./select-zxwykvQn.mjs";
 import { Calendar, CalendarIcon, Globe, X } from "lucide-react";
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { format, isSameDay, isSameYear, parse, subDays, subHours, subMinutes } from "date-fns";
 import { fromZonedTime, toZonedTime } from "date-fns-tz";
 //#region src/components/features/time-range-picker/utils/timezone.ts
@@ -268,28 +271,31 @@ function CustomRangePanel({ fromUtc, toUtc, timezone, onRangeChange, disableFutu
 			className: "text-muted-foreground text-xs font-medium",
 			children: "Custom Range"
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center gap-2",
+			className: "flex flex-col gap-2 sm:flex-row sm:items-center",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsxs(Popover, {
-						open: startDateOpen,
-						onOpenChange: setStartDateOpen,
-						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-							asChild: true,
-							children: /* @__PURE__ */ jsxs(Button, {
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground w-10 shrink-0 text-xs sm:hidden",
+							children: "From"
+						}),
+						/* @__PURE__ */ jsx(ResponsivePopover, {
+							open: startDateOpen,
+							onOpenChange: setStartDateOpen,
+							sheetTitle: "Select start date",
+							align: "start",
+							contentClassName: "w-auto",
+							trigger: /* @__PURE__ */ jsxs(Button, {
 								type: "quaternary",
 								theme: "outline",
 								id: startDateId,
-								className: "h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+								className: "h-8 min-w-0 flex-1 justify-start gap-1.5 px-2 text-xs font-normal sm:w-full sm:flex-initial",
 								children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }), /* @__PURE__ */ jsx("span", {
 									className: "truncate",
 									children: format(startDate, "MMM d, yyyy")
 								})]
-							})
-						}), /* @__PURE__ */ jsx(PopoverContent, {
-							className: "w-auto p-0",
-							align: "start",
+							}),
 							children: /* @__PURE__ */ jsx(Calendar$1, {
 								mode: "single",
 								selected: startDate,
@@ -297,39 +303,43 @@ function CustomRangePanel({ fromUtc, toUtc, timezone, onRangeChange, disableFutu
 								disabled: disableFuture ? (date) => date > /* @__PURE__ */ new Date() : void 0,
 								initialFocus: true
 							})
-						})]
-					}), /* @__PURE__ */ jsx(Input, {
-						type: "time",
-						id: startTimeId,
-						value: startTime,
-						onChange: handleStartTimeChange,
-						className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
-					})]
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							type: "time",
+							id: startTimeId,
+							value: startTime,
+							onChange: handleStartTimeChange,
+							className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
+						})
+					]
 				}),
 				/* @__PURE__ */ jsx("span", {
-					className: "text-muted-foreground text-sm",
+					className: "text-muted-foreground hidden text-sm sm:block",
 					children: "—"
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex items-center gap-1.5",
-					children: [/* @__PURE__ */ jsxs(Popover, {
-						open: endDateOpen,
-						onOpenChange: setEndDateOpen,
-						children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-							asChild: true,
-							children: /* @__PURE__ */ jsxs(Button, {
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground w-10 shrink-0 text-xs sm:hidden",
+							children: "To"
+						}),
+						/* @__PURE__ */ jsx(ResponsivePopover, {
+							open: endDateOpen,
+							onOpenChange: setEndDateOpen,
+							sheetTitle: "Select end date",
+							align: "start",
+							contentClassName: "w-auto",
+							trigger: /* @__PURE__ */ jsxs(Button, {
 								type: "quaternary",
 								theme: "outline",
 								id: endDateId,
-								className: "h-8 w-full justify-start gap-1.5 px-2 text-xs font-normal",
+								className: "h-8 min-w-0 flex-1 justify-start gap-1.5 px-2 text-xs font-normal sm:w-full sm:flex-initial",
 								children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "h-3.5 w-3.5 shrink-0 opacity-50" }), /* @__PURE__ */ jsx("span", {
 									className: "truncate",
 									children: format(endDate, "MMM d, yyyy")
 								})]
-							})
-						}), /* @__PURE__ */ jsx(PopoverContent, {
-							className: "w-auto p-0",
-							align: "start",
+							}),
 							children: /* @__PURE__ */ jsx(Calendar$1, {
 								mode: "single",
 								selected: endDate,
@@ -337,14 +347,15 @@ function CustomRangePanel({ fromUtc, toUtc, timezone, onRangeChange, disableFutu
 								disabled: disableFuture ? (date) => date > /* @__PURE__ */ new Date() || date < startDate : (date) => date < startDate,
 								initialFocus: true
 							})
-						})]
-					}), /* @__PURE__ */ jsx(Input, {
-						type: "time",
-						id: endTimeId,
-						value: endTime,
-						onChange: handleEndTimeChange,
-						className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
-					})]
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							type: "time",
+							id: endTimeId,
+							value: endTime,
+							onChange: handleEndTimeChange,
+							className: cn("h-8 w-[80px] px-2 text-xs md:text-xs", "appearance-none bg-transparent", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none")
+						})
+					]
 				})
 			]
 		})]
@@ -585,6 +596,7 @@ function formatDateForInput(date) {
 //#region src/components/features/time-range-picker/time-range-picker.tsx
 function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, presets = DEFAULT_PRESETS, disableFuture = false, maxDate, minDate, className, disabled = false, placeholder = "Select time range", align = "start", side = "bottom" }) {
 	const [open, setOpen] = useState(false);
+	const isMobile = useBreakpoint() === "mobile";
 	const timezone = timezoneProp ?? getBrowserTimezone();
 	const defaultPreset = getDefaultPreset(presets);
 	const defaultRange = useMemo(() => getPresetRange(defaultPreset, timezone), [defaultPreset, timezone]);
@@ -707,6 +719,91 @@ function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, pre
 		onClear?.();
 	}, [onClear]);
 	const showClearButton = value && onClear;
+	const triggerButton = /* @__PURE__ */ jsxs(Button, {
+		type: "quaternary",
+		theme: "outline",
+		disabled,
+		className: cn("text-foreground min-w-[200px] items-center justify-between gap-2 px-3 font-normal", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 items-center gap-2",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: Calendar,
+				size: 16
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs",
+				children: displayText
+			})]
+		}), showClearButton && /* @__PURE__ */ jsx("div", {
+			onClick: (e) => {
+				e.stopPropagation();
+				e.preventDefault();
+				handleClear(e);
+			},
+			className: cn("size-[14px] shrink-0 p-0 hover:bg-transparent", "hover:text-destructive text-icon-quaternary hover:bg-transparent dark:text-white", "focus:ring-ring focus:ring-2 focus:ring-offset-1 focus:outline-none", "disabled:pointer-events-none disabled:opacity-50", "transition-colors"),
+			"aria-label": "Clear time range",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: X,
+				size: 14
+			})
+		})]
+	});
+	const pickerContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "divide-border flex flex-col divide-x sm:flex-row",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex-1 px-0",
+				children: /* @__PURE__ */ jsx(Calendar$1, {
+					className: "w-full",
+					mode: "range",
+					defaultMonth: calendarRange?.from,
+					selected: calendarRange,
+					onSelect: handleCalendarSelect,
+					onDayClick: handleDayClick,
+					numberOfMonths: 1,
+					disabled: (date) => {
+						if (effectiveMaxDate && date > effectiveMaxDate) return true;
+						if (minDate && date < minDate) return true;
+						return false;
+					},
+					initialFocus: true
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "p-3",
+				children: /* @__PURE__ */ jsx(QuickRangesPanel, {
+					presets,
+					value: effectiveValue,
+					onPresetSelect: handlePresetSelect
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsx("div", {
+			className: "p-3",
+			children: /* @__PURE__ */ jsx(CustomRangePanel, {
+				fromUtc: currentFromUtc,
+				toUtc: currentToUtc,
+				timezone,
+				onRangeChange: handleCustomRangeChange,
+				disableFuture
+			})
+		}),
+		/* @__PURE__ */ jsx(Separator, {}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground bg-muted/30 flex items-center gap-2 px-3 py-2 text-xs",
+			children: [/* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", { children: ["Your timezone:", formatTimezoneLabel(timezone)] })]
+		})
+	] });
+	if (isMobile) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "relative inline-flex",
+		onClick: () => setOpen(true),
+		children: triggerButton
+	}), /* @__PURE__ */ jsx(MobileSheet, {
+		open,
+		onOpenChange: setOpen,
+		title: "Select time range",
+		description: "Choose a preset or custom date range",
+		children: pickerContent
+	})] });
 	return /* @__PURE__ */ jsxs(Popover, {
 		open,
 		onOpenChange: setOpen,
@@ -714,86 +811,14 @@ function TimeRangePicker({ value, onChange, onClear, timezone: timezoneProp, pre
 			className: "relative inline-flex",
 			children: /* @__PURE__ */ jsx(PopoverTrigger, {
 				asChild: true,
-				children: /* @__PURE__ */ jsxs(Button, {
-					type: "quaternary",
-					theme: "outline",
-					disabled,
-					className: cn("text-foreground min-w-[200px] items-center justify-between gap-2 px-3 font-normal", className),
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-1 items-center gap-2",
-						children: [/* @__PURE__ */ jsx(Icon, {
-							icon: Calendar,
-							size: 16
-						}), /* @__PURE__ */ jsx("span", {
-							className: "truncate text-xs",
-							children: displayText
-						})]
-					}), showClearButton && /* @__PURE__ */ jsx("div", {
-						onClick: (e) => {
-							e.stopPropagation();
-							e.preventDefault();
-							handleClear(e);
-						},
-						className: cn("size-[14px] shrink-0 p-0 hover:bg-transparent", "hover:text-destructive text-icon-quaternary hover:bg-transparent dark:text-white", "focus:ring-ring focus:ring-2 focus:ring-offset-1 focus:outline-none", "disabled:pointer-events-none disabled:opacity-50", "transition-colors"),
-						"aria-label": "Clear time range",
-						children: /* @__PURE__ */ jsx(Icon, {
-							icon: X,
-							size: 14
-						})
-					})]
-				})
+				children: triggerButton
 			})
-		}), /* @__PURE__ */ jsxs(PopoverContent, {
+		}), /* @__PURE__ */ jsx(PopoverContent, {
 			className: "w-auto rounded-xl p-0",
 			align,
 			side,
 			sideOffset: 4,
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "divide-border flex flex-col divide-x sm:flex-row",
-					children: [/* @__PURE__ */ jsx("div", {
-						className: "flex-1 px-0",
-						children: /* @__PURE__ */ jsx(Calendar$1, {
-							className: "w-full",
-							mode: "range",
-							defaultMonth: calendarRange?.from,
-							selected: calendarRange,
-							onSelect: handleCalendarSelect,
-							onDayClick: handleDayClick,
-							numberOfMonths: 1,
-							disabled: (date) => {
-								if (effectiveMaxDate && date > effectiveMaxDate) return true;
-								if (minDate && date < minDate) return true;
-								return false;
-							},
-							initialFocus: true
-						})
-					}), /* @__PURE__ */ jsx("div", {
-						className: "p-3",
-						children: /* @__PURE__ */ jsx(QuickRangesPanel, {
-							presets,
-							value: effectiveValue,
-							onPresetSelect: handlePresetSelect
-						})
-					})]
-				}),
-				/* @__PURE__ */ jsx(Separator, {}),
-				/* @__PURE__ */ jsx("div", {
-					className: "p-3",
-					children: /* @__PURE__ */ jsx(CustomRangePanel, {
-						fromUtc: currentFromUtc,
-						toUtc: currentToUtc,
-						timezone,
-						onRangeChange: handleCustomRangeChange,
-						disableFuture
-					})
-				}),
-				/* @__PURE__ */ jsx(Separator, {}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "text-muted-foreground bg-muted/30 flex items-center gap-2 px-3 py-2 text-xs",
-					children: [/* @__PURE__ */ jsx(Globe, { className: "h-3.5 w-3.5" }), /* @__PURE__ */ jsxs("span", { children: ["Your timezone:", formatTimezoneLabel(timezone)] })]
-				})
-			]
+			children: pickerContent
 		})]
 	});
 }

package/dist/toast/index.mjs

@@ -1,3 +1,3 @@
-import { t as toast } from "../toast-BWnN5fax.mjs";
-import { n as Toaster, t as useToast } from "../toast-DpxlFNNx.mjs";
+import { t as toast } from "../toast-D5XD7goD.mjs";
+import { n as Toaster, t as useToast } from "../toast-DDdLgY53.mjs";
 export { Toaster, toast, useToast };

package/dist/{toast-DpxlFNNx.mjs → toast-DDdLgY53.mjs}

@@ -1,4 +1,4 @@
-import { t as toast$1 } from "./toast-BWnN5fax.mjs";
+import { t as toast$1 } from "./toast-D5XD7goD.mjs";
 import { useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Toaster } from "sonner";

package/dist/tooltip/index.mjs

@@ -1,2 +1,2 @@
-import { t as Tooltip } from "../tooltip-Cruvl5F6.mjs";
+import { t as Tooltip } from "../tooltip-a7NTDCWw.mjs";
 export { Tooltip };

package/dist/{tooltip-Cruvl5F6.mjs → tooltip-a7NTDCWw.mjs}

@@ -1,6 +1,6 @@
 import { t as cn } from "./cn-D2KYQ917.mjs";
 import { t as cn$1 } from "./utils-C8KwMfT_.mjs";
-import "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 //#region ../shadcn/ui/tooltip.tsx
@@ -34,11 +34,13 @@ const TooltipContent$1 = ({ className, sideOffset = 0, children, ...props }) =>
 };
 //#endregion
 //#region src/components/base/tooltip/tooltip.tsx
+const LONG_PRESS_DURATION = 500;
+const AUTO_DISMISS_DURATION = 1500;
 function TooltipContent({ className, arrowClassName, sideOffset = 0, children, ...props }) {
 	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("tooltip-content", "bg-secondary text-secondary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance", className),
+		className: cn("tooltip-content", "bg-secondary text-secondary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance max-w-[calc(100vw-2rem)]", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, {
 			className: cn("fill-secondary -my-px border-none drop-shadow-[0_1px_0_secondary]", arrowClassName),
@@ -48,22 +50,77 @@ function TooltipContent({ className, arrowClassName, sideOffset = 0, children, .
 		})]
 	}) });
 }
+/**
+* Touch long-press tooltip — renders a simple positioned tooltip bubble
+* completely independent of Radix. This avoids Radix's internal pointer
+* capture which blocks scrolling after tooltip dismissal.
+*/
+function TouchTooltipBubble({ message, side = "bottom" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("animate-in fade-in-0 zoom-in-95 pointer-events-none absolute z-50", "bg-secondary text-secondary-foreground rounded-md px-3 py-1.5 text-xs text-balance", "left-1/2 max-w-[calc(100vw-2rem)] -translate-x-1/2", side === "bottom" ? "top-full mt-1" : side === "left" ? "right-full mr-1 top-1/2 -translate-y-1/2" : side === "right" ? "left-full ml-1 top-1/2 -translate-y-1/2" : "bottom-full mb-1"),
+		role: "tooltip",
+		children: /* @__PURE__ */ jsx("span", { children: message })
+	});
+}
 function Tooltip({ message, children, delayDuration = 200, side, align, sideOffset, hidden, open, onOpenChange, contentClassName, arrowClassName }) {
-	return /* @__PURE__ */ jsxs(Tooltip$1, {
-		delayDuration,
-		open,
-		onOpenChange,
-		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(TooltipContent, {
-			side,
-			align,
-			sideOffset,
-			hidden,
-			className: contentClassName,
-			arrowClassName,
-			children: /* @__PURE__ */ jsx("span", { children: message })
+	const [longPressVisible, setLongPressVisible] = useState(false);
+	const pressTimerRef = useRef(null);
+	const dismissTimerRef = useRef(null);
+	const clearTimers = useCallback(() => {
+		if (pressTimerRef.current) {
+			clearTimeout(pressTimerRef.current);
+			pressTimerRef.current = null;
+		}
+		if (dismissTimerRef.current) {
+			clearTimeout(dismissTimerRef.current);
+			dismissTimerRef.current = null;
+		}
+	}, []);
+	useEffect(() => () => clearTimers(), [clearTimers]);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex",
+		onTouchStart: useCallback(() => {
+			clearTimers();
+			pressTimerRef.current = setTimeout(() => {
+				setLongPressVisible(true);
+				dismissTimerRef.current = setTimeout(() => {
+					setLongPressVisible(false);
+				}, AUTO_DISMISS_DURATION);
+			}, LONG_PRESS_DURATION);
+		}, [clearTimers]),
+		onTouchMove: useCallback(() => {
+			clearTimers();
+			setLongPressVisible(false);
+		}, [clearTimers]),
+		onTouchEnd: useCallback(() => {
+			if (pressTimerRef.current) {
+				clearTimeout(pressTimerRef.current);
+				pressTimerRef.current = null;
+			}
+		}, []),
+		onTouchCancel: useCallback(() => {
+			clearTimers();
+			setLongPressVisible(false);
+		}, [clearTimers]),
+		children: [/* @__PURE__ */ jsxs(Tooltip$1, {
+			delayDuration,
+			open,
+			onOpenChange,
+			children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				side,
+				align,
+				sideOffset,
+				hidden,
+				className: contentClassName,
+				arrowClassName,
+				children: /* @__PURE__ */ jsx("span", { children: message })
+			})]
+		}), longPressVisible && /* @__PURE__ */ jsx(TouchTooltipBubble, {
+			message,
+			side
 		})]
 	});
 }

package/dist/transfer/index.mjs

@@ -1,2 +1,2 @@
-import { t as Transfer } from "../transfer-46C-rFFW.mjs";
+import { t as Transfer } from "../transfer-CoGPwOc6.mjs";
 export { Transfer };

package/dist/{types-BZNk3q65.mjs → types-CKIe2WlV.mjs}

@@ -1,7 +1,7 @@
 import { t as cn } from "./cn-D2KYQ917.mjs";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs/index.mjs";
-import { n as useTheme } from "./themes-DG1md8FI.mjs";
-import { t as toast } from "./toast-BWnN5fax.mjs";
+import { n as useTheme } from "./themes-CAiN4b6G.mjs";
+import { t as toast } from "./toast-D5XD7goD.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import Editor from "@monaco-editor/react";

package/dist/typography/index.mjs

@@ -1,2 +1,2 @@
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-ClB8k55E.mjs";
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-TRKP_CLT.mjs";
 export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };

package/dist/use-breakpoint-DGcVmB3c.mjs

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/use-breakpoint.ts
+const TABLET_MIN = 768;
+const DESKTOP_MIN = 1024;
+function getBreakpoint() {
+	if (typeof window === "undefined") return "desktop";
+	const width = window.innerWidth;
+	if (width < TABLET_MIN) return "mobile";
+	if (width < DESKTOP_MIN) return "tablet";
+	return "desktop";
+}
+/**
+* Returns the current viewport breakpoint tier.
+*
+* Breakpoints: mobile <768px, tablet 768–1023px, desktop ≥1024px.
+* SSR-safe: defaults to 'desktop' on server; client corrects on mount.
+*/
+function useBreakpoint() {
+	const [breakpoint, setBreakpoint] = useState(getBreakpoint);
+	useEffect(() => {
+		const mqTablet = window.matchMedia(`(min-width: ${TABLET_MIN}px)`);
+		const mqDesktop = window.matchMedia(`(min-width: ${DESKTOP_MIN}px)`);
+		const update = () => {
+			setBreakpoint(getBreakpoint());
+		};
+		mqTablet.addEventListener("change", update);
+		mqDesktop.addEventListener("change", update);
+		return () => {
+			mqTablet.removeEventListener("change", update);
+			mqDesktop.removeEventListener("change", update);
+		};
+	}, []);
+	return breakpoint;
+}
+//#endregion
+export { useBreakpoint as t };

package/dist/{use-copy-to-clipboard-uNeeVHC4.mjs → use-copy-to-clipboard-D7KyLIAt.mjs}

@@ -1,4 +1,4 @@
-import { t as toast } from "./toast-BWnN5fax.mjs";
+import { t as toast } from "./toast-D5XD7goD.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 //#region src/hooks/use-copy-to-clipboard.ts
 function useCopyToClipboard() {