@stll/ui 0.0.1-placeholder.0 → 0.2.0

package/dist/components/textarea.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { useContentDir } from "../hooks/use-content-dir.js";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Field } from "@base-ui/react/field";
+//#region src/components/textarea.tsx
+const Textarea = ({ className, size = "default", unstyled = false, dir, onChange, ...props }) => {
+	const contentDir = useContentDir({
+		dir,
+		value: props.value,
+		defaultValue: props.defaultValue
+	});
+	const handleChange = (event) => {
+		contentDir.trackValue(event.currentTarget.value);
+		onChange?.(event);
+	};
+	return /* @__PURE__ */ jsx("span", {
+		className: cn(!unstyled && "border-input bg-background text-foreground ring-ring/24 has-focus-visible:border-ring has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 relative inline-flex w-full rounded-lg border text-base shadow-xs/5 transition-shadow not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:ring-[3px] has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none sm:text-sm dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]", className) || void 0,
+		"data-size": size,
+		"data-slot": "textarea-control",
+		children: /* @__PURE__ */ jsx(Field.Control, { render: (defaultProps) => /* @__PURE__ */ jsx("textarea", {
+			className: cn("field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5", size === "sm" && "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5", size === "lg" && "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5"),
+			"data-slot": "textarea",
+			...mergeProps(defaultProps, props, { onChange: handleChange }),
+			dir: contentDir.dir
+		}) })
+	});
+};
+//#endregion
+export { Textarea };

package/dist/components/toast.d.ts

@@ -0,0 +1,60 @@
+import * as React$1 from "react";
+import { Toast, ToastManagerAddOptions } from "@base-ui/react/toast";
+//#region src/components/toast.d.ts
+type ToastData = {
+  tooltipStyle?: boolean;
+};
+declare const TOAST_RIGHT_OFFSET_VAR = "--stella-toast-right-offset";
+declare const TOAST_ICONS: {
+  readonly error: React$1.ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+  readonly info: React$1.ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+  readonly loading: React$1.ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+  readonly neutral: null;
+  readonly success: React$1.ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+  readonly warning: React$1.ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+};
+type ToastType = keyof typeof TOAST_ICONS;
+type ToastAction = {
+  label: React$1.ReactNode;
+  onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+};
+type ToastActionProps = ToastManagerAddOptions<ToastData>["actionProps"];
+type ToastOptions = Omit<ToastManagerAddOptions<ToastData>, "actionProps" | "title" | "type"> & {
+  action?: ToastAction;
+  actionProps?: ToastActionProps;
+};
+type ToastUpdateOptions = Partial<ToastOptions> & {
+  title?: React$1.ReactNode | undefined;
+  type?: ToastType | undefined;
+};
+type ToastPromiseMessage = React$1.ReactNode | ToastUpdateOptions;
+type ToastPromiseOptions<Value> = {
+  error: ToastPromiseMessage | ((error: unknown) => ToastPromiseMessage);
+  loading: ToastPromiseMessage;
+  success: ToastPromiseMessage | ((value: Value) => ToastPromiseMessage);
+};
+type ToastApi = {
+  (title: React$1.ReactNode, options?: ToastOptions): string;
+  add: (options: ToastAddOptions) => string;
+  close: (id?: string) => void;
+  dismiss: (id?: string) => void;
+  error: (title: React$1.ReactNode, options?: ToastOptions) => string;
+  info: (title: React$1.ReactNode, options?: ToastOptions) => string;
+  loading: (title: React$1.ReactNode, options?: ToastOptions) => string;
+  promise: <Value>(promiseValue: Promise<Value>, options: ToastPromiseOptions<Value>) => Promise<Value>;
+  success: (title: React$1.ReactNode, options?: ToastOptions) => string;
+  update: (id: string, options: ToastUpdateOptions) => void;
+  warning: (title: React$1.ReactNode, options?: ToastOptions) => string;
+};
+type ToastAddOptions = ToastUpdateOptions & {
+  title: React$1.ReactNode;
+};
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastProviderProps = {
+  position?: ToastPosition;
+} & Toast.Provider.Props;
+declare const stellaToast: ToastApi;
+declare const ToastProvider: ({ children, position, ...props }: ToastProviderProps) => React$1.JSX.Element;
+declare const AnchoredToastProvider: ({ children, ...props }: Toast.Provider.Props) => React$1.JSX.Element;
+//#endregion
+export { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, type ToastPosition, ToastProvider, stellaToast };

