@number10/jsx-components 5.0.0

package/dist/Joystick.js

@@ -0,0 +1,185 @@
+import { VectorDrawContent as e } from "./primitives/VectorDrawContent.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { createTween as n, useRef as r, useState as i, useSurface as a } from "@number10/jsx-core";
+import { jsx as o, jsxs as s } from "@number10/jsx-core/jsx-runtime";
+//#region src/Joystick.tsx
+function c(t, n) {
+	function r(t, n = 65280) {
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(n, .1).fillCircle(0, 0, t + 10), e.fillStyle(0, .4).fillCircle(0, 0, t), e.lineStyle(3, n, 1).strokeCircle(0, 0, t), e.lineStyle(1, n, .5).strokeCircle(0, 0, t - 5);
+			for (let r = 0; r < 4; r++) {
+				let i = r * 90 * Math.PI / 180;
+				e.lineStyle(2, n, .7).lineBetween(Math.cos(i) * (t - 15), Math.sin(i) * (t - 15), Math.cos(i) * (t - 5), Math.sin(i) * (t - 5));
+			}
+		} });
+	}
+	function i(t, n = 65280) {
+		let r = t * .4;
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(n, .2).fillCircle(0, 0, r + 5), e.fillStyle(n, .8).fillCircle(0, 0, r), e.lineStyle(2, n, 1).strokeCircle(0, 0, r), e.lineStyle(2, 0, .8), e.moveTo(0, -r * .6).lineTo(0, r * .6), e.moveTo(-r * .6, 0).lineTo(r * .6, 0), e.strokePath();
+		} });
+	}
+	function a(t, n = 16711680) {
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(0, .3).fillCircle(0, 0, t);
+			for (let r = 0; r < 3; r++) e.lineStyle(2, n, .6 - r * .15).strokeCircle(0, 0, t - r * 20);
+			e.lineStyle(1, n, .5), e.moveTo(-t, 0).lineTo(t, 0), e.moveTo(0, -t).lineTo(0, t), e.strokePath(), e.fillStyle(n, .8).fillCircle(0, 0, 5);
+		} });
+	}
+	function s(t, n = 16711680) {
+		let r = t * .35;
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(n, .7).fillCircle(0, 0, r), e.fillStyle(16777215, .9).fillCircle(0, 0, r * .5), e.fillStyle(n, 1).fillCircle(0, 0, r * .2), e.lineStyle(3, n, 1), e.beginPath(), e.moveTo(0, -r).lineTo(r * .3, -r * .6).lineTo(-r * .3, -r * .6), e.closePath().fillPath();
+		} });
+	}
+	function c(t, n = 16777215) {
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(n, .15).fillCircle(0, 0, t), e.fillStyle(n, .3).fillCircle(-t * .3, -t * .3, t * .4), e.lineStyle(2, n, .5).strokeCircle(0, 0, t), e.lineStyle(1, n, .3).strokeCircle(0, 0, t - 3);
+		} });
+	}
+	function l(t, n = 16777215) {
+		let r = t * .4;
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(0, .2).fillCircle(r * .1, r * .1, r), e.fillStyle(n, .4).fillCircle(0, 0, r), e.fillStyle(n, .6).fillCircle(-r * .3, -r * .3, r * .4), e.lineStyle(2, n, .7).strokeCircle(0, 0, r);
+		} });
+	}
+	function u(t, n = 65280) {
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(1710618, .8).fillCircle(0, 0, t), e.lineStyle(1, n, .3);
+			for (let n = -t; n <= t; n += 20) e.moveTo(-t, n).lineTo(t, n), e.moveTo(n, -t).lineTo(n, t);
+			e.strokePath(), e.lineStyle(2, n, .6), e.strokeCircle(0, 0, t), e.strokeCircle(0, 0, t * .66), e.strokeCircle(0, 0, t * .33);
+			let r = [-t * .7, t * .7];
+			e.lineStyle(3, n, .8), r.forEach((t) => r.forEach((n) => {
+				e.moveTo(t - 10, n).lineTo(t + 10, n), e.moveTo(t, n - 10).lineTo(t, n + 10);
+			})), e.strokePath();
+		} });
+	}
+	function d(t, n = 65280) {
+		let r = t * .3;
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(n, .9).fillCircle(0, 0, r), e.fillStyle(0, 1), e.beginPath(), e.moveTo(0, -r).lineTo(r * .5, r * .3).lineTo(-r * .5, r * .3), e.closePath().fillPath(), e.lineStyle(2, 0, .8).strokeCircle(0, 0, r);
+		} });
+	}
+	function f(t, n = 65280) {
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.fillStyle(0, .25).lineStyle(1, n), e.fillCircle(0, 0, t).strokeCircle(0, 0, t);
+		} });
+	}
+	function p(t, n = 65280) {
+		let r = t * .2;
+		return /* @__PURE__ */ o(e, { onDraw: (e) => {
+			e.lineStyle(2, 0, 1), e.moveTo(0, -r).lineTo(0, r), e.moveTo(-r, 0).lineTo(r, 0), e.strokePath(), e.lineStyle(2, n, .75).strokeCircle(0, 0, r * 1.1);
+		} });
+	}
+	let m = t == null ? "default" : t.theme, h = (t == null ? 65280 : t.tint) ?? 65280;
+	switch (m) {
+		case "neon": return {
+			base: r(n, h),
+			thumb: i(n, h),
+			rotateThumb: !1
+		};
+		case "target": return {
+			base: a(n, h),
+			thumb: s(n, h),
+			rotateThumb: !0
+		};
+		case "glass": return {
+			base: c(n, h),
+			thumb: l(n, h),
+			rotateThumb: !1
+		};
+		case "military": return {
+			base: u(n, h),
+			thumb: d(n, h),
+			rotateThumb: !0
+		};
+		default: return {
+			base: f(n, h),
+			thumb: p(n, h),
+			rotateThumb: !1
+		};
+	}
+}
+function l(e) {
+	let [l, u] = i({
+		x: 0,
+		y: 0
+	}), [d, f] = i(0), [p, m] = i({
+		width: 0,
+		height: 0
+	}), h = r(!1), g = r(null), _ = r(!1), v = r(null), y = a()?.scheduler, b = typeof e.width == "number" ? e.width : 200, x = typeof e.height == "number" ? e.height : 200, S = {
+		x: b / 2,
+		y: x / 2
+	}, C = Math.min(b, x) / 2;
+	p.width === 0 && Promise.resolve().then(() => {
+		m({
+			width: b,
+			height: x
+		}), u(S);
+	});
+	let w = e.base != null && e.thumb ? {
+		base: e.base,
+		thumb: e.thumb,
+		rotateThumb: e.rotateThumb ?? !1
+	} : c(e.joystickTheme, C), T = (e) => {
+		let t = e;
+		return t ? t.pointerId ?? t.id ?? null : null;
+	}, E = (t) => {
+		t.stopPropagation();
+		let r = T(t.pointer);
+		if (_.current && r !== v.current) return;
+		if (t.state === "start" && (h.current = !1, _.current = !0, v.current = r), t.state === "end") {
+			_.current = !1, v.current = null, g.current &&= (g.current.stop(), null), y ? g.current = n({
+				x: l.x,
+				y: l.y,
+				angle: d
+			}, {
+				to: {
+					x: S.x,
+					y: S.y,
+					angle: 0
+				},
+				duration: 150,
+				onUpdate: (e) => {
+					u({
+						x: e.x,
+						y: e.y
+					}), f(e.angle ?? 0);
+				},
+				onComplete: () => {
+					g.current = null, e.onMove?.(!1, 0, 0);
+				}
+			}, y) : (u(S), f(0), e.onMove?.(!1, 0, 0));
+			return;
+		}
+		if (!_.current) return;
+		let i = t.localX - S.x, a = t.localY - S.y, o = Math.sqrt(i * i + a * a), s = C * .6, c = Math.min(o, s), p = Math.atan2(a, i), m = (p * 180 / Math.PI + 360) % 360, b = o > 0 ? Math.min(o / s, 1) : 0;
+		u({
+			x: S.x + (o > 0 ? c / o * i : 0),
+			y: S.y + (o > 0 ? c / o * a : 0)
+		}), (e.rotateThumb ?? w.rotateThumb) && f(p);
+		let x = e.minForce ?? .1;
+		b > x && (h.current = !0), e.onMove?.(b > x || h.current, m, b);
+	};
+	return /* @__PURE__ */ s(t, {
+		width: e.width,
+		height: e.height,
+		direction: "stack",
+		enableGestures: !0,
+		onTouchMove: E,
+		onTouchOutside: E,
+		children: [/* @__PURE__ */ o(t, {
+			x: S.x,
+			y: S.y,
+			children: w.base
+		}), /* @__PURE__ */ o(t, {
+			x: l.x,
+			y: l.y,
+			...w.rotateThumb ? { rotation: d } : {},
+			children: w.thumb
+		})]
+	});
+}
+//#endregion
+export { l as Joystick };

