@number10/jsx-components 5.0.0

package/dist/NineSliceButton.js

@@ -0,0 +1,61 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import { NineSlice as t } from "./NineSlice.js";
+import { applyEffect as n, createElement as r, resolveEffect as i, useEffect as a, useRef as o, useState as s } from "@number10/jsx-core";
+import { jsx as c } from "@number10/jsx-core/jsx-runtime";
+//#region src/NineSliceButton.tsx
+function l(l) {
+	let { texture: u, frame: d, leftWidth: f, rightWidth: p, topHeight: m = 0, bottomHeight: h = 0, width: g, height: _, tint: v, onClick: y, disabled: b, children: x, alignItems: S = "center", justifyContent: C = "center", gap: w, padding: T, renderMode: E, theme: D, key: O, effect: k, effectConfig: A } = l, j = o(null), [M, N] = s(!1);
+	a(() => {
+		N(!0);
+	}, []);
+	let P = b ? void 0 : (e) => {
+		let t = i({
+			effect: k,
+			effectConfig: A
+		}, {});
+		n(j.current, t.effect, t.effectConfig), y?.();
+	}, F = P ? { onTouch: P } : {}, I = x != null && x !== !1;
+	return /* @__PURE__ */ r(e, {
+		ref: j,
+		direction: "stack",
+		width: g,
+		height: _,
+		visible: M,
+		enableGestures: !b,
+		...F,
+		key: O,
+		theme: D
+	}, I ? /* @__PURE__ */ c(t, {
+		texture: u,
+		frame: d,
+		leftWidth: f,
+		rightWidth: p,
+		topHeight: m,
+		bottomHeight: h,
+		width: g,
+		height: _,
+		tint: v,
+		renderMode: E,
+		alignItems: S,
+		justifyContent: C,
+		gap: w,
+		padding: T,
+		theme: D,
+		children: x
+	}) : /* @__PURE__ */ c(t, {
+		texture: u,
+		frame: d,
+		leftWidth: f,
+		rightWidth: p,
+		topHeight: m,
+		bottomHeight: h,
+		width: g,
+		height: _,
+		tint: v,
+		renderMode: E,
+		theme: D
+	}));
+}
+//#endregion
+export { l as NineSliceButton };

package/dist/NineSliceButton.test.d.ts

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

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

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

