@number10/jsx-components 5.0.0

package/dist/Toast.js

@@ -0,0 +1,188 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { Button as n } from "./Button.js";
+import { Portal as r } from "./Portal.js";
+import { WrapText as i } from "./WrapText.js";
+import { KNOWN_COMPONENTS as a, getGlobalThemeDefaults as o, mergeThemes as s, resolveComponentTheme as c, useEffect as l, useMemo as u, useTheme as d, useViewportSize as f } from "@number10/jsx-core";
+import { jsx as p, jsxs as m } from "@number10/jsx-core/jsx-runtime";
+//#region src/Toast.tsx
+function h(e) {
+	let t = e.startsWith("bottom") ? "end" : "start";
+	return e.endsWith("left") ? {
+		justifyContent: t,
+		alignItems: "start"
+	} : e.endsWith("right") ? {
+		justifyContent: t,
+		alignItems: "end"
+	} : {
+		justifyContent: t,
+		alignItems: "center"
+	};
+}
+function g(e, t) {
+	return e.autoDismiss === !1 ? 0 : e.duration ?? t;
+}
+function _(e) {
+	if (typeof e == "number") return e * 2;
+	if (!e) return 0;
+	let t = e;
+	return (t.left ?? 0) + (t.right ?? 0);
+}
+function v(e) {
+	return typeof e == "number" ? e : e ? e.horizontal ?? 0 : 0;
+}
+function y(e) {
+	if (typeof e.width != "number") return;
+	let t = 2 + +!!e.hasPrefix + +!!e.hasClose, n = Math.max(0, t - 1) * e.gap, r = _(e.padding) + e.accentWidth + (e.hasPrefix ? e.prefixWidth : 0) + (e.hasClose ? e.closeButtonSize : 0) + n;
+	return Math.max(e.minContentWidth ?? 96, e.width - r);
+}
+function b(e) {
+	return Number.isFinite(e) && e > 0;
+}
+function x(r) {
+	let { variant: l, title: u, message: f, children: h, prefix: g, suffix: _, action: b, dismissible: x = !0, onDismiss: S, labels: C, theme: w, ...T } = r, E = d(), D = w ? s(E ?? {}, w) : E, { props: O, nestedTheme: k } = c({
+		componentName: "Toast",
+		globalTheme: o(),
+		localTheme: D,
+		knownComponents: a
+	}), A = l ?? O.variant ?? "info", j = O.variants?.[A] ?? {}, M = T.width ?? O.width ?? 320, N = T.padding ?? O.padding ?? {
+		left: 10,
+		right: 10,
+		top: 9,
+		bottom: 9
+	}, P = v(T.gap ?? O.gap ?? 10), F = O.accentWidth ?? 4, I = O.prefixWidth ?? 24, L = O.closeButtonSize ?? 22, R = g ?? j.prefix, z = O.titleStyle || j.titleStyle ? {
+		...O.titleStyle ?? {},
+		...j.titleStyle ?? {}
+	} : void 0, B = O.messageStyle || j.messageStyle ? {
+		...O.messageStyle ?? {},
+		...j.messageStyle ?? {}
+	} : void 0, V = C?.close ?? O.labels?.close ?? "x", H = u !== void 0 || f !== void 0 || h !== void 0, U = x && S !== void 0, W = y({
+		width: M,
+		padding: N,
+		gap: P,
+		accentWidth: F,
+		hasPrefix: R !== void 0,
+		prefixWidth: I,
+		hasClose: U,
+		closeButtonSize: L
+	});
+	return /* @__PURE__ */ m(t, {
+		...T,
+		direction: "row",
+		alignItems: "stretch",
+		gap: P,
+		width: M,
+		minHeight: T.minHeight ?? O.minHeight ?? 58,
+		padding: N,
+		backgroundColor: T.backgroundColor ?? j.backgroundColor ?? O.backgroundColor,
+		backgroundAlpha: T.backgroundAlpha ?? j.backgroundAlpha ?? O.backgroundAlpha,
+		borderColor: T.borderColor ?? j.borderColor ?? O.borderColor,
+		borderWidth: T.borderWidth ?? j.borderWidth ?? O.borderWidth,
+		cornerRadius: T.cornerRadius ?? j.cornerRadius ?? O.cornerRadius,
+		theme: k,
+		children: [
+			/* @__PURE__ */ p(t, {
+				width: F,
+				backgroundColor: j.accentColor ?? j.borderColor ?? 3718648,
+				cornerRadius: 2
+			}),
+			R && /* @__PURE__ */ p(t, {
+				width: I,
+				alignItems: "center",
+				justifyContent: "center",
+				padding: { top: 1 },
+				children: R
+			}),
+			H && /* @__PURE__ */ m(t, {
+				...W === void 0 ? { flex: 1 } : {},
+				width: W ?? "fill",
+				flexShrink: 1,
+				gap: O.contentGap ?? 2,
+				justifyContent: "center",
+				overflow: "hidden",
+				children: [
+					u !== void 0 && /* @__PURE__ */ p(e, {
+						text: u,
+						style: z
+					}),
+					f !== void 0 && /* @__PURE__ */ p(i, {
+						text: f,
+						style: B
+					}),
+					h
+				]
+			}),
+			b,
+			_,
+			U && /* @__PURE__ */ p(t, {
+				alignItems: "center",
+				justifyContent: "center",
+				padding: { top: 1 },
+				children: /* @__PURE__ */ p(n, {
+					variant: "ghost",
+					maxWidth: L,
+					maxHeight: L,
+					cornerRadius: L,
+					padding: 0,
+					onClick: S,
+					children: /* @__PURE__ */ p(e, {
+						text: V,
+						style: O.closeTextStyle
+					})
+				})
+			})
+		]
+	});
+}
+function S(e) {
+	let { items: n, position: i, width: m, gap: _, offset: v, duration: y, depth: S, labels: C, onDismiss: w, theme: T, ...E } = e, D = d(), O = T ? s(D ?? {}, T) : D, { props: k, nestedTheme: A } = c({
+		componentName: "NotificationStack",
+		globalTheme: o(),
+		localTheme: O,
+		knownComponents: a
+	}), j = f(), M = i ?? k.position ?? "top-right", N = y ?? k.duration ?? 4e3, P = _ ?? k.gap ?? 8, F = v ?? k.offset ?? 16, I = m ?? k.width ?? 320, L = u(() => n.map((e) => `${e.id}:${g(e, N)}`).join("|"), [n, N]), R = h(M);
+	return l(() => {
+		if (!w || n.length === 0) return;
+		let e = n.map((e) => {
+			let t = g(e, N);
+			return b(t) ? setTimeout(() => w(e.id), t) : null;
+		}).filter((e) => e !== null);
+		return () => {
+			e.forEach((e) => clearTimeout(e));
+		};
+	}, [L, w]), /* @__PURE__ */ p(r, {
+		depth: S ?? k.depth ?? 1200,
+		blockEvents: !1,
+		children: /* @__PURE__ */ p(t, {
+			...E,
+			width: j.width,
+			height: j.height,
+			direction: "column",
+			justifyContent: R.justifyContent,
+			alignItems: R.alignItems,
+			padding: E.padding ?? F,
+			theme: A,
+			children: /* @__PURE__ */ p(t, {
+				direction: "column",
+				gap: P,
+				width: I,
+				children: n.map((e) => /* @__PURE__ */ p(x, {
+					...e.variant === void 0 ? {} : { variant: e.variant },
+					...e.title === void 0 ? {} : { title: e.title },
+					...e.message === void 0 ? {} : { message: e.message },
+					...e.prefix === void 0 ? {} : { prefix: e.prefix },
+					...e.suffix === void 0 ? {} : { suffix: e.suffix },
+					...e.action === void 0 ? {} : { action: e.action },
+					...e.dismissible === void 0 ? {} : { dismissible: e.dismissible },
+					...w ? { onDismiss: () => w(e.id) } : {},
+					...C === void 0 ? {} : { labels: C },
+					theme: A,
+					children: e.content
+				}, e.id))
+			})
+		})
+	});
+}
+//#endregion
+export { S as NotificationStack, x as Toast, g as getToastAutoDismissDuration, y as getToastContentWidth, h as resolveNotificationStackAlignment };

