@stll/ui 0.65.1 → 0.67.0

package/dist/components/entity-actions.d.ts

@@ -0,0 +1,34 @@
+import { ContextMenuAction } from "./context-menu.js";
+import { ReactNode, Ref } from "react";
+/** One action of an object: the same shape `ContextMenu` renders. */
+export type EntityAction = ContextMenuAction;
+export type EntityActionsProps = {
+  /** The object's actions, in menu order. An empty list still owns the
+   *  object's right-click: the native menu stays, never a parent's menu. */
+  actions: readonly EntityAction[];
+  /** The object, which becomes the right-click target. It may render an
+   *  `EntityActionsButton` anywhere inside. */
+  children: ReactNode;
+  /** A line above the actions in both menus, such as when a message was
+   *  sent. It is a label, not an action. */
+  heading?: ReactNode;
+  /** The accessible name of the "…" button, e.g. "Actions". */
+  label: string;
+};
+/**
+ * An object's actions: the right-click menu over `children`, and the list
+ * an `EntityActionsButton` inside them opens.
+ */
+export declare const EntityActions: ({ actions, children, heading, label }: EntityActionsProps) => import("react").JSX.Element;
+export type EntityActionsButtonProps = {
+  /** Popup alignment against the button. */
+  align?: "center" | "end" | "start";
+  ref?: Ref<HTMLButtonElement>;
+  /** Popup side against the button. */
+  side?: "bottom" | "left" | "right" | "top";
+};
+/**
+ * The "…" button of the `EntityActions` around it. It opens the same list
+ * right-click opens, and renders nothing when the object has no actions.
+ */
+export declare const EntityActionsButton: ({ align, ref, side }: EntityActionsButtonProps) => import("react").JSX.Element | null;

package/dist/components/entity-actions.js