package/dist/NumberInput.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/VectorDrawContent.cjs`),n=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const r=require(`./Button.cjs`);let i=require(`@number10/jsx-core`),a=require(`@number10/jsx-core/jsx-runtime`);var o={decrement:`-`,increment:`+`,value:`Value`};function s(e){return e===`decrement`?`left`:`right`}function c(e,t,n){let r=n/2,i=n*.32,a=n*.68,o=n*.3,s=n*.7;e.beginPath(),t===`left`?e.moveTo(a,o).lineTo(i,r).lineTo(a,s):t===`right`?e.moveTo(i,o).lineTo(a,r).lineTo(i,s):t===`up`?e.moveTo(i,s).lineTo(r,o).lineTo(a,s):e.moveTo(i,o).lineTo(r,s).lineTo(a,o),e.strokePath()}function l(e,t,n){let r=n/2,i=n*.3,a=n*.7;e.beginPath().moveTo(i,r).lineTo(a,r).strokePath(),t===`increment`&&e.beginPath().moveTo(r,i).lineTo(r,a).strokePath()}function u(e){let{variant:n=`sign`,action:r=`increment`,direction:i,size:o=24,color:u=16777215,activeColor:d=u,disabled:f=!1,framed:p=!1,backgroundAlpha:m=.12,borderAlpha:h=1,...g}=e,_=i??s(r);return(0,a.jsx)(t.VectorDrawContent,{...g,width:o,height:o,dependencies:[n,r,_,o,u,d,f,p,m,h],onDraw:e=>{let t=f?.45:1,i=Math.max(3,Math.round(o*.16)),a=Math.max(2,Math.round(o*.12)),s=f?u:d;e.clear(),p&&e.fillStyle(s,m*t).lineStyle(2,s,h*t).fillRoundedRect(i,i,o-i*2,o-i*2,o*.18).strokeRoundedRect(i,i,o-i*2,o-i*2,o*.18),e.lineStyle(a,s,t),n===`chevron`?c(e,_,o):l(e,r,o)}})}function d(e){return typeof e==`number`&&Number.isFinite(e)}function f(e,t){let n=d(e)?e:-1/0,r=d(t)?t:1/0;return{min:Math.min(n,r),max:Math.max(n,r)}}function p(e){if(!Number.isFinite(e)||Number.isInteger(e))return 0;let[,t=``]=e.toString().split(`.`);return t.length}function m(e=1,t){return d(t)&&t>=0?Math.floor(t):p(Math.abs(e))}function h(e,t={}){let{min:n,max:r}=f(t.min,t.max),i=Number.isFinite(n)?n:Number.isFinite(r)?r:0,a=d(e)?e:i,o=Math.max(n,Math.min(r,a)),s=10**m(t.step,t.precision);return Math.round(o*s)/s}function g(e,t,n={}){return h(e+(d(n.step)&&n.step>0?n.step:1)*t,n)}function _(t){let{value:s,defaultValue:c,onChange:l,min:u,max:d,step:f=1,precision:p,label:m,labelPosition:_,formatValue:ee,renderValue:te,labels:ne,decrementContent:re,incrementContent:ie,renderButtonContent:ae,disabled:v=!1,buttonPlacement:oe,buttonDirection:se,buttonVariant:ce,buttonSize:le,buttonTextStyle:ue,buttonIndicatorColor:de,buttonIndicatorActiveColor:fe,repeatOnHold:pe,holdDelay:me,repeatInterval:he,valueWidth:ge,controlHeight:_e,theme:y,...b}=t,x=(0,i.useTheme)(),ve=y?(0,i.mergeThemes)(x??{},y):x,{props:S,nestedTheme:C}=(0,i.resolveComponentTheme)({componentName:`NumberInput`,globalTheme:(0,i.getGlobalThemeDefaults)(),localTheme:ve,knownComponents:i.KNOWN_COMPONENTS}),w={...u===void 0?{}:{min:u},...d===void 0?{}:{max:d},step:f,...p===void 0?{}:{precision:p}},T=h(c??s??u??0,w),[E,D]=(0,i.useState)(T),O=(0,i.useRef)(T),k=(0,i.useRef)(null),A=s!==void 0,j=h(A?s:E,w);O.current=j;let M=()=>{k.current&&=(clearInterval(k.current),null)};(0,i.useEffect)(()=>{!A&&E!==j&&D(j)},[A,E,j]),(0,i.useEffect)(()=>()=>M(),[]);let N={...o,...S.labels??{},...ne??{}},P=_??S.labelPosition??`left`,F=oe??S.buttonPlacement??`split`,I=se??S.buttonDirection??`row`,ye=ce??S.buttonVariant??`secondary`,be=le??S.buttonSize??`small`,xe=ue??S.buttonTextStyle??{color:`#111827`,fontSize:`16px`},L=de??S.buttonIndicatorColor??16777215,Se=fe??S.buttonIndicatorActiveColor??L,Ce=pe??S.repeatOnHold??!0,we=me??S.holdDelay??350,Te=he??S.repeatInterval??90,R=ge??S.valueWidth??78,z=_e??S.controlHeight??34,Ee=S.labelStyle??{color:`#ffffff`,fontSize:`14px`},De=S.valueStyle??{color:`#ffffff`,fontSize:`14px`},B=S.buttonControlSize??z,V=ee?.(j)??`${j}`,H=m??N.value,Oe=P!==`none`&&H.length>0,U=g(j,-1,w),W=g(j,1,w),G=U!==j,K=W!==j,ke=te?.({value:j,displayText:V,...u===void 0?{}:{min:u},...d===void 0?{}:{max:d},step:f,disabled:v,canDecrement:G,canIncrement:K,valueWidth:R,controlHeight:z}),Ae=e=>{let t=h(e,w);t!==O.current&&(O.current=t,A||D(t),l?.(t))},q=e=>{Ae(g(O.current,e,w))},je=e=>{!Ce||v||(M(),q(e),k.current=setInterval(()=>{q(e)},Te))},Me=e=>{e.state===`end`&&M()},J=e=>{let t=e===-1,n=t?`decrement`:`increment`,i=t?G:K,o=t?re:ie,s=t?N.decrement:N.increment,c=t?U:W,l=v||!i,u=o??ae?.({action:n,disabled:l,value:j,nextValue:c,size:B,color:L,activeColor:Se});return(0,a.jsx)(r.Button,{label:u?void 0:s,width:B,height:B,padding:0,variant:ye,size:be,textStyle:xe,disabled:l,onClick:()=>q(e),onLongPress:()=>je(e),onTouchMove:Me,longPressDuration:we,children:u},t?`decrement`:`increment`)},Y=(0,a.jsxs)(n.View,{direction:I,alignItems:`center`,gap:S.buttonGap??S.controlGap??0,theme:C,children:[J(-1),J(1)]}),X=(0,a.jsx)(n.View,{width:R,height:z,alignItems:`center`,justifyContent:`center`,backgroundColor:S.valueBackgroundColor??0,backgroundAlpha:S.valueBackgroundAlpha??.12,borderColor:S.valueBorderColor??S.borderColor,borderWidth:S.valueBorderWidth??1,cornerRadius:S.valueCornerRadius??S.cornerRadius??6,padding:S.valuePadding??{left:8,right:8,top:4,bottom:4},theme:C,children:ke??(0,a.jsx)(e.Text,{text:V,style:De})}),Z=F===`left`?(0,a.jsxs)(n.View,{direction:`row`,alignItems:`center`,gap:S.controlGap??0,theme:C,children:[Y,X]}):F===`right`?(0,a.jsxs)(n.View,{direction:`row`,alignItems:`center`,gap:S.controlGap??0,theme:C,children:[X,Y]}):(0,a.jsxs)(n.View,{direction:`row`,alignItems:`center`,gap:S.controlGap??0,theme:C,children:[J(-1),X,J(1)]}),Q=Oe?(0,a.jsx)(e.Text,{text:H,style:Ee}):null,Ne=P===`top`||P===`bottom`,$=v?S.disabledAlpha??.5:b.alpha,Pe=P===`right`||P===`bottom`?(0,a.jsxs)(a.Fragment,{children:[Z,Q]}):(0,a.jsxs)(a.Fragment,{children:[Q,Z]});return(0,a.jsx)(n.View,{...b,direction:Ne?`column`:`row`,alignItems:`center`,gap:S.gap??10,padding:S.padding??0,...$===void 0?{}:{alpha:$},theme:C,children:Pe})}exports.NumberInput=_,exports.NumberInputIndicator=u,exports.getNextNumberInputValue=g,exports.getNumberInputPrecision=m,exports.normalizeNumberInputValue=h;

package/dist/NumberInput.d.ts

