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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewStyle","AnimatedStyle","Key","DisclosureGroupState","DisclosureState","createContext","use","useCallback","useEffect","useId","useMemo","useState","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","useDisclosureState","ResolvedTheme","DisclosureGroupStateContext","ExpandChevron","usePressFeedback","RowContent","rowContentColor","rowStyleOf","rowStyles","useTheme","composeStyles","themedStyles","stylesOf","spacing","create","inner","paddingBottom","lg","paddingHorizontal","styles","clip","overflow","closed","display","DisclosureContextValue","header","isDisabled","state","DisclosureHeaderProps","children","leading","ref","style","supporting","testID","DisclosurePanelProps","role","DisclosureProps","defaultExpanded","id","isExpanded","onExpandedChange","DisclosureContext","chevronFor","Disclosure","t0","$","_c","t1","undefined","group","fallback","key","t2","expandedKeys","has","t3","expandedChangeOf","t4","disabled","t5","value","t6","t7","DisclosureHeader","useDisclosure","theme","color","feedback","toggleOf","handlers","ring","layer","t8","t9","t10","DisclosurePanel","own","motion","reduceMotion","shown","setShown","openness","height","event","set","nativeEvent","layout","measure","target","duration","durationMedium2","easing","bezier","easingEmphasized","timer","setTimeout","clearTimeout","measured","get","progress","T0","expanded","toggleKey","toggle","part","Error","Header","Panel","_c"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key } from 'react-stately'\nimport type { DisclosureGroupState } from 'react-stately/useDisclosureGroupState'\nimport type { DisclosureState } from 'react-stately/useDisclosureState'\n\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useDisclosureState } from 'react-stately/useDisclosureState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { DisclosureGroupStateContext } from '../../disclosure'\nimport { ExpandChevron } from '../../disclosure/chevron'\nimport { usePressFeedback } from '../../press'\nimport { RowContent, rowContentColor, rowStyleOf, rowStyles } from '../../row'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's Disclosure: a section that opens to show what is under it, and\n// closes again. The header is the row every list here draws, src/row, shared\n// with ListItem and every menu item, so its 56dp floor, 72dp with a\n// supporting line, body-large headline, body-medium supporting line and\n// state layers are that module's, and a header above a list cannot drift\n// from the rows below it. A 24dp chevron in its trailing slot turns a quarter\n// to point down once the section is open, over the short3 duration on the\n// standard curve, as web's does, and mirrors under right-to-left. The panel\n// holds its content 16dp in, lined up with the headline above it.\n//\n// **The header is a button and not a heading.** Web renders the button\n// inside a heading at `headingLevel`; React Native's screen readers have no\n// heading levels, so the prop is dropped, as AppBar drops it. The button\n// reports whether the section is expanded.\n//\n// **The panel moves its height on Reanimated**, from nothing to the height\n// its content reports through `onLayout`, over the medium2 duration on the\n// emphasised curve, web's. Under reduced motion it opens and closes at once.\n// It closes the same way it opens, which web does not: there the collapsed\n// panel takes React Aria's `hidden=\"until-found\"`, which stops its content\n// being laid out at once and leaves nothing to shrink, and native has no\n// counterpart to it. Once closed, its content is laid out no longer, so\n// nothing in it is reached by a press, a key or a screen reader, and it is\n// hidden from a screen reader while it closes.\n//\n// The state is React Stately's `useDisclosureState`, the one web's React Aria\n// keeps, handed to the two parts through context. Inside a DisclosureGroup\n// the group's keys say whether the section is open, under its `id`, and the\n// group's `isDisabled` disables it as its own does, as React Aria's do.\n\nconst stylesOf = themedStyles(({ spacing }: ResolvedTheme) =>\n  StyleSheet.create({\n    inner: {\n      paddingBottom: spacing.lg,\n      paddingHorizontal: spacing.lg,\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What the panel's height moves inside: its content lays out at its own\n  // height whatever the clip is, which is what `onLayout` measures.\n  clip: {\n    overflow: 'hidden',\n  },\n  // A closed panel's content, which takes no part in layout, presses, keys\n  // or a screen reader once its close has run.\n  closed: {\n    display: 'none',\n  },\n})\n\ntype DisclosureContextValue = {\n  readonly header: string\n  readonly isDisabled: boolean\n  readonly state: DisclosureState\n}\n\ntype DisclosureHeaderProps = {\n  /** The header's headline, what the section is about. */\n  readonly children?: ReactNode\n  /** Content before the headline: an avatar, an icon. */\n  readonly leading?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /** A second line under the headline, in the muted role. */\n  readonly supporting?: ReactNode\n  readonly testID?: string\n}\n\ntype DisclosurePanelProps = {\n  /** What the section shows while it is open. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * `region` names the panel as a landmark, for a section a reader should be\n   * able to jump to, where `group` only gathers what is in it.\n   * @default 'group'\n   */\n  readonly role?: 'group' | 'region'\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\ntype DisclosureProps = {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  readonly children?: ReactNode\n  /** Whether the section starts open, when it keeps its own state. */\n  readonly defaultExpanded?: boolean\n  /**\n   * The section's key in a `DisclosureGroup`, which the group reports as\n   * expanded. Outside a group it does nothing.\n   */\n  readonly id?: Key\n  /**\n   * Keeps the section from opening or closing, and draws its header\n   * disabled.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Whether the section is open, when the call site holds the state. */\n  readonly isExpanded?: boolean\n  /** Called with the new state as the section opens or closes. */\n  readonly onExpandedChange?: (isExpanded: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\nconst DisclosureContext = createContext<DisclosureContextValue | null>(null)\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ExpandChevron isExpanded={isExpanded} />\n}\n\n/**\n * A section that opens to show what is under it. Pass `isExpanded` with\n * `onExpandedChange` to hold whether it is open, or `defaultExpanded` to let\n * it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>\n *     <Text>Supporting line</Text>\n *   </Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * reports, and opens and closes at once under reduced motion.\n *\n * Inside a `DisclosureGroup`, give it an `id`, the key the group reports.\n *\n * `style`, `ref` and `testID` land on the section's own view, as they do on\n * each part's.\n */\nfunction Disclosure({\n  children,\n  defaultExpanded,\n  id,\n  isDisabled = false,\n  isExpanded,\n  onExpandedChange,\n  ref,\n  style,\n  testID,\n}: DisclosureProps) {\n  const group = use(DisclosureGroupStateContext)\n  const fallback = useId()\n  const key = id ?? fallback\n  const state = useDisclosureState({\n    defaultExpanded,\n    isExpanded: group === null ? isExpanded : group.expandedKeys.has(key),\n    onExpandedChange: expandedChangeOf(group, key, onExpandedChange),\n  })\n  const header = useId()\n  const disabled = isDisabled || (group?.isDisabled ?? false)\n  const value = useMemo<DisclosureContextValue>(\n    () => ({ header, isDisabled: disabled, state }),\n    [disabled, header, state],\n  )\n\n  return (\n    <DisclosureContext value={value}>\n      <View ref={ref} style={style} testID={testID}>\n        {children}\n      </View>\n    </DisclosureContext>\n  )\n}\n\n/**\n * The row that opens and closes the section: a button announced as expanded\n * or collapsed, drawing the shared row's slots with a chevron in the\n * trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  leading,\n  ref,\n  style,\n  supporting,\n  testID,\n}: DisclosureHeaderProps) {\n  const { header, isDisabled, state } = useDisclosure('Disclosure.Header')\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color: rowContentColor(theme, { isDisabled }),\n    disabled: isDisabled,\n  })\n\n  return (\n    <Pressable\n      aria-expanded={state.isExpanded}\n      id={header}\n      onPress={toggleOf(state)}\n      ref={ref}\n      role=\"button\"\n      testID={testID}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(\n        rowStyleOf(theme, { supporting }),\n        feedback.ring,\n        feedback.ring === undefined ? undefined : rowStyles.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <RowContent\n        isDisabled={isDisabled}\n        leading={leading}\n        supporting={supporting}\n        trailing={chevronFor(state.isExpanded)}\n      >\n        {children}\n      </RowContent>\n    </Pressable>\n  )\n}\n\n/**\n * What the section shows while it is open. Its content sits 16dp in, lined\n * up with the headline above it, and it is named by the header.\n */\nfunction DisclosurePanel({\n  children,\n  ref,\n  role = 'group',\n  style,\n  testID,\n}: DisclosurePanelProps) {\n  const { header, state } = useDisclosure('Disclosure.Panel')\n  const { isExpanded } = state\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const { motion } = theme\n  const reduceMotion = useReducedMotion()\n  // Whether the content is laid out: from the moment the section opens until\n  // its close has run.\n  const [shown, setShown] = useState(isExpanded)\n  const openness = useSharedValue(isExpanded ? 1 : 0)\n  // The content's own height, once it has reported one while laid out. A\n  // closed panel's content reports nothing worth keeping, and the handler is\n  // there from the start all the same: React Native Web watches a view's size\n  // only if it had a handler when it mounted.\n  const height = useSharedValue(-1)\n  const measure = useCallback(\n    (event: LayoutChangeEvent) => {\n      if (shown) {\n        height.set(event.nativeEvent.layout.height)\n      }\n    },\n    [height, shown],\n  )\n\n  // Laid out the moment it opens, and at once no longer when it closes with\n  // no motion to run.\n  if (isExpanded && !shown) {\n    setShown(true)\n  } else if (!isExpanded && shown && reduceMotion) {\n    setShown(false)\n  }\n\n  useEffect(() => {\n    const target = isExpanded ? 1 : 0\n\n    if (reduceMotion) {\n      openness.set(target)\n      return undefined\n    }\n\n    openness.set(\n      withTiming(target, {\n        duration: motion.durationMedium2,\n        easing: Easing.bezier(...motion.easingEmphasized),\n      }),\n    )\n    if (isExpanded) {\n      return undefined\n    }\n\n    const timer = setTimeout(() => {\n      setShown(false)\n    }, motion.durationMedium2)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [isExpanded, motion, openness, reduceMotion])\n\n  // Open before the content has reported a height, the panel takes the\n  // content's own, so a section that starts open draws it on the first\n  // frame; otherwise it is the share of that height the motion has reached.\n  const clip = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const progress = openness.get()\n\n    if (measured < 0) {\n      return progress === 1 ? {} : { height: 0 }\n    }\n\n    return { height: measured * progress }\n  })\n\n  return (\n    <Animated.View\n      aria-hidden={!isExpanded}\n      aria-labelledby={header}\n      ref={ref}\n      role={role}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(styles.clip, clip, style)}\n      testID={testID}\n    >\n      <View\n        onLayout={measure}\n        style={composeStyles<ViewStyle>(\n          own.inner,\n          shown ? undefined : styles.closed,\n        )}\n      >\n        {children}\n      </View>\n    </Animated.View>\n  )\n}\n\n// What a section calls as it opens or closes: inside a group, the group's\n// toggle of its key first, then the call site's own handler either way.\nfunction expandedChangeOf(\n  group: DisclosureGroupState | null,\n  key: Key,\n  onExpandedChange: ((isExpanded: boolean) => void) | undefined,\n) {\n  return (expanded: boolean) => {\n    group?.toggleKey(key)\n    onExpandedChange?.(expanded)\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: DisclosureState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nfunction useDisclosure(part: string): DisclosureContextValue {\n  const value = use(DisclosureContext)\n  if (value === null) {\n    throw new Error(`${part} is drawn inside Disclosure.`)\n  }\n  return value\n}\n\nDisclosure.Header = DisclosureHeader\nDisclosure.Panel = DisclosurePanel\n\nexport { Disclosure, DisclosureHeader, DisclosurePanel }\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps }\n"],"mappings":"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"}

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