package/dist/ListBox.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./ScrollView.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);function a(e,t){if(t!==void 0)return e.find(e=>e.value===t)}function o(e,t,n){if(t!==void 0)return a(e,t)?.value??``;let r=a(e,n);return r?r.value:e.find(e=>!e.disabled)?.value??e[0]?.value??``}function s(...e){return Object.assign({},...e.filter(Boolean))}function c(c){let{items:l,value:u,defaultValue:d,onChange:f,renderItem:p,hoverable:m=!1,scrollViewProps:h,labels:g,disabled:_=!1,maxVisibleItems:v,theme:y,alpha:b,...x}=c,S=(0,r.useTheme)(),C=y?(0,r.mergeThemes)(S??{},y):S,{props:w,nestedTheme:T}=(0,r.resolveComponentTheme)({componentName:`ListBox`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:C,knownComponents:r.KNOWN_COMPONENTS}),[E,D]=(0,r.useState)(void 0),O=u!==void 0,[k,A]=(0,r.useState)(o(l,u,d)),j=O?o(l,u):o(l,k);(0,r.useEffect)(()=>{!O&&k!==j&&A(j)},[O,k,j]);let M={...w.labels??{},...g??{}},N=s({color:`#e0e7ff`,fontSize:`14px`},w.textStyle),P=s(N,w.selectedTextStyle),F=s(N,w.disabledTextStyle),I=w.emptyStyle??{color:`#6b7280`,fontSize:`14px`},L=_?w.disabledAlpha??.5:b,R=e=>{let t=a(l,e);!t||t.disabled||_||(O||A(e),f?.(e))},z=w.itemHeight??36,B=w.itemGap??1,V=l.length*(z+B)-(l.length>0?B:0),H=v&&v>0?Math.min(V,v*(z+B)):V,U=(n,a)=>{let o=n.value===j,c=_||!!n.disabled,l=m?E===n.value:!1,u=!c,d=s({height:z},w.itemStyle??{},m&&l&&!o&&!c?w.itemHoverStyle??{}:{},o?w.itemSelectedStyle??{}:{},c?w.itemDisabledStyle??{}:{}),f=c?F:o?P:N,h=(0,r.mergeThemes)(T,{Text:f?{style:f}:{}}),g=p?.({item:n,selected:o,disabled:c,hovered:l,index:a,...f?{textStyle:f}:{}}),v=m&&u&&(w.itemHoverStyle||w.itemSelectedStyle)?{onHoverStart:()=>D(n.value),onHoverEnd:()=>D(e=>e===n.value?void 0:e)}:{};return(0,i.jsx)(t.View,{width:`fill`,direction:`row`,alignItems:`center`,padding:w.itemPadding,cornerRadius:w.itemCornerRadius,...d,enableGestures:u,onTouch:()=>R(n.value),...v,theme:h,children:g??(0,i.jsx)(e.Text,{text:n.label??n.value,...f?{style:f}:{}})},n.value)},W=M.empty??`No items`;return(0,i.jsx)(t.View,{...x,...w,...L===void 0?{}:{alpha:L},theme:T,overflow:`hidden`,children:l.length===0?(0,i.jsx)(t.View,{alignItems:`center`,justifyContent:`center`,height:z*3,children:(0,i.jsx)(e.Text,{text:W,style:I})}):(0,i.jsx)(n.ScrollView,{height:H>0?H:void 0,width:`fill`,theme:T,...h,children:(0,i.jsx)(t.View,{direction:`column`,gap:B,width:`fill`,theme:T,children:l.map(U)})})})}exports.ListBox=c,exports.findListBoxItem=a,exports.resolveListBoxValue=o;