@@ -0,0 +1,90 @@
+import { ChildrenType, PortableTextStyle, VectorDrawContentPrimitivePropsComplete, ViewPrimitivePropsComplete, VNodeLike } from '@number10/jsx-core';
+import { ButtonSize, ButtonVariant } from './Button';
+import { PortableComponentPartialTheme } from './theme-types';
+export interface NumberInputLabels {
+    decrement?: string;
+    increment?: string;
+    value?: string;
+}
+export type NumberInputLabelPosition = 'left' | 'right' | 'top' | 'bottom' | 'none';
+export type NumberInputButtonPlacement = 'split' | 'left' | 'right';
+export type NumberInputButtonDirection = 'row' | 'column';
+export type NumberInputButtonAction = 'decrement' | 'increment';
+export type NumberInputIndicatorDirection = 'left' | 'right' | 'up' | 'down';
+export type NumberInputIndicatorVariant = 'sign' | 'chevron';
+export interface NumberInputButtonRenderProps {
+    action: NumberInputButtonAction;
+    disabled: boolean;
+    value: number;
+    nextValue: number;
+    size: number;
+    color: number;
+    activeColor: number;
+}
+export interface NumberInputValueRenderProps {
+    value: number;
+    displayText: string;
+    min?: number;
+    max?: number;
+    step: number;
+    disabled: boolean;
+    canDecrement: boolean;
+    canIncrement: boolean;
+    valueWidth: number;
+    controlHeight: number;
+}
+export interface NumberInputIndicatorProps extends Omit<VectorDrawContentPrimitivePropsComplete, 'children' | 'dependencies' | 'direction' | 'onDraw'> {
+    variant?: NumberInputIndicatorVariant;
+    action?: NumberInputButtonAction;
+    direction?: NumberInputIndicatorDirection;
+    size?: number;
+    color?: number;
+    activeColor?: number;
+    disabled?: boolean;
+    framed?: boolean;
+    backgroundAlpha?: number;
+    borderAlpha?: number;
+}
+export interface NumberInputProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+    label?: string;
+    labelPosition?: NumberInputLabelPosition;
+    formatValue?: (value: number) => string;
+    renderValue?: (props: NumberInputValueRenderProps) => ChildrenType;
+    labels?: NumberInputLabels;
+    decrementContent?: ChildrenType;
+    incrementContent?: ChildrenType;
+    renderButtonContent?: (props: NumberInputButtonRenderProps) => ChildrenType;
+    disabled?: boolean;
+    buttonPlacement?: NumberInputButtonPlacement;
+    buttonDirection?: NumberInputButtonDirection;
+    buttonVariant?: ButtonVariant;
+    buttonSize?: ButtonSize;
+    buttonTextStyle?: PortableTextStyle;
+    buttonIndicatorColor?: number;
+    buttonIndicatorActiveColor?: number;
+    repeatOnHold?: boolean;
+    holdDelay?: number;
+    repeatInterval?: number;
+    valueWidth?: number;
+    controlHeight?: number;
+    theme?: PortableComponentPartialTheme<'NumberInput'>;
+}
+export interface NumberInputValueOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+    precision?: number;
+}
+export declare function NumberInputIndicator(props: NumberInputIndicatorProps): VNodeLike;
+export declare function getNumberInputPrecision(step?: number, precision?: number): number;
+export declare function normalizeNumberInputValue(value: number, options?: NumberInputValueOptions): number;
+export declare function getNextNumberInputValue(currentValue: number, direction: -1 | 1, options?: NumberInputValueOptions): number;
+export declare function NumberInput(props: NumberInputProps): VNodeLike;
+//# sourceMappingURL=NumberInput.d.ts.map

package/dist/NumberInput.d.ts.map

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

package/dist/NumberInput.js