@@ -0,0 +1,132 @@
+"use client";
+import { EllipsisIcon } from "../icons.js";
+import { nativeContextMenuReason } from "../lib/native-context-menu.js";
+import { Button } from "./button.js";
+import { ContextMenuActionItems } from "./context-menu.js";
+import { DropdownMenu as Menu, DropdownMenuContent as MenuPopup, DropdownMenuGroup as MenuGroup, DropdownMenuLabel as MenuGroupLabel, DropdownMenuSeparator as MenuSeparator, DropdownMenuTrigger as MenuTrigger, MenuAnchor } from "./menu.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useRef, useState } from "react";
+import { panic } from "better-result";
+// src/components/entity-actions.tsx
+const EntityActionsContext = createContext(null);
+const isContextMenuKey = (event) => event.key === "ContextMenu" || event.shiftKey && event.key === "F10";
+const FOCUSABLE_SELECTOR = "a[href], button, input, select, textarea, [tabindex]:not([tabindex='-1'])";
+/** The control focus returns to when the menu closes, inside the object. */
+const focusReturnTarget = (container, target) => {
+	if (!(target instanceof Element)) return null;
+	const focusable = target.closest(FOCUSABLE_SELECTOR);
+	return focusable !== null && container.contains(focusable) ? focusable : null;
+};
+/**
+* Right-clicks (and context-menu keys) an object already answered for. The
+* innermost object owns the event even when it has no actions and leaves it
+* to the native menu, so the objects around it never open theirs. A marker
+* rather than `stopPropagation`: the native menu, and listeners further up
+* such as the desktop webview's policy, still see the event.
+*/
+const ownedEvents = /* @__PURE__ */ new WeakSet();
+/** Claims the event for this object; false when an inner object owns it. */
+const claimEvent = (event) => {
+	if (ownedEvents.has(event)) return false;
+	ownedEvents.add(event);
+	return true;
+};
+const EntityActionItems = ({ actions, heading }) => /* @__PURE__ */ jsxs(Fragment, { children: [heading !== void 0 && heading !== null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(MenuGroupLabel, {
+	className: "font-normal",
+	children: heading
+}) }), /* @__PURE__ */ jsx(MenuSeparator, {})] }), /* @__PURE__ */ jsx(ContextMenuActionItems, { actions })] });
+/**
+* An object's actions: the right-click menu over `children`, and the list
+* an `EntityActionsButton` inside them opens.
+*/
+const EntityActions = ({ actions, children, heading, label }) => {
+	const [open, setOpen] = useState(false);
+	const [anchor, setAnchor] = useState(null);
+	const returnFocus = useRef(null);
+	const context = {
+		actions,
+		heading,
+		label
+	};
+	const hasActions = actions.length > 0;
+	const openAt = (event, anchorRect) => {
+		event.preventDefault();
+		event.stopPropagation();
+		returnFocus.current = focusReturnTarget(event.currentTarget, event.target);
+		setAnchor(anchorRect);
+		setOpen(true);
+	};
+	const handleContextMenu = (event) => {
+		if (event.defaultPrevented || !(event.target instanceof Node) || !event.currentTarget.contains(event.target) || !claimEvent(event.nativeEvent)) return;
+		if (!hasActions || nativeContextMenuReason(event) !== null) return;
+		const { clientX: x, clientY: y } = event;
+		openAt(event, { getBoundingClientRect: () => new DOMRect(x, y, 0, 0) });
+	};
+	const handleKeyDown = (event) => {
+		const target = event.target;
+		if (event.defaultPrevented || !isContextMenuKey(event) || !(target instanceof Element) || !event.currentTarget.contains(target) || !claimEvent(event.nativeEvent)) return;
+		if (!hasActions || nativeContextMenuReason({
+			shiftKey: false,
+			target
+		}) !== null) return;
+		openAt(event, { getBoundingClientRect: () => target.getBoundingClientRect() });
+	};
+	return /* @__PURE__ */ jsxs(EntityActionsContext, {
+		value: context,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "contents",
+			"data-context-menu-target": "",
+			"data-slot": "entity-actions",
+			onContextMenu: handleContextMenu,
+			onKeyDown: handleKeyDown,
+			role: "presentation",
+			children
+		}), hasActions && /* @__PURE__ */ jsxs(Menu, {
+			onOpenChange: (nextOpen) => {
+				setOpen(nextOpen);
+				if (!nextOpen) setAnchor(null);
+			},
+			open,
+			children: [/* @__PURE__ */ jsx(MenuAnchor, {}), /* @__PURE__ */ jsx(MenuPopup, {
+				anchor: anchor ?? void 0,
+				"data-slot": "entity-actions-context-popup",
+				finalFocus: () => returnFocus.current ?? false,
+				children: /* @__PURE__ */ jsx(EntityActionItems, {
+					actions,
+					heading
+				})
+			})]
+		})]
+	});
+};
+/**
+* The "…" button of the `EntityActions` around it. It opens the same list
+* right-click opens, and renders nothing when the object has no actions.
+*/
+const EntityActionsButton = ({ align = "end", ref, side = "bottom" }) => {
+	const context = use(EntityActionsContext);
+	if (context === null) panic("EntityActionsButton renders inside EntityActions, which owns the list it opens");
+	if (context.actions.length === 0) return null;
+	return /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+		ref,
+		render: /* @__PURE__ */ jsx(Button, {
+			"aria-label": context.label,
+			className: "size-6",
+			size: "icon-xs",
+			variant: "muted",
+			children: /* @__PURE__ */ jsx(EllipsisIcon, {
+				"aria-hidden": "true",
+				className: "size-3.5"
+			})
+		})
+	}), /* @__PURE__ */ jsx(MenuPopup, {
+		align,
+		"data-slot": "entity-actions-button-popup",
+		side,
+		children: /* @__PURE__ */ jsx(EntityActionItems, {
+			actions: context.actions,
+			heading: context.heading
+		})
+	})] });
+};
+export { EntityActions, EntityActionsButton };

package/dist/components/field.d.ts

@@ -1,5 +1,4 @@
 import { Field as Field$1 } from "@base-ui/react/field";
-//#region src/components/field.d.ts
 declare const Field: ({ className, ...props }: Field$1.Root.Props) => import("react").JSX.Element;
 declare const FieldLabel: ({ className, ...props }: Field$1.Label.Props) => import("react").JSX.Element;
 declare const FieldItem: ({ className, ...props }: Field$1.Item.Props) => import("react").JSX.Element;
