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

package/dist/components/checkbox-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextStyle","ViewProps","ViewStyle","CheckboxGroupState","useId","useState","Text","NativeText","Platform","StyleSheet","useWindowDimensions","View","useCheckboxGroupState","CheckboxGroupContextValue","ValidationResult","messageOf","CheckboxGroupContext","createMembers","useErrorAnnouncement","useFieldValidation","useInsideForm","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","CheckboxGroupProps","Omit","children","defaultValue","description","error","isDisabled","isReadOnly","isRequired","label","name","onChange","value","ref","style","validate","REQUIRED_MARK","ATOMIC","const","stylesOf","colors","spacing","stateLayerOpacity","create","items","flexDirection","color","onSurfaceVariant","labelDisabled","onSurface","disabledContent","labelError","message","messageError","messageLine","marginTop","xs","messageLineCollapsed","position","outOfFlow","root","rowGap","CheckboxGroup","t0","$","_c","props","t1","t2","t3","undefined","theme","t4","copyOf","t5","t6","state","members","t7","length","t8","control","isEmpty","submitted","validation","labelId","messageId","labelRole","messageRole","insideForm","fontScale","own","shown","invalid","holdsLine","t9","contextOf","context","messageStyle","t10","lineOf","t11","t12","T0","t13","minHeightOf","typography","bodySmallLineHeight","t14","t15","t16","OS","t17","t18","onBlur","onEdit","isInvalid","isSelected","entry","set","addValue","removeValue","entries","id","minHeight","_c","NativeText"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport type { CheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { useCheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport type { CheckboxGroupContextValue } from '../../control/group'\nimport type { ValidationResult } from '../../form'\n\nimport { messageOf } from '../../control'\nimport { CheckboxGroupContext, createMembers } from '../../control/group'\nimport { useErrorAnnouncement } from '../../field'\nimport { useFieldValidation, useInsideForm } from '../../form'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's CheckboxGroup: a labelled set of checkboxes sharing one value.\n// The checkbox page draws the boxes; the group is what the pattern asks for\n// around them, a group named by its label, described by the line under it\n// and invalid as a whole, and its label and that line are the field chrome's,\n// so a group reads like the fields beside it.\n//\n// The group is a column: its label in label large, the checkboxes, and the\n// line under them, 4dp apart, with the line a further 4dp down, as web's\n// field chrome sets them out and RadioGroup does here. The label is on\n// surface variant, error while the group has one, and on surface at the\n// disabled opacity while disabled, with the required mark a field's label\n// carries. The line is not inset, since a group has no box to line it up\n// with.\n//\n// The value is React Stately's, as web's is React Aria's, and the group hands\n// it to its checkboxes through src/control/group, as RadioGroup hands its\n// buttons theirs. Its validation is src/form's, as a field's is: `isRequired`,\n// `validate`, and the form's errors under the group's `name`. A native Form\n// holding it back focuses its first checkbox.\n//\n// Inside a Form the line is held from the start, as web's is, so an error\n// arriving on submit moves nothing under the group. Outside one it takes\n// space only while there is something in it, and stays mounted for the live\n// region inside it, which has to be in place before the error it announces.\n\ntype CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The checkboxes, each with a `value` of its own. */\n  readonly children?: ReactNode\n  /** The entries selected at first, when the group keeps its own value. */\n  readonly defaultValue?: readonly string[]\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message, the label's colour and\n   * every box's error colours follow from it.\n   *\n   * Outside a `Form` the line under the group arrives with the message, so\n   * the group grows when this does and moves what is under it. A `Form`\n   * holds that space from the start; so does a permanent `description`.\n   */\n  readonly error?: string\n  /**\n   * Draws every checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the selection without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the group's label, and has a `native` form hold submission back\n   * while nothing is selected.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  readonly label: string\n  /**\n   * The name the form around the group knows it by, which its\n   * `validationErrors` are keyed on. A form hands `onSubmit` one string per\n   * name, so a group's selection is not among those values: read it through\n   * `onChange`, or hold it with `value`.\n   */\n  readonly name?: string\n  /** Called with the newly selected entries whenever a press changes them. */\n  readonly onChange?: (value: string[]) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the selection, returning its problem in words, or `true`, `null`\n   * or `undefined` when there is none. Shown as it changes, or under a\n   * `native` form once a submission is tried.\n   */\n  readonly validate?: (value: readonly string[]) => ValidationResult\n  /**\n   * The selected entries, for a call site holding the value itself with\n   * `onChange`.\n   */\n  readonly value?: readonly string[]\n}\n\n// What marks a required group's label, as a field's label marks one.\nconst REQUIRED_MARK = '*'\n\n// What has a live region on the web read its whole content again whenever\n// any of it changes, as the field's line does.\nconst ATOMIC = { 'aria-atomic': true } as const\n\nconst stylesOf = themedStyles(({ colors, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    // The group's checkboxes, one under another.\n    items: {\n      flexDirection: 'column',\n    },\n    label: {\n      color: colors.onSurfaceVariant,\n    },\n    labelDisabled: {\n      color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent),\n    },\n    labelError: {\n      color: colors.error,\n    },\n    message: {\n      color: colors.onSurfaceVariant,\n    },\n    messageError: {\n      color: colors.error,\n    },\n    messageLine: {\n      marginTop: spacing.xs,\n    },\n    // The line with nothing to show: out of the flow, so the group ends at\n    // its last checkbox, and still there for the live region inside it.\n    messageLineCollapsed: {\n      marginTop: 0,\n      position: 'absolute',\n    },\n    // The live region with nothing in it, which takes no place in the line.\n    outOfFlow: {\n      position: 'absolute',\n    },\n    root: {\n      flexDirection: 'column',\n      rowGap: spacing.xs,\n    },\n  }),\n)\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Stately's, as web's is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue` to let the group keep its own, and each\n * `Checkbox` inside names the entry it stands for with `value`. Disabled,\n * read-only and the error state reach every checkbox from here.\n *\n * ```tsx\n * <CheckboxGroup defaultValue={['first']} label=\"Label\">\n *   <Checkbox value=\"first\">First item</Checkbox>\n *   <Checkbox value=\"second\">Second item</Checkbox>\n * </CheckboxGroup>\n * ```\n *\n * A screen reader hears it as a group named by its label. On the web the\n * line under it describes the group, as web's does; on iOS and Android it is\n * read after the checkboxes, where it sits, and an error is announced as it\n * arrives. `style`, `ref` and `testID` land on the group as a whole, which is\n * the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  defaultValue,\n  description,\n  error,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  name,\n  onChange,\n  style,\n  validate,\n  value,\n  ...props\n}: CheckboxGroupProps) {\n  const theme = useTheme()\n  const state = useCheckboxGroupState({\n    defaultValue: copyOf(defaultValue),\n    isDisabled,\n    isReadOnly,\n    onChange,\n    value: copyOf(value),\n  })\n  const [members] = useState(createMembers)\n  const validation = useFieldValidation({\n    control: members,\n    error,\n    isDisabled,\n    isEmpty: state.value.length === 0,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: undefined,\n    validate,\n    value: state.value,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n  const insideForm = useInsideForm()\n  const { fontScale } = useWindowDimensions()\n\n  const own = stylesOf(theme)\n  const shown = validation.error\n  const invalid = shown !== undefined\n  const message = messageOf(description, shown)\n  const holdsLine = insideForm || message !== undefined\n  const context = contextOf(state, members, validation, invalid)\n  const messageStyle = composeStyles<TextStyle>(\n    messageRole,\n    own.message,\n    invalid ? own.messageError : undefined,\n  )\n\n  useErrorAnnouncement(shown)\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          isDisabled ? own.labelDisabled : undefined,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n        {isRequired ? REQUIRED_MARK : null}\n      </NativeText>\n      <View style={own.items}>\n        <CheckboxGroupContext value={context}>{children}</CheckboxGroupContext>\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          own.messageLine,\n          holdsLine\n            ? minHeightOf(theme.typography.bodySmallLineHeight * fontScale)\n            : own.messageLineCollapsed,\n        )}\n      >\n        <View\n          aria-live=\"polite\"\n          {...(Platform.OS === 'web' ? ATOMIC : undefined)}\n          style={invalid && shown !== '' ? undefined : own.outOfFlow}\n        >\n          {invalid && shown !== '' ? (\n            <NativeText id={messageId} style={messageStyle}>\n              {shown}\n            </NativeText>\n          ) : null}\n        </View>\n        {invalid || description === undefined ? null : (\n          <NativeText id={messageId} style={messageStyle}>\n            {description}\n          </NativeText>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// What the group tells its checkboxes. A press selects or clears an entry\n// and then counts as the edit and the commit both, since a checkbox changes\n// the value at once rather than as a control loses focus, which is what a\n// native form shows an error after.\nfunction contextOf(\n  state: CheckboxGroupState,\n  members: CheckboxGroupContextValue['members'],\n  {\n    onBlur,\n    onEdit,\n  }: { readonly onBlur: () => void; readonly onEdit: () => void },\n  isInvalid: boolean,\n): CheckboxGroupContextValue {\n  return {\n    isDisabled: state.isDisabled,\n    isInvalid,\n    isReadOnly: state.isReadOnly,\n    isSelected: (entry) => state.isSelected(entry),\n    members,\n    set: (entry, isSelected) => {\n      if (isSelected) {\n        state.addValue(entry)\n      } else {\n        state.removeValue(entry)\n      }\n      onEdit()\n      onBlur()\n    },\n  }\n}\n\n// A list the call site may hold as read-only, as the mutable copy React\n// Stately takes.\nfunction copyOf(entries: readonly string[] | undefined) {\n  return entries === undefined ? undefined : [...entries]\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the checkboxes rather than the group, so there the line is left\n * where a screen reader reaches it in order, after the last checkbox.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\nexport { CheckboxGroup }\nexport type { CheckboxGroupProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","TextStyle","ViewProps","ViewStyle","CheckboxGroupState","useId","useState","Text","NativeText","Platform","StyleSheet","useWindowDimensions","View","useCheckboxGroupState","CheckboxGroupContextValue","ValidationResult","messageOf","CheckboxGroupContext","createMembers","useErrorAnnouncement","useFieldValidation","useInsideForm","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","CheckboxGroupProps","Omit","children","defaultValue","description","error","isDisabled","isReadOnly","isRequired","label","name","onChange","value","ref","style","validate","REQUIRED_MARK","ATOMIC","const","stylesOf","colors","spacing","stateLayerOpacity","create","items","flexDirection","color","onSurfaceVariant","labelDisabled","onSurface","disabledContent","labelError","message","messageError","messageLine","marginTop","xs","messageLineCollapsed","position","outOfFlow","root","rowGap","CheckboxGroup","t0","$","_c","props","t1","t2","t3","undefined","theme","t4","copyOf","t5","t6","state","members","t7","length","t8","control","isEmpty","submitted","validation","labelId","messageId","labelRole","messageRole","insideForm","fontScale","own","shown","invalid","holdsLine","t9","contextOf","context","messageStyle","t10","lineOf","t11","t12","T0","t13","minHeightOf","typography","bodySmallLineHeight","t14","t15","t16","OS","t17","t18","onBlur","onEdit","isInvalid","isSelected","entry","set","addValue","removeValue","entries","id","minHeight","_c","NativeText"],"sources":["../../../src/components/checkbox-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, TextStyle, ViewProps, ViewStyle } from 'react-native'\nimport type { CheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport { useId, useState } from 'react'\nimport {\n  Text as NativeText,\n  Platform,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { useCheckboxGroupState } from 'react-stately/useCheckboxGroupState'\n\nimport type { CheckboxGroupContextValue } from '../../control/group'\nimport type { ValidationResult } from '../../form'\n\nimport { messageOf } from '../../control'\nimport { CheckboxGroupContext, createMembers } from '../../control/group'\nimport { useErrorAnnouncement } from '../../field'\nimport { useFieldValidation, useInsideForm } from '../../form'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's CheckboxGroup: a labelled set of checkboxes sharing one value.\n// The checkbox page draws the boxes; the group is what the pattern asks for\n// around them, a group named by its label, described by the line under it\n// and invalid as a whole, and its label and that line are the field chrome's,\n// so a group reads like the fields beside it.\n//\n// The group is a column: its label in label large, the checkboxes, and the\n// line under them, 4dp apart, with the line a further 4dp down, as web's\n// field chrome sets them out and RadioGroup does here. The label is on\n// surface variant, error while the group has one, and on surface at the\n// disabled opacity while disabled, with the required mark a field's label\n// carries. The line is not inset, since a group has no box to line it up\n// with.\n//\n// The value is React Stately's, as web's is React Aria's, and the group hands\n// it to its checkboxes through src/control/group, as RadioGroup hands its\n// buttons theirs. Its validation is src/form's, as a field's is: `isRequired`,\n// `validate`, and the form's errors under the group's `name`. A native Form\n// holding it back focuses its first checkbox. A Form submits the selection\n// under the group's `name` as a list, where a web form sends one entry per\n// ticked box under it.\n//\n// Inside a Form the line is held from the start, as web's is, so an error\n// arriving on submit moves nothing under the group. Outside one it takes\n// space only while there is something in it, and stays mounted for the live\n// region inside it, which has to be in place before the error it announces.\n\ntype CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The checkboxes, each with a `value` of its own. */\n  readonly children?: ReactNode\n  /** The entries selected at first, when the group keeps its own value. */\n  readonly defaultValue?: readonly string[]\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state: the message, the label's colour and\n   * every box's error colours follow from it.\n   *\n   * Outside a `Form` the line under the group arrives with the message, so\n   * the group grows when this does and moves what is under it. A `Form`\n   * holds that space from the start; so does a permanent `description`.\n   */\n  readonly error?: string\n  /**\n   * Draws every checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the selection without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Marks the group's label, and has a `native` form hold submission back\n   * while nothing is selected.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the group is for. Required rather than optional: a group of\n   * checkboxes with no name is a set of boxes a screen reader cannot\n   * introduce.\n   */\n  readonly label: string\n  /**\n   * The name the form around the group knows it by: its `onSubmit` is handed\n   * the ticked entries' values as a list under it, an empty one while none\n   * is ticked, and its `validationErrors` are keyed on it.\n   */\n  readonly name?: string\n  /** Called with the newly selected entries whenever a press changes them. */\n  readonly onChange?: (value: string[]) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the selection, returning its problem in words, or `true`, `null`\n   * or `undefined` when there is none. Shown as it changes, or under a\n   * `native` form once a submission is tried.\n   */\n  readonly validate?: (value: readonly string[]) => ValidationResult\n  /**\n   * The selected entries, for a call site holding the value itself with\n   * `onChange`.\n   */\n  readonly value?: readonly string[]\n}\n\n// What marks a required group's label, as a field's label marks one.\nconst REQUIRED_MARK = '*'\n\n// What has a live region on the web read its whole content again whenever\n// any of it changes, as the field's line does.\nconst ATOMIC = { 'aria-atomic': true } as const\n\nconst stylesOf = themedStyles(({ colors, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    // The group's checkboxes, one under another.\n    items: {\n      flexDirection: 'column',\n    },\n    label: {\n      color: colors.onSurfaceVariant,\n    },\n    labelDisabled: {\n      color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent),\n    },\n    labelError: {\n      color: colors.error,\n    },\n    message: {\n      color: colors.onSurfaceVariant,\n    },\n    messageError: {\n      color: colors.error,\n    },\n    messageLine: {\n      marginTop: spacing.xs,\n    },\n    // The line with nothing to show: out of the flow, so the group ends at\n    // its last checkbox, and still there for the live region inside it.\n    messageLineCollapsed: {\n      marginTop: 0,\n      position: 'absolute',\n    },\n    // The live region with nothing in it, which takes no place in the line.\n    outOfFlow: {\n      position: 'absolute',\n    },\n    root: {\n      flexDirection: 'column',\n      rowGap: spacing.xs,\n    },\n  }),\n)\n\n/**\n * A labelled set of checkboxes with one value between them. The value is\n * React Stately's, as web's is React Aria's: pass `value` with `onChange` to\n * control it, or `defaultValue` to let the group keep its own, and each\n * `Checkbox` inside names the entry it stands for with `value`. Disabled,\n * read-only and the error state reach every checkbox from here.\n *\n * ```tsx\n * <CheckboxGroup defaultValue={['first']} label=\"Label\">\n *   <Checkbox value=\"first\">First item</Checkbox>\n *   <Checkbox value=\"second\">Second item</Checkbox>\n * </CheckboxGroup>\n * ```\n *\n * A screen reader hears it as a group named by its label. On the web the\n * line under it describes the group, as web's does; on iOS and Android it is\n * read after the checkboxes, where it sits, and an error is announced as it\n * arrives. `style`, `ref` and `testID` land on the group as a whole, which is\n * the element a layout positions.\n */\nfunction CheckboxGroup({\n  children,\n  defaultValue,\n  description,\n  error,\n  isDisabled = false,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  name,\n  onChange,\n  style,\n  validate,\n  value,\n  ...props\n}: CheckboxGroupProps) {\n  const theme = useTheme()\n  const state = useCheckboxGroupState({\n    defaultValue: copyOf(defaultValue),\n    isDisabled,\n    isReadOnly,\n    onChange,\n    value: copyOf(value),\n  })\n  const [members] = useState(createMembers)\n  const validation = useFieldValidation({\n    control: members,\n    error,\n    isDisabled,\n    isEmpty: state.value.length === 0,\n    isReadOnly,\n    isRequired,\n    name,\n    submitted: state.value,\n    validate,\n    value: state.value,\n  })\n  const labelId = useId()\n  const messageId = useId()\n  const labelRole = useTypeRole('labelLarge')\n  const messageRole = useTypeRole('bodySmall')\n  const insideForm = useInsideForm()\n  const { fontScale } = useWindowDimensions()\n\n  const own = stylesOf(theme)\n  const shown = validation.error\n  const invalid = shown !== undefined\n  const message = messageOf(description, shown)\n  const holdsLine = insideForm || message !== undefined\n  const context = contextOf(state, members, validation, invalid)\n  const messageStyle = composeStyles<TextStyle>(\n    messageRole,\n    own.message,\n    invalid ? own.messageError : undefined,\n  )\n\n  useErrorAnnouncement(shown)\n\n  return (\n    <View\n      {...props}\n      aria-labelledby={labelId}\n      role=\"group\"\n      {...lineOf(messageId, message)}\n      style={composeStyles<ViewStyle>(own.root, style)}\n    >\n      <NativeText\n        id={labelId}\n        style={composeStyles<TextStyle>(\n          labelRole,\n          own.label,\n          isDisabled ? own.labelDisabled : undefined,\n          invalid ? own.labelError : undefined,\n        )}\n      >\n        {label}\n        {isRequired ? REQUIRED_MARK : null}\n      </NativeText>\n      <View style={own.items}>\n        <CheckboxGroupContext value={context}>{children}</CheckboxGroupContext>\n      </View>\n      <View\n        style={composeStyles<ViewStyle>(\n          own.messageLine,\n          holdsLine\n            ? minHeightOf(theme.typography.bodySmallLineHeight * fontScale)\n            : own.messageLineCollapsed,\n        )}\n      >\n        <View\n          aria-live=\"polite\"\n          {...(Platform.OS === 'web' ? ATOMIC : undefined)}\n          style={invalid && shown !== '' ? undefined : own.outOfFlow}\n        >\n          {invalid && shown !== '' ? (\n            <NativeText id={messageId} style={messageStyle}>\n              {shown}\n            </NativeText>\n          ) : null}\n        </View>\n        {invalid || description === undefined ? null : (\n          <NativeText id={messageId} style={messageStyle}>\n            {description}\n          </NativeText>\n        )}\n      </View>\n    </View>\n  )\n}\n\n// What the group tells its checkboxes. A press selects or clears an entry\n// and then counts as the edit and the commit both, since a checkbox changes\n// the value at once rather than as a control loses focus, which is what a\n// native form shows an error after.\nfunction contextOf(\n  state: CheckboxGroupState,\n  members: CheckboxGroupContextValue['members'],\n  {\n    onBlur,\n    onEdit,\n  }: { readonly onBlur: () => void; readonly onEdit: () => void },\n  isInvalid: boolean,\n): CheckboxGroupContextValue {\n  return {\n    isDisabled: state.isDisabled,\n    isInvalid,\n    isReadOnly: state.isReadOnly,\n    isSelected: (entry) => state.isSelected(entry),\n    members,\n    set: (entry, isSelected) => {\n      if (isSelected) {\n        state.addValue(entry)\n      } else {\n        state.removeValue(entry)\n      }\n      onEdit()\n      onBlur()\n    },\n  }\n}\n\n// A list the call site may hold as read-only, as the mutable copy React\n// Stately takes.\nfunction copyOf(entries: readonly string[] | undefined) {\n  return entries === undefined ? undefined : [...entries]\n}\n\n/**\n * How the group is described by the line under it. On the web it points at\n * the line with `aria-describedby`, as web's group does. iOS and Android\n * focus the checkboxes rather than the group, so there the line is left\n * where a screen reader reaches it in order, after the last checkbox.\n */\nfunction lineOf(id: string, message: string | undefined) {\n  return Platform.OS === 'web' && message !== undefined\n    ? { 'aria-describedby': id }\n    : undefined\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\nexport { CheckboxGroup }\nexport type { CheckboxGroupProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
+import { Color, ColorChannel, ColorSpace } from "react-stately";
+//#region src/components/color-area/index.d.ts
+type ColorAreaProps = {
+  /**
+   * What the plane is for, which a screen reader hears before each channel's
+   * name.
+   */
+  readonly 'aria-label'?: string;
+  /**
+   * The space the channels are read in, when the value is given in another:
+   * a hex or `rgb()` value has no saturation until it is read as `hsl` or
+   * `hsb`.
+   */
+  readonly colorSpace?: ColorSpace;
+  /**
+   * The colour the plane starts at, when it keeps its own: a CSS colour
+   * string, or a `Color` from `parseColor`. White when neither this nor
+   * `value` is given.
+   */
+  readonly defaultValue?: Color | string;
+  /**
+   * Draws the plane disabled, and takes no presses, drags or screen reader
+   * actions.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the colour as either 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;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /** Lands on the square, and sets its width; its height follows. */
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+  /** The colour, for a call site holding it itself with `onChange`. */
+  readonly value?: Color | string;
+  /**
+   * The channel along the horizontal axis. The first of the space's
+   * channels the vertical one is not, when left out.
+   */
+  readonly xChannel?: ColorChannel;
+  /**
+   * The channel up the vertical axis. The first of the space's channels the
+   * horizontal one is not, when left out.
+   */
+  readonly yChannel?: ColorChannel;
+};
+/**
+ * Two channels of a colour as a plane, with a handle where they meet. 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.
+ *
+ * ```tsx
+ * <ColorArea
+ *   defaultValue="hsl(200, 100%, 50%)"
+ *   xChannel="saturation"
+ *   yChannel="lightness"
+ * />
+ * ```
+ *
+ * **`xChannel` and `yChannel` have to name channels the value's own space
+ * has.** A hex or `rgb()` value is read as RGB, which has no saturation, so
+ * naming one against it throws rather than converting. Pass `colorSpace` to
+ * convert it, or give the value in the space you mean to work in.
+ *
+ * **`alpha` is a channel here only in RGB.** Asked for it in HSL, the plane
+ * quietly draws saturation and lightness instead, as React Aria's does.
+ *
+ * A press on the plane moves the handle there, and a drag carries it. A
+ * screen reader adjusts each channel apart, through two halves of the
+ * handle, each named by its channel. `style`, `ref` and `testID` land on the
+ * square, whose width `style` sets. 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 ColorArea({ 'aria-label': ariaLabel, colorSpace, defaultValue, isDisabled, onChange, onChangeEnd, ref, style, testID, value, xChannel, yChannel }: ColorAreaProps): import("react").JSX.Element;
+//#endregion
+export { ColorArea, type ColorAreaProps };
+//# sourceMappingURL=index.d.ts.map