@botiverse/raft-ui 0.59.1 → 0.60.0

package/dist/components/kbd/kbd-shortcut.mjs

@@ -0,0 +1,79 @@
+import { tv } from "../../lib/tv.mjs";
+import { markInlinePart } from "../../lib/inline-part.mjs";
+import { Kbd, KbdGroup } from "./kbd.mjs";
+import { useKeyboardPlatform } from "../../lib/use-platform.mjs";
+import { resolveKbdKeys } from "./kbd-keys.mjs";
+import { ArrowBigUp, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, ChevronUp, Command, CornerDownLeft, Delete, Option } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/kbd/kbd-shortcut.tsx
+const ICONS = {
+	"chevron-up": ChevronUp,
+	option: Option,
+	"arrow-big-up": ArrowBigUp,
+	command: Command,
+	"corner-down-left": CornerDownLeft,
+	delete: Delete,
+	"arrow-up": ArrowUp,
+	"arrow-down": ArrowDown,
+	"arrow-left": ArrowLeft,
+	"arrow-right": ArrowRight
+};
+const kbdShortcut = tv({
+	slots: {
+		root: ["inline-flex shrink-0 items-center"],
+		cap: ["data-[glyph=icon]:px-0"],
+		text: ["block leading-none [text-box:trim-both_cap_alphabetic]"],
+		icon: ["block shrink-0"],
+		label: ["sr-only"]
+	},
+	variants: { size: {
+		sm: { cap: ["h-4"] },
+		md: {}
+	} },
+	defaultVariants: { size: "sm" }
+});
+/**
+* One shortcut from key names: a cap per key, with the platform's drawings
+* (icons on a Mac, words elsewhere), and the shortcut in words for a screen
+* reader. Alternatives ("⌘↑ / ⌘↓") are two KbdShortcut with a separator
+* between them, written by the caller.
+*/
+function KbdShortcut({ keys, size = "sm", platform: platformProp, label, className, ...props }) {
+	const detected = useKeyboardPlatform();
+	const platform = platformProp ?? detected;
+	const resolved = resolveKbdKeys(keys, platform);
+	const slots = kbdShortcut({ size });
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "kbd-shortcut",
+		"data-platform": platform,
+		className: slots.root({ className }),
+		...props,
+		children: [/* @__PURE__ */ jsx(KbdGroup, {
+			"aria-hidden": "true",
+			children: resolved.map((key, index) => {
+				const Icon = key.icon ? ICONS[key.icon] : void 0;
+				return /* @__PURE__ */ jsx(Kbd, {
+					size,
+					"data-glyph": Icon ? "icon" : "text",
+					className: slots.cap(),
+					children: Icon ? /* @__PURE__ */ jsx(Icon, {
+						"data-slot": "kbd-icon",
+						className: slots.icon(),
+						"aria-hidden": "true"
+					}) : /* @__PURE__ */ jsx("span", {
+						"data-slot": "kbd-text",
+						className: slots.text(),
+						children: key.text
+					})
+				}, `${index}-${key.name}`);
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			"data-slot": "kbd-shortcut-label",
+			className: slots.label(),
+			children: label ?? resolved.map((key) => key.label).join(" ")
+		})]
+	});
+}
+markInlinePart(KbdShortcut);
+//#endregion
+export { KbdShortcut };

package/dist/components/kbd/kbd.d.mts

@@ -1,7 +1,60 @@
+import { VariantProps } from "../../lib/tv.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/kbd/kbd.d.ts
-export type KbdProps = ComponentPropsWithRef<"kbd">;
-export declare function Kbd({ className, ...props }: KbdProps): import("react").JSX.Element;
+declare const kbd: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+}, undefined, {
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  group: string[];
+}>>;
+export type KbdSize = NonNullable<VariantProps<typeof kbd>["size"]>;
+export type KbdProps = ComponentPropsWithRef<"kbd"> & {
+  /**
+   * `sm` (the default) is a hint beside something else: a menu item, a
+   * tooltip, the search trigger, an input. `md` is a key that is the content,
+   * in a list of shortcuts.
+   */
+  size?: KbdSize;
+};
+/**
+ * One keyboard key in a cap, a native `kbd`: at `sm`, the default, a hint
+ * beside a menu item, a tooltip's text or a field; at `md`, a key that is the
+ * content, as in a list of shortcuts. One key per cap: write a shortcut as a
+ * KbdGroup of Kbd, or from key names with KbdShortcut.
+ */
+export declare function Kbd({ className, size, ...props }: KbdProps): import("react").JSX.Element;
 export type KbdGroupProps = ComponentPropsWithRef<"span">;