@@ -13,5 +12,4 @@ declare const FieldDescription: ({ className, ...props }: Field$1.Description.Pr
 declare const FieldError: ({ className, ...props }: Field$1.Error.Props) => import("react").JSX.Element;
 declare const FieldControl: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
 declare const FieldValidity: import("react").FC<import("@base-ui/react").FieldValidityProps>;
-//#endregion
 export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/field.js

@@ -2,7 +2,7 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
 import { Field as Field$1 } from "@base-ui/react/field";
-//#region src/components/field.tsx
+// src/components/field.tsx
 const Field = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Root, {
 	className: cn("flex flex-col items-start gap-2", className),
 	"data-slot": "field",
@@ -36,5 +36,4 @@ const FieldError = ({ className, ...props }) => /* @__PURE__ */ jsx(Field$1.Erro
 });
 const FieldControl = Field$1.Control;
 const FieldValidity = Field$1.Validity;
-//#endregion
 export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/file-input.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/file-input.d.ts
 type FileInputProps = {
   accept?: string | undefined;
   "aria-labelledby"?: string | undefined;
@@ -10,5 +9,4 @@ type FileInputProps = {
   emptyLabel: string;
 };
 declare const FileInput: ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }: FileInputProps) => import("react").JSX.Element;
-//#endregion
 export { FileInput, type FileInputProps };

package/dist/components/file-input.js

@@ -1,11 +1,11 @@
 "use client";
 import { UploadIcon } from "../icons.js";
+import { openFilePicker } from "../lib/file-picker.js";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import { openFilePicker } from "../lib/file-picker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-//#region src/components/file-input.tsx
+// src/components/file-input.tsx
 const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled, file, onFileChange, chooseLabel, emptyLabel }) => {
 	const triggerId = useId();
 	return /* @__PURE__ */ jsxs("span", {
@@ -30,5 +30,4 @@ const FileInput = ({ accept, "aria-labelledby": labelledBy, className, disabled,
 		})]
 	});
 };
-//#endregion
 export { FileInput };

package/dist/components/form.d.ts

