@forte-ui/react 1.0.0-alpha.1

package/dist/Breadcrumb-Cq7tFtMX.js

@@ -0,0 +1,170 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./ScrollArea-CBMGJ6hh.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRender as o } from "@base-ui/react/use-render";
+import './styles/Breadcrumb.css';var s = {
+	root: "_root_til4p_19",
+	list: "_list_til4p_117",
+	item: "_item_til4p_127",
+	link: "_link_til4p_137",
+	page: "_page_til4p_137",
+	separator: "_separator_til4p_214",
+	separatorIcon: "_separatorIcon_til4p_229",
+	ellipsis: "_ellipsis_til4p_239",
+	ellipsisIcon: "_ellipsisIcon_til4p_272",
+	scroller: "_scroller_til4p_288"
+}, c = n.createContext({
+	separator: void 0,
+	overflow: "wrap"
+});
+function l(e) {
+	return /* @__PURE__ */ i("svg", {
+		viewBox: "0 0 16 16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "1.5",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		children: /* @__PURE__ */ i("path", { d: "m6 3.5 4.5 4.5L6 12.5" })
+	});
+}
+function u(e) {
+	return /* @__PURE__ */ a("svg", {
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		focusable: "false",
+		...e,
+		children: [
+			/* @__PURE__ */ i("circle", {
+				cx: "3",
+				cy: "8",
+				r: "1.4"
+			}),
+			/* @__PURE__ */ i("circle", {
+				cx: "8",
+				cy: "8",
+				r: "1.4"
+			}),
+			/* @__PURE__ */ i("circle", {
+				cx: "13",
+				cy: "8",
+				r: "1.4"
+			})
+		]
+	});
+}
+var d = n.forwardRef(function({ size: t = "md", variant: r = "plain", separator: a, overflow: l = "wrap", render: u, className: d, ...f }, p) {
+	let m = n.useMemo(() => ({
+		separator: a,
+		overflow: l
+	}), [a, l]), h = o({
+		render: u,
+		ref: p,
+		defaultTagName: "nav",
+		props: {
+			className: e(s.root, d),
+			"data-forte": "breadcrumb",
+			"data-size": t,
+			"data-variant": r,
+			"data-overflow": l,
+			"aria-label": "Breadcrumb",
+			...f
+		}
+	});
+	return /* @__PURE__ */ i(c.Provider, {
+		value: m,
+		children: h
+	});
+}), f = n.forwardRef(function({ separators: r = !0, className: a, children: o, ...l }, u) {
+	let { overflow: d } = n.useContext(c), f = n.useRef(null), p = n.Children.toArray(o), m = p.some((e) => n.isValidElement(e) && e.type === g), h = r && !m ? p.flatMap((e, t) => t === 0 ? [e] : [/* @__PURE__ */ i(g, {}, `forte-separator-${t}`), e]) : p;
+	n.useEffect(() => {
+		let e = f.current;
+		!e || e.scrollWidth <= e.clientWidth || (e.scrollLeft = getComputedStyle(e).direction === "rtl" ? -e.scrollWidth : e.scrollWidth);
+	}, [h.length]);
+	let _ = /* @__PURE__ */ i("ol", {
+		ref: u,
+		className: e(s.list, a),
+		"data-forte": "breadcrumb-list",
+		...l,
+		children: h
+	});
+	return d === "scroll" ? /* @__PURE__ */ i(t.Root, {
+		className: s.scroller,
+		children: /* @__PURE__ */ i(t.Viewport, {
+			ref: f,
+			children: /* @__PURE__ */ i(t.Content, { children: _ })
+		})
+	}) : _;
+}), p = n.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ i("li", {
+		ref: r,
+		className: e(s.item, t),
+		"data-forte": "breadcrumb-item",
+		...n
+	});
+}), m = n.forwardRef(function({ render: t, className: n, ...r }, i) {
+	return o({
+		render: t,
+		ref: i,
+		defaultTagName: "a",
+		props: {
+			className: e(s.link, "forte-focus-ring", "forte-target", n),
+			"data-forte": "breadcrumb-link",
+			...r
+		}
+	});
+}), h = n.forwardRef(function({ render: t, className: n, ...r }, i) {
+	return o({
+		render: t,
+		ref: i,
+		defaultTagName: "span",
+		props: {
+			className: e(s.page, n),
+			"data-forte": "breadcrumb-page",
+			"aria-current": "page",
+			...r
+		}
+	});
+}), g = n.forwardRef(function({ className: t, children: r, ...a }, o) {
+	let { separator: u } = n.useContext(c);
+	return /* @__PURE__ */ i("li", {
+		ref: o,
+		role: "presentation",
+		"aria-hidden": "true",
+		className: e(s.separator, t),
+		"data-forte": "breadcrumb-separator",
+		...a,
+		children: r ?? u ?? /* @__PURE__ */ i(l, { className: s.separatorIcon })
+	});
+}), _ = n.forwardRef(function({ label: t = "More", render: n, className: c, children: l, ...d }, f) {
+	return o({
+		render: n,
+		ref: f,
+		defaultTagName: "span",
+		props: {
+			className: e(s.ellipsis, "forte-focus-ring", "forte-target", c),
+			"data-forte": "breadcrumb-ellipsis",
+			...d,
+			children: /* @__PURE__ */ a(r, { children: [l ?? /* @__PURE__ */ i(u, { className: s.ellipsisIcon }), /* @__PURE__ */ i("span", {
+				className: "forte-visually-hidden",
+				children: t
+			})] })
+		}
+	});
+}), v = {
+	Root: d,
+	List: f,
+	Item: p,
+	Link: m,
+	Page: h,
+	Separator: g,
+	Ellipsis: _
+};
+//#endregion
+export { f as a, g as c, m as i, _ as n, h as o, p as r, d as s, v as t };

