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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","ToggleState","useId","Pressable","View","useToggleState","CheckboxTone","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","CheckboxBox","controlStylesOf","hitSlop","usePressFeedback","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","undefined","theme","t4","state","messageId","colors","radii","interactive","tone","t5","t6","circle","borderRadius","t7","t8","t9","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t10","t11","t12","handlers","t13","Symbol","for","t14","toggleOf","t15","t16","row","t17","t18","t19","layer","t20","t21","t22","t23","toggle","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId } from 'react'\nimport { Pressable, View } from 'react-native'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { CheckboxTone } from '../../control/checkbox-box'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { CheckboxBox } from '../../control/checkbox-box'\nimport { controlStylesOf } from '../../control/styles'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. 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 value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    CheckboxTone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled = false,\n  isIndeterminate = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const tone: CheckboxTone =\n    error === undefined ? (marked ? 'marked' : 'unmarked') : 'error'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <CheckboxBox\n            active={active}\n            isDisabled={isDisabled}\n            isIndeterminate={isIndeterminate}\n            isSelected={state.isSelected}\n            tone={tone}\n            within={LAYER_SIZE}\n          />\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewProps","ViewStyle","ToggleState","ToggleStateOptions","use","useEffect","useId","useRef","Pressable","View","useToggleState","CheckboxTone","CheckboxGroupContextValue","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","CheckboxBox","CheckboxGroupContext","controlStylesOf","hitSlop","usePressFeedback","useTheme","composeStyles","CheckboxProps","Omit","children","defaultSelected","description","error","isDisabled","isIndeterminate","isReadOnly","isSelected","onChange","ref","style","value","LAYERS","Readonly","Record","hover","pressed","marked","unmarked","Checkbox","t0","$","_c","ariaLabel","props","t1","t2","t3","ownDisabled","undefined","ownReadOnly","theme","group","messageId","control","members","Error","t4","memberOf","state","t5","t6","add","remove","colors","radii","interactive","invalid","isInvalid","tone","t7","t8","circle","borderRadius","t9","t10","t11","color","corners","disabled","disc","pressedColor","feedback","active","hovered","ring","t12","t13","t14","handlers","t15","Symbol","for","t16","toggleOf","t17","t18","row","t19","t20","t21","layer","t22","t23","t24","t25","Pick","set","toggle","_c"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type {\n  ToggleState,\n  ToggleStateOptions,\n} from 'react-stately/useToggleState'\n\nimport { use, useEffect, useId, useRef } from 'react'\nimport { Pressable, View } from 'react-native'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { CheckboxTone } from '../../control/checkbox-box'\nimport type { CheckboxGroupContextValue } from '../../control/group'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { CheckboxBox } from '../../control/checkbox-box'\nimport { CheckboxGroupContext } from '../../control/group'\nimport { controlStylesOf } from '../../control/styles'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\n\n// The checkbox page, as kanso-ui's Checkbox draws it: an 18dp box with a 2dp\n// corner and an 18dp glyph, inside a 40dp state layer, with a 48dp target.\n// Unselected, the box is a 2dp rule in on surface variant that turns on\n// surface while hovered, pressed or focused; selected or indeterminate, it\n// fills with primary and the glyph takes on primary. The error pair is error\n// and on error, and disabled is on surface at the disabled opacity for the\n// rule or the fill, with the glyph in surface. The state layer is on surface\n// over an unselected box and primary over a selected one while hovered, and\n// the two swap once pressed.\n//\n// The box eases between its colours over the motion tokens' short duration\n// on the standard curve, as web's transition does, and at once for a reader\n// who asks the device for reduced motion. The glyph arrives with the fill.\n//\n// The row, the label and the line under it are src/control's, which Radio\n// and Switch draw through as well. The whole row is the `Pressable`, so a\n// press on the label toggles the box, as a press on web's label does. The\n// line under it is outside the row, as web's is outside its label.\n//\n// Inside a CheckboxGroup the selection is the group's, as web's Checkbox\n// reads React Aria's group state: the box stands for the entry its `value`\n// names, a press selects or clears that entry, and the group's disabled,\n// read-only and error states reach the box as its own would.\n//\n// The corner is a literal: the page's 2dp is a step the shape scale does not\n// carry.\n\ntype CheckboxProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the checkbox starts selected, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. 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 value, in words. Its presence is what puts\n   * the checkbox in its error state: the message and the error colours both\n   * follow from it.\n   */\n  readonly error?: string\n  /**\n   * Draws the checkbox disabled, and takes no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Draws the dash for a box that stands for a partly selected set, and\n   * reports the box as mixed to a screen reader. It is the call site's to\n   * clear: a press still changes `isSelected` underneath.\n   * @default false\n   */\n  readonly isIndeterminate?: boolean\n  /**\n   * Shows the state without letting a press change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the checkbox is selected, for a call site holding the state\n   * itself with `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * The entry this checkbox stands for inside a `CheckboxGroup`, which the\n   * group's value holds while it is selected. Required there, and unused\n   * outside one.\n   */\n  readonly value?: string\n}\n\n// The state layer's colour roles, hovered or focused and pressed. Error is\n// error throughout; otherwise the two swap once pressed.\nconst LAYERS: Readonly<\n  Record<\n    CheckboxTone,\n    {\n      readonly hover: keyof ResolvedTheme['colors']\n      readonly pressed: keyof ResolvedTheme['colors']\n    }\n  >\n> = {\n  error: { hover: 'error', pressed: 'error' },\n  marked: { hover: 'primary', pressed: 'onSurface' },\n  unmarked: { hover: 'onSurface', pressed: 'primary' },\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Stately's, as web's is: pass `isSelected` with\n * `onChange` to control it, or `defaultSelected` to let it keep its own.\n * `isIndeterminate` draws the dash for a box that stands for a partly\n * selected set.\n *\n * ```tsx\n * <Checkbox defaultSelected description=\"Supporting line\">\n *   Label\n * </Checkbox>\n * ```\n *\n * A screen reader hears it as a checkbox named by its label, checked,\n * unchecked or mixed, followed by the line under it. A press anywhere on the\n * box or the label toggles it, and the row takes presses over the 48dp target\n * the page asks of the box. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions.\n */\nfunction Checkbox({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  isDisabled: ownDisabled = false,\n  isIndeterminate = false,\n  isReadOnly: ownReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  value,\n  ...props\n}: CheckboxProps) {\n  const theme = useTheme()\n  const group = use(CheckboxGroupContext)\n  const messageId = useId()\n  const control = useRef<ComponentRef<typeof Pressable>>(null)\n  const members = group?.members\n\n  if (group !== null && value === undefined) {\n    throw new Error(\n      'A Checkbox inside a CheckboxGroup names the entry it stands for with `value`.',\n    )\n  }\n\n  const isDisabled = ownDisabled || (group?.isDisabled ?? false)\n  const isReadOnly = ownReadOnly || (group?.isReadOnly ?? false)\n  const state = useToggleState(\n    group === null || value === undefined\n      ? { defaultSelected, isReadOnly, isSelected, onChange }\n      : memberOf(group, value, { isReadOnly, onChange }),\n  )\n\n  // Joins the group's list of checkboxes once, in the order the tree mounts\n  // them, so a native form holding the group back focuses the first.\n  useEffect(() => {\n    members?.add(messageId, control)\n    return () => {\n      members?.remove(messageId)\n    }\n  }, [members, messageId])\n\n  const { colors, radii } = theme\n  const marked = state.isSelected || isIndeterminate\n  const interactive = !isDisabled && !isReadOnly\n  const invalid = error !== undefined || (group?.isInvalid ?? false)\n  const tone: CheckboxTone = invalid ? 'error' : marked ? 'marked' : 'unmarked'\n\n  const feedback = usePressFeedback({\n    color: colors[LAYERS[tone].hover],\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    pressedColor: colors[LAYERS[tone].pressed],\n  })\n  const active =\n    feedback.hovered || feedback.pressed || feedback.ring !== undefined\n\n  return (\n    <View {...props} style={style}>\n      <Pressable\n        aria-checked={isIndeterminate ? 'mixed' : state.isSelected}\n        aria-label={ariaLabel}\n        role=\"checkbox\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, LAYER_SIZE)}\n        onPress={toggleOf(state)}\n        ref={control}\n        style={controlStylesOf(theme).row}\n      >\n        <View\n          style={composeStyles<ViewStyle>(\n            controlStylesOf(theme).disc,\n            feedback.ring,\n          )}\n        >\n          {feedback.layer}\n          <CheckboxBox\n            active={active}\n            isDisabled={isDisabled}\n            isIndeterminate={isIndeterminate}\n            isSelected={state.isSelected}\n            tone={tone}\n            within={LAYER_SIZE}\n          />\n        </View>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage description={description} error={error} id={messageId} />\n    </View>\n  )\n}\n\n// The toggle state of a checkbox in a group: selected while the group's\n// value holds its entry, and a change made to the group's value, reported to\n// the checkbox's own `onChange` as well, as React Aria's group item does.\nfunction memberOf(\n  group: CheckboxGroupContextValue,\n  value: string,\n  {\n    isReadOnly,\n    onChange,\n  }: Pick<ToggleStateOptions, 'onChange'> & { readonly isReadOnly: boolean },\n): ToggleStateOptions {\n  return {\n    isReadOnly,\n    isSelected: group.isSelected(value),\n    onChange: (isSelected) => {\n      group.set(value, isSelected)\n      onChange?.(isSelected)\n    },\n  }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: ToggleState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nexport { Checkbox }\nexport type { CheckboxProps }\n"],"mappings":"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"}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,93 @@
+import { ValidationResult } from "../../form/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/checkbox-group/index.d.ts
+type CheckboxGroupProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The checkboxes, each with a `value` of its own. */
+  readonly children?: ReactNode;
+  /** The entries selected at first, when the group keeps its own value. */
+  readonly defaultValue?: readonly string[];
+  /**
+   * A hint under the group. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current selection, in words. Its presence is what
+   * puts the group in its error state: the message, the label's colour and
+   * every box's error colours follow from it.
+   *
+   * Outside a `Form` the line under the group arrives with the message, so
+   * the group grows when this does and moves what is under it. A `Form`
+   * holds that space from the start; so does a permanent `description`.
+   */
+  readonly error?: string;
+  /**
+   * Draws every checkbox disabled, and takes no presses.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the selection without letting a press change it.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the group's label, and has a `native` form hold submission back
+   * while nothing is selected.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the group is for. Required rather than optional: a group of
+   * checkboxes with no name is a set of boxes a screen reader cannot
+   * introduce.
+   */
+  readonly label: string;
+  /**
+   * The name the form around the group knows it by, which its
+   * `validationErrors` are keyed on. A form hands `onSubmit` one string per
+   * name, so a group's selection is not among those values: read it through
+   * `onChange`, or hold it with `value`.
+   */
+  readonly name?: string;
+  /** Called with the newly selected entries whenever a press changes them. */
+  readonly onChange?: (value: string[]) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Checks the selection, returning its problem in words, or `true`, `null`
+   * or `undefined` when there is none. Shown as it changes, or under a
+   * `native` form once a submission is tried.
+   */
+  readonly validate?: (value: readonly string[]) => ValidationResult;
+  /**
+   * The selected entries, for a call site holding the value itself with
+   * `onChange`.
+   */
+  readonly value?: readonly string[];
+};
+/**
+ * A labelled set of checkboxes with one value between them. The value is
+ * React Stately's, as web's is React Aria's: pass `value` with `onChange` to
+ * control it, or `defaultValue` to let the group keep its own, and each
+ * `Checkbox` inside names the entry it stands for with `value`. Disabled,
+ * read-only and the error state reach every checkbox from here.
+ *
+ * ```tsx
+ * <CheckboxGroup defaultValue={['first']} label="Label">
+ *   <Checkbox value="first">First item</Checkbox>
+ *   <Checkbox value="second">Second item</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ *
+ * A screen reader hears it as a group named by its label. On the web the
+ * line under it describes the group, as web's does; on iOS and Android it is
+ * read after the checkboxes, where it sits, and an error is announced as it
+ * arrives. `style`, `ref` and `testID` land on the group as a whole, which is
+ * the element a layout positions.
+ */
+declare function CheckboxGroup({ children, defaultValue, description, error, isDisabled, isReadOnly, isRequired, label, name, onChange, style, validate, value, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+export { CheckboxGroup, type CheckboxGroupProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,306 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useFieldValidation, useInsideForm } from "../../form/index.js";
+import { messageOf } from "../../control/index.js";
+import { CheckboxGroupContext, createMembers } from "../../control/group.js";
+import { useErrorAnnouncement } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCheckboxGroupState } from "react-stately/useCheckboxGroupState";
+//#region src/components/checkbox-group/index.tsx
+const REQUIRED_MARK = "*";
+const ATOMIC = { "aria-atomic": true };
+const stylesOf = themedStyles(({ colors, spacing, stateLayerOpacity }) => StyleSheet.create({
+	items: { flexDirection: "column" },
+	label: { color: colors.onSurfaceVariant },
+	labelDisabled: { color: withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) },
+	labelError: { color: colors.error },
+	message: { color: colors.onSurfaceVariant },
+	messageError: { color: colors.error },
+	messageLine: { marginTop: spacing.xs },
+	messageLineCollapsed: {
+		marginTop: 0,
+		position: "absolute"
+	},
+	outOfFlow: { position: "absolute" },
+	root: {
+		flexDirection: "column",
+		rowGap: spacing.xs
+	}
+}));
+/**
+* A labelled set of checkboxes with one value between them. The value is
+* React Stately's, as web's is React Aria's: pass `value` with `onChange` to
+* control it, or `defaultValue` to let the group keep its own, and each
+* `Checkbox` inside names the entry it stands for with `value`. Disabled,
+* read-only and the error state reach every checkbox from here.
+*
+* ```tsx
+* <CheckboxGroup defaultValue={['first']} label="Label">
+*   <Checkbox value="first">First item</Checkbox>
+*   <Checkbox value="second">Second item</Checkbox>
+* </CheckboxGroup>
+* ```
+*
+* A screen reader hears it as a group named by its label. On the web the
+* line under it describes the group, as web's does; on iOS and Android it is
+* read after the checkboxes, where it sits, and an error is announced as it
+* arrives. `style`, `ref` and `testID` land on the group as a whole, which is
+* the element a layout positions.
+*/
+function CheckboxGroup(t0) {
+	const $ = c(61);
+	let children;
+	let defaultValue;
+	let description;
+	let error;
+	let label;
+	let name;
+	let onChange;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let validate;
+	let value;
+	if ($[0] !== t0) {
+		({children, defaultValue, description, error, isDisabled: t1, isReadOnly: t2, isRequired: t3, label, name, onChange, style, validate, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultValue;
+		$[3] = description;
+		$[4] = error;
+		$[5] = label;
+		$[6] = name;
+		$[7] = onChange;
+		$[8] = props;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = validate;
+		$[14] = value;
+	} else {
+		children = $[1];
+		defaultValue = $[2];
+		description = $[3];
+		error = $[4];
+		label = $[5];
+		name = $[6];
+		onChange = $[7];
+		props = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		validate = $[13];
+		value = $[14];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isReadOnly = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const theme = useTheme();
+	let t4;
+	if ($[15] !== defaultValue) {
+		t4 = copyOf(defaultValue);
+		$[15] = defaultValue;
+		$[16] = t4;
+	} else t4 = $[16];
+	let t5;
+	if ($[17] !== value) {
+		t5 = copyOf(value);
+		$[17] = value;
+		$[18] = t5;
+	} else t5 = $[18];
+	let t6;
+	if ($[19] !== isDisabled || $[20] !== isReadOnly || $[21] !== onChange || $[22] !== t4 || $[23] !== t5) {
+		t6 = {
+			defaultValue: t4,
+			isDisabled,
+			isReadOnly,
+			onChange,
+			value: t5
+		};
+		$[19] = isDisabled;
+		$[20] = isReadOnly;
+		$[21] = onChange;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+	} else t6 = $[24];
+	const state = useCheckboxGroupState(t6);
+	const [members] = useState(createMembers);
+	const t7 = state.value.length === 0;
+	let t8;
+	if ($[25] !== error || $[26] !== isDisabled || $[27] !== isReadOnly || $[28] !== isRequired || $[29] !== members || $[30] !== name || $[31] !== state.value || $[32] !== t7 || $[33] !== validate) {
+		t8 = {
+			control: members,
+			error,
+			isDisabled,
+			isEmpty: t7,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted: void 0,
+			validate,
+			value: state.value
+		};
+		$[25] = error;
+		$[26] = isDisabled;
+		$[27] = isReadOnly;
+		$[28] = isRequired;
+		$[29] = members;
+		$[30] = name;
+		$[31] = state.value;
+		$[32] = t7;
+		$[33] = validate;
+		$[34] = t8;
+	} else t8 = $[34];
+	const validation = useFieldValidation(t8);
+	const labelId = useId();
+	const messageId = useId();
+	const labelRole = useTypeRole("labelLarge");
+	const messageRole = useTypeRole("bodySmall");
+	const insideForm = useInsideForm();
+	const { fontScale } = useWindowDimensions();
+	const own = stylesOf(theme);
+	const shown = validation.error;
+	const invalid = shown !== void 0;
+	const message = messageOf(description, shown);
+	const holdsLine = insideForm || message !== void 0;
+	let t9;
+	if ($[35] !== invalid || $[36] !== members || $[37] !== state || $[38] !== validation) {
+		t9 = contextOf(state, members, validation, invalid);
+		$[35] = invalid;
+		$[36] = members;
+		$[37] = state;
+		$[38] = validation;
+		$[39] = t9;
+	} else t9 = $[39];
+	const context = t9;
+	const messageStyle = composeStyles(messageRole, own.message, invalid ? own.messageError : void 0);
+	useErrorAnnouncement(shown);
+	const t10 = lineOf(messageId, message);
+	const t11 = composeStyles(own.root, style);
+	let t12;
+	if ($[40] !== children || $[41] !== context) {
+		t12 = /* @__PURE__ */ jsx(CheckboxGroupContext, {
+			value: context,
+			children
+		});
+		$[40] = children;
+		$[41] = context;
+		$[42] = t12;
+	} else t12 = $[42];
+	const T0 = View;
+	const t13 = composeStyles(own.messageLine, holdsLine ? minHeightOf(theme.typography.bodySmallLineHeight * fontScale) : own.messageLineCollapsed);
+	const t14 = invalid && shown !== "" ? void 0 : own.outOfFlow;
+	let t15;
+	if ($[43] !== invalid || $[44] !== messageId || $[45] !== messageStyle || $[46] !== shown) {
+		t15 = invalid && shown !== "" ? /* @__PURE__ */ jsx(Text, {
+			id: messageId,
+			style: messageStyle,
+			children: shown
+		}) : null;
+		$[43] = invalid;
+		$[44] = messageId;
+		$[45] = messageStyle;
+		$[46] = shown;
+		$[47] = t15;
+	} else t15 = $[47];
+	let t16;
+	if ($[48] !== t14 || $[49] !== t15) {
+		t16 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			...Platform.OS === "web" ? ATOMIC : void 0,
+			style: t14,
+			children: t15
+		});
+		$[48] = t14;
+		$[49] = t15;
+		$[50] = t16;
+	} else t16 = $[50];
+	let t17;
+	if ($[51] !== description || $[52] !== invalid || $[53] !== messageId || $[54] !== messageStyle) {
+		t17 = invalid || description === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+			id: messageId,
+			style: messageStyle,
+			children: description
+		});
+		$[51] = description;
+		$[52] = invalid;
+		$[53] = messageId;
+		$[54] = messageStyle;
+		$[55] = t17;
+	} else t17 = $[55];
+	let t18;
+	if ($[56] !== T0 || $[57] !== t13 || $[58] !== t16 || $[59] !== t17) {
+		t18 = /* @__PURE__ */ jsxs(T0, {
+			style: t13,
+			children: [t16, t17]
+		});
+		$[56] = T0;
+		$[57] = t13;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+	} else t18 = $[60];
+	return /* @__PURE__ */ jsxs(View, {
+		...props,
+		"aria-labelledby": labelId,
+		role: "group",
+		...t10,
+		style: t11,
+		children: [
+			/* @__PURE__ */ jsxs(Text, {
+				id: labelId,
+				style: composeStyles(labelRole, own.label, isDisabled ? own.labelDisabled : void 0, invalid ? own.labelError : void 0),
+				children: [label, isRequired ? REQUIRED_MARK : null]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: own.items,
+				children: t12
+			}),
+			t18
+		]
+	});
+}
+function contextOf(state, members, { onBlur, onEdit }, isInvalid) {
+	return {
+		isDisabled: state.isDisabled,
+		isInvalid,
+		isReadOnly: state.isReadOnly,
+		isSelected: (entry) => state.isSelected(entry),
+		members,
+		set: (entry, isSelected) => {
+			if (isSelected) state.addValue(entry);
+			else state.removeValue(entry);
+			onEdit();
+			onBlur();
+		}
+	};
+}
+function copyOf(entries) {
+	return entries === void 0 ? void 0 : [...entries];
+}
+/**
+* How the group is described by the line under it. On the web it points at
+* the line with `aria-describedby`, as web's group does. iOS and Android
+* focus the checkboxes rather than the group, so there the line is left
+* where a screen reader reaches it in order, after the last checkbox.
+*/
+function lineOf(id, message) {
+	return Platform.OS === "web" && message !== void 0 ? { "aria-describedby": id } : void 0;
+}
+function minHeightOf(minHeight) {
+	return { minHeight };
+}
+//#endregion
+export { CheckboxGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

package/dist/components/chip-group/index.d.ts

@@ -77,8 +77,9 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
   /**
    * What the close target on each chip is called, for a screen reader. The
    * chip's own text follows it, so this is the verb rather than the whole
-   * phrase: "Remove" becomes "Remove First item".
-   * @default 'Remove'
+   * phrase: "Remove" becomes "Remove First item". Left out, it is the word
+   * React Aria gives web's in the `I18nProvider`'s locale, or the device's
+   * outside one, "Remove" in English.
    */
   readonly removeLabel?: string;
   /** What the row draws once it holds no chips. */
@@ -117,7 +118,7 @@ type ChipGroupProps<T extends object = object> = Omit<ViewProps, 'children' | 's
  * where it sits. `style`, `ref` and `testID` land on the group as a whole,
  * which is the element a layout positions.
  */
-declare function ChipGroup<T extends object = object>({ children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel, renderEmptyState, selectedKeys, selectionMode, style, ...props }: ChipGroupProps<T>): import("react").JSX.Element;
+declare function ChipGroup<T extends object = object>({ children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: ownRemoveLabel, renderEmptyState, selectedKeys, selectionMode, style, ...props }: ChipGroupProps<T>): import("react").JSX.Element;
 declare namespace ChipGroup {
   var Chip: typeof ChipGroupChip;
 }