@forte-ui/react 1.0.0-alpha.1

package/dist/Textarea-CqZJL41e.js

@@ -0,0 +1,51 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Field as r } from "@base-ui/react/field";
+import './styles/Textarea.css';var i = { root: "_root_wgu77_30" }, a = typeof document < "u" ? t.useLayoutEffect : t.useEffect;
+function o(e) {
+	let n = t.useRef(null), r = t.useRef(() => {});
+	return a(() => {
+		let t = n.current;
+		if (!t || !e || CSS.supports?.("field-sizing", "content")) return;
+		let i = () => {
+			let e = t.offsetHeight - t.clientHeight;
+			t.style.blockSize = "auto", t.style.blockSize = `${t.scrollHeight + e}px`;
+		};
+		r.current = i, i(), t.addEventListener("input", i);
+		let a = t.clientWidth, o = new ResizeObserver(() => {
+			t.clientWidth !== a && (a = t.clientWidth, i());
+		});
+		return o.observe(t), () => {
+			r.current = () => {}, t.removeEventListener("input", i), o.disconnect(), t.style.blockSize = "";
+		};
+	}, [e]), a(() => {
+		r.current();
+	}), n;
+}
+var s = t.forwardRef(function({ size: a = "md", variant: s = "outline", rows: c = 3, maxRows: l, autoResize: u = !1, resize: d = "vertical", fullWidth: f = !1, render: p, className: m, style: h, ...g }, _) {
+	let v = o(u), y = {
+		ref: t.useCallback((e) => {
+			v.current = e, typeof _ == "function" ? _(e) : _ && (_.current = e);
+		}, [_, v]),
+		render: p ?? /* @__PURE__ */ n("textarea", {}),
+		className: e(i.root, "forte-focus-ring", m),
+		"data-forte": "textarea",
+		"data-size": a,
+		"data-variant": s,
+		"data-resize": u ? "none" : d,
+		"data-auto-resize": u || void 0,
+		"data-full-width": f || void 0,
+		rows: c,
+		style: {
+			"--forte-textarea-rows": String(c),
+			...l == null ? null : { "--forte-textarea-max-rows": String(l) },
+			...h
+		},
+		...g
+	};
+	return /* @__PURE__ */ n(r.Control, { ...y });
+});
+//#endregion
+export { o as n, s as t };

package/dist/Toast-BWayxAcd.js