package/dist/components/toast.js

@@ -0,0 +1,261 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { buttonVariants } from "./button-variants.js";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Toast } from "@base-ui/react/toast";
+//#region src/components/toast.tsx
+const toastManager = Toast.createToastManager();
+const anchoredToastManager = Toast.createToastManager();
+const TOAST_RIGHT_OFFSET_VAR = "--stella-toast-right-offset";
+const TOAST_ICONS = {
+	error: CircleAlertIcon,
+	info: InfoIcon,
+	loading: LoaderCircleIcon,
+	neutral: null,
+	success: CircleCheckIcon,
+	warning: TriangleAlertIcon
+};
+const stellaToast = Object.assign((title, options) => addToast(title, void 0, options), {
+	add: (options) => toastManager.add(normalizeToastAddOptions(options)),
+	close: (id) => {
+		toastManager.close(id);
+	},
+	dismiss: (id) => {
+		if (id === void 0) {
+			toastManager.close();
+			return;
+		}
+		toastManager.close(id);
+	},
+	error: (title, options) => addToast(title, "error", options),
+	info: (title, options) => addToast(title, "info", options),
+	loading: (title, options) => addToast(title, "loading", options),
+	promise: async (promiseValue, options) => {
+		const toastId = stellaToast.loading(getPromiseToastTitle(options.loading), getPromiseToastOptions(options.loading));
+		try {
+			const value = await promiseValue;
+			stellaToast.update(toastId, getPromiseToastUpdateOptions(options.success, value, "success"));
+			return value;
+		} catch (error) {
+			stellaToast.update(toastId, getPromiseToastUpdateOptions(options.error, error, "error"));
+			throw error;
+		}
+	},
+	success: (title, options) => addToast(title, "success", options),
+	update: (id, options) => {
+		toastManager.update(id, normalizeToastUpdateOptions(options));
+	},
+	warning: (title, options) => addToast(title, "warning", options)
+});
+const ToastProvider = ({ children, position = "bottom-right", ...props }) => /* @__PURE__ */ jsxs(Toast.Provider, {
+	toastManager,
+	...props,
+	children: [children, /* @__PURE__ */ jsx(Toasts, { position })]
+});
+const Toasts = ({ position }) => {
+	const { toasts } = Toast.useToastManager();
+	const isTop = position.startsWith("top");
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal",
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: cn("fixed z-[90] mx-auto flex w-[calc(100%-var(--toast-inset)*2)] max-w-90 [--toast-inset:--spacing(4)] sm:[--toast-inset:--spacing(8)]", "md:data-[position*=right]:w-[calc(100%-var(--toast-inset)*2-min(var(--stella-toast-right-offset,0px),calc(100vw-var(--toast-inset)*2-10rem)))]", "data-[position*=top]:top-(--toast-inset)", "data-[position*=bottom]:bottom-(--toast-inset)", "data-[position*=left]:start-(--toast-inset)", "data-[position*=right]:end-(--toast-inset)", "md:data-[position*=right]:end-[calc(var(--toast-inset)+min(var(--stella-toast-right-offset,0px),calc(100vw-var(--toast-inset)*2-10rem)))]", "data-[position*=center]:left-1/2 data-[position*=center]:-translate-x-1/2"),
+			"data-position": position,
+			"data-slot": "toast-viewport",
+			children: toasts.map((toastItem) => {
+				const Icon = getToastIcon(toastItem.type);
+				return /* @__PURE__ */ jsx(Toast.Root, {
+					className: cn("bg-popover text-popover-foreground absolute z-[calc(9999-var(--toast-index))] h-(--toast-calc-height) w-full rounded-lg border shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "data-[position*=right]:start-auto data-[position*=right]:end-0", "data-[position*=left]:start-0 data-[position*=left]:end-auto", "data-[position*=center]:start-0 data-[position*=center]:end-0", "data-[position*=top]:top-0 data-[position*=top]:bottom-auto data-[position*=top]:origin-top", "data-[position*=bottom]:top-auto data-[position*=bottom]:bottom-0 data-[position*=bottom]:origin-bottom", "after:absolute after:start-0 after:h-[calc(var(--toast-gap)+1px)] after:w-full", "data-[position*=top]:after:top-full", "data-[position*=bottom]:after:bottom-full", "[--toast-calc-height:var(--toast-frontmost-height,var(--toast-height))] [--toast-gap:--spacing(3)] [--toast-peek:--spacing(3)] [--toast-scale:calc(max(0,1-(var(--toast-index)*.1)))] [--toast-shrink:calc(1-var(--toast-scale))]", "data-[position*=top]:[--toast-calc-offset-y:calc(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap)+var(--toast-swipe-movement-y))]", "data-[position*=bottom]:[--toast-calc-offset-y:calc(var(--toast-offset-y)*-1+var(--toast-index)*var(--toast-gap)*-1+var(--toast-swipe-movement-y))]", "data-[position*=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--toast-peek))+(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-[position*=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--toast-peek))-(var(--toast-shrink)*var(--toast-calc-height))))_scale(var(--toast-scale))]", "data-limited:opacity-0", "data-expanded:h-(--toast-height)", "data-position:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--toast-calc-offset-y))]", "data-[position*=top]:data-starting-style:transform-[translateY(calc(-100%-var(--toast-inset)))]", "data-[position*=bottom]:data-starting-style:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:opacity-0", "data-ending-style:not-data-limited:not-data-swipe-direction:transform-[translateY(calc(100%+var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-100%-var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+100%+var(--toast-inset)))_translateY(var(--toast-calc-offset-y))]", "data-expanded:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-100%-var(--toast-inset)))]", "data-expanded:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+100%+var(--toast-inset)))]"),
+					"data-position": position,
+					swipeDirection: (() => {
+						if (position.includes("center")) return [isTop ? "up" : "down"];
+						if (position.includes("left")) return ["left", isTop ? "up" : "down"];
+						return ["right", isTop ? "up" : "down"];
+					})(),
+					toast: toastItem,
+					children: /* @__PURE__ */ jsxs(Toast.Content, {
+						className: "pointer-events-auto flex items-center gap-3 overflow-hidden px-3.5 py-3 text-sm transition-opacity duration-250 select-text data-behind:opacity-0 data-behind:not-data-expanded:pointer-events-none data-expanded:opacity-100",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex min-w-0 flex-1 gap-2",
+							children: [Icon && /* @__PURE__ */ jsx("div", {
+								className: "select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg]:h-lh [&>svg]:w-4",
+								"data-slot": "toast-icon",
+								children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:animate-spin in-data-[type=loading]:opacity-80" })
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-col gap-0.5 select-text",
+								children: [/* @__PURE__ */ jsx(Toast.Title, {
+									className: "truncate font-medium",
+									"data-slot": "toast-title"
+								}), /* @__PURE__ */ jsx(Toast.Description, {
+									className: "text-muted-foreground break-words",
+									"data-slot": "toast-description"
+								})]
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "ms-auto flex shrink-0 items-center gap-2",
+							children: [toastItem.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+								className: cn(buttonVariants({ size: "xs" }), "select-none"),
+								"data-slot": "toast-action",
+								children: toastItem.actionProps.children
+							}), /* @__PURE__ */ jsx(Toast.Close, {
+								className: "text-muted-foreground hover:text-foreground shrink-0 cursor-pointer rounded p-0.5 transition-colors select-none",
+								"data-slot": "toast-close",
+								"aria-label": "Close notification",
+								children: /* @__PURE__ */ jsx(XIcon, { className: "size-4" })
+							})]
+						})]
+					})
+				}, toastItem.id);
+			})
+		})
+	});
+};
+const AnchoredToastProvider = ({ children, ...props }) => /* @__PURE__ */ jsxs(Toast.Provider, {
+	toastManager: anchoredToastManager,
+	...props,
+	children: [children, /* @__PURE__ */ jsx(AnchoredToasts, {})]
+});
+const AnchoredToasts = () => {
+	const { toasts } = Toast.useToastManager();
+	return /* @__PURE__ */ jsx(Toast.Portal, {
+		"data-slot": "toast-portal-anchored",
+		children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: "outline-none",
+			"data-slot": "toast-viewport-anchored",
+			children: toasts.map((toastItem) => {
+				const Icon = getToastIcon(toastItem.type);
+				const tooltipStyle = toastItem.data?.tooltipStyle ?? false;
+				const positionerProps = toastItem.positionerProps;
+				if (!positionerProps?.anchor) return null;
+				return /* @__PURE__ */ jsx(Toast.Positioner, {
+					className: "z-50 max-w-[min(--spacing(64),var(--available-width))]",
+					"data-slot": "toast-positioner",
+					sideOffset: positionerProps.sideOffset ?? 4,
+					toast: toastItem,
+					children: /* @__PURE__ */ jsx(Toast.Root, {
+						className: cn("bg-popover text-popover-foreground relative border text-xs text-balance transition-[scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", tooltipStyle ? "rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]" : "rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]"),
+						"data-slot": "toast-popup",
+						toast: toastItem,
+						children: tooltipStyle ? /* @__PURE__ */ jsx(Toast.Content, {
+							className: "pointer-events-auto px-2 py-1 select-text",
+							children: /* @__PURE__ */ jsx(Toast.Title, { "data-slot": "toast-title" })
+						}) : /* @__PURE__ */ jsxs(Toast.Content, {
+							className: "pointer-events-auto flex items-center gap-3 overflow-hidden px-3.5 py-3 text-sm select-text",
+							children: [/* @__PURE__ */ jsxs("div", {
+								className: "flex min-w-0 flex-1 gap-2",
+								children: [Icon && /* @__PURE__ */ jsx("div", {
+									className: "select-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg]:h-lh [&>svg]:w-4",
+									"data-slot": "toast-icon",
+									children: /* @__PURE__ */ jsx(Icon, { className: "in-data-[type=error]:text-destructive in-data-[type=info]:text-info in-data-[type=success]:text-success in-data-[type=warning]:text-warning in-data-[type=loading]:animate-spin in-data-[type=loading]:opacity-80" })
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "flex min-w-0 flex-col gap-0.5 select-text",
+									children: [/* @__PURE__ */ jsx(Toast.Title, {
+										className: "truncate font-medium",
+										"data-slot": "toast-title"
+									}), /* @__PURE__ */ jsx(Toast.Description, {
+										className: "text-muted-foreground break-words",
+										"data-slot": "toast-description"
+									})]
+								})]
+							}), toastItem.actionProps && /* @__PURE__ */ jsx(Toast.Action, {
+								className: cn(buttonVariants({ size: "xs" }), "ms-auto shrink-0 select-none"),
+								"data-slot": "toast-action",
+								children: toastItem.actionProps.children
+							})]
+						})
+					})
+				}, toastItem.id);
+			})
+		})
+	});
+};
+function addToast(title, type, options) {
+	return toastManager.add(normalizeToastAddOptions({
+		...options,
+		title,
+		type
+	}));
+}
+function normalizeToastAddOptions({ action, actionProps, timeout, type, ...options }) {
+	return {
+		...options,
+		...normalizeToastActionProps({
+			action,
+			actionProps
+		}),
+		timeout: normalizeToastTimeout(timeout ?? getDefaultToastTimeout(type)),
+		type
+	};
+}
+function normalizeToastUpdateOptions(options) {
+	const { action, actionProps, timeout, type, ...updateOptions } = options;
+	const normalizedTimeout = timeout === void 0 ? normalizeDefaultToastUpdateTimeout(type) : normalizeToastTimeout(timeout);
+	return {
+		...updateOptions,
+		...normalizeToastActionProps({
+			action,
+			actionProps,
+			includeEmptyActionProps: Object.hasOwn(options, "action") || Object.hasOwn(options, "actionProps")
+		}),
+		...type === void 0 ? {} : { type },
+		...normalizedTimeout === void 0 ? {} : { timeout: normalizedTimeout }
+	};
+}
+function normalizeDefaultToastUpdateTimeout(type) {
+	if (type === void 0) return;
+	return normalizeToastTimeout(getDefaultToastTimeout(type));
+}
+function normalizeToastActionProps({ action, actionProps, includeEmptyActionProps = false }) {
+	if (action === void 0) return actionProps === void 0 && !includeEmptyActionProps ? {} : { actionProps };
+	return { actionProps: {
+		...actionProps,
+		children: action.label,
+		onClick: action.onClick
+	} };
+}
+function getDefaultToastTimeout(type) {
+	if (type === "loading") return 0;
+	if (type === "error" || type === "warning") return 6e3;
+	return 4e3;
+}
+function normalizeToastTimeout(timeout) {
+	if (timeout === Number.POSITIVE_INFINITY) return 0;
+	return timeout;
+}
+function getPromiseToastTitle(option) {
+	return isToastUpdateOptions(option) ? option.title : option;
+}
+function getPromiseToastOptions(option) {
+	return isToastUpdateOptions(option) ? option : void 0;
+}
+function getPromiseToastUpdateOptions(option, value, type) {
+	const resolved = typeof option === "function" ? option(value) : option;
+	if (isToastUpdateOptions(resolved)) {
+		const hasReplacementAction = resolved.action !== void 0 || Object.hasOwn(resolved, "actionProps");
+		return {
+			...resolved,
+			...hasReplacementAction ? {} : { actionProps: void 0 },
+			type
+		};
+	}
+	return {
+		actionProps: void 0,
+		title: resolved,
+		type
+	};
+}
+function isToastUpdateOptions(value) {
+	if (typeof value !== "object" || value === null) return false;
+	if (Array.isArray(value) || React$1.isValidElement(value)) return false;
+	return !(Symbol.iterator in value);
+}
+function getToastIcon(type) {
+	if (!isToastType(type)) return null;
+	return TOAST_ICONS[type];
+}
+function isToastType(type) {
+	return typeof type === "string" && type in TOAST_ICONS;
+}
+//#endregion
+export { AnchoredToastProvider, TOAST_RIGHT_OFFSET_VAR, ToastProvider, stellaToast };

