@forte-ui/react 1.0.0-alpha.1

package/dist/InputGroup-DsZyDXNn.js

@@ -0,0 +1,89 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Button-AiyKnx5I.js";
+import { n } from "./Textarea-CqZJL41e.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { Field as a } from "@base-ui/react/field";
+import { Input as o } from "@base-ui/react/input";
+import './styles/InputGroup.css';var s = {
+	root: "_root_ovuvd_10",
+	input: "_input_ovuvd_11",
+	textarea: "_textarea_ovuvd_12",
+	addon: "_addon_ovuvd_13",
+	text: "_text_ovuvd_12"
+}, c = "[data-forte=\"input-group-input\"], [data-forte=\"input-group-textarea\"]", l = "button, a, input, textarea, select, [contenteditable=\"true\"]", u = r.forwardRef(function({ size: t = "md", variant: n = "outline", fullWidth: r = !1, className: a, onPointerDown: o, ...u }, d) {
+	return /* @__PURE__ */ i("div", {
+		ref: d,
+		className: e(s.root, "forte-focus-ring-within", a),
+		"data-forte": "input-group",
+		"data-size": t,
+		"data-variant": n,
+		"data-full-width": r || void 0,
+		role: "presentation",
+		onPointerDown: (e) => {
+			if (o?.(e), e.defaultPrevented || e.target.closest(l)) return;
+			let t = e.currentTarget.querySelector(c);
+			!t || t.matches(":disabled") || (e.preventDefault(), t.focus());
+		},
+		...u
+	});
+}), d = r.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i(o, {
+		ref: r,
+		className: e(s.input, t),
+		"data-forte": "input-group-input",
+		...n
+	});
+}), f = r.forwardRef(function({ rows: t = 3, maxRows: o, autoResize: c = !1, render: l, className: u, style: d, ...f }, p) {
+	let m = n(c), h = {
+		ref: r.useCallback((e) => {
+			m.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+		}, [p, m]),
+		render: l ?? /* @__PURE__ */ i("textarea", {}),
+		className: e(s.textarea, u),
+		"data-forte": "input-group-textarea",
+		"data-auto-resize": c || void 0,
+		rows: t,
+		style: {
+			"--forte-input-group-rows": String(t),
+			...o == null ? null : { "--forte-input-group-max-rows": String(o) },
+			...d
+		},
+		...f
+	};
+	return /* @__PURE__ */ i(a.Control, { ...h });
+}), p = r.forwardRef(function({ align: t = "inline-start", className: n, ...r }, a) {
+	return /* @__PURE__ */ i("div", {
+		ref: a,
+		className: e(s.addon, n),
+		"data-forte": "input-group-addon",
+		"data-align": t,
+		...r
+	});
+}), m = r.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i("span", {
+		ref: r,
+		className: e(s.text, t),
+		"data-forte": "input-group-text",
+		...n
+	});
+}), h = r.forwardRef(function({ variant: n = "ghost", tone: r = "neutral", size: a = "sm", className: o, ...s }, c) {
+	return /* @__PURE__ */ i(t, {
+		ref: c,
+		variant: n,
+		tone: r,
+		size: a,
+		className: e("forte-target", o),
+		...s
+	});
+}), g = {
+	Root: u,
+	Input: d,
+	Textarea: f,
+	Addon: p,
+	Text: m,
+	Button: h
+};
+//#endregion
+export { u as a, d as i, p as n, m as o, h as r, f as s, g as t };

package/dist/Menu-CKu9xE2h.js

