@bysages/react 0.4.4 → 0.6.0

package/dist/index-Bbg4heDO.d.mts

@@ -1,113 +0,0 @@
-import { t as Popover } from "./index-Eu-Bttta.mjs";
-import { HTMLAttributes } from "react";
-//#region src/components/mentions/use-mentions.d.ts
-interface UseMentionsOptions {
-  /** The candidates offered once the trigger character is typed. */
-  items: MentionEntry[];
-  /** The character that summons the candidates. */
-  trigger?: string;
-}
-interface UseMentionsHandlers {
-  /** The text the field holds right now — read at keystroke time, never
-   * from a controlled prop that lags a render behind the caret. */
-  getText: () => string;
-  /** Writes the field's next text: a mention inserted at the token. */
-  setText: (value: string) => void;
-}
-/** Whatever carries a key press — a native KeyboardEvent or a React
- * synthetic one; the detector only needs the key's name and the power
- * to hold the key back. */
-interface MentionKeyEvent {
-  key: string;
-  preventDefault: () => void;
-}
-/** The @-detection machinery behind a mention field: watch the caret,
- * offer the matching candidates, and answer for the keys that drive
- * them. The field element arrives as a getter because hosts wrap it
- * differently (a bare textarea, a field part's ref).
- *
- * `onKeydown` answers whether the vessel consumed the key, so a host
- * with its own Enter semantics — a composer that sends — can yield to
- * the candidates first and act only when the vessel stands down. */
-declare function useMentions(options: UseMentionsOptions | (() => UseMentionsOptions), textarea: () => HTMLTextAreaElement | null, handlers: UseMentionsHandlers): {
-  open: boolean;
-  matches: MentionEntry[];
-  active: number;
-  setActive: import("react").Dispatch<import("react").SetStateAction<number>>;
-  insert: (entry: MentionEntry) => void;
-  close: () => void;
-  onInput: () => void;
-  onKeydown: (event: MentionKeyEvent) => boolean;
-};
-//#endregion
-//#region src/components/mentions/index.d.ts
-interface MentionEntry {
-  label: string;
-  value: string;
-}
-interface MentionsVesselProps {
-  id?: string;
-  /** The host field's rung, so the rows keep the field's register. */
-  size?: "sm" | "md" | "lg";
-  /** Whether the candidates are up. */
-  open?: boolean;
-  /** The candidates on offer. */
-  matches?: MentionEntry[];
-  /** The keyboard's active row. */
-  active?: number;
-  /** The rectangle the vessel points at — the host's textarea. */
-  anchor?: HTMLTextAreaElement | null;
-  /** A candidate was chosen. */
-  onInsert?: (entry: MentionEntry) => void;
-  /** The pointer moved to a row. */
-  onActiveChange?: (index: number) => void;
-  /** The vessel was dismissed. */
-  onOpenChange?: (open: boolean) => void;
-}
-/** The vessel: the candidates themselves as a floating card. The anchor
- * is virtual — a live rectangle off the host's field — so a host keeps
- * its own anatomy (the textarea rides where the host puts it) and the
- * vessel still points at the right place. Shares the detection state
- * with the host through `useMentions`. */
-declare function MentionsVesselImpl({ size, open, matches, active, anchor, onInsert, onActiveChange, onOpenChange, id }: MentionsVesselProps): import("react").JSX.Element;
-declare const MentionsVessel: typeof MentionsVesselImpl & {
-  Root: typeof MentionsVesselImpl;
-};
-/**
- * @-mentions: a plain textarea that, when the text before the caret ends
- * with the trigger character followed by a token, offers the matching
- * candidates in a small anchored vessel; choosing one replaces the token
- * with `trigger + label` and hands the whole text back through
- * `onValueChange`. Arrows move, Enter inserts, Escape dismisses.
- *
- * The field is the shared `Field.Textarea` — field wiring (label ids,
- * the invalid state, autoresize) rides on it for free — and the vessel
- * anchors through the popover's own `Anchor` part wrapped around the
- * field, so the machine, not a local rectangle, points the popup at the
- * input. Composers that keep their own field anatomy (the AI prompt
- * input) skip this shell and wire `useMentions` plus `MentionsVessel`
- * themselves.
- */
-interface MentionsProps extends HTMLAttributes<HTMLDivElement> {
-  /** The candidates offered once the trigger character is typed. */
-  items?: MentionEntry[];
-  /** The text held by the field. Supply it to control the field;
-   * changes are reported via `onValueChange`. */
-  value?: string;
-  /** The character that summons the candidates. */
-  trigger?: string;
-  placeholder?: string;
-  /** Let the field grow with its text instead of holding `rows`. */
-  autoresize?: boolean;
-  /** Standing alone, the field styles itself from this flag; inside a
-   * `Field.Root` the field's own invalid state takes over. */
-  invalid?: boolean;
-  /** One rung of the control-height ladder for the resting field. */
-  size?: "sm" | "md" | "lg";
-  /** Reports the field's next text. */
-  onValueChange?: (value: string) => void;
-}
-declare function MentionsImpl({ items, value, trigger, placeholder, autoresize, invalid, size, onValueChange, children, ...rest }: MentionsProps): import("react").JSX.Element;
-declare const Mentions: typeof MentionsImpl & typeof Popover;
-//#endregion
-export { MentionsVesselProps as a, useMentions as c, MentionsVessel as i, Mentions as n, UseMentionsHandlers as o, MentionsProps as r, UseMentionsOptions as s, MentionEntry as t };