@@ -0,0 +1,222 @@
+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 { Button as r } from "./Button.js";
+import { KNOWN_COMPONENTS as i, getGlobalThemeDefaults as a, mergeThemes as o, resolveComponentTheme as s, useEffect as c, useRef as l, useState as u, useTheme as d } from "@number10/jsx-core";
+import { Fragment as f, jsx as p, jsxs as m } from "@number10/jsx-core/jsx-runtime";
+//#region src/NumberInput.tsx
+var ee = {
+	decrement: "-",
+	increment: "+",
+	value: "Value"
+};
+function h(e) {
+	return e === "decrement" ? "left" : "right";
+}
+function g(e, t, n) {
+	let r = n / 2, i = n * .32, a = n * .68, o = n * .3, s = n * .7;
+	e.beginPath(), t === "left" ? e.moveTo(a, o).lineTo(i, r).lineTo(a, s) : t === "right" ? e.moveTo(i, o).lineTo(a, r).lineTo(i, s) : t === "up" ? e.moveTo(i, s).lineTo(r, o).lineTo(a, s) : e.moveTo(i, o).lineTo(r, s).lineTo(a, o), e.strokePath();
+}
+function _(e, t, n) {
+	let r = n / 2, i = n * .3, a = n * .7;
+	e.beginPath().moveTo(i, r).lineTo(a, r).strokePath(), t === "increment" && e.beginPath().moveTo(r, i).lineTo(r, a).strokePath();
+}
+function v(e) {
+	let { variant: n = "sign", action: r = "increment", direction: i, size: a = 24, color: o = 16777215, activeColor: s = o, disabled: c = !1, framed: l = !1, backgroundAlpha: u = .12, borderAlpha: d = 1, ...f } = e, m = i ?? h(r);
+	return /* @__PURE__ */ p(t, {
+		...f,
+		width: a,
+		height: a,
+		dependencies: [
+			n,
+			r,
+			m,
+			a,
+			o,
+			s,
+			c,
+			l,
+			u,
+			d
+		],
+		onDraw: (e) => {
+			let t = c ? .45 : 1, i = Math.max(3, Math.round(a * .16)), f = Math.max(2, Math.round(a * .12)), p = c ? o : s;
+			e.clear(), l && e.fillStyle(p, u * t).lineStyle(2, p, d * t).fillRoundedRect(i, i, a - i * 2, a - i * 2, a * .18).strokeRoundedRect(i, i, a - i * 2, a - i * 2, a * .18), e.lineStyle(f, p, t), n === "chevron" ? g(e, m, a) : _(e, r, a);
+		}
+	});
+}
+function y(e) {
+	return typeof e == "number" && Number.isFinite(e);
+}
+function b(e, t) {
+	let n = y(e) ? e : -Infinity, r = y(t) ? t : Infinity;
+	return {
+		min: Math.min(n, r),
+		max: Math.max(n, r)
+	};
+}
+function x(e) {
+	if (!Number.isFinite(e) || Number.isInteger(e)) return 0;
+	let [, t = ""] = e.toString().split(".");
+	return t.length;
+}
+function S(e = 1, t) {
+	return y(t) && t >= 0 ? Math.floor(t) : x(Math.abs(e));
+}
+function C(e, t = {}) {
+	let { min: n, max: r } = b(t.min, t.max), i = Number.isFinite(n) ? n : Number.isFinite(r) ? r : 0, a = y(e) ? e : i, o = Math.max(n, Math.min(r, a)), s = 10 ** S(t.step, t.precision);
+	return Math.round(o * s) / s;
+}
+function w(e, t, n = {}) {
+	return C(e + (y(n.step) && n.step > 0 ? n.step : 1) * t, n);
+}
+function T(t) {
+	let { value: h, defaultValue: g, onChange: _, min: v, max: y, step: b = 1, precision: x, label: S, labelPosition: T, formatValue: te, renderValue: ne, labels: re, decrementContent: ie, incrementContent: ae, renderButtonContent: oe, disabled: E = !1, buttonPlacement: se, buttonDirection: ce, buttonVariant: le, buttonSize: ue, buttonTextStyle: de, buttonIndicatorColor: fe, buttonIndicatorActiveColor: pe, repeatOnHold: me, holdDelay: he, repeatInterval: ge, valueWidth: _e, controlHeight: ve, theme: D, ...O } = t, k = d(), ye = D ? o(k ?? {}, D) : k, { props: A, nestedTheme: j } = s({
+		componentName: "NumberInput",
+		globalTheme: a(),
+		localTheme: ye,
+		knownComponents: i
+	}), M = {
+		...v === void 0 ? {} : { min: v },
+		...y === void 0 ? {} : { max: y },
+		step: b,
+		...x === void 0 ? {} : { precision: x }
+	}, N = C(g ?? h ?? v ?? 0, M), [P, F] = u(N), I = l(N), L = l(null), R = h !== void 0, z = C(R ? h : P, M);
+	I.current = z;
+	let B = () => {
+		L.current &&= (clearInterval(L.current), null);
+	};
+	c(() => {
+		!R && P !== z && F(z);
+	}, [
+		R,
+		P,
+		z
+	]), c(() => () => B(), []);
+	let V = {
+		...ee,
+		...A.labels ?? {},
+		...re ?? {}
+	}, H = T ?? A.labelPosition ?? "left", U = se ?? A.buttonPlacement ?? "split", be = ce ?? A.buttonDirection ?? "row", xe = le ?? A.buttonVariant ?? "secondary", Se = ue ?? A.buttonSize ?? "small", Ce = de ?? A.buttonTextStyle ?? {
+		color: "#111827",
+		fontSize: "16px"
+	}, W = fe ?? A.buttonIndicatorColor ?? 16777215, we = pe ?? A.buttonIndicatorActiveColor ?? W, Te = me ?? A.repeatOnHold ?? !0, Ee = he ?? A.holdDelay ?? 350, De = ge ?? A.repeatInterval ?? 90, G = _e ?? A.valueWidth ?? 78, K = ve ?? A.controlHeight ?? 34, Oe = A.labelStyle ?? {
+		color: "#ffffff",
+		fontSize: "14px"
+	}, ke = A.valueStyle ?? {
+		color: "#ffffff",
+		fontSize: "14px"
+	}, q = A.buttonControlSize ?? K, J = te?.(z) ?? `${z}`, Ae = S ?? V.value, je = H !== "none" && Ae.length > 0, Me = w(z, -1, M), Ne = w(z, 1, M), Pe = Me !== z, Y = Ne !== z, Fe = ne?.({
+		value: z,
+		displayText: J,
+		...v === void 0 ? {} : { min: v },
+		...y === void 0 ? {} : { max: y },
+		step: b,
+		disabled: E,
+		canDecrement: Pe,
+		canIncrement: Y,
+		valueWidth: G,
+		controlHeight: K
+	}), Ie = (e) => {
+		let t = C(e, M);
+		t !== I.current && (I.current = t, R || F(t), _?.(t));
+	}, X = (e) => {
+		Ie(w(I.current, e, M));
+	}, Le = (e) => {
+		!Te || E || (B(), X(e), L.current = setInterval(() => {
+			X(e);
+		}, De));
+	}, Re = (e) => {
+		e.state === "end" && B();
+	}, Z = (e) => {
+		let t = e === -1, n = t ? "decrement" : "increment", i = t ? Pe : Y, a = t ? ie : ae, o = t ? V.decrement : V.increment, s = t ? Me : Ne, c = E || !i, l = a ?? oe?.({
+			action: n,
+			disabled: c,
+			value: z,
+			nextValue: s,
+			size: q,
+			color: W,
+			activeColor: we
+		});
+		return /* @__PURE__ */ p(r, {
+			label: l ? void 0 : o,
+			width: q,
+			height: q,
+			padding: 0,
+			variant: xe,
+			size: Se,
+			textStyle: Ce,
+			disabled: c,
+			onClick: () => X(e),
+			onLongPress: () => Le(e),
+			onTouchMove: Re,
+			longPressDuration: Ee,
+			children: l
+		}, t ? "decrement" : "increment");
+	}, ze = /* @__PURE__ */ m(n, {
+		direction: be,
+		alignItems: "center",
+		gap: A.buttonGap ?? A.controlGap ?? 0,
+		theme: j,
+		children: [Z(-1), Z(1)]
+	}), Q = /* @__PURE__ */ p(n, {
+		width: G,
+		height: K,
+		alignItems: "center",
+		justifyContent: "center",
+		backgroundColor: A.valueBackgroundColor ?? 0,
+		backgroundAlpha: A.valueBackgroundAlpha ?? .12,
+		borderColor: A.valueBorderColor ?? A.borderColor,
+		borderWidth: A.valueBorderWidth ?? 1,
+		cornerRadius: A.valueCornerRadius ?? A.cornerRadius ?? 6,
+		padding: A.valuePadding ?? {
+			left: 8,
+			right: 8,
+			top: 4,
+			bottom: 4
+		},
+		theme: j,
+		children: Fe ?? /* @__PURE__ */ p(e, {
+			text: J,
+			style: ke
+		})
+	}), Be = U === "left" ? /* @__PURE__ */ m(n, {
+		direction: "row",
+		alignItems: "center",
+		gap: A.controlGap ?? 0,
+		theme: j,
+		children: [ze, Q]
+	}) : U === "right" ? /* @__PURE__ */ m(n, {
+		direction: "row",
+		alignItems: "center",
+		gap: A.controlGap ?? 0,
+		theme: j,
+		children: [Q, ze]
+	}) : /* @__PURE__ */ m(n, {
+		direction: "row",
+		alignItems: "center",
+		gap: A.controlGap ?? 0,
+		theme: j,
+		children: [
+			Z(-1),
+			Q,
+			Z(1)
+		]
+	}), Ve = je ? /* @__PURE__ */ p(e, {
+		text: Ae,
+		style: Oe
+	}) : null, He = H === "top" || H === "bottom", $ = E ? A.disabledAlpha ?? .5 : O.alpha, Ue = H === "right" || H === "bottom" ? /* @__PURE__ */ m(f, { children: [Be, Ve] }) : /* @__PURE__ */ m(f, { children: [Ve, Be] });
+	return /* @__PURE__ */ p(n, {
+		...O,
+		direction: He ? "column" : "row",
+		alignItems: "center",
+		gap: A.gap ?? 10,
+		padding: A.padding ?? 0,
+		...$ === void 0 ? {} : { alpha: $ },
+		theme: j,
+		children: Ue
+	});
+}
+//#endregion
+export { T as NumberInput, v as NumberInputIndicator, w as getNextNumberInputValue, S as getNumberInputPrecision, C as normalizeNumberInputValue };

