@number10/jsx-components 5.0.0

package/dist/Popover.d.ts

@@ -0,0 +1,95 @@
+import { ChildrenType, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export interface OverlayAnchorRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface OverlayContentSize {
+    width: number;
+    height: number;
+}
+export interface OverlayPositionOptions {
+    anchor: OverlayAnchorRect;
+    content: OverlayContentSize;
+    placement: PopoverPlacement;
+    offset: number;
+    viewport?: OverlayContentSize | undefined;
+    viewportPadding?: number | undefined;
+}
+export interface OverlayPosition {
+    x: number;
+    y: number;
+    placement: PopoverPlacement;
+}
+export interface PopoverProps {
+    /** Unique key for VDOM identification. */
+    key?: string | number | undefined;
+    /** Trigger content rendered in normal layout. */
+    trigger: ChildrenType;
+    /** Overlay content rendered through Portal. */
+    children: ChildrenType;
+    /** Controlled open state. */
+    isOpen?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Called when open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Placement relative to the trigger. */
+    placement?: PopoverPlacement;
+    /** Distance between trigger and content. */
+    offset?: number;
+    /** Portal depth. */
+    depth?: number;
+    /** Close when clicking outside. */
+    closeOnOutside?: boolean;
+    /** Close on Escape key. */
+    closeOnEscape?: boolean;
+    /** Disable trigger interaction. */
+    disabled?: boolean;
+    /** Optional fixed width override. By default Popover measures its content after layout. */
+    contentWidth?: number;
+    /** Optional fixed height override. By default Popover measures its content after layout. */
+    contentHeight?: number;
+    /** Use trigger width for content width. */
+    matchTriggerWidth?: boolean;
+    /** Padding inside the viewport clamp. */
+    viewportPadding?: number;
+    /** Custom effect name for showing overlay content. */
+    openEffect?: string;
+    /** Custom effect name for hiding overlay content. */
+    closeEffect?: string;
+    /** Open animation duration in milliseconds. */
+    openDuration?: number;
+    /** Close animation duration in milliseconds. */
+    closeDuration?: number;
+    /** Props applied to the trigger wrapper. */
+    triggerProps?: Record<string, unknown>;
+    /** Props applied to the content wrapper. */
+    contentProps?: Record<string, unknown>;
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'Popover'>;
+}
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    danger?: boolean;
+    prefix?: ChildrenType;
+    suffix?: ChildrenType;
+    onSelect?: () => void;
+}
+export interface ContextMenuProps extends Omit<PopoverProps, 'children' | 'contentWidth' | 'contentHeight' | 'contentProps' | 'matchTriggerWidth'> {
+    /** Menu items shown in the context menu. */
+    items: ContextMenuItem[];
+    /** Menu width. */
+    width?: number;
+    /** Called when an item is selected. */
+    onSelect?: (item: ContextMenuItem) => void;
+}
+export declare function calculateOverlayPosition(options: OverlayPositionOptions): OverlayPosition;
+export declare function Popover(props: PopoverProps): VNodeLike;
+export declare function ContextMenu(props: ContextMenuProps): VNodeLike;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover.d.ts.map

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

package/dist/Popover.js

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

package/dist/Portal.cjs

@@ -0,0 +1 @@
+let e=require(`@number10/jsx-core`);function t(t){let n=t.depth??1e3,r=t.blockEvents??!0,{surface:i,error:a,update:o,vdom:s}=(0,e.usePortalSurface)({depth:n,id:(0,e.useMemo)(()=>t.id??`portal-${Date.now()}-${Math.random().toString(36).slice(2,8)}`,[t.id]),blockEvents:r}),c=(0,e.useRef)([]),l=(0,e.useRef)([]),u=(0,e.useRef)(!1),d=e=>{i&&i.context.adapter?.syncPortalEventBlocking?.(i,e)},f=t=>{i&&e.DeferredLayoutQueue.defer(()=>{d(t)})},p=e=>e?(Array.isArray(e)?e.flat(1/0):[e]).filter(e=>!!e&&typeof e==`object`&&`type`in e):[];return(0,e.useEffect)(()=>{if(!i||!s)return;let{mount:e}=s,n=i.root,a=p(t.children),o=[];for(let t of a)if(t){let r=e(n,t);r&&o.push(r)}c.current=o,l.current=a,u.current=!0,f(r)},[i,s,r]),(0,e.useEffect)(()=>{if(!i||!s)return;let e=p(t.children),a=l.current;if(u.current){u.current=!1;return}let{patchVNode:d,mount:m,unmount:h}=s,g=i.root,_=Math.max(a.length,e.length);for(let t=0;t<_;t++){let n=a[t],r=e[t];if(n&&r)d(g,n,r);else if(!n&&r){let e=m(g,r);e&&c.current.push(e)}else n&&!r&&h(n)}l.current=e,n!==i.zIndex&&o({depth:n}),f(r)},[t.children,n,i,s,o,r]),(0,e.useEffect)(()=>{if(i){if(!r){d(!1);return}return f(!0),()=>{d(!1)}}},[i,r]),a&&console.error(`[Portal] ${a}`),null}exports.Portal=t;

