@number10/jsx-components 5.0.0

package/dist/Slider.js

@@ -0,0 +1,233 @@
+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 { KNOWN_COMPONENTS as r, getGlobalThemeDefaults as i, mergeThemes as a, resolveComponentTheme as o, useEffect as s, useMemo as c, useRef as l, useState as u, useTheme as d } from "@number10/jsx-core";
+import { jsx as f, jsxs as p } from "@number10/jsx-core/jsx-runtime";
+//#region src/Slider.tsx
+function m(e) {
+	let { size: n, color: r, borderColor: i, borderWidth: a = 0, isDragging: o, dragScale: s = 1.1 } = e, c = o ? s : 1, l = n / 2;
+	return /* @__PURE__ */ f(t, {
+		scale: c,
+		onDraw: (e) => {
+			a > 0 && i !== void 0 && e.fillStyle(i, 1).fillCircle(0, 0, l), e.fillStyle(r, 1).fillCircle(0, 0, l - a);
+		}
+	});
+}
+function h(t) {
+	let h = d(), g = t.theme ? a(h ?? {}, t.theme) : h, { props: _, nestedTheme: v } = o({
+		componentName: "Slider",
+		globalTheme: i(),
+		localTheme: g,
+		knownComponents: r
+	}), y = t.mode === "range", ee = t.defaultValue ?? t.min ?? 0, te = t.defaultValue ?? [t.min ?? 0, t.max ?? 100], [ne, b] = u(y ? te : ee), x = t.value !== void 0, S = x ? t.value : ne, C = t.min ?? 0, w = t.max ?? 100, T = y ? 0 : S, E = y ? S : [C, w], D = t.step ?? 1, O = t.orientation ?? "horizontal", k = t.reverse ?? !1, A = t.disabled ?? !1, j = t.snap ?? !0, M = t.minDistance ?? D, N = t.trackLength ?? _.trackLength ?? 200, P = _.trackHeight ?? 6, F = _.thumbSize ?? 20, [I, re] = u(!1), [L, ie] = u(!1), ae = l(0), oe = l(0), R = (e) => Math.max(C, Math.min(w, e)), se = (e) => C + Math.round((e - C) / D) * D, z = (e) => w === C ? 0 : (e - C) / (w - C), ce = (e, t) => {
+		let n = k ? t - e : e;
+		return C + Math.max(0, Math.min(1, n / t)) * (w - C);
+	}, B = (e) => {
+		let t = z(e) * N;
+		return k ? N - t : t;
+	}, V = (y ? E[0] : T) ?? 0, H = (y ? E[1] : 0) ?? 0, U = B(V), W = y ? B(H) : 0, [G, K] = u(U), [q, le] = u(W);
+	s(() => {
+		I || K(U);
+	}, [U, I]), s(() => {
+		!L && y && le(W);
+	}, [
+		W,
+		y,
+		L
+	]);
+	let ue = c(() => {
+		if (!t.marks) return [];
+		if (Array.isArray(t.marks)) return t.marks;
+		let e = [];
+		for (let t = C; t <= w; t += D) e.push({ value: t });
+		return e;
+	}, [
+		t.marks,
+		C,
+		w,
+		D
+	]), de = (e) => {
+		if (A) return;
+		e.stopPropagation();
+		let n = ce(O === "horizontal" ? e.localX ?? 0 : e.localY ?? 0, N), r = R(j ? se(n) : n);
+		if (y) {
+			let e = Math.abs(r - E[0]) <= Math.abs(r - E[1]) ? [r, E[1]] : [E[0], r];
+			if (e[1] - e[0] < M) return;
+			x || b(e), t.onChange?.(e);
+		} else x || b(r), t.onChange?.(r);
+	}, fe = (e) => (n) => {
+		if (A) return;
+		n.stopPropagation();
+		let r = e === 0, i = r ? I : L, a = r ? re : ie, o = r ? ae : oe, s = r ? K : le, c = r ? G : q;
+		if (n.state === "start") {
+			a(!0), o.current = c, y ? t.onChangeStart?.(E) : t.onChangeStart?.(T);
+			return;
+		}
+		if (n.state === "end") {
+			a(!1), y ? t.onChangeEnd?.(E) : t.onChangeEnd?.(T);
+			return;
+		}
+		if (!i) return;
+		let l = O === "horizontal" ? n.dx ?? 0 : n.dy ?? 0;
+		o.current += l;
+		let u = Math.max(0, Math.min(N, o.current)), d = ce(u, N);
+		if (d = j ? se(d) : d, y) {
+			let e = r ? [d, E[1]] : [E[0], d];
+			r ? (e[0] = R(e[0]), e[1] - e[0] < M && (e[0] = e[1] - M), e[0] = R(e[0])) : (e[1] = R(e[1]), e[1] - e[0] < M && (e[1] = e[0] + M), e[1] = R(e[1]));
+			let n = B(r ? e[0] : e[1]);
+			s(j ? n : u), x || b(e), t.onChange?.(e);
+		} else {
+			let e = R(d), n = B(e);
+			s(j ? n : u), x || b(e), t.onChange?.(e);
+		}
+	}, pe = t.formatValue ?? ((e) => e.toString()), J = O === "horizontal", me = A ? _.disabledAlpha ?? .4 : t.alpha ?? 1, Y = F + 8, he = {
+		x: t.valueLabelOffset1?.x ?? t.valueLabelOffset?.x ?? (y ? J ? k ? Y : -Y : Y : J && k ? -Y : Y),
+		y: t.valueLabelOffset1?.y ?? t.valueLabelOffset?.y ?? (y ? J ? -8 : k ? Y : -Y : J ? -8 : k ? Y : -8)
+	}, ge = {
+		x: t.valueLabelOffset2?.x ?? (y && J && k ? -Y : Y),
+		y: t.valueLabelOffset2?.y ?? (y ? J ? -8 : k ? -Y : Y : -8)
+	}, X = y ? z(E[0]) : 0, Z = z(y ? E[1] : T), Q = k ? N - Z * N : X * N, $ = (k ? N - X * N : Z * N) - Q, _e = (t, r) => /* @__PURE__ */ f(n, {
+		x: r.x - 50,
+		y: r.y - 25,
+		width: 100,
+		height: 50,
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ f(n, {
+			backgroundColor: _.valueLabel?.backgroundColor ?? 0,
+			padding: _.valueLabel?.padding ?? {
+				left: 6,
+				right: 6,
+				top: 4,
+				bottom: 4
+			},
+			cornerRadius: _.valueLabel?.cornerRadius ?? 4,
+			children: /* @__PURE__ */ f(e, {
+				text: pe(t),
+				style: _.valueLabel?.textStyle ?? {
+					color: "#ffffff",
+					fontSize: "12px"
+				}
+			})
+		})
+	});
+	return /* @__PURE__ */ f(n, {
+		direction: J ? "column" : "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: 8,
+		alpha: me,
+		width: t.width,
+		height: t.height,
+		theme: v,
+		children: /* @__PURE__ */ p(n, {
+			width: J ? N : P,
+			height: J ? P : N,
+			backgroundColor: _.trackColor ?? 4473924,
+			cornerRadius: _.trackBorderRadius ?? P / 2,
+			direction: "stack",
+			enableGestures: !A,
+			onTouch: de,
+			...t.onTooltip === void 0 ? {} : { onTooltip: t.onTooltip },
+			theme: v,
+			children: [
+				t.renderTrack ? /* @__PURE__ */ f(n, { children: t.renderTrack(X, y ? Z : void 0) }) : /* @__PURE__ */ f(n, {
+					x: J ? Q : 0,
+					y: J ? 0 : Q,
+					width: J ? $ : P,
+					height: J ? P : $,
+					backgroundColor: _.trackFilledColor ?? 5090295,
+					cornerRadius: _.trackBorderRadius ?? P / 2
+				}),
+				ue.map((e) => {
+					let t = z(e.value), r = k ? N - t * N : t * N, i = e.style?.height ?? _.markHeight ?? 8, a = e.style?.width ?? _.markWidth ?? 2, o = e.style?.color ?? _.markColor ?? 8947848;
+					return /* @__PURE__ */ f(n, {
+						x: J ? r - a / 2 : P / 2 - a / 2,
+						y: J ? P / 2 - i / 2 : r - a / 2,
+						width: J ? a : i,
+						height: J ? i : a,
+						backgroundColor: o,
+						children: e.label
+					}, e.value);
+				}),
+				/* @__PURE__ */ p(n, {
+					x: J ? G : 0,
+					y: J ? 0 : G,
+					direction: "stack",
+					children: [
+						/* @__PURE__ */ f(n, {
+							x: -F,
+							y: -F,
+							width: F * 2,
+							height: F * 2,
+							enableGestures: !A,
+							onTouchMove: fe(0)
+						}),
+						/* @__PURE__ */ f(n, {
+							x: J ? 0 : P / 2,
+							y: J ? P / 2 : 0,
+							width: F,
+							height: F,
+							direction: "stack",
+							children: t.renderThumb ? t.renderThumb(V, I, 0) : /* @__PURE__ */ f(m, {
+								size: F,
+								color: _.thumbColor ?? 5090295,
+								borderColor: _.thumbBorderColor ?? 16777215,
+								borderWidth: _.thumbBorderWidth ?? 2,
+								isDragging: I,
+								dragScale: _.thumbDragScale ?? 1.1
+							})
+						}),
+						t.showValue ? _e(V, he) : null
+					]
+				}),
+				y ? /* @__PURE__ */ p(n, {
+					x: J ? q : 0,
+					y: J ? 0 : q,
+					direction: "stack",
+					children: [
+						/* @__PURE__ */ f(n, {
+							x: -F,
+							y: -F,
+							width: F * 2,
+							height: F * 2,
+							enableGestures: !A,
+							onTouchMove: fe(1)
+						}),
+						/* @__PURE__ */ f(n, {
+							x: J ? 0 : P / 2,
+							y: J ? P / 2 : 0,
+							width: F,
+							height: F,
+							direction: "stack",
+							children: t.renderThumb ? t.renderThumb(H, L, 1) : /* @__PURE__ */ f(m, {
+								size: F,
+								color: _.thumbColor ?? 5090295,
+								borderColor: _.thumbBorderColor ?? 16777215,
+								borderWidth: _.thumbBorderWidth ?? 2,
+								isDragging: L,
+								dragScale: _.thumbDragScale ?? 1.1
+							})
+						}),
+						t.showValue ? _e(H, ge) : null
+					]
+				}) : null
+			]
+		})
+	});
+}
+function g(e) {
+	return /* @__PURE__ */ f(h, {
+		...e,
+		mode: "single"
+	});
+}
+function _(e) {
+	return /* @__PURE__ */ f(h, {
+		...e,
+		mode: "range"
+	});
+}
+//#endregion
+export { _ as RangeSlider, g as Slider };

