@number10/jsx-components 5.0.0

package/dist/Button.js

@@ -0,0 +1,251 @@
+import { Text as e } from "./primitives/Text.js";
+import { View as t } from "./primitives/View.js";
+import "./primitives.js";
+import { HexColor as n, KNOWN_COMPONENTS as r, applyEffect as i, getGlobalThemeDefaults as a, getPresetWithMode as o, mergeThemes as s, registerComponentDefaultsIfMissing as c, resolveComponentTheme as l, resolveEffect as u, useRef as d, useTheme as f } from "@number10/jsx-core";
+import { jsx as p } from "@number10/jsx-core/jsx-runtime";
+//#region src/Button.tsx
+function m() {
+	let e = o("oceanBlue", "light").colors, t = e.primary.dark.toNumber(), r = e.text.lightest.toNumber(), i = e.surface.lightest.toNumber(), a = e.text.dark.toNumber(), s = e.surface.medium.toNumber(), c = e.text.light.toNumber(), l = e.primary.light.toNumber(), u = e.text.light.toNumber(), d = e.error.dark.toNumber(), f = e.text.lightest.toNumber(), p = { medium: {
+		fontSize: "16px",
+		fontFamily: "Arial",
+		fontStyle: "bold"
+	} };
+	return {
+		variant: "primary",
+		size: "medium",
+		disabledColor: s,
+		disabledTextColor: "#" + new n(c.toString(16).padStart(6, "0")).toString(),
+		disabledIconTint: c,
+		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: {
+			...p.medium,
+			color: `#${r.toString(16).padStart(6, "0")}`
+		},
+		Text: { style: {
+			...p.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: l,
+			borderWidth: 2,
+			textStyle: {
+				color: `#${l.toString(16).padStart(6, "0")}`,
+				fontStyle: "bold"
+			},
+			Icon: { tint: l }
+		},
+		ghost: {
+			backgroundColor: e.surface.light.toNumber(),
+			backgroundAlpha: .18,
+			borderColor: e.border.medium.toNumber(),
+			borderAlpha: .35,
+			borderWidth: 1,
+			textStyle: {
+				color: `#${u.toString(16).padStart(6, "0")}`,
+				fontStyle: "bold"
+			},
+			Icon: { tint: u }
+		},
+		danger: {
+			backgroundColor: d,
+			borderColor: e.error.darkest.toNumber(),
+			textStyle: {
+				color: `#${f.toString(16).padStart(6, "0")}`,
+				fontStyle: "bold"
+			},
+			Icon: { tint: f }
+		},
+		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 }
+		}
+	};
+}
+c("Button", m());
+function h(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 g(e, t, n) {
+	if (!n) return;
+	let r = e[t], i = e[n];
+	return {
+		...r?.[n] ?? {},
+		...i ?? {}
+	};
+}
+function _(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 v(n) {
+	let { children: o, label: c, text: m, onClick: v, disabled: y = !1, variant: b, size: x, width: S, height: C, textStyle: w, iconSize: T, disabledAlpha: E, alpha: D, theme: O, onTouch: k, effect: A, effectConfig: j, ...M } = n, N = f(), P = O ? s(N ?? {}, O) : N, { props: F, nestedTheme: I } = l({
+		componentName: "Button",
+		globalTheme: a(),
+		localTheme: P,
+		explicitProps: M,
+		knownComponents: r
+	}), L = d(null), R = b ?? F.variant ?? "primary", z = x ?? F.size ?? "medium", B = h(h({ ...F }, g(F, "variants", R)), g(F, "sizes", z)), V = B.textStyle || w ? {
+		...B.textStyle ?? {},
+		...w ?? {}
+	} : void 0, H = T ?? B.iconSize, U = E ?? B.disabledAlpha ?? .5, W = B.disabledTextColor ?? F.disabledTextColor ?? V?.color, G = B.disabledIconTint ?? F.disabledIconTint ?? B.iconTint, K = y && W ? {
+		...V ?? {},
+		color: W
+	} : V, q = {
+		...K ? { textStyle: K } : {},
+		...H === void 0 ? {} : { iconSize: H },
+		...y && G !== void 0 ? { Icon: {
+			...B.Icon ?? {},
+			tint: G
+		} } : {}
+	}, J = y ? {
+		...B,
+		backgroundColor: B.disabledColor ?? F.disabledColor ?? B.backgroundColor,
+		backgroundAlpha: U,
+		...D === void 0 ? {} : { alpha: D },
+		...q
+	} : {
+		...B,
+		...D === void 0 ? {} : { alpha: D },
+		...q
+	}, Y = y ? void 0 : (e) => {
+		let t = u({
+			effect: A,
+			effectConfig: j
+		}, J);
+		i(L.current, t.effect, t.effectConfig), k?.(e), v?.();
+	}, X = c ?? m, Z = o ?? (X === void 0 ? null : /* @__PURE__ */ p(e, {
+		text: `${X}`,
+		...K ? { style: K } : {}
+	})), Q = s(I, _(J)), { disabledColor: ee, disabledTextColor: te, disabledIconTint: ne, disabledAlpha: re, effect: ie, effectConfig: ae, textStyle: oe, iconSize: se, variant: ce, size: le, variants: ue, sizes: de, Text: fe, Icon: pe, primary: me, secondary: he, outline: ge, ghost: _e, danger: ve, small: ye, medium: be, large: xe, iconTint: Se, ...$ } = J;
+	return /* @__PURE__ */ p(t, {
+		ref: L,
+		direction: "row",
+		alignItems: "center",
+		justifyContent: "center",
+		enableGestures: !0,
+		...Y ? { onTouch: Y } : {},
+		theme: Q,
+		...$,
+		width: S,
+		height: C,
+		...M,
+		children: Z
+	});
+}
+//#endregion
+export { v as Button };

package/dist/Checkbox.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){return t?e===!1?!0:e===!0?`indeterminate`:!1:e!==!0}function a(e,t){return e===`indeterminate`&&!t?!1:e}function o(n){let{checked:i,disabled:a,size:o,color:s,checkedColor:c,indeterminateColor:l}=n,u=Math.max(2,Math.round(o*.1)),d=Math.max(4,Math.round(o*.22)),f=Math.max(2,Math.round(o*.15)),p=a?.45:1;return(0,r.jsx)(t.View,{width:o,height:o,borderColor:i===!1?s:i===!0?c:l,borderWidth:u,backgroundAlpha:0,cornerRadius:f,alpha:p,justifyContent:`center`,alignItems:`center`,children:i===!0?(0,r.jsx)(e.Text,{text:`✓`,style:{color:`#${c.toString(16).padStart(6,`0`)}`,fontSize:`${Math.round(o*.7)}px`,fontStyle:`bold`},alpha:p}):i===`indeterminate`?(0,r.jsx)(t.View,{width:o-d*2,height:u+1,backgroundColor:l,backgroundAlpha:p,cornerRadius:1}):null})}function s(s){let c=(0,n.useTheme)(),l=s.theme?(0,n.mergeThemes)(c??{},s.theme):c,{props:u,nestedTheme:d}=(0,n.resolveComponentTheme)({componentName:`Checkbox`,globalTheme:(0,n.getGlobalThemeDefaults)(),localTheme:l,knownComponents:n.KNOWN_COMPONENTS}),f=u.size??20,p=u.gap??8,m=s.labelPosition??u.labelPosition??`right`,h=s.disabled??!1,g=u.disabledAlpha??.5,_=s.tristate??!1,[v,y]=(0,n.useState)(a(s.checked??s.defaultChecked??!1,_));(0,n.useEffect)(()=>{s.checked!==void 0&&y(a(s.checked,_))},[s.checked,_]);let b={checked:v,disabled:h,size:f,color:u.color??7829367,checkedColor:u.checkedColor??5025616,indeterminateColor:u.indeterminateColor??u.checkedColor??5025616},x=()=>{if(h)return;let e=i(v,_);s.checked===void 0&&y(e),s.onChange?.(e)},S=s.indicator??s.renderIndicator?.(b)??(0,r.jsx)(o,{...b}),C=s.label&&m!==`none`?(0,r.jsx)(e.Text,{text:s.label,style:u.labelStyle,alpha:h?g:1}):null;return(0,r.jsxs)(t.View,{direction:`row`,alignItems:`center`,enableGestures:!h,onTouch:x,theme:d,gap:p,alpha:h?g:1,children:[m===`left`&&C,S,m!==`left`&&C]},s.key)}exports.Checkbox=s,exports.getNextCheckedState=i,exports.normalizeCheckedState=a;

package/dist/Checkbox.d.ts

@@ -0,0 +1,40 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type CheckboxState = boolean | 'indeterminate';
+export type CheckboxLabelPosition = 'left' | 'right' | 'none';
+export interface CheckboxIndicatorRenderProps {
+    checked: CheckboxState;
+    disabled: boolean;
+    size: number;
+    color: number;
+    checkedColor: number;
+    indeterminateColor: number;
+}
+export interface CheckboxProps {
+    /** Unique key for VDOM identification */
+    key?: string | number | undefined;
+    /** Label text rendered next to the indicator */
+    label?: string;
+    /** Controlled checked state */
+    checked?: CheckboxState;
+    /** Initial state for uncontrolled checkboxes */
+    defaultChecked?: CheckboxState;
+    /** Enables unchecked -> checked -> indeterminate cycling */
+    tristate?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Label position relative to the indicator */
+    labelPosition?: CheckboxLabelPosition;
+    /** Optional custom indicator content (overrides default) */
+    indicator?: VNodeLike;
+    /** Render function for custom indicators */
+    renderIndicator?: (props: CheckboxIndicatorRenderProps) => VNodeLike;
+    /** Optional theme overrides */
+    theme?: PortableComponentPartialTheme<'Checkbox'>;
+    /** Callback when checked state changes */
+    onChange?: (checked: CheckboxState) => void;
+}
+export declare function getNextCheckedState(checked: CheckboxState, tristate: boolean): CheckboxState;
+export declare function normalizeCheckedState(checked: CheckboxState, tristate: boolean): CheckboxState;
+export declare function Checkbox(props: CheckboxProps): VNodeLike;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAWnD,OAAO,KAAK,EAAiB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAMjF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,eAAe,CAAA;AACrD,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAA;AAE7D,MAAM,WAAW,4BAA4B;IAC3C,OAAO,EAAE,aAAa,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,kBAAkB,EAAE,MAAM,CAAA;CAC3B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,gDAAgD;IAChD,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,4BAA4B,KAAK,SAAS,CAAA;IACpE,+BAA+B;IAC/B,KAAK,CAAC,EAAE,6BAA6B,CAAC,UAAU,CAAC,CAAA;IACjD,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;CAC5C;AAMD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,GAAG,aAAa,CAK5F;AAED,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,OAAO,GAAG,aAAa,CAE9F;AAsDD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAqExD"}

package/dist/Checkbox.js

@@ -0,0 +1,84 @@
+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, useEffect as o, useState as s, useTheme as c } from "@number10/jsx-core";
+import { jsx as l, jsxs as u } from "@number10/jsx-core/jsx-runtime";
+//#region src/Checkbox.tsx
+function d(e, t) {
+	return t ? e === !1 ? !0 : e === !0 ? "indeterminate" : !1 : e !== !0;
+}
+function f(e, t) {
+	return e === "indeterminate" && !t ? !1 : e;
+}
+function p(n) {
+	let { checked: r, disabled: i, size: a, color: o, checkedColor: s, indeterminateColor: c } = n, u = Math.max(2, Math.round(a * .1)), d = Math.max(4, Math.round(a * .22)), f = Math.max(2, Math.round(a * .15)), p = i ? .45 : 1;
+	return /* @__PURE__ */ l(t, {
+		width: a,
+		height: a,
+		borderColor: r === !1 ? o : r === !0 ? s : c,
+		borderWidth: u,
+		backgroundAlpha: 0,
+		cornerRadius: f,
+		alpha: p,
+		justifyContent: "center",
+		alignItems: "center",
+		children: r === !0 ? /* @__PURE__ */ l(e, {
+			text: "✓",
+			style: {
+				color: `#${s.toString(16).padStart(6, "0")}`,
+				fontSize: `${Math.round(a * .7)}px`,
+				fontStyle: "bold"
+			},
+			alpha: p
+		}) : r === "indeterminate" ? /* @__PURE__ */ l(t, {
+			width: a - d * 2,
+			height: u + 1,
+			backgroundColor: c,
+			backgroundAlpha: p,
+			cornerRadius: 1
+		}) : null
+	});
+}
+function m(m) {
+	let h = c(), g = m.theme ? i(h ?? {}, m.theme) : h, { props: _, nestedTheme: v } = a({
+		componentName: "Checkbox",
+		globalTheme: r(),
+		localTheme: g,
+		knownComponents: n
+	}), y = _.size ?? 20, b = _.gap ?? 8, x = m.labelPosition ?? _.labelPosition ?? "right", S = m.disabled ?? !1, C = _.disabledAlpha ?? .5, w = m.tristate ?? !1, [T, E] = s(f(m.checked ?? m.defaultChecked ?? !1, w));
+	o(() => {
+		m.checked !== void 0 && E(f(m.checked, w));
+	}, [m.checked, w]);
+	let D = {
+		checked: T,
+		disabled: S,
+		size: y,
+		color: _.color ?? 7829367,
+		checkedColor: _.checkedColor ?? 5025616,
+		indeterminateColor: _.indeterminateColor ?? _.checkedColor ?? 5025616
+	}, O = () => {
+		if (S) return;
+		let e = d(T, w);
+		m.checked === void 0 && E(e), m.onChange?.(e);
+	}, k = m.indicator ?? m.renderIndicator?.(D) ?? /* @__PURE__ */ l(p, { ...D }), A = m.label && x !== "none" ? /* @__PURE__ */ l(e, {
+		text: m.label,
+		style: _.labelStyle,
+		alpha: S ? C : 1
+	}) : null;
+	return /* @__PURE__ */ u(t, {
+		direction: "row",
+		alignItems: "center",
+		enableGestures: !S,
+		onTouch: O,
+		theme: v,
+		gap: b,
+		alpha: S ? C : 1,
+		children: [
+			x === "left" && A,
+			k,
+			x !== "left" && A
+		]
+	}, m.key);
+}
+//#endregion
+export { m as Checkbox, d as getNextCheckedState, f as normalizeCheckedState };

