@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/scroll-area.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "./scroll-area-DQ_ansLu.js";
+import { n as e, r as t, t as n } from "./scroll-area-YWtHa-AH.js";
 export { n as ScrollArea, e as ScrollAreaDefaultsProvider, t as useScrollAreaDefaults };

package/dist/section-BIVN1b9I.js

@@ -0,0 +1,177 @@
+import { i as e, r as t } from "./typography-DLiIuMKf.js";
+import { keyedProps as n } from "@slotted/core/selector-key";
+import { createContext as r, useContext as i, useEffect as a, useId as o, useState as s } from "react";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/section/section-defaults.tsx
+var l = r({
+	divider: !1,
+	ground: "none",
+	size: "md",
+	sticky: !1
+});
+function u() {
+	return i(l);
+}
+function d({ children: e, ...t }) {
+	let n = u();
+	return /* @__PURE__ */ c(l.Provider, {
+		value: {
+			divider: t.divider ?? n.divider,
+			ground: t.ground ?? n.ground,
+			size: t.size ?? n.size,
+			sticky: t.sticky ?? n.sticky
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/section/section.tsx
+var f = r(void 0);
+function p() {
+	let e = i(f);
+	if (e === void 0) throw Error("A Section part must be rendered inside Section.");
+	return e;
+}
+var m = "--slotted-section-header-size";
+function h({ children: t, className: r, divider: i, ground: l, id: d, level: p, ref: h, render: g, size: _, sticky: v, style: y, ...b }) {
+	let x = u(), S = e(), C = o(), [w, T] = s(!1), [E, D] = s(null), O = i ?? x.divider, k = l ?? x.ground, A = _ ?? x.size, j = v ?? x.sticky, M = p === void 0 || p === "auto" ? S : Number(p), N = d ?? `${C}section`, P = {
+		headingId: `${N}-heading`,
+		level: M,
+		registerHeading: T,
+		registerHeader: D
+	};
+	a(() => {
+		let e = E?.parentElement;
+		if (!j || !E || !e) return;
+		let t = () => e.style.setProperty(m, `${Math.ceil(E.getBoundingClientRect().height || E.offsetHeight)}px`);
+		if (t(), typeof ResizeObserver > "u") return () => e.style.removeProperty(m);
+		let n = new ResizeObserver(t);
+		return n.observe(E), () => {
+			n.disconnect(), e.style.removeProperty(m);
+		};
+	}, [E, j]);
+	let F = n({
+		...b,
+		...w ? { "aria-labelledby": P.headingId } : {},
+		children: t,
+		className: r,
+		...O ? { "data-divider": "" } : {},
+		"data-ground": k,
+		"data-level": String(M),
+		"data-part": "root",
+		"data-size": A,
+		...j ? { "data-sticky": "" } : {},
+		"data-ui": "section",
+		id: N,
+		style: y
+	});
+	return /* @__PURE__ */ c(f.Provider, {
+		value: P,
+		children: g === void 0 ? /* @__PURE__ */ c("section", {
+			...F,
+			ref: h
+		}) : g(F)
+	});
+}
+//#endregion
+//#region src/section/section-parts.tsx
+function g(e, t) {
+	function r({ children: t, className: r, ref: i, render: a, style: o, ...s }) {
+		let l = n({
+			...s,
+			children: t,
+			className: r,
+			"data-part": e,
+			style: o
+		});
+		return a === void 0 ? /* @__PURE__ */ c("div", {
+			...l,
+			ref: i
+		}) : a(l);
+	}
+	return r.displayName = t, r;
+}
+function _({ children: e, className: t, ref: r, render: i, style: a, ...o }) {
+	let { registerHeader: s } = p(), l = (e) => {
+		s(e);
+		let t = e;
+		typeof r == "function" ? r(t) : r && (r.current = t);
+	}, u = n({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "header",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ c("div", {
+		...u,
+		ref: l
+	}) : i({
+		...u,
+		ref: l
+	});
+}
+var v = g("title", "SectionTitle"), y = g("actions", "SectionActions");
+function b({ children: e, className: t, ref: r, render: i, style: a, ...o }) {
+	let s = n({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "eyebrow",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ c("span", {
+		...s,
+		ref: r
+	}) : i(s);
+}
+function x({ children: e, className: t, ref: r, render: i, style: o, ...s }) {
+	let { headingId: l, level: u, registerHeading: d } = p();
+	a(() => (d(!0), () => d(!1)), [d]);
+	let f = n({
+		...s,
+		children: e,
+		className: t,
+		"data-part": "heading",
+		id: l,
+		style: o
+	});
+	if (i !== void 0) return i({
+		...f,
+		role: "heading",
+		"aria-level": u
+	});
+	let m = `h${u}`;
+	return /* @__PURE__ */ c(m, {
+		...f,
+		ref: r
+	});
+}
+function S({ children: e, className: t, ref: r, render: i, style: a, ...o }) {
+	let s = n({
+		...o,
+		children: e,
+		className: t,
+		"data-part": "description",
+		style: a
+	});
+	return i === void 0 ? /* @__PURE__ */ c("p", {
+		...s,
+		ref: r
+	}) : i(s);
+}
+function C({ children: e, className: r, ref: i, render: a, style: o, ...s }) {
+	let l = n({
+		...s,
+		children: /* @__PURE__ */ c(t, { children: e }),
+		className: r,
+		"data-part": "body",
+		style: o
+	});
+	return a === void 0 ? /* @__PURE__ */ c("div", {
+		...l,
+		ref: i
+	}) : a(l);
+}
+//#endregion
+export { _ as a, m as c, d, u as f, b as i, h as l, C as n, x as o, S as r, v as s, y as t, p as u };

package/dist/section.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./section-Be7dX9MC.js";
+import { a as e, c as t, d as n, f as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./section-BIVN1b9I.js";
 export { t as HEADER_SIZE_PROPERTY, a as Section, u as SectionActions, o as SectionBody, n as SectionDefaultsProvider, c as SectionDescription, i as SectionEyebrow, e as SectionHeader, s as SectionHeading, l as SectionTitle, d as useSection, r as useSectionDefaults };

package/dist/segmented-control-BEhDuh3f.js

@@ -0,0 +1,156 @@
+import { b as e, f as t } from "./field-DKA-qsCV.js";
+import { r as n } from "./field-group-DFBcVPei.js";
+import { keyedProps as r, withSelectorKey as i } from "@slotted/core/selector-key";
+import { createControllable as a } from "@slotted/core/state";
+import { Children as o, createContext as s, isValidElement as c, useContext as l, useEffect as u, useId as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/segmented-control/segmented-control-parts.tsx
+function g(e) {
+	return e.detail === 0 ? "keyboard" : "pointer";
+}
+function _({ "aria-describedby": e, children: t, className: n, disabled: a, icon: o, id: s, onChange: c, onClick: l, ref: u, render: f, style: _, value: v, ...y }) {
+	let b = S(), x = d(), C = s ?? `slotted-segment-${x}`, w = b.value === v, T = a ?? b.disabled, E = r({
+		children: /* @__PURE__ */ h(p, { children: [
+			/* @__PURE__ */ m("input", {
+				...i(y, "part", "control"),
+				"aria-describedby": e,
+				checked: w,
+				disabled: T,
+				id: C,
+				name: b.name,
+				onChange: c ?? (() => void 0),
+				onClick: (e) => {
+					l?.(e), !e.defaultPrevented && (b.select(v, g(e), e) || e.preventDefault());
+				},
+				ref: u,
+				type: "radio",
+				value: v
+			}),
+			o === void 0 ? null : /* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				"data-part": "icon",
+				"data-part-icon": "",
+				children: o
+			}),
+			t === void 0 ? null : /* @__PURE__ */ m("span", {
+				"data-part": "label",
+				"data-part-label": "",
+				children: t
+			})
+		] }),
+		className: n,
+		...w ? { "data-checked": "" } : {},
+		...T === !0 ? { "data-disabled": "" } : {},
+		"data-part": "item",
+		style: _
+	});
+	return f === void 0 ? /* @__PURE__ */ m("label", { ...E }) : f(E);
+}
+//#endregion
+//#region src/segmented-control/segmented-control-defaults.tsx
+var v = s({
+	condense: "none",
+	fullWidth: !1,
+	orientation: "horizontal",
+	size: "md",
+	variant: "track"
+});
+function y() {
+	return l(v);
+}
+function b({ children: e, ...t }) {
+	let n = y();
+	return /* @__PURE__ */ m(v.Provider, {
+		value: {
+			condense: t.condense ?? n.condense,
+			fullWidth: t.fullWidth ?? n.fullWidth,
+			orientation: t.orientation ?? n.orientation,
+			size: t.size ?? n.size,
+			variant: t.variant ?? n.variant
+		},
+		children: e
+	});
+}
+//#endregion
+//#region src/segmented-control/segmented-control.tsx
+var x = s(void 0);
+function S() {
+	let e = l(x);
+	if (e === void 0) throw Error("Segment must be rendered inside a SegmentedControl.");
+	return e;
+}
+function C(e) {
+	let t = [];
+	return o.forEach(e, (e) => {
+		if (!c(e)) return;
+		if (e.type === _) {
+			t.push(e.props.value);
+			return;
+		}
+		let n = e.props.children;
+		e.type === (/* @__PURE__ */ m(p, {})).type && n !== void 0 && t.push(...C(n));
+	}), t;
+}
+function w({ "aria-describedby": i, "aria-invalid": o, "aria-orientation": s, "aria-readonly": c, "aria-required": l, children: p, className: g, condense: _, defaultValue: v, disabled: b, fullWidth: S, invalid: w, name: T, onValueChange: E, orientation: D, readOnly: ee, ref: O, render: k, required: A, role: j, size: te, style: ne, value: M, variant: N, ...P }) {
+	let F = e(), I = n(), L = t(), R = y(), re = d(), [ie, ae] = f(v), z = M ?? ie, B = te ?? F?.size ?? I?.size ?? R.size, V = D ?? R.orientation, H = _ ?? R.condense, U = N ?? R.variant, W = S ?? R.fullWidth, G = b ?? F?.disabled ?? L.disabled, K = ee ?? F?.readOnly ?? L.readOnly, q = w ?? F?.invalid, J = A ?? F?.required ?? I?.required, Y = j ?? (I === void 0 ? "radiogroup" : void 0), X = F?.registerControl;
+	u(() => X?.(), [X]);
+	let Z = C(p), Q = z === void 0 ? -1 : Z.indexOf(z), oe = {
+		disabled: G,
+		invalid: q,
+		name: T ?? `slotted-segmented-control-${re}`,
+		readOnly: K,
+		required: J,
+		select: (e, t, n) => {
+			if (K === !0) return !1;
+			let r = !1, i = a({
+				controlled: M,
+				initial: z,
+				onRequest: (e) => {
+					r = e.cancelled, e.value !== void 0 && E?.(e.value, e);
+				}
+			}).request(e, t, n);
+			return !r && (i && ae(e), !0);
+		},
+		size: B,
+		value: z
+	}, $ = r({
+		...P,
+		"aria-describedby": [i, F?.describedBy].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": o ?? (q === !0 || void 0),
+		"aria-labelledby": P["aria-labelledby"] ?? (Y !== void 0 && P["aria-label"] === void 0 ? F?.ids.label : void 0),
+		"aria-orientation": s ?? (Y === "radiogroup" && V === "horizontal" ? "horizontal" : void 0),
+		"aria-readonly": c ?? (K === !0 || void 0),
+		"aria-required": l ?? (J === !0 || void 0),
+		children: /* @__PURE__ */ h(x.Provider, {
+			value: oe,
+			children: [Q < 0 ? null : /* @__PURE__ */ m("span", {
+				"aria-hidden": "true",
+				"data-part": "indicator",
+				"data-part-indicator": ""
+			}), p]
+		}),
+		className: g,
+		"data-condense": H,
+		...G === !0 ? { "data-disabled": "" } : {},
+		...W ? { "data-full-width": "" } : {},
+		...q === !0 ? { "data-invalid": "" } : {},
+		"data-orientation": V,
+		"data-part": "root",
+		...K === !0 ? { "data-readonly": "" } : {},
+		"data-size": B,
+		"data-ui": "segmented-control",
+		"data-variant": U,
+		role: Y,
+		style: {
+			...ne,
+			"--slotted-segmented-control-count": Z.length,
+			...Q < 0 ? {} : { "--slotted-segmented-control-index": Q }
+		}
+	});
+	return k === void 0 ? /* @__PURE__ */ m("div", {
+		...$,
+		ref: O
+	}) : k($);
+}
+//#endregion
+export { _ as a, y as i, S as n, b as r, w as t };

package/dist/segmented-control.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./segmented-control-C-PzkTtg.js";
+import { a as e, i as t, n, r, t as i } from "./segmented-control-BEhDuh3f.js";
 export { e as Segment, i as SegmentedControl, r as SegmentedControlDefaultsProvider, n as useSegmentedControl, t as useSegmentedControlDefaults };