package/dist/Button-AiyKnx5I.js

@@ -0,0 +1,42 @@
+"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 { Button as o } from "@base-ui/react/button";
+import './styles/Button.css';var s = {
+	root: "_root_l920z_19",
+	content: "_content_l920z_295",
+	spinner: "_spinner_l920z_314"
+}, c = n.forwardRef(function({ variant: n = "solid", tone: c = "primary", size: l = "md", fullWidth: u = !1, iconOnly: d = !1, loading: f = !1, loadingLabel: p = "Loading", disabled: m, focusableWhenDisabled: h, className: g, children: _, ...v }, y) {
+	return /* @__PURE__ */ a(o, {
+		ref: y,
+		className: e(s.root, "forte-focus-ring", g),
+		"data-forte": "button",
+		"data-variant": n,
+		"data-tone": c,
+		"data-size": l,
+		"data-full-width": u || void 0,
+		"data-icon-only": d || void 0,
+		"data-loading": f || void 0,
+		disabled: m || f,
+		focusableWhenDisabled: h ?? (f || void 0),
+		"aria-busy": f || void 0,
+		...v,
+		children: [/* @__PURE__ */ i("span", {
+			className: s.content,
+			"data-forte": "button-content",
+			children: _
+		}), f ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, {
+			className: s.spinner,
+			tone: "current",
+			decorative: !0,
+			style: { "--forte-spinner-size": "var(--forte-button-spinner-size)" }
+		}), /* @__PURE__ */ i("span", {
+			className: "forte-visually-hidden",
+			children: p
+		})] }) : null]
+	});
+});
+//#endregion
+export { c as t };

package/dist/ButtonGroup-C-CrwPXP.js

@@ -0,0 +1,54 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { useRender as r } from "@base-ui/react/use-render";
+import { Separator as i } from "@base-ui/react/separator";
+import './styles/ButtonGroup.css';var a = {
+	root: "_root_61qde_29",
+	separator: "_separator_61qde_93",
+	text: "_text_61qde_198"
+}, o = t.createContext("horizontal"), s = t.forwardRef(function({ orientation: t = "horizontal", render: i, className: s, ...c }, l) {
+	let u = r({
+		render: i,
+		ref: l,
+		defaultTagName: "div",
+		props: {
+			className: e(a.root, s),
+			"data-forte": "button-group",
+			"data-orientation": t,
+			role: "group",
+			...c
+		}
+	});
+	return /* @__PURE__ */ n(o.Provider, {
+		value: t,
+		children: u
+	});
+}), c = t.forwardRef(function({ orientation: r, className: s, ...c }, l) {
+	let u = t.useContext(o);
+	return /* @__PURE__ */ n(i, {
+		ref: l,
+		orientation: r ?? (u === "horizontal" ? "vertical" : "horizontal"),
+		className: e(a.separator, s),
+		"data-forte": "button-group-separator",
+		...c
+	});
+}), l = t.forwardRef(function({ render: t, className: n, ...i }, o) {
+	return r({
+		render: t,
+		ref: o,
+		defaultTagName: "div",
+		props: {
+			className: e(a.text, n),
+			"data-forte": "button-group-text",
+			...i
+		}
+	});
+}), u = {
+	Root: s,
+	Separator: c,
+	Text: l
+};
+//#endregion
+export { l as i, s as n, c as r, u as t };