package/dist/components/tooltip-trigger-helper.d.ts

@@ -0,0 +1,11 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import * as React$1 from "react";
+//#region src/components/tooltip-trigger-helper.d.ts
+type TooltipTriggerOptions = {
+  trigger: React$1.ReactElement;
+  tooltip: React$1.ReactNode;
+  layer?: OverlayLayer | undefined;
+};
+declare const renderTooltipTrigger: ({ trigger, tooltip, layer }: TooltipTriggerOptions) => React$1.JSX.Element;
+//#endregion
+export { renderTooltipTrigger };

package/dist/components/tooltip-trigger-helper.js

@@ -0,0 +1,14 @@
+"use client";
+import { hasTooltipContent } from "../lib/tooltip-content.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tooltip-trigger-helper.tsx
+const renderTooltipTrigger = ({ trigger, tooltip, layer }) => {
+	if (!hasTooltipContent(tooltip)) return trigger;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipPopup, {
+		...layer === void 0 ? {} : { layer },
+		children: tooltip
+	})] });
+};
+//#endregion
+export { renderTooltipTrigger };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { OverlayLayer } from "../lib/overlay-layer.js";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.d.ts
+declare const TooltipCreateHandle: typeof Tooltip$1.createHandle;
+declare const TooltipProvider: import("react").FC<import("@base-ui/react").TooltipProviderProps>;
+declare const Tooltip: <Payload>(props: Tooltip$1.Root.Props<Payload>) => import("react").JSX.Element;
+declare const TooltipTrigger: (props: Tooltip$1.Trigger.Props) => import("react").JSX.Element;
+declare const TooltipPopup: ({ className, align, sideOffset, side, layer, children, ...props }: Tooltip$1.Popup.Props & {
+  align?: Tooltip$1.Positioner.Props["align"];
+  side?: Tooltip$1.Positioner.Props["side"];
+  sideOffset?: Tooltip$1.Positioner.Props["sideOffset"];
+  layer?: OverlayLayer;
+}) => import("react").JSX.Element;
+//#endregion
+export { Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger };

package/dist/components/tooltip.js

@@ -0,0 +1,32 @@
+"use client";
+import { cn } from "../lib/utils.js";
+import { OVERLAY_LAYER_CLASS_NAMES } from "../lib/overlay-layer.js";
+import { jsx } from "react/jsx-runtime";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.tsx
+const TooltipCreateHandle = Tooltip$1.createHandle;
+const TooltipProvider = Tooltip$1.Provider;
+const Tooltip = Tooltip$1.Root;
+const TooltipTrigger = (props) => /* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+	"data-slot": "tooltip-trigger",
+	...props
+});
+const TooltipPopup = ({ className, align = "center", sideOffset = 4, side = "top", layer = "default", children, ...props }) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
+	align,
+	className: cn("h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom,transform] data-instant:transition-none", OVERLAY_LAYER_CLASS_NAMES[layer]),
+	"data-slot": "tooltip-positioner",
+	side,
+	sideOffset,
+	children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+		className: cn("bg-popover text-popover-foreground relative flex h-(--popup-height,auto) w-(--popup-width,auto) origin-(--transform-origin) rounded-md border text-xs text-balance shadow-md/5 transition-[width,height,scale,opacity] not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-ending-style:opacity-0 data-instant:duration-0 data-starting-style:scale-98 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "tooltip-popup",
+		...props,
+		children: /* @__PURE__ */ jsx(Tooltip$1.Viewport, {
+			className: "relative size-full overflow-clip px-(--viewport-inline-padding) py-1 [--viewport-inline-padding:--spacing(2)] **:data-current:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-current:opacity-100 **:data-current:transition-opacity **:data-current:data-ending-style:opacity-0 data-instant:transition-none **:data-previous:w-[calc(var(--popup-width)-2*var(--viewport-inline-padding)-2px)] **:data-previous:truncate **:data-previous:opacity-100 **:data-previous:transition-opacity **:data-previous:data-ending-style:opacity-0 **:data-current:data-starting-style:opacity-0 **:data-previous:data-starting-style:opacity-0",
+			"data-slot": "tooltip-viewport",
+			children
+		})
+	})
+}) });
+//#endregion
+export { Tooltip, TooltipPopup as TooltipContent, TooltipPopup, TooltipCreateHandle, TooltipProvider, TooltipTrigger };