package/dist/ListBox.d.ts

@@ -0,0 +1,67 @@
+import { PortableTextStyle, VNodeLike } from '@number10/jsx-core';
+import { ScrollViewProps } from './ScrollView';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface ListBoxLabels {
+    empty?: string;
+}
+export interface ListBoxItem {
+    /** Unique item value used for selection. */
+    value: string;
+    /** Visible label. Falls back to value when no children/renderItem provided. */
+    label?: string;
+    /** Disabled items cannot be selected. */
+    disabled?: boolean;
+}
+export interface ListBoxItemRenderProps {
+    item: ListBoxItem;
+    selected: boolean;
+    disabled: boolean;
+    hovered: boolean;
+    index: number;
+    textStyle?: PortableTextStyle;
+}
+export interface ListBoxProps {
+    /** Unique key for VDOM identification. */
+    key?: string | number | undefined;
+    /** Available items. */
+    items: ListBoxItem[];
+    /** Selected value in controlled mode. */
+    value?: string;
+    /** Initial selected value in uncontrolled mode. */
+    defaultValue?: string;
+    /** Called when a selectable item is selected. */
+    onChange?: (value: string) => void;
+    /** Render custom item content. */
+    renderItem?: (props: ListBoxItemRenderProps) => VNodeLike;
+    /** Enable hover state tracking and hover styling. Default true. */
+    hoverable?: boolean;
+    /** Localized labels. */
+    labels?: ListBoxLabels;
+    /** Disabled state for the whole control. */
+    disabled?: boolean;
+    /** Maximum visible items before scrolling. If unset, the list grows to fit. */
+    maxVisibleItems?: number;
+    /** Props forwarded to the underlying ScrollView. */
+    scrollViewProps?: Pick<ScrollViewProps, 'sliderSize' | 'showVerticalSlider' | 'showHorizontalSlider' | 'momentum' | 'snap' | 'snapAlignment' | 'snapThreshold' | 'onSnap'>;
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'ListBox'>;
+    /** Alpha transparency. */
+    alpha?: number;
+    /** Width. */
+    width?: import('@number10/jsx-core').SizeValue | undefined;
+    /** Height. */
+    height?: import('@number10/jsx-core').SizeValue | undefined;
+}
+/**
+ * Finds an item by its value in the items array.
+ */
+export declare function findListBoxItem(items: ListBoxItem[], value: string | undefined): ListBoxItem | undefined;
+/**
+ * Resolves the effective value considering controlled/uncontrolled mode and disabled items.
+ */
+export declare function resolveListBoxValue(items: ListBoxItem[], value?: string, defaultValue?: string): string;
+/**
+ * ListBox — scrollable single-selection list.
+ */
+export declare function ListBox(props: ListBoxProps): VNodeLike;
+//# sourceMappingURL=ListBox.d.ts.map