package/dist/NumberInput.test.d.ts

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

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

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

package/dist/PalettePicker.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/VectorDrawContent.cjs`),n=require(`./primitives/View.cjs`);require(`./primitives.cjs`);let r=require(`@number10/jsx-core`),i=require(`@number10/jsx-core/jsx-runtime`);var a={title:`Palette`,empty:`No colors`};function o(e){let t=typeof e==`number`?{value:e}:e,n=(0,r.normalizeColorNumber)(t.value);return{...t,value:n,hex:(0,r.numberToHex)(n).toUpperCase()}}function s(e){return e.map(o)}function c(e,t,n){if(t!==void 0){let n=(0,r.normalizeColorNumber)(t);return e.some(e=>e.value===n)?n:void 0}if(n!==void 0){let t=(0,r.normalizeColorNumber)(n),i=e.find(e=>e.value===t);if(i)return i.value}return e.find(e=>!e.disabled)?.value??e[0]?.value}function l(e,t){let n=Math.max(1,Math.floor(t)),r=[];for(let t=0;t<e.length;t+=n)r.push(e.slice(t,t+n));return r}function u(e,t=16777215){return(0,r.ensureContrast)(t,e,4.5)}function d(e,t){return!t&&!e.disabled}function f(e,t,n){e.clear().lineStyle(Math.max(2,Math.round(t*.09)),n,1).beginPath().moveTo(t*.25,t*.52).lineTo(t*.43,t*.7).lineTo(t*.77,t*.3).strokePath()}function p(o){let{colors:p,value:m,defaultValue:h,onChange:g,columns:_,swatchSize:v,showTitle:y,showHex:b,labels:x,disabled:S=!1,renderSwatch:C,theme:w,alpha:T,...E}=o,D=(0,r.useTheme)(),O=w?(0,r.mergeThemes)(D??{},w):D,{props:k,nestedTheme:A}=(0,r.resolveComponentTheme)({componentName:`PalettePicker`,globalTheme:(0,r.getGlobalThemeDefaults)(),localTheme:O,knownComponents:r.KNOWN_COMPONENTS}),j=s(p),M=m!==void 0,[N,P]=(0,r.useState)(c(j,m,h)),F=M?c(j,m):c(j,N);(0,r.useEffect)(()=>{!M&&N!==F&&P(F)},[M,N,F]);let I={...a,...k.labels??{},...x??{}},L=Math.max(1,Math.floor(_??k.columns??6)),R=v??k.swatchSize??28,z=y??k.showTitle??!0,B=b??k.showHex??!1,V=k.swatchGap??8,H=k.rowGap??V,U=k.itemWidth??(B?Math.max(56,R):R),W=k.titleStyle??{color:`#ffffff`,fontSize:`14px`,fontStyle:`bold`},G=k.emptyStyle??{color:`#9fb3c8`,fontSize:`13px`},K=k.hexStyle??{color:`#9fb3c8`,fontSize:`11px`},q=S?k.disabledAlpha??.5:T,J=l(j,L),Y=e=>{d(e,S)&&(M||P(e.value),g?.(e.value,e))},X=e=>(0,i.jsx)(n.View,{width:e.size,height:e.size,backgroundColor:e.color,borderColor:e.selected?e.selectedBorderColor:k.swatchBorderColor,borderWidth:e.selected?k.swatchSelectedBorderWidth??3:k.swatchBorderWidth??1,cornerRadius:k.swatchCornerRadius??5,alignItems:`center`,justifyContent:`center`,alpha:e.disabled?k.swatchDisabledAlpha??.45:1,theme:A,children:e.selected?(0,i.jsx)(t.VectorDrawContent,{width:e.size,height:e.size,dependencies:[e.size,e.checkColor],onDraw:t=>f(t,e.size,e.checkColor)}):null}),Z=(t,a)=>{let o=F===t.value,s=S||!!t.disabled,c=d(t,S),l=(0,r.ensureContrast)(k.swatchSelectedBorderColor??16777215,t.value,3),f=u(t.value,k.selectedCheckColor??16777215),p={option:t,color:t.value,hex:t.hex,selected:o,disabled:s,index:a,size:R,selectedBorderColor:l,checkColor:f},m=C?.(p)??X(p),h=I.formatHex?.(t.value)??t.hex;return(0,i.jsxs)(n.View,{width:U,alignItems:`center`,gap:4,enableGestures:c,...c?{onTouch:()=>Y(t)}:{},theme:A,children:[m,B?(0,i.jsx)(e.Text,{text:h,style:K}):null]},`${t.value}-${a}`)};return(0,i.jsxs)(n.View,{...E,direction:`column`,gap:k.gap??10,padding:k.padding??0,...k.backgroundColor===void 0?{}:{backgroundColor:k.backgroundColor},...k.backgroundAlpha===void 0?{}:{backgroundAlpha:k.backgroundAlpha},...k.borderColor===void 0?{}:{borderColor:k.borderColor},...k.borderWidth===void 0?{}:{borderWidth:k.borderWidth},...k.cornerRadius===void 0?{}:{cornerRadius:k.cornerRadius},...q===void 0?{}:{alpha:q},theme:A,children:[z?(0,i.jsx)(e.Text,{text:I.title,style:W}):null,j.length===0?(0,i.jsx)(e.Text,{text:I.empty,style:G}):(0,i.jsx)(n.View,{direction:`column`,gap:H,theme:A,children:J.map((e,t)=>(0,i.jsx)(n.View,{direction:`row`,gap:V,theme:A,children:e.map((e,n)=>Z(e,t*L+n))},`row-${t}`))})]})}exports.PalettePicker=p,exports.chunkPalettePickerColors=l,exports.getPalettePickerContrastColor=u,exports.normalizePalettePickerColor=o,exports.normalizePalettePickerColors=s,exports.resolvePalettePickerValue=c;

package/dist/PalettePicker.d.ts