package/dist/hooks/use-contained-handler.d.ts

@@ -0,0 +1,55 @@
+import * as React$1 from "react";
+//#region src/hooks/use-contained-handler.d.ts
+type ContainmentRoot = {
+  contains: (target: Node) => boolean;
+};
+/**
+ * Wrap a React event handler so it only fires when the event target
+ * is a DOM descendant of the given ref.
+ *
+ * React forwards synthetic events through the parent React tree even
+ * when descendants are rendered via createPortal. That makes it unsafe
+ * for a parent element to attach `onMouseDown`, `onClick`, `onFocus`,
+ * etc. that side-effect (focus steal, preventDefault, selection changes)
+ * under the assumption "the target lives inside me" — a portaled popup
+ * (Dialog, Combobox, Tooltip) silently bypasses the DOM boundary and
+ * triggers the side effect, dismissing itself.
+ *
+ * Only use for event types whose `target` is the meaningful subject of
+ * the event: pointer/mouse/touch/click and `focus`. Do **not** wrap
+ * `onBlur`: blur's `target` is the element losing focus, not the new
+ * focus destination, so the containment test cannot answer "is focus
+ * leaving for a portaled child?". For that case test `relatedTarget`
+ * directly inside the handler.
+ *
+ * The `require-contained-handler` oxlint rule enforces this on any JSX
+ * element carrying both `ref={…}` and one of the watched handler props;
+ * `containedEventHandler` covers elements that do not otherwise need a ref.
+ *
+ * @example
+ *   const barRef = useRef<HTMLDivElement>(null);
+ *   return (
+ *     <div
+ *       ref={barRef}
+ *       onMouseDown={containedHandler(barRef, (e) => {
+ *         e.preventDefault();
+ *         focusEditor();
+ *       })}
+ *     >
+ *       ...
+ *     </div>
+ *   );
+ */
+declare const containedHandler: <E extends {
+  target: unknown;
+}>(ref: React$1.RefObject<ContainmentRoot | null> | null | undefined, handler: ((event: E) => void) | undefined) => (event: E) => void;
+/**
+ * Contain a synchronous JSX handler to its own DOM subtree without a ref.
+ * Prefer this form when the element does not otherwise need a ref.
+ */
+declare const containedEventHandler: <E extends {
+  currentTarget: unknown;
+  target: unknown;
+}>(handler: (event: E) => void) => (event: E) => void;
+//#endregion
+export { containedEventHandler, containedHandler };