@@ -1,6 +1,5 @@
 import { Form as Form$1 } from "@base-ui/react/form";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/form.d.ts
 declare const formVariants: (props?: ({
   density?: "compact" | "default" | "snug" | null | undefined;
   layout?: "inline" | "stack" | null | undefined;
@@ -44,5 +43,4 @@ type FormProps = Form$1.Props & VariantProps<typeof formVariants> & {
  * unsaved-changes guard.
  */
 declare const Form: ({ className, density, layout, dirty, onDiscard, children, ...props }: FormProps) => import("react").JSX.Element;
-//#endregion
 export { Form, type FormErrors, type FormProps, formVariants };

package/dist/components/form.js

@@ -4,7 +4,7 @@ import { DialogFormState } from "./dialog-form-state.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Form as Form$1 } from "@base-ui/react/form";
-//#region src/components/form.tsx
+// src/components/form.tsx
 const formVariants = cva("flex w-full", {
 	defaultVariants: {
 		density: "default",
@@ -63,5 +63,4 @@ const Form = ({ className, density, layout, dirty = false, onDiscard, children,
 		onDiscard
 	}), children]
 });
-//#endregion
 export { Form, formVariants };

package/dist/components/frame.d.ts

@@ -1,10 +1,8 @@
 import * as React$1 from "react";
-//#region src/components/frame.d.ts
 declare const Frame: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FramePanel: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameHeader: ({ className, ...props }: React$1.ComponentProps<"header">) => React$1.JSX.Element;
 declare const FrameTitle: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameDescription: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const FrameFooter: ({ className, ...props }: React$1.ComponentProps<"footer">) => React$1.JSX.Element;
-//#endregion
 export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/frame.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/frame.tsx
+// src/components/frame.tsx
 const Frame = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("bg-muted/72 relative flex flex-col rounded-2xl p-1", "*:[[data-slot=frame-panel]+[data-slot=frame-panel]]:mt-1", className),
 	"data-slot": "frame",
@@ -31,5 +31,4 @@ const FrameFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("footer", {
 	"data-slot": "frame-panel-footer",
 	...props
 });
-//#endregion
 export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/components/hex-color-picker.d.ts

@@ -1,5 +1,4 @@
 import * as React$1 from "react";
-//#region src/components/hex-color-picker.d.ts
 type HexColorPickerProps = {
   /** Hex color with or without # (e.g. "#ff0000" or "FF0000") */
   color?: string | undefined;
@@ -7,5 +6,4 @@ type HexColorPickerProps = {
   className?: string;
 };
 declare const HexColorPicker: ({ color, onChange, className }: HexColorPickerProps) => React$1.JSX.Element;
-//#endregion
 export { HexColorPicker, type HexColorPickerProps };

package/dist/components/hex-color-picker.js

@@ -1,10 +1,10 @@
 "use client";
-import { cn } from "../lib/utils.js";
 import { containedHandler } from "../hooks/use-contained-handler.js";
 import { useLatest } from "../hooks/use-latest.js";
+import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
-//#region src/components/hex-color-picker.tsx
+// src/components/hex-color-picker.tsx
 /**
 * Hex color picker — saturation/brightness square + hue strip.
 *
@@ -361,5 +361,4 @@ const HexColorPicker = ({ color = "000000", onChange, className }) => {
 		})]
 	});
 };
-//#endregion
 export { HexColorPicker };

package/dist/components/horizontal-scroller.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/horizontal-scroller.d.ts
 type ScrollDirection = "ltr" | "rtl";
 type HorizontalScrollerProps = ComponentProps<"div"> & {
   nextLabel: string;
@@ -16,5 +15,4 @@ export declare const HorizontalScroller: ({ children, className, nextLabel, prev
 export declare const scrollState: (scrollLeft: number, scrollWidth: number, clientWidth: number, direction: ScrollDirection) => ScrollState;
 /** Wheel deltas arrive in pixels, lines or pages; scrollBy takes pixels. */
 export declare const wheelDeltaPixels: (event: Pick<WheelEvent, "deltaMode" | "deltaY">, node: Pick<HTMLElement, "clientWidth">) => number;
-//#endregion
 export {};

package/dist/components/horizontal-scroller.js

@@ -1,11 +1,11 @@
 "use client";
-import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import { containedEventHandler } from "../hooks/use-contained-handler.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
 import { SCROLL_EDGE_FADE_CLASS, writeScrollEdgeFade } from "../lib/scroll-edge-fade.js";
+import { cn } from "../lib/utils.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-//#region src/components/horizontal-scroller.tsx
+// src/components/horizontal-scroller.tsx
 const CONTROL_CLASS = "bg-background/90 text-foreground absolute top-1/2 -translate-y-1/2 rounded-full border p-1 shadow-sm";
 const HorizontalScroller = ({ children, className, nextLabel, previousLabel, contentClassName, viewportClassName, ...props }) => {
 	const [viewport, setViewport] = useState(null);
@@ -105,5 +105,4 @@ const wheelDeltaPixels = (event, node) => {
 		default: return event.deltaY;
 	}
 };
-//#endregion
 export { HorizontalScroller, scrollState, wheelDeltaPixels };

package/dist/components/identity-text.d.ts

@@ -1,9 +1,7 @@
-//#region src/components/identity-text.d.ts
 type IdentityTextProps = {
   children: string;
   className?: string;
 };
 /** Discloses clipped names on hover and when their owning control receives focus. */
 export declare const IdentityText: ({ children, className }: IdentityTextProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/identity-text.js

@@ -1,10 +1,10 @@
 "use client";
 import { cn } from "../lib/utils.js";
-import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { withoutDirectionalControls } from "./bidi-text.js";
+import { Tooltip, TooltipContent as TooltipPopup, TooltipTrigger } from "./tooltip.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useState } from "react";
-//#region src/components/identity-text.tsx
+// src/components/identity-text.tsx
 /** Discloses clipped names on hover and when their owning control receives focus. */
 const IdentityText = ({ children, className }) => {
 	const triggerId = useId();
@@ -70,5 +70,4 @@ const IdentityText = ({ children, className }) => {
 		})]
 	});
 };
-//#endregion
 export { IdentityText };

package/dist/components/inline-drop-indicator.d.ts

@@ -1,10 +1,8 @@
 import { InlineDropPosition } from "../lib/inline-reorder.js";
-//#region src/components/inline-drop-indicator.d.ts
 /**
  * The bar beside a dragged-over item in a horizontal row. Render it inside
  * the item's positioned wrapper; `before`/`after` follow the text direction.
  */
 export declare const InlineDropIndicator: ({ position }: {
   position: InlineDropPosition | null;
-}) => import("react").JSX.Element | null;
-//#endregion
+}) => import("react").JSX.Element | null;

