@kanso-labs/react-native-kanso-ui 0.11.24 → 0.11.25

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

@@ -35,6 +35,7 @@ const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>
 		height: SWATCH,
 		width: SWATCH
 	},
+	swatchDisabled: { opacity: stateLayerOpacity.disabledContent },
 	trigger: {
 		alignItems: "center",
 		alignSelf: "flex-start",
@@ -73,7 +74,7 @@ const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>
 * places.
 */
 function ColorPicker(t0) {
-	const $ = c(68);
+	const $ = c(69);
 	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;
@@ -160,38 +161,42 @@ function ColorPicker(t0) {
 	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];
+	const T1 = ColorSwatch;
+	const t17 = state.color;
+	const t18 = composeStyles(styles.swatch, isDisabled ? styles.swatchDisabled : void 0);
 	let t19;
-	if ($[30] !== label || $[31] !== t18) {
-		t19 = /* @__PURE__ */ jsx(Text, {
-			style: t18,
-			children: label
+	if ($[22] !== T1 || $[23] !== state.color || $[24] !== t18) {
+		t19 = /* @__PURE__ */ jsx(T1, {
+			color: t17,
+			style: t18
 		});
-		$[30] = label;
-		$[31] = t18;
-		$[32] = t19;
-	} else t19 = $[32];
+		$[22] = T1;
+		$[23] = state.color;
+		$[24] = t18;
+		$[25] = t19;
+	} else t19 = $[25];
 	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, {
+	if ($[26] !== colors.onSurface || $[27] !== isDisabled || $[28] !== labelRole || $[29] !== stateLayerOpacity) {
+		t20 = composeStyles(labelRole, { color: isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface });
+		$[26] = colors.onSurface;
+		$[27] = isDisabled;
+		$[28] = labelRole;
+		$[29] = stateLayerOpacity;
+		$[30] = t20;
+	} else t20 = $[30];
+	let t21;
+	if ($[31] !== label || $[32] !== t20) {
+		t21 = /* @__PURE__ */ jsx(Text, {
+			style: t20,
+			children: label
+		});
+		$[31] = label;
+		$[32] = t20;
+		$[33] = t21;
+	} else t21 = $[33];
+	let t22;
+	if ($[34] !== T0 || $[35] !== feedback.handlers || $[36] !== feedback.layer || $[37] !== isDisabled || $[38] !== overlay.isOpen || $[39] !== show || $[40] !== t10 || $[41] !== t12 || $[42] !== t13 || $[43] !== t15 || $[44] !== t19 || $[45] !== t21 || $[46] !== testID) {
+		t22 = /* @__PURE__ */ jsxs(T0, {
 			...t8,
 			"aria-expanded": t9,
 			"aria-label": t10,
@@ -204,35 +209,35 @@ function ColorPicker(t0) {
 			testID,
 			children: [
 				t16,
-				t17,
-				t19
+				t19,
+				t21
 			]
 		});
-		$[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;
+		$[34] = T0;
+		$[35] = feedback.handlers;
+		$[36] = feedback.layer;
+		$[37] = isDisabled;
+		$[38] = overlay.isOpen;
+		$[39] = show;
+		$[40] = t10;
+		$[41] = t12;
+		$[42] = t13;
+		$[43] = t15;
 		$[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, {
+		$[45] = t21;
+		$[46] = testID;
+		$[47] = t22;
+	} else t22 = $[47];
+	const t23 = overlay.isOpen;
+	let t24;
+	if ($[48] !== state) {
+		t24 = pickedOf(state);
+		$[48] = state;
+		$[49] = t24;
+	} else t24 = $[49];
+	let t25;
+	if ($[50] !== alpha || $[51] !== children || $[52] !== isDisabled || $[53] !== label || $[54] !== locale || $[55] !== styles) {
+		t25 = children ?? /* @__PURE__ */ jsxs(View, {
 			style: styles.body,
 			children: [
 				/* @__PURE__ */ jsx(ColorArea, {
@@ -259,49 +264,49 @@ function ColorPicker(t0) {
 				})
 			]
 		});
-		$[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
+		$[50] = alpha;
+		$[51] = children;
+		$[52] = isDisabled;
+		$[53] = label;
+		$[54] = locale;
+		$[55] = styles;
+		$[56] = t25;
+	} else t25 = $[56];
+	let t26;
+	if ($[57] !== t24 || $[58] !== t25) {
+		t26 = /* @__PURE__ */ jsx(PickedColorContext, {
+			value: t24,
+			children: t25
 		});
-		$[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, {
+		$[57] = t24;
+		$[58] = t25;
+		$[59] = t26;
+	} else t26 = $[59];
+	let t27;
+	if ($[60] !== close || $[61] !== label || $[62] !== overlay.isOpen || $[63] !== t26 || $[64] !== trigger) {
+		t27 = /* @__PURE__ */ jsx(PickerPopup, {
 			anchor,
 			close,
-			isOpen: t21,
+			isOpen: t23,
 			label,
 			trigger,
-			children: t24
+			children: t26
 		});
-		$[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;
+		$[60] = close;
+		$[61] = label;
+		$[62] = overlay.isOpen;
+		$[63] = t26;
+		$[64] = trigger;
+		$[65] = t27;
+	} else t27 = $[65];
+	let t28;
+	if ($[66] !== t22 || $[67] !== t27) {
+		t28 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t22, t27] });
+		$[66] = t22;
+		$[67] = t27;
+		$[68] = t28;
+	} else t28 = $[68];
+	return t28;
 }
 function pickedOf(state) {
 	return {

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

@@ -1 +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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"}
+{"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","swatchDisabled","opacity","disabledContent","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","T1","t17","t18","t19","t20","t21","t22","t23","t24","pickedOf","t25","getChannelName","t26","t27","t28","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    // Laid over the swatch while the trigger is disabled, at the opacity a\n    // disabled label's colour mixes at, so the swatch fades with the label\n    // and the trigger does not read as half enabled.\n    swatchDisabled: {\n      opacity: stateLayerOpacity.disabledContent,\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\n          color={state.color}\n          style={composeStyles<ViewStyle>(\n            styles.swatch,\n            isDisabled ? styles.swatchDisabled : undefined,\n          )}\n        />\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":";;;;;;;;;;;;;;;;;;;;;AAmFA,MAAMqC,SAAS;AAGf,MAAMC,gBAAgB;AAKtB,MAAMC,WAAWvB,WAAW,gBAAgB;AAE5C,MAAMwB,WAAWT,cAAc,EAAEU,QAAQC,OAAOC,SAASC,wBACvD9B,WAAW+B,OAAO;CAGhBC,MAAM;EACJC,WAAW;EACXC,KAAKL,QAAQM;EACbC,UAAU;EACVC,SAASR,QAAQS;EACjBC,OAAOf;CACT;CACAgB,UAAU,EACRC,iBAAiB3B,YACfa,OAAOe,WACPZ,kBAAkBa,iBACpB,EACF;CACAC,QAAQ;EACNC,QAAQtB;EACRgB,OAAOhB;CACT;CAIAuB,gBAAgB,EACdC,SAASjB,kBAAkBkB,gBAC7B;CACAC,SAAS;EACPC,YAAY;EACZC,WAAW;EACXV,iBAAiBd,OAAOyB;EACxBC,cAAczB,MAAM0B;EACpBrB,WAAW;EACXsB,eAAe;EACfrB,KAAKL,QAAQ2B;EACbC,mBAAmB5B,QAAQM;EAC3BuB,iBAAiB7B,QAAQ2B;CAC3B;AACF,CAAC,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,SAAAiB,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAhB,OAAAiB,IAAAhB,UAAAC,aAAAC,cAAAC,YAAAc,IAAAb,QAAAC,OAAAC,UAAAE,cAAAC,KAAAC,OAAAC,QAAAJ,UAAAM;CACnB,MAAAd,QAAAiB,OAAAE,KAAAA,IAAA,QAAAF;CAIA,MAAAb,aAAAc,OAAAC,KAAAA,IAAA,QAAAD;CAUA,MAAAE,QAAcjE,SAAS;CACvB,MAAA,EAAAY,QAAAC,OAAAC,SAAAC,sBAAsDkD;CACtD,MAAAC,SAAevD,SAASsD,KAAK;CAC7B,MAAAE,SAAe5E,YAAYyE,KAAAA,CAAS;CACpC,MAAAI,WAAiB5E,YAAY;CAC7B,MAAA6E,YAAkBlE,YAAY,YAAY;CAAC,IAAAmE;CAAA,IAAAV,EAAA,OAAAZ,gBAAAY,EAAA,OAAAR,YAAAQ,EAAA,OAAAP,OAAA;EACTiB,KAAA;GAAAtB;GAAAI;GAAAC;EAAgC;EAACO,EAAA,KAAAZ;EAAAY,EAAA,KAAAR;EAAAQ,EAAA,KAAAP;EAAAO,EAAA,KAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAnE,MAAAW,QAAcnF,oBAAoBkF,EAAiC;CAAC,IAAAE;CAAA,IAAAZ,EAAA,OAAAb,eAAAa,EAAA,OAAAV,UAAAU,EAAA,OAAAN,cAAA;EAC7BkB,KAAA;GAAAzB;GAAAG;GAAAI;EAAoC;EAACM,EAAA,KAAAb;EAAAa,EAAA,KAAAV;EAAAU,EAAA,KAAAN;EAAAM,EAAA,KAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAA5E,MAAAa,UAAgBpF,uBAAuBmF,EAAqC;CAE5E,MAAA,EAAAE,OAAAC,MAAAC,SAA8BH;CAC9B,MAAAI,SAAehG,OAA4B,IAAI;CAC/C,MAAA,CAAAqD,SAAA4C,cAA8BhG,SAA8B,IAAI;CAAC,IAAAiG;CAAA,IAAAnB,EAAA,OAAA/C,MAAA0B,MAAA;EAGtDwC,KAAA,EAAAzC,cAAgBzB,MAAK0B,KAAM;EAACqB,EAAA,KAAA/C,MAAA0B;EAAAqB,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAAA,IAAAoB;CAAA,IAAApB,EAAA,QAAAhD,OAAAe,aAAAiC,EAAA,QAAAX,cAAAW,EAAA,QAAAmB,IAAA;EAFLC,KAAA;GAAAC,OACzBrE,OAAMe;GAAUuD,SACdH;GAA4BtD,UAC3BwB;EACZ;EAACW,EAAA,MAAAhD,OAAAe;EAAAiC,EAAA,MAAAX;EAAAW,EAAA,MAAAmB;EAAAnB,EAAA,MAAAoB;CAAA,OAAAA,KAAApB,EAAA;CAJD,MAAAuB,WAAiBxF,iBAAiBqF,EAIjC;CAAC,IAAAI;CAAA,IAAAxB,EAAA,QAAAO,UAAAP,EAAA,QAAAQ,SAAAiB,eAAAzB,EAAA,QAAAW,MAAAU,OAAA;EACWG,KAAAvF,YAAY0E,MAAKU,OAAQd,QAAQC,SAAQiB,WAAY;EAACzB,EAAA,MAAAO;EAAAP,EAAA,MAAAQ,SAAAiB;EAAAzB,EAAA,MAAAW,MAAAU;EAAArB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAnE,MAAA0B,OAAaF;CAIR,MAAAG,KAAAvG;CACK,MAAAwG,KAAAL,SAAQM;CACG,MAAAC,KAAAjB,QAAOvB;CACV,MAAAyC,MAAA,GAAGxC,MAAK,IAAKmC;CAER,MAAAM,MAAApF,SAAS,IAAIM,QAAO2B;CAAG,IAAAoD;CAAA,IAAAjC,EAAA,QAAAgC,KAAA;EAA/BC,MAAAnG,QAAQkG,GAAuB;EAAChC,EAAA,MAAAgC;EAAAhC,EAAA,MAAAiC;CAAA,OAAAA,MAAAjC,EAAA;CAAA,IAAAkC;CAAA,IAAAlC,EAAA,QAAAL,KAAA;EAEpCuC,MAAAlG,OAAqB2D,KAAKsB,QAAQC,UAAU;EAAClB,EAAA,MAAAL;EAAAK,EAAA,MAAAkC;CAAA,OAAAA,MAAAlC,EAAA;CAC7C,MAAAmC,MAAA;CACE,MAAAC,MAAA/F,cACLiE,OAAMhC,SACNe,aAAaiB,OAAMzC,WAAnBuC,KAAAA,GACAmB,SAAQc,MACRzC,KACF;CAGC,MAAA0C,MAAAf,SAAQgB;CACR,MAAAC,KAAA7F;CACQ,MAAA8F,MAAA9B,MAAKU;CACL,MAAAqB,MAAArG,cACLiE,OAAMrC,QACNoB,aAAaiB,OAAMnC,iBAAnBiC,KAAAA,CACF;CAAC,IAAAuC;CAAA,IAAA3C,EAAA,QAAAwC,MAAAxC,EAAA,QAAAW,MAAAU,SAAArB,EAAA,QAAA0C,KAAA;EALHC,MAAA,oBAAC,IAAD;GACS,OAAAF;GACA,OAAAC;EAGN,CAAA;EACD1C,EAAA,MAAAwC;EAAAxC,EAAA,MAAAW,MAAAU;EAAArB,EAAA,MAAA0C;EAAA1C,EAAA,MAAA2C;CAAA,OAAAA,MAAA3C,EAAA;CAAA,IAAA4C;CAAA,IAAA5C,EAAA,QAAAhD,OAAAe,aAAAiC,EAAA,QAAAX,cAAAW,EAAA,QAAAS,aAAAT,EAAA,QAAA7C,mBAAA;EAEOyF,MAAAvG,cAAyBoE,WAAW,EAAAY,OAClChC,aACHlD,YAAYa,OAAMe,WAAYZ,kBAAiBkB,eAChC,IAAfrB,OAAMe,UACZ,CAAC;EAACiC,EAAA,MAAAhD,OAAAe;EAAAiC,EAAA,MAAAX;EAAAW,EAAA,MAAAS;EAAAT,EAAA,MAAA7C;EAAA6C,EAAA,MAAA4C;CAAA,OAAAA,MAAA5C,EAAA;CAAA,IAAA6C;CAAA,IAAA7C,EAAA,QAAAT,SAAAS,EAAA,QAAA4C,KAAA;EALJC,MAAA,oBAAC,MAAD;GACS,OAAAD;GAMNrD,UAAAA;EAPE,CAAA;EAQES,EAAA,MAAAT;EAAAS,EAAA,MAAA4C;EAAA5C,EAAA,MAAA6C;CAAA,OAAAA,MAAA7C,EAAA;CAAA,IAAA8C;CAAA,IAAA9C,EAAA,QAAA2B,MAAA3B,EAAA,QAAAuB,SAAAM,YAAA7B,EAAA,QAAAuB,SAAAgB,SAAAvC,EAAA,QAAAX,cAAAW,EAAA,QAAAa,QAAAvB,UAAAU,EAAA,QAAAgB,QAAAhB,EAAA,QAAA+B,OAAA/B,EAAA,QAAAiC,OAAAjC,EAAA,QAAAkC,OAAAlC,EAAA,QAAAoC,OAAApC,EAAA,QAAA2C,OAAA3C,EAAA,QAAA6C,OAAA7C,EAAA,QAAAH,QAAA;EAjCTiD,MAAA,qBAAC,IAAD;GAAU,GACJlB;GACW,iBAAAE;GACH,cAAAC;GACF1C,UAAAA;GACD,SAAA4C;GACAjB,SAAAA;GACJ,KAAAkB;GACA,MAAAC;GACE,OAAAC;GAMCvC;GAfV,UAAA;IAiBGyC;IACDK;IAOAE;GAzBQ;;EAkCE7C,EAAA,MAAA2B;EAAA3B,EAAA,MAAAuB,SAAAM;EAAA7B,EAAA,MAAAuB,SAAAgB;EAAAvC,EAAA,MAAAX;EAAAW,EAAA,MAAAa,QAAAvB;EAAAU,EAAA,MAAAgB;EAAAhB,EAAA,MAAA+B;EAAA/B,EAAA,MAAAiC;EAAAjC,EAAA,MAAAkC;EAAAlC,EAAA,MAAAoC;EAAApC,EAAA,MAAA2C;EAAA3C,EAAA,MAAA6C;EAAA7C,EAAA,MAAAH;EAAAG,EAAA,MAAA8C;CAAA,OAAAA,MAAA9C,EAAA;CAIF,MAAA+C,MAAAlC,QAAOvB;CAAO,IAAA0D;CAAA,IAAAhD,EAAA,QAAAW,OAAA;EASKqC,MAAAC,SAAStC,KAAK;EAACX,EAAA,MAAAW;EAAAX,EAAA,MAAAgD;CAAA,OAAAA,MAAAhD,EAAA;CAAA,IAAAkD;CAAA,IAAAlD,EAAA,QAAAf,SAAAe,EAAA,QAAAd,YAAAc,EAAA,QAAAX,cAAAW,EAAA,QAAAT,SAAAS,EAAA,QAAAO,UAAAP,EAAA,QAAAM,QAAA;EACvC4C,MAAAhE,YACC,qBAACuE,MAAD;GAAmB,OAAAnD,OAAMjD;GAAzB,UAAA;IACE,oBAAC,WAAD;KACckC,cAAAA;KACD,YAAA;KACCF;KACH,UAAA;KACA,UAAA;IAAW,CAAA;IAEtB,oBAAC,aAAD;KACU,SAAA;KACG,YAAA;KACCA;KACL,OAAAvC,SAAQqG,eAAgB,OAAO5C,MAAM;IAAC,CAAA;IAE9CtB,QACC,oBAAC,aAAD;KACU,SAAA;KACII;KACL,OAAAvC,SAAQqG,eAAgB,SAAS5C,MAAM;IAAC,CAAA,IAJlD;IAOD,oBAAC,YAAD;KAAwBlB;KAAmBE;IAAK,CAAA;GArBvC;;EAuBZS,EAAA,MAAAf;EAAAe,EAAA,MAAAd;EAAAc,EAAA,MAAAX;EAAAW,EAAA,MAAAT;EAAAS,EAAA,MAAAO;EAAAP,EAAA,MAAAM;EAAAN,EAAA,MAAAkD;CAAA,OAAAA,MAAAlD,EAAA;CAAA,IAAAoD;CAAA,IAAApD,EAAA,QAAAgD,OAAAhD,EAAA,QAAAkD,KAAA;EAzBHE,MAAA,oBAAC,oBAAD;GAA2B,OAAAJ;GACxBE,UAAAA;EADgB,CAAA;EA0BElD,EAAA,MAAAgD;EAAAhD,EAAA,MAAAkD;EAAAlD,EAAA,MAAAoD;CAAA,OAAAA,MAAApD,EAAA;CAAA,IAAAqD;CAAA,IAAArD,EAAA,QAAAc,SAAAd,EAAA,QAAAT,SAAAS,EAAA,QAAAa,QAAAvB,UAAAU,EAAA,QAAAoD,OAAApD,EAAA,QAAA1B,SAAA;EAtCvB+E,MAAA,oBAAC,aAAD;GACUpC;GACDH;GACC,QAAAiC;GACDxD;GACEjB;GAOT8E,UAAAA;EAZU,CAAA;EAuCEpD,EAAA,MAAAc;EAAAd,EAAA,MAAAT;EAAAS,EAAA,MAAAa,QAAAvB;EAAAU,EAAA,MAAAoD;EAAApD,EAAA,MAAA1B;EAAA0B,EAAA,MAAAqD;CAAA,OAAAA,MAAArD,EAAA;CAAA,IAAAsD;CAAA,IAAAtD,EAAA,QAAA8C,OAAA9C,EAAA,QAAAqD,KAAA;EA3EhBC,MAAA,qBAAA,YAAA,EAAA,UAAA,CACER,KAmCAO,GAuCc,EAAA,CAAA;EACbrD,EAAA,MAAA8C;EAAA9C,EAAA,MAAAqD;EAAArD,EAAA,MAAAsD;CAAA,OAAAA,MAAAtD,EAAA;CAAA,OA5EHsD;AA4EG;AAOP,SAASL,SAAStC,OAAsC;CACtD,OAAO;EACLnB,WAAW6B,UAAU;GACnBV,MAAM4C,SAASlC,KAAK;EACtB;EACA5B,OAAOkB,MAAMU;CACf;AACF"}

package/dist/components/range-calendar/index.d.ts

@@ -31,8 +31,8 @@ type RangeCalendarProps$1<T extends DateValue = DateValue> = Pick<RangeCalendarP
   readonly testID?: string;
   /**
    * How many months the calendar shows at once, and moves by: side by side
-   * from the expanded window size up, one under another below it. Only
-   * `months` is read.
+   * from the expanded window size up, one under another below it, each
+   * named over its weeks. Only `months` is read.
    * @default { months: 1 }
    */
   readonly visibleDuration?: DateDuration;

package/dist/components/range-calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DateDuration","ComponentRef","Ref","StyleProp","ViewStyle","DateValue","RangeCalendarProps","StatelyRangeCalendarProps","createCalendar","View","useRangeCalendarState","CalendarFrame","useRootStyle","visibleRangeOf","useLocaleOf","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","visibleDuration","RangeCalendar","t0","$","_c","ariaLabel","props","t1","undefined","writtenIn","months","Math","max","rootStyle","t2","t3","state","t4","shown","t5","t6","t7","firstDayOfWeek","t8","_c"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { DateDuration } from '@internationalized/date'\nimport type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  RangeCalendarProps as StatelyRangeCalendarProps,\n} from 'react-stately/useRangeCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useRangeCalendarState } from 'react-stately/useRangeCalendarState'\n\nimport { CalendarFrame, useRootStyle, visibleRangeOf } from '../../calendar'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's RangeCalendar: the date pickers page's calendar again, picking\n// two dates rather than one. Every part it draws is Calendar's, from\n// src/calendar, the container, the header, the month and year menus, the\n// grid and the date cell, so the two cannot come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens: the secondary container, one step down\n// from the primary the two ends take, with its label in on secondary\n// container and its state layers in on primary container. Two things follow\n// from drawing a band across a grid whose dates are spaced apart, as on web.\n//\n// **The band is square and the ends are round.** A run of days reads as one\n// shape rather than a row of circles, and the first and last day round only\n// their outer side, which is what makes the band begin and end at a circle.\n// The sides are logical, so a right-to-left layout turns the band over.\n//\n// **The band fills the whole of each day's column.** A day in the range\n// drops the 4dp either side that every other date keeps and takes the full\n// width of its column, so one day's band meets the next one's.\n//\n// The state is React Stately's `useRangeCalendarState`, which web's React\n// Aria range calendar is built on. A first press starts the range and a\n// second ends it, on either side of the first. While a range is started a\n// pointer over a date draws the range as far as it, as web's does; a touch\n// has no such preview, so on a phone the band shows once the second date is\n// pressed. A date `isDateUnavailable` rules out is struck through, and once\n// a range is started the dates past it are disabled, unless\n// `allowsNonContiguousRanges` lets the range run over it.\n//\n// Each date's name is React Aria's: the two ends open with the whole range,\n// a day inside it is said to be selected, and each date's hint says whether\n// a press starts a range or ends the one started.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Pick<\n  StatelyRangeCalendarProps<T>,\n  | 'allowsNonContiguousRanges'\n  | 'defaultFocusedValue'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'focusedValue'\n  | 'isDateUnavailable'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onFocusChange'\n  | 'value'\n> & {\n  /**\n   * The calendar's name. The month shown, or the months, is added to it, as\n   * React Aria adds it on web.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The BCP 47 locale the calendar is written in: its month and weekday\n   * names, its digits, its first day of the week and its calendar system.\n   * Defaults to the `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as `Calendar`'s does. The\n   * year list runs a century either side of the year shown, or to\n   * `minValue` and `maxValue` where they are closer.\n   *\n   * For one visible month. With `visibleDuration` of more than one, the\n   * header is the plain one, whose heading names every month shown, since\n   * the menus name only the first.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * How many months the calendar shows at once, and moves by: side by side\n   * from the expanded window size up, one under another below it. Only\n   * `months` is read.\n   * @default { months: 1 }\n   */\n  readonly visibleDuration?: DateDuration\n}\n\n/**\n * A calendar for picking a range of dates. The value is a `{ start, end }`\n * pair of `@internationalized/date` values, as on web: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { CalendarDate } from '@internationalized/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range run past\n * the dates ruled out inside it rather than stopping at the first.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction RangeCalendar<T extends DateValue = DateValue>({\n  'aria-label': ariaLabel,\n  locale,\n  ref,\n  showMonthYearMenus = false,\n  style,\n  testID,\n  visibleDuration,\n  ...props\n}: RangeCalendarProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const months = Math.max(1, visibleDuration?.months ?? 1)\n  const rootStyle = useRootStyle(months)\n  const state = useRangeCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n    visibleDuration: { months },\n  })\n  const shown = visibleRangeOf(state, writtenIn, true)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? shown : `${ariaLabel}, ${shown}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(rootStyle, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        months={months}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { RangeCalendarProps }\n\nexport { RangeCalendar }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DateDuration","ComponentRef","Ref","StyleProp","ViewStyle","DateValue","RangeCalendarProps","StatelyRangeCalendarProps","createCalendar","View","useRangeCalendarState","CalendarFrame","useRootStyle","visibleRangeOf","useLocaleOf","composeStyles","Pick","T","locale","ref","showMonthYearMenus","style","testID","visibleDuration","RangeCalendar","t0","$","_c","ariaLabel","props","t1","undefined","writtenIn","months","Math","max","rootStyle","t2","t3","state","t4","shown","t5","t6","t7","firstDayOfWeek","t8","_c"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { DateDuration } from '@internationalized/date'\nimport type { ComponentRef, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type {\n  DateValue,\n  RangeCalendarProps as StatelyRangeCalendarProps,\n} from 'react-stately/useRangeCalendarState'\n\nimport { createCalendar } from '@internationalized/date'\nimport { View } from 'react-native'\nimport { useRangeCalendarState } from 'react-stately/useRangeCalendarState'\n\nimport { CalendarFrame, useRootStyle, visibleRangeOf } from '../../calendar'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { composeStyles } from '../../theme/styles'\n\n// kanso-ui's RangeCalendar: the date pickers page's calendar again, picking\n// two dates rather than one. Every part it draws is Calendar's, from\n// src/calendar, the container, the header, the month and year menus, the\n// grid and the date cell, so the two cannot come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens: the secondary container, one step down\n// from the primary the two ends take, with its label in on secondary\n// container and its state layers in on primary container. Two things follow\n// from drawing a band across a grid whose dates are spaced apart, as on web.\n//\n// **The band is square and the ends are round.** A run of days reads as one\n// shape rather than a row of circles, and the first and last day round only\n// their outer side, which is what makes the band begin and end at a circle.\n// The sides are logical, so a right-to-left layout turns the band over.\n//\n// **The band fills the whole of each day's column.** A day in the range\n// drops the 4dp either side that every other date keeps and takes the full\n// width of its column, so one day's band meets the next one's.\n//\n// The state is React Stately's `useRangeCalendarState`, which web's React\n// Aria range calendar is built on. A first press starts the range and a\n// second ends it, on either side of the first. While a range is started a\n// pointer over a date draws the range as far as it, as web's does; a touch\n// has no such preview, so on a phone the band shows once the second date is\n// pressed. A date `isDateUnavailable` rules out is struck through, and once\n// a range is started the dates past it are disabled, unless\n// `allowsNonContiguousRanges` lets the range run over it.\n//\n// Each date's name is React Aria's: the two ends open with the whole range,\n// a day inside it is said to be selected, and each date's hint says whether\n// a press starts a range or ends the one started.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Pick<\n  StatelyRangeCalendarProps<T>,\n  | 'allowsNonContiguousRanges'\n  | 'defaultFocusedValue'\n  | 'defaultValue'\n  | 'firstDayOfWeek'\n  | 'focusedValue'\n  | 'isDateUnavailable'\n  | 'isDisabled'\n  | 'isReadOnly'\n  | 'maxValue'\n  | 'minValue'\n  | 'onChange'\n  | 'onFocusChange'\n  | 'value'\n> & {\n  /**\n   * The calendar's name. The month shown, or the months, is added to it, as\n   * React Aria adds it on web.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The BCP 47 locale the calendar is written in: its month and weekday\n   * names, its digits, its first day of the week and its calendar system.\n   * Defaults to the `I18nProvider`'s, or the device's outside one.\n   */\n  readonly locale?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the header draws the month and the year as menu buttons, each\n   * opening a list of them in the grid's place, as `Calendar`'s does. The\n   * year list runs a century either side of the year shown, or to\n   * `minValue` and `maxValue` where they are closer.\n   *\n   * For one visible month. With `visibleDuration` of more than one, the\n   * header is the plain one, whose heading names every month shown, since\n   * the menus name only the first.\n   * @default false\n   */\n  readonly showMonthYearMenus?: boolean\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * How many months the calendar shows at once, and moves by: side by side\n   * from the expanded window size up, one under another below it, each\n   * named over its weeks. Only `months` is read.\n   * @default { months: 1 }\n   */\n  readonly visibleDuration?: DateDuration\n}\n\n/**\n * A calendar for picking a range of dates. The value is a `{ start, end }`\n * pair of `@internationalized/date` values, as on web: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * import { CalendarDate } from '@internationalized/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range run past\n * the dates ruled out inside it rather than stopping at the first.\n *\n * `style`, `ref` and `testID` land on the container.\n */\nfunction RangeCalendar<T extends DateValue = DateValue>({\n  'aria-label': ariaLabel,\n  locale,\n  ref,\n  showMonthYearMenus = false,\n  style,\n  testID,\n  visibleDuration,\n  ...props\n}: RangeCalendarProps<T>) {\n  const writtenIn = useLocaleOf(locale)\n  const months = Math.max(1, visibleDuration?.months ?? 1)\n  const rootStyle = useRootStyle(months)\n  const state = useRangeCalendarState<T>({\n    ...props,\n    createCalendar,\n    locale: writtenIn,\n    visibleDuration: { months },\n  })\n  const shown = visibleRangeOf(state, writtenIn, true)\n\n  return (\n    <View\n      aria-label={ariaLabel === undefined ? shown : `${ariaLabel}, ${shown}`}\n      ref={ref}\n      role=\"group\"\n      style={composeStyles<ViewStyle>(rootStyle, style)}\n      testID={testID}\n    >\n      <CalendarFrame\n        firstDayOfWeek={props.firstDayOfWeek}\n        locale={writtenIn}\n        months={months}\n        showMonthYearMenus={showMonthYearMenus}\n        state={state}\n      />\n    </View>\n  )\n}\n\nexport type { RangeCalendarProps }\n\nexport { RangeCalendar }\n"],"mappings":"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"}