package/dist/ListBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../src/ListBox.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAWtE,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,KAAK,EAAgB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAIhF,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,WAAW,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,iBAAiB,CAAA;CAC9B;AAED,MAAM,WAAW,YAAY;IAC3B,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,uBAAuB;IACvB,KAAK,EAAE,WAAW,EAAE,CAAA;IACpB,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,kCAAkC;IAClC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,SAAS,CAAA;IACzD,mEAAmE;IACnE,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wBAAwB;IACxB,MAAM,CAAC,EAAE,aAAa,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,oDAAoD;IACpD,eAAe,CAAC,EAAE,IAAI,CACpB,eAAe,EACb,YAAY,GACZ,oBAAoB,GACpB,sBAAsB,GACtB,UAAU,GACV,MAAM,GACN,eAAe,GACf,eAAe,GACf,QAAQ,CACX,CAAA;IACD,uBAAuB;IACvB,KAAK,CAAC,EAAE,6BAA6B,CAAC,SAAS,CAAC,CAAA;IAChD,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa;IACb,KAAK,CAAC,EAAE,OAAO,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAA;IAC1D,cAAc;IACd,MAAM,CAAC,EAAE,OAAO,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAA;CAC5D;AAID;;GAEG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,EAAE,MAAM,GAAG,SAAS,GACxB,WAAW,GAAG,SAAS,CAGzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,WAAW,EAAE,EACpB,KAAK,CAAC,EAAE,MAAM,EACd,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CASR;AAQD;;GAEG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,SAAS,CA0LtD"}

package/dist/ListBox.js

