@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.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/chip/index.d.ts

@@ -75,10 +75,13 @@ type ChipVariant = 'assist' | 'filter' | 'suggestion';
  * `variant="assist"` and `variant="suggestion"` draw the page's two action
  * chips instead: plain buttons, pressed with `onPress`, never selected.
  *
+ * A chip placed directly inside `Menu`, `Popover`, `Dialog` or `Sheet` is its
+ * trigger, as a `Button` is, and a press on it opens what it is placed in.
+ *
  * A column stretches a chip across it, as it does any view; a row of chips is
  * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.
  */
-declare function Chip({ children, defaultSelected, elevated, hitSlop, icon, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, variant, ...props }: ChipProps): import("react").JSX.Element;
+declare function Chip({ accessibilityHint, children, defaultSelected, delayLongPress, elevated, hitSlop, icon, isDisabled, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, ref, style, variant, ...props }: ChipProps): import("react").JSX.Element;
 //#endregion
 export { Chip, type ChipActionProps, type ChipFilterProps, type ChipProps, type ChipVariant };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/chip/index.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
 import { usePressFeedback } from "../../press/index.js";
-import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
+import { AnimatedPressable, toggleState, useButtonAction, useSlotTrigger } from "../../button/index.js";
 import { shadowsOf, stylesOf } from "../../chip/styles.js";
 import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
@@ -20,13 +20,18 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * `variant="assist"` and `variant="suggestion"` draw the page's two action
 * chips instead: plain buttons, pressed with `onPress`, never selected.
 *