package/dist/Toast.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toast.test.d.ts.map

package/dist/Toast.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.test.d.ts","sourceRoot":"","sources":["../src/Toast.test.ts"],"names":[],"mappings":""}

package/dist/Toggle.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/VectorDrawContent.cjs`),n=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);function a(e,t,n){let i=(0,r.numberToRgb)(e),a=(0,r.numberToRgb)(t);return(0,r.rgbToNumber)(Math.round(i.r+(a.r-i.r)*n),Math.round(i.g+(a.g-i.g)*n),Math.round(i.b+(a.b-i.b)*n))}function o(o){let s=(0,r.useTheme)(),c=o.theme?(0,r.mergeThemes)(s??{},o.theme):s,{props:l,nestedTheme:u}=(0,r.resolveComponentTheme)({componentName:`Toggle`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:c,knownComponents:r.KNOWN_COMPONENTS}),d=l.width??50,f=l.height??28,p=l.thumbSize??24,m=l.trackColorOff??10066329,h=l.trackColorOn??5025616,g=l.trackBorderColorOff??7829367,_=l.trackBorderColorOn??h,v=l.trackBorderWidth??1,y=l.thumbColor??16777215,b=l.thumbBorderColor??13751771,x=l.thumbBorderWidth??1,S=l.disabledColor??6710886,C=l.disabledAlpha??.5,w=l.padding??2,T=l.duration??200,E=l.gap??8,D=o.labelPosition??l.labelPosition??`right`,O=p/2,k=f/2,A=w+O,j=d-w-O,M=o.checked??!1,[N,P]=(0,r.useState)(M),F=(0,r.useRef)(M),[I,L]=(0,r.useState)(!1),[R,z]=(0,r.useState)(M?j:A),B=(0,r.useRef)(M?j:A),[V,H]=(0,r.useState)(+!!M),U=(0,r.useRef)(+!!M),W=(0,r.useRef)(null),G=(0,r.useSurface)()?.scheduler??null,K=(0,r.useRef)(G);G&&K.current!==G&&(K.current=G),(0,r.useEffect)(()=>{F.current=N},[N]),(0,r.useEffect)(()=>{B.current=R},[R]),(0,r.useEffect)(()=>{U.current=V},[V]),(0,r.useEffect)(()=>{o.checked!==void 0&&o.checked!==F.current&&q(o.checked)},[o.checked,A,j,T]),(0,r.useEffect)(()=>{I||(z(N?j:A),H(+!!N))},[N,A,j,I]),(0,r.useEffect)(()=>()=>{W.current?.stop(),W.current=null},[]);let q=e=>{let t=K.current,n=U.current,i=B.current,a=+!!e,o=e?j:A;if(W.current?.stop(),W.current=null,L(!0),P(e),!t){H(a),z(o),L(!1);return}W.current=(0,r.createTween)({progress:n,x:i},{to:{progress:a,x:o},duration:T,ease:r.Easing.cubicOut,onUpdate:e=>{H(e.progress),z(e.x)},onComplete:()=>{H(a),z(o),L(!1),W.current=null}},t)},J=()=>{if(o.disabled||I)return;let e=!F.current;q(e),o.onChange?.(e)},Y=o.disabled?a(S,h,V):a(m,h,V),X=a(g,_,V),Z=(0,i.jsxs)(n.View,{direction:`stack`,width:d,height:f,enableGestures:!o.disabled,onTouch:J,alpha:o.disabled?C:1,children:[(0,i.jsx)(t.VectorDrawContent,{width:d,height:f,dependencies:[d,f,Y,X,v],onDraw:e=>{let t=v/2;e.clear(),e.fillStyle(Y,1).fillRoundedRect(0,0,d,f,k),v>0&&e.lineStyle(v,X,1).strokeRoundedRect(t,t,d-v,f-v,Math.max(0,k-t))}}),(0,i.jsx)(t.VectorDrawContent,{width:p,height:p,x:R,y:f/2,dependencies:[p,y,b,x],onDraw:e=>{e.clear().fillStyle(y,1).fillCircle(0,0,O),x>0&&e.lineStyle(x,b,1).strokeCircle(0,0,Math.max(0,O-x/2))}})]}),Q=o.label&&D!==`none`?(0,i.jsx)(e.Text,{text:o.label,style:l.labelStyle,alpha:o.disabled?C:1}):null;return!o.label||D===`none`?(0,i.jsxs)(n.View,{direction:`row`,alignItems:`center`,gap:E,theme:u,children:[o.prefix,Z,o.suffix]}):(0,i.jsxs)(n.View,{direction:`row`,alignItems:`center`,gap:E,theme:u,children:[D===`left`&&Q,o.prefix,Z,o.suffix,D===`right`&&Q]})}exports.Toggle=o;

package/dist/Toggle.d.ts

@@ -0,0 +1,14 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface ToggleProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: string;
+    labelPosition?: 'left' | 'right' | 'none';
+    disabled?: boolean;
+    prefix?: VNodeLike;
+    suffix?: VNodeLike;
+    theme?: PortableComponentPartialTheme<'Toggle'>;
+}
+export declare function Toggle(props: ToggleProps): VNodeLike;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../src/Toggle.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,EAiBL,KAAK,SAAS,EACf,MAAM,oBAAoB,CAAA;AAE3B,OAAO,KAAK,EAAE,6BAA6B,EAAe,MAAM,eAAe,CAAA;AAa/E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,6BAA6B,CAAC,QAAQ,CAAC,CAAA;CAChD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CA2NpD"}

package/dist/Toggle.js

@@ -0,0 +1,135 @@
+import { Text as e } from "./primitives/Text.js";
+import { VectorDrawContent as t } from "./primitives/VectorDrawContent.js";
+import { View as n } from "./primitives/View.js";
+import "./primitives.js";
+import { Easing as r, KNOWN_COMPONENTS as i, createTween as ee, getGlobalThemeDefaults as a, mergeThemes as o, numberToRgb as s, resolveComponentTheme as te, rgbToNumber as c, useEffect as l, useRef as u, useState as d, useSurface as ne, useTheme as re } from "@number10/jsx-core";
+import { jsx as f, jsxs as p } from "@number10/jsx-core/jsx-runtime";
+//#region src/Toggle.tsx
+function m(e, t, n) {
+	let r = s(e), i = s(t);
+	return c(Math.round(r.r + (i.r - r.r) * n), Math.round(r.g + (i.g - r.g) * n), Math.round(r.b + (i.b - r.b) * n));
+}
+function h(s) {
+	let c = re(), h = s.theme ? o(c ?? {}, s.theme) : c, { props: g, nestedTheme: _ } = te({
+		componentName: "Toggle",
+		globalTheme: a(),
+		localTheme: h,
+		knownComponents: i
+	}), v = g.width ?? 50, y = g.height ?? 28, b = g.thumbSize ?? 24, ie = g.trackColorOff ?? 10066329, x = g.trackColorOn ?? 5025616, ae = g.trackBorderColorOff ?? 7829367, oe = g.trackBorderColorOn ?? x, S = g.trackBorderWidth ?? 1, C = g.thumbColor ?? 16777215, w = g.thumbBorderColor ?? 13751771, T = g.thumbBorderWidth ?? 1, se = g.disabledColor ?? 6710886, E = g.disabledAlpha ?? .5, D = g.padding ?? 2, O = g.duration ?? 200, k = g.gap ?? 8, A = s.labelPosition ?? g.labelPosition ?? "right", j = b / 2, M = y / 2, N = D + j, P = v - D - j, F = s.checked ?? !1, [I, ce] = d(F), L = u(F), [R, z] = d(!1), [B, V] = d(F ? P : N), H = u(F ? P : N), [U, W] = d(+!!F), G = u(+!!F), K = u(null), q = ne()?.scheduler ?? null, J = u(q);
+	q && J.current !== q && (J.current = q), l(() => {
+		L.current = I;
+	}, [I]), l(() => {
+		H.current = B;
+	}, [B]), l(() => {
+		G.current = U;
+	}, [U]), l(() => {
+		s.checked !== void 0 && s.checked !== L.current && Y(s.checked);
+	}, [
+		s.checked,
+		N,
+		P,
+		O
+	]), l(() => {
+		R || (V(I ? P : N), W(+!!I));
+	}, [
+		I,
+		N,
+		P,
+		R
+	]), l(() => () => {
+		K.current?.stop(), K.current = null;
+	}, []);
+	let Y = (e) => {
+		let t = J.current, n = G.current, i = H.current, a = +!!e, o = e ? P : N;
+		if (K.current?.stop(), K.current = null, z(!0), ce(e), !t) {
+			W(a), V(o), z(!1);
+			return;
+		}
+		K.current = ee({
+			progress: n,
+			x: i
+		}, {
+			to: {
+				progress: a,
+				x: o
+			},
+			duration: O,
+			ease: r.cubicOut,
+			onUpdate: (e) => {
+				W(e.progress), V(e.x);
+			},
+			onComplete: () => {
+				W(a), V(o), z(!1), K.current = null;
+			}
+		}, t);
+	}, le = () => {
+		if (s.disabled || R) return;
+		let e = !L.current;
+		Y(e), s.onChange?.(e);
+	}, X = s.disabled ? m(se, x, U) : m(ie, x, U), Z = m(ae, oe, U), Q = /* @__PURE__ */ p(n, {
+		direction: "stack",
+		width: v,
+		height: y,
+		enableGestures: !s.disabled,
+		onTouch: le,
+		alpha: s.disabled ? E : 1,
+		children: [/* @__PURE__ */ f(t, {
+			width: v,
+			height: y,
+			dependencies: [
+				v,
+				y,
+				X,
+				Z,
+				S
+			],
+			onDraw: (e) => {
+				let t = S / 2;
+				e.clear(), e.fillStyle(X, 1).fillRoundedRect(0, 0, v, y, M), S > 0 && e.lineStyle(S, Z, 1).strokeRoundedRect(t, t, v - S, y - S, Math.max(0, M - t));
+			}
+		}), /* @__PURE__ */ f(t, {
+			width: b,
+			height: b,
+			x: B,
+			y: y / 2,
+			dependencies: [
+				b,
+				C,
+				w,
+				T
+			],
+			onDraw: (e) => {
+				e.clear().fillStyle(C, 1).fillCircle(0, 0, j), T > 0 && e.lineStyle(T, w, 1).strokeCircle(0, 0, Math.max(0, j - T / 2));
+			}
+		})]
+	}), $ = s.label && A !== "none" ? /* @__PURE__ */ f(e, {
+		text: s.label,
+		style: g.labelStyle,
+		alpha: s.disabled ? E : 1
+	}) : null;
+	return !s.label || A === "none" ? /* @__PURE__ */ p(n, {
+		direction: "row",
+		alignItems: "center",
+		gap: k,
+		theme: _,
+		children: [
+			s.prefix,
+			Q,
+			s.suffix
+		]
+	}) : /* @__PURE__ */ p(n, {
+		direction: "row",
+		alignItems: "center",
+		gap: k,
+		theme: _,
+		children: [
+			A === "left" && $,
+			s.prefix,
+			Q,
+			s.suffix,
+			A === "right" && $
+		]
+	});
+}
+//#endregion
+export { h as Toggle };

package/dist/Toolbar.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Button.cjs`),r=require(`./Divider.cjs`),i=require(`./MenuButton.cjs`);let a=require(`@number10/jsx-core`),o=require(`@number10/jsx-core/jsx-runtime`);function s(e){return e.type===`separator`}function c(e){return e.type===`toggle`}function l(e){return e.type===`menu`}function u(e,t){return s(e)?e.id??`separator-${t}`:e.id}function d(e,t){if(t)return e.some(e=>!s(e)&&e.id===t)?t:void 0}function f(e){return e.find(e=>c(e)&&!!e.defaultPressed)?.id}function p(...e){let t=Object.assign({},...e.filter(Boolean));return Object.keys(t).length>0?t:void 0}function m(e){if(Array.isArray(e))return e.map(e=>m(e));if(!e||typeof e!=`object`||!(`type`in e))return e;let t=e,n={type:t.type};return t.props!==void 0&&(n.props={...t.props}),t.children!==void 0&&(n.children=t.children.map(e=>m(e))),t.__key!==void 0&&(n.__key=t.__key),t.__addConfig!==void 0&&(n.__addConfig={...t.__addConfig}),t.__memo!==void 0&&(n.__memo=t.__memo),t.__theme!==void 0&&(n.__theme=t.__theme),t.__staticChildren!==void 0&&(n.__staticChildren=t.__staticChildren),n}function h(h){let{items:g,activeId:_,defaultActiveId:v,onSelect:y,onToggle:b,orientation:x,density:S,showLabels:C,disabled:w=!1,labels:T,theme:E,alpha:D}=h,O=(0,a.useTheme)(),k=E?(0,a.mergeThemes)(O??{},E):O,{props:A,nestedTheme:j}=(0,a.resolveComponentTheme)({componentName:`Toolbar`,globalTheme:(0,a.getGlobalThemeDefaults)(),localTheme:k,knownComponents:a.KNOWN_COMPONENTS}),M=_!==void 0,[N,P]=(0,a.useState)(d(g,_??v)??f(g)),F=M?d(g,_):d(g,N);(0,a.useEffect)(()=>{!M&&N!==F&&P(F)},[M,N,F]);let I={...A.labels??{},...T??{}},L=x??A.orientation??`horizontal`,R=S??A.density??`normal`,z=A[R===`compact`?`compactItemWidth`:`itemWidth`]??A.itemWidth??42,B=A[R===`compact`?`compactItemHeight`:`itemHeight`]??A.itemHeight??36,V=(R===`compact`?A.compactButtonSize:void 0)??A.buttonSize??`small`,H=(R===`compact`?A.compactIconSize:void 0)??A.iconSize??18,U=C??R!==`compact`,W=U?void 0:z,G=w?A.disabledAlpha??.55:D,K=A.textStyle??{color:`#e2e8f0`,fontSize:`13px`},q=p(K,A.activeTextStyle),J=p(K,A.disabledTextStyle),Y=A.menuIndicatorStyle??{color:`#94a3b8`,fontSize:`10px`},X=L===`horizontal`?`row`:`column`,Z=L===`horizontal`?`vertical`:`horizontal`,Q=A.separatorLength??(L===`horizontal`?B:z),ee=e=>{if(!(w||e.disabled)){if(c(e)){let t=!((e.pressed??F===e.id)&&e.allowDeselect);!M&&e.pressed===void 0&&P(t?e.id:void 0),e.onToggle?.(t,e.id),b?.(e.id,t,e)}e.onSelect?.(e.id),y?.(e.id,e)}},$=(t,n,r)=>{if(t.children)return m(t.children);let i=t.showLabel??U,a=r?J:n?q:K;return(0,o.jsxs)(o.Fragment,{children:[t.icon?m(t.icon):null,i&&t.label?(0,o.jsx)(e.Text,{text:t.label,...a?{style:a}:{}}):null,l(t)?(0,o.jsx)(e.Text,{text:I.menuIndicator??`v`,...Y?{style:Y}:{}}):null]})},te=(e,d)=>{let f=u(e,d);if(s(e))return(0,o.jsx)(t.View,{alignItems:`center`,justifyContent:`center`,theme:j,children:(0,o.jsx)(r.Divider,{orientation:Z,length:e.length??Q,thickness:e.thickness??A.separatorThickness??1,color:A.separatorColor??4674921})},f);let p=w||!!e.disabled,m=c(e)?e.pressed??F===e.id:F===e.id,h=e.buttonVariant??(m?A.activeButtonVariant??`primary`:l(e)?A.menuButtonVariant??A.buttonVariant??`secondary`:A.buttonVariant??`secondary`),g=p?J:m?q:K,_=(0,a.mergeThemes)(j,{Button:{...g?{textStyle:g}:{},...H===void 0?{}:{iconSize:H}}});return l(e)?(0,o.jsx)(i.MenuButton,{items:e.items??[],onSelect:()=>{e.onSelect?.(e.id),y?.(e.id,e)},placement:L===`horizontal`?`bottom-start`:`right-start`,disabled:p,theme:_,trigger:({isOpen:r})=>(0,o.jsx)(n.Button,{variant:h,size:e.buttonSize??V,disabled:p,width:W,height:B,theme:_,children:(0,o.jsx)(t.View,{direction:`row`,alignItems:`center`,justifyContent:`center`,gap:A.gap??6,children:$(e,r,p)})})},f):(0,o.jsx)(n.Button,{width:W,height:B,variant:h,size:e.buttonSize??V,disabled:p,onClick:()=>ee(e),theme:_,children:(0,o.jsx)(t.View,{direction:`row`,alignItems:`center`,justifyContent:`center`,gap:A.gap??6,children:$(e,m,p)})},f)};return(0,o.jsx)(t.View,{direction:X,alignItems:`center`,gap:A.itemGap??6,padding:A.padding??4,backgroundColor:A.backgroundColor,backgroundAlpha:A.backgroundAlpha,borderColor:A.borderColor,borderWidth:A.borderWidth,cornerRadius:A.cornerRadius,...G===void 0?{}:{alpha:G},theme:j,children:g.map(te)})}function g(e){return(0,o.jsx)(h,{...e})}exports.ToolButtonGroup=g,exports.Toolbar=h,exports.getToolbarItemId=u,exports.isToolbarMenuItem=l,exports.isToolbarSeparatorItem=s,exports.isToolbarToggleItem=c,exports.resolveToolbarActiveId=d;

