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

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

@@ -0,0 +1,516 @@
+import { useLocaleOf } from "../../i18n/provider.js";
+import { useFieldValidation } from "../../form/index.js";
+import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { colorOf, usePickedColor } from "../../swatch/index.js";
+import { keyboardFor } from "../../number/keyboard.js";
+import { useNumberFieldState } from "../../number/state.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { parseColor } from "react-stately";
+import { useColorFieldState } from "react-stately/useColorFieldState";
+//#region src/components/color-field/index.tsx
+const BLACK = parseColor("#000");
+function blurThen(onBlur, then) {
+	return (event) => {
+		onBlur();
+		then?.(event);
+	};
+}
+/**
+* One channel of a colour as a number: the value converted into
+* `colorSpace`, the channel read in its own format and range, and a
+* committed number written back into the colour. React Stately's
+* `useColorChannelFieldState`, over src/number's number field state.
+*/
+function ChannelField(t0) {
+	const $ = c(19);
+	let channel;
+	let colorSpace;
+	let defaultValue;
+	let onChange;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({channel, colorSpace, defaultValue, onChange, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = channel;
+		$[2] = colorSpace;
+		$[3] = defaultValue;
+		$[4] = onChange;
+		$[5] = props;
+		$[6] = value;
+	} else {
+		channel = $[1];
+		colorSpace = $[2];
+		defaultValue = $[3];
+		onChange = $[4];
+		props = $[5];
+		value = $[6];
+	}
+	const locale = useLocaleOf(void 0);
+	let t1;
+	if ($[7] !== defaultValue) {
+		t1 = () => colorOrNull(defaultValue);
+		$[7] = defaultValue;
+		$[8] = t1;
+	} else t1 = $[8];
+	const [own, setOwn] = useState(t1);
+	const controlled = value !== void 0;
+	const current = controlled ? colorOrNull(value) : own;
+	const color = inSpace(current ?? BLACK, colorSpace);
+	const range = color.getChannelRange(channel);
+	const formatOptions = color.getChannelFormatOptions(channel);
+	const multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
+	const state = useNumberFieldState({
+		formatOptions,
+		locale,
+		maxValue: range.maxValue / multiplier,
+		minValue: range.minValue / multiplier,
+		onChange: (next) => {
+			const changed = Number.isNaN(next) ? null : color.withChannelValue(channel, next * multiplier);
+			if (!controlled) setOwn(changed);
+			onChange?.(changed);
+		},
+		step: range.step / multiplier,
+		value: current === null ? NaN : color.getChannelValue(channel) / multiplier
+	});
+	let t2;
+	if ($[9] !== state.numberValue) {
+		t2 = Number.isNaN(state.numberValue);
+		$[9] = state.numberValue;
+		$[10] = t2;
+	} else t2 = $[10];
+	const empty = t2;
+	const T0 = FieldShell;
+	const t3 = keyboardFor(locale, formatOptions, range.minValue);
+	const t4 = empty ? "" : String(state.numberValue);
+	let t5;
+	if ($[11] !== T0 || $[12] !== current || $[13] !== empty || $[14] !== props || $[15] !== state || $[16] !== t3 || $[17] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			...props,
+			color: current,
+			isEmpty: empty,
+			keyboardType: t3,
+			state,
+			submitted: t4
+		});
+		$[11] = T0;
+		$[12] = current;
+		$[13] = empty;
+		$[14] = props;
+		$[15] = state;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t5;
+	} else t5 = $[18];
+	return t5;
+}
+/**
+* A colour typed into a field, the text fields page's filled or outlined
+* field. Pass `value` with `onChange` to control it, or `defaultValue` to
+* let it keep its own, as a CSS colour string or a `Color` from
+* `parseColor`, which this package re-exports; `onChange` is handed the
+* `Color`, `null` for an empty field.
+*
+* ```tsx
+* <ColorField defaultValue="#6750A4" label="Label" />
+* ```
+*
+* Without `channel` the field holds the whole colour as hex and reads what
+* is typed once it loses focus; with one it holds that channel alone as a
+* number. `colorSpace` decides which space a channel belongs to, the same as
+* on `ColorSlider`.
+*
+* React Native's own `TextInput` props, the return key among them, reach the
+* control; `style` and `ref` are the field as a whole, and `inputRef` the
+* control.
+*
+* 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 ColorField(t0) {
+	const $ = c(10);
+	let channel;
+	let onChange;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({channel, onChange, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = channel;
+		$[2] = onChange;
+		$[3] = props;
+		$[4] = value;
+	} else {
+		channel = $[1];
+		onChange = $[2];
+		props = $[3];
+		value = $[4];
+	}
+	const picked = usePickedColor(value, onChange);
+	let t1;
+	if ($[5] !== channel || $[6] !== picked.onChange || $[7] !== picked.value || $[8] !== props) {
+		t1 = channel === void 0 ? /* @__PURE__ */ jsx(HexField, {
+			...props,
+			onChange: picked.onChange,
+			value: picked.value
+		}) : /* @__PURE__ */ jsx(ChannelField, {
+			...props,
+			channel,
+			onChange: picked.onChange,
+			value: picked.value
+		});
+		$[5] = channel;
+		$[6] = picked.onChange;
+		$[7] = picked.value;
+		$[8] = props;
+		$[9] = t1;
+	} else t1 = $[9];
+	return t1;
+}
+function colorOrNull(color) {
+	return color === null || color === void 0 ? null : colorOf(color);
+}
+function commitBefore(state, handler) {
+	return (event) => {
+		state.commit();
+		handler?.(event);
+	};
+}
+function editInto(state, onEdit) {
+	return (text) => {
+		if (state.validate(text)) {
+			state.setInputValue(text);
+			onEdit();
+		}
+	};
+}
+/**
+* The box either kind of field draws: the label, the control holding the
+* text, the icons at its ends and the line under it.
+*/
+function FieldShell(t0) {
+	const $ = c(87);
+	let color;
+	let description;
+	let error;
+	let inputRef;
+	let isEmpty;
+	let keyboardType;
+	let label;
+	let leadingIcon;
+	let name;
+	let onBlur;
+	let onFocus;
+	let onSubmitEditing;
+	let props;
+	let ref;
+	let state;
+	let style;
+	let submitted;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let trailingIcon;
+	let validate;
+	if ($[0] !== t0) {
+		({color, description, error, floatingLabel: t1, inputRef, isDisabled: t2, isEmpty, isReadOnly: t3, isRequired: t4, keyboardType, label, leadingIcon, name, onBlur, onFocus, onSubmitEditing, ref, returnKeyType: t5, state, style, submitted, trailingIcon, validate, variant: t6, ...props} = t0);
+		$[0] = t0;
+		$[1] = color;
+		$[2] = description;
+		$[3] = error;
+		$[4] = inputRef;
+		$[5] = isEmpty;
+		$[6] = keyboardType;
+		$[7] = label;
+		$[8] = leadingIcon;
+		$[9] = name;
+		$[10] = onBlur;
+		$[11] = onFocus;
+		$[12] = onSubmitEditing;
+		$[13] = props;
+		$[14] = ref;
+		$[15] = state;
+		$[16] = style;
+		$[17] = submitted;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+		$[21] = t4;
+		$[22] = t5;
+		$[23] = t6;
+		$[24] = trailingIcon;
+		$[25] = validate;
+	} else {
+		color = $[1];
+		description = $[2];
+		error = $[3];
+		inputRef = $[4];
+		isEmpty = $[5];
+		keyboardType = $[6];
+		label = $[7];
+		leadingIcon = $[8];
+		name = $[9];
+		onBlur = $[10];
+		onFocus = $[11];
+		onSubmitEditing = $[12];
+		props = $[13];
+		ref = $[14];
+		state = $[15];
+		style = $[16];
+		submitted = $[17];
+		t1 = $[18];
+		t2 = $[19];
+		t3 = $[20];
+		t4 = $[21];
+		t5 = $[22];
+		t6 = $[23];
+		trailingIcon = $[24];
+		validate = $[25];
+	}
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const isRequired = t4 === void 0 ? false : t4;
+	const returnKeyType = t5 === void 0 ? "done" : t5;
+	const variant = t6 === void 0 ? "filled" : t6;
+	const id = useId();
+	const control = useRef(null);
+	let t7;
+	if ($[26] !== color || $[27] !== error || $[28] !== isDisabled || $[29] !== isEmpty || $[30] !== isReadOnly || $[31] !== isRequired || $[32] !== name || $[33] !== submitted || $[34] !== validate) {
+		t7 = {
+			control,
+			error,
+			isDisabled,
+			isEmpty,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted,
+			validate,
+			value: color
+		};
+		$[26] = color;
+		$[27] = error;
+		$[28] = isDisabled;
+		$[29] = isEmpty;
+		$[30] = isReadOnly;
+		$[31] = isRequired;
+		$[32] = name;
+		$[33] = submitted;
+		$[34] = validate;
+		$[35] = t7;
+	} else t7 = $[35];
+	const validation = useFieldValidation(t7);
+	const shownError = validation.error;
+	let t8;
+	if ($[36] !== onBlur || $[37] !== state || $[38] !== validation.onBlur) {
+		t8 = commitBefore(state, blurThen(validation.onBlur, onBlur));
+		$[36] = onBlur;
+		$[37] = state;
+		$[38] = validation.onBlur;
+		$[39] = t8;
+	} else t8 = $[39];
+	let t9;
+	if ($[40] !== onFocus || $[41] !== t8) {
+		t9 = {
+			onBlur: t8,
+			onFocus
+		};
+		$[40] = onFocus;
+		$[41] = t8;
+		$[42] = t9;
+	} else t9 = $[42];
+	const focus = useFieldFocus(t9);
+	let t10;
+	let t11;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = () => control.current;
+		t11 = [];
+		$[43] = t10;
+		$[44] = t11;
+	} else {
+		t10 = $[43];
+		t11 = $[44];
+	}
+	useImperativeHandle(inputRef, t10, t11);
+	const t12 = focus.focused;
+	const t13 = shownError !== void 0;
+	const t14 = state.inputValue !== "";
+	const t15 = focus.handlers;
+	let t16;
+	if ($[45] !== description || $[46] !== id || $[47] !== shownError) {
+		t16 = describedBy(id, {
+			description,
+			error: shownError
+		});
+		$[45] = description;
+		$[46] = id;
+		$[47] = shownError;
+		$[48] = t16;
+	} else t16 = $[48];
+	const t17 = !isDisabled && !isReadOnly;
+	let t18;
+	if ($[49] !== state || $[50] !== validation.onEdit) {
+		t18 = editInto(state, validation.onEdit);
+		$[49] = state;
+		$[50] = validation.onEdit;
+		$[51] = t18;
+	} else t18 = $[51];
+	let t19;
+	if ($[52] !== onSubmitEditing || $[53] !== state) {
+		t19 = commitBefore(state, onSubmitEditing);
+		$[52] = onSubmitEditing;
+		$[53] = state;
+		$[54] = t19;
+	} else t19 = $[54];
+	let t20;
+	if ($[55] !== focus.handlers || $[56] !== keyboardType || $[57] !== label || $[58] !== props || $[59] !== returnKeyType || $[60] !== state.inputValue || $[61] !== t16 || $[62] !== t17 || $[63] !== t18 || $[64] !== t19) {
+		t20 = /* @__PURE__ */ jsx(FieldInput, {
+			...props,
+			...t15,
+			"aria-label": label,
+			autoCapitalize: "none",
+			autoComplete: "off",
+			autoCorrect: false,
+			described: t16,
+			editable: t17,
+			keyboardType,
+			onChangeText: t18,
+			onSubmitEditing: t19,
+			ref: control,
+			returnKeyType,
+			spellCheck: false,
+			value: state.inputValue
+		});
+		$[55] = focus.handlers;
+		$[56] = keyboardType;
+		$[57] = label;
+		$[58] = props;
+		$[59] = returnKeyType;
+		$[60] = state.inputValue;
+		$[61] = t16;
+		$[62] = t17;
+		$[63] = t18;
+		$[64] = t19;
+		$[65] = t20;
+	} else t20 = $[65];
+	let t21;
+	if ($[66] !== floatingLabel || $[67] !== focus.focused || $[68] !== isDisabled || $[69] !== isRequired || $[70] !== label || $[71] !== leadingIcon || $[72] !== t13 || $[73] !== t14 || $[74] !== t20 || $[75] !== trailingIcon || $[76] !== variant) {
+		t21 = /* @__PURE__ */ jsx(FieldBox, {
+			control,
+			floatingLabel,
+			isDisabled,
+			isFocused: t12,
+			isInvalid: t13,
+			isPopulated: t14,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: t20
+		});
+		$[66] = floatingLabel;
+		$[67] = focus.focused;
+		$[68] = isDisabled;
+		$[69] = isRequired;
+		$[70] = label;
+		$[71] = leadingIcon;
+		$[72] = t13;
+		$[73] = t14;
+		$[74] = t20;
+		$[75] = trailingIcon;
+		$[76] = variant;
+		$[77] = t21;
+	} else t21 = $[77];
+	let t22;
+	if ($[78] !== description || $[79] !== id || $[80] !== shownError) {
+		t22 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[78] = description;
+		$[79] = id;
+		$[80] = shownError;
+		$[81] = t22;
+	} else t22 = $[81];
+	let t23;
+	if ($[82] !== ref || $[83] !== style || $[84] !== t21 || $[85] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(View, {
+			ref,
+			style,
+			children: [t21, t22]
+		});
+		$[82] = ref;
+		$[83] = style;
+		$[84] = t21;
+		$[85] = t22;
+		$[86] = t23;
+	} else t23 = $[86];
+	return t23;
+}
+/** The whole colour as hex, through React Stately's colour field state. */
+function HexField(t0) {
+	const $ = c(13);
+	let defaultValue;
+	let onChange;
+	let props;
+	let value;
+	if ($[0] !== t0) {
+		({defaultValue, onChange, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultValue;
+		$[2] = onChange;
+		$[3] = props;
+		$[4] = value;
+	} else {
+		defaultValue = $[1];
+		onChange = $[2];
+		props = $[3];
+		value = $[4];
+	}
+	let t1;
+	if ($[5] !== defaultValue || $[6] !== onChange || $[7] !== value) {
+		t1 = {
+			defaultValue,
+			onChange,
+			value
+		};
+		$[5] = defaultValue;
+		$[6] = onChange;
+		$[7] = value;
+		$[8] = t1;
+	} else t1 = $[8];
+	const state = useColorFieldState(t1);
+	const t2 = state.colorValue === null;
+	let t3;
+	if ($[9] !== props || $[10] !== state || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(FieldShell, {
+			...props,
+			color: state.colorValue,
+			isEmpty: t2,
+			keyboardType: "default",
+			state,
+			submitted: state.inputValue
+		});
+		$[9] = props;
+		$[10] = state;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
+	return t3;
+}
+function inSpace(color, space) {
+	return space === void 0 ? color : color.toFormat(space);
+}
+//#endregion
+export { ColorField };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","BlurEvent","KeyboardTypeOptions","StyleProp","TextInput","TextInputProps","TextInputSubmitEditingEvent","ViewStyle","Color","ColorChannel","ColorSpace","useId","useImperativeHandle","useRef","useState","View","parseColor","useColorFieldState","FieldVariant","ValidationResult","describedBy","FieldBox","FieldInput","FieldMessage","useFieldFocus","useFieldValidation","useLocaleOf","keyboardFor","useNumberFieldState","colorOf","usePickedColor","ColorFieldProps","Omit","channel","colorSpace","defaultValue","description","error","floatingLabel","inputRef","isDisabled","isReadOnly","isRequired","label","leadingIcon","name","onChange","value","ref","style","trailingIcon","validate","variant","FieldShellProps","color","isEmpty","keyboardType","state","TextState","submitted","commit","inputValue","setInputValue","BLACK","blurThen","onBlur","then","event","ChannelField","t0","$","_c","props","locale","undefined","t1","colorOrNull","own","setOwn","controlled","current","inSpace","range","getChannelRange","formatOptions","getChannelFormatOptions","multiplier","maxValue","minValue","next","changed","Number","isNaN","withChannelValue","step","NaN","getChannelValue","t2","numberValue","empty","T0","FieldShell","t3","t4","String","t5","ColorField","picked","commitBefore","handler","Event","editInto","onEdit","text","onFocus","onSubmitEditing","t6","returnKeyType","id","control","t7","validation","shownError","t8","t9","focus","t10","t11","Symbol","for","t12","focused","t13","t14","t15","handlers","t16","t17","t18","t19","t20","t21","t22","t23","HexField","colorValue","space","toFormat","_c"],"sources":["../../../src/components/color-field/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  BlurEvent,\n  KeyboardTypeOptions,\n  StyleProp,\n  TextInput,\n  TextInputProps,\n  TextInputSubmitEditingEvent,\n  ViewStyle,\n} from 'react-native'\nimport type { Color, ColorChannel, ColorSpace } from 'react-stately'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport { View } from 'react-native'\nimport { parseColor } from 'react-stately'\nimport { useColorFieldState } from 'react-stately/useColorFieldState'\n\nimport type { FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\n\nimport {\n  describedBy,\n  FieldBox,\n  FieldInput,\n  FieldMessage,\n  useFieldFocus,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { keyboardFor } from '../../number/keyboard'\nimport { useNumberFieldState } from '../../number/state'\nimport { colorOf, usePickedColor } from '../../swatch'\n\n// kanso-ui's ColorField: a colour typed rather than picked, in the text\n// fields page's box with nothing added, drawn through the field chrome in\n// src/field as TextField is. That is what makes a colour field on a form the\n// same shape as the field beside it.\n//\n// **`channel` turns it from a colour into a number.** Without one the field\n// holds the whole colour as hex, `#6750A4`, through React Stately's\n// `useColorFieldState`, which web's reads through React Aria: a keystroke is\n// kept only where the text could still be hex, and the text is read when the\n// field loses focus or the return key is pressed, then written back as the\n// colour's hex, or put back where it reads as no colour. With one it holds\n// that channel alone, as React Stately's `useColorChannelFieldState` does: a\n// number in the channel's own format, `256°` or `34%`, kept and read as\n// NumberField's value is, in the `I18nProvider`'s locale, and clamped to the\n// channel's range and snapped to its step. That is what a picker's boxes\n// beside a plane are.\n//\n// **A swatch is the natural leading icon.** The field's value is a colour,\n// and the chrome already has a slot for something at the box's leading end;\n// a `ColorSwatch` there is what makes the field show the colour it holds. It\n// is left to the call site rather than drawn here, since a field inside a\n// picker sits beside a swatch already.\n//\n// The keyboard is the one that types what the field holds: the default one\n// for hex, with no capitals, corrections or suggestions, and for a channel\n// the number pad, or the decimal pad where the channel's format shows a\n// fraction, since no channel reaches below zero.\n\ntype ColorFieldProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'autoCapitalize'\n  | 'autoComplete'\n  | 'autoCorrect'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'inputMode'\n  | 'keyboardType'\n  | 'maxLength'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholder'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'selectionColor'\n  | 'spellCheck'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * The one channel the field holds, as a number in that channel's format,\n   * in place of the whole colour as hex.\n   */\n  readonly channel?: ColorChannel\n  /**\n   * The space `channel` is read in, the value converted into it first, as on\n   * `ColorSlider`. Left out, `channel` is one of the value's own space.\n   */\n  readonly colorSpace?: ColorSpace\n  /**\n   * The colour the field opens with, when it keeps its own: a CSS colour\n   * string, or a `Color` from `parseColor`, which this package re-exports.\n   * `null` opens it empty.\n   */\n  readonly defaultValue?: Color | null | string\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn. It wins over\n   * what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds a value, as the text fields page draws it.\n   * `false` keeps it small at the top in every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to, after a server's error, say. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a field with no label is a box nobody can name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the value, in the\n   * page's 24dp slot. A `ColorSwatch` there shows the value.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by. The form submits\n   * what web's does: the hex the field shows, or the channel's number written\n   * out, such as `0.6`, and `''` for an empty field.\n   */\n  readonly name?: string\n  /**\n   * Called with the colour once it is read from what was typed: for a\n   * channel, the value with that channel changed. `null` is an empty field.\n   */\n  readonly onChange?: (value: Color | null) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * An icon at the end of the box, after the value, in the page's 24dp slot:\n   * the muted role, and the error role while the field has an error.\n   */\n  readonly trailingIcon?: ReactNode\n  /**\n   * Checks the colour, `null` for an empty field, and returns its problem in\n   * words, or several, where there is one, and `true`, `null` or `undefined`\n   * where there is none. Under the default `aria` validation the error shows\n   * as the value changes; inside a `native` form it shows once a submission\n   * is tried, or once the field loses focus after an edit, and holds the form\n   * back.\n   */\n  readonly validate?: (value: Color | null) => ValidationResult\n  /**\n   * The colour, when the call site keeps it: a CSS colour string or a\n   * `Color`. `null` is an empty field.\n   */\n  readonly value?: Color | null | string\n  /**\n   * The filled box, or the outlined one: no fill, an outline that thickens\n   * and takes the primary role while focused, and the label cutting it once\n   * it floats, the text fields page's two fields.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// What the box draws from either kind of field: the colour it is validated\n// on, what it submits, and the text it holds and how that text is kept.\ntype FieldShellProps = Omit<\n  ColorFieldProps,\n  'channel' | 'colorSpace' | 'defaultValue' | 'onChange' | 'value'\n> & {\n  readonly color: Color | null\n  readonly isEmpty: boolean\n  readonly keyboardType: KeyboardTypeOptions\n  readonly state: TextState\n  readonly submitted: string\n}\n\n// The text a field holds, which React Stately's colour field state and\n// src/number's number field state both keep.\ntype TextState = {\n  /** Reads the text as the value and writes it back. */\n  readonly commit: () => void\n  readonly inputValue: string\n  readonly setInputValue: (value: string) => void\n  /** Whether the text could still become a value, as it is typed. */\n  readonly validate: (value: string) => boolean\n}\n\n// What a channel field holds while it holds no colour: React Stately's.\nconst BLACK = parseColor('#000')\n\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: ((event: BlurEvent) => void) | undefined,\n) {\n  return (event: BlurEvent) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n/**\n * One channel of a colour as a number: the value converted into\n * `colorSpace`, the channel read in its own format and range, and a\n * committed number written back into the colour. React Stately's\n * `useColorChannelFieldState`, over src/number's number field state.\n */\nfunction ChannelField({\n  channel,\n  colorSpace,\n  defaultValue,\n  onChange,\n  value,\n  ...props\n}: Omit<ColorFieldProps, 'channel'> & { readonly channel: ColorChannel }) {\n  const locale = useLocaleOf(undefined)\n  const [own, setOwn] = useState(() => colorOrNull(defaultValue))\n  const controlled = value !== undefined\n  const current = controlled ? colorOrNull(value) : own\n  const color = inSpace(current ?? BLACK, colorSpace)\n  const range = color.getChannelRange(channel)\n  const formatOptions = color.getChannelFormatOptions(channel)\n  // A percentage of a channel running to 100 is read as a fraction, so 34\n  // is written 34%.\n  const multiplier =\n    formatOptions.style === 'percent' && range.maxValue === 100 ? 100 : 1\n  const state = useNumberFieldState({\n    formatOptions,\n    locale,\n    maxValue: range.maxValue / multiplier,\n    minValue: range.minValue / multiplier,\n    onChange: (next) => {\n      const changed = Number.isNaN(next)\n        ? null\n        : color.withChannelValue(channel, next * multiplier)\n      if (!controlled) {\n        setOwn(changed)\n      }\n      onChange?.(changed)\n    },\n    step: range.step / multiplier,\n    value:\n      current === null\n        ? Number.NaN\n        : color.getChannelValue(channel) / multiplier,\n  })\n  const empty = Number.isNaN(state.numberValue)\n\n  return (\n    <FieldShell\n      {...props}\n      color={current}\n      isEmpty={empty}\n      keyboardType={keyboardFor(locale, formatOptions, range.minValue)}\n      state={state}\n      submitted={empty ? '' : String(state.numberValue)}\n    />\n  )\n}\n\n/**\n * A colour typed into a field, the text fields page's filled or outlined\n * field. Pass `value` with `onChange` to control it, or `defaultValue` to\n * let it keep its own, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports; `onChange` is handed the\n * `Color`, `null` for an empty field.\n *\n * ```tsx\n * <ColorField defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * Without `channel` the field holds the whole colour as hex and reads what\n * is typed once it loses focus; with one it holds that channel alone as a\n * number. `colorSpace` decides which space a channel belongs to, the same as\n * on `ColorSlider`.\n *\n * React Native's own `TextInput` props, the return key among them, reach the\n * control; `style` and `ref` are the field as a whole, and `inputRef` the\n * control.\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 ColorField({ channel, onChange, value, ...props }: ColorFieldProps) {\n  const picked = usePickedColor(value, onChange)\n\n  return channel === undefined ? (\n    <HexField {...props} onChange={picked.onChange} value={picked.value} />\n  ) : (\n    <ChannelField\n      {...props}\n      channel={channel}\n      onChange={picked.onChange}\n      value={picked.value}\n    />\n  )\n}\n\nfunction colorOrNull(color: Color | null | string | undefined) {\n  return color === null || color === undefined ? null : colorOf(color)\n}\n\n// Reads the text as the field's value, then hands the event on.\nfunction commitBefore<Event>(\n  state: TextState,\n  handler: ((event: Event) => void) | undefined,\n) {\n  return (event: Event) => {\n    state.commit()\n    handler?.(event)\n  }\n}\n\n// The text typed, kept only where it could still become a value, and\n// reported to the field's validation as an edit.\nfunction editInto(state: TextState, onEdit: () => void) {\n  return (text: string) => {\n    if (state.validate(text)) {\n      state.setInputValue(text)\n      onEdit()\n    }\n  }\n}\n\n/**\n * The box either kind of field draws: the label, the control holding the\n * text, the icons at its ends and the line under it.\n */\nfunction FieldShell({\n  color,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  isEmpty,\n  isReadOnly = false,\n  isRequired = false,\n  keyboardType,\n  label,\n  leadingIcon,\n  name,\n  onBlur,\n  onFocus,\n  onSubmitEditing,\n  ref,\n  returnKeyType = 'done',\n  state,\n  style,\n  submitted,\n  trailingIcon,\n  validate,\n  variant = 'filled',\n  ...props\n}: FieldShellProps) {\n  const id = useId()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted,\n    validate,\n    value: color,\n  })\n  const shownError = validation.error\n  const focus = useFieldFocus({\n    onBlur: commitBefore<BlurEvent>(state, blurThen(validation.onBlur, onBlur)),\n    onFocus,\n  })\n\n  useImperativeHandle<\n    ComponentRef<typeof TextInput> | null,\n    ComponentRef<typeof TextInput> | null\n  >(inputRef, () => control.current, [])\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isPopulated={state.inputValue !== ''}\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        trailing={trailingIcon}\n        variant={variant}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          autoCapitalize=\"none\"\n          autoComplete=\"off\"\n          autoCorrect={false}\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled && !isReadOnly}\n          keyboardType={keyboardType}\n          onChangeText={editInto(state, validation.onEdit)}\n          onSubmitEditing={commitBefore<TextInputSubmitEditingEvent>(\n            state,\n            onSubmitEditing,\n          )}\n          ref={control}\n          returnKeyType={returnKeyType}\n          spellCheck={false}\n          value={state.inputValue}\n        />\n      </FieldBox>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n/** The whole colour as hex, through React Stately's colour field state. */\nfunction HexField({\n  defaultValue,\n  onChange,\n  value,\n  ...props\n}: Omit<ColorFieldProps, 'channel'>) {\n  const state = useColorFieldState({ defaultValue, onChange, value })\n\n  return (\n    <FieldShell\n      {...props}\n      color={state.colorValue}\n      isEmpty={state.colorValue === null}\n      keyboardType=\"default\"\n      state={state}\n      submitted={state.inputValue}\n    />\n  )\n}\n\nfunction inSpace(color: Color, space: ColorSpace | undefined) {\n  return space === undefined ? color : color.toFormat(space)\n}\n\nexport { ColorField }\nexport type { ColorFieldProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,74 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Color } from "react-stately";
+//#region src/components/color-picker/index.d.ts
+type ColorPickerProps = {
+  /** Whether the alpha slider is drawn under the hue one. @default false */
+  readonly alpha?: boolean;
+  /**
+   * Replaces everything on the surface, for a picker that arranges its own
+   * parts. The colour controls in it take the picker's value.
+   */
+  readonly children?: ReactNode;
+  /** Whether the surface starts open, when the picker keeps its own open state. */
+  readonly defaultOpen?: boolean;
+  /**
+   * The colour the picker holds at first, when it keeps its own: a CSS colour
+   * string, or a `Color` from `parseColor`.
+   * @default '#000000'
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Whether the whole picker is inert: the trigger, and the plane, sliders
+   * and field on the surface, which can be on screen while disabled since
+   * the surface opens independently of the trigger. An arrangement passed as
+   * `children` is the call site's own to disable.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Whether the surface is open, for a call site holding it with `onOpenChange`. */
+  readonly isOpen?: boolean;
+  /**
+   * What the trigger says beside its swatch. Required: it is the button's
+   * name, the surface's and the field's.
+   */
+  readonly label: string;
+  /** Called with the colour each time a control on the surface changes it. */
+  readonly onChange?: (value: Color) => void;
+  /** Called when the surface opens or closes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /** The colour, for a call site holding it itself with `onChange`. */
+  readonly value?: Color | string;
+};
+/**
+ * A colour picked from a plane, a hue slider and a hex field, behind a
+ * trigger showing the colour. 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
+ * <ColorPicker defaultValue="#6750A4" label="Label" />
+ * ```
+ *
+ * `alpha` adds the transparency slider. From the medium window size up the
+ * surface is docked under the trigger; below it, it opens centred over a
+ * scrim, as a date picker's does. `defaultOpen`, `isOpen` and `onOpenChange`
+ * reach the surface.
+ *
+ * Every part on the surface is this package's own, `ColorArea`,
+ * `ColorSlider` and `ColorField`, and they share the picker's value rather
+ * than taking it as props. Passing `children` replaces all of them, and a
+ * `ColorArea`, `ColorField`, `ColorSlider`, `ColorSwatch`,
+ * `ColorSwatchPicker` or `ColorWheel` among them takes the picker's value
+ * where it is given none of its own.
+ *
+ * `style`, `ref` and `testID` land on the trigger, which is what a layout
+ * places.
+ */
+declare function ColorPicker({ alpha, children, defaultOpen, defaultValue, isDisabled, isOpen, label, onChange, onOpenChange, ref, style, testID, value }: ColorPickerProps): import("react").JSX.Element;
+//#endregion
+export { ColorPicker, type ColorPickerProps };
+//# sourceMappingURL=index.d.ts.map