package/dist/Portal.d.ts

@@ -0,0 +1,30 @@
+import { ChildrenType, VNodeLike } from '@number10/jsx-core';
+/**
+ * Props for Portal component
+ */
+export interface PortalProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Content to render in portal */
+    children: ChildrenType;
+    /** Z-depth for portal (higher = foreground) */
+    depth?: number;
+    /** Optional custom portal ID */
+    id?: string;
+    /**
+     * Block input events from passing through the portal area.
+     * @default true
+     */
+    blockEvents?: boolean;
+}
+/**
+ * Portable Portal component.
+ *
+ * Renders child VNodes into a separate depth layer using the surface
+ * adapter from the current renderer. Surface lifecycle and VDOM operations
+ * are provided by {@link usePortalSurface}.
+ *
+ * @param props - Portal configuration
+ */
+export declare function Portal(props: PortalProps): VNodeLike;
+//# sourceMappingURL=Portal.d.ts.map

package/dist/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,OAAO,KAAK,EAAE,YAAY,EAAS,SAAS,EAAE,MAAM,oBAAoB,CAAA;AASxE;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,kCAAkC;IAClC,QAAQ,EAAE,YAAY,CAAA;IACtB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,SAAS,CA8IpD"}

package/dist/Portal.js

@@ -0,0 +1,64 @@
+import { DeferredLayoutQueue as e, useEffect as t, useMemo as n, usePortalSurface as r, useRef as i } from "@number10/jsx-core";
+//#region src/Portal.tsx
+function a(a) {
+	let o = a.depth ?? 1e3, s = a.blockEvents ?? !0, { surface: c, error: l, update: u, vdom: d } = r({
+		depth: o,
+		id: n(() => a.id ?? `portal-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`, [a.id]),
+		blockEvents: s
+	}), f = i([]), p = i([]), m = i(!1), h = (e) => {
+		c && c.context.adapter?.syncPortalEventBlocking?.(c, e);
+	}, g = (t) => {
+		c && e.defer(() => {
+			h(t);
+		});
+	}, _ = (e) => e ? (Array.isArray(e) ? e.flat(Infinity) : [e]).filter((e) => !!e && typeof e == "object" && "type" in e) : [];
+	return t(() => {
+		if (!c || !d) return;
+		let { mount: e } = d, t = c.root, n = _(a.children), r = [];
+		for (let i of n) if (i) {
+			let n = e(t, i);
+			n && r.push(n);
+		}
+		f.current = r, p.current = n, m.current = !0, g(s);
+	}, [
+		c,
+		d,
+		s
+	]), t(() => {
+		if (!c || !d) return;
+		let e = _(a.children), t = p.current;
+		if (m.current) {
+			m.current = !1;
+			return;
+		}
+		let { patchVNode: n, mount: r, unmount: i } = d, l = c.root, h = Math.max(t.length, e.length);
+		for (let a = 0; a < h; a++) {
+			let o = t[a], s = e[a];
+			if (o && s) n(l, o, s);
+			else if (!o && s) {
+				let e = r(l, s);
+				e && f.current.push(e);
+			} else o && !s && i(o);
+		}
+		p.current = e, o !== c.zIndex && u({ depth: o }), g(s);
+	}, [
+		a.children,
+		o,
+		c,
+		d,
+		u,
+		s
+	]), t(() => {
+		if (c) {
+			if (!s) {
+				h(!1);
+				return;
+			}
+			return g(!0), () => {
+				h(!1);
+			};
+		}
+	}, [c, s]), l && console.error(`[Portal] ${l}`), null;
+}
+//#endregion
+export { a as Portal };

