@number10/jsx-components 5.0.0

package/dist/Divider.js

@@ -0,0 +1,15 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import "@number10/jsx-core";
+import { jsx as t } from "@number10/jsx-core/jsx-runtime";
+//#region src/Divider.tsx
+function n(n) {
+	let { orientation: r = "horizontal", thickness: i = 1, color: a = 13421772, length: o } = n, s = r === "horizontal";
+	return /* @__PURE__ */ t(e, {
+		width: s ? o ?? "100%" : i,
+		height: s ? i : o ?? "100%",
+		backgroundColor: a
+	});
+}
+//#endregion
+export { n as Divider };

package/dist/Divider.test.d.ts

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

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

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

package/dist/Dropdown.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Popover.cjs`),r=require(`./TextInput.cjs`),i=require(`./ScrollView.cjs`);require(`./index.cjs`);let a=require(`@number10/jsx-core`),o=require(`@number10/jsx-core/jsx-runtime`);function s(t){let n=t.size??12;return(0,o.jsx)(e.Text,{text:`▼`,style:{color:t.color??`#ffffff`,fontSize:`${n}px`,fontFamily:`Arial, sans-serif`}})}function c(t){let n=t.size??16,r=t.color??`#ffffff`;return t.multiple?(0,o.jsx)(e.Text,{text:t.selected?`☑`:`☐`,style:{color:r,fontSize:`${n}px`,fontFamily:`Arial, sans-serif`}}):t.selected?(0,o.jsx)(e.Text,{text:`✓`,style:{color:r,fontSize:`${n}px`,fontFamily:`Arial, sans-serif`}}):null}function l(l){let u=(0,a.useTheme)(),d=l.theme?(0,a.mergeThemes)(u??{},l.theme):u,{props:f,nestedTheme:p}=(0,a.resolveComponentTheme)({componentName:`Dropdown`,globalTheme:(0,a.getGlobalThemeDefaults)(),localTheme:d,knownComponents:a.KNOWN_COMPONENTS}),[m,h]=(0,a.useState)(!1),[g,_]=(0,a.useState)(l.defaultValue??(l.multiple?[]:``)),[v,y]=(0,a.useState)(``),b=(0,a.useRef)(null),x=(0,a.useRef)(null),S=(0,a.useRef)([]),C=l.value!==void 0,w=C?l.value:g,T=f.trigger??{},E=f.overlay??{},D=f.option??{},O=f.textStyle,k=f.placeholderStyle,A=l.maxHeight??E.maxHeight??300,j=f.arrow??{},M=j.size??12,N=j.color??`#ffffff`,P=f.selectionIndicator??{},F=P.size??16,I=P.color??j.color,L=l.placement??`bottom`,R=L===`top`?`top-start`:`bottom-start`,z=(()=>{if(l.multiple){let e=w;return l.options.filter(t=>e.includes(t.value))}let e=l.options.find(e=>e.value===w);return e?[e]:[]})(),[B]=(0,a.useSpring)(m?Math.PI:0,f.animationConfig||`gentle`);(0,a.useForceRedraw)(20,B);let V=()=>{l.disabled||m||(h(!0),y(``),l.onOpen?.(),b.current&&(0,a.applyEffect)(b.current,f.effect??`press`))},H=()=>{m&&(h(!1),y(``),l.onClose?.())},U=e=>{e?V():H()},W=(e,t)=>{if(t?.stopPropagation(),l.multiple){let t=w,n=t.includes(e)?t.filter(t=>t!==e):[...t,e];C||_(n),l.onChange?.(n),(l.closeOnSelect??!1)&&H()}else C||_(e),l.onChange?.(e),(l.closeOnSelect??!0)&&H()},G=()=>l.renderValue?l.renderValue(z.length>0?z:null):z.length===0?(0,o.jsx)(e.Text,{text:l.placeholder??`Select...`,style:k}):l.multiple?(0,o.jsx)(e.Text,{text:`${z.length} selected`,style:O}):(0,o.jsx)(e.Text,{text:z[0]?.label??``,style:O}),K=l.disabled?{...T,...f.triggerDisabled??{}}:m?{...T,...f.triggerOpen??{}}:T,q=l.options.map((n,r)=>{let i=l.multiple?w.includes(n.value):w===n.value,a=n.disabled??!1,s=l.isFilterable?n.label.toLowerCase().includes(v.toLowerCase()):!0,u={...D,...i?f.optionSelected??{}:{},...a?f.optionDisabled??{}:{}};return(0,o.jsx)(t.View,{ref:e=>{S.current[r]=e??null},width:`fill`,direction:`row`,alignItems:`center`,enableGestures:!a,visible:s?!0:`none`,onTouch:e=>{e.stopPropagation(),a||W(n.value,e)},...u,children:l.renderOption?l.renderOption(n,i):(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(c,{selected:i,multiple:l.multiple===!0,disabled:a,color:I??`#ffffff`,size:F}),n.prefix,(0,o.jsx)(e.Text,{text:n.label}),n.suffix]})},String(n.value))}),J=(0,o.jsxs)(t.View,{ref:b,direction:`row`,alignItems:`center`,justifyContent:`space-between`,...K,children:[(0,o.jsx)(t.View,{flex:1,children:G()}),(0,o.jsx)(t.View,{width:M,height:M,rotation:B.value,children:l.arrow??(0,o.jsx)(s,{color:N,size:M})})]}),Y=f.filterInput??{},X=l.isFilterable&&(0,o.jsx)(t.View,{margin:L===`top`?{top:8}:{bottom:8},children:(0,o.jsx)(r.TextInput,{value:v,onChange:e=>y(e),placeholder:l.filterInputPlaceholder??`Filter...`,height:Y.height,width:Y.width})}),Z=(0,o.jsx)(t.View,{flex:1,width:`fill`,children:(0,o.jsx)(i.ScrollView,{ref:x,showVerticalSlider:`auto`,height:`fill`,width:`100%`,onTouch:()=>{document.activeElement instanceof HTMLElement&&document.activeElement.blur()},children:(0,o.jsx)(t.View,{direction:`column`,gap:f.optionGap??2,width:`100%`,theme:O?{Text:{style:O}}:void 0,children:q})})}),Q=(0,a.useRef)(!1);(0,a.useLayoutEffect)(()=>{if(!m){Q.current=!1;return}if(v.length>0||l.multiple&&Q.current)return;let e=l.multiple?l.options.findIndex(e=>w.includes(e.value)):l.options.findIndex(e=>e.value===w);if(e<0)return;let t=S.current[e];t&&(x.current?.scrollChildIntoView(t,{block:`nearest`}),l.multiple&&(Q.current=!0))},[w,v,m,l.multiple,l.options]);let $=(0,o.jsx)(t.View,{direction:`column`,width:`fill`,height:A,overflow:`hidden`,theme:p,...E,children:L===`top`?(0,o.jsxs)(o.Fragment,{children:[Z,X]}):(0,o.jsxs)(o.Fragment,{children:[X,Z]})});return(0,o.jsx)(t.View,{direction:`column`,width:l.width??`fill`,children:(0,o.jsx)(n.Popover,{trigger:J,isOpen:m,onOpenChange:U,placement:R,offset:4,matchTriggerWidth:!0,contentHeight:A,contentProps:{height:A,backgroundAlpha:0,borderWidth:0,padding:0,gap:0,cornerRadius:0},triggerProps:{width:l.width??`fill`},closeOnOutside:!0,closeOnEscape:!0,disabled:l.disabled===!0,theme:{Popover:{backgroundColor:0,backgroundAlpha:0,borderWidth:0,cornerRadius:0,padding:0,gap:0}},children:$})})}exports.Dropdown=l;