package/dist/components/inline-drop-indicator.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { jsx } from "react/jsx-runtime";
-//#region src/components/inline-drop-indicator.tsx
+// src/components/inline-drop-indicator.tsx
 /**
 * The bar beside a dragged-over item in a horizontal row. Render it inside
 * the item's positioned wrapper; `before`/`after` follow the text direction.
@@ -9,5 +9,4 @@ const InlineDropIndicator = ({ position }) => position === null ? null : /* @__P
 	"aria-hidden": "true",
 	className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", position === "before" ? "start-0" : "end-0")
 });
-//#endregion
 export { InlineDropIndicator };

package/dist/components/inline-rename.d.ts

@@ -1,5 +1,4 @@
 import { ComponentProps } from "react";
-//#region src/components/inline-rename.d.ts
 type InlineRenameInputProps = Omit<ComponentProps<"input">, "value" | "onChange" | "onKeyDown" | "size"> & {
   value: string;
   onValueChange: (value: string) => void;
@@ -9,5 +8,4 @@ type InlineRenameInputProps = Omit<ComponentProps<"input">, "value" | "onChange"
   fill?: boolean;
 };
 export declare const InlineRenameInput: ({ value, onValueChange, onCommit, onCancel, onBlur, className, ref, dir, fill, ...props }: InlineRenameInputProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/inline-rename.js

@@ -1,9 +1,9 @@
-import { cn } from "../lib/utils.js";
 import { contentDir, isStructuredInputType } from "../hooks/use-content-dir.js";
+import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useImperativeHandle, useRef } from "react";
 import { panic } from "better-result";
-//#region src/components/inline-rename.tsx
+// src/components/inline-rename.tsx
 /** Content-sized rename field; the title's parent owns its typography. */
 const mirrorTextFor = (value, placeholder) => {
 	if (value !== "") return value;
@@ -72,5 +72,4 @@ const InlineRenameInput = ({ value, onValueChange, onCommit, onCancel, onBlur, c
 		})]
 	});
 };
-//#endregion
 export { InlineRenameInput };

package/dist/components/input-control.d.ts

@@ -1,4 +1,3 @@
-//#region src/components/input-control.d.ts
 /**
  * A text control is two boxes: the bordered wrapper a caller styles and the
  * element the text is typed into. The wrapper is what a height applies to and
@@ -24,5 +23,4 @@ export declare const INPUT_SIZE_CLASS_NAMES: {
  * the caret room, and a matching negative margin keeps the text in line with
  * its neighbours.
  */
-export declare const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
-//#endregion
+export declare const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";

package/dist/components/input-control.js

@@ -1,5 +1,5 @@
 import { CONTROL_SIZE } from "../lib/control-size.js";
-//#region src/components/input-control.ts
+// src/components/input-control.ts
 /**
 * A text control is two boxes: the bordered wrapper a caller styles and the
 * element the text is typed into. The wrapper is what a height applies to and
@@ -26,5 +26,4 @@ const INPUT_SIZE_CLASS_NAMES = {
 * its neighbours.
 */
 const INLINE_FIELD_CLASS_NAME = "placeholder:text-foreground-placeholder focus-visible:ring-ring/30 -mx-1 min-h-0 w-full min-w-0 rounded-sm bg-transparent px-1 py-0 font-[inherit] text-[length:inherit] leading-[inherit] text-inherit outline-none focus-visible:ring-2";
-//#endregion
 export { INLINE_FIELD_CLASS_NAME, INPUT_CONTROL_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES };

package/dist/components/input-group.d.ts

@@ -2,7 +2,6 @@ import * as React$1 from "react";
 import { InputProps } from "./input.js";
 import { TextareaProps } from "./textarea.js";
 import { VariantProps } from "class-variance-authority";