@@ -0,0 +1,304 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Spinner-BF0uD4hR.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Toast as o } from "@base-ui/react/toast";
+import './styles/Toast.css';var s = {
+	viewport: "_viewport_1j9wt_84",
+	root: "_root_1j9wt_49",
+	content: "_content_1j9wt_428",
+	body: "_body_1j9wt_450",
+	title: "_title_1j9wt_458",
+	description: "_description_1j9wt_466",
+	icon: "_icon_1j9wt_481",
+	glyph: "_glyph_1j9wt_490",
+	action: "_action_1j9wt_501",
+	close: "_close_1j9wt_552"
+};
+//#endregion
+//#region src/components/toast/Toast.tsx
+function c(e) {
+	return typeof e == "object" && !!e && !Array.isArray(e) && !n.isValidElement(e);
+}
+function l(e, t) {
+	let n = c(e) ? e : { title: e };
+	return t ? {
+		...n,
+		...t
+	} : n;
+}
+function u(e) {
+	let { action: t, icon: n, dismissible: r, data: i, ...a } = e, o = n !== void 0 || r !== void 0 ? {
+		...i,
+		...n === void 0 ? null : { icon: n },
+		...r === void 0 ? null : { dismissible: r }
+	} : i;
+	return {
+		...a,
+		...t ? { actionProps: d(t) } : null,
+		...o ? { data: o } : null
+	};
+}
+function d(e) {
+	let { label: t, ...n } = e;
+	return {
+		...n,
+		children: t
+	};
+}
+function f(e) {
+	function t(t, n, r) {
+		e.update(t, u(l(n, r)));
+	}
+	function n(n) {
+		return {
+			id: n,
+			close: () => e.close(n),
+			update: (e, r) => t(n, e, r)
+		};
+	}
+	function r(t, r) {
+		return n(e.add(u(l(t, r))));
+	}
+	function i(e) {
+		return (t, n) => r(t, {
+			...n,
+			type: e
+		});
+	}
+	return {
+		show: r,
+		success: i("success"),
+		error: i("error"),
+		warning: i("warning"),
+		info: i("info"),
+		loading: i("loading"),
+		update: t,
+		close: e.close,
+		promise(t, n) {
+			return e.promise(t, {
+				loading: u(l(n.loading)),
+				success: (e) => u(l(p(n.success, e))),
+				error: (e) => u(l(p(n.error, e)))
+			});
+		}
+	};
+}
+function p(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function m() {
+	let e = o.useToastManager(), t = n.useMemo(() => f({
+		add: e.add,
+		close: e.close,
+		update: e.update,
+		promise: e.promise
+	}), [
+		e.add,
+		e.close,
+		e.update,
+		e.promise
+	]);
+	return n.useMemo(() => ({
+		...t,
+		toasts: e.toasts
+	}), [t, e.toasts]);
+}
+function h() {
+	let e = o.createToastManager();
+	return {
+		...f(e),
+		base: e
+	};
+}
+var g = n.createContext(void 0), _ = n.createContext(null);
+function v(e) {
+	let t = n.useContext(_);
+	if (t == null) throw Error(`forte-ui: <Toast.${e}> must be rendered inside <Toast.Item>.`);
+	return t;
+}
+function y(e) {
+	return [
+		e.startsWith("top") ? "up" : "down",
+		"left",
+		"right"
+	];
+}
+function b(e) {
+	let { children: t, ...n } = e;
+	return /* @__PURE__ */ i("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.6",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...n,
+		children: t
+	});
+}
+var x = {
+	success: /* @__PURE__ */ a(b, {
+		className: s.glyph,
+		children: [/* @__PURE__ */ i("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.4"
+		}), /* @__PURE__ */ i("path", { d: "m5.2 8.2 2 2 3.6-4.4" })]
+	}),
+	error: /* @__PURE__ */ a(b, {
+		className: s.glyph,
+		children: [/* @__PURE__ */ i("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.4"
+		}), /* @__PURE__ */ i("path", { d: "m5.8 5.8 4.4 4.4M10.2 5.8l-4.4 4.4" })]
+	}),
+	warning: /* @__PURE__ */ a(b, {
+		className: s.glyph,
+		children: [
+			/* @__PURE__ */ i("path", { d: "M8 2.2 1.6 13.4h12.8L8 2.2Z" }),
+			/* @__PURE__ */ i("path", { d: "M8 6.4v3.1" }),
+			/* @__PURE__ */ i("path", { d: "M8 11.4h.01" })
+		]
+	}),
+	info: /* @__PURE__ */ a(b, {
+		className: s.glyph,
+		children: [
+			/* @__PURE__ */ i("circle", {
+				cx: "8",
+				cy: "8",
+				r: "6.4"
+			}),
+			/* @__PURE__ */ i("path", { d: "M8 7.4v3.6" }),
+			/* @__PURE__ */ i("path", { d: "M8 5h.01" })
+		]
+	})
+};
+function S(e) {
+	return /* @__PURE__ */ i(T, { toast: e });
+}
+var C = n.forwardRef(function({ position: t = "bottom-end", container: r, swipeDirection: a, renderToast: c = S, className: l, ...u }, d) {
+	let { toasts: f } = o.useToastManager(), p = n.useMemo(() => a ?? y(t), [a, t]);
+	return /* @__PURE__ */ i(g.Provider, {
+		value: p,
+		children: /* @__PURE__ */ i(o.Portal, {
+			container: r,
+			children: /* @__PURE__ */ i(o.Viewport, {
+				ref: d,
+				className: e(s.viewport, l),
+				"data-forte": "toast-viewport",
+				"data-position": t,
+				"data-contained": r != null || void 0,
+				...u,
+				children: f.map((e) => /* @__PURE__ */ i(n.Fragment, { children: c(e) }, e.id))
+			})
+		})
+	});
+});
+function w({ children: e, timeout: t, limit: n, toastManager: r, viewport: s = !0, ...c }) {
+	return /* @__PURE__ */ a(o.Provider, {
+		timeout: t,
+		limit: n,
+		toastManager: r,
+		children: [e, s ? /* @__PURE__ */ i(C, { ...c }) : null]
+	});
+}
+var T = n.forwardRef(function({ toast: t, swipeDirection: c, className: l, children: u, ...d }, f) {
+	let p = n.useContext(g), m = t.data?.icon, h = t.data?.dismissible ?? !0;
+	return /* @__PURE__ */ i(_.Provider, {
+		value: t,
+		children: /* @__PURE__ */ i(o.Root, {
+			ref: f,
+			toast: t,
+			swipeDirection: c ?? p,
+			className: e(s.root, "forte-focus-ring", "forte-hc-surface", l),
+			"data-forte": "toast",
+			...d,
+			children: /* @__PURE__ */ i(o.Content, {
+				className: s.content,
+				"data-forte": "toast-content",
+				children: u ?? /* @__PURE__ */ a(r, { children: [
+					m === !1 ? null : /* @__PURE__ */ i(E, {}),
+					/* @__PURE__ */ a("div", {
+						className: s.body,
+						"data-forte": "toast-body",
+						children: [/* @__PURE__ */ i(D, {}), /* @__PURE__ */ i(O, {})]
+					}),
+					/* @__PURE__ */ i(k, {}),
+					h ? /* @__PURE__ */ i(A, {}) : null
+				] })
+			})
+		})
+	});
+}), E = n.forwardRef(function({ className: n, children: r, ...a }, o) {
+	let c = v("Icon"), l = c.data?.icon, u = r ?? (l !== void 0 && l !== !1 ? l : c.type === "loading" ? /* @__PURE__ */ i(t, {
+		size: "sm",
+		tone: "current",
+		decorative: !0
+	}) : c.type ? x[c.type] : null);
+	return u == null ? null : /* @__PURE__ */ i("span", {
+		ref: o,
+		className: e(s.icon, n),
+		"data-forte": "toast-icon",
+		...a,
+		children: u
+	});
+}), D = n.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i(o.Title, {
+		ref: r,
+		className: e(s.title, t),
+		"data-forte": "toast-title",
+		...n
+	});
+}), O = n.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i(o.Description, {
+		ref: r,
+		className: e(s.description, t),
+		"data-forte": "toast-description",
+		...n
+	});
+}), k = n.forwardRef(function({ className: t, render: n, ...r }, a) {
+	return /* @__PURE__ */ i(o.Action, {
+		ref: a,
+		render: n,
+		className: e(n === void 0 && s.action, "forte-focus-ring", t),
+		"data-forte": "toast-action",
+		...r
+	});
+}), A = n.forwardRef(function({ className: t, render: n, children: r, ...a }, c) {
+	return /* @__PURE__ */ i(o.Close, {
+		ref: c,
+		render: n,
+		className: e(n === void 0 && s.close, "forte-focus-ring", t),
+		"data-forte": "toast-close",
+		"aria-label": "Close",
+		...a,
+		children: r ?? /* @__PURE__ */ i("svg", {
+			className: s.glyph,
+			viewBox: "0 0 16 16",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			"aria-hidden": "true",
+			focusable: "false",
+			children: /* @__PURE__ */ i("path", { d: "m4.5 4.5 7 7M11.5 4.5l-7 7" })
+		})
+	});
+}), j = {
+	Provider: w,
+	Viewport: C,
+	Item: T,
+	Icon: E,
+	Title: D,
+	Description: O,
+	Action: k,
+	Close: A,
+	createManager: h
+};
+//#endregion
+export { E as a, D as c, m as d, O as i, C as l, k as n, T as o, A as r, w as s, j as t, h as u };