+/** Caps of one shortcut, 4px apart. */
 export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react").JSX.Element;
 //#endregion

package/dist/components/kbd/kbd.mjs

@@ -1,27 +1,49 @@
 import { tv } from "../../lib/tv.mjs";
+import { markInlinePart } from "../../lib/inline-part.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/kbd/kbd.tsx
-const kbd = tv({ slots: {
-	root: [
-		"pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
-		"whitespace-nowrap select-none",
-		"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3",
-		"min-w-4 rounded-[3px] px-1",
-		"font-mono text-mono-meta font-normal text-foreground-hint",
-		"inset-ring inset-ring-line-hairline",
-		"in-data-[slot=tooltip-content]:text-foreground-on-hud/70",
-		"in-data-[slot=tooltip-content]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--foreground-on-hud)_70%,transparent)]"
-	],
-	group: ["inline-flex items-center gap-1"]
-} });
-function Kbd({ className, ...props }) {
-	const { root } = kbd();
+const kbd = tv({
+	slots: {
+		root: [
+			"pointer-events-none inline-flex w-fit shrink-0 items-center justify-center gap-1",
+			"whitespace-nowrap select-none [&_svg]:pointer-events-none",
+			"font-mono font-normal",
+			"inset-ring inset-ring-line-hairline"
+		],
+		group: ["inline-flex items-center gap-1"]
+	},
+	variants: { size: {
+		sm: { root: [
+			"[&_svg:not([class*='size-'])]:size-3",
+			"min-w-4 rounded-[3px] px-1",
+			"text-mono-meta text-foreground-hint",
+			"in-data-[slot=tooltip-content]:text-foreground-on-hud/70",
+			"in-data-[slot=tooltip-content]:shadow-[inset_0_0_0_1px_color-mix(in_oklch,var(--foreground-on-hud)_70%,transparent)]"
+		] },
+		md: { root: [
+			"[&_svg:not([class*='size-'])]:size-3.5",
+			"h-6 min-w-6 rounded-sticker px-1.5",
+			"text-mono-code text-foreground-muted",
+			"bg-fill-muted"
+		] }
+	} },
+	defaultVariants: { size: "sm" }
+});
+/**
+* One keyboard key in a cap, a native `kbd`: at `sm`, the default, a hint
+* beside a menu item, a tooltip's text or a field; at `md`, a key that is the
+* content, as in a list of shortcuts. One key per cap: write a shortcut as a
+* KbdGroup of Kbd, or from key names with KbdShortcut.
+*/
+function Kbd({ className, size = "sm", ...props }) {
+	const { root } = kbd({ size });
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
 		className: root({ className }),
 		...props
 	});
 }