@@ -0,0 +1,61 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/disclosure-group/index.d.ts
+type DisclosureGroupProps = {
+  /**
+   * Whether several sections may be open at once. Otherwise opening one
+   * closes the one that was open.
+   * @default false
+   */
+  readonly allowsMultipleExpanded?: boolean;
+  /** The sections, as `Disclosure` elements each given an `id`. */
+  readonly children?: ReactNode;
+  /** The keys of the sections open at first, when the group keeps its own. */
+  readonly defaultExpandedKeys?: Iterable<Key>;
+  /**
+   * Whether a rule is drawn between the sections. There is never one above
+   * the first or below the last.
+   * @default true
+   */
+  readonly divided?: boolean;
+  /** The keys of the open sections, when the call site holds them. */
+  readonly expandedKeys?: Iterable<Key>;
+  /**
+   * Keeps every section from opening or closing, and draws their headers
+   * disabled.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the keys of the open sections as one opens or closes. */
+  readonly onExpandedChange?: (keys: Set<Key>) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+/**
+ * A stack of `Disclosure` sections that agree about what is open. Pass
+ * `expandedKeys` with `onExpandedChange` to hold which are open, or
+ * `defaultExpandedKeys` to let the group keep its own.
+ *
+ * ```tsx
+ * <DisclosureGroup defaultExpandedKeys={FIRST}>
+ *   <Disclosure id="first">
+ *     <Disclosure.Header>Headline</Disclosure.Header>
+ *     <Disclosure.Panel>
+ *       <Text>Supporting line</Text>
+ *     </Disclosure.Panel>
+ *   </Disclosure>
+ * </DisclosureGroup>
+ * ```
+ *
+ * One section opens at a time unless `allowsMultipleExpanded` says otherwise.
+ * Give every section an `id`, which is the key the group reports.
+ *
+ * `style`, `ref` and `testID` land on the group's own view, the one a layout
+ * positions.
+ */
+declare function DisclosureGroup({ allowsMultipleExpanded, children, defaultExpandedKeys, divided, expandedKeys, isDisabled, onExpandedChange, ref, style, testID }: DisclosureGroupProps): import("react").JSX.Element;
+//#endregion
+export { DisclosureGroup, type DisclosureGroupProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,100 @@
+import { DisclosureGroupStateContext } from "../../disclosure/index.js";
+import { Separator } from "../separator/index.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { Children, Fragment, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosureGroupState } from "react-stately/useDisclosureGroupState";
+//#region src/components/disclosure-group/index.tsx
+/**
+* A stack of `Disclosure` sections that agree about what is open. Pass
+* `expandedKeys` with `onExpandedChange` to hold which are open, or
+* `defaultExpandedKeys` to let the group keep its own.
+*
+* ```tsx
+* <DisclosureGroup defaultExpandedKeys={FIRST}>
+*   <Disclosure id="first">
+*     <Disclosure.Header>Headline</Disclosure.Header>
+*     <Disclosure.Panel>
+*       <Text>Supporting line</Text>
+*     </Disclosure.Panel>
+*   </Disclosure>
+* </DisclosureGroup>
+* ```
+*
+* One section opens at a time unless `allowsMultipleExpanded` says otherwise.
+* Give every section an `id`, which is the key the group reports.
+*
+* `style`, `ref` and `testID` land on the group's own view, the one a layout
+* positions.
+*/
+function DisclosureGroup(t0) {
+	const $ = c(17);
+	const { allowsMultipleExpanded, children, defaultExpandedKeys, divided: t1, expandedKeys, isDisabled, onExpandedChange, ref, style, testID } = t0;
+	const divided = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[0] !== allowsMultipleExpanded || $[1] !== defaultExpandedKeys || $[2] !== expandedKeys || $[3] !== isDisabled || $[4] !== onExpandedChange) {
+		t2 = {
+			allowsMultipleExpanded,
+			defaultExpandedKeys,
+			expandedKeys,
+			isDisabled,
+			onExpandedChange
+		};
+		$[0] = allowsMultipleExpanded;
+		$[1] = defaultExpandedKeys;
+		$[2] = expandedKeys;
+		$[3] = isDisabled;
+		$[4] = onExpandedChange;
+		$[5] = t2;
+	} else t2 = $[5];
+	const state = useDisclosureGroupState(t2);
+	let t3;
+	if ($[6] !== children || $[7] !== divided) {
+		t3 = divided ? dividedChildren(children) : children;
+		$[6] = children;
+		$[7] = divided;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== ref || $[10] !== style || $[11] !== t3 || $[12] !== testID) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			ref,
+			style,
+			testID,
+			children: t3
+		});
+		$[9] = ref;
+		$[10] = style;
+		$[11] = t3;
+		$[12] = testID;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== state || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DisclosureGroupStateContext, {
+			value: state,
+			children: t4
+		});
+		$[14] = state;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function dividedChildren(children) {
+	return flatten(children).map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx(Separator, {}), section] }, keyOf(section, index)));
+}
+function flatten(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (isValidElement(child) && child.type === Fragment) return flatten(child.props.children);
+		return [child];
+	});
+}
+function keyOf(section, index) {
+	return isValidElement(section) && section.key !== null ? section.key : String(index);
+}
+//#endregion
+export { DisclosureGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewStyle","Key","Children","Fragment","isValidElement","View","useDisclosureGroupState","DisclosureGroupStateContext","Separator","DisclosureGroupProps","allowsMultipleExpanded","children","defaultExpandedKeys","Iterable","divided","expandedKeys","isDisabled","onExpandedChange","keys","Set","ref","style","testID","DisclosureGroup","t0","$","_c","t1","undefined","t2","state","t3","dividedChildren","t4","t5","flatten","map","section","index","keyOf","toArray","flatMap","child","type","props","key","String","_c"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type { Key } from 'react-stately'\n\nimport { Children, Fragment, isValidElement } from 'react'\nimport { View } from 'react-native'\nimport { useDisclosureGroupState } from 'react-stately/useDisclosureGroupState'\n\nimport { DisclosureGroupStateContext } from '../../disclosure'\nimport { Separator } from '../separator'\n\n// kanso-ui's DisclosureGroup: a stack of Disclosures that agree with each\n// other about what is open, the lists page's accordion. The sections are the\n// library's own `Disclosure`, unchanged: this adds only the agreement between\n// them and the rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and the\n// keys are React Stately's `useDisclosureGroupState`, the state web's React\n// Aria keeps, handed to the sections through context.\n//\n// **A rule between the sections, and none at the ends.** The group draws the\n// library's `Separator` between each pair rather than asking each section to\n// draw a border, so a section drawn on its own and a section in a group stay\n// the same component. `divided={false}` leaves them undivided, for a stack\n// sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a screen want\n// different surroundings, and the screen is what knows which it is.\n\ntype DisclosureGroupProps = {\n  /**\n   * Whether several sections may be open at once. Otherwise opening one\n   * closes the one that was open.\n   * @default false\n   */\n  readonly allowsMultipleExpanded?: boolean\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  readonly children?: ReactNode\n  /** The keys of the sections open at first, when the group keeps its own. */\n  readonly defaultExpandedKeys?: Iterable<Key>\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  readonly divided?: boolean\n  /** The keys of the open sections, when the call site holds them. */\n  readonly expandedKeys?: Iterable<Key>\n  /**\n   * Keeps every section from opening or closing, and draws their headers\n   * disabled.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Called with the keys of the open sections as one opens or closes. */\n  readonly onExpandedChange?: (keys: Set<Key>) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Pass\n * `expandedKeys` with `onExpandedChange` to hold which are open, or\n * `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>\n *       <Text>Supporting line</Text>\n *     </Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id`, which is the key the group reports.\n *\n * `style`, `ref` and `testID` land on the group's own view, the one a layout\n * positions.\n */\nfunction DisclosureGroup({\n  allowsMultipleExpanded,\n  children,\n  defaultExpandedKeys,\n  divided = true,\n  expandedKeys,\n  isDisabled,\n  onExpandedChange,\n  ref,\n  style,\n  testID,\n}: DisclosureGroupProps) {\n  const state = useDisclosureGroupState({\n    allowsMultipleExpanded,\n    defaultExpandedKeys,\n    expandedKeys,\n    isDisabled,\n    onExpandedChange,\n  })\n\n  return (\n    <DisclosureGroupStateContext value={state}>\n      <View ref={ref} style={style} testID={testID}>\n        {divided ? dividedChildren(children) : children}\n      </View>\n    </DisclosureGroupStateContext>\n  )\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  return flatten(children).map((section, index) => (\n    <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>\n  ))\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one, or maps over data and\n// wraps the result, would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap((child) => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return flatten(child.props.children)\n    }\n    return [child]\n  })\n}\n\n// The key `Children.toArray` put on each element, or the entry's position for\n// anything that is not one.\nfunction keyOf(section: ReactNode, index: number) {\n  return isValidElement(section) && section.key !== null\n    ? section.key\n    : String(index)\n}\n\nexport { DisclosureGroup }\nexport type { DisclosureGroupProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAA2B,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAAhB,wBAAAC,UAAAC,qBAAAE,SAAAa,IAAAZ,cAAAC,YAAAC,kBAAAG,KAAAC,OAAAC,WAAAE;CAIvB,MAAAV,UAAAa,OAAAC,KAAAA,IAAA,OAAAD;CAAc,IAAAE;CAAA,IAAAJ,EAAA,OAAAf,0BAAAe,EAAA,OAAAb,uBAAAa,EAAA,OAAAV,gBAAAU,EAAA,OAAAT,cAAAS,EAAA,OAAAR,kBAAA;EAQwBY,KAAA;GAAAnB;GAAAE;GAAAG;GAAAC;GAAAC;EAMtC;EAACQ,EAAA,KAAAf;EAAAe,EAAA,KAAAb;EAAAa,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAND,MAAAK,QAAcxB,wBAAwBuB,EAMrC;CAAC,IAAAE;CAAA,IAAAN,EAAA,OAAAd,YAAAc,EAAA,OAAAX,SAAA;EAKKiB,KAAAjB,UAAUkB,gBAAgBrB,QAAmB,IAA7CA;EAA8Cc,EAAA,KAAAd;EAAAc,EAAA,KAAAX;EAAAW,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAL,OAAAK,EAAA,QAAAJ,SAAAI,EAAA,QAAAM,MAAAN,EAAA,QAAAH,QAAA;EADjDW,KAAA,oBAAC,MAAD;GAAWb;GAAYC;GAAeC;GACnCS,UAAAA;EADE,CAAA;EAEEN,EAAA,KAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAM;EAAAN,EAAA,MAAAH;EAAAG,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAK,SAAAL,EAAA,QAAAQ,IAAA;EAHTC,KAAA,oBAAC,6BAAD;GAAoCJ,OAAAA;GAClCG,UAAAA;EAD0B,CAAA;EAIER,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAJ9BS;AAI8B;AAKlC,SAASF,gBAAgBrB,UAAqB;CAC5C,OAAOwB,QAAQxB,QAAQ,CAAC,CAACyB,KAAKC,SAASC,UACrC,qBAAC,UAAD,EAAA,UAAA,CACGA,UAAU,IAAI,OAAO,oBAAC,WAAD,CAAU,CAAA,GAC/BD,OACO,EAAA,GAHKE,MAAMF,SAASC,KAAK,CAGzB,CACX;AACH;AAOA,SAASH,QAAQxB,UAAkC;CACjD,OAAOT,SAASsC,QAAQ7B,QAAQ,CAAC,CAAC8B,SAASC,UAAU;EACnD,IACEtC,eAAyCsC,KAAK,KAC9CA,MAAMC,SAASxC,UAEf,OAAOgC,QAAQO,MAAME,MAAMjC,QAAQ;EAErC,OAAO,CAAC+B,KAAK;CACf,CAAC;AACH;AAIA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,OAAOlC,eAAeiC,OAAO,KAAKA,QAAQQ,QAAQ,OAC9CR,QAAQQ,MACRC,OAAOR,KAAK;AAClB"}

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,113 @@
+import { PickedFile } from "../../files/index.js";
+import { DragTypes, DropEnterEvent, DropEvent, DropExitEvent, DropOperation } from "../../drop/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/drop-zone/index.d.ts
+type DropZoneProps = {
+  /**
+   * Names the target without drawing anything, for a page that already says
+   * what it takes. Beats `label` as the name.
+   */
+  readonly 'aria-label'?: string;
+  /** What the target holds beside its label, such as a FileTrigger. */
+  readonly children?: ReactNode;
+  /**
+   * What a drop of these types would do, from the operations the drag
+   * allows: `cancel` refuses it. A pick on iOS and Android allows `copy`
+   * alone. Left out, the first the drag allows.
+   */
+  readonly getDropOperation?: (types: DragTypes, allowedOperations: readonly DropOperation[]) => DropOperation;
+  /**
+   * Takes nothing: no drop, and on iOS and Android no press, drawn faded.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * What the target says it is for, drawn inside it and used as its name. A
+   * string rather than a node, since it is what names the target; anything
+   * richer goes in `children`.
+   */
+  readonly label?: string;
+  /**
+   * Called with what landed: what was dropped under React Native Web, what
+   * was picked on iOS and Android.
+   */
+  readonly onDrop?: (event: DropEvent) => void;
+  /** Called once something the target takes comes over it. Under React Native Web alone. */
+  readonly onDropEnter?: (event: DropEnterEvent) => void;
+  /** Called once what came over it leaves, or lands. Under React Native Web alone. */
+  readonly onDropExit?: (event: DropExitEvent) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type FileTriggerProps = {
+  /** The MIME types the chooser offers, such as `image/png` or `image/*`. Every type when left out. */
+  readonly acceptedFileTypes?: readonly string[];
+  /** Whether more than one file can be picked. @default false */
+  readonly allowsMultiple?: boolean;
+  /** The Button, IconButton, Fab or Chip that opens the chooser. */
+  readonly children?: ReactNode;
+  /**
+   * Opens the camera rather than the chooser, facing away from the person
+   * for `environment` or towards them for `user`, as web's `capture` does.
+   * It takes one photo, or a video where `acceptedFileTypes` names a video
+   * type.
+   */
+  readonly defaultCamera?: 'environment' | 'user';
+  /** Called with what was picked. Not called when the person backs out. */
+  readonly onSelect?: (files: readonly PickedFile[]) => void;
+};
+/**
+ * A place to drop files. Under React Native Web it takes HTML5 drag and drop,
+ * as kanso-ui's does; on iOS and Android, which hand an app no drag from
+ * another, pressing it opens the file chooser, and `onDrop` is handed what
+ * was picked. Either way `onDrop` is handed the items, which
+ * `isFileDropItem` and `isTextDropItem` pick apart.
+ *
+ * ```tsx
+ * <DropZone label="Drop here" onDrop={handleDrop}>
+ *   <FileTrigger onSelect={handleSelect}>
+ *     <Button variant="outlined">Label</Button>
+ *   </FileTrigger>
+ * </DropZone>
+ * ```
+ *
+ * It is drawn from the outlined card, with a dashed rule rather than a solid
+ * one, and fills with the primary container while something is over it.
+ * `label` both draws the words and names the target; `aria-label` names it
+ * without drawing anything.
+ *
+ * The chooser is expo-document-picker's, which an app installs alongside the
+ * library. Without it a press writes to the console that the package is
+ * missing, and nothing opens.
+ *
+ * `style`, `ref` and `testID` land on the target itself, which is what a
+ * layout places.
+ */
+declare function DropZone({ 'aria-label': ariaLabel, children, getDropOperation, isDisabled, label, onDrop, onDropEnter, onDropExit, ref, style, testID }: DropZoneProps): import("react").JSX.Element;
+/**
+ * Opens the file chooser from the button it wraps, and hands `onSelect`
+ * what was picked.
+ *
+ * ```tsx
+ * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>
+ *   <Button>Label</Button>
+ * </FileTrigger>
+ * ```
+ *
+ * It renders nothing of its own, so it takes no `style`: what is seen is the
+ * Button, IconButton, Fab or Chip it wraps, which opens the chooser after its
+ * own `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`
+ * opens the camera instead. kanso-ui's `acceptDirectory` is not here, since
+ * neither iOS's chooser nor Android's picks a folder.
+ *
+ * The chooser is expo-document-picker's and the camera expo-image-picker's,
+ * which an app installs alongside the library, the second only for
+ * `defaultCamera`. Without the one it needs, a press writes to the console
+ * which package is missing, and nothing opens.
+ */
+declare function FileTrigger({ acceptedFileTypes, allowsMultiple, children, defaultCamera, onSelect }: FileTriggerProps): import("react").JSX.Element;
+//#endregion
+export { DropZone, type DropZoneProps, FileTrigger, type FileTriggerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.js

@@ -0,0 +1,304 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { refsOf } from "../../ref/index.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { fileItemOf, isDropTarget, operationOf, typesOf, watchDrops } from "../../drop/index.js";
+import { pickThen, preparePicker } from "../../files/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/drop-zone/index.tsx
+const MIN_HEIGHT = 160;
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => {
+	const disabled = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	return StyleSheet.create({
+		label: {
+			color: colors.onSurfaceVariant,
+			textAlign: "center"
+		},
+		labelBox: { pointerEvents: "none" },
+		labelDisabled: { color: disabled },
+		labelOver: { color: colors.onPrimaryContainer },
+		press: { borderRadius: radii.md },
+		ring: { outlineOffset: -1 },
+		root: {
+			alignItems: "center",
+			backgroundColor: colors.surface,
+			borderColor: colors.outlineVariant,
+			borderRadius: radii.md,
+			borderStyle: "dashed",
+			borderWidth: 1,
+			boxSizing: "border-box",
+			gap: spacing.md,
+			justifyContent: "center",
+			minHeight: MIN_HEIGHT,
+			padding: spacing.xl
+		},
+		rootDisabled: { borderColor: disabled },
+		rootOver: {
+			backgroundColor: colors.primaryContainer,
+			borderColor: colors.primary,
+			borderStyle: "solid"
+		}
+	});
+});
+/**
+* A place to drop files. Under React Native Web it takes HTML5 drag and drop,
+* as kanso-ui's does; on iOS and Android, which hand an app no drag from
+* another, pressing it opens the file chooser, and `onDrop` is handed what
+* was picked. Either way `onDrop` is handed the items, which
+* `isFileDropItem` and `isTextDropItem` pick apart.
+*
+* ```tsx
+* <DropZone label="Drop here" onDrop={handleDrop}>
+*   <FileTrigger onSelect={handleSelect}>
+*     <Button variant="outlined">Label</Button>
+*   </FileTrigger>
+* </DropZone>
+* ```
+*
+* It is drawn from the outlined card, with a dashed rule rather than a solid
+* one, and fills with the primary container while something is over it.
+* `label` both draws the words and names the target; `aria-label` names it
+* without drawing anything.
+*
+* The chooser is expo-document-picker's, which an app installs alongside the
+* library. Without it a press writes to the console that the package is
+* missing, and nothing opens.
+*
+* `style`, `ref` and `testID` land on the target itself, which is what a
+* layout places.
+*/
+function DropZone(t0) {
+	const $ = c(30);
+	const { "aria-label": ariaLabel, children, getDropOperation, isDisabled: t1, label, onDrop, onDropEnter, onDropExit, ref, style, testID } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const { colors, radii } = theme;
+	const styles = stylesOf(theme);
+	const bodyMedium = useTypeRole("bodyMedium");
+	const [isOver, setOver] = useState(false);
+	const node = useRef(null);
+	const web = Platform.OS === "web";
+	let t2;
+	if ($[0] !== radii.md) {
+		t2 = { borderRadius: radii.md };
+		$[0] = radii.md;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== colors.onSurface || $[3] !== isDisabled || $[4] !== t2) {
+		t3 = {
+			color: colors.onSurface,
+			corners: t2,
+			disabled: isDisabled
+		};
+		$[2] = colors.onSurface;
+		$[3] = isDisabled;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const feedback = usePressFeedback(t3);
+	let t4;
+	if ($[6] !== getDropOperation || $[7] !== onDrop || $[8] !== onDropEnter || $[9] !== onDropExit) {
+		t4 = () => ({
+			getDropOperation,
+			onDrop,
+			onDropEnter,
+			onDropExit
+		});
+		$[6] = getDropOperation;
+		$[7] = onDrop;
+		$[8] = onDropEnter;
+		$[9] = onDropExit;
+		$[10] = t4;
+	} else t4 = $[10];
+	const handlersNow = useEffectEvent(t4);
+	let t5;
+	if ($[11] !== isDisabled) {
+		t5 = () => isDisabled;
+		$[11] = isDisabled;
+		$[12] = t5;
+	} else t5 = $[12];
+	const disabledNow = useEffectEvent(t5);
+	const name = ariaLabel ?? label;
+	const over = isOver && !isDisabled;
+	let t6;
+	if ($[13] !== disabledNow || $[14] !== handlersNow) {
+		t6 = () => {
+			if (!web) {
+				preparePicker({});
+				return;
+			}
+			const target = node.current;
+			if (!isDropTarget(target)) return;
+			return watchDrops(target, () => handlersNow(), () => disabledNow(), setOver);
+		};
+		$[13] = disabledNow;
+		$[14] = handlersNow;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = [web];
+		$[16] = t7;
+	} else t7 = $[16];
+	useEffect(t6, t7);
+	const T0 = View;
+	const t8 = web && isDisabled ? true : void 0;
+	const t9 = web ? name : void 0;
+	let t10;
+	if ($[17] !== ref) {
+		t10 = refsOf(ref, node);
+		$[17] = ref;
+		$[18] = t10;
+	} else t10 = $[18];
+	const t11 = web && name !== void 0 ? "group" : void 0;
+	const t12 = composeStyles(styles.root, over ? styles.rootOver : void 0, isDisabled ? styles.rootDisabled : void 0, style);
+	const t13 = web ? null : /* @__PURE__ */ jsx(Pressable, {
+		...feedback.handlers,
+		"aria-label": name,
+		disabled: isDisabled,
+		onPress: pressOf(getDropOperation, onDrop),
+		role: "button",
+		style: composeStyles(StyleSheet.absoluteFill, styles.press, feedback.ring, feedback.ring === void 0 ? void 0 : styles.ring),
+		children: feedback.layer
+	});
+	const t14 = label === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		"aria-hidden": true,
+		style: styles.labelBox,
+		children: /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(bodyMedium, styles.label, over ? styles.labelOver : void 0, isDisabled ? styles.labelDisabled : void 0),
+			children: label
+		})
+	});
+	let t15;
+	if ($[19] !== T0 || $[20] !== children || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13 || $[25] !== t14 || $[26] !== t8 || $[27] !== t9 || $[28] !== testID) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
+			"aria-disabled": t8,
+			"aria-label": t9,
+			ref: t10,
+			role: t11,
+			style: t12,
+			testID,
+			children: [
+				t13,
+				t14,
+				children
+			]
+		});
+		$[19] = T0;
+		$[20] = children;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t13;
+		$[25] = t14;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = testID;
+		$[29] = t15;
+	} else t15 = $[29];
+	return t15;
+}
+/**
+* Opens the file chooser from the button it wraps, and hands `onSelect`
+* what was picked.
+*
+* ```tsx
+* <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>
+*   <Button>Label</Button>
+* </FileTrigger>
+* ```
+*
+* It renders nothing of its own, so it takes no `style`: what is seen is the
+* Button, IconButton, Fab or Chip it wraps, which opens the chooser after its
+* own `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`
+* opens the camera instead. kanso-ui's `acceptDirectory` is not here, since
+* neither iOS's chooser nor Android's picks a folder.
+*
+* The chooser is expo-document-picker's and the camera expo-image-picker's,
+* which an app installs alongside the library, the second only for
+* `defaultCamera`. Without the one it needs, a press writes to the console
+* which package is missing, and nothing opens.
+*/
+function FileTrigger(t0) {
+	const $ = c(13);
+	const { acceptedFileTypes, allowsMultiple, children, defaultCamera, onSelect } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== defaultCamera) {
+		t1 = () => {
+			preparePicker({ defaultCamera });
+		};
+		t2 = [defaultCamera];
+		$[0] = defaultCamera;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== acceptedFileTypes || $[4] !== allowsMultiple || $[5] !== defaultCamera || $[6] !== onSelect) {
+		t3 = () => {
+			pickThen({
+				acceptedFileTypes,
+				allowsMultiple,
+				defaultCamera
+			}, (files) => {
+				onSelect?.(files);
+			});
+		};
+		$[3] = acceptedFileTypes;
+		$[4] = allowsMultiple;
+		$[5] = defaultCamera;
+		$[6] = onSelect;
+		$[7] = t3;
+	} else t3 = $[7];
+	const pick = t3;
+	let t4;
+	if ($[8] !== pick) {
+		t4 = slotsOf(pick);
+		$[8] = pick;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== children || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: t4,
+			children
+		});
+		$[10] = children;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+function pressOf(getDropOperation, onDrop) {
+	return (event) => {
+		const { locationX: x, locationY: y } = event.nativeEvent;
+		pickThen({ allowsMultiple: true }, (files) => {
+			const dropOperation = operationOf({ getDropOperation }, typesOf(files.map((file) => file.type)), ["copy"]);
+			if (dropOperation !== "cancel") onDrop?.({
+				dropOperation,
+				items: files.map(fileItemOf),
+				type: "drop",
+				x,
+				y
+			});
+		});
+	};
+}
+function slotsOf(pick) {
+	return { default: pick };
+}
+//#endregion
+export { DropZone, FileTrigger };
+
+//# sourceMappingURL=index.js.map