@number10/jsx-components 5.0.0

package/dist/Badge.js

@@ -0,0 +1,238 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { resolveComponentTheme as n, useTheme as r } from "@number10/jsx-core";
+import { jsx as i, jsxs as a } from "@number10/jsx-core/jsx-runtime";
+//#region src/Badge.tsx
+var o = {
+	neutral: {
+		backgroundColor: 4674921,
+		softBackgroundColor: 1976635,
+		borderColor: 6583435,
+		textColor: "#ffffff",
+		outlineTextColor: "#cbd5e1"
+	},
+	primary: {
+		backgroundColor: 2450411,
+		softBackgroundColor: 1981066,
+		borderColor: 6333946,
+		textColor: "#ffffff",
+		outlineTextColor: "#93c5fd"
+	},
+	success: {
+		backgroundColor: 1483594,
+		softBackgroundColor: 1332013,
+		borderColor: 4906624,
+		textColor: "#ffffff",
+		outlineTextColor: "#86efac"
+	},
+	warning: {
+		backgroundColor: 16096779,
+		softBackgroundColor: 7877903,
+		borderColor: 16498468,
+		textColor: "#111827",
+		outlineTextColor: "#fde68a"
+	},
+	danger: {
+		backgroundColor: 14427686,
+		softBackgroundColor: 8330525,
+		borderColor: 16281969,
+		textColor: "#ffffff",
+		outlineTextColor: "#fecaca"
+	},
+	info: {
+		backgroundColor: 561586,
+		softBackgroundColor: 1461859,
+		borderColor: 2282478,
+		textColor: "#ffffff",
+		outlineTextColor: "#a5f3fc"
+	}
+}, s = {
+	small: {
+		height: 22,
+		padding: {
+			left: 8,
+			right: 8,
+			top: 3,
+			bottom: 3
+		},
+		fontSize: 12,
+		cornerRadius: 11,
+		gap: 5,
+		dotSize: 8
+	},
+	medium: {
+		height: 26,
+		padding: {
+			left: 10,
+			right: 10,
+			top: 4,
+			bottom: 4
+		},
+		fontSize: 14,
+		cornerRadius: 13,
+		gap: 6,
+		dotSize: 10
+	},
+	large: {
+		height: 32,
+		padding: {
+			left: 13,
+			right: 13,
+			top: 5,
+			bottom: 5
+		},
+		fontSize: 18,
+		cornerRadius: 16,
+		gap: 8,
+		dotSize: 12
+	}
+}, c = new Set([
+	"View",
+	"Text",
+	"Image",
+	"Sprite",
+	"Badge",
+	"Tag",
+	"Icon"
+]);
+function l({ count: e, maxCount: t = 99 }) {
+	if (!Number.isFinite(e)) return "0";
+	let n = Math.max(0, Math.floor(e ?? 0)), r = Math.max(0, Math.floor(t));
+	return n > r ? `${r}+` : `${n}`;
+}
+function u(e, t) {
+	let n = o[e];
+	return t === "outline" ? {
+		bg: 0,
+		bgAlpha: 0,
+		border: n.borderColor,
+		borderW: 1,
+		textColor: n.outlineTextColor
+	} : t === "soft" ? {
+		bg: n.softBackgroundColor,
+		bgAlpha: 1,
+		border: n.borderColor,
+		borderW: 1,
+		textColor: n.outlineTextColor
+	} : {
+		bg: n.backgroundColor,
+		bgAlpha: 1,
+		border: n.borderColor,
+		borderW: 0,
+		textColor: n.textColor
+	};
+}
+function d(e) {
+	return s[e];
+}
+function f(a) {
+	let { children: o, label: s, count: f, maxCount: p, dot: m = !1, tone: h, variant: g, size: _, style: v, disabled: y = !1, disabledAlpha: b, theme: x, width: S, height: C, ...w } = a, T = r(), { props: E } = n({
+		componentName: "Badge",
+		localTheme: x ?? T,
+		explicitProps: {
+			tone: h,
+			variant: g,
+			size: _
+		},
+		knownComponents: c
+	}), D = h ?? E.tone ?? "neutral", O = g ?? E.variant ?? "solid", k = d(_ ?? E.size ?? "medium"), A = u(D, O), j = b ?? E.disabledAlpha ?? .5, M = p ?? E.maxCount ?? 99, N = f === void 0 ? s === void 0 ? "" : `${s}` : l({
+		count: f,
+		maxCount: M
+	}), P = {
+		color: A.textColor,
+		fontSize: k.fontSize
+	};
+	if (m) {
+		let e = k.dotSize;
+		return /* @__PURE__ */ i(t, {
+			width: S ?? e,
+			height: C ?? e,
+			backgroundColor: A.bg,
+			backgroundAlpha: A.bgAlpha,
+			borderColor: A.border,
+			borderWidth: A.borderW,
+			cornerRadius: e / 2,
+			...y ? { alpha: j } : {},
+			...w
+		});
+	}
+	return /* @__PURE__ */ i(t, {
+		width: S ?? "auto",
+		height: C ?? k.height,
+		direction: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: k.gap,
+		padding: k.padding,
+		backgroundColor: A.bg,
+		backgroundAlpha: A.bgAlpha,
+		borderColor: A.border,
+		borderWidth: A.borderW,
+		cornerRadius: k.cornerRadius,
+		...y ? { alpha: j } : {},
+		...w,
+		children: o ?? (N ? /* @__PURE__ */ i(e, {
+			text: N,
+			style: {
+				...P,
+				...v
+			}
+		}) : null)
+	});
+}
+function p(e) {
+	return e.count === void 0 ? e.label === void 0 ? "" : `${e.label}` : l(e);
+}
+function m(o) {
+	let { selected: s = !1, onRemove: l, closeLabel: f = "×", tone: p, variant: m, size: h, style: g, theme: _, children: v, label: y, disabled: b = !1, disabledAlpha: x, ...S } = o, C = r(), { props: w } = n({
+		componentName: "Tag",
+		localTheme: _ ?? C,
+		knownComponents: c
+	}), T = p ?? w.tone ?? (s ? "primary" : "neutral"), E = m ?? w.variant ?? (s ? "solid" : "soft"), D = d(h ?? w.size ?? "medium"), O = u(T, E), k = x ?? w.disabledAlpha ?? .5, A = y === void 0 ? "" : `${y}`, j = {
+		color: O.textColor,
+		fontSize: D.fontSize,
+		...g
+	};
+	return /* @__PURE__ */ a(t, {
+		width: "auto",
+		height: D.height,
+		direction: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: D.gap,
+		padding: D.padding,
+		backgroundColor: O.bg,
+		backgroundAlpha: O.bgAlpha,
+		borderColor: O.border,
+		borderWidth: O.borderW,
+		cornerRadius: D.cornerRadius,
+		...b ? { alpha: k } : {},
+		...S,
+		children: [
+			y ? /* @__PURE__ */ i(e, {
+				text: A,
+				style: j
+			}) : null,
+			v,
+			l ? /* @__PURE__ */ i(t, {
+				width: 16,
+				height: 16,
+				justifyContent: "center",
+				alignItems: "center",
+				cornerRadius: 16 / 2,
+				enableGestures: !0,
+				onTouch: () => l(),
+				children: /* @__PURE__ */ i(e, {
+					text: f,
+					style: {
+						...j,
+						fontSize: 16 * .7
+					}
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { f as Badge, m as Tag, l as formatBadgeCount, p as getBadgeText };

package/dist/Badge.test.d.ts

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

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

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

package/dist/BottomSheet.cjs

@@ -0,0 +1 @@
+const e=require(`./primitives/View.cjs`);require(`./primitives.cjs`);const t=require(`./Portal.cjs`);let n=require(`@number10/jsx-core`),r=require(`@number10/jsx-core/jsx-runtime`);var i=1100;function a(a){let{open:o,defaultOpen:s=!1,onOpenChange:c,children:l,height:u=.5,dismissThreshold:d,showHandle:f=!0,depth:p=i,closeOnBackdrop:m=!1,backdropAlpha:h,handleAreaHeight:g=32,renderHandle:_,theme:v}=a,y=(0,n.useTheme)(),b=v?(0,n.mergeThemes)(y??{},v):y,{props:x,nestedTheme:S}=(0,n.resolveComponentTheme)({componentName:`BottomSheet`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:b,knownComponents:n.KNOWN_COMPONENTS}),C=o!==void 0,[w,T]=(0,n.useState)(s),E=C?!!o:w,D=(0,n.useViewportSize)(),O=D.height,k=D.width,A=Math.round(O*Math.min(1,Math.max(.1,u))),j=Math.max(0,A-g),M=d??x.dismissThreshold,[N,P]=(0,n.useState)(0),F=(0,n.useRef)(0),I=(0,n.useRef)(0),L=(0,n.useRef)(j),[R,z]=(0,n.useState)(!1),B=e=>{C||T(e),c?.(e)};E&&!R&&z(!0);let V=e=>{e.stopPropagation();let t=e.state;if(t){if(t===`start`)F.current=0,I.current=0,L.current=Math.max(0,A-e.localY),P(0);else if(t===`move`){let t=e.dy??0;F.current=Math.max(0,F.current+t);let n=Math.min(F.current,j);I.current=F.current,P(n)}else if(t===`end`){let t=e.dy??0;F.current=Math.max(0,F.current+t),F.current>(M??L.current/2)&&B(!1),F.current=0,I.current=0,P(0)}}};if(!R&&!E)return null;let H=E||N>0,U=x.panelCornerRadius??16,W=x.handleWidth??36,G=x.handleHeight??5,K=x.handleColor??6583435,q=x.handleCornerRadius??2,J=x.handleAreaColor,Y=x.backdropColor??0,X=x.backdropAlpha,Z=x.backgroundColor,Q=x.backgroundAlpha,$=x.borderColor,ee=x.borderWidth,te=E?O-A+N:O-A;return(0,r.jsxs)(t.Portal,{depth:p,blockEvents:!1,children:[(0,r.jsx)(e.View,{width:k,height:O,backgroundColor:Y,backgroundAlpha:h??X??.5,enableGestures:!0,visible:E&&m,onTouch:e=>{e.stopPropagation(),B(!1)}}),(0,r.jsxs)(e.View,{width:k,height:A,y:te,backgroundColor:Z,backgroundAlpha:Q??1,borderColor:$,borderWidth:ee,cornerRadius:U,direction:`column`,enableGestures:!0,visible:H,onTouch:e=>e.stopPropagation(),onTouchMove:e=>e.stopPropagation(),theme:S,children:[f?(0,r.jsx)(e.View,{width:k,height:g,alignItems:`center`,justifyContent:`center`,backgroundColor:J,enableGestures:!0,onTouch:e=>e.stopPropagation(),onTouchMove:V,children:_?typeof _==`function`?_({width:W,height:G,color:K,cornerRadius:q}):_:(0,r.jsx)(e.View,{width:W,height:G,backgroundColor:K,cornerRadius:q})}):null,(0,r.jsx)(e.View,{flex:1,width:`fill`,overflow:`hidden`,theme:S,children:l})]})]})}var o={Bar:t=>(0,r.jsx)(e.View,{width:t.width,height:t.height,backgroundColor:t.color,cornerRadius:t.cornerRadius}),Pill:t=>(0,r.jsx)(e.View,{width:t.width*2,height:t.height*3,backgroundColor:t.color,cornerRadius:t.height*1.5}),Grip:t=>(0,r.jsxs)(e.View,{gap:t.height,children:[(0,r.jsx)(e.View,{width:t.width*2,height:t.height,backgroundColor:t.color,cornerRadius:t.cornerRadius}),(0,r.jsx)(e.View,{width:t.width*2,height:t.height,backgroundColor:t.color,cornerRadius:t.cornerRadius}),(0,r.jsx)(e.View,{width:t.width*2,height:t.height,backgroundColor:t.color,cornerRadius:t.cornerRadius})]})};exports.BottomSheet=a,exports.BottomSheetDepth=i,exports.BottomSheetHandle=o;

package/dist/BottomSheet.d.ts

@@ -0,0 +1,72 @@
+import { ChildrenType, VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+/** The default portal depth for BottomSheet — can be overridden via props. */
+export declare const BottomSheetDepth = 1100;
+export interface BottomSheetLabels {
+    close?: string;
+    handle?: string;
+}
+/** Props passed to renderHandle function for custom handle rendering. */
+export interface HandleRenderProps {
+    width: number;
+    height: number;
+    color: number;
+    cornerRadius: number;
+}
+export interface BottomSheetProps {
+    /** Unique key for VDOM identification. */
+    key?: string | number | undefined;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state for uncontrolled usage. */
+    defaultOpen?: boolean;
+    /** Called when open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Sheet content. */
+    children?: ChildrenType;
+    /** Height as fraction of viewport (0–1). Default 0.5. */
+    height?: number;
+    /** Drag distance in pixels to trigger dismiss. Default is half the available drag distance. */
+    dismissThreshold?: number;
+    /** Show drag handle. Default true. */
+    showHandle?: boolean;
+    /** Portal depth. */
+    depth?: number;
+    /** Whether tapping the backdrop closes the sheet. Default false. */
+    closeOnBackdrop?: boolean;
+    /** Backdrop alpha when closeOnBackdrop is active. Default 0.5. */
+    backdropAlpha?: number;
+    /** Height of the drag-handle touch area in px. Also used as max-drag cap. Default 32. */
+    handleAreaHeight?: number;
+    /** Custom handle renderer. Receives themed dimensions. Falls back to default bar. */
+    renderHandle?: VNodeLike | ((props: HandleRenderProps) => VNodeLike);
+    /** Theme overrides. */
+    theme?: PortableComponentPartialTheme<'BottomSheet'>;
+}
+/**
+ * BottomSheet — slide-up panel with backdrop and drag-to-dismiss.
+ *
+ * Portal lifecycle: once opened, the Portal stays mounted to avoid
+ * duplicate backdrop issues from mount/unmount races in the VDOM.
+ * Visibility is controlled via conditional children, not by returning null.
+ */
+export declare function BottomSheet(props: BottomSheetProps): VNodeLike;
+/**
+ * Pre-built handle renderers for use with {@link BottomSheetProps.renderHandle}.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet renderHandle={BottomSheetHandle.Bar} />
+ * <BottomSheet renderHandle={BottomSheetHandle.Pill} />
+ * <BottomSheet renderHandle={(h) => <View width={h.width} height={h.height} backgroundColor={0xff0000} cornerRadius={4} />} />
+ * ```
+ */
+export declare const BottomSheetHandle: {
+    /** Default bar — uses themed width, height, color, cornerRadius. */
+    Bar: (props: HandleRenderProps) => VNodeLike;
+    /** Pill variant — cornerRadius for a fully rounded look. */
+    Pill: (props: HandleRenderProps) => VNodeLike;
+    /** Gripper variant */
+    Grip: (props: HandleRenderProps) => VNodeLike;
+};
+//# sourceMappingURL=BottomSheet.d.ts.map

package/dist/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,YAAY,EAAoC,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACnG,OAAO,KAAK,EAAoB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAkBpF,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,OAAO,CAAA;AAEpC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,yEAAyE;AACzE,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;CACrB;AAED,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,sCAAsC;IACtC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,YAAY,CAAA;IACvB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+FAA+F;IAC/F,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sCAAsC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oEAAoE;IACpE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kEAAkE;IAClE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yFAAyF;IACzF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,qFAAqF;IACrF,YAAY,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,CAAA;IACpE,uBAAuB;IACvB,KAAK,CAAC,EAAE,6BAA6B,CAAC,aAAa,CAAC,CAAA;CACrD;AAMD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CA4L9D;AAMD;;;;;;;;;GASG;AACH,eAAO,MAAM,iBAAiB;IAC5B,oEAAoE;iBACvD,iBAAiB,KAAG,SAAS;IAQ1C,4DAA4D;kBAC9C,iBAAiB,KAAG,SAAS;IAQ3C,sBAAsB;kBACR,iBAAiB,KAAG,SAAS;CAsB5C,CAAA"}

package/dist/BottomSheet.js

@@ -0,0 +1,132 @@
+import { View as e } from "./primitives/View.js";
+import "./primitives.js";
+import { Portal as t } from "./Portal.js";
+import { KNOWN_COMPONENTS as n, getGlobalThemeDefaults as r, mergeThemes as i, resolveComponentTheme as a, useRef as o, useState as s, useTheme as c, useViewportSize as ee } from "@number10/jsx-core";
+import { jsx as l, jsxs as u } from "@number10/jsx-core/jsx-runtime";
+//#region src/BottomSheet.tsx
+var d = 1100;
+function f(f) {
+	let { open: p, defaultOpen: m = !1, onOpenChange: h, children: g, height: _ = .5, dismissThreshold: te, showHandle: v = !0, depth: y = d, closeOnBackdrop: b = !1, backdropAlpha: x, handleAreaHeight: S = 32, renderHandle: C, theme: w } = f, T = c(), E = w ? i(T ?? {}, w) : T, { props: D, nestedTheme: O } = a({
+		componentName: "BottomSheet",
+		globalTheme: r(),
+		localTheme: E,
+		knownComponents: n
+	}), k = p !== void 0, [A, j] = s(m), M = k ? !!p : A, N = ee(), P = N.height, F = N.width, I = Math.round(P * Math.min(1, Math.max(.1, _))), L = Math.max(0, I - S), R = te ?? D.dismissThreshold, [z, B] = s(0), V = o(0), H = o(0), U = o(L), [W, G] = s(!1), K = (e) => {
+		k || j(e), h?.(e);
+	};
+	M && !W && G(!0);
+	let q = (e) => {
+		e.stopPropagation();
+		let t = e.state;
+		if (t) {
+			if (t === "start") V.current = 0, H.current = 0, U.current = Math.max(0, I - e.localY), B(0);
+			else if (t === "move") {
+				let t = e.dy ?? 0;
+				V.current = Math.max(0, V.current + t);
+				let n = Math.min(V.current, L);
+				H.current = V.current, B(n);
+			} else if (t === "end") {
+				let t = e.dy ?? 0;
+				V.current = Math.max(0, V.current + t), V.current > (R ?? U.current / 2) && K(!1), V.current = 0, H.current = 0, B(0);
+			}
+		}
+	};
+	if (!W && !M) return null;
+	let J = M || z > 0, Y = D.panelCornerRadius ?? 16, X = D.handleWidth ?? 36, Z = D.handleHeight ?? 5, Q = D.handleColor ?? 6583435, $ = D.handleCornerRadius ?? 2, ne = D.handleAreaColor, re = D.backdropColor ?? 0, ie = D.backdropAlpha, ae = D.backgroundColor, oe = D.backgroundAlpha, se = D.borderColor, ce = D.borderWidth, le = M ? P - I + z : P - I;
+	return /* @__PURE__ */ u(t, {
+		depth: y,
+		blockEvents: !1,
+		children: [/* @__PURE__ */ l(e, {
+			width: F,
+			height: P,
+			backgroundColor: re,
+			backgroundAlpha: x ?? ie ?? .5,
+			enableGestures: !0,
+			visible: M && b,
+			onTouch: (e) => {
+				e.stopPropagation(), K(!1);
+			}
+		}), /* @__PURE__ */ u(e, {
+			width: F,
+			height: I,
+			y: le,
+			backgroundColor: ae,
+			backgroundAlpha: oe ?? 1,
+			borderColor: se,
+			borderWidth: ce,
+			cornerRadius: Y,
+			direction: "column",
+			enableGestures: !0,
+			visible: J,
+			onTouch: (e) => e.stopPropagation(),
+			onTouchMove: (e) => e.stopPropagation(),
+			theme: O,
+			children: [v ? /* @__PURE__ */ l(e, {
+				width: F,
+				height: S,
+				alignItems: "center",
+				justifyContent: "center",
+				backgroundColor: ne,
+				enableGestures: !0,
+				onTouch: (e) => e.stopPropagation(),
+				onTouchMove: q,
+				children: C ? typeof C == "function" ? C({
+					width: X,
+					height: Z,
+					color: Q,
+					cornerRadius: $
+				}) : C : /* @__PURE__ */ l(e, {
+					width: X,
+					height: Z,
+					backgroundColor: Q,
+					cornerRadius: $
+				})
+			}) : null, /* @__PURE__ */ l(e, {
+				flex: 1,
+				width: "fill",
+				overflow: "hidden",
+				theme: O,
+				children: g
+			})]
+		})]
+	});
+}
+var p = {
+	Bar: (t) => /* @__PURE__ */ l(e, {
+		width: t.width,
+		height: t.height,
+		backgroundColor: t.color,
+		cornerRadius: t.cornerRadius
+	}),
+	Pill: (t) => /* @__PURE__ */ l(e, {
+		width: t.width * 2,
+		height: t.height * 3,
+		backgroundColor: t.color,
+		cornerRadius: t.height * 1.5
+	}),
+	Grip: (t) => /* @__PURE__ */ u(e, {
+		gap: t.height,
+		children: [
+			/* @__PURE__ */ l(e, {
+				width: t.width * 2,
+				height: t.height,
+				backgroundColor: t.color,
+				cornerRadius: t.cornerRadius
+			}),
+			/* @__PURE__ */ l(e, {
+				width: t.width * 2,
+				height: t.height,
+				backgroundColor: t.color,
+				cornerRadius: t.cornerRadius
+			}),
+			/* @__PURE__ */ l(e, {
+				width: t.width * 2,
+				height: t.height,
+				backgroundColor: t.color,
+				cornerRadius: t.cornerRadius
+			})
+		]
+	})
+};
+//#endregion
+export { f as BottomSheet, d as BottomSheetDepth, p as BottomSheetHandle };

package/dist/Button.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(){let e=(0,n.getPresetWithMode)(`oceanBlue`,`light`).colors,t=e.primary.dark.toNumber(),r=e.text.lightest.toNumber(),i=e.surface.lightest.toNumber(),a=e.text.dark.toNumber(),o=e.surface.medium.toNumber(),s=e.text.light.toNumber(),c=e.primary.light.toNumber(),l=e.text.light.toNumber(),u=e.error.dark.toNumber(),d=e.text.lightest.toNumber(),f={medium:{fontSize:`16px`,fontFamily:`Arial`,fontStyle:`bold`}};return{variant:`primary`,size:`medium`,disabledColor:o,disabledTextColor:`#`+new n.HexColor(s.toString(16).padStart(6,`0`)).toString(),disabledIconTint:s,disabledAlpha:.48,height:40,backgroundColor:t,backgroundAlpha:1,borderColor:e.primary.darkest.toNumber(),borderWidth:1,cornerRadius:8,gap:8,padding:{top:8,bottom:8,left:16,right:16},justifyContent:`center`,alignItems:`center`,effect:`press`,effectConfig:{intensity:.94,time:140},iconSize:18,textStyle:{...f.medium,color:`#${r.toString(16).padStart(6,`0`)}`},Text:{style:{...f.medium,color:`#${r.toString(16).padStart(6,`0`)}`}},Icon:{size:18,tint:r},primary:{backgroundColor:t,borderColor:e.primary.darkest.toNumber(),textStyle:{color:`#${r.toString(16).padStart(6,`0`)}`,fontStyle:`bold`},Icon:{tint:r}},secondary:{backgroundColor:i,backgroundAlpha:.92,borderColor:e.border.light.toNumber(),borderWidth:1,textStyle:{color:`#${a.toString(16).padStart(6,`0`)}`,fontStyle:`bold`},Icon:{tint:a}},outline:{backgroundColor:e.primary.dark.toNumber(),backgroundAlpha:.08,borderColor:c,borderWidth:2,textStyle:{color:`#${c.toString(16).padStart(6,`0`)}`,fontStyle:`bold`},Icon:{tint:c}},ghost:{backgroundColor:e.surface.light.toNumber(),backgroundAlpha:.18,borderColor:e.border.medium.toNumber(),borderAlpha:.35,borderWidth:1,textStyle:{color:`#${l.toString(16).padStart(6,`0`)}`,fontStyle:`bold`},Icon:{tint:l}},danger:{backgroundColor:u,borderColor:e.error.darkest.toNumber(),textStyle:{color:`#${d.toString(16).padStart(6,`0`)}`,fontStyle:`bold`},Icon:{tint:d}},small:{height:32,padding:{top:6,bottom:6,left:12,right:12},cornerRadius:6,gap:6,iconSize:15,textStyle:{fontSize:`12px`},Icon:{size:15}},medium:{height:40,padding:{top:8,bottom:8,left:16,right:16},cornerRadius:8,gap:8,iconSize:18,Icon:{size:18}},large:{height:48,padding:{top:10,bottom:10,left:20,right:20},cornerRadius:10,gap:10,iconSize:22,textStyle:{fontSize:`18px`},Icon:{size:22}}}}(0,n.registerComponentDefaultsIfMissing)(`Button`,i());function a(e,t){return t?{...e,...t,textStyle:e.textStyle||t.textStyle?{...e.textStyle??{},...t.textStyle??{}}:void 0,Text:e.Text||t.Text?{...e.Text??{},...t.Text??{},style:e.Text?.style||t.Text?.style?{...e.Text?.style??{},...t.Text?.style??{}}:void 0}:void 0,Icon:e.Icon||t.Icon?{...e.Icon??{},...t.Icon??{}}:void 0}:e}function o(e,t,n){if(!n)return;let r=e[t],i=e[n];return{...r?.[n]??{},...i??{}}}function s(e){let t=e.Text??{},n=e.Icon??{},r=e.textStyle||t.style?{...t.style??{},...e.textStyle??{}}:void 0;return{Text:r?{...t,style:r}:t,Icon:{...n,...e.iconSize===void 0?{}:{size:e.iconSize}}}}function c(i){let{children:c,label:l,text:u,onClick:d,disabled:f=!1,variant:p,size:m,width:h,height:g,textStyle:_,iconSize:v,disabledAlpha:y,alpha:b,theme:x,onTouch:S,effect:C,effectConfig:w,...T}=i,E=(0,n.useTheme)(),D=x?(0,n.mergeThemes)(E??{},x):E,{props:O,nestedTheme:k}=(0,n.resolveComponentTheme)({componentName:`Button`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:D,explicitProps:T,knownComponents:n.KNOWN_COMPONENTS}),A=(0,n.useRef)(null),j=p??O.variant??`primary`,M=m??O.size??`medium`,N=a(a({...O},o(O,`variants`,j)),o(O,`sizes`,M)),P=N.textStyle||_?{...N.textStyle??{},..._??{}}:void 0,F=v??N.iconSize,I=y??N.disabledAlpha??.5,L=N.disabledTextColor??O.disabledTextColor??P?.color,R=N.disabledIconTint??O.disabledIconTint??N.iconTint,z=f&&L?{...P??{},color:L}:P,B={...z?{textStyle:z}:{},...F===void 0?{}:{iconSize:F},...f&&R!==void 0?{Icon:{...N.Icon??{},tint:R}}:{}},V=f?{...N,backgroundColor:N.disabledColor??O.disabledColor??N.backgroundColor,backgroundAlpha:I,...b===void 0?{}:{alpha:b},...B}:{...N,...b===void 0?{}:{alpha:b},...B},H=f?void 0:e=>{let t=(0,n.resolveEffect)({effect:C,effectConfig:w},V);(0,n.applyEffect)(A.current,t.effect,t.effectConfig),S?.(e),d?.()},U=l??u,W=c??(U===void 0?null:(0,r.jsx)(e.Text,{text:`${U}`,...z?{style:z}:{}})),G=(0,n.mergeThemes)(k,s(V)),{disabledColor:ee,disabledTextColor:te,disabledIconTint:K,disabledAlpha:q,effect:J,effectConfig:Y,textStyle:X,iconSize:Z,variant:ne,size:re,variants:ie,sizes:ae,Text:oe,Icon:Q,primary:se,secondary:ce,outline:le,ghost:ue,danger:de,small:fe,medium:pe,large:me,iconTint:he,...$}=V;return(0,r.jsx)(t.View,{ref:A,direction:`row`,alignItems:`center`,justifyContent:`center`,enableGestures:!0,...H?{onTouch:H}:{},theme:G,...$,width:h,height:g,...T,children:W})}exports.Button=c;

package/dist/Button.d.ts

@@ -0,0 +1,61 @@
+import { ChildrenType, EffectConfig, EffectName, GestureEventData, PortableTextStyle, SizeValue, TooltipCallback, VNodeLike } from '@number10/jsx-core';
+import { IconTheme, PortableComponentPartialTheme } from './theme-types';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+export type ButtonSize = 'small' | 'medium' | 'large';
+interface ButtonVariantTheme {
+    backgroundColor?: number | undefined;
+    backgroundAlpha?: number | undefined;
+    borderColor?: number | undefined;
+    borderWidth?: number | undefined;
+    cornerRadius?: number | undefined;
+    textStyle?: PortableTextStyle | undefined;
+    iconSize?: number | undefined;
+    iconTint?: number | undefined;
+    disabledColor?: number | undefined;
+    disabledTextColor?: string | undefined;
+    disabledIconTint?: number | undefined;
+    disabledAlpha?: number | undefined;
+    effect?: EffectName | undefined;
+    effectConfig?: EffectConfig | undefined;
+    /** Nested Text theme */
+    Text?: Partial<PortableTextStyle> | undefined;
+    /** Nested Icon theme */
+    Icon?: Partial<IconTheme> | undefined;
+}
+export interface ButtonTheme extends ButtonVariantTheme {
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    variants?: Partial<Record<ButtonVariant, ButtonVariantTheme>> | undefined;
+    sizes?: Partial<Record<ButtonSize, ButtonVariantTheme>> | undefined;
+}
+export interface ButtonProps {
+    children?: ChildrenType | undefined;
+    key?: string | number | undefined;
+    label?: string | number | undefined;
+    text?: string | number | undefined;
+    onClick?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+    variant?: ButtonVariant | undefined;
+    size?: ButtonSize | undefined;
+    textStyle?: PortableTextStyle | undefined;
+    iconSize?: number | undefined;
+    disabledAlpha?: number | undefined;
+    width?: SizeValue | undefined;
+    height?: SizeValue | undefined;
+    maxWidth?: SizeValue | undefined;
+    maxHeight?: SizeValue | undefined;
+    cornerRadius?: number | undefined;
+    padding?: SizeValue | number | undefined;
+    theme?: PortableComponentPartialTheme<'Button'> | undefined;
+    onTouch?: ((data: GestureEventData) => void) | undefined;
+    onLongPress?: (() => void) | undefined;
+    onTouchMove?: ((data: GestureEventData) => void) | undefined;
+    longPressDuration?: number | undefined;
+    onTooltip?: TooltipCallback | undefined;
+    effect?: EffectName | undefined;
+    effectConfig?: EffectConfig | undefined;
+    alpha?: number | undefined;
+}
+export declare function Button(props: ButtonProps): VNodeLike;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.d.ts.map

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