@@ -0,0 +1,261 @@
+"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 { Menu as i } from "@base-ui/react/menu";
+import './styles/Menu.css';var a = {
+	trigger: "_trigger_1wvh4_54",
+	backdrop: "_backdrop_1wvh4_184",
+	positioner: "_positioner_1wvh4_217",
+	popup: "_popup_1wvh4_23",
+	checkboxItem: "_checkboxItem_1wvh4_384",
+	radioItem: "_radioItem_1wvh4_384",
+	item: "_item_1wvh4_266",
+	linkItem: "_linkItem_1wvh4_544",
+	itemIndicator: "_itemIndicator_1wvh4_558",
+	submenuIcon: "_submenuIcon_1wvh4_586",
+	shortcut: "_shortcut_1wvh4_622",
+	group: "_group_1wvh4_671",
+	groupLabel: "_groupLabel_1wvh4_677",
+	separator: "_separator_1wvh4_706"
+}, o = t.createContext("menu"), s = {
+	menu: {
+		side: "bottom",
+		sideOffset: 4,
+		alignOffset: 0
+	},
+	submenu: {
+		side: "inline-end",
+		sideOffset: -4,
+		alignOffset: -4
+	},
+	"context-menu": {
+		side: void 0,
+		sideOffset: void 0,
+		alignOffset: void 0
+	}
+};
+function c(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "m2.5 8.5 4 4 7-9" })
+	});
+}
+function l(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("circle", {
+			cx: "8",
+			cy: "8",
+			r: "3.25"
+		})
+	});
+}
+function u(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "m6 3.5 5 4.5-5 4.5" })
+	});
+}
+function d(e) {
+	return /* @__PURE__ */ n(o.Provider, {
+		value: "menu",
+		children: /* @__PURE__ */ n(i.Root, { ...e })
+	});
+}
+var f = t.forwardRef(function({ className: t, render: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		ref: s,
+		render: r,
+		className: e(r === void 0 && a.trigger, "forte-focus-ring", t),
+		"data-forte": "menu-trigger",
+		...o
+	});
+}), p = t.forwardRef(function({ children: c, side: l, align: u = "start", sideOffset: d, alignOffset: f, collisionPadding: p, anchor: m, container: h, backdrop: g = !1, className: _, positionerClassName: v, ...y }, b) {
+	let x = s[t.useContext(o)];
+	return /* @__PURE__ */ r(i.Portal, {
+		container: h,
+		children: [g ? /* @__PURE__ */ n(i.Backdrop, {
+			className: e(a.backdrop, "forte-scrim"),
+			"data-forte": "menu-backdrop"
+		}) : null, /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, v),
+			"data-forte": "menu-positioner",
+			side: l ?? x.side,
+			align: u,
+			sideOffset: d ?? x.sideOffset,
+			alignOffset: f ?? x.alignOffset,
+			collisionPadding: p,
+			anchor: m,
+			children: /* @__PURE__ */ n(i.Popup, {
+				ref: b,
+				className: e(a.popup, "forte-hc-surface", _),
+				"data-forte": "menu-popup",
+				...y,
+				children: c
+			})
+		})]
+	});
+}), m = t.forwardRef(function({ children: t, tone: r = "neutral", className: o, ...s }, c) {
+	return /* @__PURE__ */ n(i.Item, {
+		ref: c,
+		className: e(a.item, "forte-focus-ring", o),
+		"data-forte": "menu-item",
+		"data-tone": r,
+		"data-focus-inset": "",
+		...s,
+		children: t
+	});
+}), h = t.forwardRef(function({ children: t, className: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.LinkItem, {
+		ref: s,
+		className: e(a.item, a.linkItem, "forte-focus-ring", r),
+		"data-forte": "menu-link-item",
+		"data-focus-inset": "",
+		...o,
+		children: t
+	});
+}), g = t.forwardRef(function({ children: t, indicator: o, className: s, ...l }, u) {
+	return /* @__PURE__ */ r(i.CheckboxItem, {
+		ref: u,
+		className: e(a.item, a.checkboxItem, "forte-focus-ring", s),
+		"data-forte": "menu-checkbox-item",
+		"data-focus-inset": "",
+		...l,
+		children: [/* @__PURE__ */ n(i.CheckboxItemIndicator, {
+			className: a.itemIndicator,
+			"data-forte": "menu-item-indicator",
+			keepMounted: !0,
+			children: o ?? /* @__PURE__ */ n(c, {})
+		}), t]
+	});
+}), _ = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.RadioGroup, {
+		ref: o,
+		className: e(a.group, t),
+		"data-forte": "menu-radio-group",
+		...r
+	});
+}), v = t.forwardRef(function({ children: t, indicator: o, className: s, ...c }, u) {
+	return /* @__PURE__ */ r(i.RadioItem, {
+		ref: u,
+		className: e(a.item, a.radioItem, "forte-focus-ring", s),
+		"data-forte": "menu-radio-item",
+		"data-focus-inset": "",
+		...c,
+		children: [/* @__PURE__ */ n(i.RadioItemIndicator, {
+			className: a.itemIndicator,
+			"data-forte": "menu-item-indicator",
+			keepMounted: !0,
+			children: o ?? /* @__PURE__ */ n(l, {})
+		}), t]
+	});
+}), y = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Group, {
+		ref: o,
+		className: e(a.group, t),
+		"data-forte": "menu-group",
+		...r
+	});
+}), b = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.GroupLabel, {
+		ref: o,
+		className: e(a.groupLabel, t),
+		"data-forte": "menu-group-label",
+		...r
+	});
+}), x = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Separator, {
+		ref: o,
+		className: e(a.separator, t),
+		"data-forte": "menu-separator",
+		...r
+	});
+});
+function S({ children: e, ...t }) {
+	return /* @__PURE__ */ n(o.Provider, {
+		value: "submenu",
+		children: /* @__PURE__ */ n(i.SubmenuRoot, {
+			...t,
+			children: e
+		})
+	});
+}
+var C = t.forwardRef(function({ children: t, icon: o, className: s, ...c }, l) {
+	return /* @__PURE__ */ r(i.SubmenuTrigger, {
+		ref: l,
+		className: e(a.item, a.submenuTrigger, "forte-focus-ring", s),
+		"data-forte": "menu-submenu-trigger",
+		"data-focus-inset": "",
+		...c,
+		children: [t, /* @__PURE__ */ n("span", {
+			className: a.submenuIcon,
+			"data-forte": "menu-submenu-icon",
+			children: o ?? /* @__PURE__ */ n(u, {})
+		})]
+	});
+}), w = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("span", {
+		ref: i,
+		className: e(a.shortcut, t),
+		"data-forte": "menu-shortcut",
+		"aria-hidden": "true",
+		...r
+	});
+}), T = {
+	Root: d,
+	Trigger: f,
+	Popup: p,
+	Item: m,
+	LinkItem: h,
+	CheckboxItem: g,
+	RadioGroup: _,
+	RadioItem: v,
+	Group: y,
+	GroupLabel: b,
+	Separator: x,
+	SubmenuRoot: S,
+	SubmenuTrigger: C,
+	Shortcut: w,
+	createHandle: i.createHandle
+};
+//#endregion
+export { m as a, p as c, d, x as f, f as g, C as h, b as i, _ as l, S as m, g as n, h as o, w as p, y as r, o as s, T as t, v as u };