@@ -0,0 +1,49 @@
+import { ChildrenType, ViewPrimitivePropsComplete, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type PalettePickerColor = number | PalettePickerOption;
+export interface PalettePickerLabels {
+    title?: string;
+    empty?: string;
+    formatHex?: (color: number) => string;
+}
+export interface PalettePickerOption {
+    value: number;
+    label?: string;
+    disabled?: boolean;
+}
+export interface NormalizedPalettePickerOption extends PalettePickerOption {
+    value: number;
+    hex: string;
+}
+export interface PalettePickerSwatchRenderProps {
+    option: NormalizedPalettePickerOption;
+    color: number;
+    hex: string;
+    selected: boolean;
+    disabled: boolean;
+    index: number;
+    size: number;
+    selectedBorderColor: number;
+    checkColor: number;
+}
+export interface PalettePickerProps extends Omit<ViewPrimitivePropsComplete, 'children'> {
+    colors: PalettePickerColor[];
+    value?: number;
+    defaultValue?: number;
+    onChange?: (color: number, option: NormalizedPalettePickerOption) => void;
+    columns?: number;
+    swatchSize?: number;
+    showTitle?: boolean;
+    showHex?: boolean;
+    labels?: PalettePickerLabels;
+    disabled?: boolean;
+    renderSwatch?: (props: PalettePickerSwatchRenderProps) => ChildrenType;
+    theme?: PortableComponentPartialTheme<'PalettePicker'>;
+}
+export declare function normalizePalettePickerColor(color: PalettePickerColor): NormalizedPalettePickerOption;
+export declare function normalizePalettePickerColors(colors: PalettePickerColor[]): NormalizedPalettePickerOption[];
+export declare function resolvePalettePickerValue(colors: NormalizedPalettePickerOption[], value?: number, defaultValue?: number): number | undefined;
+export declare function chunkPalettePickerColors<T>(colors: T[], columns: number): T[][];
+export declare function getPalettePickerContrastColor(color: number, preferred?: number): number;
+export declare function PalettePicker(props: PalettePickerProps): VNodeLike;
+//# sourceMappingURL=PalettePicker.d.ts.map

package/dist/PalettePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PalettePicker.d.ts","sourceRoot":"","sources":["../src/PalettePicker.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;GAEG;AAEH,OAAO,KAAK,EACV,YAAY,EAEZ,0BAA0B,EAC1B,SAAS,EACV,MAAM,oBAAoB,CAAA;AAc3B,OAAO,KAAK,EAAsB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAEtF,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,mBAAmB,CAAA;AAE7D,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,6BAA8B,SAAQ,mBAAmB;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;CACZ;AAED,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,6BAA6B,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,mBAAmB,EAAE,MAAM,CAAA;IAC3B,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,0BAA0B,EAAE,UAAU,CAAC;IACtF,MAAM,EAAE,kBAAkB,EAAE,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,6BAA6B,KAAK,IAAI,CAAA;IACzE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,8BAA8B,KAAK,YAAY,CAAA;IACtE,KAAK,CAAC,EAAE,6BAA6B,CAAC,eAAe,CAAC,CAAA;CACvD;AAOD,wBAAgB,2BAA2B,CACzC,KAAK,EAAE,kBAAkB,GACxB,6BAA6B,CAS/B;AAED,wBAAgB,4BAA4B,CAC1C,MAAM,EAAE,kBAAkB,EAAE,GAC3B,6BAA6B,EAAE,CAEjC;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,6BAA6B,EAAE,EACvC,KAAK,CAAC,EAAE,MAAM,EACd,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,GAAG,SAAS,CAapB;AAED,wBAAgB,wBAAwB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,EAAE,EAAE,CAS/E;AAED,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,SAAW,GAAG,MAAM,CAEzF;AAiBD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,SAAS,CAiLlE"}

package/dist/PalettePicker.js

@@ -0,0 +1,152 @@
+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, ensureContrast as i, getGlobalThemeDefaults as a, mergeThemes as o, normalizeColorNumber as s, numberToHex as c, resolveComponentTheme as l, useEffect as u, useState as d, useTheme as f } from "@number10/jsx-core";
+import { jsx as p, jsxs as m } from "@number10/jsx-core/jsx-runtime";
+//#region src/PalettePicker.tsx
+var h = {
+	title: "Palette",
+	empty: "No colors"
+};
+function g(e) {
+	let t = typeof e == "number" ? { value: e } : e, n = s(t.value);
+	return {
+		...t,
+		value: n,
+		hex: c(n).toUpperCase()
+	};
+}
+function _(e) {
+	return e.map(g);
+}
+function v(e, t, n) {
+	if (t !== void 0) {
+		let n = s(t);
+		return e.some((e) => e.value === n) ? n : void 0;
+	}
+	if (n !== void 0) {
+		let t = s(n), r = e.find((e) => e.value === t);
+		if (r) return r.value;
+	}
+	return e.find((e) => !e.disabled)?.value ?? e[0]?.value;
+}
+function y(e, t) {
+	let n = Math.max(1, Math.floor(t)), r = [];
+	for (let t = 0; t < e.length; t += n) r.push(e.slice(t, t + n));
+	return r;
+}
+function b(e, t = 16777215) {
+	return i(t, e, 4.5);
+}
+function x(e, t) {
+	return !t && !e.disabled;
+}
+function S(e, t, n) {
+	e.clear().lineStyle(Math.max(2, Math.round(t * .09)), n, 1).beginPath().moveTo(t * .25, t * .52).lineTo(t * .43, t * .7).lineTo(t * .77, t * .3).strokePath();
+}
+function C(s) {
+	let { colors: c, value: g, defaultValue: C, onChange: w, columns: T, swatchSize: ee, showTitle: E, showHex: D, labels: O, disabled: k = !1, renderSwatch: A, theme: j, alpha: M, ...N } = s, P = f(), F = j ? o(P ?? {}, j) : P, { props: I, nestedTheme: L } = l({
+		componentName: "PalettePicker",
+		globalTheme: a(),
+		localTheme: F,
+		knownComponents: r
+	}), R = _(c), z = g !== void 0, [B, V] = d(v(R, g, C)), H = z ? v(R, g) : v(R, B);
+	u(() => {
+		!z && B !== H && V(H);
+	}, [
+		z,
+		B,
+		H
+	]);
+	let U = {
+		...h,
+		...I.labels ?? {},
+		...O ?? {}
+	}, W = Math.max(1, Math.floor(T ?? I.columns ?? 6)), G = ee ?? I.swatchSize ?? 28, K = E ?? I.showTitle ?? !0, q = D ?? I.showHex ?? !1, J = I.swatchGap ?? 8, Y = I.rowGap ?? J, X = I.itemWidth ?? (q ? Math.max(56, G) : G), Z = I.titleStyle ?? {
+		color: "#ffffff",
+		fontSize: "14px",
+		fontStyle: "bold"
+	}, Q = I.emptyStyle ?? {
+		color: "#9fb3c8",
+		fontSize: "13px"
+	}, te = I.hexStyle ?? {
+		color: "#9fb3c8",
+		fontSize: "11px"
+	}, $ = k ? I.disabledAlpha ?? .5 : M, ne = y(R, W), re = (e) => {
+		x(e, k) && (z || V(e.value), w?.(e.value, e));
+	}, ie = (e) => /* @__PURE__ */ p(n, {
+		width: e.size,
+		height: e.size,
+		backgroundColor: e.color,
+		borderColor: e.selected ? e.selectedBorderColor : I.swatchBorderColor,
+		borderWidth: e.selected ? I.swatchSelectedBorderWidth ?? 3 : I.swatchBorderWidth ?? 1,
+		cornerRadius: I.swatchCornerRadius ?? 5,
+		alignItems: "center",
+		justifyContent: "center",
+		alpha: e.disabled ? I.swatchDisabledAlpha ?? .45 : 1,
+		theme: L,
+		children: e.selected ? /* @__PURE__ */ p(t, {
+			width: e.size,
+			height: e.size,
+			dependencies: [e.size, e.checkColor],
+			onDraw: (t) => S(t, e.size, e.checkColor)
+		}) : null
+	}), ae = (t, r) => {
+		let a = H === t.value, o = k || !!t.disabled, s = x(t, k), c = i(I.swatchSelectedBorderColor ?? 16777215, t.value, 3), l = b(t.value, I.selectedCheckColor ?? 16777215), u = {
+			option: t,
+			color: t.value,
+			hex: t.hex,
+			selected: a,
+			disabled: o,
+			index: r,
+			size: G,
+			selectedBorderColor: c,
+			checkColor: l
+		}, d = A?.(u) ?? ie(u), f = U.formatHex?.(t.value) ?? t.hex;
+		return /* @__PURE__ */ m(n, {
+			width: X,
+			alignItems: "center",
+			gap: 4,
+			enableGestures: s,
+			...s ? { onTouch: () => re(t) } : {},
+			theme: L,
+			children: [d, q ? /* @__PURE__ */ p(e, {
+				text: f,
+				style: te
+			}) : null]
+		}, `${t.value}-${r}`);
+	};
+	return /* @__PURE__ */ m(n, {
+		...N,
+		direction: "column",
+		gap: I.gap ?? 10,
+		padding: I.padding ?? 0,
+		...I.backgroundColor === void 0 ? {} : { backgroundColor: I.backgroundColor },
+		...I.backgroundAlpha === void 0 ? {} : { backgroundAlpha: I.backgroundAlpha },
+		...I.borderColor === void 0 ? {} : { borderColor: I.borderColor },
+		...I.borderWidth === void 0 ? {} : { borderWidth: I.borderWidth },
+		...I.cornerRadius === void 0 ? {} : { cornerRadius: I.cornerRadius },
+		...$ === void 0 ? {} : { alpha: $ },
+		theme: L,
+		children: [K ? /* @__PURE__ */ p(e, {
+			text: U.title,
+			style: Z
+		}) : null, R.length === 0 ? /* @__PURE__ */ p(e, {
+			text: U.empty,
+			style: Q
+		}) : /* @__PURE__ */ p(n, {
+			direction: "column",
+			gap: Y,
+			theme: L,
+			children: ne.map((e, t) => /* @__PURE__ */ p(n, {
+				direction: "row",
+				gap: J,
+				theme: L,
+				children: e.map((e, n) => ae(e, t * W + n))
+			}, `row-${t}`))
+		})]
+	});
+}
+//#endregion
+export { C as PalettePicker, y as chunkPalettePickerColors, b as getPalettePickerContrastColor, g as normalizePalettePickerColor, _ as normalizePalettePickerColors, v as resolvePalettePickerValue };