package/dist/Portal.test.d.ts

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

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

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

package/dist/ProgressBar.cjs

@@ -0,0 +1 @@
+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`);function i(e,t,n){return Number.isFinite(e)?Math.min(Math.max(e,t),n):t}function a(e,t,n){if(!Number.isFinite(t)||!Number.isFinite(n)||t===n)return 0;let r=Math.min(t,n),a=Math.max(t,n);return(i(e,r,a)-r)/(a-r)}function o(e){return`${Math.round(e.percent)}%`}function s(i){let{value:s,min:c=0,max:l=100,orientation:u,label:d,showValue:f,labelPosition:p,formatValue:m,trackColor:h,fillColor:g,borderColor:_,borderWidth:v,cornerRadius:y,labelStyle:b,disabled:x=!1,disabledAlpha:S,theme:C,width:w,height:T,alpha:E,...D}=i,O=(0,n.useTheme)(),k=C?(0,n.mergeThemes)(O??{},C):O,{props:A,nestedTheme:j}=(0,n.resolveComponentTheme)({componentName:`ProgressBar`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:k,knownComponents:n.KNOWN_COMPONENTS}),M=u??A.orientation??`horizontal`,N=a(s,c,l),P=N*100,F=p??A.labelPosition??(f||d?`right`:`none`),I=F!==`none`&&!!(f||d),L=I?[d,f?(m??o)({value:s,min:c,max:l,ratio:N,percent:P}):void 0].filter(Boolean).join(` `):``,R=w??A.width??(M===`horizontal`?240:24),z=T??A.height??(M===`horizontal`?22:160),B=h??A.trackColor??2042167,V=g??A.fillColor??2278750,H=_??A.borderColor??3359061,U=v??A.borderWidth??1,W=y??A.cornerRadius??(M===`horizontal`?11:8),G=b??A.labelStyle??{color:`#ffffff`,fontSize:`12px`},K=S??A.disabledAlpha??.5,q=x?K:E,J=F===`left`||F===`right`?`row`:`column`,Y=I?(0,r.jsx)(e.Text,{text:L,style:G}):null,X=M===`horizontal`?{width:`${P}%`,height:`fill`}:{width:`fill`,height:`${P}%`},Z=(0,r.jsxs)(t.View,{width:R,height:z,direction:M===`horizontal`?`stack`:`column`,justifyContent:M===`vertical`?`end`:`start`,backgroundColor:B,borderColor:H,borderWidth:U,cornerRadius:W,overflow:`hidden`,theme:j,children:[(0,r.jsx)(t.View,{...X,backgroundColor:V,cornerRadius:W}),F===`inside`&&I&&(0,r.jsx)(t.View,{width:`fill`,height:`fill`,justifyContent:`center`,alignItems:`center`,children:Y})]});return(0,r.jsxs)(t.View,{...D,direction:J,alignItems:`center`,gap:A.gap??8,...q===void 0?{}:{alpha:q},theme:j,children:[F===`top`||F===`left`?Y:null,Z,F!==`inside`&&(F===`bottom`||F===`right`)?Y:null]})}exports.ProgressBar=s,exports.clampProgressValue=i,exports.getProgressRatio=a;

package/dist/ProgressBar.d.ts

