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

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

@@ -0,0 +1,317 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { refsOf } from "../../ref/index.js";
+import { PickedColorContext, colorNameOf } from "../../swatch/index.js";
+import { ColorArea } from "../color-area/index.js";
+import { ColorField } from "../color-field/index.js";
+import { PickerPopup } from "../../picker/index.js";
+import { ColorSlider } from "../color-slider/index.js";
+import { ColorSwatch } from "../color-swatch/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { parseColor } from "react-stately";
+import { useColorPickerState } from "react-stately/useColorPickerState";
+import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+//#region src/components/color-picker/index.tsx
+const SWATCH = 24;
+const SURFACE_WIDTH = 280;
+const CHANNELS = parseColor("hsl(0, 0%, 0%)");
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => StyleSheet.create({
+	body: {
+		boxSizing: "border-box",
+		gap: spacing.md,
+		maxWidth: "100%",
+		padding: spacing.lg,
+		width: SURFACE_WIDTH
+	},
+	disabled: { backgroundColor: withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer) },
+	swatch: {
+		height: SWATCH,
+		width: SWATCH
+	},
+	trigger: {
+		alignItems: "center",
+		alignSelf: "flex-start",
+		backgroundColor: colors.surfaceContainerLow,
+		borderRadius: radii.pill,
+		boxSizing: "border-box",
+		flexDirection: "row",
+		gap: spacing.sm,
+		paddingHorizontal: spacing.md,
+		paddingVertical: spacing.sm
+	}
+}));
+/**
+* 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.
+*/
+function ColorPicker(t0) {
+	const $ = c(68);
+	const { alpha: t1, children, defaultOpen, defaultValue, isDisabled: t2, isOpen, label, onChange, onOpenChange, ref, style, testID, value } = t0;
+	const alpha = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const theme = useTheme();
+	const { colors, radii, spacing, stateLayerOpacity } = theme;
+	const styles = stylesOf(theme);
+	const locale = useLocaleOf(void 0);
+	const messages = useMessages();
+	const labelRole = useTypeRole("labelLarge");
+	let t3;
+	if ($[0] !== defaultValue || $[1] !== onChange || $[2] !== value) {
+		t3 = {
+			defaultValue,
+			onChange,
+			value
+		};
+		$[0] = defaultValue;
+		$[1] = onChange;
+		$[2] = value;
+		$[3] = t3;
+	} else t3 = $[3];
+	const state = useColorPickerState(t3);
+	let t4;
+	if ($[4] !== defaultOpen || $[5] !== isOpen || $[6] !== onOpenChange) {
+		t4 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[4] = defaultOpen;
+		$[5] = isOpen;
+		$[6] = onOpenChange;
+		$[7] = t4;
+	} else t4 = $[7];
+	const overlay = useOverlayTriggerState(t4);
+	const { close, open: show } = overlay;
+	const anchor = useRef(null);
+	const [trigger, setTrigger] = useState(null);
+	let t5;
+	if ($[8] !== radii.pill) {
+		t5 = { borderRadius: radii.pill };
+		$[8] = radii.pill;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== colors.onSurface || $[11] !== isDisabled || $[12] !== t5) {
+		t6 = {
+			color: colors.onSurface,
+			corners: t5,
+			disabled: isDisabled
+		};
+		$[10] = colors.onSurface;
+		$[11] = isDisabled;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const feedback = usePressFeedback(t6);
+	let t7;
+	if ($[14] !== locale || $[15] !== messages.transparent || $[16] !== state.color) {
+		t7 = colorNameOf(state.color, locale, messages.transparent);
+		$[14] = locale;
+		$[15] = messages.transparent;
+		$[16] = state.color;
+		$[17] = t7;
+	} else t7 = $[17];
+	const name = t7;
+	const T0 = Pressable;
+	const t8 = feedback.handlers;
+	const t9 = overlay.isOpen;
+	const t10 = `${label}, ${name}`;
+	const t11 = SWATCH + 2 * spacing.sm;
+	let t12;
+	if ($[18] !== t11) {
+		t12 = hitSlop(t11);
+		$[18] = t11;
+		$[19] = t12;
+	} else t12 = $[19];
+	let t13;
+	if ($[20] !== ref) {
+		t13 = refsOf(ref, anchor, setTrigger);
+		$[20] = ref;
+		$[21] = t13;
+	} else t13 = $[21];
+	const t14 = "button";
+	const t15 = composeStyles(styles.trigger, isDisabled ? styles.disabled : void 0, feedback.ring, style);
+	const t16 = feedback.layer;
+	let t17;
+	if ($[22] !== state.color || $[23] !== styles.swatch) {
+		t17 = /* @__PURE__ */ jsx(ColorSwatch, {
+			color: state.color,
+			style: styles.swatch
+		});
+		$[22] = state.color;
+		$[23] = styles.swatch;
+		$[24] = t17;
+	} else t17 = $[24];
+	let t18;
+	if ($[25] !== colors.onSurface || $[26] !== isDisabled || $[27] !== labelRole || $[28] !== stateLayerOpacity) {
+		t18 = composeStyles(labelRole, { color: isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface });
+		$[25] = colors.onSurface;
+		$[26] = isDisabled;
+		$[27] = labelRole;
+		$[28] = stateLayerOpacity;
+		$[29] = t18;
+	} else t18 = $[29];
+	let t19;
+	if ($[30] !== label || $[31] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Text, {
+			style: t18,
+			children: label
+		});
+		$[30] = label;
+		$[31] = t18;
+		$[32] = t19;
+	} else t19 = $[32];
+	let t20;
+	if ($[33] !== T0 || $[34] !== feedback.handlers || $[35] !== feedback.layer || $[36] !== isDisabled || $[37] !== overlay.isOpen || $[38] !== show || $[39] !== t10 || $[40] !== t12 || $[41] !== t13 || $[42] !== t15 || $[43] !== t17 || $[44] !== t19 || $[45] !== testID) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
+			...t8,
+			"aria-expanded": t9,
+			"aria-label": t10,
+			disabled: isDisabled,
+			hitSlop: t12,
+			onPress: show,
+			ref: t13,
+			role: t14,
+			style: t15,
+			testID,
+			children: [
+				t16,
+				t17,
+				t19
+			]
+		});
+		$[33] = T0;
+		$[34] = feedback.handlers;
+		$[35] = feedback.layer;
+		$[36] = isDisabled;
+		$[37] = overlay.isOpen;
+		$[38] = show;
+		$[39] = t10;
+		$[40] = t12;
+		$[41] = t13;
+		$[42] = t15;
+		$[43] = t17;
+		$[44] = t19;
+		$[45] = testID;
+		$[46] = t20;
+	} else t20 = $[46];
+	const t21 = overlay.isOpen;
+	let t22;
+	if ($[47] !== state) {
+		t22 = pickedOf(state);
+		$[47] = state;
+		$[48] = t22;
+	} else t22 = $[48];
+	let t23;
+	if ($[49] !== alpha || $[50] !== children || $[51] !== isDisabled || $[52] !== label || $[53] !== locale || $[54] !== styles.body) {
+		t23 = children ?? /* @__PURE__ */ jsxs(View, {
+			style: styles.body,
+			children: [
+				/* @__PURE__ */ jsx(ColorArea, {
+					"aria-label": label,
+					colorSpace: "hsl",
+					isDisabled,
+					xChannel: "saturation",
+					yChannel: "lightness"
+				}),
+				/* @__PURE__ */ jsx(ColorSlider, {
+					channel: "hue",
+					colorSpace: "hsl",
+					isDisabled,
+					label: CHANNELS.getChannelName("hue", locale)
+				}),
+				alpha ? /* @__PURE__ */ jsx(ColorSlider, {
+					channel: "alpha",
+					isDisabled,
+					label: CHANNELS.getChannelName("alpha", locale)
+				}) : null,
+				/* @__PURE__ */ jsx(ColorField, {
+					isDisabled,
+					label
+				})
+			]
+		});
+		$[49] = alpha;
+		$[50] = children;
+		$[51] = isDisabled;
+		$[52] = label;
+		$[53] = locale;
+		$[54] = styles.body;
+		$[55] = t23;
+	} else t23 = $[55];
+	let t24;
+	if ($[56] !== t22 || $[57] !== t23) {
+		t24 = /* @__PURE__ */ jsx(PickedColorContext, {
+			value: t22,
+			children: t23
+		});
+		$[56] = t22;
+		$[57] = t23;
+		$[58] = t24;
+	} else t24 = $[58];
+	let t25;
+	if ($[59] !== close || $[60] !== label || $[61] !== overlay.isOpen || $[62] !== t24 || $[63] !== trigger) {
+		t25 = /* @__PURE__ */ jsx(PickerPopup, {
+			anchor,
+			close,
+			isOpen: t21,
+			label,
+			trigger,
+			children: t24
+		});
+		$[59] = close;
+		$[60] = label;
+		$[61] = overlay.isOpen;
+		$[62] = t24;
+		$[63] = trigger;
+		$[64] = t25;
+	} else t25 = $[64];
+	let t26;
+	if ($[65] !== t20 || $[66] !== t25) {
+		t26 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t20, t25] });
+		$[65] = t20;
+		$[66] = t25;
+		$[67] = t26;
+	} else t26 = $[67];
+	return t26;
+}
+function pickedOf(state) {
+	return {
+		onChange: (color) => {
+			state.setColor(color);
+		},
+		value: state.color
+	};
+}
+//#endregion
+export { ColorPicker };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","HostInstance","StyleProp","TextStyle","View","ViewStyle","Color","ColorPickerState","useRef","useState","NativeView","Pressable","StyleSheet","Text","parseColor","useColorPickerState","useOverlayTriggerState","PickedColor","useLocaleOf","useMessages","PickerPopup","hitSlop","usePressFeedback","refsOf","colorNameOf","PickedColorContext","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","ColorArea","ColorField","ColorSlider","ColorSwatch","SWATCH","SURFACE_WIDTH","CHANNELS","stylesOf","colors","radii","spacing","stateLayerOpacity","create","body","boxSizing","gap","md","maxWidth","padding","lg","width","disabled","backgroundColor","onSurface","disabledContainer","swatch","height","trigger","alignItems","alignSelf","surfaceContainerLow","borderRadius","pill","flexDirection","sm","paddingHorizontal","paddingVertical","ColorPickerProps","alpha","children","defaultOpen","defaultValue","isDisabled","isOpen","label","onChange","value","onOpenChange","ref","style","testID","ColorPicker","t0","$","_c","t1","t2","undefined","theme","styles","locale","messages","labelRole","t3","state","t4","overlay","close","open","show","anchor","setTrigger","t5","t6","color","corners","feedback","t7","transparent","name","T0","t8","handlers","t9","t10","t11","t12","t13","t14","t15","ring","t16","layer","t17","t18","disabledContent","t19","t20","t21","t22","pickedOf","t23","getChannelName","t24","t25","t26","setColor","_c","NativeView"],"sources":["../../../src/components/color-picker/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  HostInstance,\n  StyleProp,\n  TextStyle,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport type { Color } from 'react-stately'\nimport type { ColorPickerState } from 'react-stately/useColorPickerState'\n\nimport { useRef, useState } from 'react'\nimport { View as NativeView, Pressable, StyleSheet, Text } from 'react-native'\nimport { parseColor } from 'react-stately'\nimport { useColorPickerState } from 'react-stately/useColorPickerState'\nimport { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport type { PickedColor } from '../../swatch'\n\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { PickerPopup } from '../../picker'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { refsOf } from '../../ref'\nimport { colorNameOf, PickedColorContext } from '../../swatch'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\nimport { ColorArea } from '../color-area'\nimport { ColorField } from '../color-field'\nimport { ColorSlider } from '../color-slider'\nimport { ColorSwatch } from '../color-swatch'\n\n// Every colour control in one, as kanso-ui's ColorPicker composes them: a\n// swatch and a label as the trigger, and a plane, a hue slider, an alpha\n// slider and a hex field on the surface it opens. The value is React\n// Stately's `useColorPickerState`, which the controls on the surface take\n// through src/swatch's PickedColorContext, as React Aria's picker hands its\n// value to each control's context on web. So an arrangement passed as\n// `children` shares the value the same way, whatever it holds.\n//\n// Material Design carries no page for a colour picker. What it does carry is\n// the text fields page, which the field inside draws through, and the surface\n// a date picker opens on, which this one shares through src/picker. Three\n// choices are web's own, and kept.\n//\n// **The trigger is a swatch beside a name, not a swatch alone.** A swatch on\n// its own is a coloured square with no affordance, and a screen reader would\n// be told a colour rather than an action. It is a pill on surface container\n// low, the swatch at 24dp, the height of the label's line rather than a\n// swatch's own 40dp, and the label in label large, with the state layer and\n// ripple every control here draws in on surface. A screen reader hears the\n// label and then the colour, \"Label, dark purple\", where web's reads the\n// swatch's name first: the visible label leads, so a voice command that says\n// it finds the button.\n//\n// **Hue is a slider rather than a wheel.** A wheel and the plane want the\n// same room, and would make the surface square and large; the strip sits\n// under the plane at the width it already has. ColorWheel is for a picker\n// that wants to be round, which a call site builds as `children`.\n//\n// **It is docked from the medium window size up and modal below it**, the\n// date picker's pairing, through the same src/picker surface: a 280dp\n// surface anchored to a trigger is out of reach on a phone, and a centred one\n// on a tablet covers a form for no reason. Its dismissal, its motion and\n// where a screen reader goes are the date picker's.\n//\n// One thing the picker does that its parts do not. **The plane and the hue\n// slider are read in HSL.** A channel has to belong to the value's own space\n// or React Stately throws, and a hex is read as RGB, which has no saturation,\n// so `<ColorPicker defaultValue=\"#6750A4\" />` would throw outright. Reading\n// the two in HSL is what lets the picker take any notation. A change made on\n// either reports the colour in HSL, as React Stately's area and slider do on\n// web, and the field shows it as hex whatever space it is in.\n//\n// **Disabled reaches every control on the surface**, not only the trigger.\n// React Stately's picker state carries no disabled state, and the surface\n// opens independently of the trigger, so a disabled picker can still be on\n// screen: already open when a form disables it, or opened from outside. An\n// arrangement passed as `children` is the call site's own to disable.\n\n// The swatch in the trigger, at the height of the label's line rather than\n// the 40dp a swatch takes on its own.\nconst SWATCH = 24\n\n// The surface's width, as web's: room for the plane and a hex field.\nconst SURFACE_WIDTH = 280\n\n// Any HSL colour names the channels the two sliders draw. Their labels are\n// read off it in the locale, as React Stately words them, rather than written\n// here in English.\nconst CHANNELS = parseColor('hsl(0, 0%, 0%)')\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    // What the surface holds, stacked: the plane, the sliders, then the\n    // field. One column, so a picker reads top to bottom.\n    body: {\n      boxSizing: 'border-box',\n      gap: spacing.md,\n      maxWidth: '100%',\n      padding: spacing.lg,\n      width: SURFACE_WIDTH,\n    },\n    disabled: {\n      backgroundColor: withOpacity(\n        colors.onSurface,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n    swatch: {\n      height: SWATCH,\n      width: SWATCH,\n    },\n    trigger: {\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      backgroundColor: colors.surfaceContainerLow,\n      borderRadius: radii.pill,\n      boxSizing: 'border-box',\n      flexDirection: 'row',\n      gap: spacing.sm,\n      paddingHorizontal: spacing.md,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\ntype ColorPickerProps = {\n  /** Whether the alpha slider is drawn under the hue one. @default false */\n  readonly alpha?: boolean\n  /**\n   * Replaces everything on the surface, for a picker that arranges its own\n   * parts. The colour controls in it take the picker's value.\n   */\n  readonly children?: ReactNode\n  /** Whether the surface starts open, when the picker keeps its own open state. */\n  readonly defaultOpen?: boolean\n  /**\n   * The colour the picker holds at first, when it keeps its own: a CSS colour\n   * string, or a `Color` from `parseColor`.\n   * @default '#000000'\n   */\n  readonly defaultValue?: Color | string\n  /**\n   * Whether the whole picker is inert: the trigger, and the plane, sliders\n   * and field on the surface, which can be on screen while disabled since\n   * the surface opens independently of the trigger. An arrangement passed as\n   * `children` is the call site's own to disable.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Whether the surface is open, for a call site holding it with `onOpenChange`. */\n  readonly isOpen?: boolean\n  /**\n   * What the trigger says beside its swatch. Required: it is the button's\n   * name, the surface's and the field's.\n   */\n  readonly label: string\n  /** Called with the colour each time a control on the surface changes it. */\n  readonly onChange?: (value: Color) => void\n  /** Called when the surface opens or closes. */\n  readonly onOpenChange?: (isOpen: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\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/**\n * A colour picked from a plane, a hue slider and a hex field, behind a\n * trigger showing the colour. Pass `value` with `onChange` to control it, or\n * `defaultValue`, as a CSS colour string or a `Color` from `parseColor`,\n * which this package re-exports.\n *\n * ```tsx\n * <ColorPicker defaultValue=\"#6750A4\" label=\"Label\" />\n * ```\n *\n * `alpha` adds the transparency slider. From the medium window size up the\n * surface is docked under the trigger; below it, it opens centred over a\n * scrim, as a date picker's does. `defaultOpen`, `isOpen` and `onOpenChange`\n * reach the surface.\n *\n * Every part on the surface is this package's own, `ColorArea`,\n * `ColorSlider` and `ColorField`, and they share the picker's value rather\n * than taking it as props. Passing `children` replaces all of them, and a\n * `ColorArea`, `ColorField`, `ColorSlider`, `ColorSwatch`,\n * `ColorSwatchPicker` or `ColorWheel` among them takes the picker's value\n * where it is given none of its own.\n *\n * `style`, `ref` and `testID` land on the trigger, which is what a layout\n * places.\n */\nfunction ColorPicker({\n  alpha = false,\n  children,\n  defaultOpen,\n  defaultValue,\n  isDisabled = false,\n  isOpen,\n  label,\n  onChange,\n  onOpenChange,\n  ref,\n  style,\n  testID,\n  value,\n}: ColorPickerProps) {\n  const theme = useTheme()\n  const { colors, radii, spacing, stateLayerOpacity } = theme\n  const styles = stylesOf(theme)\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const labelRole = useTypeRole('labelLarge')\n  const state = useColorPickerState({ defaultValue, onChange, value })\n  const overlay = useOverlayTriggerState({ defaultOpen, isOpen, onOpenChange })\n  // oxlint-disable-next-line typescript/unbound-method -- React Stately's setters are callbacks, and read no `this`\n  const { close, open: show } = overlay\n  const anchor = useRef<HostInstance | null>(null)\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.pill },\n    disabled: isDisabled,\n  })\n  const name = colorNameOf(state.color, locale, messages.transparent)\n\n  return (\n    <>\n      <Pressable\n        {...feedback.handlers}\n        aria-expanded={overlay.isOpen}\n        aria-label={`${label}, ${name}`}\n        disabled={isDisabled}\n        hitSlop={hitSlop(SWATCH + 2 * spacing.sm)}\n        onPress={show}\n        ref={refsOf<HostInstance>(ref, anchor, setTrigger)}\n        role=\"button\"\n        style={composeStyles<ViewStyle>(\n          styles.trigger,\n          isDisabled ? styles.disabled : undefined,\n          feedback.ring,\n          style,\n        )}\n        testID={testID}\n      >\n        {feedback.layer}\n        <ColorSwatch color={state.color} style={styles.swatch} />\n        <Text\n          style={composeStyles<TextStyle>(labelRole, {\n            color: isDisabled\n              ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n              : colors.onSurface,\n          })}\n        >\n          {label}\n        </Text>\n      </Pressable>\n      <PickerPopup\n        anchor={anchor}\n        close={close}\n        isOpen={overlay.isOpen}\n        label={label}\n        trigger={trigger}\n      >\n        {/*\n          Inside the surface rather than around the picker, since the surface\n          is drawn in the overlay host, which context set around the picker\n          does not reach.\n        */}\n        <PickedColorContext value={pickedOf(state)}>\n          {children ?? (\n            <NativeView style={styles.body}>\n              <ColorArea\n                aria-label={label}\n                colorSpace=\"hsl\"\n                isDisabled={isDisabled}\n                xChannel=\"saturation\"\n                yChannel=\"lightness\"\n              />\n              <ColorSlider\n                channel=\"hue\"\n                colorSpace=\"hsl\"\n                isDisabled={isDisabled}\n                label={CHANNELS.getChannelName('hue', locale)}\n              />\n              {alpha ? (\n                <ColorSlider\n                  channel=\"alpha\"\n                  isDisabled={isDisabled}\n                  label={CHANNELS.getChannelName('alpha', locale)}\n                />\n              ) : null}\n              <ColorField isDisabled={isDisabled} label={label} />\n            </NativeView>\n          )}\n        </PickedColorContext>\n      </PickerPopup>\n    </>\n  )\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction pickedOf(state: ColorPickerState): PickedColor {\n  return {\n    onChange: (color) => {\n      state.setColor(color)\n    },\n    value: state.color,\n  }\n}\n\nexport { ColorPicker }\nexport type { ColorPickerProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,82 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { Color, ColorChannel, ColorSpace } from "react-stately";
+//#region src/components/color-slider/index.d.ts
+type ColorSliderProps = {
+  /**
+   * The slider's name for a screen reader, when no `label` is drawn. Left
+   * out with the label too, the slider is named by its channel.
+   */
+  readonly 'aria-label'?: string;
+  /** Which channel of the colour the slider moves. */
+  readonly channel: ColorChannel;
+  /**
+   * The space the channel is read in, when the value is given in another: a
+   * hex or `rgb()` value has no hue until it is read as `hsl` or `hsb`.
+   */
+  readonly colorSpace?: ColorSpace;
+  /**
+   * The colour the slider starts at, when it keeps its own: a CSS colour
+   * string, or a `Color` from `parseColor`.
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Draws the slider disabled, and takes no presses, drags or screen reader
+   * actions.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** What the slider is for, drawn above the track. */
+  readonly label?: string;
+  /** Called with the colour as the channel moves. */
+  readonly onChange?: (value: Color) => void;
+  /** Called with the colour once a drag, a press or an action has ended. */
+  readonly onChangeEnd?: (value: Color) => void;
+  /**
+   * Along which axis the handle moves. A vertical slider is 240dp tall until
+   * `style` says otherwise.
+   * @default 'horizontal'
+   */
+  readonly orientation?: 'horizontal' | 'vertical';
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether the channel's value is shown at the end of the label's line.
+   * @default true
+   */
+  readonly showValue?: boolean;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /** The colour, for a call site holding it itself with `onChange`. */
+  readonly value?: Color | string;
+};
+/**
+ * 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`.
+ */
+declare function ColorSlider({ 'aria-label': ariaLabel, channel, colorSpace, defaultValue, isDisabled, label, onChange, onChangeEnd, orientation, ref, showValue, style, testID, value }: ColorSliderProps): import("react").JSX.Element;
+//#endregion
+export { ColorSlider, type ColorSliderProps };
+//# sourceMappingURL=index.d.ts.map