@@ -0,0 +1,104 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { ScrollView as n } from "./ScrollView.js";
+import { KNOWN_COMPONENTS as r, getGlobalThemeDefaults as i, mergeThemes as a, resolveComponentTheme as o, useEffect as s, useState as c, useTheme as l } from "@number10/jsx-core";
+import { jsx as u } from "@number10/jsx-core/jsx-runtime";
+//#region src/ListBox.tsx
+function d(e, t) {
+	if (t !== void 0) return e.find((e) => e.value === t);
+}
+function f(e, t, n) {
+	if (t !== void 0) return d(e, t)?.value ?? "";
+	let r = d(e, n);
+	return r ? r.value : e.find((e) => !e.disabled)?.value ?? e[0]?.value ?? "";
+}
+function p(...e) {
+	return Object.assign({}, ...e.filter(Boolean));
+}
+function m(m) {
+	let { items: h, value: g, defaultValue: _, onChange: v, renderItem: y, hoverable: b = !1, scrollViewProps: x, labels: S, disabled: C = !1, maxVisibleItems: w, theme: T, alpha: E, ...D } = m, O = l(), k = T ? a(O ?? {}, T) : O, { props: A, nestedTheme: j } = o({
+		componentName: "ListBox",
+		globalTheme: i(),
+		localTheme: k,
+		knownComponents: r
+	}), [M, N] = c(void 0), P = g !== void 0, [F, I] = c(f(h, g, _)), L = P ? f(h, g) : f(h, F);
+	s(() => {
+		!P && F !== L && I(L);
+	}, [
+		P,
+		F,
+		L
+	]);
+	let R = {
+		...A.labels ?? {},
+		...S ?? {}
+	}, z = p({
+		color: "#e0e7ff",
+		fontSize: "14px"
+	}, A.textStyle), B = p(z, A.selectedTextStyle), V = p(z, A.disabledTextStyle), H = A.emptyStyle ?? {
+		color: "#6b7280",
+		fontSize: "14px"
+	}, U = C ? A.disabledAlpha ?? .5 : E, W = (e) => {
+		let t = d(h, e);
+		!t || t.disabled || C || (P || I(e), v?.(e));
+	}, G = A.itemHeight ?? 36, K = A.itemGap ?? 1, q = h.length * (G + K) - (h.length > 0 ? K : 0), J = w && w > 0 ? Math.min(q, w * (G + K)) : q, Y = (n, r) => {
+		let i = n.value === L, o = C || !!n.disabled, s = b ? M === n.value : !1, c = !o, l = p({ height: G }, A.itemStyle ?? {}, b && s && !i && !o ? A.itemHoverStyle ?? {} : {}, i ? A.itemSelectedStyle ?? {} : {}, o ? A.itemDisabledStyle ?? {} : {}), d = o ? V : i ? B : z, f = a(j, { Text: d ? { style: d } : {} }), m = y?.({
+			item: n,
+			selected: i,
+			disabled: o,
+			hovered: s,
+			index: r,
+			...d ? { textStyle: d } : {}
+		}), h = b && c && (A.itemHoverStyle || A.itemSelectedStyle) ? {
+			onHoverStart: () => N(n.value),
+			onHoverEnd: () => N((e) => e === n.value ? void 0 : e)
+		} : {};
+		return /* @__PURE__ */ u(t, {
+			width: "fill",
+			direction: "row",
+			alignItems: "center",
+			padding: A.itemPadding,
+			cornerRadius: A.itemCornerRadius,
+			...l,
+			enableGestures: c,
+			onTouch: () => W(n.value),
+			...h,
+			theme: f,
+			children: m ?? /* @__PURE__ */ u(e, {
+				text: n.label ?? n.value,
+				...d ? { style: d } : {}
+			})
+		}, n.value);
+	}, X = R.empty ?? "No items";
+	return /* @__PURE__ */ u(t, {
+		...D,
+		...A,
+		...U === void 0 ? {} : { alpha: U },
+		theme: j,
+		overflow: "hidden",
+		children: h.length === 0 ? /* @__PURE__ */ u(t, {
+			alignItems: "center",
+			justifyContent: "center",
+			height: G * 3,
+			children: /* @__PURE__ */ u(e, {
+				text: X,
+				style: H
+			})
+		}) : /* @__PURE__ */ u(n, {
+			height: J > 0 ? J : void 0,
+			width: "fill",
+			theme: j,
+			...x,
+			children: /* @__PURE__ */ u(t, {
+				direction: "column",
+				gap: K,
+				width: "fill",
+				theme: j,
+				children: h.map(Y)
+			})
+		})
+	});
+}
+//#endregion
+export { m as ListBox, d as findListBoxItem, f as resolveListBoxValue };

package/dist/ListBox.test.d.ts

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

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

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

package/dist/MenuButton.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(`./Popover.cjs`);let i=require(`@number10/jsx-core`),a=require(`@number10/jsx-core/jsx-runtime`);function o(o){let{items:s,onSelect:c,children:l,label:u,icon:d,trigger:f,open:p,defaultOpen:m,onOpenChange:h,placement:g,width:_,buttonVariant:v,buttonSize:y,buttonProps:b,disabled:x=!1,theme:S,...C}=o,w=(0,i.useTheme)(),T=S?(0,i.mergeThemes)(w??{},S):w,{props:E,nestedTheme:D}=(0,i.resolveComponentTheme)({componentName:`MenuButton`,globalTheme:(0,i.getGlobalThemeDefaults)(),localTheme:T,knownComponents:i.KNOWN_COMPONENTS}),[O,k]=(0,i.useState)(m??!1),A=p!==void 0,j=A?p:O,M=e=>{A||k(e),h?.(e)},N=e=>{c?.(e)},P=()=>{if(f)return f({isOpen:j,disabled:x});if(l!==void 0)return(0,a.jsx)(n.Button,{...b,variant:v??E.buttonVariant??`secondary`,size:y??E.buttonSize??`medium`,disabled:x,theme:D,children:l});let r=d!==void 0,i=u!==void 0;return(0,a.jsx)(n.Button,{...b,variant:v??E.buttonVariant??`secondary`,size:y??E.buttonSize??`medium`,disabled:x,label:r?void 0:u,theme:D,children:r&&(0,a.jsxs)(t.View,{direction:`row`,alignItems:`center`,justifyContent:`center`,gap:E.iconGap??8,children:[d,i&&(0,a.jsx)(e.Text,{text:String(u)})]})})},F=_??E.width;return(0,a.jsx)(r.ContextMenu,{...C,items:s,onSelect:N,isOpen:j,onOpenChange:M,placement:g??E.placement??`bottom-start`,...F===void 0?{}:{width:F},disabled:x,theme:D,trigger:P()})}exports.MenuButton=o;