package/dist/hooks/use-contained-handler.js

@@ -0,0 +1,54 @@
+//#region src/hooks/use-contained-handler.ts
+/**
+* Wrap a React event handler so it only fires when the event target
+* is a DOM descendant of the given ref.
+*
+* React forwards synthetic events through the parent React tree even
+* when descendants are rendered via createPortal. That makes it unsafe
+* for a parent element to attach `onMouseDown`, `onClick`, `onFocus`,
+* etc. that side-effect (focus steal, preventDefault, selection changes)
+* under the assumption "the target lives inside me" — a portaled popup
+* (Dialog, Combobox, Tooltip) silently bypasses the DOM boundary and
+* triggers the side effect, dismissing itself.
+*
+* Only use for event types whose `target` is the meaningful subject of
+* the event: pointer/mouse/touch/click and `focus`. Do **not** wrap
+* `onBlur`: blur's `target` is the element losing focus, not the new
+* focus destination, so the containment test cannot answer "is focus
+* leaving for a portaled child?". For that case test `relatedTarget`
+* directly inside the handler.
+*
+* The `require-contained-handler` oxlint rule enforces this on any JSX
+* element carrying both `ref={…}` and one of the watched handler props;
+* `containedEventHandler` covers elements that do not otherwise need a ref.
+*
+* @example
+*   const barRef = useRef<HTMLDivElement>(null);
+*   return (
+*     <div
+*       ref={barRef}
+*       onMouseDown={containedHandler(barRef, (e) => {
+*         e.preventDefault();
+*         focusEditor();
+*       })}
+*     >
+*       ...
+*     </div>
+*   );
+*/
+const containedHandler = (ref, handler) => (event) => {
+	if (handler === void 0) return;
+	const container = ref?.current ?? null;
+	if (container !== null && event.target instanceof Node && !container.contains(event.target)) return;
+	handler(event);
+};
+/**
+* Contain a synchronous JSX handler to its own DOM subtree without a ref.
+* Prefer this form when the element does not otherwise need a ref.
+*/
+const containedEventHandler = (handler) => (event) => {
+	if (event.currentTarget instanceof Node && event.target instanceof Node && !event.currentTarget.contains(event.target)) return;
+	handler(event);
+};
+//#endregion
+export { containedEventHandler, containedHandler };