package/dist/Toolbar.d.ts

@@ -0,0 +1,129 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { ButtonSize, ButtonVariant } from './Button';
+import { ContextMenuItem } from './Popover';
+import { PortableComponentPartialTheme } from './theme-types';
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export type ToolbarDensity = 'compact' | 'normal';
+export type ToolbarItemType = 'action' | 'toggle' | 'separator' | 'menu';
+export interface ToolbarLabels {
+    overflow?: string;
+    menuIndicator?: string;
+}
+interface ToolbarBaseItem {
+    /** Unique item id. Required for action, toggle, and menu items. */
+    id?: string;
+    /** Item type. Omitted type defaults to action. */
+    type?: ToolbarItemType;
+    /** Visible or tooltip label. */
+    label?: string;
+    /** Optional icon/glyph content. */
+    icon?: VNodeLike;
+    /** Full custom button content. Takes precedence over icon and label. */
+    children?: VNodeLike;
+    /** Hide generated label text while keeping label available for tooltip metadata. */
+    showLabel?: boolean;
+    /** Disabled item state. */
+    disabled?: boolean;
+    /** Tooltip text (metadata, renderer may handle natively). */
+    tooltip?: string;
+    /** Item-specific button variant. */
+    buttonVariant?: ButtonVariant;
+    /** Item-specific button size. */
+    buttonSize?: ButtonSize;
+    /** Called before Toolbar onSelect. */
+    onSelect?: (id: string) => void;
+}
+export interface ToolbarActionItem extends ToolbarBaseItem {
+    type?: 'action';
+    id: string;
+}
+export interface ToolbarToggleItem extends ToolbarBaseItem {
+    type: 'toggle';
+    id: string;
+    /** Controlled pressed state for this toggle. */
+    pressed?: boolean;
+    /** Initial pressed state for uncontrolled toolbars. */
+    defaultPressed?: boolean;
+    /** Allow clicking an active toggle to clear it. */
+    allowDeselect?: boolean;
+    /** Called when the toggle pressed state changes. */
+    onToggle?: (pressed: boolean, id: string) => void;
+}
+export interface ToolbarMenuItem extends ToolbarBaseItem {
+    type: 'menu';
+    id: string;
+    /** Menu item payload rendered via MenuButton. */
+    items?: ContextMenuItem[];
+}
+export interface ToolbarSeparatorItem {
+    type: 'separator';
+    id?: string;
+    length?: number;
+    thickness?: number;
+}
+export type ToolbarItem = ToolbarActionItem | ToolbarToggleItem | ToolbarMenuItem | ToolbarSeparatorItem;
+export interface ToolbarProps {
+    /** Toolbar items. */
+    items: ToolbarItem[];
+    /** Active tool id in controlled mode. */
+    activeId?: string;
+    /** Initial active tool id in uncontrolled mode. */
+    defaultActiveId?: string;
+    /** Called when an action, toggle, or menu trigger is selected. */
+    onSelect?: (id: string, item: Exclude<ToolbarItem, ToolbarSeparatorItem>) => void;
+    /** Called when a toggle item changes pressed state. */
+    onToggle?: (id: string, pressed: boolean, item: ToolbarToggleItem) => void;
+    /** Layout orientation. */
+    orientation?: ToolbarOrientation;
+    /** Density preset. */
+    density?: ToolbarDensity;
+    /** Hide generated labels for compact icon-only toolbars. */
+    showLabels?: boolean;
+    /** Disable the entire toolbar. */
+    disabled?: boolean;
+    /** Localized labels. */
+    labels?: ToolbarLabels;
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'Toolbar'>;
+    /** Alpha override. */
+    alpha?: number;
+}
+/**
+ * Type guard for separator items.
+ */
+export declare function isToolbarSeparatorItem(item: ToolbarItem): item is ToolbarSeparatorItem;
+/**
+ * Type guard for toggle items.
+ */
+export declare function isToolbarToggleItem(item: ToolbarItem): item is ToolbarToggleItem;
+/**
+ * Type guard for menu items.
+ */
+export declare function isToolbarMenuItem(item: ToolbarItem): item is ToolbarMenuItem;
+/**
+ * Returns a stable id for any toolbar item.
+ * @param item - The toolbar item.
+ * @param index - The item's index in the list.
+ */
+export declare function getToolbarItemId(item: ToolbarItem, index: number): string;
+/**
+ * Validates and resolves the active tool id from the items list.
+ * @param items - The toolbar items.
+ * @param activeId - The candidate active id.
+ * @returns The active id if valid, undefined otherwise.
+ */
+export declare function resolveToolbarActiveId(items: ToolbarItem[], activeId?: string): string | undefined;
+/**
+ * Toolbar — compact action/toggle button group for editor tools, HUD controls, and debug panels.
+ * @param props - The component props.
+ * @returns The rendered VNode tree.
+ */
+export declare function Toolbar(props: ToolbarProps): VNodeLike;
+/**
+ * ToolButtonGroup — alias for Toolbar when a button-group name fits the UI better.
+ * @param props - Same as ToolbarProps.
+ * @returns The rendered VNode tree.
+ */
+export declare function ToolButtonGroup(props: ToolbarProps): VNodeLike;
+export {};
+//# sourceMappingURL=Toolbar.d.ts.map