@@ -0,0 +1,61 @@
+import { PortableTextStyle, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type ProgressBarOrientation = 'horizontal' | 'vertical';
+export type ProgressBarLabelPosition = 'none' | 'inside' | 'top' | 'bottom' | 'left' | 'right';
+export interface ProgressBarFormatProps {
+    value: number;
+    min: number;
+    max: number;
+    ratio: number;
+    percent: number;
+}
+export interface ProgressBarProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Current progress value */
+    value: number;
+    /** Minimum value used for normalization (default 0) */
+    min?: number;
+    /** Maximum value used for normalization (default 100) */
+    max?: number;
+    /** Progress direction (default 'horizontal') */
+    orientation?: ProgressBarOrientation;
+    /** Optional static label prefix */
+    label?: string;
+    /** Show formatted value text */
+    showValue?: boolean;
+    /** Position of the label/value text */
+    labelPosition?: ProgressBarLabelPosition;
+    /** Custom formatter for value text */
+    formatValue?: (props: ProgressBarFormatProps) => string;
+    /** Track/background color */
+    trackColor?: number;
+    /** Filled progress color */
+    fillColor?: number;
+    /** Border color around the track */
+    borderColor?: number;
+    /** Border width around the track */
+    borderWidth?: number;
+    /** Track corner radius */
+    cornerRadius?: number;
+    /** Text style for label/value */
+    labelStyle?: PortableTextStyle;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Alpha applied while disabled */
+    disabledAlpha?: number;
+    /** Theme overrides */
+    theme?: PortableComponentPartialTheme<'ProgressBar'>;
+    /** Width */
+    width?: import('@number10/jsx-core').SizeValue | undefined;
+    /** Height */
+    height?: import('@number10/jsx-core').SizeValue | undefined;
+    /** Alpha transparency */
+    alpha?: number;
+    /** Gap between label and track */
+    gap?: number;
+}
+export declare function clampProgressValue(value: number, min: number, max: number): number;
+export declare function getProgressRatio(value: number, min: number, max: number): number;
+export declare function ProgressBar(props: ProgressBarProps): VNodeLike;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAStE,OAAO,KAAK,EAAE,6BAA6B,EAAoB,MAAM,eAAe,CAAA;AAIpF,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC9D,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAE9F,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gDAAgD;IAChD,WAAW,CAAC,EAAE,sBAAsB,CAAA;IACpC,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,uCAAuC;IACvC,aAAa,CAAC,EAAE,wBAAwB,CAAA;IACxC,sCAAsC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,MAAM,CAAA;IACvD,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iCAAiC;IACjC,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sBAAsB;IACtB,KAAK,CAAC,EAAE,6BAA6B,CAAC,aAAa,CAAC,CAAA;IACpD,YAAY;IACZ,KAAK,CAAC,EAAE,OAAO,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAA;IAC1D,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,oBAAoB,EAAE,SAAS,GAAG,SAAS,CAAA;IAC3D,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAID,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlF;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAQhF;AAQD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CA2H9D"}

package/dist/ProgressBar.js

@@ -0,0 +1,80 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { KNOWN_COMPONENTS as n, getGlobalThemeDefaults as r, mergeThemes as i, resolveComponentTheme as a, useTheme as o } from "@number10/jsx-core";
+import { jsx as s, jsxs as c } from "@number10/jsx-core/jsx-runtime";
+//#region src/ProgressBar.tsx
+function l(e, t, n) {
+	return Number.isFinite(e) ? Math.min(Math.max(e, t), n) : t;
+}
+function u(e, t, n) {
+	if (!Number.isFinite(t) || !Number.isFinite(n) || t === n) return 0;
+	let r = Math.min(t, n), i = Math.max(t, n);
+	return (l(e, r, i) - r) / (i - r);
+}
+function d(e) {
+	return `${Math.round(e.percent)}%`;
+}
+function f(l) {
+	let { value: f, min: p = 0, max: m = 100, orientation: h, label: g, showValue: _, labelPosition: v, formatValue: y, trackColor: b, fillColor: x, borderColor: S, borderWidth: C, cornerRadius: w, labelStyle: T, disabled: E = !1, disabledAlpha: ee, theme: D, width: O, height: k, alpha: A, ...j } = l, M = o(), N = D ? i(M ?? {}, D) : M, { props: P, nestedTheme: F } = a({
+		componentName: "ProgressBar",
+		globalTheme: r(),
+		localTheme: N,
+		knownComponents: n
+	}), I = h ?? P.orientation ?? "horizontal", L = u(f, p, m), R = L * 100, z = v ?? P.labelPosition ?? (_ || g ? "right" : "none"), B = z !== "none" && !!(_ || g), V = B ? [g, _ ? (y ?? d)({
+		value: f,
+		min: p,
+		max: m,
+		ratio: L,
+		percent: R
+	}) : void 0].filter(Boolean).join(" ") : "", H = O ?? P.width ?? (I === "horizontal" ? 240 : 24), U = k ?? P.height ?? (I === "horizontal" ? 22 : 160), W = b ?? P.trackColor ?? 2042167, G = x ?? P.fillColor ?? 2278750, K = S ?? P.borderColor ?? 3359061, q = C ?? P.borderWidth ?? 1, J = w ?? P.cornerRadius ?? (I === "horizontal" ? 11 : 8), Y = T ?? P.labelStyle ?? {
+		color: "#ffffff",
+		fontSize: "12px"
+	}, X = ee ?? P.disabledAlpha ?? .5, Z = E ? X : A, Q = z === "left" || z === "right" ? "row" : "column", $ = B ? /* @__PURE__ */ s(e, {
+		text: V,
+		style: Y
+	}) : null, te = I === "horizontal" ? {
+		width: `${R}%`,
+		height: "fill"
+	} : {
+		width: "fill",
+		height: `${R}%`
+	}, ne = /* @__PURE__ */ c(t, {
+		width: H,
+		height: U,
+		direction: I === "horizontal" ? "stack" : "column",
+		justifyContent: I === "vertical" ? "end" : "start",
+		backgroundColor: W,
+		borderColor: K,
+		borderWidth: q,
+		cornerRadius: J,
+		overflow: "hidden",
+		theme: F,
+		children: [/* @__PURE__ */ s(t, {
+			...te,
+			backgroundColor: G,
+			cornerRadius: J
+		}), z === "inside" && B && /* @__PURE__ */ s(t, {
+			width: "fill",
+			height: "fill",
+			justifyContent: "center",
+			alignItems: "center",
+			children: $
+		})]
+	});
+	return /* @__PURE__ */ c(t, {
+		...j,
+		direction: Q,
+		alignItems: "center",
+		gap: P.gap ?? 8,
+		...Z === void 0 ? {} : { alpha: Z },
+		theme: F,
+		children: [
+			z === "top" || z === "left" ? $ : null,
+			ne,
+			z !== "inside" && (z === "bottom" || z === "right") ? $ : null
+		]
+	});
+}
+//#endregion
+export { f as ProgressBar, l as clampProgressValue, u as getProgressRatio };

