@forte-ui/react 1.0.0-alpha.1

package/dist/Combobox-D-BN-Tvp.js

@@ -0,0 +1,302 @@
+"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 { Combobox as i } from "@base-ui/react/combobox";
+import './styles/Combobox.css';var a = {
+	label: "_label_1hrrd_48",
+	inputGroup: "_inputGroup_1hrrd_20",
+	trigger: "_trigger_1hrrd_19",
+	clear: "_clear_1hrrd_20",
+	chip: "_chip_1hrrd_133",
+	input: "_input_1hrrd_13",
+	icon: "_icon_1hrrd_505",
+	caret: "_caret_1hrrd_525",
+	chips: "_chips_1hrrd_270",
+	chipRemove: "_chipRemove_1hrrd_133",
+	backdrop: "_backdrop_1hrrd_717",
+	positioner: "_positioner_1hrrd_728",
+	popup: "_popup_1hrrd_16",
+	list: "_list_1hrrd_938",
+	empty: "_empty_1hrrd_964",
+	status: "_status_1hrrd_965",
+	item: "_item_1hrrd_987",
+	itemIndicator: "_itemIndicator_1hrrd_1039",
+	itemText: "_itemText_1hrrd_1057",
+	group: "_group_1hrrd_1067",
+	groupLabel: "_groupLabel_1hrrd_1071",
+	separator: "_separator_1hrrd_1128",
+	row: "_row_1hrrd_1150"
+};
+//#endregion
+//#region src/components/combobox/Combobox.tsx
+function o(e) {
+	return /* @__PURE__ */ r("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("path", {
+			className: a.caret,
+			"data-direction": "up",
+			d: "M11 6H5l3-3.5z"
+		}), /* @__PURE__ */ n("path", {
+			className: a.caret,
+			"data-direction": "down",
+			d: "M11 10H5l3 3.5z"
+		})]
+	});
+}
+function s(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 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: "m4.5 4.5 7 7m-7 0 7-7" })
+	});
+}
+function l({ onOpenChange: e, ...r }) {
+	let a = r.multiple, o = t.useCallback((t, n) => {
+		if (a && !t && n.reason === "item-press") {
+			n.cancel();
+			return;
+		}
+		e?.(t, n);
+	}, [a, e]);
+	return /* @__PURE__ */ n(i.Root, {
+		...r,
+		onOpenChange: o
+	});
+}
+var u = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Label, {
+		ref: o,
+		className: e(a.label, t),
+		"data-forte": "combobox-label",
+		...r
+	});
+}), d = t.forwardRef(function({ variant: t = "outline", size: r = "md", fullWidth: o = !1, className: s, ...c }, l) {
+	return /* @__PURE__ */ n(i.InputGroup, {
+		ref: l,
+		className: e(a.inputGroup, "forte-focus-ring-within", s),
+		"data-forte": "combobox-input-group",
+		"data-variant": t,
+		"data-size": r,
+		"data-full-width": o || void 0,
+		...c
+	});
+}), f = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Input, {
+		ref: o,
+		className: e(a.input, t),
+		"data-forte": "combobox-input",
+		...r
+	});
+}), p = t.forwardRef(function({ variant: t = "outline", size: r = "md", fullWidth: s = !1, children: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n(i.Trigger, {
+		ref: d,
+		className: e(a.trigger, "forte-focus-ring", "forte-target", l),
+		"data-forte": "combobox-trigger",
+		"data-variant": t,
+		"data-size": r,
+		"data-full-width": s || void 0,
+		...u,
+		children: c ?? /* @__PURE__ */ n(o, {})
+	});
+});
+function m(e) {
+	return /* @__PURE__ */ n(i.Value, { ...e });
+}
+var h = t.forwardRef(function({ className: t, children: r, ...s }, c) {
+	return /* @__PURE__ */ n(i.Icon, {
+		ref: c,
+		className: e(a.icon, t),
+		"data-forte": "combobox-icon",
+		...s,
+		children: r ?? /* @__PURE__ */ n(o, {})
+	});
+}), g = t.forwardRef(function({ children: t, className: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.Clear, {
+		ref: s,
+		className: e(a.clear, "forte-focus-ring", "forte-target", r),
+		"data-forte": "combobox-clear",
+		...o,
+		children: t ?? /* @__PURE__ */ n(c, {})
+	});
+}), _ = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Chips, {
+		ref: o,
+		className: e(a.chips, t),
+		"data-forte": "combobox-chips",
+		...r
+	});
+}), v = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Chip, {
+		ref: o,
+		className: e(a.chip, t),
+		"data-forte": "combobox-chip",
+		...r
+	});
+}), y = t.forwardRef(function({ children: t, className: r, ...o }, s) {
+	return /* @__PURE__ */ n(i.ChipRemove, {
+		ref: s,
+		className: e(a.chipRemove, "forte-focus-ring", "forte-target", r),
+		"data-forte": "combobox-chip-remove",
+		...o,
+		children: t ?? /* @__PURE__ */ n(c, {})
+	});
+}), b = t.forwardRef(function({ children: t, side: o, align: s = "start", sideOffset: c = 8, alignOffset: l, collisionPadding: u, container: d, backdrop: f = !1, className: p, positionerClassName: m, ...h }, g) {
+	return /* @__PURE__ */ r(i.Portal, {
+		container: d,
+		children: [f ? /* @__PURE__ */ n(i.Backdrop, {
+			className: e(a.backdrop, "forte-scrim"),
+			"data-forte": "combobox-backdrop"
+		}) : null, /* @__PURE__ */ n(i.Positioner, {
+			className: e(a.positioner, m),
+			"data-forte": "combobox-positioner",
+			side: o,
+			align: s,
+			sideOffset: c,
+			alignOffset: l,
+			collisionPadding: u,
+			children: /* @__PURE__ */ n(i.Popup, {
+				ref: g,
+				className: e(a.popup, "forte-hc-surface", p),
+				"data-forte": "combobox-popup",
+				...h,
+				children: t
+			})
+		})]
+	});
+}), x = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.List, {
+		ref: o,
+		className: e(a.list, t),
+		"data-forte": "combobox-list",
+		...r
+	});
+}), S = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Empty, {
+		ref: o,
+		className: e(a.empty, t),
+		"data-forte": "combobox-empty",
+		...r
+	});
+}), C = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Status, {
+		ref: o,
+		className: e(a.status, t),
+		"data-forte": "combobox-status",
+		...r
+	});
+}), w = t.forwardRef(function({ children: t, indicator: o, className: c, ...l }, u) {
+	return /* @__PURE__ */ r(i.Item, {
+		ref: u,
+		className: e(a.item, "forte-focus-ring", c),
+		"data-forte": "combobox-item",
+		"data-focus-inset": "",
+		...l,
+		children: [/* @__PURE__ */ n(i.ItemIndicator, {
+			className: a.itemIndicator,
+			"data-forte": "combobox-item-indicator",
+			children: o ?? /* @__PURE__ */ n(s, {})
+		}), /* @__PURE__ */ n("span", {
+			className: a.itemText,
+			"data-forte": "combobox-item-text",
+			children: t
+		})]
+	});
+}), T = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Group, {
+		ref: o,
+		className: e(a.group, t),
+		"data-forte": "combobox-group",
+		...r
+	});
+}), E = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.GroupLabel, {
+		ref: o,
+		className: e(a.groupLabel, t),
+		"data-forte": "combobox-group-label",
+		...r
+	});
+}), D = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Separator, {
+		ref: o,
+		className: e(a.separator, t),
+		"data-forte": "combobox-separator",
+		...r
+	});
+}), O = t.forwardRef(function({ className: t, ...r }, o) {
+	return /* @__PURE__ */ n(i.Row, {
+		ref: o,
+		className: e(a.row, t),
+		"data-forte": "combobox-row",
+		...r
+	});
+}), k = i.Collection, A = i.useFilter, j = i.useFilteredItems, M = {
+	Root: l,
+	Label: u,
+	InputGroup: d,
+	Input: f,
+	Trigger: p,
+	Value: m,
+	Icon: h,
+	Clear: g,
+	Chips: _,
+	Chip: v,
+	ChipRemove: y,
+	Popup: b,
+	List: x,
+	Empty: S,
+	Status: C,
+	Item: w,
+	Group: T,
+	GroupLabel: E,
+	Separator: D,
+	Row: O,
+	Collection: k,
+	useFilter: A,
+	useFilteredItems: j
+};
+//#endregion
+export { A as C, m as S, l as _, g as a, C as b, T as c, f as d, d as f, b as g, x as h, _ as i, E as l, u as m, v as n, k as o, w as p, y as r, S as s, M as t, h as u, O as v, j as w, p as x, D as y };

