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

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

@@ -0,0 +1,456 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { HIDDEN } from "../../glyphs/hidden.js";
+import { ColorThumb } from "../../color-thumb/index.js";
+import { ADJUSTABLE, adjustOf, lengthTo, seatPlaceOf, seats, useTrackGesture } from "../../slider/index.js";
+import { usePickedColor } from "../../swatch/index.js";
+import { Chequer } from "../../chequer/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, StyleSheet, Text, View } from "react-native";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
+import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { useColorSliderState } from "react-stately/useColorSliderState";
+//#region src/components/color-slider/index.tsx
+const STRIP = 16;
+const TARGET = 44;
+const MARGIN = 14;
+/** A vertical slider's height when the call site gives it none. */
+const VERTICAL_HEIGHT = 240;
+const HUES = [
+	0,
+	60,
+	120,
+	180,
+	240,
+	300,
+	360
+];
+const styles = StyleSheet.create({
+	area: { flexGrow: 1 },
+	output: { marginStart: "auto" },
+	root: { width: "100%" },
+	rootVertical: {
+		alignItems: "flex-start",
+		height: VERTICAL_HEIGHT
+	},
+	row: {
+		alignItems: "baseline",
+		flexDirection: "row"
+	},
+	strip: {
+		end: 0,
+		height: STRIP,
+		overflow: "hidden",
+		position: "absolute",
+		start: 0,
+		top: MARGIN
+	},
+	stripVertical: {
+		bottom: 0,
+		overflow: "hidden",
+		position: "absolute",
+		start: MARGIN,
+		top: 0,
+		width: STRIP
+	},
+	track: { height: TARGET },
+	trackVertical: {
+		flexGrow: 1,
+		minHeight: 0,
+		width: TARGET
+	}
+});
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => StyleSheet.create({
+	disabled: { opacity: stateLayerOpacity.disabledContent },
+	label: { color: colors.onSurfaceVariant },
+	output: { color: colors.onSurfaceVariant },
+	root: { gap: spacing.xs },
+	row: { gap: spacing.sm },
+	strip: { borderRadius: radii.sm }
+}));
+/**
+* A slider over one channel of a colour: hue, saturation, lightness, alpha
+* and the rest. 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. One of the two is
+* required.
+*
+* ```tsx
+* <ColorSlider channel="hue" defaultValue="hsl(200, 100%, 50%)" label="Label" />
+* ```
+*
+* **`channel` has to name a channel the value's own space has.** A hex or
+* `rgb()` value is read as RGB, which has no hue, so `channel="hue"` against
+* one throws rather than converting. Pass `colorSpace="hsl"` to convert it,
+* or give the value in the space you mean to slide.
+*
+* A press on the track moves the handle there, and a drag carries it. A
+* screen reader hears an adjustable control named by the label, with the
+* channel's value and the colour's name. `style`, `ref` and `testID` land on
+* the slider as a whole, which is the view a layout positions. 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 ColorSlider(t0) {
+	const $ = c(89);
+	const { "aria-label": ariaLabel, channel, colorSpace, defaultValue, isDisabled: t1, label, onChange, onChangeEnd, orientation: t2, ref, showValue: t3, style, testID, value } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const orientation = t2 === void 0 ? "horizontal" : t2;
+	const showValue = t3 === void 0 ? true : t3;
+	const own = stylesOf(useTheme());
+	const locale = useLocaleOf(void 0);
+	const picked = usePickedColor(value, onChange);
+	let t4;
+	if ($[0] !== channel || $[1] !== colorSpace || $[2] !== defaultValue || $[3] !== isDisabled || $[4] !== locale || $[5] !== onChangeEnd || $[6] !== orientation || $[7] !== picked.onChange || $[8] !== picked.value) {
+		t4 = {
+			channel,
+			colorSpace,
+			defaultValue,
+			isDisabled,
+			locale,
+			onChange: picked.onChange,
+			onChangeEnd,
+			orientation,
+			value: picked.value
+		};
+		$[0] = channel;
+		$[1] = colorSpace;
+		$[2] = defaultValue;
+		$[3] = isDisabled;
+		$[4] = locale;
+		$[5] = onChangeEnd;
+		$[6] = orientation;
+		$[7] = picked.onChange;
+		$[8] = picked.value;
+		$[9] = t4;
+	} else t4 = $[9];
+	const state = useColorSliderState(t4);
+	const labelRole = useTypeRole("labelLarge");
+	const outputRole = useTypeRole("bodySmall");
+	const [length, setLength] = useState(0);
+	const vertical = orientation === "vertical";
+	let t5;
+	if ($[10] !== isDisabled || $[11] !== length || $[12] !== state || $[13] !== testID || $[14] !== vertical) {
+		t5 = {
+			isDisabled,
+			length,
+			state,
+			testID,
+			vertical
+		};
+		$[10] = isDisabled;
+		$[11] = length;
+		$[12] = state;
+		$[13] = testID;
+		$[14] = vertical;
+		$[15] = t5;
+	} else t5 = $[15];
+	const gesture = useTrackGesture(t5);
+	let t6;
+	if ($[16] !== state) {
+		t6 = state.getDisplayColor();
+		$[16] = state;
+		$[17] = t6;
+	} else t6 = $[17];
+	const display = t6;
+	const T0 = View;
+	const t7 = composeStyles(styles.root, vertical ? styles.rootVertical : void 0, own.root, style);
+	const t8 = label === void 0 && !showValue ? null : /* @__PURE__ */ jsxs(View, {
+		"aria-hidden": true,
+		style: composeStyles(styles.row, own.row),
+		children: [label === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(labelRole, own.label),
+			children: label
+		}), showValue ? /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(outputRole, own.output, styles.output),
+			children: state.getThumbValueLabel(0)
+		}) : null]
+	});
+	const T1 = GestureHandlerRootView;
+	const t9 = vertical ? styles.trackVertical : styles.track;
+	const T2 = GestureDetector;
+	const T3 = View;
+	let t10;
+	if ($[18] !== vertical) {
+		t10 = lengthTo(setLength, vertical);
+		$[18] = vertical;
+		$[19] = t10;
+	} else t10 = $[19];
+	const t11 = composeStyles(styles.area, isDisabled ? own.disabled : void 0);
+	const T4 = View;
+	const t12 = composeStyles(vertical ? styles.stripVertical : styles.strip, own.strip);
+	let t13;
+	if ($[20] !== channel) {
+		t13 = channel === "alpha" ? /* @__PURE__ */ jsx(Chequer, {}) : null;
+		$[20] = channel;
+		$[21] = t13;
+	} else t13 = $[21];
+	let t14;
+	if ($[22] !== channel || $[23] !== state) {
+		t14 = stopsOf(state, channel);
+		$[22] = channel;
+		$[23] = state;
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t14 || $[26] !== vertical) {
+		t15 = /* @__PURE__ */ jsx(Gradient, {
+			stops: t14,
+			vertical
+		});
+		$[25] = t14;
+		$[26] = vertical;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== T4 || $[29] !== t12 || $[30] !== t13 || $[31] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(T4, {
+			style: t12,
+			children: [t13, t15]
+		});
+		$[28] = T4;
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t15;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== ariaLabel || $[34] !== channel || $[35] !== label || $[36] !== locale || $[37] !== state.value) {
+		t17 = label ?? ariaLabel ?? state.value.getChannelName(channel, locale);
+		$[33] = ariaLabel;
+		$[34] = channel;
+		$[35] = label;
+		$[36] = locale;
+		$[37] = state.value;
+		$[38] = t17;
+	} else t17 = $[38];
+	let t18;
+	if ($[39] !== state) {
+		t18 = state.getThumbMaxValue(0);
+		$[39] = state;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== state) {
+		t19 = state.getThumbMinValue(0);
+		$[41] = state;
+		$[42] = t19;
+	} else t19 = $[42];
+	let t20;
+	if ($[43] !== state) {
+		t20 = state.getThumbValue(0);
+		$[43] = state;
+		$[44] = t20;
+	} else t20 = $[44];
+	let t21;
+	if ($[45] !== channel || $[46] !== locale || $[47] !== state) {
+		t21 = valueTextOf(state, channel, locale);
+		$[45] = channel;
+		$[46] = locale;
+		$[47] = state;
+		$[48] = t21;
+	} else t21 = $[48];
+	let t22;
+	if ($[49] !== state) {
+		t22 = adjustOf(state, 0);
+		$[49] = state;
+		$[50] = t22;
+	} else t22 = $[50];
+	const t23 = vertical ? seats.seatVertical : seats.seat;
+	let t24;
+	if ($[51] !== state || $[52] !== t23 || $[53] !== vertical) {
+		t24 = composeStyles(t23, seatPlaceOf(state.getThumbPercent(0), vertical));
+		$[51] = state;
+		$[52] = t23;
+		$[53] = vertical;
+		$[54] = t24;
+	} else t24 = $[54];
+	let t25;
+	if ($[55] !== display || $[56] !== state.isDragging) {
+		t25 = /* @__PURE__ */ jsx(ColorThumb, {
+			color: display,
+			dragging: state.isDragging
+		});
+		$[55] = display;
+		$[56] = state.isDragging;
+		$[57] = t25;
+	} else t25 = $[57];
+	let t26;
+	if ($[58] !== isDisabled || $[59] !== t17 || $[60] !== t18 || $[61] !== t19 || $[62] !== t20 || $[63] !== t21 || $[64] !== t22 || $[65] !== t24 || $[66] !== t25) {
+		t26 = /* @__PURE__ */ jsx(View, {
+			accessibilityActions: ADJUSTABLE,
+			accessible: true,
+			"aria-disabled": isDisabled,
+			"aria-label": t17,
+			"aria-valuemax": t18,
+			"aria-valuemin": t19,
+			"aria-valuenow": t20,
+			"aria-valuetext": t21,
+			onAccessibilityAction: t22,
+			role: "slider",
+			style: t24,
+			children: t25
+		});
+		$[58] = isDisabled;
+		$[59] = t17;
+		$[60] = t18;
+		$[61] = t19;
+		$[62] = t20;
+		$[63] = t21;
+		$[64] = t22;
+		$[65] = t24;
+		$[66] = t25;
+		$[67] = t26;
+	} else t26 = $[67];
+	let t27;
+	if ($[68] !== T3 || $[69] !== t10 || $[70] !== t11 || $[71] !== t16 || $[72] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(T3, {
+			onLayout: t10,
+			style: t11,
+			children: [t16, t26]
+		});
+		$[68] = T3;
+		$[69] = t10;
+		$[70] = t11;
+		$[71] = t16;
+		$[72] = t26;
+		$[73] = t27;
+	} else t27 = $[73];
+	let t28;
+	if ($[74] !== T2 || $[75] !== gesture || $[76] !== t27) {
+		t28 = /* @__PURE__ */ jsx(T2, {
+			gesture,
+			children: t27
+		});
+		$[74] = T2;
+		$[75] = gesture;
+		$[76] = t27;
+		$[77] = t28;
+	} else t28 = $[77];
+	let t29;
+	if ($[78] !== T1 || $[79] !== t28 || $[80] !== t9) {
+		t29 = /* @__PURE__ */ jsx(T1, {
+			style: t9,
+			children: t28
+		});
+		$[78] = T1;
+		$[79] = t28;
+		$[80] = t9;
+		$[81] = t29;
+	} else t29 = $[81];
+	let t30;
+	if ($[82] !== T0 || $[83] !== ref || $[84] !== t29 || $[85] !== t7 || $[86] !== t8 || $[87] !== testID) {
+		t30 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style: t7,
+			testID,
+			children: [t8, t29]
+		});
+		$[82] = T0;
+		$[83] = ref;
+		$[84] = t29;
+		$[85] = t7;
+		$[86] = t8;
+		$[87] = testID;
+		$[88] = t30;
+	} else t30 = $[88];
+	return t30;
+}
+function Gradient(t0) {
+	const $ = c(15);
+	const { stops, vertical } = t0;
+	const id = `channel${useId()}`;
+	const reversed = !vertical && I18nManager.isRTL;
+	const t1 = reversed ? 1 : 0;
+	const t2 = vertical || reversed ? 0 : 1;
+	const t3 = vertical ? 1 : 0;
+	let t4;
+	if ($[0] !== stops) {
+		let t5;
+		if ($[2] !== stops.length) {
+			t5 = (stop, index) => /* @__PURE__ */ jsx(Stop, {
+				offset: index / (stops.length - 1),
+				stopColor: stop.toFormat("rgb").withChannelValue("alpha", 1).toString("css"),
+				stopOpacity: stop.getChannelValue("alpha")
+			}, index);
+			$[2] = stops.length;
+			$[3] = t5;
+		} else t5 = $[3];
+		t4 = stops.map(t5);
+		$[0] = stops;
+		$[1] = t4;
+	} else t4 = $[1];
+	let t5;
+	if ($[4] !== id || $[5] !== t1 || $[6] !== t2 || $[7] !== t3 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(Defs, { children: /* @__PURE__ */ jsx(LinearGradient, {
+			id,
+			x1: t1,
+			x2: t2,
+			y1: t3,
+			y2: 0,
+			children: t4
+		}) });
+		$[4] = id;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	const t6 = `url(#${id})`;
+	let t7;
+	if ($[10] !== t6) {
+		t7 = /* @__PURE__ */ jsx(Rect, {
+			fill: t6,
+			height: "100%",
+			width: "100%"
+		});
+		$[10] = t6;
+		$[11] = t7;
+	} else t7 = $[11];
+	let t8;
+	if ($[12] !== t5 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Svg, {
+			...HIDDEN,
+			height: "100%",
+			style: StyleSheet.absoluteFill,
+			width: "100%",
+			children: [t5, t7]
+		});
+		$[12] = t5;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
+}
+function stopsOf(state, channel) {
+	const display = state.getDisplayColor();
+	const min = state.getThumbMinValue(0);
+	const max = state.getThumbMaxValue(0);
+	if (channel === "hue") return HUES.map((hue) => display.withChannelValue("hue", hue));
+	if (channel === "lightness") return [
+		min,
+		(max - min) / 2,
+		max
+	].map((each) => display.withChannelValue(channel, each));
+	return [min, max].map((each) => display.withChannelValue(channel, each));
+}
+function valueTextOf(state, channel, locale) {
+	const words = state.getThumbValueLabel(0);
+	const display = state.getDisplayColor();
+	if (channel === "hue") return `${words}, ${display.getHueName(locale)}`;
+	if (channel === "alpha") return words;
+	return `${words}, ${display.getColorName(locale)}`;
+}
+//#endregion
+export { ColorSlider };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","StyleProp","TextStyle","ViewStyle","Color","ColorChannel","ColorSpace","ColorSliderState","useId","useState","I18nManager","Text","NativeText","StyleSheet","View","GestureDetector","GestureHandlerRootView","Svg","Defs","LinearGradient","Rect","Stop","useColorSliderState","Chequer","ColorThumb","HIDDEN","useLocaleOf","ADJUSTABLE","adjustOf","lengthTo","seatPlaceOf","seats","useTrackGesture","usePickedColor","useTheme","composeStyles","themedStyles","useTypeRole","ColorSliderProps","channel","colorSpace","defaultValue","isDisabled","label","onChange","value","onChangeEnd","orientation","ref","showValue","style","testID","STRIP","TARGET","MARGIN","VERTICAL_HEIGHT","HUES","styles","create","area","flexGrow","output","marginStart","root","width","rootVertical","alignItems","height","row","flexDirection","strip","end","overflow","position","start","top","stripVertical","bottom","track","trackVertical","minHeight","stylesOf","colors","radii","spacing","stateLayerOpacity","disabled","opacity","disabledContent","color","onSurfaceVariant","gap","xs","sm","borderRadius","ColorSlider","t0","$","_c","ariaLabel","t1","t2","t3","undefined","own","locale","picked","t4","state","labelRole","outputRole","length","setLength","vertical","t5","gesture","t6","getDisplayColor","display","T0","t7","t8","getThumbValueLabel","T1","t9","T2","T3","t10","t11","T4","t12","t13","t14","stopsOf","t15","t16","t17","getChannelName","t18","getThumbMaxValue","t19","getThumbMinValue","t20","getThumbValue","t21","valueTextOf","t22","t23","seatVertical","seat","t24","getThumbPercent","t25","isDragging","t26","t27","t28","t29","t30","Gradient","stops","id","reversed","isRTL","stop","index","toFormat","withChannelValue","toString","getChannelValue","map","absoluteFill","min","max","hue","each","words","getHueName","getColorName","_c","NativeText"],"sources":["../../../src/components/color-slider/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewStyle } from 'react-native'\nimport type { Color, ColorChannel, ColorSpace } from 'react-stately'\nimport type { ColorSliderState } from 'react-stately/useColorSliderState'\n\nimport { useId, useState } from 'react'\nimport { I18nManager, Text as NativeText, StyleSheet, View } from 'react-native'\nimport {\n  GestureDetector,\n  GestureHandlerRootView,\n} from 'react-native-gesture-handler'\nimport Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg'\nimport { useColorSliderState } from 'react-stately/useColorSliderState'\n\nimport { Chequer } from '../../chequer'\nimport { ColorThumb } from '../../color-thumb'\nimport { HIDDEN } from '../../glyphs/hidden'\nimport { useLocaleOf } from '../../i18n/provider'\nimport {\n  ADJUSTABLE,\n  adjustOf,\n  lengthTo,\n  seatPlaceOf,\n  seats,\n  useTrackGesture,\n} from '../../slider'\nimport { usePickedColor } from '../../swatch'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's ColorSlider: the sliders page's track, carrying one channel of\n// a colour instead of an active and an inactive part. The page's 16dp strip\n// with its 8dp corner, centred in the 44dp a handle takes, and the same\n// label-large label above it, with the value at the far end of its line in\n// body-small in on surface variant, so it reads as a readout rather than a\n// second label. The gradient along the strip is React Aria's, stop for stop:\n// the channel's range through the colour, with the hue running through its\n// six primaries and lightness through the colour at its middle, so what runs\n// along the strip is the channel rather than anything chosen here.\n//\n// Three things depart from the page, each because a colour slider shows a\n// value the page's slider does not have, and each as web departs.\n//\n// **The handle is a circle carrying the colour, not the page's 4dp bar.** It\n// has to show the value it sits on, and 4dp of a colour is not a colour\n// anyone can read. It is the ringed handle in src/color-thumb, centred in the\n// page's 44dp.\n//\n// **There is no value indicator.** The page's label floats a number over the\n// handle; here the readout beside the label already says it, and the handle\n// itself shows the colour.\n//\n// **There is no stop at the inactive end**, since a channel has no inactive\n// part for it to mark.\n//\n// The alpha channel is the one drawn over a chequer, for the reason\n// src/chequer gives: a track fading to transparent over a light surface and\n// one fading to white are the same pixels without it. React Stately's display\n// colour is opaque on every other channel, so no other track shows one.\n//\n// Disabled, the strip and the handle fade and the label and the readout keep\n// their colour, since a disabled control still has to be readable.\n//\n// **The state is React Stately's `useColorSliderState`**, the one web's React\n// Aria keeps, and presses and drags work as they do on `Slider`, through the\n// same gesture in src/slider. The handle is an adjustable control to a screen\n// reader, named by the label, else `aria-label`, else the channel's name in\n// the provider's locale, as React Aria names it. Its value is the readout's\n// words with the hue's name after them on a hue track and the colour's name\n// on any other but alpha, \"200°, cyan blue\", as React Aria announces it.\n//\n// Vertical, the strip stands up 16dp across and the channel rises from the\n// bottom, 240dp tall until `style` says otherwise. Under a right-to-left\n// layout a horizontal channel runs from the right, as presses are read.\n\ntype ColorSliderProps = {\n  /**\n   * The slider's name for a screen reader, when no `label` is drawn. Left\n   * out with the label too, the slider is named by its channel.\n   */\n  readonly 'aria-label'?: string\n  /** Which channel of the colour the slider moves. */\n  readonly channel: ColorChannel\n  /**\n   * The space the channel is read in, when the value is given in another: a\n   * hex or `rgb()` value has no hue until it is read as `hsl` or `hsb`.\n   */\n  readonly colorSpace?: ColorSpace\n  /**\n   * The colour the slider starts at, when it keeps its own: a CSS colour\n   * string, or a `Color` from `parseColor`.\n   */\n  readonly defaultValue?: Color | string\n  /**\n   * Draws the slider disabled, and takes no presses, drags or screen reader\n   * actions.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** What the slider is for, drawn above the track. */\n  readonly label?: string\n  /** Called with the colour as the channel moves. */\n  readonly onChange?: (value: Color) => void\n  /** Called with the colour once a drag, a press or an action has ended. */\n  readonly onChangeEnd?: (value: Color) => void\n  /**\n   * Along which axis the handle moves. A vertical slider is 240dp tall until\n   * `style` says otherwise.\n   * @default 'horizontal'\n   */\n  readonly orientation?: 'horizontal' | 'vertical'\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the channel's value is shown at the end of the label's line.\n   * @default true\n   */\n  readonly showValue?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /** The colour, for a call site holding it itself with `onChange`. */\n  readonly value?: Color | string\n}\n\n// The page's strip, and the room above and below it that makes up the 44dp\n// a press lands in.\nconst STRIP = 16\nconst TARGET = 44\nconst MARGIN = (TARGET - STRIP) / 2\n\n/** A vertical slider's height when the call site gives it none. */\nconst VERTICAL_HEIGHT = 240\n\n// The hues React Aria runs a hue track through.\nconst HUES = [0, 60, 120, 180, 240, 300, 360]\n\nconst styles = StyleSheet.create({\n  // What a press is read along: the whole of the 44dp.\n  area: {\n    flexGrow: 1,\n  },\n  // The readout, at the far end of the label's line.\n  output: {\n    marginStart: 'auto',\n  },\n  // A slider fills the width it is given, as web's does.\n  root: {\n    width: '100%',\n  },\n  rootVertical: {\n    alignItems: 'flex-start',\n    height: VERTICAL_HEIGHT,\n  },\n  row: {\n    alignItems: 'baseline',\n    flexDirection: 'row',\n  },\n  // The strip, across the middle of the 44dp. It clips the gradient and the\n  // chequer to its corners.\n  strip: {\n    end: 0,\n    height: STRIP,\n    overflow: 'hidden',\n    position: 'absolute',\n    start: 0,\n    top: MARGIN,\n  },\n  stripVertical: {\n    bottom: 0,\n    overflow: 'hidden',\n    position: 'absolute',\n    start: MARGIN,\n    top: 0,\n    width: STRIP,\n  },\n  track: {\n    height: TARGET,\n  },\n  trackVertical: {\n    flexGrow: 1,\n    minHeight: 0,\n    width: TARGET,\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    disabled: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    label: {\n      color: colors.onSurfaceVariant,\n    },\n    output: {\n      color: colors.onSurfaceVariant,\n    },\n    root: {\n      gap: spacing.xs,\n    },\n    row: {\n      gap: spacing.sm,\n    },\n    strip: {\n      borderRadius: radii.sm,\n    },\n  }),\n)\n\n/**\n * A slider over one channel of a colour: hue, saturation, lightness, alpha\n * and the rest. Its state is React Stately's, as web's is: pass `value` with\n * `onChange` to control it, or `defaultValue`, as a CSS colour string or a\n * `Color` from `parseColor`, which this package re-exports. One of the two is\n * required.\n *\n * ```tsx\n * <ColorSlider channel=\"hue\" defaultValue=\"hsl(200, 100%, 50%)\" label=\"Label\" />\n * ```\n *\n * **`channel` has to name a channel the value's own space has.** A hex or\n * `rgb()` value is read as RGB, which has no hue, so `channel=\"hue\"` against\n * one throws rather than converting. Pass `colorSpace=\"hsl\"` to convert it,\n * or give the value in the space you mean to slide.\n *\n * A press on the track moves the handle there, and a drag carries it. A\n * screen reader hears an adjustable control named by the label, with the\n * channel's value and the colour's name. `style`, `ref` and `testID` land on\n * the slider as a whole, which is the view a layout positions. With a\n * `testID`, the drag and the press are registered with Gesture Handler as\n * `<testID>-pan` and `<testID>-tap`, which its `getByGestureTestId` finds in\n * a test.\n *\n * Inside a `ColorPicker` it takes the picker's colour where it is given no\n * `value`, and reports a change to the picker before its own `onChange`.\n */\nfunction ColorSlider({\n  'aria-label': ariaLabel,\n  channel,\n  colorSpace,\n  defaultValue,\n  isDisabled = false,\n  label,\n  onChange,\n  onChangeEnd,\n  orientation = 'horizontal',\n  ref,\n  showValue = true,\n  style,\n  testID,\n  value,\n}: ColorSliderProps) {\n  const own = stylesOf(useTheme())\n  const locale = useLocaleOf(undefined)\n  const picked = usePickedColor(value, onChange)\n  const state = useColorSliderState({\n    channel,\n    colorSpace,\n    defaultValue,\n    isDisabled,\n    locale,\n    onChange: picked.onChange,\n    onChangeEnd,\n    orientation,\n    value: picked.value,\n  })\n  const labelRole = useTypeRole('labelLarge')\n  const outputRole = useTypeRole('bodySmall')\n  const [length, setLength] = useState(0)\n  const vertical = orientation === 'vertical'\n  const gesture = useTrackGesture({\n    isDisabled,\n    length,\n    state,\n    testID,\n    vertical,\n  })\n  const display = state.getDisplayColor()\n\n  return (\n    <View\n      ref={ref}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        vertical ? styles.rootVertical : undefined,\n        own.root,\n        style,\n      )}\n      testID={testID}\n    >\n      {label === undefined && !showValue ? null : (\n        <View aria-hidden style={composeStyles<ViewStyle>(styles.row, own.row)}>\n          {label === undefined ? null : (\n            <NativeText style={composeStyles<TextStyle>(labelRole, own.label)}>\n              {label}\n            </NativeText>\n          )}\n          {showValue ? (\n            <NativeText\n              style={composeStyles<TextStyle>(\n                outputRole,\n                own.output,\n                styles.output,\n              )}\n            >\n              {state.getThumbValueLabel(0)}\n            </NativeText>\n          ) : null}\n        </View>\n      )}\n      <GestureHandlerRootView\n        style={vertical ? styles.trackVertical : styles.track}\n      >\n        <GestureDetector gesture={gesture}>\n          <View\n            onLayout={lengthTo(setLength, vertical)}\n            style={composeStyles<ViewStyle>(\n              styles.area,\n              isDisabled ? own.disabled : undefined,\n            )}\n          >\n            <View\n              style={composeStyles<ViewStyle>(\n                vertical ? styles.stripVertical : styles.strip,\n                own.strip,\n              )}\n            >\n              {channel === 'alpha' ? <Chequer /> : null}\n              <Gradient stops={stopsOf(state, channel)} vertical={vertical} />\n            </View>\n            <View\n              accessibilityActions={ADJUSTABLE}\n              accessible\n              aria-disabled={isDisabled}\n              aria-label={\n                label ??\n                ariaLabel ??\n                state.value.getChannelName(channel, locale)\n              }\n              aria-valuemax={state.getThumbMaxValue(0)}\n              aria-valuemin={state.getThumbMinValue(0)}\n              aria-valuenow={state.getThumbValue(0)}\n              aria-valuetext={valueTextOf(state, channel, locale)}\n              onAccessibilityAction={adjustOf(state, 0)}\n              role=\"slider\"\n              style={composeStyles<ViewStyle>(\n                vertical ? seats.seatVertical : seats.seat,\n                seatPlaceOf(state.getThumbPercent(0), vertical),\n              )}\n            >\n              <ColorThumb color={display} dragging={state.isDragging} />\n            </View>\n          </View>\n        </GestureDetector>\n      </GestureHandlerRootView>\n    </View>\n  )\n}\n\n// The channel along the strip: the stops, evenly spaced, from the strip's\n// start, or from its bottom standing up. Each is drawn opaque at its own\n// opacity, since a gradient's stops take the two apart.\nfunction Gradient({\n  stops,\n  vertical,\n}: {\n  readonly stops: readonly Color[]\n  readonly vertical: boolean\n}) {\n  // A gradient is found by its id, which has to be unique in the page under\n  // React Native Web, as the chequer's pattern is.\n  const id = `channel${useId()}`\n  const reversed = !vertical && I18nManager.isRTL\n\n  return (\n    <Svg {...HIDDEN} height=\"100%\" style={StyleSheet.absoluteFill} width=\"100%\">\n      <Defs>\n        <LinearGradient\n          id={id}\n          x1={reversed ? 1 : 0}\n          x2={vertical || reversed ? 0 : 1}\n          y1={vertical ? 1 : 0}\n          y2={0}\n        >\n          {stops.map((stop, index) => (\n            <Stop\n              // oxlint-disable-next-line react/no-array-index-key -- a stop's place is its identity\n              key={index}\n              offset={index / (stops.length - 1)}\n              stopColor={stop\n                .toFormat('rgb')\n                .withChannelValue('alpha', 1)\n                .toString('css')}\n              stopOpacity={stop.getChannelValue('alpha')}\n            />\n          ))}\n        </LinearGradient>\n      </Defs>\n      <Rect fill={`url(#${id})`} height=\"100%\" width=\"100%\" />\n    </Svg>\n  )\n}\n\n// React Aria's stops for a channel, from its useColorSlider: the hue through\n// its six primaries, lightness from its least through the colour at its\n// middle to its most, which is what keeps the hue showing at all, and every\n// other channel from its least to its most.\nfunction stopsOf(state: ColorSliderState, channel: ColorChannel): Color[] {\n  const display = state.getDisplayColor()\n  const min = state.getThumbMinValue(0)\n  const max = state.getThumbMaxValue(0)\n\n  if (channel === 'hue') {\n    return HUES.map((hue) => display.withChannelValue('hue', hue))\n  }\n  if (channel === 'lightness') {\n    return [min, (max - min) / 2, max].map((each) =>\n      display.withChannelValue(channel, each),\n    )\n  }\n  return [min, max].map((each) => display.withChannelValue(channel, each))\n}\n\n// What a screen reader hears the handle say, as React Aria writes it: the\n// readout's words, then the hue's name on a hue track and the colour's on any\n// other but alpha, whose readout is already all there is to say.\nfunction valueTextOf(\n  state: ColorSliderState,\n  channel: ColorChannel,\n  locale: string,\n) {\n  const words = state.getThumbValueLabel(0)\n  const display = state.getDisplayColor()\n\n  if (channel === 'hue') {\n    return `${words}, ${display.getHueName(locale)}`\n  }\n  if (channel === 'alpha') {\n    return words\n  }\n  return `${words}, ${display.getColorName(locale)}`\n}\n\nexport { ColorSlider }\nexport type { ColorSliderProps }\n"],"mappings":"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"}

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1,46 @@
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { Color } from "react-stately";
+//#region src/components/color-swatch/index.d.ts
+type ColorSwatchProps = Omit<ViewProps, 'children' | 'style'> & {
+  /**
+   * The colour to show: a CSS colour string, or a `Color` from `parseColor`,
+   * which this package re-exports. Left out, the swatch draws the colour of
+   * the `ColorSwatchPicker.Item` it is drawn in.
+   * @default the item's colour, else '#fff0'
+   */
+  readonly color?: Color | string;
+  /**
+   * What the swatch is called, in place of the name the colour gives itself.
+   * A call site's `aria-label` follows either, after a comma.
+   */
+  readonly colorName?: string;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * A colour shown as a value: a square of it, with a chequer behind so
+ * transparency reads as transparency. The colour is a CSS string, or a
+ * `Color` from `parseColor`, which this package re-exports.
+ *
+ * ```tsx
+ * import { ColorSwatch, parseColor } from '@kanso-labs/react-native-kanso-ui'
+ *
+ * <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />
+ * ```
+ *
+ * It names itself from the colour, "light vibrant cyan blue, 60%
+ * transparent", in the `I18nProvider`'s locale, or the device's outside one,
+ * so it needs no label. Pass `colorName` to say something else instead.
+ *
+ * `style`, `ref` and `testID` land on the square, and a `style` there applies
+ * over the swatch's own, so a call site sets another size with `width` and
+ * `height`. The colour fills whatever square it is given.
+ *
+ * Inside a `ColorPicker` it shows the picker's colour where it is given no
+ * `color` and sits in no `ColorSwatchPicker` item.
+ */
+declare function ColorSwatch({ 'aria-label': label, color, colorName, style, ...props }: ColorSwatchProps): import("react").JSX.Element;
+//#endregion
+export { ColorSwatch, type ColorSwatchProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,127 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { PickedColorContext, SwatchColorContext, colorNameOf, colorOf } from "../../swatch/index.js";
+import { Chequer } from "../../chequer/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { use } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/color-swatch/index.tsx
+const SIZE = 40;
+const stylesOf = themedStyles(({ colors, radii }) => StyleSheet.create({
+	ground: {
+		borderRadius: radii.xs,
+		height: SIZE,
+		overflow: "hidden",
+		width: SIZE
+	},
+	hairline: {
+		...StyleSheet.absoluteFill,
+		borderColor: colors.outlineVariant,
+		borderRadius: radii.xs,
+		borderWidth: 1
+	}
+}));
+/**
+* A colour shown as a value: a square of it, with a chequer behind so
+* transparency reads as transparency. The colour is a CSS string, or a
+* `Color` from `parseColor`, which this package re-exports.
+*
+* ```tsx
+* import { ColorSwatch, parseColor } from '@kanso-labs/react-native-kanso-ui'
+*
+* <ColorSwatch color={parseColor('hsla(200, 100%, 50%, 0.4)')} />
+* ```
+*
+* It names itself from the colour, "light vibrant cyan blue, 60%
+* transparent", in the `I18nProvider`'s locale, or the device's outside one,
+* so it needs no label. Pass `colorName` to say something else instead.
+*
+* `style`, `ref` and `testID` land on the square, and a `style` there applies
+* over the swatch's own, so a call site sets another size with `width` and
+* `height`. The colour fills whatever square it is given.
+*
+* Inside a `ColorPicker` it shows the picker's colour where it is given no
+* `color` and sits in no `ColorSwatchPicker` item.
+*/
+function ColorSwatch(t0) {
+	const $ = c(19);
+	let color;
+	let colorName;
+	let label;
+	let props;
+	let style;
+	if ($[0] !== t0) {
+		({"aria-label": label, color, colorName, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = color;
+		$[2] = colorName;
+		$[3] = label;
+		$[4] = props;
+		$[5] = style;
+	} else {
+		color = $[1];
+		colorName = $[2];
+		label = $[3];
+		props = $[4];
+		style = $[5];
+	}
+	const styles = stylesOf(useTheme());
+	const locale = useLocaleOf(void 0);
+	const messages = useMessages();
+	const itemColor = use(SwatchColorContext);
+	const pickedColor = use(PickedColorContext)?.value;
+	const value = colorOf(color ?? itemColor ?? pickedColor ?? "#fff0");
+	const alpha = value.getChannelValue("alpha");
+	const name = colorName ?? colorNameOf(value, locale, messages.transparent);
+	const T0 = View;
+	const t1 = true;
+	const t2 = "img";
+	const t3 = [name, label].filter(Boolean).join(", ");
+	const t4 = composeStyles(styles.ground, style);
+	const t5 = alpha < 1 ? /* @__PURE__ */ jsx(Chequer, {}) : null;
+	const T1 = View;
+	const t6 = composeStyles(StyleSheet.absoluteFill, { backgroundColor: value.toString("css") });
+	let t7;
+	if ($[6] !== T1 || $[7] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T1, { style: t6 });
+		$[6] = T1;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== styles.hairline) {
+		t8 = /* @__PURE__ */ jsx(View, { style: styles.hairline });
+		$[9] = styles.hairline;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== T0 || $[12] !== props || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			accessible: t1,
+			role: t2,
+			...props,
+			"aria-label": t3,
+			style: t4,
+			children: [
+				t5,
+				t7,
+				t8
+			]
+		});
+		$[11] = T0;
+		$[12] = props;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+}
+//#endregion
+export { ColorSwatch };
+
+//# sourceMappingURL=index.js.map