package/dist/hooks/use-content-dir.d.ts

@@ -0,0 +1,48 @@
+//#region src/hooks/use-content-dir.d.ts
+/**
+ * Resolve the `dir` for a free-text field so the caret and alignment follow
+ * the ambient UI direction while the field is empty, then switch to the typed
+ * content's own direction once the user starts writing.
+ *
+ * `dir="auto"` on its own is wrong for this: the bidi heuristic reads the
+ * field's *value*, and an empty value has no strong directional character, so
+ * it falls back to LTR — leaving the caret on the left even under an RTL UI.
+ * Here an empty field omits `dir` entirely (so it inherits the document
+ * direction: caret on the right in Arabic), and a non-empty field uses
+ * `dir="auto"` (Arabic content → RTL, Latin content → LTR, re-evaluated live).
+ *
+ * An explicit `dir="ltr"`/`dir="rtl"` is treated as a forced direction and
+ * returned unchanged (e.g. always-LTR numeric fields).
+ *
+ * Empty↔non-empty is the only transition that changes direction, so the
+ * uncontrolled path stores a boolean and the state setter no-ops (no re-render)
+ * on every keystroke that doesn't cross that boundary.
+ */
+type FieldValue = string | number | readonly string[] | undefined;
+type UseContentDirArgs = {
+  dir: string | undefined;
+  value: FieldValue;
+  defaultValue: FieldValue;
+};
+type UseContentDirResult = {
+  dir: "ltr" | "rtl" | "auto" | undefined;
+  /**
+   * Feed the field's current text on every change so the uncontrolled path can
+   * detect the empty↔non-empty transition. No-op for controlled fields, whose
+   * direction is derived from `value` on render.
+   */
+  trackValue: (text: string) => void;
+};
+declare const isStructuredInputType: (type: string | undefined) => boolean;
+/**
+ * Content-derived direction for a controlled field value: `"auto"` when there
+ * is content, `undefined` when empty (so the field inherits the ambient UI
+ * direction — caret on the RTL side under Arabic). Use this for a raw
+ * `<input>`/`<textarea>` whose value you already control; the shared
+ * `<Input>`/`<Textarea>` apply it for you via `useContentDir`, which also
+ * tracks the empty↔non-empty transition for uncontrolled fields.
+ */
+declare const contentDir: (value: FieldValue) => "auto" | undefined;
+declare const useContentDir: ({ dir, value, defaultValue }: UseContentDirArgs) => UseContentDirResult;
+//#endregion
+export { contentDir, isStructuredInputType, useContentDir };