+/** Caps of one shortcut, 4px apart. */
 function KbdGroup({ className, ...props }) {
 	const { group } = kbd();
 	return /* @__PURE__ */ jsx("span", {
@@ -30,5 +52,7 @@ function KbdGroup({ className, ...props }) {
 		...props
 	});
 }
+markInlinePart(Kbd);
+markInlinePart(KbdGroup);
 //#endregion
 export { Kbd, KbdGroup };

package/dist/components/markdown/markdown-parts.d.mts

@@ -2,6 +2,7 @@ import { CheckboxProps } from "../checkbox/checkbox.mjs";
 import "../checkbox/index.mjs";
 import { InlineCodeProps } from "../inline-code/inline-code.mjs";
 import "../inline-code/index.mjs";
+import { ScrollAreaProps } from "../scroll-area/types.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/markdown/markdown-parts.d.ts
 declare const HEADING_TAGS: {
@@ -33,8 +34,12 @@ export type MarkdownBlockquoteProps = ComponentPropsWithRef<"blockquote">;
 export declare function MarkdownBlockquote({ className, ...props }: MarkdownBlockquoteProps): import("react").JSX.Element;
 export type MarkdownRuleProps = ComponentPropsWithRef<"hr">;
 export declare function MarkdownRule({ className, ...props }: MarkdownRuleProps): import("react").JSX.Element;
-export type MarkdownTableScrollProps = ComponentPropsWithRef<"div">;
-/** Horizontal scroll container for wide tables. */
+/** ScrollArea's props but `orientation`: the table scrolls sideways only. */
+export type MarkdownTableScrollProps = Omit<ScrollAreaProps, "orientation">;
+/**
+ * Horizontal ScrollArea for a wide table, with its thin overlay scrollbar. It only overflows
+ * sideways, so it never holds back the page's vertical scroll.
+ */
 export declare function MarkdownTableScroll({ className, ...props }: MarkdownTableScrollProps): import("react").JSX.Element;
 export type MarkdownTableProps = ComponentPropsWithRef<"table">;
 export declare function MarkdownTable({ className, ...props }: MarkdownTableProps): import("react").JSX.Element;

package/dist/components/markdown/markdown-parts.mjs

@@ -1,4 +1,5 @@
 import { Checkbox } from "../checkbox/checkbox.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { InlineCode } from "../inline-code/inline-code.mjs";
 import { markdown } from "./markdown.recipe.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -84,13 +85,17 @@ function MarkdownRule({ className, ...props }) {
 		...props
 	});
 }
-/** Horizontal scroll container for wide tables. */
+/**
+* Horizontal ScrollArea for a wide table, with its thin overlay scrollbar. It only overflows
+* sideways, so it never holds back the page's vertical scroll.
+*/
 function MarkdownTableScroll({ className, ...props }) {
 	const { tableScroll } = markdown();
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(ScrollArea, {
 		"data-slot": "markdown-table-scroll",
+		...props,
 		className: tableScroll({ className }),
-		...props
+		orientation: "horizontal"
 	});
 }
 function MarkdownTable({ className, ...props }) {

package/dist/components/markdown/markdown.recipe.mjs

@@ -17,11 +17,7 @@ const markdown = tv({
 		listItem: ["mb-0.5"],
 		blockquote: ["my-1 border-l-2 border-line-seam pl-2.5", "text-foreground-muted not-italic"],
 		rule: ["my-3 border-0 border-t border-line-hairline"],
-		tableScroll: [
-			"overflow-x-auto",
-			"my-2 w-fit max-w-full",
-			"rounded-container border border-line-hairline bg-layer-card"
-		],
+		tableScroll: ["my-2 w-fit max-w-full", "rounded-container border border-line-hairline bg-layer-card"],
 		table: ["border-collapse", "border-0 text-callout"],
 		tableRow: ["last:[&>td]:border-b-0"],
 		headerCell: [

package/dist/components/message-list/message-list.mjs

@@ -1,11 +1,10 @@
 import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
-import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../scroll-area/scroll-area.mjs";
+import { ScrollArea } from "../scroll-area/scroll-area.mjs";
 import { PanelScrollViewport } from "../panel/panel.mjs";
 import { messageList } from "./message-list.recipe.mjs";
 import { useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/message-list/message-list.tsx
-const contentStyle = { minWidth: 0 };
 function MessageList({ children, className, render, rootClassName, style, ...props }) {
 	const isMobile = useMobileViewport();
 	const { content, root, viewport } = messageList();
@@ -28,24 +27,19 @@ function MessageList({ children, className, render, rootClassName, style, ...pro
 			})
 		})
 	});
-	return /* @__PURE__ */ jsxs(ScrollArea, {
+	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "message-list",
 		className: root({ className: rootClassName }),
-		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
+		children: /* @__PURE__ */ jsx(ScrollArea, {
 			...props,
 			render,
 			"data-slot": "message-list-viewport",
+			trigger: "scroll",
 			className: viewport({ className }),
-			style: viewportStyle,
-			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
-				className: content(),
-				style: contentStyle,
-				children
-			})
-		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
-			className: "me-1.5 px-0 py-1",
-			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
-		})]
+			contentClassName: content(),
+			style,
+			children
+		})
 	});
 }
 //#endregion