package/dist/Menubar-Dax027Db.js

@@ -0,0 +1,19 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Menubar as r } from "@base-ui/react/menubar";
+import './styles/Menubar.css';var i = { root: "_root_twap9_19" }, a = t.forwardRef(function({ variant: t = "plain", orientation: a = "horizontal", disabled: o, className: s, ...c }, l) {
+	return /* @__PURE__ */ n(r, {
+		ref: l,
+		orientation: a,
+		disabled: o,
+		className: e(i.root, s),
+		"data-forte": "menubar",
+		"data-variant": t,
+		"data-disabled": o ? "" : void 0,
+		...c
+	});
+});
+//#endregion
+export { a as t };

package/dist/NavList-DGvcIoJm.js

@@ -0,0 +1,176 @@
+"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 { useRender as i } from "@base-ui/react/use-render";
+import { Collapsible as a } from "@base-ui/react/collapsible";
+import './styles/NavList.css';var o = {
+	root: "_root_1o1jm_23",
+	section: "_section_1o1jm_160",
+	sectionLabel: "_sectionLabel_1o1jm_164",
+	list: "_list_1o1jm_183",
+	item: "_item_1o1jm_211",
+	link: "_link_1o1jm_216",
+	groupTrigger: "_groupTrigger_1o1jm_216",
+	groupLabel: "_groupLabel_1o1jm_250",
+	group: "_group_1o1jm_216",
+	groupIcon: "_groupIcon_1o1jm_329",
+	groupPanel: "_groupPanel_1o1jm_353",
+	groupContent: "_groupContent_1o1jm_347",
+	badge: "_badge_1o1jm_385"
+}, s = t.createContext(null);
+function c(e) {
+	return /* @__PURE__ */ n("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		style: {
+			display: "block",
+			...e.style
+		},
+		children: /* @__PURE__ */ n("path", { d: "m3.5 6 4.5 4.5L12.5 6" })
+	});
+}
+var l = t.forwardRef(function({ size: t = "md", marker: n = "fill", render: r, className: a, ...s }, c) {
+	return i({
+		render: r,
+		ref: c,
+		defaultTagName: "nav",
+		props: {
+			className: e(o.root, a),
+			"data-forte": "nav-list",
+			"data-size": t,
+			"data-marker": n,
+			...s
+		}
+	});
+}), u = t.forwardRef(function({ className: r, children: i, ...a }, c) {
+	let [l, u] = t.useState();
+	return /* @__PURE__ */ n(s.Provider, {
+		value: u,
+		children: /* @__PURE__ */ n("div", {
+			ref: c,
+			role: "group",
+			"aria-labelledby": l,
+			className: e(o.section, r),
+			"data-forte": "nav-list-section",
+			...a,
+			children: i
+		})
+	});
+}), d = t.forwardRef(function({ className: r, id: i, ...a }, c) {
+	let l = t.useContext(s), u = t.useId(), d = i ?? u;
+	return t.useEffect(() => (l?.(d), () => l?.(void 0)), [l, d]), /* @__PURE__ */ n("div", {
+		ref: c,
+		id: d,
+		className: e(o.sectionLabel, r),
+		"data-forte": "nav-list-section-label",
+		...a
+	});
+}), f = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("ul", {
+		ref: i,
+		className: e(o.list, t),
+		"data-forte": "nav-list-list",
+		...r
+	});
+}), p = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("li", {
+		ref: i,
+		className: e(o.item, t),
+		"data-forte": "nav-list-item",
+		...r
+	});
+}), m = t.forwardRef(function({ active: t = !1, disabled: n = !1, render: r, className: a, href: s, onClick: c, ...l }, u) {
+	return i({
+		render: r,
+		ref: u,
+		defaultTagName: "a",
+		props: {
+			className: e(o.link, "forte-focus-ring", a),
+			"data-forte": "nav-list-link",
+			"data-focus-inset": "",
+			"data-active": t ? "" : void 0,
+			"data-disabled": n ? "" : void 0,
+			"aria-current": t ? "page" : void 0,
+			"aria-disabled": n || void 0,
+			href: n ? void 0 : s,
+			...l,
+			onClick: (e) => {
+				if (n) {
+					e.preventDefault();
+					return;
+				}
+				c?.(e);
+			}
+		}
+	});
+}), h = t.forwardRef(function({ className: t, render: r, ...i }, s) {
+	return /* @__PURE__ */ n(a.Root, {
+		ref: s,
+		className: e(o.group, t),
+		"data-forte": "nav-list-group",
+		render: r ?? /* @__PURE__ */ n("li", {}),
+		...i
+	});
+}), g = t.forwardRef(function({ active: t = !1, icon: i = /* @__PURE__ */ n(c, {}), className: s, children: l, ...u }, d) {
+	return /* @__PURE__ */ r(a.Trigger, {
+		ref: d,
+		className: e(o.groupTrigger, "forte-focus-ring", s),
+		"data-forte": "nav-list-group-trigger",
+		"data-focus-inset": "",
+		"data-active": t ? "" : void 0,
+		...u,
+		children: [/* @__PURE__ */ n("span", {
+			className: o.groupLabel,
+			"data-forte": "nav-list-group-label",
+			children: l
+		}), i === null ? null : /* @__PURE__ */ n("span", {
+			className: o.groupIcon,
+			"data-forte": "nav-list-group-icon",
+			"aria-hidden": "true",
+			children: i
+		})]
+	});
+}), _ = t.forwardRef(function({ keepMounted: t = !0, className: r, children: i, ...s }, c) {
+	return /* @__PURE__ */ n(a.Panel, {
+		ref: c,
+		keepMounted: t,
+		className: e(o.groupPanel, r),
+		"data-forte": "nav-list-group-panel",
+		...s,
+		children: /* @__PURE__ */ n("div", {
+			className: o.groupContent,
+			"data-forte": "nav-list-group-content",
+			children: i
+		})
+	});
+}), v = t.forwardRef(function({ className: t, ...r }, i) {
+	return /* @__PURE__ */ n("span", {
+		ref: i,
+		className: e(o.badge, t),
+		"data-forte": "nav-list-badge",
+		...r
+	});
+}), y = {
+	Root: l,
+	Section: u,
+	SectionLabel: d,
+	List: f,
+	Item: p,
+	Link: m,
+	Group: h,
+	GroupTrigger: g,
+	GroupPanel: _,
+	Badge: v
+};
+//#endregion
+export { g as a, f as c, d, _ as i, l, v as n, p as o, h as r, m as s, y as t, u };