-//#region src/components/input-group.d.ts
 declare const InputGroup: ({ className, ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
   align?: "block-end" | "block-start" | "inline-end" | "inline-start" | null | undefined;
@@ -11,5 +10,4 @@ declare const InputGroupAddon: ({ className, align, ...props }: React$1.Componen
 declare const InputGroupText: ({ className, ...props }: React$1.ComponentProps<"span">) => React$1.JSX.Element;
 declare const InputGroupInput: ({ className, ...props }: InputProps) => React$1.JSX.Element;
 declare const InputGroupTextarea: ({ className, ...props }: TextareaProps) => React$1.JSX.Element;
-//#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-group.js

@@ -4,14 +4,14 @@ import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/input-group.tsx
+// src/components/input-group.tsx
 const InputGroup = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("border-input bg-background text-foreground ring-ring/24 has-autofill:bg-foreground/4 has-[input:focus-visible,textarea:focus-visible]:border-ring has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/36 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:border-destructive/64 has-[input:focus-visible,textarea:focus-visible]:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/16 dark:bg-input/32 dark:has-autofill:bg-foreground/8 dark:has-[input[aria-invalid],textarea[aria-invalid]]:ring-destructive/24 relative inline-flex w-full min-w-0 items-center rounded-lg border text-base shadow-xs/5 not-dark:bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[align=block-end]:h-auto has-data-[align=block-end]:flex-col has-data-[align=block-start]:h-auto has-data-[align=block-start]:flex-col has-[input:disabled,textarea:disabled]:opacity-64 has-[input:disabled,textarea:disabled,input:focus-visible,textarea:focus-visible,input[aria-invalid],textarea[aria-invalid]]:shadow-none has-[input:focus-visible,textarea:focus-visible]:ring-[3px] has-[textarea]:h-auto sm:text-sm dark:not-has-[input:disabled,textarea:disabled]:not-has-[input:focus-visible,textarea:focus-visible]:not-has-[input[aria-invalid],textarea[aria-invalid]]:before:shadow-[0_-1px_--theme(--color-white/6%)] has-data-[align=inline-end]:**:[[data-size=sm]_input]:pe-1.5 has-data-[align=inline-start]:**:[[data-size=sm]_input]:ps-1.5 *:[[data-slot=input-control],[data-slot=textarea-control]]:contents *:[[data-slot=input-control],[data-slot=textarea-control]]:before:hidden has-data-[align=block-end]:**:[input]:pt-1.5 has-data-[align=block-start]:**:[input]:pb-1.5 has-data-[align=inline-end]:**:[input]:pe-2 has-data-[align=inline-start]:**:[input]:ps-2 has-[[data-align=block-start],[data-align=block-end]]:**:[input]:h-auto **:[textarea_button]:rounded-[calc(var(--radius-md)-1px)] **:[textarea]:min-h-20.5 **:[textarea]:resize-none **:[textarea]:py-[calc(--spacing(3)-1px)] **:[textarea]:max-sm:min-h-23.5", className),
 	"data-slot": "input-group",
 	role: "group",
 	...props
 });
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 leading-none select-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80 [&>kbd]:rounded-[calc(var(--radius)-5px)]", {
+const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 leading-none select-none [&_svg]:-mx-0.5 in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4.5 sm:in-[[data-slot=input-group]:has([data-slot=input-control],[data-slot=textarea-control])]:[&_svg:not([class*='size-'])]:size-4 not-has-[button]:**:[svg:not([class*='opacity-'])]:opacity-80 [&>kbd]:rounded-sm", {
 	defaultVariants: { align: "inline-start" },
 	variants: { align: {
 		"block-end": "order-last w-full justify-start px-[calc(--spacing(3)-1px)] pb-[calc(--spacing(3)-1px)] [.border-t]:pt-[calc(--spacing(3)-1px)] [[data-size=sm]+&]:px-[calc(--spacing(2.5)-1px)]",
@@ -25,8 +25,8 @@ const InputGroupAddon = ({ className, align = "inline-start", ...props }) => /*
 	"data-align": align,
 	"data-slot": "input-group-addon",
 	onMouseDown: (e) => {
-		const { target } = e;
-		if (!(target instanceof Element)) return;
+		const { currentTarget, target } = e;
+		if (!(target instanceof Element) || !currentTarget.contains(target)) return;
 		if (target.closest("button, a, input, select, textarea, [role='button'], [role='combobox'], [role='listbox'], [data-slot='select-trigger']")) return;
 		e.preventDefault();
 		const parent = e.currentTarget.parentElement;
@@ -49,5 +49,4 @@ const InputGroupTextarea = ({ className, ...props }) => /* @__PURE__ */ jsx(Text
 	unstyled: true,
 	...props
 });
-//#endregion
 export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/input-otp.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { OTPInput } from "input-otp";
-//#region src/components/input-otp.d.ts
 declare const InputOTP: ({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
   containerClassName?: string;
 }) => React$1.JSX.Element;
@@ -9,5 +8,4 @@ declare const InputOTPSlot: ({ index, className, ...props }: React$1.ComponentPr
   index: number;
 }) => React$1.JSX.Element;
 declare const InputOTPSeparator: ({ ...props }: React$1.ComponentProps<"div">) => React$1.JSX.Element;
-//#endregion
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input-otp.js

@@ -4,7 +4,7 @@ import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
-//#region src/components/input-otp.tsx
+// src/components/input-otp.tsx
 const InputOTP = ({ className, containerClassName, ...props }) => /* @__PURE__ */ jsx(OTPInput, {
 	className: cn("disabled:cursor-not-allowed", className),
 	containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
@@ -35,5 +35,4 @@ const InputOTPSeparator = ({ ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
 	children: /* @__PURE__ */ jsx(MinusIcon, {})
 });
-//#endregion
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot };

package/dist/components/input.d.ts

@@ -1,7 +1,6 @@
 import * as React$1 from "react";
 import { ControlSize } from "../lib/control-size.js";
 import { Input as Input$1 } from "@base-ui/react/input";
-//#region src/components/input.d.ts
 type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>, "size" | "style" | "type"> & {
   type?: Exclude<React$1.HTMLInputTypeAttribute, "file"> | undefined;
   size?: ControlSize | number;
@@ -16,5 +15,4 @@ type InputProps = Omit<Input$1.Props & React$1.RefAttributes<HTMLInputElement>,
   nativeInput?: boolean;
 };
 declare const Input: ({ className, size, unstyled, inline, nativeInput, dir, onChange, ...props }: InputProps) => React$1.JSX.Element;
-//#endregion
 export { Input, type InputProps };

package/dist/components/input.js

@@ -1,12 +1,12 @@
 "use client";
+import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
 import { SearchIcon } from "../icons.js";
-import { cn } from "../lib/utils.js";
 import { CONTROL_SIZE } from "../lib/control-size.js";
-import { isStructuredInputType, useContentDir } from "../hooks/use-content-dir.js";
+import { cn } from "../lib/utils.js";
 import { INLINE_FIELD_CLASS_NAME, INPUT_ELEMENT_CLASS_NAME, INPUT_SIZE_CLASS_NAMES } from "./input-control.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
-//#region src/components/input.tsx
+// src/components/input.tsx
 const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, inline = false, nativeInput = false, dir, onChange, ...props }) => {
 	const controlSize = typeof size === "number" ? CONTROL_SIZE.default : size;
 	const contentDir = useContentDir({
@@ -45,5 +45,4 @@ const Input = ({ className, size = CONTROL_SIZE.default, unstyled = false, inlin
 		})]
 	});
 };