package/dist/Toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../src/Toolbar.tsx"],"names":[],"mappings":"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"}

package/dist/Toolbar.js

@@ -0,0 +1,159 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { Button as n } from "./Button.js";
+import { Divider as r } from "./Divider.js";
+import { MenuButton as i } from "./MenuButton.js";
+import { KNOWN_COMPONENTS as a, getGlobalThemeDefaults as o, mergeThemes as s, resolveComponentTheme as c, useEffect as l, useState as u, useTheme as d } from "@number10/jsx-core";
+import { Fragment as f, jsx as p, jsxs as m } from "@number10/jsx-core/jsx-runtime";
+//#region src/Toolbar.tsx
+function h(e) {
+	return e.type === "separator";
+}
+function g(e) {
+	return e.type === "toggle";
+}
+function _(e) {
+	return e.type === "menu";
+}
+function v(e, t) {
+	return h(e) ? e.id ?? `separator-${t}` : e.id;
+}
+function y(e, t) {
+	if (t) return e.some((e) => !h(e) && e.id === t) ? t : void 0;
+}
+function b(e) {
+	return e.find((e) => g(e) && !!e.defaultPressed)?.id;
+}
+function x(...e) {
+	let t = Object.assign({}, ...e.filter(Boolean));
+	return Object.keys(t).length > 0 ? t : void 0;
+}
+function S(e) {
+	if (Array.isArray(e)) return e.map((e) => S(e));
+	if (!e || typeof e != "object" || !("type" in e)) return e;
+	let t = e, n = { type: t.type };
+	return t.props !== void 0 && (n.props = { ...t.props }), t.children !== void 0 && (n.children = t.children.map((e) => S(e))), t.__key !== void 0 && (n.__key = t.__key), t.__addConfig !== void 0 && (n.__addConfig = { ...t.__addConfig }), t.__memo !== void 0 && (n.__memo = t.__memo), t.__theme !== void 0 && (n.__theme = t.__theme), t.__staticChildren !== void 0 && (n.__staticChildren = t.__staticChildren), n;
+}
+function C(C) {
+	let { items: w, activeId: T, defaultActiveId: E, onSelect: D, onToggle: ee, orientation: te, density: ne, showLabels: re, disabled: O = !1, labels: ie, theme: k, alpha: ae } = C, A = d(), j = k ? s(A ?? {}, k) : A, { props: M, nestedTheme: N } = c({
+		componentName: "Toolbar",
+		globalTheme: o(),
+		localTheme: j,
+		knownComponents: a
+	}), P = T !== void 0, [F, I] = u(y(w, T ?? E) ?? b(w)), L = P ? y(w, T) : y(w, F);
+	l(() => {
+		!P && F !== L && I(L);
+	}, [
+		P,
+		F,
+		L
+	]);
+	let R = {
+		...M.labels ?? {},
+		...ie ?? {}
+	}, z = te ?? M.orientation ?? "horizontal", B = ne ?? M.density ?? "normal", V = M[B === "compact" ? "compactItemWidth" : "itemWidth"] ?? M.itemWidth ?? 42, H = M[B === "compact" ? "compactItemHeight" : "itemHeight"] ?? M.itemHeight ?? 36, U = (B === "compact" ? M.compactButtonSize : void 0) ?? M.buttonSize ?? "small", W = (B === "compact" ? M.compactIconSize : void 0) ?? M.iconSize ?? 18, G = re ?? B !== "compact", K = G ? void 0 : V, q = O ? M.disabledAlpha ?? .55 : ae, J = M.textStyle ?? {
+		color: "#e2e8f0",
+		fontSize: "13px"
+	}, Y = x(J, M.activeTextStyle), X = x(J, M.disabledTextStyle), Z = M.menuIndicatorStyle ?? {
+		color: "#94a3b8",
+		fontSize: "10px"
+	}, oe = z === "horizontal" ? "row" : "column", Q = z === "horizontal" ? "vertical" : "horizontal", se = M.separatorLength ?? (z === "horizontal" ? H : V), ce = (e) => {
+		if (!(O || e.disabled)) {
+			if (g(e)) {
+				let t = !((e.pressed ?? L === e.id) && e.allowDeselect);
+				!P && e.pressed === void 0 && I(t ? e.id : void 0), e.onToggle?.(t, e.id), ee?.(e.id, t, e);
+			}
+			e.onSelect?.(e.id), D?.(e.id, e);
+		}
+	}, $ = (t, n, r) => {
+		if (t.children) return S(t.children);
+		let i = t.showLabel ?? G, a = r ? X : n ? Y : J;
+		return /* @__PURE__ */ m(f, { children: [
+			t.icon ? S(t.icon) : null,
+			i && t.label ? /* @__PURE__ */ p(e, {
+				text: t.label,
+				...a ? { style: a } : {}
+			}) : null,
+			_(t) ? /* @__PURE__ */ p(e, {
+				text: R.menuIndicator ?? "v",
+				...Z ? { style: Z } : {}
+			}) : null
+		] });
+	}, le = (e, a) => {
+		let o = v(e, a);
+		if (h(e)) return /* @__PURE__ */ p(t, {
+			alignItems: "center",
+			justifyContent: "center",
+			theme: N,
+			children: /* @__PURE__ */ p(r, {
+				orientation: Q,
+				length: e.length ?? se,
+				thickness: e.thickness ?? M.separatorThickness ?? 1,
+				color: M.separatorColor ?? 4674921
+			})
+		}, o);
+		let c = O || !!e.disabled, l = g(e) ? e.pressed ?? L === e.id : L === e.id, u = e.buttonVariant ?? (l ? M.activeButtonVariant ?? "primary" : _(e) ? M.menuButtonVariant ?? M.buttonVariant ?? "secondary" : M.buttonVariant ?? "secondary"), d = c ? X : l ? Y : J, f = s(N, { Button: {
+			...d ? { textStyle: d } : {},
+			...W === void 0 ? {} : { iconSize: W }
+		} });
+		return _(e) ? /* @__PURE__ */ p(i, {
+			items: e.items ?? [],
+			onSelect: () => {
+				e.onSelect?.(e.id), D?.(e.id, e);
+			},
+			placement: z === "horizontal" ? "bottom-start" : "right-start",
+			disabled: c,
+			theme: f,
+			trigger: ({ isOpen: r }) => /* @__PURE__ */ p(n, {
+				variant: u,
+				size: e.buttonSize ?? U,
+				disabled: c,
+				width: K,
+				height: H,
+				theme: f,
+				children: /* @__PURE__ */ p(t, {
+					direction: "row",
+					alignItems: "center",
+					justifyContent: "center",
+					gap: M.gap ?? 6,
+					children: $(e, r, c)
+				})
+			})
+		}, o) : /* @__PURE__ */ p(n, {
+			width: K,
+			height: H,
+			variant: u,
+			size: e.buttonSize ?? U,
+			disabled: c,
+			onClick: () => ce(e),
+			theme: f,
+			children: /* @__PURE__ */ p(t, {
+				direction: "row",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: M.gap ?? 6,
+				children: $(e, l, c)
+			})
+		}, o);
+	};
+	return /* @__PURE__ */ p(t, {
+		direction: oe,
+		alignItems: "center",
+		gap: M.itemGap ?? 6,
+		padding: M.padding ?? 4,
+		backgroundColor: M.backgroundColor,
+		backgroundAlpha: M.backgroundAlpha,
+		borderColor: M.borderColor,
+		borderWidth: M.borderWidth,
+		cornerRadius: M.cornerRadius,
+		...q === void 0 ? {} : { alpha: q },
+		theme: N,
+		children: w.map(le)
+	});
+}
+function w(e) {
+	return /* @__PURE__ */ p(C, { ...e });
+}
+//#endregion
+export { w as ToolButtonGroup, C as Toolbar, v as getToolbarItemId, _ as isToolbarMenuItem, h as isToolbarSeparatorItem, g as isToolbarToggleItem, y as resolveToolbarActiveId };