package/dist/Tabs.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const t=require(`./ScrollView.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);function i(e){return null}function a(e){return null}var o=e=>e?(Array.isArray(e)?e.flat(1/0):[e]).filter(e=>!!e&&typeof e==`object`&&`type`in e):[];function s(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function c(e){return Math.max(0,e?.__getLayoutSize?.().height??0)}function l(l){let u=(0,n.useTheme)(),d=l.theme?(0,n.mergeThemes)(u??{},l.theme):u,{props:f,nestedTheme:p}=(0,n.resolveComponentTheme)({componentName:`Tabs`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:d,knownComponents:n.KNOWN_COMPONENTS}),[m,h]=(0,n.useState)(l.defaultIndex??0),g=l.activeIndex??m,{tabs:_,panels:v}=(0,n.useMemo)(()=>{let e=o(l.children),t=[],n=[];for(let r of e)r.type===i&&t.push(r),r.type===a&&n.push(r);return{tabs:t,panels:n}},[l.children]),y=Math.min(_.length,v.length),b=y>0?Math.min(Math.max(g,0),y-1):0,x=e=>{l.activeIndex===void 0&&h(e),e!==b&&l.onChange?.(e)},S=f.tabListStyle??{},C=f.tabStyle??{},w=f.tabActiveStyle??{},T=f.tabDisabledStyle??{},E=f.panelStyle??{},{activeIndex:D,children:O,defaultIndex:k,onChange:A,scrollableTabs:j,tabListScrollProps:M,theme:N,...P}=l,F=v[b],I=F?.props??{},L=F?.children??I.children,{children:R,...z}=I,B=l.scrollableTabs??!0,V=l.tabListScrollProps??{},[H,U]=(0,n.useState)(0),[W,G]=(0,n.useState)(0),K=(0,n.useRef)(null);(0,n.useLayoutEffect)(()=>{let e=!1;return n.DeferredLayoutQueue.defer(()=>{if(e)return;let t=c(K.current);t>0&&U(e=>Math.abs(e-t)<.5?e:t)}),()=>{e=!0}},[l.children,B,W]);let q=(0,r.jsx)(e.View,{ref:e=>s(K,e),...S,direction:`row`,width:B?`auto`:`100%`,children:_.slice(0,y).map((t,n)=>{let i=t.props??{},{disabled:a,enableGestures:o,onTouch:s,...c}=i,l=t.children??i.children,u=n===b,d={...C,...u?w:{},...a?T:{},...c},f=t.__key??i.key??n;return(0,r.jsx)(e.View,{...d,enableGestures:!a&&(o??!0),onTouch:e=>{a||(x(n),s?.(e))},children:l},f)})});return(0,r.jsxs)(e.View,{...P,...f,direction:`column`,theme:p,children:[B?(0,r.jsx)(t.ScrollView,{width:`100%`,height:H+W,showHorizontalSlider:`auto`,showVerticalSlider:!1,sliderSize:`nano`,theme:p,onSliderSize:e=>G(e.height),...V,children:q}):q,F?(0,r.jsx)(e.View,{...E,...z,children:L}):null]})}exports.Tab=i,exports.TabPanel=a,exports.Tabs=l;

package/dist/Tabs.d.ts

@@ -0,0 +1,23 @@
+import { ChildrenType, VNodeLike, ViewPrimitivePropsComplete } from '@number10/jsx-core';
+import { ScrollViewProps } from './ScrollView';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface TabProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    children?: ChildrenType;
+    disabled?: boolean;
+}
+export interface TabPanelProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    children?: ChildrenType;
+}
+export interface TabsProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    children?: ChildrenType;
+    activeIndex?: number;
+    defaultIndex?: number;
+    onChange?: (index: number) => void;
+    scrollableTabs?: boolean;
+    tabListScrollProps?: Omit<ScrollViewProps, 'children'>;
+    theme?: PortableComponentPartialTheme<'Tabs'>;
+}
+export declare function Tab(_props: TabProps): VNodeLike;
+export declare function TabPanel(_props: TabPanelProps): VNodeLike;
+export declare function Tabs(props: TabsProps): VNodeLike;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;GAEG;AACH,OAAO,KAAK,EACV,YAAY,EAIZ,SAAS,EACT,0BAA0B,EAC3B,MAAM,oBAAoB,CAAA;AAa3B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAE/D,OAAO,KAAK,EAAE,6BAA6B,EAAa,MAAM,eAAe,CAAA;AAE7E,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IAC5E,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IACjF,QAAQ,CAAC,EAAE,YAAY,CAAA;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IAC7E,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAA;IACtD,KAAK,CAAC,EAAE,6BAA6B,CAAC,MAAM,CAAC,CAAA;CAC9C;AAED,wBAAgB,GAAG,CAAC,MAAM,EAAE,QAAQ,GAAG,SAAS,CAE/C;AAED,wBAAgB,QAAQ,CAAC,MAAM,EAAE,aAAa,GAAG,SAAS,CAEzD;AAuBD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,CAsJhD"}

package/dist/Tabs.js

@@ -0,0 +1,101 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import { ScrollView as t } from "./ScrollView.js";
+import { DeferredLayoutQueue as n, KNOWN_COMPONENTS as r, getGlobalThemeDefaults as i, mergeThemes as a, resolveComponentTheme as o, useLayoutEffect as s, useMemo as c, useRef as l, useState as u, useTheme as d } from "@number10/jsx-core";
+import { jsx as f, jsxs as p } from "@number10/jsx-core/jsx-runtime";
+//#region src/Tabs.tsx
+function m(e) {
+	return null;
+}
+function h(e) {
+	return null;
+}
+var g = (e) => e ? (Array.isArray(e) ? e.flat(Infinity) : [e]).filter((e) => !!e && typeof e == "object" && "type" in e) : [];
+function _(e, t) {
+	if (e) {
+		if (typeof e == "function") {
+			e(t);
+			return;
+		}
+		e.current = t;
+	}
+}
+function v(e) {
+	return Math.max(0, e?.__getLayoutSize?.().height ?? 0);
+}
+function y(y) {
+	let b = d(), x = y.theme ? a(b ?? {}, y.theme) : b, { props: S, nestedTheme: C } = o({
+		componentName: "Tabs",
+		globalTheme: i(),
+		localTheme: x,
+		knownComponents: r
+	}), [w, T] = u(y.defaultIndex ?? 0), E = y.activeIndex ?? w, { tabs: D, panels: O } = c(() => {
+		let e = g(y.children), t = [], n = [];
+		for (let r of e) r.type === m && t.push(r), r.type === h && n.push(r);
+		return {
+			tabs: t,
+			panels: n
+		};
+	}, [y.children]), k = Math.min(D.length, O.length), A = k > 0 ? Math.min(Math.max(E, 0), k - 1) : 0, j = (e) => {
+		y.activeIndex === void 0 && T(e), e !== A && y.onChange?.(e);
+	}, M = S.tabListStyle ?? {}, N = S.tabStyle ?? {}, P = S.tabActiveStyle ?? {}, F = S.tabDisabledStyle ?? {}, I = S.panelStyle ?? {}, { activeIndex: L, children: R, defaultIndex: z, onChange: B, scrollableTabs: ee, tabListScrollProps: te, theme: ne, ...V } = y, H = O[A], U = H?.props ?? {}, W = H?.children ?? U.children, { children: re, ...G } = U, K = y.scrollableTabs ?? !0, q = y.tabListScrollProps ?? {}, [J, Y] = u(0), [X, Z] = u(0), Q = l(null);
+	s(() => {
+		let e = !1;
+		return n.defer(() => {
+			if (e) return;
+			let t = v(Q.current);
+			t > 0 && Y((e) => Math.abs(e - t) < .5 ? e : t);
+		}), () => {
+			e = !0;
+		};
+	}, [
+		y.children,
+		K,
+		X
+	]);
+	let $ = /* @__PURE__ */ f(e, {
+		ref: (e) => _(Q, e),
+		...M,
+		direction: "row",
+		width: K ? "auto" : "100%",
+		children: D.slice(0, k).map((t, n) => {
+			let r = t.props ?? {}, { disabled: i, enableGestures: a, onTouch: o, ...s } = r, c = t.children ?? r.children, l = n === A, u = {
+				...N,
+				...l ? P : {},
+				...i ? F : {},
+				...s
+			}, d = t.__key ?? r.key ?? n;
+			return /* @__PURE__ */ f(e, {
+				...u,
+				enableGestures: !i && (a ?? !0),
+				onTouch: (e) => {
+					i || (j(n), o?.(e));
+				},
+				children: c
+			}, d);
+		})
+	});
+	return /* @__PURE__ */ p(e, {
+		...V,
+		...S,
+		direction: "column",
+		theme: C,
+		children: [K ? /* @__PURE__ */ f(t, {
+			width: "100%",
+			height: J + X,
+			showHorizontalSlider: "auto",
+			showVerticalSlider: !1,
+			sliderSize: "nano",
+			theme: C,
+			onSliderSize: (e) => Z(e.height),
+			...q,
+			children: $
+		}) : $, H ? /* @__PURE__ */ f(e, {
+			...I,
+			...G,
+			children: W
+		}) : null]
+	});
+}
+//#endregion
+export { m as Tab, h as TabPanel, y as Tabs };

package/dist/TextInput.cjs

@@ -0,0 +1,17 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);var i=null;function a(){if(i||=document.createElement(`canvas`).getContext(`2d`)??null,!i)throw Error(`Canvas 2D context unavailable`);return i}function o(e,t){let n=t?.fontFamily??`Arial, sans-serif`,r=t?.fontSize??`16px`;e.font=[t?.fontStyle??``,t?.fontWeight??``,r,n].filter(Boolean).join(` `)}function s(e,t){let n=a();o(n,t);let r=[];for(let t=0;t<e.length;t++){let i=e.charAt(t);i===`
+`?r.push({char:i,width:0}):r.push({char:i,width:n.measureText(i).width})}return r}function c(e,t=1.2){let n=e?.fontSize??`16px`,r=typeof n==`number`?`${n}px`:n;return Math.round((parseFloat(r)||16)*t)}function l(e,t,n,r,i,a,o){let l=s(e,n),u=c(n,o),d=[],f=0,p=0,m=0,h=[],g=()=>{for(let e of h){let t=d[e.layoutIdx];t&&(t.y=p)}h=[],f=0,p+=u,m++};for(let e=0;e<l.length;e++){let n=l[e];if(!n)continue;if(n.char===`
+`){d.push({char:n.char,x:f,y:p,width:0,height:u,lineIndex:m}),g();continue}if(i&&h.length>0&&f+n.width>t)if(a){let e=-1;for(let t=h.length-1;t>=0;t--)if(h[t]?.m.char===` `){e=t;break}if(e>=0){let t=h.slice(0,e+1),n=h.slice(e+1);h=t,g(),f=0;for(let e of n){let t=d[e.layoutIdx];t&&(t.x=f,t.lineIndex=m),f+=e.m.width+r,h.push(e)}}else g()}else g();let o=d.length;d.push({char:n.char,x:f,y:p,width:n.width,height:u,lineIndex:m}),h.push({m:n,layoutIdx:o}),f+=n.width+r}for(let e of h){let t=d[e.layoutIdx];t&&(t.y=p)}return d}function u(){let e=document.createElement(`input`);return e.type=`text`,e.setAttribute(`autocomplete`,`off`),e.setAttribute(`autocorrect`,`off`),e.setAttribute(`autocapitalize`,`off`),e.setAttribute(`spellcheck`,`false`),Object.assign(e.style,{position:`fixed`,top:`-9999px`,left:`-9999px`,width:`1px`,height:`1px`,opacity:`0`,pointerEvents:`none`}),document.body.appendChild(e),e}function d(i){let a=(0,n.useTheme)(),o=i.theme?(0,n.mergeThemes)(a??{},i.theme):a,{props:s,nestedTheme:d}=(0,n.resolveComponentTheme)({componentName:`TextInput`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:o,knownComponents:n.KNOWN_COMPONENTS}),f=i.placeholder??s.placeholder,p=i.disabled??!1,m=i.maxLength??s.maxLength,h=i.multiline??s.multiline??!1,g=i.textStyle??s.textStyle??{fontFamily:`Arial, sans-serif`,fontSize:`16px`,color:`#ffffff`},ee=i.placeholderStyle??s.placeholderStyle??{...g,color:`#666666`},_=i.charSpacing??s.charSpacing??0,v=i.lineHeight??s.lineHeight??1.2,y=i.maxLines??s.maxLines,te=i.textOverflow??s.textOverflow??`clip`,ne=i.wordWrap??s.wordWrap??!0,re=i.cursorColor??s.cursorColor??16777215,ie=i.cursorWidth??s.cursorWidth??2,b=i.cursorBlinkSpeed??s.cursorBlinkSpeed??530,ae=i.selectionColor??s.selectionColor??4886754,oe=i.selectionAlpha??s.selectionAlpha??.3,se=i.focusedBorderColor??s.focusedBorderColor,ce=i.disabledBackgroundColor??s.disabledBackgroundColor,le=i.disabledBorderColor??s.disabledBorderColor,ue=i.disabledAlpha??s.disabledAlpha??.6,de=i.password??!1,fe=i.passwordChar??`•`,x=i.value!==void 0,[pe,me]=(0,n.useState)(i.value??``),S=x?i.value??``:pe,[C,w]=(0,n.useState)(S.length),[T,E]=(0,n.useState)(-1),[D,O]=(0,n.useState)(!1),[he,k]=(0,n.useState)(!0),A=(0,n.useRef)(S),j=(0,n.useRef)(C),M=(0,n.useRef)(T),ge=(0,n.useRef)(D);A.current=S,j.current=C,M.current=T,ge.current=D;let N=(0,n.useRef)(null),_e=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(!D){k(!1);return}k(!0);let e=setInterval(()=>{k(e=>!e)},b);return()=>clearInterval(e)},[D,b]),(0,n.useEffect)(()=>{let e=u();return N.current=e,()=>{e.remove(),N.current=null}},[]),(0,n.useEffect)(()=>{let e=N.current;if(!e)return;let t=e=>{if(e.key===`Enter`){if(e.preventDefault(),!h||e.ctrlKey||e.metaKey){i.onSubmit?.(A.current);return}if(h){I(`
+`);return}}if(e.key===`Backspace`){e.preventDefault(),ve();return}if(e.key===`Delete`){e.preventDefault(),ye();return}if((e.ctrlKey||e.metaKey)&&e.key===`c`){e.preventDefault(),be();return}if((e.ctrlKey||e.metaKey)&&e.key===`x`){e.preventDefault(),xe();return}if((e.ctrlKey||e.metaKey)&&e.key===`v`){e.preventDefault(),Se();return}if(e.key===`ArrowLeft`){e.preventDefault(),L(-1,e.shiftKey);return}if(e.key===`ArrowRight`){e.preventDefault(),L(1,e.shiftKey);return}if(e.key===`ArrowUp`){e.preventDefault(),R(-1,e.shiftKey);return}if(e.key===`ArrowDown`){e.preventDefault(),R(1,e.shiftKey);return}if(e.key===`Home`){e.preventDefault(),k(!0),j.current=0,w(0),e.shiftKey||(M.current=-1,E(-1));return}if(e.key===`End`){e.preventDefault(),k(!0);let t=A.current.length;j.current=t,w(t),e.shiftKey||(M.current=-1,E(-1));return}if(e.key===`a`&&(e.ctrlKey||e.metaKey)){e.preventDefault(),k(!0),M.current=0,E(0);let t=A.current.length;j.current=t,w(t);return}e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),I(e.key))},n=()=>{O(!0),i.onFocus?.()},r=()=>{O(!1),E(-1),i.onBlur?.()};return e.addEventListener(`keydown`,t),e.addEventListener(`focus`,n),e.addEventListener(`blur`,r),()=>{e.removeEventListener(`keydown`,t),e.removeEventListener(`focus`,n),e.removeEventListener(`blur`,r)}},[h]);let P=e=>{x||me(e),i.onChange?.(e)},F=(e,t,n=-1)=>{j.current=t,M.current=n,w(t),E(n),P(e)},I=e=>{let t=A.current,n=j.current,r=M.current;if(k(!0),r>=0){let i=Math.min(r,n),a=Math.max(r,n),o=t.slice(0,i)+e+t.slice(a);if(m!==void 0&&o.length>m||e===`
+`&&y!==void 0&&o.split(`
+`).length>y)return;F(o,i+1)}else{let r=t.slice(0,n)+e+t.slice(n);if(m!==void 0&&r.length>m||e===`
+`&&y!==void 0&&r.split(`
+`).length>y)return;F(r,n+1)}},ve=()=>{let e=A.current,t=j.current,n=M.current;if(n>=0){let r=Math.min(n,t),i=Math.max(n,t);F(e.slice(0,r)+e.slice(i),r)}else t>0&&F(e.slice(0,t-1)+e.slice(t),t-1)},ye=()=>{let e=A.current,t=j.current,n=M.current;if(n>=0){let r=Math.min(n,t),i=Math.max(n,t);F(e.slice(0,r)+e.slice(i),r)}else t<e.length&&P(e.slice(0,t)+e.slice(t+1))},L=(e,t)=>{let n=j.current,r=M.current,i=A.current.length;if(k(!0),t){r<0&&(E(n),M.current=n);let t=Math.max(0,Math.min(i,n+e));j.current=t,w(t)}else{M.current=-1,E(-1);let t=Math.max(0,Math.min(i,n+e));j.current=t,w(t)}},R=(e,t)=>{let n=j.current,r=M.current,i=A.current.length,{visibleChars:a,charLayout:o,totalLines:s,charSpacing:c}=De.current,l=n<=0?0:n>=a.length?s-1:a[n]?.lineIndex??0,u=Math.max(0,Math.min(s-1,l+e));if(u===l)return;k(!0);let d=n>0&&n<=a.length?a[n-1]:void 0,f=d&&d.char!==`
+`?d.x+d.width+c:0,p=a.filter(e=>e.char!==`
+`&&e.lineIndex===u),m;if(p.length===0){m=0;for(let e=0;e<a.length;e++){let t=a[e];if(t&&t.lineIndex>=u){m=e;break}m=e+1}}else{let e=0,t=1/0;for(let n=0;n<=p.length;n++){let r=n<p.length?p[n]:void 0,i=p[p.length-1],a=r?r.x+r.width/2:i?i.x+i.width+c:0,o=Math.abs(f-a);o<t&&(t=o,e=n)}let n=e<p.length?p[e]:void 0,r=p[p.length-1],a=n?o.indexOf(n):r?o.indexOf(r)+1:0;m=Math.min(a,i)}t?r<0&&(E(n),M.current=n):(M.current=-1,E(-1)),j.current=m,w(m)},z=()=>{let e=M.current,t=j.current;if(e<0)return``;let n=Math.min(e,t),r=Math.max(e,t);return A.current.slice(n,r)},be=()=>{let e=z();e&&navigator.clipboard.writeText(e).catch(()=>{})},xe=()=>{let e=z();if(e){navigator.clipboard.writeText(e).catch(()=>{});let t=M.current,n=j.current,r=Math.min(t,n),i=Math.max(t,n),a=A.current;F(a.slice(0,r)+a.slice(i),r)}},Se=()=>{navigator.clipboard.readText().then(e=>{if(!e)return;let t=h?e.replace(/\r\n/g,`
+`).replace(/\r/g,`
+`):e.replace(/[\r\n]/g,` `),n=A.current,r=j.current,i=M.current,a,o;if(i>=0){let e=Math.min(i,r),t=Math.max(i,r);a=e,o=n.slice(0,e)+n.slice(t)}else a=r,o=n;let s=t;if(m!==void 0){let e=m-o.length;if(e<=0)return;s=s.slice(0,e)}F(o.slice(0,a)+s+o.slice(a),a+s.length)}).catch(()=>{})},B=s.paddingLeft??s.padding??12,V=i.width??s.width??300,H=S.length===0&&!!f&&!D,U=H?f??``:S,Ce=de&&!H?fe.repeat(U.length):U,W=H?ee:g,we=s.paddingRight??s.padding??12,G=Math.max(1,typeof V==`number`?V-B-we:280),K=l(Ce,Math.max(1,G),W,_,h,ne,v),q=K;if(y!==void 0&&!H&&((K.length>0?K[K.length-1]:void 0)?.lineIndex??0)>=y&&(q=K.filter(e=>e.lineIndex<y),te===`ellipsis`&&q.length>0&&U.length>q.length)){let e=Math.max(0,q.length-3);q=[...q.slice(0,e),{char:`.`,x:0,y:0,width:0,height:0,lineIndex:y-1},{char:`.`,x:0,y:0,width:0,height:0,lineIndex:y-1},{char:`.`,x:0,y:0,width:0,height:0,lineIndex:y-1}]}let J=c(W,v),Y=q.length>0?q[q.length-1]:void 0,Te=Y?.char===`
+`,X=Y?Y.lineIndex+1+ +!!Te:1,Ee=X*J,De=(0,n.useRef)({visibleChars:q,charLayout:K,totalLines:X,charSpacing:_,lineH:J});De.current={visibleChars:q,charLayout:K,totalLines:X,charSpacing:_,lineH:J};let Oe=(C<q.length?q[C]:void 0)?.lineIndex??X-1,Z=C>0&&C<=q.length?q[C-1]:void 0,ke=Z?.char===`
+`?0:Z?Z.x+Z.width+_:0,Q=T>=0?Math.min(T,C):-1,$=T>=0?Math.max(T,C):-1,Ae=()=>{p||(k(!0),N.current?.focus())};return(0,r.jsx)(t.View,{ref:_e,direction:`row`,alignItems:`start`,width:i.width??s.width??300,height:i.height??s.height,backgroundColor:i.backgroundColor??(p?ce??s.backgroundColor:s.backgroundColor),borderColor:i.borderColor??(D?se??s.focusedBorderColor??s.borderColor:p?le??s.borderColor:s.borderColor),borderWidth:i.borderWidth??(D?Math.max(2,s.borderWidth??1):s.borderWidth),cornerRadius:i.cornerRadius??s.cornerRadius??4,padding:i.padding??s.padding??8,alpha:i.alpha??(p?ue:1),enableGestures:!p,onTouch:e=>{if(p)return;if(Ae(),k(!0),H){j.current=0,M.current=-1,w(0),E(-1);return}let t=e.localX-B,n=e.localY-(s.padding??8),r=Math.max(0,Math.min(X-1,Math.floor(n/J))),i=q.filter(e=>e.char!==`
+`&&e.lineIndex===r);if(i.length===0){let e=0;for(let t=0;t<q.length;t++){let n=q[t];if(n&&n.lineIndex>=r){e=t;break}e=t+1}j.current=e,M.current=-1,w(e),E(-1);return}let a=0,o=1/0;for(let e=0;e<=i.length;e++){let n=e<i.length?i[e]:void 0,r=i[i.length-1],s=n?n.x+n.width/2:r?r.x+r.width+_:0,c=Math.abs(t-s);c<o&&(o=c,a=e)}let c=a<i.length?i[a]:void 0,l=i[i.length-1],u=c?K.indexOf(c):l?K.indexOf(l)+1:0,d=Math.min(u,S.length);j.current=d,M.current=-1,w(d),E(-1)},overflow:`hidden`,theme:d,children:(0,r.jsxs)(t.View,{width:G,height:Ee,overflow:`hidden`,direction:`stack`,children:[q.filter(e=>e.char!==`
+`).map((t,n)=>(0,r.jsx)(e.Text,{x:t.x,y:t.y,text:t.char,style:{color:W.color??`#ffffff`,...W.fontSize===void 0?{}:{fontSize:W.fontSize},...W.fontFamily===void 0?{}:{fontFamily:W.fontFamily},...W.fontStyle===void 0?{}:{fontStyle:W.fontStyle}}},`c-${n}`)),Q>=0&&$>Q&&q.filter(e=>e.char!==`
+`).map((e,n)=>{let i=K.indexOf(e);return i<Q||i>=$?null:(0,r.jsx)(t.View,{x:e.x,y:e.y,width:e.width+2,height:J,backgroundColor:ae,backgroundAlpha:oe},`sel-${n}`)}),D&&he&&(0,r.jsx)(t.View,{x:ke,y:Oe*J,width:ie,height:J,backgroundColor:re})]})})}exports.TextInput=d;

package/dist/TextInput.d.ts

@@ -0,0 +1,82 @@
+import { PortableTextStyle, SizeValue, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface TextInputProps {
+    /** Unique key for VDOM identification. */
+    key?: string | number | undefined;
+    /** Controlled input value. */
+    value?: string;
+    /** Placeholder text when empty and not focused. */
+    placeholder?: string;
+    /** Disable input interaction. */
+    disabled?: boolean;
+    /** Maximum character length. */
+    maxLength?: number;
+    /** Enable multi-line input. */
+    multiline?: boolean;
+    /** Text style for input characters. */
+    textStyle?: PortableTextStyle;
+    /** Text style for placeholder. */
+    placeholderStyle?: PortableTextStyle;
+    /** Spacing between characters in px. */
+    charSpacing?: number;
+    /** Line height multiplier (multiline only, default 1.2). */
+    lineHeight?: number;
+    /** Maximum visible lines (multiline only). */
+    maxLines?: number;
+    /** Text overflow behaviour when maxLines reached. */
+    textOverflow?: 'clip' | 'ellipsis';
+    /** Word wrap at spaces (multiline only, default true). */
+    wordWrap?: boolean;
+    /** Cursor colour. */
+    cursorColor?: number;
+    /** Cursor width in px. */
+    cursorWidth?: number;
+    /** Cursor blink speed in ms (default 530). */
+    cursorBlinkSpeed?: number;
+    /** Selection background colour. */
+    selectionColor?: number;
+    /** Selection background alpha. */
+    selectionAlpha?: number;
+    /** Border colour when focused. */
+    focusedBorderColor?: number;
+    /** Background colour when disabled. */
+    disabledBackgroundColor?: number;
+    /** Border colour when disabled. */
+    disabledBorderColor?: number;
+    /** Alpha when disabled (default 0.6). */
+    disabledAlpha?: number;
+    /** Explicit width. */
+    width?: SizeValue | undefined;
+    /** Explicit height. */
+    height?: SizeValue | undefined;
+    /** Minimum height (multiline auto-grows to this). */
+    minHeight?: SizeValue;
+    /** Mask input characters (password mode). */
+    password?: boolean;
+    /** Password mask character (default '•'). */
+    passwordChar?: string;
+    /** Called when value changes. */
+    onChange?: (value: string) => void;
+    /** Called when input receives focus. */
+    onFocus?: () => void;
+    /** Called when input loses focus. */
+    onBlur?: () => void;
+    /** Called on Enter (single-line) or Ctrl+Enter (multi-line). */
+    onSubmit?: (value: string) => void;
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'TextInput'>;
+    /** Background color. */
+    backgroundColor?: number;
+    /** Corner radius. */
+    cornerRadius?: number;
+    /** Border color. */
+    borderColor?: number;
+    /** Border width. */
+    borderWidth?: number;
+    /** Padding (number or EdgeInsets). */
+    padding?: number;
+    /** Alpha / opacity. */
+    alpha?: number;
+}
+export declare function TextInput(props: TextInputProps): VNodeLike;
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/TextInput.d.ts.map

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