package/dist/Dropdown.d.ts

@@ -0,0 +1,35 @@
+import { ChildrenType, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface DropdownOption<T = string> {
+    value: T;
+    label: string;
+    disabled?: boolean;
+    prefix?: ChildrenType;
+    suffix?: ChildrenType;
+}
+export interface DropdownProps<T = string> {
+    key?: string | number | undefined;
+    options: DropdownOption<T>[];
+    value?: T | T[];
+    defaultValue?: T | T[];
+    placeholder?: string;
+    multiple?: boolean;
+    isFilterable?: boolean;
+    filterInputPlaceholder?: string;
+    disabled?: boolean;
+    maxHeight?: number;
+    placement?: 'top' | 'bottom';
+    renderValue?: (selected: DropdownOption<T> | DropdownOption<T>[] | null) => ChildrenType;
+    renderOption?: (option: DropdownOption<T>, isSelected: boolean) => ChildrenType;
+    arrow?: ChildrenType;
+    onChange?: (value: T | T[]) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    closeOnSelect?: boolean;
+    width?: unknown;
+    height?: unknown;
+    ref?: unknown;
+    theme?: PortableComponentPartialTheme<'Dropdown'>;
+}
+export declare function Dropdown<T = string>(props: DropdownProps<T>): VNodeLike;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AACH,OAAO,KAAK,EACV,YAAY,EAKZ,SAAS,EACV,MAAM,oBAAoB,CAAA;AAsB3B,OAAO,KAAK,EAAiB,6BAA6B,EAAkB,MAAM,eAAe,CAAA;AAMjG,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,MAAM;IACxC,KAAK,EAAE,CAAC,CAAA;IACR,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,GAAG,MAAM;IACvC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAA;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC5B,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,KAAK,YAAY,CAAA;IACxF,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,YAAY,CAAA;IAC/E,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAA;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAA;CAClD;AAiED,wBAAgB,QAAQ,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,SAAS,CAqUvE"}

package/dist/Dropdown.js

@@ -0,0 +1,222 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { Popover as n } from "./Popover.js";
+import { TextInput as r } from "./TextInput.js";
+import { ScrollView as i } from "./ScrollView.js";
+import "./index.js";
+import { KNOWN_COMPONENTS as a, applyEffect as o, getGlobalThemeDefaults as s, mergeThemes as c, resolveComponentTheme as ee, useForceRedraw as l, useLayoutEffect as u, useRef as d, useSpring as f, useState as p, useTheme as te } from "@number10/jsx-core";
+import { Fragment as m, jsx as h, jsxs as g } from "@number10/jsx-core/jsx-runtime";
+//#region src/Dropdown.tsx
+function ne(t) {
+	let n = t.size ?? 12;
+	return /* @__PURE__ */ h(e, {
+		text: "▼",
+		style: {
+			color: t.color ?? "#ffffff",
+			fontSize: `${n}px`,
+			fontFamily: "Arial, sans-serif"
+		}
+	});
+}
+function _(t) {
+	let n = t.size ?? 16, r = t.color ?? "#ffffff";
+	return t.multiple ? /* @__PURE__ */ h(e, {
+		text: t.selected ? "☑" : "☐",
+		style: {
+			color: r,
+			fontSize: `${n}px`,
+			fontFamily: "Arial, sans-serif"
+		}
+	}) : t.selected ? /* @__PURE__ */ h(e, {
+		text: "✓",
+		style: {
+			color: r,
+			fontSize: `${n}px`,
+			fontFamily: "Arial, sans-serif"
+		}
+	}) : null;
+}
+function v(v) {
+	let y = te(), b = v.theme ? c(y ?? {}, v.theme) : y, { props: x, nestedTheme: S } = ee({
+		componentName: "Dropdown",
+		globalTheme: s(),
+		localTheme: b,
+		knownComponents: a
+	}), [C, w] = p(!1), [re, T] = p(v.defaultValue ?? (v.multiple ? [] : "")), [E, D] = p(""), O = d(null), k = d(null), A = d([]), j = v.value !== void 0, M = j ? v.value : re, N = x.trigger ?? {}, P = x.overlay ?? {}, ie = x.option ?? {}, F = x.textStyle, ae = x.placeholderStyle, I = v.maxHeight ?? P.maxHeight ?? 300, L = x.arrow ?? {}, R = L.size ?? 12, z = L.color ?? "#ffffff", B = x.selectionIndicator ?? {}, V = B.size ?? 16, H = B.color ?? L.color, U = v.placement ?? "bottom", W = U === "top" ? "top-start" : "bottom-start", G = (() => {
+		if (v.multiple) {
+			let e = M;
+			return v.options.filter((t) => e.includes(t.value));
+		}
+		let e = v.options.find((e) => e.value === M);
+		return e ? [e] : [];
+	})(), [K] = f(C ? Math.PI : 0, x.animationConfig || "gentle");
+	l(20, K);
+	let q = () => {
+		v.disabled || C || (w(!0), D(""), v.onOpen?.(), O.current && o(O.current, x.effect ?? "press"));
+	}, J = () => {
+		C && (w(!1), D(""), v.onClose?.());
+	}, oe = (e) => {
+		e ? q() : J();
+	}, se = (e, t) => {
+		if (t?.stopPropagation(), v.multiple) {
+			let t = M, n = t.includes(e) ? t.filter((t) => t !== e) : [...t, e];
+			j || T(n), v.onChange?.(n), (v.closeOnSelect ?? !1) && J();
+		} else j || T(e), v.onChange?.(e), (v.closeOnSelect ?? !0) && J();
+	}, ce = () => v.renderValue ? v.renderValue(G.length > 0 ? G : null) : G.length === 0 ? /* @__PURE__ */ h(e, {
+		text: v.placeholder ?? "Select...",
+		style: ae
+	}) : v.multiple ? /* @__PURE__ */ h(e, {
+		text: `${G.length} selected`,
+		style: F
+	}) : /* @__PURE__ */ h(e, {
+		text: G[0]?.label ?? "",
+		style: F
+	}), le = v.disabled ? {
+		...N,
+		...x.triggerDisabled ?? {}
+	} : C ? {
+		...N,
+		...x.triggerOpen ?? {}
+	} : N, Y = v.options.map((n, r) => {
+		let i = v.multiple ? M.includes(n.value) : M === n.value, a = n.disabled ?? !1, o = v.isFilterable ? n.label.toLowerCase().includes(E.toLowerCase()) : !0, s = {
+			...ie,
+			...i ? x.optionSelected ?? {} : {},
+			...a ? x.optionDisabled ?? {} : {}
+		};
+		return /* @__PURE__ */ h(t, {
+			ref: (e) => {
+				A.current[r] = e ?? null;
+			},
+			width: "fill",
+			direction: "row",
+			alignItems: "center",
+			enableGestures: !a,
+			visible: o ? !0 : "none",
+			onTouch: (e) => {
+				e.stopPropagation(), a || se(n.value, e);
+			},
+			...s,
+			children: v.renderOption ? v.renderOption(n, i) : /* @__PURE__ */ g(m, { children: [
+				/* @__PURE__ */ h(_, {
+					selected: i,
+					multiple: v.multiple === !0,
+					disabled: a,
+					color: H ?? "#ffffff",
+					size: V
+				}),
+				n.prefix,
+				/* @__PURE__ */ h(e, { text: n.label }),
+				n.suffix
+			] })
+		}, String(n.value));
+	}), ue = /* @__PURE__ */ g(t, {
+		ref: O,
+		direction: "row",
+		alignItems: "center",
+		justifyContent: "space-between",
+		...le,
+		children: [/* @__PURE__ */ h(t, {
+			flex: 1,
+			children: ce()
+		}), /* @__PURE__ */ h(t, {
+			width: R,
+			height: R,
+			rotation: K.value,
+			children: v.arrow ?? /* @__PURE__ */ h(ne, {
+				color: z,
+				size: R
+			})
+		})]
+	}), X = x.filterInput ?? {}, Z = v.isFilterable && /* @__PURE__ */ h(t, {
+		margin: U === "top" ? { top: 8 } : { bottom: 8 },
+		children: /* @__PURE__ */ h(r, {
+			value: E,
+			onChange: (e) => D(e),
+			placeholder: v.filterInputPlaceholder ?? "Filter...",
+			height: X.height,
+			width: X.width
+		})
+	}), Q = /* @__PURE__ */ h(t, {
+		flex: 1,
+		width: "fill",
+		children: /* @__PURE__ */ h(i, {
+			ref: k,
+			showVerticalSlider: "auto",
+			height: "fill",
+			width: "100%",
+			onTouch: () => {
+				document.activeElement instanceof HTMLElement && document.activeElement.blur();
+			},
+			children: /* @__PURE__ */ h(t, {
+				direction: "column",
+				gap: x.optionGap ?? 2,
+				width: "100%",
+				theme: F ? { Text: { style: F } } : void 0,
+				children: Y
+			})
+		})
+	}), $ = d(!1);
+	u(() => {
+		if (!C) {
+			$.current = !1;
+			return;
+		}
+		if (E.length > 0 || v.multiple && $.current) return;
+		let e = v.multiple ? v.options.findIndex((e) => M.includes(e.value)) : v.options.findIndex((e) => e.value === M);
+		if (e < 0) return;
+		let t = A.current[e];
+		t && (k.current?.scrollChildIntoView(t, { block: "nearest" }), v.multiple && ($.current = !0));
+	}, [
+		M,
+		E,
+		C,
+		v.multiple,
+		v.options
+	]);
+	let de = /* @__PURE__ */ h(t, {
+		direction: "column",
+		width: "fill",
+		height: I,
+		overflow: "hidden",
+		theme: S,
+		...P,
+		children: U === "top" ? /* @__PURE__ */ g(m, { children: [Q, Z] }) : /* @__PURE__ */ g(m, { children: [Z, Q] })
+	});
+	return /* @__PURE__ */ h(t, {
+		direction: "column",
+		width: v.width ?? "fill",
+		children: /* @__PURE__ */ h(n, {
+			trigger: ue,
+			isOpen: C,
+			onOpenChange: oe,
+			placement: W,
+			offset: 4,
+			matchTriggerWidth: !0,
+			contentHeight: I,
+			contentProps: {
+				height: I,
+				backgroundAlpha: 0,
+				borderWidth: 0,
+				padding: 0,
+				gap: 0,
+				cornerRadius: 0
+			},
+			triggerProps: { width: v.width ?? "fill" },
+			closeOnOutside: !0,
+			closeOnEscape: !0,
+			disabled: v.disabled === !0,
+			theme: { Popover: {
+				backgroundColor: 0,
+				backgroundAlpha: 0,
+				borderWidth: 0,
+				cornerRadius: 0,
+				padding: 0,
+				gap: 0
+			} },
+			children: de
+		})
+	});
+}
+//#endregion
+export { v as Dropdown };

package/dist/Icon.cjs

@@ -0,0 +1 @@
+const e=require(`./Image.cjs`);let t=require(`@number10/jsx-core`),n=require(`@number10/jsx-core/jsx-runtime`);function r(r){let{type:i,loader:a,size:o=32,...s}=r,[c,l]=(0,t.useState)(null);(0,t.useEffect)(()=>{let e=!1;if(i==null){l(null);return}return l(e=>e?.type===i?e:null),a(i).then(t=>{e||l({type:i,svg:t})}).catch(t=>{e||console.error(`Failed to load icon ${i}:`,t)}),()=>{e=!0}},[i,a]);let u=(c?.type===i?c:null)?.svg??null,d=i==null?``:`icon-${i}-${o}`;return(0,n.jsx)(e.Image,{texture:u&&(0,t.useSVGTexture)(d,u,o,o)?d:``,width:o,height:o,...s})}function i(e){return function(t){return(0,n.jsx)(r,{...t,loader:e})}}function a(e,n){let[r,i]=(0,t.useState)(null);return(0,t.useEffect)(()=>{let t=!1;return i(t=>t?.type===e?t:null),n(e).then(n=>{t||i({type:e,svg:n})}).catch(n=>{t||console.error(`Failed to load icon ${e}:`,n)}),()=>{t=!0}},[e,n]),r?.type===e}exports.Icon=r,exports.createIconComponent=i,exports.useIconPreload=a;

package/dist/Icon.d.ts

@@ -0,0 +1,71 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { ImageProps } from './Image';
+/**
+ * Icon loader function type.
+ * Takes an icon type string and returns a promise resolving to SVG markup.
+ */
+export interface IconLoaderFn<T extends string = string> {
+    (type: T): Promise<string>;
+}
+/**
+ * Props for the generic Icon component.
+ */
+export interface IconProps<T extends string = string> extends Omit<ImageProps, 'texture' | 'displayWidth' | 'displayHeight'> {
+    /** The icon type/name to load */
+    type: T | undefined;
+    /** Loader function that fetches the icon SVG */
+    loader: IconLoaderFn<T>;
+    /** Icon size in pixels (default: 32) */
+    size?: number;
+}
+/**
+ * Generic Icon component.
+ * Loads and displays an icon using the provided loader function.
+ *
+ * @example
+ * ```tsx
+ * <Icon type="check" loader={myIconLoader} size={24} />
+ * ```
+ */
+export declare function Icon<T extends string = string>(props: IconProps<T>): VNodeLike;
+/**
+ * Factory function to create a typed Icon component with a specific loader.
+ * This allows creating strongly-typed icon components for specific icon libraries.
+ *
+ * @param loader - The icon loader function
+ * @returns A typed Icon component that doesn't require the loader prop
+ *
+ * @example
+ * ```tsx
+ * // Define your loader
+ * async function myIconLoader(type: MyIconType): Promise<string> {
+ *   const module = await import(`./icons/${type}.svg`)
+ *   return module.default
+ * }
+ *
+ * // Create typed component
+ * export const MyIcon = createIconComponent<MyIconType>(myIconLoader)
+ *
+ * // Use without loader prop
+ * <MyIcon type="check" size={24} />
+ * ```
+ */
+export declare function createIconComponent<T extends string>(loader: IconLoaderFn<T>): (props: Omit<IconProps<T>, "loader">) => any;
+/**
+ * Hook to preload an icon and check if it's ready.
+ * Useful for loading icons before they're displayed.
+ *
+ * @param type - The icon type to load
+ * @param loader - The icon loader function
+ * @returns true when the icon is loaded and ready to use
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const iconReady = useIconPreload('check', myIconLoader)
+ *   return iconReady ? <Icon type="check" loader={myIconLoader} /> : <Text text="Loading..." />
+ * }
+ * ```
+ */
+export declare function useIconPreload<T extends string>(type: T, loader: IconLoaderFn<T>): boolean;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../src/Icon.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAMhD;;;GAGG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAChE,UAAU,EACV,SAAS,GAAG,cAAc,GAAG,eAAe,CAC7C;IACC,iCAAiC;IACjC,IAAI,EAAE,CAAC,GAAG,SAAS,CAAA;IACnB,gDAAgD;IAChD,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAA;IACvB,wCAAwC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAuC9E;AAMD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,IACjD,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,SAG9D;AAMD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,OAAO,CA0B1F"}

package/dist/Icon.js

@@ -0,0 +1,57 @@
+import { Image as e } from "./Image.js";
+import { useEffect as t, useSVGTexture as n, useState as r } from "@number10/jsx-core";
+import { jsx as i } from "@number10/jsx-core/jsx-runtime";
+//#region src/Icon.tsx
+function a(a) {
+	let { type: o, loader: s, size: c = 32, ...l } = a, [u, d] = r(null);
+	t(() => {
+		let e = !1;
+		if (o == null) {
+			d(null);
+			return;
+		}
+		return d((e) => e?.type === o ? e : null), s(o).then((t) => {
+			e || d({
+				type: o,
+				svg: t
+			});
+		}).catch((t) => {
+			e || console.error(`Failed to load icon ${o}:`, t);
+		}), () => {
+			e = !0;
+		};
+	}, [o, s]);
+	let f = (u?.type === o ? u : null)?.svg ?? null, p = o == null ? "" : `icon-${o}-${c}`;
+	return /* @__PURE__ */ i(e, {
+		texture: f && n(p, f, c, c) ? p : "",
+		width: c,
+		height: c,
+		...l
+	});
+}
+function o(e) {
+	return function(t) {
+		return /* @__PURE__ */ i(a, {
+			...t,
+			loader: e
+		});
+	};
+}
+function s(e, n) {
+	let [i, a] = r(null);
+	return t(() => {
+		let t = !1;
+		return a((t) => t?.type === e ? t : null), n(e).then((n) => {
+			t || a({
+				type: e,
+				svg: n
+			});
+		}).catch((n) => {
+			t || console.error(`Failed to load icon ${e}:`, n);
+		}), () => {
+			t = !0;
+		};
+	}, [e, n]), i?.type === e;
+}
+//#endregion
+export { a as Icon, o as createIconComponent, s as useIconPreload };

package/dist/Icon.test.d.ts

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

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

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

package/dist/Image.cjs

@@ -0,0 +1 @@
+let e=require(`@number10/jsx-core`);function t(t){let{theme:n,key:r,...i}=t,a=(0,e.useTheme)(),o=n?(0,e.mergeThemes)(a??{},n):a,{props:s,nestedTheme:c}=(0,e.resolveComponentTheme)({componentName:`Image`,globalTheme:(0,e.getGlobalThemeDefaults)(),localTheme:o,knownComponents:e.KNOWN_COMPONENTS}),l={key:r,theme:c};l.texture=i.texture;for(let[e,t]of Object.entries(i))t!==void 0&&(l[e]=t);return l.displayWidth===void 0&&typeof l.width==`number`&&(l.displayWidth=l.width),l.displayHeight===void 0&&typeof l.height==`number`&&(l.displayHeight=l.height),l.alpha===void 0&&s.alpha!==void 0&&(l.alpha=s.alpha),(0,e.jsx)(e.PRIMITIVE_NODES.Image,l)}exports.Image=t;

package/dist/Image.d.ts

@@ -0,0 +1,10 @@
+import { ImagePrimitiveProps, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface ImageProps extends ImagePrimitiveProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Optional theme overrides */
+    theme?: PortableComponentPartialTheme<'Image'>;
+}
+export declare function Image(props: ImageProps): VNodeLike;
+//# sourceMappingURL=Image.d.ts.map

package/dist/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../src/Image.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAUxE,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAMlE,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,+BAA+B;IAC/B,KAAK,CAAC,EAAE,6BAA6B,CAAC,OAAO,CAAC,CAAA;CAC/C;AAMD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,SAAS,CA2ClD"}

package/dist/Image.js

@@ -0,0 +1,18 @@
+import { KNOWN_COMPONENTS as e, PRIMITIVE_NODES as t, getGlobalThemeDefaults as n, jsx as r, mergeThemes as i, resolveComponentTheme as a, useTheme as o } from "@number10/jsx-core";
+//#region src/Image.tsx
+function s(s) {
+	let { theme: c, key: l, ...u } = s, d = o(), f = c ? i(d ?? {}, c) : d, { props: p, nestedTheme: m } = a({
+		componentName: "Image",
+		globalTheme: n(),
+		localTheme: f,
+		knownComponents: e
+	}), h = {
+		key: l,
+		theme: m
+	};
+	h.texture = u.texture;
+	for (let [e, t] of Object.entries(u)) t !== void 0 && (h[e] = t);
+	return h.displayWidth === void 0 && typeof h.width == "number" && (h.displayWidth = h.width), h.displayHeight === void 0 && typeof h.height == "number" && (h.displayHeight = h.height), h.alpha === void 0 && p.alpha !== void 0 && (h.alpha = p.alpha), r(t.Image, h);
+}
+//#endregion
+export { s as Image };

package/dist/Joystick.cjs

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

package/dist/Joystick.d.ts

@@ -0,0 +1,32 @@
+import { SizeValue, VNodeLike } from '@number10/jsx-core';
+export interface JoystickTheme {
+    /** Visual theme variant */
+    theme: 'default' | 'neon' | 'target' | 'glass' | 'military';
+    /** Optional tint color (0xRRGGBB) */
+    tint?: number;
+}
+export type JoystickProps = {
+    /** Width of the joystick area */
+    width: SizeValue;
+    /** Height of the joystick area */
+    height: SizeValue;
+    /** Default theme, used if base and thumb are not provided */
+    joystickTheme?: JoystickTheme;
+    /** Custom base graphic */
+    base?: VNodeLike;
+    /** Custom thumb graphic */
+    thumb?: VNodeLike;
+    /** Minimum force to trigger movement (0.0 to 1.0) */
+    minForce?: number;
+    /** Enable thumb rotation based on angle */
+    rotateThumb?: boolean;
+    /** Callback when joystick is moved.
+     * @param active - `true` while the joystick is being dragged, `false` on release
+     * @param angle - Direction in **degrees** (0–360), 0° = right (→), increases clockwise
+     * @param force - Normalized distance from center (0.0–1.0) */
+    onMove?: (active: boolean, angle: number, force: number) => void;
+    /** Callback when joystick is tapped */
+    onTap?: () => void;
+};
+export declare function Joystick(props: JoystickProps): VNodeLike;
+//# sourceMappingURL=Joystick.d.ts.map

package/dist/Joystick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Joystick.d.ts","sourceRoot":"","sources":["../src/Joystick.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,EAML,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,oBAAoB,CAAA;AAK3B,MAAM,WAAW,aAAa;IAC5B,2BAA2B;IAC3B,KAAK,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,CAAA;IAC3D,qCAAqC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,iCAAiC;IACjC,KAAK,EAAE,SAAS,CAAA;IAChB,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAA;IACjB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,0BAA0B;IAC1B,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;kEAG8D;IAC9D,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChE,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AAoOD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAmJxD"}