package/dist/PalettePicker.test.d.ts

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

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

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

package/dist/Popover.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Portal.cjs`),r=require(`./useOverlayPresence.cjs`);let i=require(`@number10/jsx-core`),a=require(`@number10/jsx-core/jsx-runtime`);function o(e){return e.split(`-`)[0]}function s(e){return e.split(`-`)[1]??`center`}function c(e){let{anchor:t,content:n,placement:r,offset:i}=e,a=o(r),c=s(r),l,u;a===`top`||a===`bottom`?(u=a===`top`?t.y-n.height-i:t.y+t.height+i,l=c===`start`?t.x:c===`end`?t.x+t.width-n.width:t.x+(t.width-n.width)/2):(l=a===`left`?t.x-n.width-i:t.x+t.width+i,u=c===`start`?t.y:c===`end`?t.y+t.height-n.height:t.y+(t.height-n.height)/2);let d=e.viewport;if(d){let t=e.viewportPadding??8;l=Math.min(Math.max(t,l),Math.max(t,d.width-n.width-t)),u=Math.min(Math.max(t,u),Math.max(t,d.height-n.height-t))}return{x:l,y:u,placement:r}}function l(e){return e?.__getLayoutSize?.()??e?.__cachedLayoutSize??{width:0,height:0}}function u(e){let t=e;if(typeof t.getAbsolutePosition==`function`){let e=t.getAbsolutePosition();return{x:e.x,y:e.y}}let n=e;if(typeof n.getGlobalPosition==`function`){let e=n.getGlobalPosition();return{x:e.x,y:e.y}}let r=e.x??0,i=e.y??0,a=e.parent;for(;a;)r+=a.x??0,i+=a.y??0,a=a.parent;return{x:r,y:i}}function d(e){if(!e)return{x:0,y:0,width:0,height:0};let t=l(e),n=u(e);return{x:n.x,y:n.y,width:t.width,height:t.height}}var f={width:220,height:120};function p(e,t){if(e){if(typeof e==`function`){e(t);return}e.current=t}}function m(e){let o=(0,i.useTheme)(),s=e.theme?(0,i.mergeThemes)(o??{},e.theme):o,{props:u,nestedTheme:m}=(0,i.resolveComponentTheme)({componentName:`Popover`,globalTheme:(0,i.getGlobalThemeDefaults)(),localTheme:s,knownComponents:i.KNOWN_COMPONENTS}),h=(0,i.useRef)(null),g=(0,i.useRef)(null),[_,v]=(0,i.useState)(null),[y,b]=(0,i.useState)(e.defaultOpen??!1),x=e.isOpen!==void 0,S=x?e.isOpen===!0:y,C=r.useOverlayPresence(S),w=e.placement??u.placement??`bottom`,T=e.offset??u.offset??8,E=e.depth??u.depth??1100,D=e.closeOnOutside??u.closeOnOutside??!0,O=e.closeOnEscape??u.closeOnEscape??!0,k=e.viewportPadding??u.viewportPadding??8,A=e.openEffect??u.openEffect??`fadeIn`,j=e.closeEffect??u.closeEffect??`fadeOut`,M=e.openDuration??u.openDuration??120,N=e.closeDuration??u.closeDuration??100,P=e.contentWidth??u.contentWidth,F=e.contentHeight??u.contentHeight,I=(0,i.useViewportSize)(),[L,R]=(0,i.useState)(d(h.current)),z=_?.width??f.width,B=_?.height??f.height,V=P===void 0||F===void 0,H=!V||_!==null,U=e.matchTriggerWidth?Math.max(L.width,P??z):P??z,W=c({anchor:L,content:{width:U,height:F??B},placement:w,offset:T,viewport:I,viewportPadding:k}),G=t=>{e.disabled&&t||(x||b(t),e.onOpenChange?.(t))},K=e=>{e.stopPropagation(),G(!S)},q=e=>{e?.stopPropagation(),G(!1)},J=e.contentProps??{},Y=J.ref,X=J.alpha,Z=e=>{let t=e;g.current=t,p(Y,t)},Q=C.phase===`entered`||C.phase===`exiting`?X:0;return(0,i.useEffect)(()=>{if(!O||!S)return;let e=e=>{e.key===`Escape`&&G(!1)};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[O,S]),(0,i.useEffect)(()=>{if(!C.isPresent)return;let e=!1,t=()=>{if(e)return;let n=d(h.current);R(e=>Math.abs(e.x-n.x)<.5&&Math.abs(e.y-n.y)<.5&&Math.abs(e.width-n.width)<.5&&Math.abs(e.height-n.height)<.5?e:n),i.DeferredLayoutQueue.defer(t)};return i.DeferredLayoutQueue.defer(t),()=>{e=!0}},[C.isPresent]),(0,i.useEffect)(()=>{if(!C.isPresent||!V)return;let e=!1,t=()=>{if(e)return;let n=l(g.current);n.width>0&&n.height>0&&v(e=>e&&Math.abs(e.width-n.width)<.5&&Math.abs(e.height-n.height)<.5?e:{width:n.width,height:n.height}),i.DeferredLayoutQueue.defer(t)};return i.DeferredLayoutQueue.defer(t),()=>{e=!0}},[C.isPresent,V,e.children,P,F]),(0,i.useEffect)(()=>{let e=g.current;if(!(!e||!C.isPresent))if(C.phase===`entering`){if(!H)return;(0,i.stopEffect)(e),e.setVisible?.(!0),(0,i.applyEffect)(e,A,{time:M,onComplete:C.finishEnter})}else C.phase===`exiting`&&((0,i.stopEffect)(e),(0,i.applyEffect)(e,j,{time:N,onComplete:()=>{g.current?.setVisible?.(!1),v(null),C.finishExit()}}))},[C.phase,C.isPresent,H,M,N]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.View,{...e.triggerProps??{},ref:h,enableGestures:!e.disabled,onTouch:K,children:e.trigger}),C.isPresent&&(0,a.jsxs)(n.Portal,{depth:E,blockEvents:!1,children:[D&&(0,a.jsx)(t.View,{width:I.width,height:I.height,backgroundColor:0,backgroundAlpha:0,onTouch:q,onTouchMove:e=>e.stopPropagation()}),(0,a.jsx)(t.View,{direction:`column`,backgroundColor:u.backgroundColor??1120295,borderColor:u.borderColor??3359061,borderWidth:u.borderWidth??1,cornerRadius:u.cornerRadius??8,padding:u.padding??10,gap:u.gap??8,...J,ref:Z,x:W.x,y:W.y,...e.matchTriggerWidth||P!==void 0?{width:U}:{},...Q===void 0?{}:{alpha:Q},onTouch:e=>e.stopPropagation(),theme:m,children:e.children})]})]})}function h(n){let{items:r,width:o,onSelect:s,isOpen:c,defaultOpen:l,onOpenChange:u,...d}=n,f=(0,i.useTheme)(),p=n.theme?(0,i.mergeThemes)(f??{},n.theme):f,{props:h,nestedTheme:g}=(0,i.resolveComponentTheme)({componentName:`ContextMenu`,globalTheme:(0,i.getGlobalThemeDefaults)(),localTheme:p,knownComponents:i.KNOWN_COMPONENTS}),[_,v]=(0,i.useState)(l??!1),y=c!==void 0,b=y?c===!0:_,x=o??h.width??220,S=h.itemHeight??34,C=e=>{y||v(e),u?.(e)},w=e=>{e.disabled||(e.onSelect?.(),s?.(e),C(!1))};return(0,a.jsx)(m,{...d,isOpen:b,onOpenChange:C,contentWidth:x,contentHeight:Math.max(1,r.length)*S+20,contentProps:{padding:h.padding??6,gap:h.gap??2,backgroundColor:h.backgroundColor,borderColor:h.borderColor,borderWidth:h.borderWidth,cornerRadius:h.cornerRadius,theme:g},children:r.map(n=>{let r=h.textStyle,i=n.disabled?h.disabledTextColor??`#64748b`:n.danger?h.dangerTextColor??`#fecaca`:r?.color??`#f8fafc`;return(0,a.jsxs)(t.View,{width:`fill`,height:S,direction:`row`,alignItems:`center`,justifyContent:`space-between`,backgroundColor:n.disabled?void 0:h.itemBackgroundColor,borderColor:n.disabled?void 0:h.itemBorderColor,cornerRadius:h.itemCornerRadius??4,padding:h.itemPadding??{left:10,right:10},enableGestures:!n.disabled,onTouch:e=>{e.stopPropagation(),w(n)},theme:g,children:[(0,a.jsxs)(t.View,{direction:`row`,alignItems:`center`,gap:h.itemGap??8,children:[n.prefix,(0,a.jsx)(e.Text,{text:n.label,style:{color:i,fontSize:`14px`}})]}),n.suffix]},n.id)})})}exports.ContextMenu=h,exports.Popover=m,exports.calculateOverlayPosition=c;