package/dist/index-Eu-Bttta.d.mts

@@ -1,24 +0,0 @@
-import { ReactNode } from "react";
-import { Popover } from "@ark-ui/react/popover";
-//#region src/components/popover/index.d.ts
-type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
-interface PopoverFacadeProps {
-  open?: boolean;
-  defaultOpen?: boolean;
-  trigger?: ReactNode;
-  content?: string;
-  label: string;
-  description?: string;
-  disabled?: boolean;
-  placement?: PopoverPlacement;
-  children?: ReactNode;
-  onOpenChange?: (open: boolean) => void;
-}
-declare function PopoverFacade({ open, defaultOpen, trigger, content, label, description, disabled, placement, children, onOpenChange }: PopoverFacadeProps): import("react").JSX.Element;
-declare namespace PopoverFacade {
-  var displayName: string;
-}
-type PopoverParts = typeof Popover;
-declare const Popover$1: typeof PopoverFacade & PopoverParts;
-//#endregion
-export { PopoverFacadeProps as n, Popover$1 as t };

package/dist/mentions-BwnyvdXz.mjs

@@ -1,213 +0,0 @@
-import { t as useElementId } from "./id-C37UYLwJ.mjs";
-import { t as withSelfRoot } from "./family-DE_GQeeM.mjs";
-import { Field } from "./components/field/index.mjs";
-import { Popover as Popover$1 } from "./components/popover/index.mjs";
-import { injectComponentStyle } from "@bysages/core/styling";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
-import { Popover } from "@ark-ui/react/popover";
-import { Portal } from "@ark-ui/react/portal";
-//#region src/components/mentions/use-mentions.ts
-/** The @-detection machinery behind a mention field: watch the caret,
-* offer the matching candidates, and answer for the keys that drive
-* them. The field element arrives as a getter because hosts wrap it
-* differently (a bare textarea, a field part's ref).
-*
-* `onKeydown` answers whether the vessel consumed the key, so a host
-* with its own Enter semantics — a composer that sends — can yield to
-* the candidates first and act only when the vessel stands down. */
-function useMentions(options, textarea, handlers) {
-	const [popupOpen, setPopupOpen] = useState(false);
-	const [matches, setMatches] = useState([]);
-	const [active, setActive] = useState(0);
-	const anchorIndex = useRef(0);
-	const caretIndex = useRef(0);
-	const resolve = () => typeof options === "function" ? options() : options;
-	const closePopup = () => {
-		setPopupOpen(false);
-		setMatches([]);
-	};
-	const detect = () => {
-		const text = handlers.getText();
-		const caret = textarea()?.selectionStart ?? text.length;
-		caretIndex.current = caret;
-		const head = text.slice(0, caret);
-		const char = resolve().trigger ?? "@";
-		const anchor = head.lastIndexOf(char);
-		const token = anchor === -1 ? "" : head.slice(anchor + char.length);
-		if (anchor === -1 || /\s/.test(token)) {
-			closePopup();
-			return;
-		}
-		const found = resolve().items.filter((entry) => entry.label.toLowerCase().startsWith(token.toLowerCase()));
-		setMatches(found);
-		setActive(0);
-		anchorIndex.current = anchor;
-		setPopupOpen(found.length > 0);
-	};
-	const insert = (entry) => {
-		const text = handlers.getText();
-		const char = resolve().trigger ?? "@";
-		const next = text.slice(0, anchorIndex.current) + char + entry.label + " " + text.slice(caretIndex.current);
-		handlers.setText(next);
-		closePopup();
-		setTimeout(() => {
-			const el = textarea();
-			if (!el) return;
-			const caret = anchorIndex.current + char.length + entry.label.length + 1;
-			el.focus();
-			el.setSelectionRange(caret, caret);
-		}, 0);
-	};
-	/** Feed the field's input events through here — the vessel watches
-	* the text as it lands, from the element itself. */
-	const onInput = () => detect();
-	/** Arrows move, Enter inserts, Escape dismisses. Answers `true` when
-	* the vessel consumed the key. */
-	const onKeydown = (event) => {
-		if (!popupOpen || matches.length === 0) return false;
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			setActive((current) => (current + 1) % matches.length);
-		} else if (event.key === "ArrowUp") {
-			event.preventDefault();
-			setActive((current) => (current - 1 + matches.length) % matches.length);
-		} else if (event.key === "Enter") {
-			event.preventDefault();
-			insert(matches[active]);
-		} else if (event.key === "Escape") closePopup();
-		else return false;
-		return true;
-	};
-	return {
-		open: popupOpen,
-		matches,
-		active,
-		setActive,
-		insert,
-		close: closePopup,
-		onInput,
-		onKeydown
-	};
-}
-//#endregion
-//#region src/components/mentions/index.tsx
-function MentionsPopup({ size, matches, active, onInsert, onActiveChange, ...rest }) {
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		"data-scope": "mentions",
-		"data-part": "popup",
-		"data-size": size,
-		role: "listbox",
-		children: matches.map((entry, index) => /* @__PURE__ */ jsx("div", {
-			role: "option",
-			"aria-selected": index === active,
-			tabIndex: -1,
-			"data-scope": "mentions",
-			"data-part": "option",
-			"data-active": index === active ? "" : void 0,
-			onMouseEnter: () => onActiveChange?.(index),
-			onMouseDown: (event) => event.preventDefault(),
-			onClick: () => onInsert?.(entry),
-			onKeyDown: (event) => {
-				if (event.key !== "Enter" && event.key !== " ") return;
-				event.preventDefault();
-				onInsert?.(entry);
-			},
-			children: entry.label
-		}, entry.value))
-	});
-}
-/** The vessel: the candidates themselves as a floating card. The anchor
-* is virtual — a live rectangle off the host's field — so a host keeps
-* its own anatomy (the textarea rides where the host puts it) and the
-* vessel still points at the right place. Shares the detection state
-* with the host through `useMentions`. */
-function MentionsVesselImpl({ size = "md", open = false, matches = [], active = 0, anchor = null, onInsert, onActiveChange, onOpenChange, id }) {
-	injectComponentStyle("mentions");
-	const hostId = useElementId("mentions", { id });
-	return /* @__PURE__ */ jsx(Popover.Root, {
-		id: `${hostId}:vessel`,
-		open,
-		onOpenChange: (details) => onOpenChange?.(details.open),
-		positioning: {
-			placement: "bottom-start",
-			getAnchorRect: () => anchor?.getBoundingClientRect() ?? null
-		},
-		children: /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(MentionsPopup, {
-				size,
-				matches,
-				active,
-				onInsert,
-				onActiveChange
-			})
-		}) }) })
-	});
-}
-const MentionsVessel = withSelfRoot(MentionsVesselImpl);
-function MentionsImpl({ items = [], value, trigger = "@", placeholder, autoresize = false, invalid = false, size = "md", onValueChange, children, ...rest }) {
-	const hostId = useElementId("mentions", rest);
-	const [internal, setInternal] = useState("");
-	const fieldRef = useRef(null);
-	const el = () => fieldRef.current;
-	const current = value ?? internal;
-	const mentions = useMentions({
-		items,
-		trigger
-	}, el, {
-		getText: () => el()?.value ?? current,
-		setText: (next) => {
-			setInternal(next);
-			onValueChange?.(next);
-		}
-	});
-	const handleChange = (event) => {
-		const node = event.currentTarget;
-		setInternal(node.value);
-		onValueChange?.(node.value);
-		mentions.onInput();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		...rest,
-		"data-scope": "mentions",
-		"data-part": "root",
-		"data-size": size,
-		children: [/* @__PURE__ */ jsxs(Popover.Root, {
-			id: `${hostId}:vessel`,
-			open: mentions.open,
-			onOpenChange: (details) => {
-				if (!details.open) mentions.close();
-			},
-			positioning: { placement: "bottom-start" },
-			children: [/* @__PURE__ */ jsx(Popover.Anchor, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Field.Textarea, {
-					ref: fieldRef,
-					autoresize,
-					rows: 3,
-					placeholder,
-					value: current,
-					onChange: handleChange,
-					onKeyDown: (event) => mentions.onKeydown(event),
-					"data-invalid": invalid || void 0,
-					"data-scope": "mentions",
-					"data-part": "textarea"
-				})
-			}), /* @__PURE__ */ jsx(Popover.Positioner, { children: /* @__PURE__ */ jsx(Popover.Content, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(MentionsPopup, {
-					size,
-					matches: mentions.matches,
-					active: mentions.active,
-					onInsert: mentions.insert,
-					onActiveChange: mentions.setActive
-				})
-			}) })]
-		}), children]
-	});
-}
-const Mentions = Object.assign(MentionsImpl, Popover$1);
-//#endregion
-export { MentionsVessel as n, useMentions as r, Mentions as t };