package/dist/MenuButton.d.ts

@@ -0,0 +1,33 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { ButtonProps, ButtonSize, ButtonVariant } from './Button';
+import { ContextMenuItem, ContextMenuProps } from './Popover';
+export interface MenuButtonTriggerRenderProps {
+    isOpen: boolean;
+    disabled: boolean;
+}
+export interface MenuButtonProps extends Omit<ContextMenuProps, 'items' | 'onSelect' | 'trigger' | 'isOpen'> {
+    /** Unique key for VDOM identification. */
+    key?: string | number | undefined;
+    /** Menu items shown when the button is clicked. */
+    items: ContextMenuItem[];
+    /** Called when an item is selected. */
+    onSelect?: (item: ContextMenuItem) => void;
+    /** Button content. Takes precedence over icon/label convenience rendering. */
+    children?: VNodeLike | undefined;
+    /** Convenience label for the default button. */
+    label?: string | number | undefined;
+    /** Optional icon/glyph content. */
+    icon?: VNodeLike;
+    /** Custom trigger renderer. Replaces the default Button. */
+    trigger?: (props: MenuButtonTriggerRenderProps) => VNodeLike;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Button visual variant. */
+    buttonVariant?: ButtonVariant;
+    /** Button size variant. */
+    buttonSize?: ButtonSize;
+    /** Additional props for the generated default Button. */
+    buttonProps?: Omit<ButtonProps, 'children' | 'label' | 'text' | 'onClick' | 'disabled' | 'variant' | 'size' | 'theme'>;
+}
+export declare function MenuButton(props: MenuButtonProps): VNodeLike;
+//# sourceMappingURL=MenuButton.d.ts.map

package/dist/MenuButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.d.ts","sourceRoot":"","sources":["../src/MenuButton.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAUnD,OAAO,EAAU,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,EAAe,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAOpF,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,OAAO,CAAA;IACf,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,gBAAgB,EAChB,OAAO,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAC5C;IACC,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,mDAAmD;IACnD,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAChC,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACnC,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IAC5D,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,6BAA6B;IAC7B,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,2BAA2B;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,yDAAyD;IACzD,WAAW,CAAC,EAAE,IAAI,CAChB,WAAW,EACX,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CACtF,CAAA;CACF;AAMD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,SAAS,CA2G5D"}

package/dist/MenuButton.js