package/dist/Checkbox.test.d.ts

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

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

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

package/dist/ColorPicker.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(`./RadioGroup.cjs`),i=require(`./Slider.cjs`);let a=require(`@number10/jsx-core`),o=require(`@number10/jsx-core/jsx-runtime`);var ee={title:`Color Picker`,tone:`Tone`,vivid:`Vivid`,muted:`Muted`,hue:`Hue`,saturation:`Saturation`,lightness:`Lightness`,close:`X`};function s(e,t,n){return Math.max(t,Math.min(n,e))}function c(e,t,n){return(0,a.hslToNumber)(s(e,0,360)/360,s(t,0,100)/100,s(n,0,100)/100)}function l(e){let t=(0,a.numberToHsl)(e);return{hue:Math.round(t.h*360),saturation:Math.round(t.s*100),lightness:Math.round(t.l*100)}}function u(u){let{value:d,defaultValue:te=3113197,onChange:ne,tone:f,defaultTone:p=`vivid`,onToneChange:re,onClose:m,showCloseButton:ie,showTone:ae=!0,showSwatches:oe=!0,showRgbLabel:se=!0,labels:h,trackLength:g,previewSize:_,gradientSteps:v,theme:y}=u,b=(0,a.useTheme)(),ce=y?(0,a.mergeThemes)(b??{},y):b,{props:x,nestedTheme:S}=(0,a.resolveComponentTheme)({componentName:`ColorPicker`,globalTheme:(0,a.getGlobalThemeDefaults)(),localTheme:ce,knownComponents:a.KNOWN_COMPONENTS}),C=l(d??te),[w,T]=(0,a.useState)(C.hue),[E,D]=(0,a.useState)(C.saturation),[O,k]=(0,a.useState)(C.lightness),[A,j]=(0,a.useState)(f??p),M=(0,a.useRef)(void 0),N=f??A,P=c(w,E,O),F=(0,a.numberToRgb)(P),le=(0,a.numberToHex)(P).toUpperCase(),I={...ee,...x.labels??{},...h??{}},L=x.labelStyle??{color:`#ffffff`,fontSize:`12px`},R=x.valueStyle??L,z=x.titleStyle??{color:`#ffffff`,fontSize:`16px`,fontStyle:`bold`},B=g??x.trackLength??280,V=x.trackHeight??14,H=_??x.previewSize??116,U=v??x.gradientSteps??32,W=x.borderColor??3489874,ue=x.backgroundColor??1515566,de=x.controlBackgroundColor??2240583,G=x.thumbBorderColor??16777215,K=x.swatchSize??18,fe=ie??m!==void 0;(0,a.useEffect)(()=>{if(d===void 0||d===M.current)return;let e=l(d);T(e.hue),D(e.saturation),k(e.lightness)},[d]),(0,a.useEffect)(()=>{f!==void 0&&f!==A&&j(f)},[f,A]);let pe=(e,t,n,r=N)=>{let i=c(e,t,n);M.current=i,ne?.(i,{hue:e,saturation:t,lightness:n,tone:r})},q=(e,t,n,r=N)=>{let i=Math.round(s(e,0,360)),a=Math.round(s(t,0,100)),o=Math.round(s(n,0,100));T(i),D(a),k(o),pe(i,a,o,r)},J=e=>{let t=l(e);q(t.hue,t.saturation,t.lightness)},me=e=>{let t=Math.round(e===`muted`?E*.6:s(E/.6,Math.max(E,70),100));f===void 0&&j(e),re?.(e),q(w,t,O,e)},he=[(0,a.darken)(P,.35),(0,a.darken)(P,.15),P,(0,a.lighten)(P,.2),(0,a.lighten)(P,.4)],Y=x.thumbSize??18,X=Y/2,ge=Math.max(1,Math.round(X*.22)),_e=(0,a.mergeThemes)(S,{Slider:{trackHeight:V,trackBorderRadius:V/2,thumbSize:Y,thumbBorderWidth:2,thumbBorderColor:G}}),Z=e=>()=>(0,o.jsx)(n.View,{width:B,height:V,children:(0,o.jsx)(t.VectorDrawContent,{onDraw:t=>{let n=B/U;for(let r=0;r<U;r+=1){let i=U===1?1:r/(U-1);t.fillStyle(e(i),1),t.fillRect(r*n,0,n+1,V)}}})}),Q=e=>(n,r)=>(0,o.jsx)(t.VectorDrawContent,{scale:r?1.2:1,onDraw:t=>{t.fillStyle(0,.32).fillCircle(0,ge,X),t.fillStyle(e,1).fillCircle(0,0,X),t.lineStyle(2,G,1).strokeCircle(0,0,X),r&&t.lineStyle(2,e,.7).strokeCircle(0,0,X+4)}}),$=(t,r)=>(0,o.jsxs)(n.View,{direction:`row`,width:B,justifyContent:`space-between`,children:[(0,o.jsx)(e.Text,{text:t,style:L}),(0,o.jsx)(e.Text,{text:r,style:R})]});return(0,o.jsxs)(n.View,{direction:`row`,gap:x.gap??18,padding:x.padding??14,backgroundColor:ue,borderColor:W,borderWidth:x.borderWidth??1,cornerRadius:x.cornerRadius??8,alignItems:`center`,theme:S,children:[(0,o.jsxs)(n.View,{gap:x.previewGap??10,width:Math.max(H,132),children:[(0,o.jsx)(n.View,{width:H,height:H,backgroundColor:P,borderColor:W,borderWidth:x.previewBorderWidth??2,cornerRadius:x.previewCornerRadius??8,alignItems:`center`,justifyContent:`center`,children:(0,o.jsx)(e.Text,{text:le,style:x.hexStyle})}),se?(0,o.jsx)(e.Text,{text:I.formatRgb?I.formatRgb(F):`rgb ${F.r}, ${F.g}, ${F.b}`,style:L}):null,oe?(0,o.jsx)(n.View,{direction:`row`,gap:x.swatchGap??6,children:he.map((e,t)=>(0,o.jsx)(n.View,{width:K,height:K,backgroundColor:e,borderColor:W,borderWidth:1,cornerRadius:x.swatchCornerRadius??4,enableGestures:!0,onTouch:()=>J(e)},`swatch-${t}`))}):null]}),(0,o.jsxs)(n.View,{gap:x.controlGap??12,theme:_e,children:[(0,o.jsxs)(n.View,{direction:`row`,justifyContent:`space-between`,alignItems:`center`,width:B,children:[(0,o.jsx)(e.Text,{text:I.title,style:z}),fe?(0,o.jsx)(n.View,{width:x.closeButtonSize??24,height:x.closeButtonSize??24,alignItems:`center`,justifyContent:`center`,backgroundColor:de,backgroundAlpha:x.controlBackgroundAlpha??.65,borderColor:W,borderWidth:1,cornerRadius:x.closeButtonCornerRadius??5,enableGestures:!0,onTouch:()=>m?.(),children:(0,o.jsx)(e.Text,{text:I.close,style:L})}):null]}),ae?(0,o.jsxs)(n.View,{direction:`row`,gap:12,alignItems:`center`,children:[(0,o.jsx)(e.Text,{text:I.tone,style:L}),(0,o.jsx)(r.RadioGroup,{direction:`row`,options:[{value:`vivid`,label:I.vivid},{value:`muted`,label:I.muted}],value:N,onChange:e=>me(e)})]}):null,(0,o.jsxs)(n.View,{gap:6,children:[$(I.hue,I.formatHue?.(w)??`${Math.round(w)}deg`),(0,o.jsx)(i.Slider,{value:w,onChange:e=>q(e,E,O),min:0,max:360,step:1,trackLength:B,renderTrack:Z(e=>c(e*360,100,50)),renderThumb:Q(c(w,100,50))})]}),(0,o.jsxs)(n.View,{gap:6,children:[$(I.saturation,I.formatSaturation?.(E)??`${Math.round(E)}%`),(0,o.jsx)(i.Slider,{value:E,onChange:e=>q(w,e,O),min:0,max:100,step:1,trackLength:B,renderTrack:Z(e=>c(w,e*100,O)),renderThumb:Q(P)})]}),(0,o.jsxs)(n.View,{gap:6,children:[$(I.lightness,I.formatLightness?.(O)??`${Math.round(O)}%`),(0,o.jsx)(i.Slider,{value:O,onChange:e=>q(w,E,e),min:0,max:100,step:1,trackLength:B,renderTrack:Z(e=>c(w,E,e*100)),renderThumb:Q(P)})]})]})]})}exports.ColorPicker=u;

