@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/components/slider/index.js

@@ -0,0 +1,673 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { ADJUSTABLE, adjustOf, lengthTo, percentOf, seatPlaceOf, seats, useTrackGesture } from "../../slider/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { NumberFormatter } from "@internationalized/number";
+import { GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { useSliderState } from "react-stately/useSliderState";
+//#region src/components/slider/index.tsx
+const GAP = 6;
+const HANDLE_WIDTH = 4;
+/** The handle's width while it is dragged. */
+const HANDLE_PRESSED = 2;
+/** How far a part stops short of a handle's centre. */
+const CLEAR = 8;
+/** A stop's size. */
+const STOP = 4;
+/** The corner a part turns to a handle. */
+const INNER_CORNER = 2;
+/** MDC-Android's padding either side of the inset icon. */
+const ICON_PADDING = 10;
+/** The value indicator's height and its narrowest width. */
+const INDICATOR_HEIGHT = 44;
+const INDICATOR_MIN_WIDTH = 48;
+/** A vertical slider's height when the call site gives it none. */
+const VERTICAL_HEIGHT = 240;
+const SIZES = {
+	lg: {
+		corner: "lg",
+		handle: 68,
+		icon: 24,
+		track: 56
+	},
+	md: {
+		corner: "md",
+		handle: 52,
+		icon: 24,
+		track: 40
+	},
+	sm: {
+		corner: "sm",
+		handle: 44,
+		track: 24
+	},
+	xl: {
+		corner: "xl",
+		handle: 108,
+		icon: 32,
+		track: 96
+	},
+	xs: {
+		corner: "sm",
+		handle: 44,
+		track: 16
+	}
+};
+const AT_END = {
+	fraction: 0,
+	px: 0
+};
+const NO_STEPS = [];
+const styles = StyleSheet.create({
+	area: { flexGrow: 1 },
+	indicator: {
+		alignItems: "center",
+		height: INDICATOR_HEIGHT,
+		justifyContent: "center",
+		minWidth: INDICATOR_MIN_WIDTH,
+		position: "absolute"
+	},
+	indicatorHorizontal: { bottom: "100%" },
+	indicatorVertical: { end: "100%" },
+	innerEnd: {
+		borderBottomEndRadius: INNER_CORNER,
+		borderTopEndRadius: INNER_CORNER
+	},
+	innerEndVertical: {
+		borderTopEndRadius: INNER_CORNER,
+		borderTopStartRadius: INNER_CORNER
+	},
+	innerStart: {
+		borderBottomStartRadius: INNER_CORNER,
+		borderTopStartRadius: INNER_CORNER
+	},
+	innerStartVertical: {
+		borderBottomEndRadius: INNER_CORNER,
+		borderBottomStartRadius: INNER_CORNER
+	},
+	part: {
+		overflow: "hidden",
+		position: "absolute"
+	},
+	root: { width: "100%" },
+	rootVertical: {
+		alignItems: "flex-start",
+		height: VERTICAL_HEIGHT
+	},
+	stop: {
+		height: STOP,
+		position: "absolute",
+		width: STOP
+	},
+	stopEnd: { end: GAP },
+	stopEndVertical: { top: GAP },
+	stopStart: { start: GAP },
+	stopStartVertical: { bottom: GAP }
+});
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => {
+	const disabledContent = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	return StyleSheet.create({
+		active: { backgroundColor: colors.primary },
+		activeDisabled: { backgroundColor: disabledContent },
+		handle: {
+			backgroundColor: colors.primary,
+			borderRadius: radii.pill
+		},
+		handleDisabled: { backgroundColor: disabledContent },
+		inactive: { backgroundColor: colors.secondaryContainer },
+		inactiveDisabled: { backgroundColor: withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer) },
+		indicator: {
+			backgroundColor: colors.inverseSurface,
+			borderRadius: radii.pill,
+			marginBottom: spacing.md,
+			paddingHorizontal: spacing.md
+		},
+		indicatorText: {
+			color: colors.inverseOnSurface,
+			textAlign: "center"
+		},
+		indicatorVertical: {
+			marginBottom: 0,
+			marginEnd: spacing.md
+		},
+		label: { color: colors.onSurfaceVariant },
+		root: { gap: spacing.xs },
+		stop: {
+			backgroundColor: colors.onSecondaryContainer,
+			borderRadius: radii.circle
+		},
+		stopActive: { backgroundColor: colors.onPrimary },
+		stopActiveDisabled: { backgroundColor: colors.inverseOnSurface },
+		stopDisabled: { backgroundColor: disabledContent }
+	});
+});
+function after(fraction) {
+	return {
+		fraction,
+		px: CLEAR
+	};
+}
+function before(fraction) {
+	return {
+		fraction: 1 - fraction,
+		px: CLEAR
+	};
+}
+function Handle(t0) {
+	const $ = c(23);
+	const { index, metrics, name, state, vertical } = t0;
+	const own = stylesOf(useTheme());
+	const labelRole = useTypeRole("labelLarge");
+	let t1;
+	if ($[0] !== index || $[1] !== state) {
+		t1 = state.isThumbDragging(index);
+		$[0] = index;
+		$[1] = state;
+		$[2] = t1;
+	} else t1 = $[2];
+	const dragging = t1;
+	const narrowing = useHandleMotion(dragging, vertical);
+	const t2 = state.isDisabled;
+	let t3;
+	if ($[3] !== index || $[4] !== state) {
+		t3 = state.getThumbMaxValue(index);
+		$[3] = index;
+		$[4] = state;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== index || $[7] !== state) {
+		t4 = state.getThumbMinValue(index);
+		$[6] = index;
+		$[7] = state;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== index || $[10] !== state) {
+		t5 = state.getThumbValue(index);
+		$[9] = index;
+		$[10] = state;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== index || $[13] !== state) {
+		t6 = state.getThumbValueLabel(index);
+		$[12] = index;
+		$[13] = state;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== index || $[16] !== state) {
+		t7 = adjustOf(state, index);
+		$[15] = index;
+		$[16] = state;
+		$[17] = t7;
+	} else t7 = $[17];
+	const t8 = vertical ? seats.seatVertical : seats.seat;
+	let t9;
+	if ($[18] !== index || $[19] !== state || $[20] !== t8 || $[21] !== vertical) {
+		t9 = composeStyles(t8, seatPlaceOf(state.getThumbPercent(index), vertical));
+		$[18] = index;
+		$[19] = state;
+		$[20] = t8;
+		$[21] = vertical;
+		$[22] = t9;
+	} else t9 = $[22];
+	return /* @__PURE__ */ jsxs(View, {
+		accessibilityActions: ADJUSTABLE,
+		accessible: true,
+		"aria-disabled": t2,
+		"aria-label": name,
+		"aria-valuemax": t3,
+		"aria-valuemin": t4,
+		"aria-valuenow": t5,
+		"aria-valuetext": t6,
+		onAccessibilityAction: t7,
+		role: "slider",
+		style: t9,
+		children: [/* @__PURE__ */ jsx(Animated.View, { style: composeStyles(own.handle, handleLengthOf(metrics, vertical), state.isDisabled ? own.handleDisabled : void 0, narrowing) }), dragging ? /* @__PURE__ */ jsx(View, {
+			"aria-hidden": true,
+			style: composeStyles(styles.indicator, vertical ? styles.indicatorVertical : styles.indicatorHorizontal, own.indicator, vertical ? own.indicatorVertical : void 0),
+			children: /* @__PURE__ */ jsx(Text, {
+				numberOfLines: 1,
+				style: composeStyles(labelRole, own.indicatorText),
+				children: state.getThumbValueLabel(index)
+			})
+		}) : null]
+	});
+}
+function handleLengthOf({ handle }, vertical) {
+	return vertical ? { width: handle } : { height: handle };
+}
+function iconPlaceOf({ track }, size, vertical) {
+	const across = (track - size) / 2;
+	return {
+		alignItems: "center",
+		height: size,
+		justifyContent: "center",
+		position: "absolute",
+		width: size,
+		...vertical ? {
+			bottom: ICON_PADDING,
+			start: across
+		} : {
+			start: ICON_PADDING,
+			top: across
+		}
+	};
+}
+function iconStyleOf(color, size) {
+	return {
+		color,
+		size
+	};
+}
+function innerCornersOf(part, vertical) {
+	const start = vertical ? styles.innerStartVertical : styles.innerStart;
+	const end = vertical ? styles.innerEndVertical : styles.innerEnd;
+	return composeStyles(part.start === AT_END ? void 0 : start, part.end === AT_END ? void 0 : end);
+}
+function InsetIcon(t0) {
+	const $ = c(13);
+	const { icon, isDisabled, length, metrics, part, vertical } = t0;
+	const { colors } = useTheme();
+	const size = metrics.icon ?? 0;
+	const t1 = isDisabled ? colors.inverseOnSurface : colors.onPrimary;
+	let t2;
+	if ($[0] !== size || $[1] !== t1) {
+		t2 = iconStyleOf(t1, size);
+		$[0] = size;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	const slot = t2;
+	if (lengthOf(part, length) < size + 20) return null;
+	let t3;
+	if ($[3] !== metrics || $[4] !== size || $[5] !== vertical) {
+		t3 = iconPlaceOf(metrics, size, vertical);
+		$[3] = metrics;
+		$[4] = size;
+		$[5] = vertical;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== icon || $[8] !== slot) {
+		t4 = /* @__PURE__ */ jsx(IconStyleContext, {
+			value: slot,
+			children: icon
+		});
+		$[7] = icon;
+		$[8] = slot;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(View, {
+			style: t3,
+			children: t4
+		});
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+function lengthOf({ end, start }, length) {
+	return (1 - start.fraction - end.fraction) * length - start.px - end.px;
+}
+function nameOf(own, group) {
+	const words = [own, group].filter((each) => each !== void 0 && each !== "");
+	return words.length === 0 ? void 0 : words.join(" ");
+}
+function partColourOf(own, active, isDisabled) {
+	if (active) return isDisabled ? own.activeDisabled : own.active;
+	return isDisabled ? own.inactiveDisabled : own.inactive;
+}
+function partOf({ corner, handle, track }, { radii }, vertical) {
+	const across = (handle - track) / 2;
+	return vertical ? {
+		borderRadius: radii[corner],
+		start: across,
+		width: track
+	} : {
+		borderRadius: radii[corner],
+		height: track,
+		top: across
+	};
+}
+function partsOf(state) {
+	const fractions = state.values.map((_, index) => state.getThumbPercent(index));
+	const first = fractions[0] ?? 0;
+	const last = fractions.at(-1) ?? 0;
+	const range = fractions.length > 1;
+	const active = {
+		active: true,
+		end: before(last),
+		name: "active",
+		start: range ? after(first) : AT_END
+	};
+	const afterLast = {
+		active: false,
+		end: AT_END,
+		name: "after",
+		start: after(last)
+	};
+	if (!range) return [active, afterLast];
+	return [
+		{
+			active: false,
+			end: before(first),
+			name: "before",
+			start: AT_END
+		},
+		active,
+		afterLast
+	];
+}
+function placementOf({ end, start }, vertical) {
+	return vertical ? {
+		bottom: percentOf(start.fraction),
+		marginBottom: start.px,
+		marginTop: end.px,
+		top: percentOf(end.fraction)
+	} : {
+		end: percentOf(end.fraction),
+		marginEnd: end.px,
+		marginStart: start.px,
+		start: percentOf(start.fraction)
+	};
+}
+/**
+* A slider for one value, or for a range when the value is an array. Its
+* state is React Stately's, as web's is: pass `value` with `onChange` to
+* control it, or `defaultValue` to let it keep its own, with `minValue`,
+* `maxValue` and `step` to shape it and `formatOptions` to say how it reads.
+*
+* ```tsx
+* <Slider defaultValue={40} label="Label" />
+* ```
+*
+* A press on the track moves the nearest handle there, and a drag carries
+* it. A screen reader hears each handle as an adjustable control named by the
+* label, which it moves a step at a time. `style`, `ref` and `testID` land on
+* the slider as a whole, which is the view a layout positions and the one
+* that gives a vertical slider its height. 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.
+*/
+function Slider(t0) {
+	const $ = c(55);
+	const { "aria-label": ariaLabel, defaultValue, formatOptions, icon, isDisabled: t1, label, maxValue, minValue, onChange, onChangeEnd, orientation: t2, ref, showStops: t3, size: t4, step, style, testID, thumbLabels, value } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const orientation = t2 === void 0 ? "horizontal" : t2;
+	const showStops = t3 === void 0 ? false : t3;
+	const size = t4 === void 0 ? "xs" : t4;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const locale = useLocaleOf(void 0);
+	let t5;
+	if ($[0] !== formatOptions || $[1] !== locale) {
+		t5 = new NumberFormatter(locale, formatOptions);
+		$[0] = formatOptions;
+		$[1] = locale;
+		$[2] = t5;
+	} else t5 = $[2];
+	let t6;
+	if ($[3] !== defaultValue || $[4] !== isDisabled || $[5] !== maxValue || $[6] !== minValue || $[7] !== onChange || $[8] !== onChangeEnd || $[9] !== orientation || $[10] !== step || $[11] !== t5 || $[12] !== value) {
+		t6 = {
+			defaultValue,
+			isDisabled,
+			maxValue,
+			minValue,
+			numberFormatter: t5,
+			onChange,
+			onChangeEnd,
+			orientation,
+			step,
+			value
+		};
+		$[3] = defaultValue;
+		$[4] = isDisabled;
+		$[5] = maxValue;
+		$[6] = minValue;
+		$[7] = onChange;
+		$[8] = onChangeEnd;
+		$[9] = orientation;
+		$[10] = step;
+		$[11] = t5;
+		$[12] = value;
+		$[13] = t6;
+	} else t6 = $[13];
+	const state = useSliderState(t6);
+	const labelRole = useTypeRole("labelLarge");
+	const [length, setLength] = useState(0);
+	const vertical = orientation === "vertical";
+	const metrics = SIZES[size];
+	let t7;
+	if ($[14] !== isDisabled || $[15] !== length || $[16] !== state || $[17] !== testID || $[18] !== vertical) {
+		t7 = {
+			isDisabled,
+			length,
+			state,
+			testID,
+			vertical
+		};
+		$[14] = isDisabled;
+		$[15] = length;
+		$[16] = state;
+		$[17] = testID;
+		$[18] = vertical;
+		$[19] = t7;
+	} else t7 = $[19];
+	const gesture = useTrackGesture(t7);
+	const parts = partsOf(state);
+	let t8;
+	if ($[20] !== showStops || $[21] !== state) {
+		t8 = showStops ? stepsOf(state) : NO_STEPS;
+		$[20] = showStops;
+		$[21] = state;
+		$[22] = t8;
+	} else t8 = $[22];
+	const steps = t8;
+	const hasIcon = icon !== void 0 && icon !== null && metrics.icon !== void 0 && parts.length === 2;
+	const group = label ?? ariaLabel;
+	const T0 = View;
+	const t9 = composeStyles(styles.root, vertical ? styles.rootVertical : void 0, own.root, style);
+	const t10 = label === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+		"aria-hidden": true,
+		style: composeStyles(labelRole, own.label),
+		children: label
+	});
+	const T1 = GestureHandlerRootView;
+	let t11;
+	if ($[23] !== metrics || $[24] !== vertical) {
+		t11 = trackOf(metrics, vertical);
+		$[23] = metrics;
+		$[24] = vertical;
+		$[25] = t11;
+	} else t11 = $[25];
+	const T2 = GestureDetector;
+	const T3 = View;
+	let t12;
+	if ($[26] !== vertical) {
+		t12 = lengthTo(setLength, vertical);
+		$[26] = vertical;
+		$[27] = t12;
+	} else t12 = $[27];
+	const t13 = styles;
+	const t14 = parts.map((part) => /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(styles.part, partOf(metrics, theme, vertical), partColourOf(own, part.active, isDisabled), innerCornersOf(part, vertical), placementOf(part, vertical)),
+		children: [part.active && hasIcon ? /* @__PURE__ */ jsx(InsetIcon, {
+			icon,
+			isDisabled,
+			length,
+			metrics,
+			part,
+			vertical
+		}) : null, /* @__PURE__ */ jsx(Stops, {
+			isDisabled,
+			length,
+			metrics,
+			part,
+			showStops,
+			steps,
+			vertical
+		})]
+	}, part.name));
+	let t15;
+	if ($[28] !== group || $[29] !== metrics || $[30] !== state || $[31] !== thumbLabels || $[32] !== vertical) {
+		t15 = state.values.map((_, index) => /* @__PURE__ */ jsx(Handle, {
+			index,
+			metrics,
+			name: nameOf(thumbLabels?.[index], group),
+			state,
+			vertical
+		}, index));
+		$[28] = group;
+		$[29] = metrics;
+		$[30] = state;
+		$[31] = thumbLabels;
+		$[32] = vertical;
+		$[33] = t15;
+	} else t15 = $[33];
+	let t16;
+	if ($[34] !== T3 || $[35] !== t12 || $[36] !== t13.area || $[37] !== t14 || $[38] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(T3, {
+			onLayout: t12,
+			style: t13.area,
+			children: [t14, t15]
+		});
+		$[34] = T3;
+		$[35] = t12;
+		$[36] = t13.area;
+		$[37] = t14;
+		$[38] = t15;
+		$[39] = t16;
+	} else t16 = $[39];
+	let t17;
+	if ($[40] !== T2 || $[41] !== gesture || $[42] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T2, {
+			gesture,
+			children: t16
+		});
+		$[40] = T2;
+		$[41] = gesture;
+		$[42] = t16;
+		$[43] = t17;
+	} else t17 = $[43];
+	let t18;
+	if ($[44] !== T1 || $[45] !== t11 || $[46] !== t17) {
+		t18 = /* @__PURE__ */ jsx(T1, {
+			style: t11,
+			children: t17
+		});
+		$[44] = T1;
+		$[45] = t11;
+		$[46] = t17;
+		$[47] = t18;
+	} else t18 = $[47];
+	let t19;
+	if ($[48] !== T0 || $[49] !== ref || $[50] !== t10 || $[51] !== t18 || $[52] !== t9 || $[53] !== testID) {
+		t19 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style: t9,
+			testID,
+			children: [t10, t18]
+		});
+		$[48] = T0;
+		$[49] = ref;
+		$[50] = t10;
+		$[51] = t18;
+		$[52] = t9;
+		$[53] = testID;
+		$[54] = t19;
+	} else t19 = $[54];
+	return t19;
+}
+function stepsOf(state) {
+	const min = state.getThumbMinValue(0);
+	const max = state.getThumbMaxValue(state.values.length - 1);
+	const fractions = [];
+	if (state.step <= 0) return fractions;
+	for (let index = 1; min + index * state.step < max; index++) fractions.push(state.getValuePercent(min + index * state.step));
+	return fractions;
+}
+function stopColourOf(own, active, isDisabled) {
+	if (active) return isDisabled ? own.stopActiveDisabled : own.stopActive;
+	return isDisabled ? own.stopDisabled : void 0;
+}
+function stopOffsetOf({ start }, fraction, length) {
+	return (fraction - start.fraction) * length - start.px - STOP / 2;
+}
+function stopPlaceOf({ track }, vertical, offset) {
+	const across = (track - STOP) / 2;
+	return vertical ? {
+		bottom: offset,
+		start: across
+	} : {
+		start: offset,
+		top: across
+	};
+}
+function Stops(t0) {
+	const $ = c(4);
+	const { isDisabled, length, metrics, part, showStops, steps, vertical } = t0;
+	const own = stylesOf(useTheme());
+	const colour = stopColourOf(own, part.active, isDisabled);
+	const across = (metrics.track - STOP) / 2;
+	const from = part.start.fraction;
+	const to = 1 - part.end.fraction;
+	const inside = showStops && length > 0 && to > from ? steps.filter((fraction) => fraction >= from && fraction <= to) : [];
+	const atStart = part.start === AT_END;
+	const atEnd = part.end === AT_END;
+	const centred = vertical ? { start: across } : { top: across };
+	const t1 = showStops && atStart ? /* @__PURE__ */ jsx(View, { style: composeStyles(styles.stop, own.stop, colour, centred, vertical ? styles.stopStartVertical : styles.stopStart) }) : null;
+	const t2 = inside.map((fraction_0) => /* @__PURE__ */ jsx(View, { style: composeStyles(styles.stop, own.stop, colour, stopPlaceOf(metrics, vertical, stopOffsetOf(part, fraction_0, length))) }, fraction_0));
+	const t3 = atEnd ? /* @__PURE__ */ jsx(View, { style: composeStyles(styles.stop, own.stop, colour, centred, vertical ? styles.stopEndVertical : styles.stopEnd) }) : null;
+	let t4;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t1,
+			t2,
+			t3
+		] });
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	return t4;
+}
+function trackOf({ handle }, vertical) {
+	return vertical ? {
+		flexGrow: 1,
+		minHeight: 0,
+		width: handle
+	} : { height: handle };
+}
+function useHandleMotion(dragging, vertical) {
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const thickness = dragging ? HANDLE_PRESSED : HANDLE_WIDTH;
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	return useAnimatedStyle(() => {
+		"worklet";
+		const to = reduceMotion ? thickness : withTiming(thickness, timing);
+		return vertical ? { height: to } : { width: to };
+	});
+}
+//#endregion
+export { Slider };
+
+//# sourceMappingURL=index.js.map