package/dist/ProgressBar.test.d.ts

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

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

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

package/dist/ProgressView.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/Text.cjs`),t=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const n=require(`./Button.cjs`),r=require(`./ActivityIndicator.cjs`),i=require(`./ProgressBar.cjs`);let a=require(`@number10/jsx-core`),o=require(`@number10/jsx-core/jsx-runtime`);function s(s){let{value:c,min:l=0,max:u=100,indeterminate:d=!1,label:f,showPercentage:p=!1,showCancel:m=!1,onCancel:h,labels:g,progressBarProps:_,theme:v,...y}=s,b=(0,a.useTheme)(),x=v?(0,a.mergeThemes)(b??{},v):b,{props:S,nestedTheme:C}=(0,a.resolveComponentTheme)({componentName:`ProgressView`,globalTheme:(0,a.getGlobalThemeDefaults)(),localTheme:x,knownComponents:a.KNOWN_COMPONENTS}),w={...S.labels??{},...g??{}},T=S.gap??8,E=S.barHeight??24,D=S.labelStyle??{color:`#e0e7ff`,fontSize:`14px`},O=S.percentageStyle??{color:`#9fb3c8`,fontSize:`13px`},k=c===void 0?void 0:Math.round((c-l)/(u-l)*100);return(0,o.jsxs)(t.View,{direction:`column`,gap:T,width:S.width??`fill`,...y,theme:C,children:[(f||p)&&!d?(0,o.jsxs)(t.View,{direction:`row`,justifyContent:`space-between`,width:`fill`,children:[f?(0,o.jsx)(e.Text,{text:f,style:D}):(0,o.jsx)(t.View,{}),p&&k!==void 0?(0,o.jsx)(e.Text,{text:`${k}%`,style:O}):null]}):null,d?(0,o.jsx)(r.ActivityIndicator,{...f||w.loading?{label:f??w.loading}:{},theme:C}):(0,o.jsx)(i.ProgressBar,{value:c??0,min:l,max:u,height:E,width:`fill`,..._,theme:C}),m&&h?(0,o.jsx)(t.View,{alignItems:`center`,width:`fill`,children:(0,o.jsx)(n.Button,{variant:`ghost`,size:S.cancelButtonSize??`small`,onClick:h,children:(0,o.jsx)(e.Text,{text:w.cancel??`Cancel`})})}):null]})}exports.ProgressView=s;