package/dist/ColorPicker.d.ts

@@ -0,0 +1,48 @@
+import { VNodeLike } from '@number10/jsx-core';
+import { PortableComponentPartialTheme } from './theme-types';
+export type ColorPickerTone = 'vivid' | 'muted';
+export interface ColorPickerState {
+    hue: number;
+    saturation: number;
+    lightness: number;
+    tone: ColorPickerTone;
+}
+export interface ColorPickerLabels {
+    title?: string;
+    tone?: string;
+    vivid?: string;
+    muted?: string;
+    hue?: string;
+    saturation?: string;
+    lightness?: string;
+    close?: string;
+    formatHue?: (value: number) => string;
+    formatSaturation?: (value: number) => string;
+    formatLightness?: (value: number) => string;
+    formatRgb?: (rgb: {
+        r: number;
+        g: number;
+        b: number;
+    }) => string;
+}
+export interface ColorPickerProps {
+    key?: string | number | undefined;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (color: number, state: ColorPickerState) => void;
+    tone?: ColorPickerTone;
+    defaultTone?: ColorPickerTone;
+    onToneChange?: (tone: ColorPickerTone) => void;
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    showTone?: boolean;
+    showSwatches?: boolean;
+    showRgbLabel?: boolean;
+    labels?: ColorPickerLabels;
+    trackLength?: number;
+    previewSize?: number;
+    gradientSteps?: number;
+    theme?: PortableComponentPartialTheme<'ColorPicker'>;
+}
+export declare function ColorPicker(props: ColorPickerProps): VNodeLike;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../src/ColorPicker.tsx"],"names":[],"mappings":"AAAA,0CAA0C;AAC1C;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAoBnD,OAAO,KAAK,EAAoB,6BAA6B,EAAE,MAAM,eAAe,CAAA;AAIpF,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,eAAe,CAAA;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;CACjE;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,WAAW,CAAC,EAAE,eAAe,CAAA;IAC7B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAA;IAC9C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,6BAA6B,CAAC,aAAa,CAAC,CAAA;CACrD;AA0CD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,SAAS,CAgV9D"}