package/dist/components/message-list/message-list.recipe.mjs

@@ -3,7 +3,7 @@ import { tv } from "../../lib/tv.mjs";
 const messageList = tv({
 	slots: {
 		root: ["relative h-full min-h-0"],
-		viewport: ["min-w-0 overscroll-none"],
+		viewport: ["size-full min-h-0 min-w-0 overscroll-none"],
 		content: ["flex min-h-full w-full min-w-0 flex-col"],
 		dateDividerRoot: [
 			"flex select-none items-center",

package/dist/components/scroll-area/class-names.mjs

@@ -0,0 +1,19 @@
+import { clsx } from "cnfast";
+//#region src/components/scroll-area/class-names.ts
+/**
+* The root's rendered modifier classes, shared by every ScrollArea root.
+* `--{none,contain}-overscroll-{y,x}` is on only for an axis that has a
+* gutter, i.e. really scrolls right now, so an area that only overflows
+* sideways never holds back the page's vertical scroll; the container takes
+* them (scroll-area.css).
+*
+* The classes that change while scrolling (`--scrolling`, `--dragging`,
+* `--rtl`, `--overflow-{y,x}-{start,end}`) are not rendered: `useScrollbars`
+* sets them on the element, so scrolling never renders.
+*/
+function scrollAreaClassNames(state) {
+	const { rails } = state;
+	return clsx("r-scroll-area", `r-scroll-area--${state.size}`, `r-scroll-area--${state.trigger}-trigger`, `r-scroll-area--${state.orientation}-orientation`, `r-scroll-area--${state.guttersPosition}-gutters`, state.overscroll !== "auto" && rails.yRail && `r-scroll-area--${state.overscroll}-overscroll-y`, state.overscroll !== "auto" && rails.xRail && `r-scroll-area--${state.overscroll}-overscroll-x`, state.fade && "r-scroll-area--fade");
+}
+//#endregion
+export { scrollAreaClassNames };

package/dist/components/scroll-area/gutters-binding.mjs

@@ -0,0 +1,4 @@
+//#region src/components/scroll-area/gutters-binding.ts
+const fromGuttersBinding = (binding) => binding;
+//#endregion
+export { fromGuttersBinding };

package/dist/components/scroll-area/index.d.mts

@@ -1,2 +1,6 @@
-import { ScrollArea, ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps } from "./scroll-area.mjs";
-export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps };
+import { ScrollAreaActions, ScrollAreaContainer, ScrollAreaContainerOptions, ScrollAreaContainerProps, ScrollAreaContentProps, ScrollAreaEdges, ScrollAreaFrameProps, ScrollAreaGuttersBinding, ScrollAreaGuttersPosition, ScrollAreaGuttersProps, ScrollAreaOptions, ScrollAreaOrientation, ScrollAreaOverscroll, ScrollAreaOwnProps, ScrollAreaProps, ScrollAreaRailInset, ScrollAreaScrollToElementOptions, ScrollAreaSize, ScrollAreaTextareaOwnProps, ScrollAreaTextareaProps, ScrollAreaTrigger } from "./types.mjs";
+import { ScrollArea, ScrollAreaContent } from "./scroll-area.mjs";
+import { ScrollAreaGutters } from "./scroll-area-gutters.mjs";
+import { ScrollAreaTextarea } from "./scroll-area-textarea.mjs";
+import { useScrollAreaContainer } from "./use-scroll-area-container.mjs";
+export { ScrollArea, type ScrollAreaActions, type ScrollAreaContainer, type ScrollAreaContainerOptions, type ScrollAreaContainerProps, ScrollAreaContent, type ScrollAreaContentProps, type ScrollAreaEdges, type ScrollAreaFrameProps, ScrollAreaGutters, type ScrollAreaGuttersBinding, type ScrollAreaGuttersPosition, type ScrollAreaGuttersProps, type ScrollAreaOptions, type ScrollAreaOrientation, type ScrollAreaOverscroll, type ScrollAreaOwnProps, type ScrollAreaProps, type ScrollAreaRailInset, type ScrollAreaScrollToElementOptions, type ScrollAreaSize, ScrollAreaTextarea, type ScrollAreaTextareaOwnProps, type ScrollAreaTextareaProps, type ScrollAreaTrigger, useScrollAreaContainer };

package/dist/components/scroll-area/scroll-area-gutters.d.mts

@@ -0,0 +1,15 @@
+import { ScrollAreaGuttersProps } from "./types.mjs";
+//#region src/components/scroll-area/scroll-area-gutters.d.ts
+/**
+ * The scrollbars of a container bound with `useScrollAreaContainer`: spread
+ * its `guttersProps` here, and render it where `guttersPosition` says (as in
+ * the demo). `sticky` gutters: the container's first child, a zero-height
+ * layer stuck to the top of the viewport, laid over its padding box. It is in
+ * flow, so it is one of the container's children for a grid, a flex row,
+ * `gap` and sibling selectors: lay the content out in a wrapper inside. `absolute` gutters: right after the
+ * container, a layer laid over the frame. A gutter appears for each axis with
+ * something to scroll. Hidden from assistive technology, which uses the
+ * native scrolling.
+ */
+export declare function ScrollAreaGutters({ binding }: ScrollAreaGuttersProps): import("react").JSX.Element;
+//#endregion

package/dist/components/scroll-area/scroll-area-gutters.mjs

@@ -0,0 +1,60 @@
+import { fromGuttersBinding } from "./gutters-binding.mjs";
+import { useRailPointer } from "./use-rail-pointer.mjs";
+import { clsx } from "cnfast";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/scroll-area/scroll-area-gutters.tsx
+/** One scrollbar: the gutter (an invisible hover and paging target) and its thumb, sized and moved by the script. */
+function ScrollAreaGutter({ axis, containerRef, shortened, thumbRef, onDraggingChange }) {
+	const { dragging, railHandlers, thumbHandlers } = useRailPointer({
+		axis,
+		containerRef,
+		onDraggingChange
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...railHandlers,
+		"data-slot": "scroll-area-scrollbar",
+		"data-orientation": axis === "y" ? "vertical" : "horizontal",
+		className: clsx("r-scroll-area__gutter", axis === "y" ? "r-scroll-area__gutter--vertical" : "r-scroll-area__gutter--horizontal", dragging && "r-scroll-area__gutter--dragging", shortened && "r-scroll-area__gutter--shortened"),
+		children: /* @__PURE__ */ jsx("div", {
+			...thumbHandlers,
+			"data-slot": "scroll-area-thumb",
+			className: "r-scroll-area__thumb",
+			ref: thumbRef
+		})
+	});
+}
+/**
+* The scrollbars of a container bound with `useScrollAreaContainer`: spread
+* its `guttersProps` here, and render it where `guttersPosition` says (as in
+* the demo). `sticky` gutters: the container's first child, a zero-height
+* layer stuck to the top of the viewport, laid over its padding box. It is in
+* flow, so it is one of the container's children for a grid, a flex row,
+* `gap` and sibling selectors: lay the content out in a wrapper inside. `absolute` gutters: right after the
+* container, a layer laid over the frame. A gutter appears for each axis with
+* something to scroll. Hidden from assistive technology, which uses the
+* native scrolling.
+*/
+function ScrollAreaGutters({ binding }) {
+	const { containerRef, guttersRef, onDraggingChange, rails, xThumbRef, yThumbRef } = fromGuttersBinding(binding);
+	return /* @__PURE__ */ jsxs("div", {
+		"aria-hidden": "true",
+		"data-slot": "scroll-area-gutters",
+		className: "r-scroll-area__gutters",
+		ref: guttersRef,
+		children: [rails.yRail ? /* @__PURE__ */ jsx(ScrollAreaGutter, {
+			axis: "y",
+			containerRef,
+			shortened: rails.xRail,
+			thumbRef: yThumbRef,
+			onDraggingChange
+		}) : null, rails.xRail ? /* @__PURE__ */ jsx(ScrollAreaGutter, {
+			axis: "x",
+			containerRef,
+			shortened: rails.yRail,
+			thumbRef: xThumbRef,
+			onDraggingChange
+		}) : null]
+	});
+}
+//#endregion
+export { ScrollAreaGutters };

package/dist/components/scroll-area/scroll-area-textarea.d.mts

@@ -0,0 +1,14 @@
+import { ScrollAreaTextareaProps } from "./types.mjs";
+//#region src/components/scroll-area/scroll-area-textarea.d.ts
+/**
+ * A native `<textarea>` with ScrollArea's overlay scrollbar:
+ * `useScrollAreaContainer` with `guttersPosition="absolute"` and the textarea
+ * as its container (it can't hold children), the gutters beside it in the
+ * frame, as in the demo's textarea example. Its own `scrollHeight` is the
+ * content size: it is measured on every input and render, and when the box
+ * resizes. Native props, `ref`, `className`, `style` and `onScroll` go to the
+ * textarea; `wrapperClassName` and `wrapperStyle` to the frame. It is
+ * focusable itself, so it takes no `tabIndex` from the area.
+ */
+export declare function ScrollAreaTextarea({ className, hideDelay, onInput, overscroll, ref, size, trigger, wrapperClassName, wrapperStyle, ...props }: ScrollAreaTextareaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/scroll-area/scroll-area-textarea.mjs

@@ -0,0 +1,50 @@
+import { cn } from "../../cn.mjs";
+import { ScrollAreaGutters } from "./scroll-area-gutters.mjs";
+import { useScrollAreaContainer } from "./use-scroll-area-container.mjs";
+import { useLayoutEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/scroll-area/scroll-area-textarea.tsx
+/**
+* A native `<textarea>` with ScrollArea's overlay scrollbar:
+* `useScrollAreaContainer` with `guttersPosition="absolute"` and the textarea
+* as its container (it can't hold children), the gutters beside it in the
+* frame, as in the demo's textarea example. Its own `scrollHeight` is the
+* content size: it is measured on every input and render, and when the box
+* resizes. Native props, `ref`, `className`, `style` and `onScroll` go to the
+* textarea; `wrapperClassName` and `wrapperStyle` to the frame. It is
+* focusable itself, so it takes no `tabIndex` from the area.
+*/
+function ScrollAreaTextarea({ className, hideDelay = 600, onInput, overscroll = "none", ref, size = "medium", trigger = "hover", wrapperClassName, wrapperStyle, ...props }) {
+	const { containerProps, frameProps, guttersProps, measure } = useScrollAreaContainer({
+		containerRef: ref,
+		guttersPosition: "absolute",
+		hideDelay,
+		overscroll,
+		size,
+		trigger
+	});
+	const frameStyle = useMemo(() => ({
+		...wrapperStyle,
+		...frameProps.style
+	}), [frameProps, wrapperStyle]);
+	useLayoutEffect(() => measure());
+	const handleInput = (event) => {
+		measure();
+		onInput?.(event);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...frameProps,
+		"data-slot": "scroll-area-textarea",
+		className: cn(frameProps.className, "r-scroll-area--textarea", wrapperClassName),
+		style: frameStyle,
+		children: [/* @__PURE__ */ jsx("textarea", {
+			...containerProps,
+			tabIndex: void 0,
+			...props,
+			className: cn(containerProps.className, "r-scroll-area__textarea", className),
+			onInput: handleInput
+		}), /* @__PURE__ */ jsx(ScrollAreaGutters, { ...guttersProps })]
+	});
+}
+//#endregion
+export { ScrollAreaTextarea };