package/dist/Toggle-BrhMnkF5.js

@@ -0,0 +1,45 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Toggle as r } from "@base-ui/react/toggle";
+import { ToggleGroup as i } from "@base-ui/react/toggle-group";
+import './styles/Toggle.css';var a = {
+	root: "_root_p9w1c_24",
+	group: "_group_p9w1c_279"
+}, o = t.createContext(null);
+function s({ variant: i, tone: s, size: c, iconOnly: l = !1, className: u, ...d }) {
+	let f = t.useContext(o);
+	return /* @__PURE__ */ n(r, {
+		className: e(a.root, "forte-focus-ring", u),
+		"data-forte": "toggle",
+		"data-variant": i ?? f?.variant ?? "soft",
+		"data-tone": s ?? f?.tone ?? "primary",
+		"data-size": c ?? f?.size ?? "md",
+		"data-icon-only": l || void 0,
+		...d
+	});
+}
+function c({ variant: r, tone: s, size: c, segmented: l = !1, fullWidth: u = !1, className: d, ...f }) {
+	let p = t.useMemo(() => ({
+		variant: r,
+		tone: s,
+		size: c
+	}), [
+		r,
+		s,
+		c
+	]);
+	return /* @__PURE__ */ n(o.Provider, {
+		value: p,
+		children: /* @__PURE__ */ n(i, {
+			className: e(a.group, d),
+			"data-forte": "toggle-group",
+			"data-segmented": l || void 0,
+			"data-full-width": u || void 0,
+			...f
+		})
+	});
+}
+//#endregion
+export { c as n, s as t };

