@kanso-labs/react-native-kanso-ui 0.8.0 → 0.10.0

package/dist/components/color-area/index.js

@@ -0,0 +1,630 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { HIDDEN } from "../../glyphs/hidden.js";
+import { ColorThumb } from "../../color-thumb/index.js";
+import { ADJUSTABLE, percentOf } from "../../slider/index.js";
+import { usePickedColor } from "../../swatch/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, StyleSheet, View } from "react-native";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Defs, LinearGradient, Mask, Rect, Stop } from "react-native-svg";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { parseColor } from "react-stately";
+import { useColorAreaState } from "react-stately/useColorAreaState";
+//#region src/components/color-area/index.tsx
+const SLOP = 10;
+const TARGET = 48;
+const HUES = [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+];
+const BLACK = "rgb(0, 0, 0)";
+const WHITE = "rgb(255, 255, 255)";
+const styles = StyleSheet.create({
+	half: { flexGrow: 1 },
+	root: {
+		aspectRatio: 1,
+		boxSizing: "border-box",
+		width: "100%"
+	},
+	seat: {
+		alignItems: "center",
+		flexDirection: "row",
+		height: TARGET,
+		justifyContent: "center",
+		marginStart: -24,
+		marginTop: -24,
+		position: "absolute",
+		width: TARGET
+	},
+	thumb: {
+		alignItems: "center",
+		justifyContent: "center",
+		pointerEvents: "none",
+		...StyleSheet.absoluteFill
+	}
+});
+const stylesOf = themedStyles(({ radii, stateLayerOpacity }) => StyleSheet.create({
+	disabled: { opacity: stateLayerOpacity.disabledContent },
+	plane: {
+		borderRadius: radii.sm,
+		overflow: "hidden",
+		...StyleSheet.absoluteFill
+	}
+}));
+function adjustOf(state, axis, isDisabled) {
+	return (event) => {
+		const { actionName } = event.nativeEvent;
+		if (isDisabled || actionName !== "increment" && actionName !== "decrement") return;
+		const up = actionName === "increment";
+		state.setDragging(true);
+		if (axis === "x") {
+			if (up) state.incrementX(state.xChannelStep);
+			else state.decrementX(state.xChannelStep);
+		} else if (up) state.incrementY(state.yChannelStep);
+		else state.decrementY(state.yChannelStep);
+		state.setDragging(false);
+	};
+}
+/**
+* Two channels of a colour as a plane, with a handle where they meet. Its
+* state is React Stately's, as web's is: pass `value` with `onChange` to
+* control it, or `defaultValue`, as a CSS colour string or a `Color` from
+* `parseColor`, which this package re-exports.
+*
+* ```tsx
+* <ColorArea
+*   defaultValue="hsl(200, 100%, 50%)"
+*   xChannel="saturation"
+*   yChannel="lightness"
+* />
+* ```
+*
+* **`xChannel` and `yChannel` have to name channels the value's own space
+* has.** A hex or `rgb()` value is read as RGB, which has no saturation, so
+* naming one against it throws rather than converting. Pass `colorSpace` to
+* convert it, or give the value in the space you mean to work in.
+*
+* **`alpha` is a channel here only in RGB.** Asked for it in HSL, the plane
+* quietly draws saturation and lightness instead, as React Aria's does.
+*
+* A press on the plane moves the handle there, and a drag carries it. A
+* screen reader adjusts each channel apart, through two halves of the
+* handle, each named by its channel. `style`, `ref` and `testID` land on the
+* square, whose width `style` sets. With a `testID`, the drag and the press
+* are registered with Gesture Handler as `<testID>-pan` and `<testID>-tap`,
+* which its `getByGestureTestId` finds in a test.
+*
+* Inside a `ColorPicker` it takes the picker's colour where it is given no
+* `value`, and reports a change to the picker before its own `onChange`.
+*/
+function ColorArea(t0) {
+	const $ = c(66);
+	const { "aria-label": ariaLabel, colorSpace, defaultValue, isDisabled: t1, onChange, onChangeEnd, ref, style, testID, value, xChannel, yChannel } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const own = stylesOf(useTheme());
+	const locale = useLocaleOf(void 0);
+	const picked = usePickedColor(value, onChange);
+	let t2;
+	if ($[0] !== colorSpace || $[1] !== defaultValue || $[2] !== isDisabled || $[3] !== onChangeEnd || $[4] !== picked.onChange || $[5] !== picked.value || $[6] !== xChannel || $[7] !== yChannel) {
+		t2 = {
+			colorSpace,
+			defaultValue,
+			isDisabled,
+			onChange: picked.onChange,
+			onChangeEnd,
+			value: picked.value,
+			xChannel,
+			yChannel
+		};
+		$[0] = colorSpace;
+		$[1] = defaultValue;
+		$[2] = isDisabled;
+		$[3] = onChangeEnd;
+		$[4] = picked.onChange;
+		$[5] = picked.value;
+		$[6] = xChannel;
+		$[7] = yChannel;
+		$[8] = t2;
+	} else t2 = $[8];
+	const state = useColorAreaState(t2);
+	let t3;
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			height: 0,
+			width: 0
+		};
+		$[9] = t3;
+	} else t3 = $[9];
+	const [size, setSize] = useState(t3);
+	let t4;
+	if ($[10] !== isDisabled || $[11] !== size || $[12] !== state || $[13] !== testID) {
+		t4 = {
+			isDisabled,
+			size,
+			state,
+			testID
+		};
+		$[10] = isDisabled;
+		$[11] = size;
+		$[12] = state;
+		$[13] = testID;
+		$[14] = t4;
+	} else t4 = $[14];
+	const gesture = usePlaneGesture(t4);
+	const { x, y } = state.getThumbPosition();
+	const { channels } = state;
+	const T0 = View;
+	const t5 = composeStyles(styles.root, isDisabled ? own.disabled : void 0, style);
+	const T1 = GestureHandlerRootView;
+	const t6 = StyleSheet;
+	const T2 = GestureDetector;
+	const T3 = View;
+	let t7;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = sizeTo(setSize);
+		$[15] = t7;
+	} else t7 = $[15];
+	const t8 = StyleSheet;
+	const t9 = own.plane;
+	let t10;
+	if ($[16] !== state) {
+		t10 = layersOf(state);
+		$[16] = state;
+		$[17] = t10;
+	} else t10 = $[17];
+	let t11;
+	if ($[18] !== t10) {
+		t11 = /* @__PURE__ */ jsx(Plane, { layers: t10 });
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== own || $[21] !== t11) {
+		t12 = /* @__PURE__ */ jsx(View, {
+			style: t9,
+			children: t11
+		});
+		$[20] = own;
+		$[21] = t11;
+		$[22] = t12;
+	} else t12 = $[22];
+	const T4 = View;
+	const t13 = composeStyles(styles.seat, {
+		start: percentOf(x),
+		top: percentOf(y)
+	});
+	let t14;
+	if ($[23] !== ariaLabel || $[24] !== channels.xChannel || $[25] !== isDisabled || $[26] !== locale || $[27] !== state) {
+		t14 = /* @__PURE__ */ jsx(Half, {
+			axis: "x",
+			channel: channels.xChannel,
+			isDisabled,
+			label: ariaLabel,
+			locale,
+			state
+		});
+		$[23] = ariaLabel;
+		$[24] = channels.xChannel;
+		$[25] = isDisabled;
+		$[26] = locale;
+		$[27] = state;
+		$[28] = t14;
+	} else t14 = $[28];
+	let t15;
+	if ($[29] !== ariaLabel || $[30] !== channels.yChannel || $[31] !== isDisabled || $[32] !== locale || $[33] !== state) {
+		t15 = /* @__PURE__ */ jsx(Half, {
+			axis: "y",
+			channel: channels.yChannel,
+			isDisabled,
+			label: ariaLabel,
+			locale,
+			state
+		});
+		$[29] = ariaLabel;
+		$[30] = channels.yChannel;
+		$[31] = isDisabled;
+		$[32] = locale;
+		$[33] = state;
+		$[34] = t15;
+	} else t15 = $[34];
+	let t16;
+	if ($[35] !== state) {
+		t16 = state.getDisplayColor();
+		$[35] = state;
+		$[36] = t16;
+	} else t16 = $[36];
+	let t17;
+	if ($[37] !== state.isDragging || $[38] !== t16) {
+		t17 = /* @__PURE__ */ jsx(View, {
+			style: styles.thumb,
+			children: /* @__PURE__ */ jsx(ColorThumb, {
+				color: t16,
+				dragging: state.isDragging
+			})
+		});
+		$[37] = state.isDragging;
+		$[38] = t16;
+		$[39] = t17;
+	} else t17 = $[39];
+	let t18;
+	if ($[40] !== T4 || $[41] !== t13 || $[42] !== t14 || $[43] !== t15 || $[44] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(T4, {
+			style: t13,
+			children: [
+				t14,
+				t15,
+				t17
+			]
+		});
+		$[40] = T4;
+		$[41] = t13;
+		$[42] = t14;
+		$[43] = t15;
+		$[44] = t17;
+		$[45] = t18;
+	} else t18 = $[45];
+	let t19;
+	if ($[46] !== T3 || $[47] !== t12 || $[48] !== t18 || $[49] !== t7 || $[50] !== t8.absoluteFill) {
+		t19 = /* @__PURE__ */ jsxs(T3, {
+			onLayout: t7,
+			style: t8.absoluteFill,
+			children: [t12, t18]
+		});
+		$[46] = T3;
+		$[47] = t12;
+		$[48] = t18;
+		$[49] = t7;
+		$[50] = t8.absoluteFill;
+		$[51] = t19;
+	} else t19 = $[51];
+	let t20;
+	if ($[52] !== T2 || $[53] !== gesture || $[54] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T2, {
+			gesture,
+			children: t19
+		});
+		$[52] = T2;
+		$[53] = gesture;
+		$[54] = t19;
+		$[55] = t20;
+	} else t20 = $[55];
+	let t21;
+	if ($[56] !== T1 || $[57] !== t20 || $[58] !== t6.absoluteFill) {
+		t21 = /* @__PURE__ */ jsx(T1, {
+			style: t6.absoluteFill,
+			children: t20
+		});
+		$[56] = T1;
+		$[57] = t20;
+		$[58] = t6.absoluteFill;
+		$[59] = t21;
+	} else t21 = $[59];
+	let t22;
+	if ($[60] !== T0 || $[61] !== ref || $[62] !== t21 || $[63] !== t5 || $[64] !== testID) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			ref,
+			style: t5,
+			testID,
+			children: t21
+		});
+		$[60] = T0;
+		$[61] = ref;
+		$[62] = t21;
+		$[63] = t5;
+		$[64] = testID;
+		$[65] = t22;
+	} else t22 = $[65];
+	return t22;
+}
+function cssOf(color) {
+	return color.toFormat("rgb").withChannelValue("alpha", 1).toString("css");
+}
+function fadeOf(color) {
+	return [{
+		color,
+		offset: 0,
+		opacity: 1
+	}, {
+		color,
+		offset: 1,
+		opacity: 0
+	}];
+}
+function Half(t0) {
+	const $ = c(29);
+	const { axis, channel, isDisabled, label, locale, state } = t0;
+	const color = state.value;
+	let t1;
+	if ($[0] !== channel || $[1] !== color || $[2] !== locale) {
+		t1 = color.getChannelName(channel, locale);
+		$[0] = channel;
+		$[1] = color;
+		$[2] = locale;
+		$[3] = t1;
+	} else t1 = $[3];
+	const name = t1;
+	let t2;
+	if ($[4] !== channel || $[5] !== color) {
+		t2 = color.getChannelRange(channel);
+		$[4] = channel;
+		$[5] = color;
+		$[6] = t2;
+	} else t2 = $[6];
+	const { maxValue, minValue } = t2;
+	const t3 = label === void 0 ? name : `${label}, ${name}`;
+	let t4;
+	if ($[7] !== channel || $[8] !== color) {
+		t4 = color.getChannelValue(channel);
+		$[7] = channel;
+		$[8] = color;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== channel || $[11] !== color || $[12] !== locale) {
+		t5 = color.formatChannelValue(channel, locale);
+		$[10] = channel;
+		$[11] = color;
+		$[12] = locale;
+		$[13] = t5;
+	} else t5 = $[13];
+	let t6;
+	if ($[14] !== locale || $[15] !== state) {
+		t6 = state.getDisplayColor().getColorName(locale);
+		$[14] = locale;
+		$[15] = state;
+		$[16] = t6;
+	} else t6 = $[16];
+	const t7 = `${t5}, ${t6}`;
+	let t8;
+	if ($[17] !== axis || $[18] !== isDisabled || $[19] !== state) {
+		t8 = adjustOf(state, axis, isDisabled);
+		$[17] = axis;
+		$[18] = isDisabled;
+		$[19] = state;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== isDisabled || $[22] !== maxValue || $[23] !== minValue || $[24] !== t3 || $[25] !== t4 || $[26] !== t7 || $[27] !== t8) {
+		t9 = /* @__PURE__ */ jsx(View, {
+			accessibilityActions: ADJUSTABLE,
+			accessible: true,
+			"aria-disabled": isDisabled,
+			"aria-label": t3,
+			"aria-valuemax": maxValue,
+			"aria-valuemin": minValue,
+			"aria-valuenow": t4,
+			"aria-valuetext": t7,
+			onAccessibilityAction: t8,
+			role: "slider",
+			style: styles.half
+		});
+		$[21] = isDisabled;
+		$[22] = maxValue;
+		$[23] = minValue;
+		$[24] = t3;
+		$[25] = t4;
+		$[26] = t7;
+		$[27] = t8;
+		$[28] = t9;
+	} else t9 = $[28];
+	return t9;
+}
+function layersOf(state) {
+	const { xChannel, yChannel, zChannel } = state.channels;
+	const space = state.value.getColorSpace();
+	const zValue = state.value.getChannelValue(zChannel);
+	if (space === "rgb") {
+		const corner = (xEnd, yEnd) => cssOf(parseColor(BLACK).withChannelValue(zChannel, zValue).withChannelValue(xChannel, state.value.getChannelRange(xChannel)[xEnd]).withChannelValue(yChannel, state.value.getChannelRange(yChannel)[yEnd]));
+		return [{
+			axis: "x",
+			stops: rowOf(corner("minValue", "minValue"), corner("maxValue", "minValue"))
+		}, {
+			axis: "x",
+			rising: true,
+			stops: rowOf(corner("minValue", "maxValue"), corner("maxValue", "maxValue"))
+		}];
+	}
+	const base = parseColor(space === "hsl" ? "hsl(0, 100%, 50%)" : "hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
+	const layers = zChannel === "hue" ? [{ color: cssOf(base) }] : [];
+	for (const channel of state.value.getColorChannels()) if (channel !== zChannel) layers.push({
+		axis: channel === xChannel ? "x" : "y",
+		stops: stopsOf(channel, base)
+	});
+	return layers;
+}
+function Plane(t0) {
+	const $ = c(19);
+	const { layers } = t0;
+	const id = `plane${useId()}`;
+	const reversed = I18nManager.isRTL;
+	let t1;
+	if ($[0] !== id || $[1] !== layers) {
+		t1 = layers.some(_temp) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(LinearGradient, {
+			id: `${id}-rise`,
+			x1: 0,
+			x2: 0,
+			y1: 1,
+			y2: 0,
+			children: [/* @__PURE__ */ jsx(Stop, {
+				offset: 0,
+				stopColor: BLACK
+			}), /* @__PURE__ */ jsx(Stop, {
+				offset: 1,
+				stopColor: WHITE
+			})]
+		}), /* @__PURE__ */ jsx(Mask, {
+			id: `${id}-mask`,
+			children: /* @__PURE__ */ jsx(Rect, {
+				fill: `url(#${id}-rise)`,
+				height: "100%",
+				width: "100%"
+			})
+		})] }) : null;
+		$[0] = id;
+		$[1] = layers;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== id || $[4] !== layers) {
+		let t3;
+		if ($[6] !== id) {
+			t3 = (layer_0, index) => "stops" in layer_0 ? /* @__PURE__ */ jsx(LinearGradient, {
+				id: `${id}-${index}`,
+				x1: layer_0.axis === "x" && reversed ? 1 : 0,
+				x2: layer_0.axis === "y" || reversed ? 0 : 1,
+				y1: layer_0.axis === "y" ? 1 : 0,
+				y2: 0,
+				children: layer_0.stops.map(_temp2)
+			}, index) : null;
+			$[6] = id;
+			$[7] = t3;
+		} else t3 = $[7];
+		t2 = layers.map(t3);
+		$[3] = id;
+		$[4] = layers;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(Defs, { children: [t1, t2] });
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== id || $[12] !== layers) {
+		let t5;
+		if ($[14] !== id) {
+			t5 = (layer_1, index_0) => /* @__PURE__ */ jsx(Rect, {
+				fill: "stops" in layer_1 ? `url(#${id}-${index_0})` : layer_1.color,
+				height: "100%",
+				mask: "rising" in layer_1 && layer_1.rising ? `url(#${id}-mask)` : void 0,
+				width: "100%"
+			}, index_0);
+			$[14] = id;
+			$[15] = t5;
+		} else t5 = $[15];
+		t4 = layers.map(t5);
+		$[11] = id;
+		$[12] = layers;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[16] !== t3 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Svg, {
+			...HIDDEN,
+			height: "100%",
+			style: StyleSheet.absoluteFill,
+			width: "100%",
+			children: [t3, t4]
+		});
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+function _temp2(stop) {
+	return /* @__PURE__ */ jsx(Stop, {
+		offset: stop.offset,
+		stopColor: stop.color,
+		stopOpacity: stop.opacity
+	}, `${stop.offset}${stop.color}`);
+}
+function _temp(layer) {
+	return "rising" in layer && layer.rising;
+}
+function rowOf(start, end) {
+	return [{
+		color: start,
+		offset: 0,
+		opacity: 1
+	}, {
+		color: end,
+		offset: 1,
+		opacity: 1
+	}];
+}
+function sizeTo(set) {
+	return ({ nativeEvent }) => {
+		set({
+			height: nativeEvent.layout.height,
+			width: nativeEvent.layout.width
+		});
+	};
+}
+function stopsOf(channel, base) {
+	if (channel === "hue") return HUES.map((hue, index) => ({
+		color: cssOf(base.withChannelValue("hue", hue)),
+		offset: index / (HUES.length - 1),
+		opacity: 1
+	}));
+	if (channel === "saturation") return fadeOf(cssOf(base.withChannelValue("saturation", 0)));
+	if (channel === "lightness") return [
+		{
+			color: BLACK,
+			offset: 0,
+			opacity: 1
+		},
+		{
+			color: BLACK,
+			offset: .5,
+			opacity: 0
+		},
+		{
+			color: WHITE,
+			offset: .5,
+			opacity: 0
+		},
+		{
+			color: WHITE,
+			offset: 1,
+			opacity: 1
+		}
+	];
+	return fadeOf(BLACK);
+}
+/**
+* The plane's pan and tap. Each reads a press's place as a fraction of the
+* way across the plane, from the start, and down it, and sets both channels
+* there. The pan holds the plane as dragged until it lets go, which is what
+* lifts the handle and what `onChangeEnd` waits for; the tap moves it and
+* lets it go at once.
+*
+* Both run on the JavaScript thread, since every move sets React state.
+*/
+function usePlaneGesture({ isDisabled, size, state, testID }) {
+	function setFrom(x, y) {
+		if (size.width <= 0 || size.height <= 0) return;
+		const across = x / size.width;
+		state.setColorFromPoint(I18nManager.isRTL ? 1 - across : across, y / size.height);
+	}
+	const pan = Gesture.Pan().minDistance(SLOP).enabled(!isDisabled).runOnJS(true).onStart(({ x, y }) => {
+		state.setDragging(true);
+		setFrom(x, y);
+	}).onUpdate(({ x, y }) => {
+		setFrom(x, y);
+	}).onFinalize(() => {
+		state.setDragging(false);
+	});
+	const tap = Gesture.Tap().maxDistance(SLOP).enabled(!isDisabled).runOnJS(true).onEnd(({ x, y }, success) => {
+		if (success) {
+			state.setDragging(true);
+			setFrom(x, y);
+			state.setDragging(false);
+		}
+	});
+	return Gesture.Race(testID === void 0 ? pan : pan.withTestId(`${testID}-pan`), testID === void 0 ? tap : tap.withTestId(`${testID}-tap`));
+}
+//#endregion
+export { ColorArea };
+
+//# sourceMappingURL=index.js.map