@@ -0,0 +1,63 @@
+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 { ContextMenu as r } from "./Popover.js";
+import { KNOWN_COMPONENTS as i, getGlobalThemeDefaults as a, mergeThemes as o, resolveComponentTheme as s, useState as c, useTheme as l } from "@number10/jsx-core";
+import { jsx as u, jsxs as d } from "@number10/jsx-core/jsx-runtime";
+//#region src/MenuButton.tsx
+function f(f) {
+	let { items: p, onSelect: m, children: h, label: g, icon: _, trigger: v, open: y, defaultOpen: b, onOpenChange: x, placement: S, width: C, buttonVariant: w, buttonSize: T, buttonProps: E, disabled: D = !1, theme: O, ...k } = f, A = l(), j = O ? o(A ?? {}, O) : A, { props: M, nestedTheme: N } = s({
+		componentName: "MenuButton",
+		globalTheme: a(),
+		localTheme: j,
+		knownComponents: i
+	}), [P, F] = c(b ?? !1), I = y !== void 0, L = I ? y : P, R = (e) => {
+		I || F(e), x?.(e);
+	}, z = (e) => {
+		m?.(e);
+	}, B = () => {
+		if (v) return v({
+			isOpen: L,
+			disabled: D
+		});
+		if (h !== void 0) return /* @__PURE__ */ u(n, {
+			...E,
+			variant: w ?? M.buttonVariant ?? "secondary",
+			size: T ?? M.buttonSize ?? "medium",
+			disabled: D,
+			theme: N,
+			children: h
+		});
+		let r = _ !== void 0, i = g !== void 0;
+		return /* @__PURE__ */ u(n, {
+			...E,
+			variant: w ?? M.buttonVariant ?? "secondary",
+			size: T ?? M.buttonSize ?? "medium",
+			disabled: D,
+			label: r ? void 0 : g,
+			theme: N,
+			children: r && /* @__PURE__ */ d(t, {
+				direction: "row",
+				alignItems: "center",
+				justifyContent: "center",
+				gap: M.iconGap ?? 8,
+				children: [_, i && /* @__PURE__ */ u(e, { text: String(g) })]
+			})
+		});
+	}, V = C ?? M.width;
+	return /* @__PURE__ */ u(r, {
+		...k,
+		items: p,
+		onSelect: z,
+		isOpen: L,
+		onOpenChange: R,
+		placement: S ?? M.placement ?? "bottom-start",
+		...V === void 0 ? {} : { width: V },
+		disabled: D,
+		theme: N,
+		trigger: B()
+	});
+}
+//#endregion
+export { f as MenuButton };

