@slotted/react 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/tag-XYGEPUHR.js

@@ -0,0 +1,374 @@
+import { r as e } from "./i18n-D7xXDd8-.js";
+import { n as t, t as n } from "./icon-DjqSEQ-o.js";
+/* empty css             */
+import { definedProps as r, keyedProps as i, selectorKeyProps as a } from "@slotted/core/selector-key";
+import { createRemovalFocus as o, createRovingTabindex as s } from "@slotted/core/focus";
+import { createControllable as c } from "@slotted/core/state";
+import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useRef as m, useState as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+import { tagMessages as y } from "@slotted/core/i18n";
+//#region src/tag/tag-defaults.tsx
+var b = l({
+	shape: "pill",
+	size: "md",
+	tone: "secondary",
+	variant: "soft"
+});
+function x() {
+	return d(b);
+}
+function S({ children: e, ...t }) {
+	let n = x();
+	return /* @__PURE__ */ _(b.Provider, {
+		value: {
+			shape: t.shape ?? n.shape,
+			size: t.size ?? n.size,
+			tone: t.tone ?? n.tone,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/tag/tag-chip.tsx
+var C = "[data-part=\"body\"]:is(a, button), [data-part=\"remove\"]", w = l(void 0);
+function T({ children: e, role: t }) {
+	return /* @__PURE__ */ _(w.Provider, {
+		value: t,
+		children: e
+	});
+}
+function E() {
+	return d(w);
+}
+function D(e) {
+	let t = x();
+	return {
+		tone: e.tone ?? t.tone,
+		variant: e.variant ?? t.variant,
+		size: e.size ?? t.size,
+		shape: e.shape ?? t.shape
+	};
+}
+function O(e, t) {
+	return {
+		"data-ui": "tag",
+		...a("ui", "tag"),
+		"data-part": "root",
+		...a("part", "root"),
+		"data-tone": e.tone,
+		"data-variant": e.variant,
+		"data-size": e.size,
+		"data-shape": e.shape,
+		"data-disabled": t.disabled ? "" : void 0,
+		"data-selected": t.selected ? "" : void 0
+	};
+}
+function k(e, t) {
+	let n = !1;
+	return {
+		reason: e,
+		source: t,
+		get cancelled() {
+			return n;
+		},
+		cancel() {
+			n = !0;
+		}
+	};
+}
+function A(t) {
+	let n = e(y, t.messages), r = t.disabled === !0 || t.removeDisabled === !0;
+	return {
+		removable: t.onRemove !== void 0,
+		removeDisabled: r,
+		removeLabel: n("remove"),
+		request(e, n) {
+			r || t.onRemove?.(k(e, n));
+		}
+	};
+}
+function j(e) {
+	return (t) => {
+		e.removable && !e.removeDisabled && (t.repeat || t.defaultPrevented || (t.key === "Backspace" || t.key === "Delete") && (t.preventDefault(), e.request("keyboard", t)));
+	};
+}
+function M({ children: e, end: t, indicator: n, labelId: r, start: i }) {
+	return /* @__PURE__ */ v(g, { children: [
+		n,
+		i === void 0 ? null : /* @__PURE__ */ _("span", {
+			"data-part": "start",
+			"data-part-start": "",
+			children: i
+		}),
+		/* @__PURE__ */ _("span", {
+			"data-part": "label",
+			"data-part-label": "",
+			id: r,
+			children: e
+		}),
+		t === void 0 ? null : /* @__PURE__ */ _("span", {
+			"data-part": "end",
+			"data-part-end": "",
+			children: t
+		})
+	] });
+}
+function N({ labelId: e, removal: r, wordId: i }) {
+	return /* @__PURE__ */ v("button", {
+		"aria-labelledby": `${i} ${e}`,
+		"data-part": "remove",
+		"data-part-remove": "",
+		disabled: r.removeDisabled,
+		onClick: (e) => {
+			e.stopPropagation(), r.request("remove", e);
+		},
+		type: "button",
+		children: [/* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: "x" }) }), /* @__PURE__ */ _("span", {
+			hidden: !0,
+			id: i,
+			children: r.removeLabel
+		})]
+	});
+}
+function P({ appearance: e, children: t, disabled: n, removal: r, render: a, rootProps: o, selected: s }) {
+	let c = E(), l = i({
+		...o,
+		...O(e, {
+			disabled: n === !0,
+			selected: s
+		}),
+		children: t,
+		...o?.role === void 0 && c !== void 0 ? { role: c } : {},
+		onKeyDown: (e) => {
+			o?.onKeyDown?.(e), j(r)(e);
+		}
+	});
+	return a === void 0 ? /* @__PURE__ */ _("span", { ...l }) : a(l);
+}
+//#endregion
+//#region src/tag/tag.tsx
+function F({ children: e, disabled: t = !1, end: n, onRemove: r, removeDisabled: i = !1, messages: a, render: o, shape: s, size: c, start: l, tone: u, variant: d, ...f }) {
+	let m = D({
+		shape: s,
+		size: c,
+		tone: u,
+		variant: d
+	}), h = A({
+		disabled: t,
+		onRemove: r,
+		removeDisabled: i,
+		messages: a
+	}), g = p(), y = `${g}label`, b = `${g}remove`;
+	return /* @__PURE__ */ v(P, {
+		appearance: m,
+		disabled: t,
+		removal: h,
+		render: o,
+		rootProps: f,
+		children: [/* @__PURE__ */ _("span", {
+			"data-part": "body",
+			"data-part-body": "",
+			children: /* @__PURE__ */ _(M, {
+				end: n,
+				labelId: y,
+				start: l,
+				children: e
+			})
+		}), h.removable ? /* @__PURE__ */ _(N, {
+			labelId: y,
+			removal: h,
+			wordId: b
+		}) : null]
+	});
+}
+//#endregion
+//#region src/tag/tag-button.tsx
+function I({ children: e, disabled: t = !1, end: n, onRemove: r, removeDisabled: a = !1, messages: o, render: s, rootProps: c, shape: l, size: u, start: d, tone: f, type: m = "button", variant: h, ...g }) {
+	let y = D({
+		shape: l,
+		size: u,
+		tone: f,
+		variant: h
+	}), b = A({
+		disabled: t,
+		onRemove: r,
+		removeDisabled: a,
+		messages: o
+	}), x = p(), S = `${x}label`, C = `${x}remove`, w = i({
+		...g,
+		children: /* @__PURE__ */ _(M, {
+			end: n,
+			labelId: S,
+			start: d,
+			children: e
+		}),
+		"data-part": "body",
+		disabled: t,
+		type: m
+	});
+	return /* @__PURE__ */ v(P, {
+		appearance: y,
+		disabled: t,
+		removal: b,
+		rootProps: c,
+		children: [s === void 0 ? /* @__PURE__ */ _("button", { ...w }) : s(w), b.removable ? /* @__PURE__ */ _(N, {
+			labelId: S,
+			removal: b,
+			wordId: C
+		}) : null]
+	});
+}
+//#endregion
+//#region src/tag/tag-group.tsx
+function L({ children: e, loop: t = !0, orientation: n = "horizontal", ref: r, render: a, role: c = "toolbar", ...l }) {
+	let d = m(null), p = c === "toolbar", h = u((e) => {
+		if (d.current = e, typeof r == "function") return r(e);
+		r && (r.current = e);
+	}, [r]);
+	f(() => {
+		let e = d.current;
+		if (e === null || !p) return;
+		let r = s(e, {
+			itemSelector: C,
+			loop: t,
+			orientation: () => n
+		}), i = o(e, { itemSelector: C }), a = new MutationObserver(() => r.refresh());
+		return a.observe(e, {
+			childList: !0,
+			subtree: !0
+		}), () => {
+			a.disconnect(), i.destroy(), r.destroy();
+		};
+	}, [
+		t,
+		n,
+		p
+	]);
+	let g = i({
+		tabIndex: -1,
+		...l,
+		children: /* @__PURE__ */ _(T, {
+			role: c === "list" ? "listitem" : void 0,
+			children: e
+		}),
+		"data-orientation": n,
+		"data-part": "group",
+		"data-ui": "tag",
+		ref: h,
+		role: c,
+		...p && n === "vertical" ? { "aria-orientation": n } : {}
+	});
+	return a === void 0 ? /* @__PURE__ */ _("div", { ...g }) : a(g);
+}
+//#endregion
+//#region src/tag/tag-link.tsx
+function R({ children: e, disabled: t = !1, end: n, href: a, onAuxClickCapture: o, onClickCapture: s, onKeyDownCapture: c, onRemove: l, removeDisabled: u = !1, messages: d, render: f, rootProps: m, shape: h, size: g, start: y, tabIndex: b, tone: x, variant: S, ...C }) {
+	let w = D({
+		shape: h,
+		size: g,
+		tone: x,
+		variant: S
+	}), T = A({
+		disabled: t,
+		onRemove: l,
+		removeDisabled: u,
+		messages: d
+	}), E = p(), O = `${E}label`, k = `${E}remove`, j = (e) => t ? (e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation?.(), !0) : !1, F = i({
+		...C,
+		children: /* @__PURE__ */ _(M, {
+			end: n,
+			labelId: O,
+			start: y,
+			children: e
+		}),
+		"data-part": "body",
+		onAuxClickCapture: (e) => {
+			j(e) || o?.(e);
+		},
+		onClickCapture: (e) => {
+			j(e) || s?.(e);
+		},
+		onKeyDownCapture: (e) => {
+			e.key === "Enter" && j(e) || c?.(e);
+		},
+		...t ? {
+			"aria-disabled": !0,
+			role: C.role ?? "link",
+			tabIndex: b ?? 0
+		} : {
+			href: a,
+			...b === void 0 ? {} : { tabIndex: b }
+		}
+	});
+	return /* @__PURE__ */ v(P, {
+		appearance: w,
+		disabled: t,
+		removal: T,
+		rootProps: m,
+		children: [f === void 0 ? /* @__PURE__ */ _("a", { ...F }) : f(r(F)), T.removable ? /* @__PURE__ */ _(N, {
+			labelId: O,
+			removal: T,
+			wordId: k
+		}) : null]
+	});
+}
+//#endregion
+//#region src/tag/tag-toggle.tsx
+function z(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function B({ children: e, defaultSelected: r, disabled: a = !1, end: o, onClick: s, onRemove: l, onSelectedChange: u, removeDisabled: d = !1, messages: f, render: m, rootProps: g, selected: y, shape: b, size: x, start: S, tone: C, type: w = "button", variant: T, ...E }) {
+	let O = D({
+		shape: b,
+		size: x,
+		tone: C,
+		variant: T
+	}), k = A({
+		disabled: a,
+		onRemove: l,
+		removeDisabled: d,
+		messages: f
+	}), [j, F] = h(r ?? !1), I = p(), L = `${I}label`, R = `${I}remove`, B = c({
+		controlled: y,
+		initial: j,
+		onRequest: (e) => u?.(e.value, e)
+	}), V = i({
+		...E,
+		"aria-pressed": B.value,
+		children: /* @__PURE__ */ _(M, {
+			end: o,
+			indicator: /* @__PURE__ */ _("span", {
+				"aria-hidden": "true",
+				"data-part": "indicator",
+				"data-part-indicator": "",
+				children: /* @__PURE__ */ _(n, { children: /* @__PURE__ */ _(t, { name: "check" }) })
+			}),
+			labelId: L,
+			start: S,
+			children: e
+		}),
+		"data-part": "body",
+		disabled: a,
+		onClick: (e) => {
+			if (s?.(e), e.defaultPrevented) return;
+			let t = !B.value;
+			B.request(t, z(e), e) && F(t);
+		},
+		type: w
+	});
+	return /* @__PURE__ */ v(P, {
+		appearance: O,
+		disabled: a,
+		removal: k,
+		rootProps: g,
+		selected: B.value,
+		children: [m === void 0 ? /* @__PURE__ */ _("button", { ...V }) : m(V), k.removable ? /* @__PURE__ */ _(N, {
+			labelId: L,
+			removal: k,
+			wordId: R
+		}) : null]
+	});
+}
+//#endregion
+export { F as a, I as i, R as n, S as o, L as r, x as s, B as t };

package/dist/tag.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./tag-DjtW53xN.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./tag-XYGEPUHR.js";
 export { e as Tag, t as TagButton, r as TagDefaultsProvider, i as TagGroup, n as TagLink, o as TagToggle, a as useTagDefaults };