package/dist/ContextMenu-D81uDaMG.js

@@ -0,0 +1,44 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { a as t, c as n, f as r, h as i, i as a, l as o, m as s, n as c, o as l, p as u, r as d, s as f, u as p } from "./Menu-CKu9xE2h.js";
+import * as m from "react";
+import { jsx as h } from "react/jsx-runtime";
+import { ContextMenu as g } from "@base-ui/react/context-menu";
+import './styles/ContextMenu.css';var _ = { trigger: "_trigger_1pr6j_41" };
+//#endregion
+//#region src/components/context-menu/ContextMenu.tsx
+function v({ children: e, ...t }) {
+	return /* @__PURE__ */ h(f.Provider, {
+		value: "context-menu",
+		children: /* @__PURE__ */ h(g.Root, {
+			...t,
+			children: e
+		})
+	});
+}
+var y = m.forwardRef(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ h(g.Trigger, {
+		ref: i,
+		className: e(_.trigger, n),
+		"data-forte": "context-menu-trigger",
+		...r,
+		children: t
+	});
+}), b = {
+	Root: v,
+	Trigger: y,
+	Popup: n,
+	Item: t,
+	LinkItem: l,
+	CheckboxItem: c,
+	RadioGroup: o,
+	RadioItem: p,
+	Group: d,
+	GroupLabel: a,
+	Separator: r,
+	SubmenuRoot: s,
+	SubmenuTrigger: i,
+	Shortcut: u
+};
+//#endregion
+export { v as n, y as r, b as t };