package/dist/hooks/use-content-dir.js

@@ -0,0 +1,45 @@
+import { useState } from "react";
+//#region src/hooks/use-content-dir.ts
+const STRUCTURED_INPUT_TYPES = /* @__PURE__ */ new Set([
+	"email",
+	"url",
+	"tel",
+	"number",
+	"password",
+	"date",
+	"datetime-local",
+	"time",
+	"month",
+	"week"
+]);
+const isStructuredInputType = (type) => type !== void 0 && STRUCTURED_INPUT_TYPES.has(type);
+const hasText = (value) => {
+	if (typeof value === "string") return value.length > 0;
+	if (typeof value === "number") return true;
+	return Array.isArray(value) && value.length > 0;
+};
+/**
+* Content-derived direction for a controlled field value: `"auto"` when there
+* is content, `undefined` when empty (so the field inherits the ambient UI
+* direction — caret on the RTL side under Arabic). Use this for a raw
+* `<input>`/`<textarea>` whose value you already control; the shared
+* `<Input>`/`<Textarea>` apply it for you via `useContentDir`, which also
+* tracks the empty↔non-empty transition for uncontrolled fields.
+*/
+const contentDir = (value) => hasText(value) ? "auto" : void 0;
+const useContentDir = ({ dir, value, defaultValue }) => {
+	const forcedDir = dir === "ltr" || dir === "rtl" ? dir : void 0;
+	const isControlled = value !== void 0;
+	const [uncontrolledHasText, setUncontrolledHasText] = useState(() => hasText(defaultValue));
+	const contentPresent = isControlled ? hasText(value) : uncontrolledHasText;
+	return {
+		dir: forcedDir ?? (contentPresent ? "auto" : void 0),
+		trackValue: (text) => {
+			if (isControlled) return;
+			const next = text.length > 0;
+			setUncontrolledHasText((previous) => previous === next ? previous : next);
+		}
+	};
+};
+//#endregion
+export { contentDir, isStructuredInputType, useContentDir };

package/dist/hooks/use-mobile.d.ts

@@ -0,0 +1,4 @@
+//#region src/hooks/use-mobile.d.ts
+declare function useIsMobile(): boolean;
+//#endregion
+export { useIsMobile };