+* A chip placed directly inside `Menu`, `Popover`, `Dialog` or `Sheet` is its
+* trigger, as a `Button` is, and a press on it opens what it is placed in.
+*
 * A column stretches a chip across it, as it does any view; a row of chips is
 * a row that wraps. `style`, `ref` and `testID` land on the `Pressable`.
 */
 function Chip(t0) {
-	const $ = c(80);
+	const $ = c(102);
+	let accessibilityHint;
 	let children;
 	let defaultSelected;
+	let delayLongPress;
 	let hitSlop;
 	let icon;
 	let isSelected;
@@ -36,56 +41,66 @@ function Chip(t0) {
 	let onHoverIn;
 	let onHoverOut;
 	let onLayout;
+	let onLongPress;
 	let onPress;
 	let onPressIn;
 	let onPressOut;
 	let props;
+	let ref;
 	let style;
 	let t1;
 	let t2;
 	let t3;
 	if ($[0] !== t0) {
-		({children, defaultSelected, elevated: t1, hitSlop, icon, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, variant: t3, ...props} = t0);
+		({accessibilityHint, children, defaultSelected, delayLongPress, elevated: t1, hitSlop, icon, isDisabled: t2, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, ref, style, variant: t3, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = defaultSelected;
-		$[3] = hitSlop;
-		$[4] = icon;
-		$[5] = isSelected;
-		$[6] = onBlur;
-		$[7] = onChange;
-		$[8] = onFocus;
-		$[9] = onHoverIn;
-		$[10] = onHoverOut;
-		$[11] = onLayout;
-		$[12] = onPress;
-		$[13] = onPressIn;
-		$[14] = onPressOut;
-		$[15] = props;
-		$[16] = style;
-		$[17] = t1;
-		$[18] = t2;
-		$[19] = t3;
+		$[1] = accessibilityHint;
+		$[2] = children;
+		$[3] = defaultSelected;
+		$[4] = delayLongPress;
+		$[5] = hitSlop;
+		$[6] = icon;
+		$[7] = isSelected;
+		$[8] = onBlur;
+		$[9] = onChange;
+		$[10] = onFocus;
+		$[11] = onHoverIn;
+		$[12] = onHoverOut;
+		$[13] = onLayout;
+		$[14] = onLongPress;
+		$[15] = onPress;
+		$[16] = onPressIn;
+		$[17] = onPressOut;
+		$[18] = props;
+		$[19] = ref;
+		$[20] = style;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t3;
 	} else {
-		children = $[1];
-		defaultSelected = $[2];
-		hitSlop = $[3];
-		icon = $[4];
-		isSelected = $[5];
-		onBlur = $[6];
-		onChange = $[7];
-		onFocus = $[8];
-		onHoverIn = $[9];
-		onHoverOut = $[10];
-		onLayout = $[11];
-		onPress = $[12];
-		onPressIn = $[13];
-		onPressOut = $[14];
-		props = $[15];
-		style = $[16];
-		t1 = $[17];
-		t2 = $[18];
-		t3 = $[19];
+		accessibilityHint = $[1];
+		children = $[2];
+		defaultSelected = $[3];
+		delayLongPress = $[4];
+		hitSlop = $[5];
+		icon = $[6];
+		isSelected = $[7];
+		onBlur = $[8];
+		onChange = $[9];
+		onFocus = $[10];
+		onHoverIn = $[11];
+		onHoverOut = $[12];
+		onLayout = $[13];
+		onLongPress = $[14];
+		onPress = $[15];
+		onPressIn = $[16];
+		onPressOut = $[17];
+		props = $[18];
+		ref = $[19];
+		style = $[20];
+		t1 = $[21];
+		t2 = $[22];
+		t3 = $[23];
 	}
 	const elevated = t1 === void 0 ? false : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -94,7 +109,7 @@ function Chip(t0) {
 	const [width, setWidth] = useState(48);
 	const isToggle = variant === "filter";
 	let t4;
-	if ($[20] !== defaultSelected || $[21] !== isSelected || $[22] !== isToggle || $[23] !== onChange || $[24] !== onPress) {
+	if ($[24] !== defaultSelected || $[25] !== isSelected || $[26] !== isToggle || $[27] !== onChange || $[28] !== onPress) {
 		t4 = {
 			defaultSelected,
 			href: void 0,
@@ -102,154 +117,207 @@ function Chip(t0) {
 			isToggle,
 			onChange,
 			onPress,
+			slot: "default",
 			type: void 0
 		};
-		$[20] = defaultSelected;
-		$[21] = isSelected;
-		$[22] = isToggle;
-		$[23] = onChange;
-		$[24] = onPress;
-		$[25] = t4;
-	} else t4 = $[25];
+		$[24] = defaultSelected;
+		$[25] = isSelected;
+		$[26] = isToggle;
+		$[27] = onChange;
+		$[28] = onPress;
+		$[29] = t4;
+	} else t4 = $[29];
 	const action = useButtonAction(t4);
-	const t5 = variant === "assist";
-	let t6;
-	if ($[26] !== action.selected || $[27] !== elevated || $[28] !== isDisabled || $[29] !== t5 || $[30] !== theme) {
-		t6 = paintOf(theme, {
-			assist: t5,
+	let t5;
+	if ($[30] !== accessibilityHint || $[31] !== delayLongPress || $[32] !== onHoverIn || $[33] !== onHoverOut || $[34] !== onLongPress || $[35] !== onPressIn || $[36] !== onPressOut || $[37] !== ref) {
+		t5 = {
+			accessibilityHint,
+			delayLongPress,
+			href: void 0,
+			onHoverIn,
+			onHoverOut,
+			onLongPress,
+			onPressIn,
+			onPressOut,
+			ref,
+			slot: void 0
+		};
+		$[30] = accessibilityHint;
+		$[31] = delayLongPress;
+		$[32] = onHoverIn;
+		$[33] = onHoverOut;
+		$[34] = onLongPress;
+		$[35] = onPressIn;
+		$[36] = onPressOut;
+		$[37] = ref;
+		$[38] = t5;
+	} else t5 = $[38];
+	const t6 = useSlotTrigger(t5);
+	let hoverIn;
+	let hoverOut;
+	let longPress;
+	let pressIn;
+	let pressOut;
+	let triggerProps;
+	if ($[39] !== t6) {
+		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, onPressIn: pressIn, onPressOut: pressOut, ...triggerProps} = t6);
+		$[39] = t6;
+		$[40] = hoverIn;
+		$[41] = hoverOut;
+		$[42] = longPress;
+		$[43] = pressIn;
+		$[44] = pressOut;
+		$[45] = triggerProps;
+	} else {
+		hoverIn = $[40];
+		hoverOut = $[41];
+		longPress = $[42];
+		pressIn = $[43];
+		pressOut = $[44];
+		triggerProps = $[45];
+	}
+	const t7 = variant === "assist";
+	let t8;
+	if ($[46] !== action.selected || $[47] !== elevated || $[48] !== isDisabled || $[49] !== t7 || $[50] !== theme) {
+		t8 = paintOf(theme, {
+			assist: t7,
 			disabled: isDisabled,
 			elevated,
 			selected: action.selected
 		});
-		$[26] = action.selected;
-		$[27] = elevated;
-		$[28] = isDisabled;
-		$[29] = t5;
-		$[30] = theme;
-		$[31] = t6;
-	} else t6 = $[31];
-	const paint = t6;
+		$[46] = action.selected;
+		$[47] = elevated;
+		$[48] = isDisabled;
+		$[49] = t7;
+		$[50] = theme;
+		$[51] = t8;
+	} else t8 = $[51];
+	const paint = t8;
 	const eased = useEasedColors(paint);
-	let t7;
-	if ($[32] !== theme.radii.sm) {
-		t7 = { borderRadius: theme.radii.sm };
-		$[32] = theme.radii.sm;
-		$[33] = t7;
-	} else t7 = $[33];
-	let t8;
-	if ($[34] !== isDisabled || $[35] !== onBlur || $[36] !== onFocus || $[37] !== onHoverIn || $[38] !== onHoverOut || $[39] !== onPressIn || $[40] !== onPressOut || $[41] !== paint.layer || $[42] !== t7) {
-		t8 = {
+	let t9;
+	if ($[52] !== theme.radii.sm) {
+		t9 = { borderRadius: theme.radii.sm };
+		$[52] = theme.radii.sm;
+		$[53] = t9;
+	} else t9 = $[53];
+	let t10;
+	if ($[54] !== hoverIn || $[55] !== hoverOut || $[56] !== isDisabled || $[57] !== onBlur || $[58] !== onFocus || $[59] !== paint.layer || $[60] !== pressIn || $[61] !== pressOut || $[62] !== t9) {
+		t10 = {
 			color: paint.layer,
-			corners: t7,
+			corners: t9,
 			disabled: isDisabled,
 			onBlur,
 			onFocus,
-			onHoverIn,
-			onHoverOut,
-			onPressIn,
-			onPressOut
+			onHoverIn: hoverIn,
+			onHoverOut: hoverOut,
+			onPressIn: pressIn,
+			onPressOut: pressOut
 		};
-		$[34] = isDisabled;
-		$[35] = onBlur;
-		$[36] = onFocus;
-		$[37] = onHoverIn;
-		$[38] = onHoverOut;
-		$[39] = onPressIn;
-		$[40] = onPressOut;
-		$[41] = paint.layer;
-		$[42] = t7;
-		$[43] = t8;
-	} else t8 = $[43];
-	const feedback = usePressFeedback(t8);
-	let t9;
-	if ($[44] !== action.selected || $[45] !== isToggle) {
-		t9 = isToggle ? toggleState(action.selected) : void 0;
-		$[44] = action.selected;
-		$[45] = isToggle;
-		$[46] = t9;
-	} else t9 = $[46];
-	const t10 = feedback.handlers;
+		$[54] = hoverIn;
+		$[55] = hoverOut;
+		$[56] = isDisabled;
+		$[57] = onBlur;
+		$[58] = onFocus;
+		$[59] = paint.layer;
+		$[60] = pressIn;
+		$[61] = pressOut;
+		$[62] = t9;
+		$[63] = t10;
+	} else t10 = $[63];
+	const feedback = usePressFeedback(t10);
 	let t11;
-	if ($[47] !== hitSlop || $[48] !== theme || $[49] !== width) {
-		t11 = hitSlop ?? targetOf(width, theme);
-		$[47] = hitSlop;
-		$[48] = theme;
-		$[49] = width;
-		$[50] = t11;
-	} else t11 = $[50];
-	let t12;
-	if ($[51] !== onLayout) {
-		t12 = measureThen(setWidth, onLayout);
-		$[51] = onLayout;
-		$[52] = t12;
-	} else t12 = $[52];
-	const t13 = action.onPress;
+	if ($[64] !== action.selected || $[65] !== isToggle) {
+		t11 = isToggle ? toggleState(action.selected) : void 0;
+		$[64] = action.selected;
+		$[65] = isToggle;
+		$[66] = t11;
+	} else t11 = $[66];
+	const t12 = feedback.handlers;
+	let t13;
+	if ($[67] !== hitSlop || $[68] !== theme || $[69] !== width) {
+		t13 = hitSlop ?? targetOf(width, theme);
+		$[67] = hitSlop;
+		$[68] = theme;
+		$[69] = width;
+		$[70] = t13;
+	} else t13 = $[70];
 	let t14;
-	if ($[53] !== eased.container || $[54] !== elevated || $[55] !== feedback.hovered || $[56] !== feedback.ring || $[57] !== isDisabled || $[58] !== style || $[59] !== theme) {
-		t14 = composeStyles(stylesOf(theme).pill, eased.container, elevated && !isDisabled ? shadowsOf(theme)[feedback.hovered ? "elevation2" : "elevation1"] : void 0, feedback.ring, style);
-		$[53] = eased.container;
-		$[54] = elevated;
-		$[55] = feedback.hovered;
-		$[56] = feedback.ring;
-		$[57] = isDisabled;
-		$[58] = style;
-		$[59] = theme;
-		$[60] = t14;
-	} else t14 = $[60];
-	let t15;
-	if ($[61] !== action.selected || $[62] !== icon || $[63] !== paint.glyph) {
-		t15 = /* @__PURE__ */ jsx(ChipGlyph, {
+	if ($[71] !== onLayout) {
+		t14 = measureThen(setWidth, onLayout);
+		$[71] = onLayout;
+		$[72] = t14;
+	} else t14 = $[72];
+	const t15 = action.onPress;
+	let t16;
+	if ($[73] !== eased.container || $[74] !== elevated || $[75] !== feedback.hovered || $[76] !== feedback.ring || $[77] !== isDisabled || $[78] !== style || $[79] !== theme) {
+		t16 = composeStyles(stylesOf(theme).pill, eased.container, elevated && !isDisabled ? shadowsOf(theme)[feedback.hovered ? "elevation2" : "elevation1"] : void 0, feedback.ring, style);
+		$[73] = eased.container;
+		$[74] = elevated;
+		$[75] = feedback.hovered;
+		$[76] = feedback.ring;
+		$[77] = isDisabled;
+		$[78] = style;
+		$[79] = theme;
+		$[80] = t16;
+	} else t16 = $[80];
+	let t17;
+	if ($[81] !== action.selected || $[82] !== icon || $[83] !== paint.glyph) {
+		t17 = /* @__PURE__ */ jsx(ChipGlyph, {
 			color: paint.glyph,
 			icon,
 			selected: action.selected
 		});
-		$[61] = action.selected;
-		$[62] = icon;
-		$[63] = paint.glyph;
-		$[64] = t15;
-	} else t15 = $[64];
-	let t16;
-	if ($[65] !== children || $[66] !== eased.label) {
-		t16 = /* @__PURE__ */ jsx(ChipLabel, {
+		$[81] = action.selected;
+		$[82] = icon;
+		$[83] = paint.glyph;
+		$[84] = t17;
+	} else t17 = $[84];
+	let t18;
+	if ($[85] !== children || $[86] !== eased.label) {
+		t18 = /* @__PURE__ */ jsx(ChipLabel, {
 			color: eased.label,
 			children
 		});
-		$[65] = children;
-		$[66] = eased.label;
-		$[67] = t16;
-	} else t16 = $[67];
-	let t17;
-	if ($[68] !== action.onPress || $[69] !== feedback.handlers || $[70] !== feedback.layer || $[71] !== isDisabled || $[72] !== props || $[73] !== t11 || $[74] !== t12 || $[75] !== t14 || $[76] !== t15 || $[77] !== t16 || $[78] !== t9) {
-		t17 = /* @__PURE__ */ jsxs(AnimatedPressable, {
+		$[85] = children;
+		$[86] = eased.label;
+		$[87] = t18;
+	} else t18 = $[87];
+	let t19;
+	if ($[88] !== action.onPress || $[89] !== feedback.handlers || $[90] !== feedback.layer || $[91] !== isDisabled || $[92] !== longPress || $[93] !== props || $[94] !== t11 || $[95] !== t13 || $[96] !== t14 || $[97] !== t16 || $[98] !== t17 || $[99] !== t18 || $[100] !== triggerProps) {
+		t19 = /* @__PURE__ */ jsxs(AnimatedPressable, {
 			role: "button",
-			...t9,
+			...t11,
 			...props,
-			...t10,
+			...triggerProps,
+			...t12,
 			disabled: isDisabled,
-			hitSlop: t11,
-			onLayout: t12,
-			onPress: t13,
-			style: t14,
+			hitSlop: t13,
+			onLayout: t14,
+			onLongPress: longPress,
+			onPress: t15,
+			style: t16,
 			children: [
 				feedback.layer,
-				t15,
-				t16
+				t17,
+				t18
 			]
 		});
-		$[68] = action.onPress;
-		$[69] = feedback.handlers;
-		$[70] = feedback.layer;
-		$[71] = isDisabled;
-		$[72] = props;
-		$[73] = t11;
-		$[74] = t12;
-		$[75] = t14;
-		$[76] = t15;
-		$[77] = t16;
-		$[78] = t9;
-		$[79] = t17;
-	} else t17 = $[79];
-	return t17;
+		$[88] = action.onPress;
+		$[89] = feedback.handlers;
+		$[90] = feedback.layer;
+		$[91] = isDisabled;
+		$[92] = longPress;
+		$[93] = props;
+		$[94] = t11;
+		$[95] = t13;
+		$[96] = t14;
+		$[97] = t16;
+		$[98] = t17;
+		$[99] = t18;
+		$[100] = triggerProps;
+		$[101] = t19;
+	} else t19 = $[101];
+	return t19;
 }
 //#endregion
 export { Chip };