package/dist/Modal.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const t=require(`./Portal.cjs`),n=require(`./useOverlayPresence.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);function a(e,t){if(!e||typeof e!=`object`)return;let n=e;if(typeof n.setVisible==`function`){n.setVisible(t);return}`visible`in n&&(n.visible=t)}(0,r.registerComponentDefaultsIfMissing)(`Modal`,{backdropColor:0,backdropOpacity:.5,openDuration:320,closeDuration:260});function o(t){let n=(0,r.useViewportSize)(),o=(0,r.useRef)(null),s=(0,r.useRef)(null),c=(0,r.useRef)(!1),l=(0,r.useRef)(!1),u=(0,r.useRef)(0),d=(0,r.useRef)(null),f=(0,r.useRef)(null),p=(0,r.useRef)(t.onOpen),m=(0,r.useRef)(t.onClosed),h=(0,r.useRef)(t.onRequestClose),g=(0,r.useCallback)(e=>{o.current=e},[]),_=(0,r.useCallback)(e=>{s.current=e},[]),v=(0,r.useCallback)(()=>{d.current!==null&&(window.clearTimeout(d.current),d.current=null)},[]),y=(0,r.useCallback)(()=>{f.current!==null&&(window.clearTimeout(f.current),f.current=null)},[]),b=(0,r.useCallback)(e=>{e&&typeof e==`object`&&(0,r.stopAnimationEffect)(e)},[]);return(0,r.useEffect)(()=>{p.current=t.onOpen,m.current=t.onClosed,h.current=t.onRequestClose},[t.onClosed,t.onOpen,t.onRequestClose]),(0,r.useEffect)(()=>{t.show||(c.current=!1,l.current=!1)},[t.show]),(0,r.useEffect)(()=>{let e=o.current,n=s.current;if(!e||!n)return;v(),y(),b(n),b(e);let i=()=>{let i=++u.current;c.current=!0,l.current=!1,t.closeRequestedRef.current=!1,a(e,!0),a(n,!0),p.current?.();let o=()=>{i===u.current&&(v(),t.finishEnter())};return d.current=window.setTimeout(()=>{o()},t.openDurationMs),(0,r.applyEffect)(n,t.viewOpenEffect,{time:t.openDurationMs,onComplete:o}),(0,r.applyEffect)(e,`fadeIn`,{time:t.openDurationMs}),()=>{i===u.current&&v()}};if(t.show&&t.phase===`entering`&&!c.current)return i();if(t.show&&t.phase===`entered`&&!c.current)return console.warn(`[Modal] starting enter animation on entered phase (likely async portal timing)`),i();if(!t.show&&t.phase===`exiting`&&!l.current){let i=++u.current;l.current=!0,a(e,!0),a(n,!0);let o=()=>{i===u.current&&(y(),a(e,!1),a(n,!1),t.finishExit(),(h.current!==void 0||!t.closeRequestedRef.current)&&m.current?.(),t.closeRequestedRef.current=!1)};return f.current=window.setTimeout(()=>{o()},t.closeDurationMs),(0,r.applyEffect)(n,t.viewCloseEffect,{time:t.closeDurationMs,onComplete:o}),(0,r.applyEffect)(e,`fadeOut`,{time:t.closeDurationMs}),()=>{i===u.current&&y()}}},[y,v,t.closeDurationMs,t.closeRequestedRef,t.finishEnter,t.finishExit,t.openDurationMs,t.phase,t.show,t.viewCloseEffect,t.viewOpenEffect,b]),(0,r.useEffect)(()=>()=>{v(),y(),b(s.current),b(o.current)},[y,v,b]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.View,{ref:g,width:n.width,height:n.height,backgroundColor:t.themedModal.backdropColor??0,alpha:t.themedModal.backdropOpacity??.5,onTouch:e=>{e.stopPropagation(),t.closeOnBackdrop&&t.requestClose()},onTouchMove:e=>{e.stopPropagation()}}),(0,i.jsx)(e.View,{width:n.width,height:n.height,direction:`row`,justifyContent:`center`,alignItems:`center`,children:(0,i.jsx)(e.View,{ref:_,onTouch:e=>e.stopPropagation(),onTouchMove:e=>e.stopPropagation(),theme:t.nestedTheme,children:t.children})})]})}function s(e){let a=(0,r.useTheme)(),{props:s,nestedTheme:c}=(0,r.resolveComponentTheme)({componentName:`Modal`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:a,knownComponents:r.KNOWN_COMPONENTS}),l=s,u=e.closeOnBackdrop??!0,d=e.closeOnEscape??!0,f=l.openDuration??320,p=l.closeDuration??260,m=n.useOverlayPresence(e.show),h=(0,r.useRef)(!1),g=e.viewOpenEffect??`fadeIn`,_=e.viewCloseEffect??`fadeOut`,v=(0,r.useCallback)(()=>{if(h.current=!0,e.onRequestClose){e.onRequestClose();return}e.onClosed?.()},[e.onClosed,e.onRequestClose]);return(0,r.useEffect)(()=>{if(!d||!e.show)return;let t=e=>{e.key===`Escape`&&v()};return window.addEventListener(`keydown`,t),()=>window.removeEventListener(`keydown`,t)},[d,e.show,v]),m.isPresent?(0,i.jsx)(t.Portal,{...e.key&&{key:e.key},depth:e.depth??1e3,blockEvents:!1,children:(0,i.jsx)(o,{show:e.show,phase:m.phase,finishEnter:m.finishEnter,finishExit:m.finishExit,closeOnBackdrop:u,themedModal:l,nestedTheme:c,openDurationMs:f,closeDurationMs:p,viewOpenEffect:g,viewCloseEffect:_,onOpen:e.onOpen,onClosed:e.onClosed,onRequestClose:e.onRequestClose,requestClose:v,closeRequestedRef:h,children:e.children})}):null}exports.Modal=s;

package/dist/Modal.d.ts

@@ -0,0 +1,27 @@
+import { ChildrenType, VNodeLike } from '@number10/jsx-core';
+export interface ModalProps {
+    /** Unique key for VDOM identification */
+    key?: string;
+    /** request if modal should change its open/close state */
+    show: boolean;
+    /** Callback when modal should start closing (backdrop/Escape) */
+    onRequestClose?: (() => void) | undefined;
+    /** Callback when modal has been opened (at start of animation) */
+    onOpen?: (() => void) | undefined;
+    /** Callback when modal has been closed (at end of animation) */
+    onClosed?: (() => void) | undefined;
+    /** Close on backdrop click (default: true) */
+    closeOnBackdrop?: boolean | undefined;
+    /** Close on Escape key (default: true) */
+    closeOnEscape?: boolean | undefined;
+    /** Portal depth (default: 1000) */
+    depth?: number | undefined;
+    /** Custom effect name for showing modal content (default: fadeIn) */
+    viewOpenEffect?: string | undefined;
+    /** Custom effect name for hiding modal content (default: fadeOut) */
+    viewCloseEffect?: string | undefined;
+    /** Modal content */
+    children?: ChildrenType;
+}
+export declare function Modal(props: ModalProps): VNodeLike;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../src/Modal.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;GAKG;AACH,OAAO,KAAK,EAAE,YAAY,EAAgC,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAkB/F,MAAM,WAAW,UAAU;IACzB,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0DAA0D;IAC1D,IAAI,EAAE,OAAO,CAAA;IACb,iEAAiE;IACjE,cAAc,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACzC,kEAAkE;IAClE,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACjC,gEAAgE;IAChE,QAAQ,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAA;IACnC,8CAA8C;IAC9C,eAAe,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,0CAA0C;IAC1C,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;IACnC,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,qEAAqE;IACrE,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACpC,oBAAoB;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAgRD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,CAsElD"}