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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","AccessibilityActionEvent","LayoutChangeEvent","StyleProp","ViewStyle","Color","ColorChannel","ColorSpace","ColorAreaState","useId","useState","I18nManager","StyleSheet","View","Gesture","GestureDetector","GestureHandlerRootView","Svg","Defs","LinearGradient","Mask","Rect","Stop","parseColor","useColorAreaState","ColorThumb","HIDDEN","useLocaleOf","ADJUSTABLE","percentOf","usePickedColor","useTheme","composeStyles","themedStyles","ColorAreaProps","colorSpace","defaultValue","isDisabled","onChange","value","onChangeEnd","ref","style","testID","xChannel","yChannel","Fade","color","offset","opacity","Layer","axis","rising","stops","SLOP","TARGET","HUES","BLACK","WHITE","styles","create","half","flexGrow","root","aspectRatio","boxSizing","width","seat","alignItems","flexDirection","height","justifyContent","marginStart","marginTop","position","thumb","pointerEvents","absoluteFill","stylesOf","radii","stateLayerOpacity","disabled","disabledContent","plane","borderRadius","sm","overflow","adjustOf","state","event","actionName","nativeEvent","up","setDragging","incrementX","xChannelStep","decrementX","incrementY","yChannelStep","decrementY","ColorArea","t0","$","_c","ariaLabel","t1","undefined","own","locale","picked","t2","t3","Symbol","for","size","setSize","t4","gesture","usePlaneGesture","x","y","getThumbPosition","channels","T0","t5","T1","T2","T3","t7","sizeTo","t9","t10","layersOf","t11","t12","T4","t13","start","top","t14","t15","t16","getDisplayColor","t17","isDragging","t18","t19","t8","t20","t21","t6","t22","cssOf","toFormat","withChannelValue","toString","fadeOf","Half","channel","label","getChannelName","name","getChannelRange","maxValue","minValue","getChannelValue","formatChannelValue","getColorName","zChannel","space","getColorSpace","zValue","corner","xEnd","yEnd","rowOf","base","layers","getColorChannels","push","stopsOf","Plane","id","reversed","isRTL","some","_temp","layer_0","index","layer","map","_temp2","layer_1","index_0","stop","end","set","layout","hue","length","setFrom","across","setColorFromPoint","pan","Pan","minDistance","enabled","runOnJS","onStart","onUpdate","onFinalize","tap","Tap","maxDistance","onEnd","success","Race","withTestId","_c"],"sources":["../../../src/components/color-area/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type {\n  AccessibilityActionEvent,\n  LayoutChangeEvent,\n  StyleProp,\n  ViewStyle,\n} from 'react-native'\nimport type { Color, ColorChannel, ColorSpace } from 'react-stately'\nimport type { ColorAreaState } from 'react-stately/useColorAreaState'\n\nimport { useId, useState } from 'react'\nimport { I18nManager, StyleSheet, View } from 'react-native'\nimport {\n  Gesture,\n  GestureDetector,\n  GestureHandlerRootView,\n} from 'react-native-gesture-handler'\nimport Svg, { Defs, LinearGradient, Mask, Rect, Stop } from 'react-native-svg'\nimport { parseColor } from 'react-stately'\nimport { useColorAreaState } from 'react-stately/useColorAreaState'\n\nimport { ColorThumb } from '../../color-thumb'\nimport { HIDDEN } from '../../glyphs/hidden'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { ADJUSTABLE, percentOf } from '../../slider'\nimport { usePickedColor } from '../../swatch'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's ColorArea: two channels of a colour as a plane, one along each\n// axis, with ColorSlider's ringed handle where they meet. No Material Design\n// page draws one, so what is here is web's own, each choice for web's reason.\n//\n// **It is square, and takes the width it is given.** A plane has no natural\n// size, and one that was not square would give its two channels unequal\n// travel, so the same drag would move one further than the other. `style`\n// sets its width, and its height follows.\n//\n// **Its corner is the small one, and it carries no chequer.** The plane is\n// opaque across the whole of it, so nothing behind it is ever seen, which is\n// why web took its chequer out.\n//\n// **The plane is React Aria's, layer for layer**, from its\n// useColorAreaGradient, in react-native-svg rather than CSS:\n//\n// - In HSL and HSB it is a gradient along each axis laid one over the other,\n//   over a solid hue when hue is the channel neither axis carries. A CSS\n//   gradient into `transparent` fades the colour itself out, and an SVG one\n//   fades towards whatever colour the transparent stop names, so each fade\n//   here keeps its colour and drops its opacity, and lightness's black,\n//   transparent and white is two fades meeting at the middle.\n// - In RGB React Aria screens one gradient per channel over a solid third,\n//   which blends as no SVG paint does. The plane those layers make is the\n//   colour with each axis's channel running from its least to its most, which\n//   moves along each axis alone, so it is drawn as the row along its bottom\n//   with the row along its top over it, faded in from the bottom.\n//\n// **A channel missing from the value's space throws, and alpha is a channel\n// here only in RGB, as on web.** A hex or `rgb()` value is read as RGB, which\n// has no saturation, so `xChannel=\"saturation\"` against one throws rather\n// than converting; `colorSpace` converts it. Asked for alpha in HSL or HSB,\n// React Aria draws the two channels alpha is not instead and says nothing,\n// and so does this. In RGB the handle moves alpha, and the plane still does\n// not thin, since React Aria's layers are opaque.\n//\n// **A screen reader adjusts each channel apart.** React Aria gives the plane\n// a hidden range input per channel, and an element here adjusts in one\n// direction only, so the handle holds two adjustable halves, the start one\n// for the horizontal channel and the end one for the vertical, each named by\n// its channel, after `aria-label` when there is one. Each says its channel's\n// value and the colour's name, \"100%, light vibrant cyan blue\", in the\n// provider's locale. A press on the plane moves the handle there and a drag\n// carries it, setting both channels together, and `onChangeEnd` comes once\n// as it lets go. Disabled, the plane and the handle fade and take nothing.\n//\n// Under a right-to-left layout the horizontal channel runs from the right,\n// as presses are read.\n\ntype ColorAreaProps = {\n  /**\n   * What the plane is for, which a screen reader hears before each channel's\n   * name.\n   */\n  readonly 'aria-label'?: string\n  /**\n   * The space the channels are read in, when the value is given in another:\n   * a hex or `rgb()` value has no saturation until it is read as `hsl` or\n   * `hsb`.\n   */\n  readonly colorSpace?: ColorSpace\n  /**\n   * The colour the plane starts at, when it keeps its own: a CSS colour\n   * string, or a `Color` from `parseColor`. White when neither this nor\n   * `value` is given.\n   */\n  readonly defaultValue?: Color | string\n  /**\n   * Draws the plane disabled, and takes no presses, drags or screen reader\n   * actions.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Called with the colour as either channel moves. */\n  readonly onChange?: (value: Color) => void\n  /** Called with the colour once a drag, a press or an action has ended. */\n  readonly onChangeEnd?: (value: Color) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Lands on the square, and sets its width; its height follows. */\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   * The channel along the horizontal axis. The first of the space's\n   * channels the vertical one is not, when left out.\n   */\n  readonly xChannel?: ColorChannel\n  /**\n   * The channel up the vertical axis. The first of the space's channels the\n   * horizontal one is not, when left out.\n   */\n  readonly yChannel?: ColorChannel\n}\n\ntype Fade = {\n  readonly color: string\n  readonly offset: number\n  readonly opacity: number\n}\n\n// A layer of the plane, bottom first: a fill, or a gradient along one axis,\n// which a rising one shows only as far up the plane as it has faded in.\ntype Layer =\n  | {\n      readonly axis: 'x' | 'y'\n      readonly rising?: boolean\n      readonly stops: readonly Fade[]\n    }\n  | { readonly color: string }\n\n// How far a press moves before it is a drag rather than a tap: Gesture\n// Handler's own default distance for a pan, as Slider's.\nconst SLOP = 10\n\n// The frame a screen reader outlines the handle in, the sliders page's 48dp\n// target, centred on the handle.\nconst TARGET = 48\n\n// The hues React Aria runs a hue axis through.\nconst HUES = [0, 60, 120, 180, 240, 300, 360]\n\nconst BLACK = 'rgb(0, 0, 0)'\nconst WHITE = 'rgb(255, 255, 255)'\n\nconst styles = StyleSheet.create({\n  // One adjustable half of the handle's frame.\n  half: {\n    flexGrow: 1,\n  },\n  root: {\n    aspectRatio: 1,\n    boxSizing: 'border-box',\n    width: '100%',\n  },\n  // Where the handle sits: the frame centred on the value, with the handle\n  // centred in it and the two halves side by side across it.\n  seat: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    height: TARGET,\n    justifyContent: 'center',\n    marginStart: -TARGET / 2,\n    marginTop: -TARGET / 2,\n    position: 'absolute',\n    width: TARGET,\n  },\n  // The handle, over both halves and taking none of their presses.\n  thumb: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    pointerEvents: 'none',\n    ...StyleSheet.absoluteFill,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, stateLayerOpacity }) =>\n  StyleSheet.create({\n    disabled: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n    // The plane, clipped to the corner while the handle is free to sit over\n    // its edge.\n    plane: {\n      borderRadius: radii.sm,\n      overflow: 'hidden',\n      ...StyleSheet.absoluteFill,\n    },\n  }),\n)\n\n// Runs the step a screen reader asks a channel for, as a move that starts\n// and ends at once, so `onChangeEnd` comes once as it does for a key on web.\nfunction adjustOf(state: ColorAreaState, axis: 'x' | 'y', isDisabled: boolean) {\n  return (event: AccessibilityActionEvent) => {\n    const { actionName } = event.nativeEvent\n    if (\n      isDisabled ||\n      (actionName !== 'increment' && actionName !== 'decrement')\n    ) {\n      return\n    }\n    const up = actionName === 'increment'\n    state.setDragging(true)\n    if (axis === 'x') {\n      if (up) {\n        state.incrementX(state.xChannelStep)\n      } else {\n        state.decrementX(state.xChannelStep)\n      }\n    } else if (up) {\n      state.incrementY(state.yChannelStep)\n    } else {\n      state.decrementY(state.yChannelStep)\n    }\n    state.setDragging(false)\n  }\n}\n\n/**\n * Two channels of a colour as a plane, with a handle where they meet. Its\n * state is React Stately's, as web's is: pass `value` with `onChange` to\n * control it, or `defaultValue`, as a CSS colour string or a `Color` from\n * `parseColor`, which this package re-exports.\n *\n * ```tsx\n * <ColorArea\n *   defaultValue=\"hsl(200, 100%, 50%)\"\n *   xChannel=\"saturation\"\n *   yChannel=\"lightness\"\n * />\n * ```\n *\n * **`xChannel` and `yChannel` have to name channels the value's own space\n * has.** A hex or `rgb()` value is read as RGB, which has no saturation, so\n * naming one against it throws rather than converting. Pass `colorSpace` to\n * convert it, or give the value in the space you mean to work in.\n *\n * **`alpha` is a channel here only in RGB.** Asked for it in HSL, the plane\n * quietly draws saturation and lightness instead, as React Aria's does.\n *\n * A press on the plane moves the handle there, and a drag carries it. A\n * screen reader adjusts each channel apart, through two halves of the\n * handle, each named by its channel. `style`, `ref` and `testID` land on the\n * square, whose width `style` sets. With a `testID`, the drag and the press\n * are registered with Gesture Handler as `<testID>-pan` and `<testID>-tap`,\n * which its `getByGestureTestId` finds in a test.\n *\n * Inside a `ColorPicker` it takes the picker's colour where it is given no\n * `value`, and reports a change to the picker before its own `onChange`.\n */\nfunction ColorArea({\n  'aria-label': ariaLabel,\n  colorSpace,\n  defaultValue,\n  isDisabled = false,\n  onChange,\n  onChangeEnd,\n  ref,\n  style,\n  testID,\n  value,\n  xChannel,\n  yChannel,\n}: ColorAreaProps) {\n  const own = stylesOf(useTheme())\n  const locale = useLocaleOf(undefined)\n  const picked = usePickedColor(value, onChange)\n  const state = useColorAreaState({\n    colorSpace,\n    defaultValue,\n    isDisabled,\n    onChange: picked.onChange,\n    onChangeEnd,\n    value: picked.value,\n    xChannel,\n    yChannel,\n  })\n  const [size, setSize] = useState({ height: 0, width: 0 })\n  const gesture = usePlaneGesture({ isDisabled, size, state, testID })\n  const { x, y } = state.getThumbPosition()\n  const { channels } = state\n\n  return (\n    <View\n      ref={ref}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        isDisabled ? own.disabled : undefined,\n        style,\n      )}\n      testID={testID}\n    >\n      <GestureHandlerRootView style={StyleSheet.absoluteFill}>\n        <GestureDetector gesture={gesture}>\n          <View onLayout={sizeTo(setSize)} style={StyleSheet.absoluteFill}>\n            <View style={own.plane}>\n              <Plane layers={layersOf(state)} />\n            </View>\n            <View\n              style={composeStyles<ViewStyle>(styles.seat, {\n                start: percentOf(x),\n                top: percentOf(y),\n              })}\n            >\n              <Half\n                axis=\"x\"\n                channel={channels.xChannel}\n                isDisabled={isDisabled}\n                label={ariaLabel}\n                locale={locale}\n                state={state}\n              />\n              <Half\n                axis=\"y\"\n                channel={channels.yChannel}\n                isDisabled={isDisabled}\n                label={ariaLabel}\n                locale={locale}\n                state={state}\n              />\n              <View style={styles.thumb}>\n                <ColorThumb\n                  color={state.getDisplayColor()}\n                  dragging={state.isDragging}\n                />\n              </View>\n            </View>\n          </View>\n        </GestureDetector>\n      </GestureHandlerRootView>\n    </View>\n  )\n}\n\n// A colour drawn as a stop: opaque, since a stop's opacity is its own.\nfunction cssOf(color: Color) {\n  return color.toFormat('rgb').withChannelValue('alpha', 1).toString('css')\n}\n\n// A colour fading out along an axis, keeping its colour as it goes.\nfunction fadeOf(color: string): Fade[] {\n  return [\n    { color, offset: 0, opacity: 1 },\n    { color, offset: 1, opacity: 0 },\n  ]\n}\n\n// One channel's half of the handle's frame, which a screen reader adjusts.\nfunction Half({\n  axis,\n  channel,\n  isDisabled,\n  label,\n  locale,\n  state,\n}: {\n  readonly axis: 'x' | 'y'\n  readonly channel: ColorChannel\n  readonly isDisabled: boolean\n  readonly label: string | undefined\n  readonly locale: string\n  readonly state: ColorAreaState\n}) {\n  const color = state.value\n  const name = color.getChannelName(channel, locale)\n  const { maxValue, minValue } = color.getChannelRange(channel)\n\n  return (\n    <View\n      accessibilityActions={ADJUSTABLE}\n      accessible\n      aria-disabled={isDisabled}\n      aria-label={label === undefined ? name : `${label}, ${name}`}\n      aria-valuemax={maxValue}\n      aria-valuemin={minValue}\n      aria-valuenow={color.getChannelValue(channel)}\n      aria-valuetext={`${color.formatChannelValue(channel, locale)}, ${state\n        .getDisplayColor()\n        .getColorName(locale)}`}\n      onAccessibilityAction={adjustOf(state, axis, isDisabled)}\n      role=\"slider\"\n      style={styles.half}\n    />\n  )\n}\n\n// React Aria's layers for the plane, from its useColorAreaGradient, bottom\n// first rather than CSS's top first.\nfunction layersOf(state: ColorAreaState): Layer[] {\n  const { xChannel, yChannel, zChannel } = state.channels\n  const space = state.value.getColorSpace()\n  const zValue = state.value.getChannelValue(zChannel)\n\n  if (space === 'rgb') {\n    // The colour with the third channel's value and each axis's channel at\n    // either end, and opaque, as the screened layers come out.\n    const corner = (\n      xEnd: 'maxValue' | 'minValue',\n      yEnd: 'maxValue' | 'minValue',\n    ) =>\n      cssOf(\n        parseColor(BLACK)\n          .withChannelValue(zChannel, zValue)\n          .withChannelValue(\n            xChannel,\n            state.value.getChannelRange(xChannel)[xEnd],\n          )\n          .withChannelValue(\n            yChannel,\n            state.value.getChannelRange(yChannel)[yEnd],\n          ),\n      )\n    return [\n      {\n        axis: 'x',\n        stops: rowOf(\n          corner('minValue', 'minValue'),\n          corner('maxValue', 'minValue'),\n        ),\n      },\n      {\n        axis: 'x',\n        rising: true,\n        stops: rowOf(\n          corner('minValue', 'maxValue'),\n          corner('maxValue', 'maxValue'),\n        ),\n      },\n    ]\n  }\n\n  const base = parseColor(\n    space === 'hsl' ? 'hsl(0, 100%, 50%)' : 'hsb(0, 100%, 100%)',\n  ).withChannelValue(zChannel, zValue)\n  const layers: Layer[] = zChannel === 'hue' ? [{ color: cssOf(base) }] : []\n  for (const channel of state.value.getColorChannels()) {\n    if (channel !== zChannel) {\n      layers.push({\n        axis: channel === xChannel ? 'x' : 'y',\n        stops: stopsOf(channel, base),\n      })\n    }\n  }\n  return layers\n}\n\n// The plane's layers, painted bottom first, each filling the square.\nfunction Plane({ layers }: { readonly layers: readonly Layer[] }) {\n  // A gradient is found by its id, which has to be unique in the page under\n  // React Native Web, as the chequer's pattern is.\n  const id = `plane${useId()}`\n  const reversed = I18nManager.isRTL\n\n  return (\n    <Svg {...HIDDEN} height=\"100%\" style={StyleSheet.absoluteFill} width=\"100%\">\n      <Defs>\n        {layers.some((layer) => 'rising' in layer && layer.rising) ? (\n          <>\n            {/* How far up the plane a rising layer shows: none of it along the\n            bottom and all of it along the top, as a mask's luminance. */}\n            <LinearGradient id={`${id}-rise`} x1={0} x2={0} y1={1} y2={0}>\n              <Stop offset={0} stopColor={BLACK} />\n              <Stop offset={1} stopColor={WHITE} />\n            </LinearGradient>\n            <Mask id={`${id}-mask`}>\n              <Rect fill={`url(#${id}-rise)`} height=\"100%\" width=\"100%\" />\n            </Mask>\n          </>\n        ) : null}\n        {layers.map((layer, index) =>\n          'stops' in layer ? (\n            <LinearGradient\n              id={`${id}-${index}`}\n              // oxlint-disable-next-line react/no-array-index-key -- a layer's place is its identity\n              key={index}\n              x1={layer.axis === 'x' && reversed ? 1 : 0}\n              x2={layer.axis === 'y' || reversed ? 0 : 1}\n              y1={layer.axis === 'y' ? 1 : 0}\n              y2={0}\n            >\n              {layer.stops.map((stop) => (\n                <Stop\n                  key={`${stop.offset}${stop.color}`}\n                  offset={stop.offset}\n                  stopColor={stop.color}\n                  stopOpacity={stop.opacity}\n                />\n              ))}\n            </LinearGradient>\n          ) : null,\n        )}\n      </Defs>\n      {layers.map((layer, index) => (\n        <Rect\n          fill={'stops' in layer ? `url(#${id}-${index})` : layer.color}\n          height=\"100%\"\n          // oxlint-disable-next-line react/no-array-index-key -- as above\n          key={index}\n          mask={\n            'rising' in layer && layer.rising ? `url(#${id}-mask)` : undefined\n          }\n          width=\"100%\"\n        />\n      ))}\n    </Svg>\n  )\n}\n\nfunction rowOf(start: string, end: string): Fade[] {\n  return [\n    { color: start, offset: 0, opacity: 1 },\n    { color: end, offset: 1, opacity: 1 },\n  ]\n}\n\n// Keeps the plane's size as it is laid out.\nfunction sizeTo(set: (size: { height: number; width: number }) => void) {\n  return ({ nativeEvent }: LayoutChangeEvent) => {\n    set({ height: nativeEvent.layout.height, width: nativeEvent.layout.width })\n  }\n}\n\n// A channel's gradient in HSL or HSB, as React Aria writes each.\nfunction stopsOf(channel: ColorChannel, base: Color): Fade[] {\n  if (channel === 'hue') {\n    return HUES.map((hue, index) => ({\n      color: cssOf(base.withChannelValue('hue', hue)),\n      offset: index / (HUES.length - 1),\n      opacity: 1,\n    }))\n  }\n  if (channel === 'saturation') {\n    return fadeOf(cssOf(base.withChannelValue('saturation', 0)))\n  }\n  if (channel === 'lightness') {\n    // Black, transparent and white: two fades meeting at the middle.\n    return [\n      { color: BLACK, offset: 0, opacity: 1 },\n      { color: BLACK, offset: 0.5, opacity: 0 },\n      { color: WHITE, offset: 0.5, opacity: 0 },\n      { color: WHITE, offset: 1, opacity: 1 },\n    ]\n  }\n  // Brightness, the one channel left in HSB.\n  return fadeOf(BLACK)\n}\n\n/**\n * The plane's pan and tap. Each reads a press's place as a fraction of the\n * way across the plane, from the start, and down it, and sets both channels\n * there. The pan holds the plane as dragged until it lets go, which is what\n * lifts the handle and what `onChangeEnd` waits for; the tap moves it and\n * lets it go at once.\n *\n * Both run on the JavaScript thread, since every move sets React state.\n */\nfunction usePlaneGesture({\n  isDisabled,\n  size,\n  state,\n  testID,\n}: {\n  readonly isDisabled: boolean\n  readonly size: { readonly height: number; readonly width: number }\n  readonly state: ColorAreaState\n  readonly testID: string | undefined\n}) {\n  // Sets both channels from a press, once the plane has a size to read it\n  // against. A press past an edge reads past it, which React Stately clamps.\n  function setFrom(x: number, y: number) {\n    if (size.width <= 0 || size.height <= 0) {\n      return\n    }\n    const across = x / size.width\n    state.setColorFromPoint(\n      I18nManager.isRTL ? 1 - across : across,\n      y / size.height,\n    )\n  }\n\n  // Gesture Handler 3 deprecates these builders for hooks that version 2 does\n  // not have, and the peer range admits both, so the builders stay while it\n  // does.\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- a builder named after its gesture, not a component; see above\n  const pan = Gesture.Pan()\n    .minDistance(SLOP)\n    .enabled(!isDisabled)\n    .runOnJS(true)\n    .onStart(({ x, y }) => {\n      state.setDragging(true)\n      setFrom(x, y)\n    })\n    .onUpdate(({ x, y }) => {\n      setFrom(x, y)\n    })\n    // A pan the tap beat never started, and letting go of a plane nothing\n    // holds ends nothing, so this needs no guard.\n    .onFinalize(() => {\n      state.setDragging(false)\n    })\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- as above\n  const tap = Gesture.Tap()\n    .maxDistance(SLOP)\n    .enabled(!isDisabled)\n    .runOnJS(true)\n    .onEnd(({ x, y }, success) => {\n      if (success) {\n        state.setDragging(true)\n        setFrom(x, y)\n        state.setDragging(false)\n      }\n    })\n\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- as above\n  return Gesture.Race(\n    testID === undefined ? pan : pan.withTestId(`${testID}-pan`),\n    testID === undefined ? tap : tap.withTestId(`${testID}-tap`),\n  )\n}\n\nexport { ColorArea }\nexport type { ColorAreaProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,144 @@
+import { ValidationResult } from "../../form/index.js";
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Color, ColorChannel, ColorSpace } from "react-stately";
+//#region src/components/color-field/index.d.ts
+type ColorFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'inputMode' | 'keyboardType' | 'maxLength' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'spellCheck' | 'style' | 'underlineColorAndroid' | 'value'> & {
+  /**
+   * The one channel the field holds, as a number in that channel's format,
+   * in place of the whole colour as hex.
+   */
+  readonly channel?: ColorChannel;
+  /**
+   * The space `channel` is read in, the value converted into it first, as on
+   * `ColorSlider`. Left out, `channel` is one of the value's own space.
+   */
+  readonly colorSpace?: ColorSpace;
+  /**
+   * The colour the field opens with, when it keeps its own: a CSS colour
+   * string, or a `Color` from `parseColor`, which this package re-exports.
+   * `null` opens it empty.
+   */
+  readonly defaultValue?: Color | null | string;
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * invalid state a screen reader reads all follow from it. The line under
+   * the field arrives with the message, so the field grows when this does,
+   * unless it is inside a `Form`, which keeps the line drawn. It wins over
+   * what `validate` and the form say, and holds a `native` form back.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label sits in the empty box and floats to the top once the
+   * field is focused or holds a value, as the text fields page draws it.
+   * `false` keeps it small at the top in every state.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * A ref to the field's own `TextInput`, which is what a call site moves
+   * focus to, after a server's error, say. `ref` is the field as a whole.
+   */
+  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>;
+  /**
+   * Draws the field disabled: it takes no focus and no input.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the value and takes focus, but takes no input.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it.
+   * Required, since a field with no label is a box nobody can name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the value, in the
+   * page's 24dp slot. A `ColorSwatch` there shows the value.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by. The form submits
+   * what web's does: the hex the field shows, or the channel's number written
+   * out, such as `0.6`, and `''` for an empty field.
+   */
+  readonly name?: string;
+  /**
+   * Called with the colour once it is read from what was typed: for a
+   * channel, the value with that channel changed. `null` is an empty field.
+   */
+  readonly onChange?: (value: Color | null) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * An icon at the end of the box, after the value, in the page's 24dp slot:
+   * the muted role, and the error role while the field has an error.
+   */
+  readonly trailingIcon?: ReactNode;
+  /**
+   * Checks the colour, `null` for an empty field, and returns its problem in
+   * words, or several, where there is one, and `true`, `null` or `undefined`
+   * where there is none. Under the default `aria` validation the error shows
+   * as the value changes; inside a `native` form it shows once a submission
+   * is tried, or once the field loses focus after an edit, and holds the form
+   * back.
+   */
+  readonly validate?: (value: Color | null) => ValidationResult;
+  /**
+   * The colour, when the call site keeps it: a CSS colour string or a
+   * `Color`. `null` is an empty field.
+   */
+  readonly value?: Color | null | string;
+  /**
+   * The filled box, or the outlined one: no fill, an outline that thickens
+   * and takes the primary role while focused, and the label cutting it once
+   * it floats, the text fields page's two fields.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+};
+/**
+ * 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`.
+ */
+declare function ColorField({ channel, onChange, value, ...props }: ColorFieldProps): import("react").JSX.Element;
+//#endregion
+export { ColorField, type ColorFieldProps };
+//# sourceMappingURL=index.d.ts.map