package/dist/DatePicker-CfkMsaI-.js

@@ -0,0 +1,192 @@
+"use client";
+import { t as e } from "./clsx-By2n9mTe.js";
+import { t } from "./Button-AiyKnx5I.js";
+import { t as n } from "./Calendar-D7Q-QJ_e.js";
+import { t as r } from "./Popover-BXhn2Wwt.js";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Field as s } from "@base-ui/react/field";
+import './styles/DatePicker.css';var c = {
+	trigger: "_trigger_1sx1q_22",
+	value: "_value_1sx1q_160",
+	icon: "_icon_1sx1q_178",
+	popup: "_popup_1sx1q_198",
+	panel: "_panel_1sx1q_15",
+	footer: "_footer_1sx1q_212"
+}, l = typeof process < "u" && process.env.NODE_ENV !== "production", u = i.createContext(null);
+function d(e) {
+	let t = i.useContext(u);
+	if (!t) throw Error(`[forte-ui] <DatePicker.${e}> must be rendered inside <DatePicker.Root>.`);
+	return t;
+}
+function f(e, t, n) {
+	if (!e) return null;
+	if (t === "single") return n.format(e);
+	if (t === "multiple") {
+		let t = e;
+		return t.length === 0 ? null : t.length <= 2 ? t.map((e) => n.format(e)).join(", ") : `${n.format(t[0])} +${t.length - 1}`;
+	}
+	let r = e;
+	return r.from ? r.to ? `${n.format(r.from)} – ${n.format(r.to)}` : n.format(r.from) : null;
+}
+function p(e, t) {
+	return e === "single" ? t !== null : e === "range" && !!t?.to;
+}
+function m(e) {
+	return e ? Array.isArray(e) ? e.length === 0 : e instanceof Date ? !1 : !e.from : !0;
+}
+function h(e) {
+	return /* @__PURE__ */ o("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,
+		children: [/* @__PURE__ */ a("rect", {
+			x: "2.25",
+			y: "3.25",
+			width: "11.5",
+			height: "10.5",
+			rx: "2"
+		}), /* @__PURE__ */ a("path", { d: "M2.25 6.75h11.5M5.5 2v2.5M10.5 2v2.5" })]
+	});
+}
+function g(e) {
+	let { mode: t = "single", selected: n, defaultSelected: o = null, onSelect: s, required: c = !1, defaultOpen: l = !1, open: d, onOpenChange: m, closeOnSelect: h, locale: g = "en-US", formatValue: _, modal: v = !1, children: y } = e, b = i.useRef("selected" in e).current, [x, S] = i.useState(o), C = b ? n ?? null : x, w = d !== void 0, [T, E] = i.useState(l), D = w ? d : T, O = i.useCallback((e) => {
+		w || E(e), m?.(e);
+	}, [w, m]), k = i.useMemo(() => new Intl.DateTimeFormat(g, { dateStyle: "medium" }), [g]), A = i.useMemo(() => ({
+		mode: t,
+		required: c,
+		selection: C,
+		locale: g,
+		select: (e, n) => {
+			b || S(e), s?.(e, n), (h ?? p(t, e)) && O(!1);
+		},
+		clear: () => {
+			b || S(t === "multiple" ? [] : null), s?.(null, /* @__PURE__ */ new Date());
+		},
+		format: (e) => _ ? _(e, g) : f(e, t, k)
+	}), [
+		h,
+		_,
+		k,
+		b,
+		g,
+		t,
+		s,
+		c,
+		C,
+		O
+	]);
+	return /* @__PURE__ */ a(u.Provider, {
+		value: A,
+		children: /* @__PURE__ */ a(r.Root, {
+			open: D,
+			onOpenChange: (e) => O(e),
+			modal: v,
+			children: y
+		})
+	});
+}
+var _ = i.forwardRef(function({ variant: t = "outline", size: n = "md", fullWidth: o = !1, className: u, ...f }, p) {
+	let { selection: h } = d("Trigger"), g = i.useRef(null), _ = i.useCallback((e) => {
+		g.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
+	}, [p]), v = i.useRef(!1);
+	return i.useEffect(() => {
+		if (!l) return;
+		let e = setTimeout(() => {
+			let e = g.current;
+			!e || v.current || !e.getAttribute("aria-label") && !e.getAttribute("aria-labelledby") && (v.current = !0, console.warn("[forte-ui] <DatePicker.Trigger> has no accessible name. Render a <Field.Label nativeLabel={false}> in the same <Field.Root>, or pass aria-label to the trigger."));
+		}, 0);
+		return () => clearTimeout(e);
+	}), /* @__PURE__ */ a(r.Trigger, {
+		ref: _,
+		className: e(c.trigger, "forte-focus-ring", u),
+		"data-forte": "date-picker-trigger",
+		"data-variant": t,
+		"data-size": n,
+		"data-full-width": o || void 0,
+		"data-empty": m(h) || void 0,
+		render: /* @__PURE__ */ a(s.Control, { render: /* @__PURE__ */ a("button", { type: "button" }) }),
+		...f
+	});
+}), v = i.forwardRef(function({ placeholder: t, className: n, ...r }, i) {
+	let { selection: o, format: s } = d("Value"), l = s(o);
+	return /* @__PURE__ */ a("span", {
+		ref: i,
+		className: e(c.value, n),
+		"data-forte": "date-picker-value",
+		"data-placeholder": l === null || void 0,
+		...r,
+		children: l ?? t
+	});
+}), y = i.forwardRef(function({ children: t, className: n, ...r }, i) {
+	return /* @__PURE__ */ a("span", {
+		ref: i,
+		"aria-hidden": "true",
+		className: e(c.icon, n),
+		"data-forte": "date-picker-icon",
+		...r,
+		children: t ?? /* @__PURE__ */ a(h, {})
+	});
+}), b = i.forwardRef(function({ className: t, children: n, ...i }, o) {
+	return /* @__PURE__ */ a(r.Popup, {
+		ref: o,
+		className: c.popup,
+		...i,
+		children: /* @__PURE__ */ a("div", {
+			className: e(c.panel, t),
+			"data-forte": "date-picker-panel",
+			children: n
+		})
+	});
+}), x = i.forwardRef(function({ autoFocus: e = !0, className: t, ...r }, i) {
+	let { mode: o, required: s, selection: c, locale: l, select: u } = d("Calendar");
+	return /* @__PURE__ */ a(n, {
+		ref: i,
+		mode: o,
+		required: s,
+		selected: c,
+		onSelect: u,
+		locale: l,
+		autoFocus: e,
+		className: t,
+		...r
+	});
+}), S = i.forwardRef(function({ className: t, ...n }, r) {
+	return /* @__PURE__ */ a("div", {
+		ref: r,
+		className: e(c.footer, t),
+		"data-forte": "date-picker-footer",
+		...n
+	});
+}), C = i.forwardRef(function({ children: e = "Clear", disabled: n, ...r }, i) {
+	let { selection: o, required: s, clear: c } = d("Clear");
+	return /* @__PURE__ */ a(t, {
+		ref: i,
+		variant: "ghost",
+		tone: "neutral",
+		size: "sm",
+		disabled: n ?? (s || m(o)),
+		onClick: c,
+		...r,
+		children: e
+	});
+}), w = {
+	Root: g,
+	Trigger: _,
+	Value: v,
+	Icon: y,
+	Popup: b,
+	Calendar: x,
+	Footer: S,
+	Clear: C
+};
+//#endregion
+export { y as a, _ as c, S as i, v as l, x as n, b as o, C as r, g as s, w as t };