package/dist/Toolbar-OmOVCk3i.js

@@ -0,0 +1,88 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Button-AiyKnx5I.js";
+import { t as n } from "./Input-BgGWhO2q.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { Toolbar as a } from "@base-ui/react/toolbar";
+import './styles/Toolbar.css';var o = {
+	root: "_root_1v39b_28",
+	group: "_group_1v39b_140",
+	separator: "_separator_1v39b_179",
+	link: "_link_1v39b_245"
+}, s = r.createContext(void 0), c = r.forwardRef(function({ variant: t = "panel", size: n = "md", orientation: r = "horizontal", wrap: c = !1, className: l, ...u }, d) {
+	return /* @__PURE__ */ i(s.Provider, {
+		value: n,
+		children: /* @__PURE__ */ i(a.Root, {
+			ref: d,
+			orientation: r,
+			className: e(o.root, l),
+			"data-forte": "toolbar",
+			"data-variant": t,
+			"data-size": n,
+			"data-wrap": c || void 0,
+			...u
+		})
+	});
+}), l = r.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i(a.Group, {
+		ref: r,
+		className: e(o.group, t),
+		"data-forte": "toolbar-group",
+		...n
+	});
+}), u = r.forwardRef(function({ variant: e = "ghost", tone: n = "neutral", size: o, iconOnly: c = !1, loading: l = !1, loadingLabel: u, focusableWhenDisabled: d = !0, render: f, className: p, ...m }, h) {
+	let g = r.useContext(s);
+	return /* @__PURE__ */ i(a.Button, {
+		ref: h,
+		className: p,
+		focusableWhenDisabled: d,
+		render: f ?? /* @__PURE__ */ i(t, {
+			variant: e,
+			tone: n,
+			size: o ?? g ?? "md",
+			iconOnly: c,
+			loading: l,
+			loadingLabel: u,
+			focusableWhenDisabled: d
+		}),
+		...m
+	});
+}), d = r.forwardRef(function({ size: t, className: n, ...c }, l) {
+	let u = r.useContext(s);
+	return /* @__PURE__ */ i(a.Link, {
+		ref: l,
+		className: e(o.link, "forte-focus-ring", "forte-link", n),
+		"data-forte": "toolbar-link",
+		"data-size": t ?? u ?? "md",
+		...c
+	});
+}), f = r.forwardRef(function({ size: e, variant: t = "outline", fullWidth: o = !1, render: c, className: l, ...u }, d) {
+	let f = r.useContext(s);
+	return /* @__PURE__ */ i(a.Input, {
+		ref: d,
+		className: l,
+		render: c ?? /* @__PURE__ */ i(n, {
+			size: e ?? f ?? "md",
+			variant: t,
+			fullWidth: o
+		}),
+		...u
+	});
+}), p = r.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i(a.Separator, {
+		ref: r,
+		className: e(o.separator, t),
+		"data-forte": "toolbar-separator",
+		...n
+	});
+}), m = {
+	Root: c,
+	Group: l,
+	Button: u,
+	Link: d,
+	Input: f,
+	Separator: p
+};
+//#endregion
+export { d as a, f as i, u as n, c as o, l as r, p as s, m as t };

package/dist/Tooltip-CI4chsRw.js