-//#endregion
 export { Input };

package/dist/components/input.native.d.ts

@@ -1,6 +1,5 @@
 import { InputContract, TextFieldContract } from "./input.shared.js";
 import { TextInputProps } from "react-native";
-//#region src/components/input.native.d.ts
 type NativeFieldProps = Omit<TextInputProps, keyof TextFieldContract> & TextFieldContract & {
   className?: string | undefined;
 };
@@ -19,5 +18,4 @@ type InputProps = NativeFieldProps & {
  * box, or iOS's filled search field for `type="search"`.
  */
 export declare const Input: ({ type, unstyled, size, ...props }: InputProps) => import("react").JSX.Element;
-//#endregion
 export {};

package/dist/components/input.native.js

@@ -1,7 +1,7 @@
 import { textFontFamily } from "./text.native.js";
 import { jsx } from "react/jsx-runtime";
 import { TextInput } from "react-native";
-//#region src/components/input.native.tsx
+// src/components/input.native.tsx
 /** The field's text at each control size, as the web sets it on a phone. */
 const TEXT_SIZE = {
 	sm: "text-sm",
@@ -62,5 +62,4 @@ const Input = ({ type = "text", unstyled = false, size = "default", ...props })
 	box: inputBox(type, size, unstyled),
 	size
 });
-//#endregion
 export { Input, NativeField };

package/dist/components/input.shared.d.ts

@@ -1,5 +1,4 @@
 import { ControlSize } from "../lib/control-size.js";
-//#region src/components/input.shared.d.ts
 /** The props every text field renderer accepts, with one meaning. */
 export type TextFieldContract = {
   size?: ControlSize;
@@ -15,5 +14,4 @@ export type TextFieldContract = {
 /** A single-line field also says what it holds; `search` draws a search field. */
 export type InputContract = TextFieldContract & {
   type?: "email" | "search" | "tel" | "text" | "url";
-};
-//#endregion
+};