package/dist/Toolbar.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toolbar.test.d.ts.map

package/dist/Toolbar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.test.d.ts","sourceRoot":"","sources":["../src/Toolbar.test.tsx"],"names":[],"mappings":""}

package/dist/TransformOriginView.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let t=require(`@number10/jsx-core/jsx-runtime`);function n({originX:n=.5,originY:r=.5,width:i,height:a,x:o=0,y:s=0,children:c,rotation:l,scale:u,scaleX:d,scaleY:f,backgroundColor:p,backgroundAlpha:m,cornerRadius:h,borderWidth:g,borderColor:_,borderAlpha:v,...y}){if(typeof i!=`number`||typeof a!=`number`)throw Error(`TransformOriginView requires numeric width and height`);let b=i*n,x=a*r,S={};return l!==void 0&&(S.rotation=l),u!==void 0&&(S.scale=u),d!==void 0&&(S.scaleX=d),f!==void 0&&(S.scaleY=f),p!==void 0&&(S.backgroundColor=p),m!==void 0&&(S.backgroundAlpha=m),h!==void 0&&(S.cornerRadius=h),g!==void 0&&(S.borderWidth=g),_!==void 0&&(S.borderColor=_),v!==void 0&&(S.borderAlpha=v),(0,t.jsx)(e.View,{x:o,y:s,width:i,height:a,padding:0,direction:`stack`,...y,children:(0,t.jsx)(e.View,{x:b,y:x,width:i,height:a,padding:0,direction:`stack`,...S,children:(0,t.jsx)(e.View,{x:-b,y:-x,width:i,height:a,padding:0,direction:`stack`,backgroundAlpha:0,children:c})})})}exports.TransformOriginView=n;