@@ -0,0 +1,101 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tooltip as i } from "@base-ui/react/tooltip";
+import './styles/Tooltip.css';var a = {
+	positioner: "_positioner_1k2q4_55",
+	popup: "_popup_1k2q4_65",
+	arrow: "_arrow_1k2q4_94",
+	shortcut: "_shortcut_1k2q4_101",
+	arrowSvg: "_arrowSvg_1k2q4_335",
+	arrowFill: "_arrowFill_1k2q4_342",
+	arrowBorder: "_arrowBorder_1k2q4_348"
+};
+//#endregion
+//#region src/components/tooltip/Tooltip.tsx
+function o(e) {
+	return /* @__PURE__ */ n(i.Provider, { ...e });
+}
+function s(e) {
+	return /* @__PURE__ */ n(i.Root, { ...e });
+}
+function c({ className: t, ...r }) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		className: e(a.trigger, "forte-focus-ring", t),
+		"data-forte": "tooltip-trigger",
+		...r
+	});
+}
+var l = t.forwardRef(function({ side: t = "top", align: r = "center", sideOffset: o = 8, alignOffset: s, arrowPadding: c, anchor: l, collisionBoundary: u, collisionPadding: d, collisionAvoidance: f, sticky: p, positionMethod: m, disableAnchorTracking: h, keepMounted: g, container: _, positionerClassName: v, className: y, children: b, ...x }, S) {
+	return /* @__PURE__ */ n(i.Portal, {
+		keepMounted: g,
+		container: _,
+		children: /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, v),
+			"data-forte": "tooltip-positioner",
+			side: t,
+			align: r,
+			sideOffset: o,
+			alignOffset: s,
+			arrowPadding: c,
+			anchor: l,
+			collisionBoundary: u,
+			collisionPadding: d,
+			collisionAvoidance: f,
+			sticky: p,
+			positionMethod: m,
+			disableAnchorTracking: h,
+			children: /* @__PURE__ */ n(i.Popup, {
+				ref: S,
+				className: e(a.popup, "forte-hc-surface", y),
+				"data-forte": "tooltip-popup",
+				...x,
+				children: b
+			})
+		})
+	});
+}), u = t.forwardRef(function({ className: t, children: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Arrow, {
+		ref: s,
+		className: e(a.arrow, t),
+		"data-forte": "tooltip-arrow",
+		...o,
+		children: r ?? /* @__PURE__ */ n(d, {})
+	});
+});
+function d() {
+	return /* @__PURE__ */ r("svg", {
+		className: a.arrowSvg,
+		"data-forte": "tooltip-arrow-svg",
+		viewBox: "0 0 20 10",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [/* @__PURE__ */ n("path", {
+			className: a.arrowBorder,
+			d: "M0 10 L10 0 L20 10 Z"
+		}), /* @__PURE__ */ n("path", {
+			className: a.arrowFill,
+			d: "M2.12 10 L10 2.12 L17.88 10 Z"
+		})]
+	});
+}
+var f = {
+	Provider: o,
+	Root: s,
+	Trigger: c,
+	Popup: l,
+	Arrow: u,
+	Shortcut: t.forwardRef(function({ className: t, ...r }, i) {
+		return /* @__PURE__ */ n("span", {
+			ref: i,
+			className: e(a.shortcut, t),
+			"data-forte": "tooltip-shortcut",
+			...r
+		});
+	}),
+	createHandle: i.createHandle
+};
+//#endregion
+export { f as t };

package/dist/clsx-By2n9mTe.js

@@ -0,0 +1,16 @@
+//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function e(t) {
+	var n, r, i = "";
+	if (typeof t == "string" || typeof t == "number") i += t;
+	else if (typeof t == "object") if (Array.isArray(t)) {
+		var a = t.length;
+		for (n = 0; n < a; n++) t[n] && (r = e(t[n])) && (i && (i += " "), i += r);
+	} else for (r in t) t[r] && (i && (i += " "), i += r);
+	return i;
+}
+function t() {
+	for (var t, n, r = 0, i = "", a = arguments.length; r < a; r++) (t = arguments[r]) && (n = e(t)) && (i && (i += " "), i += n);
+	return i;
+}
+//#endregion
+export { t };

package/dist/cn.d.ts

@@ -0,0 +1,8 @@
+import { ClassValue } from 'clsx';
+import { ConfigExtension } from 'tailwind-merge';
+/**
+ * Build a `cn` that knows the bridge's scales plus your own additions.
+ * Accepts the same `{ extend, override }` shape as tailwind-merge itself.
+ */
+export declare function createCn(extension?: ConfigExtension<string, string>): (...inputs: ClassValue[]) => string;
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/cn.js

@@ -0,0 +1,11 @@
+import { tailwindMergeConfig as e } from "./tailwind-merge.js";
+import { t } from "./clsx-By2n9mTe.js";
+import { extendTailwindMerge as n, mergeConfigs as r } from "tailwind-merge";
+//#region src/cn.ts
+function i(i) {
+	let a = i ? n(e, (e) => r(e, i)) : n(e);
+	return (...e) => a(t(e));
+}
+var a = i();
+//#endregion
+export { a as cn, i as createCn };