stream-chat-react-native-core 9.12.1 → 9.13.0

package/lib/module/a2ui/components/basicComponents.js

@@ -0,0 +1,975 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.A2UI_BASIC_COMPONENTS = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _DateTimeInput = require("./DateTimeInput");
+var _iconPaths = require("./iconPaths");
+var _Media = require("./Media");
+var _contexts = require("../../ai-components/contexts");
+var _AIUIHelpers = require("../../ai-components/generative-ui/AIUIHelpers");
+var _tokens = require("../../ai-components/internal/tokens");
+var _markdown = require("../../ai-components/markdown");
+var _A2UIContexts = require("../A2UIContexts");
+var _A2UISurface = require("../A2UISurface");
+var _useReplyState7 = require("../useReplyState");
+var _jsxRuntime = require("react/jsx-runtime");
+var _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/a2ui/components/basicComponents.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var A2UILabelContext = (0, _react.createContext)(undefined);
+var textOf = value => typeof value === 'string' ? value : value === undefined || value === null ? '' : String(value);
+var stringsOf = value => Array.isArray(value) ? value.filter(item => typeof item === 'string') : [];
+var errorsOf = ({
+  isValid,
+  validationErrors
+}) => isValid === false ? stringsOf(validationErrors) : [];
+var setterOf = (props, key) => {
+  var setter = props[`set${key.charAt(0).toUpperCase()}${key.slice(1)}`];
+  return typeof setter === 'function' ? setter : undefined;
+};
+var useA2UITheme = () => {
+  var _useTheme$theme$a2ui;
+  return (_useTheme$theme$a2ui = (0, _contexts.useTheme)().theme.a2ui) != null ? _useTheme$theme$a2ui : {};
+};
+var usePalette = () => {
+  var _useTheme = (0, _contexts.useTheme)(),
+    _useTheme$theme = _useTheme.theme,
+    a2ui = _useTheme$theme.a2ui,
+    colors = _useTheme$theme.colors;
+  var own = a2ui == null ? void 0 : a2ui.colors;
+  return (0, _react.useMemo)(() => ({
+    accent: colors.accent_blue,
+    border: colors.grey_gainsboro,
+    error: colors.accent_red,
+    onAccent: colors.white,
+    secondaryText: colors.grey,
+    subtleSurface: colors.white_smoke,
+    surface: colors.white,
+    text: colors.black,
+    ...own
+  }), [colors, own]);
+};
+var tint = (color, alpha) => /^#[0-9a-f]{6}$/i.test(color) ? `${color}${Math.round(alpha * 255).toString(16).padStart(2, '0')}` : color;
+var Problems = ({
+  errors
+}) => {
+  var palette = usePalette();
+  return errors.length ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
+    accessibilityRole: "alert",
+    style: [styles.problems, {
+      color: palette.error
+    }],
+    children: errors.join(' ')
+  }) : null;
+};
+var HEADINGS = {
+  h1: {
+    fontSize: 28,
+    fontWeight: '700',
+    lineHeight: 34
+  },
+  h2: {
+    fontSize: 22,
+    fontWeight: '700',
+    lineHeight: 28
+  },
+  h3: {
+    fontSize: 20,
+    fontWeight: '600',
+    lineHeight: 25
+  },
+  h4: {
+    fontSize: _tokens.primitives.typographyFontSizeLg,
+    fontWeight: '700',
+    lineHeight: 23
+  },
+  h5: {
+    fontSize: _tokens.primitives.typographyFontSizeMd,
+    fontWeight: '600',
+    lineHeight: 21
+  }
+};
+var Text = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var engine = (0, _react.useContext)(_A2UIContexts.A2UIEngineContext);
+  var label = (0, _react.useContext)(A2UILabelContext);
+  var palette = usePalette();
+  var text = textOf(props.text);
+  var variant = textOf(props.variant);
+  if (label) return (0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: label,
+    children: text
+  });
+  if (HEADINGS[variant]) {
+    return (0, _jsxRuntime.jsx)(_reactNative.Text, {
+      accessibilityRole: "header",
+      style: [HEADINGS[variant], {
+        color: palette.text
+      }],
+      children: text
+    });
+  }
+  if (variant === 'caption') {
+    return (0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.caption, {
+        color: palette.secondaryText
+      }, theme.caption],
+      children: text
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_markdown.Markdown, {
+    onLink: url => engine == null ? void 0 : engine.host.open(url),
+    children: text
+  });
+};
+var IMAGE_SIZES = {
+  avatar: {
+    borderRadius: 24,
+    height: 48,
+    width: 48
+  },
+  header: {
+    height: 200,
+    width: '100%'
+  },
+  icon: {
+    height: 24,
+    width: 24
+  },
+  largeFeature: {
+    height: 240,
+    width: '100%'
+  },
+  mediumFeature: {
+    height: 160,
+    width: '100%'
+  },
+  smallFeature: {
+    height: 72,
+    width: 72
+  }
+};
+var RESIZE_MODES = {
+  contain: 'contain',
+  cover: 'cover',
+  fill: 'stretch',
+  none: 'center',
+  scaleDown: 'contain'
+};
+var useMediaSource = value => {
+  var _useContext;
+  return (_useContext = (0, _react.useContext)(_A2UIContexts.A2UIEngineContext)) == null ? void 0 : _useContext.mediaSource(value);
+};
+var ImageComponent = ({
+  props
+}) => {
+  var _IMAGE_SIZES$textOf, _RESIZE_MODES$textOf;
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var url = useMediaSource(props.url);
+  if (!url) return null;
+  var size = (_IMAGE_SIZES$textOf = IMAGE_SIZES[textOf(props.variant)]) != null ? _IMAGE_SIZES$textOf : IMAGE_SIZES.mediumFeature;
+  var description = textOf(props.description);
+  return (0, _jsxRuntime.jsx)(_reactNative.Image, {
+    accessibilityIgnoresInvertColors: true,
+    accessibilityLabel: description || undefined,
+    accessible: !!description,
+    resizeMode: (_RESIZE_MODES$textOf = RESIZE_MODES[textOf(props.fit)]) != null ? _RESIZE_MODES$textOf : 'cover',
+    source: {
+      uri: url
+    },
+    style: [styles.image, {
+      backgroundColor: palette.subtleSurface
+    }, size, theme.image]
+  });
+};
+var MIRRORED_ICONS = new Set(['arrowBack', 'arrowForward', 'help', 'send', 'volumeUp']);
+var SVG_PATH = /^[MmLlHhVvCcSsQqTtAaZz0-9.,\s+-]+$/;
+var ICON_SIZE = 24;
+var Icon = ({
+  props
+}) => {
+  var _ref;
+  var engine = (0, _react.useContext)(_A2UIContexts.A2UIEngineContext);
+  var palette = usePalette();
+  var name = props.name;
+  var AppIcon = typeof name === 'string' ? engine == null ? void 0 : engine.icons[name] : undefined;
+  if (AppIcon) return (0, _jsxRuntime.jsx)(AppIcon, {
+    color: palette.text,
+    size: ICON_SIZE
+  });
+  var drawn = (0, _AIUIHelpers.isRecord)(name) && typeof name.svgPath === 'string' && SVG_PATH.test(name.svgPath) ? name.svgPath : undefined;
+  var d = (_ref = drawn != null ? drawn : typeof name === 'string' ? _iconPaths.A2UI_ICON_PATHS[name] : undefined) != null ? _ref : _iconPaths.A2UI_ICON_PATHS.help;
+  var mirrored = _reactNative.I18nManager.isRTL && typeof name === 'string' && MIRRORED_ICONS.has(name);
+  return (0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+    accessibilityElementsHidden: true,
+    height: ICON_SIZE,
+    importantForAccessibility: "no-hide-descendants",
+    viewBox: "0 0 24 24",
+    width: ICON_SIZE,
+    children: (0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+      d: d,
+      fill: palette.text,
+      transform: mirrored ? 'matrix(-1 0 0 1 24 0)' : undefined
+    })
+  });
+};
+var Video = ({
+  props
+}) => {
+  var palette = usePalette();
+  var url = useMediaSource(props.url);
+  var poster = useMediaSource(props.posterUrl);
+  if (!url) return null;
+  return (0, _jsxRuntime.jsx)(_Media.VideoView, {
+    palette: palette,
+    posterUrl: poster,
+    url: url
+  });
+};
+var AudioPlayer = ({
+  props
+}) => {
+  var palette = usePalette();
+  var url = useMediaSource(props.url);
+  if (!url) return null;
+  return (0, _jsxRuntime.jsx)(_Media.AudioView, {
+    description: textOf(props.description) || undefined,
+    palette: palette,
+    url: url
+  });
+};
+var JUSTIFY = {
+  center: 'center',
+  end: 'flex-end',
+  spaceAround: 'space-around',
+  spaceBetween: 'space-between',
+  spaceEvenly: 'space-evenly',
+  start: 'flex-start',
+  stretch: 'flex-start'
+};
+var ALIGN = {
+  center: 'center',
+  end: 'flex-end',
+  start: 'flex-start',
+  stretch: 'stretch'
+};
+var Flex = ({
+  direction,
+  props
+}) => {
+  var _ALIGN$textOf, _JUSTIFY$textOf;
+  return (0, _jsxRuntime.jsx)(_A2UISurface.A2UIAxisContext.Provider, {
+    value: direction,
+    children: (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.flex, {
+        alignItems: (_ALIGN$textOf = ALIGN[textOf(props.align)]) != null ? _ALIGN$textOf : direction === 'row' ? 'center' : 'stretch',
+        flexDirection: direction,
+        justifyContent: (_JUSTIFY$textOf = JUSTIFY[textOf(props.justify)]) != null ? _JUSTIFY$textOf : 'flex-start'
+      }],
+      children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChildren, {
+        nodes: props.children
+      })
+    })
+  });
+};
+var Row = props => (0, _jsxRuntime.jsx)(Flex, {
+  ...props,
+  direction: "row"
+});
+var Column = props => (0, _jsxRuntime.jsx)(Flex, {
+  ...props,
+  direction: "column"
+});
+var List = ({
+  props
+}) => {
+  var _ALIGN$textOf2;
+  var horizontal = textOf(props.direction) === 'horizontal';
+  var align = (_ALIGN$textOf2 = ALIGN[textOf(props.align)]) != null ? _ALIGN$textOf2 : 'stretch';
+  if (!horizontal) {
+    return (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.flex, {
+        alignItems: align
+      }],
+      children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChildren, {
+        nodes: props.children
+      })
+    });
+  }
+  return (0, _jsxRuntime.jsx)(_A2UISurface.A2UIAxisContext.Provider, {
+    value: "row",
+    children: (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      contentContainerStyle: [styles.flex, styles.row, {
+        alignItems: align
+      }],
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChildren, {
+        nodes: props.children
+      })
+    })
+  });
+};
+var Card = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  return (0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.card, {
+      backgroundColor: palette.subtleSurface
+    }, theme.card],
+    children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChild, {
+      node: props.child
+    })
+  });
+};
+var Tabs = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var tabs = Array.isArray(props.tabs) ? props.tabs.filter(_AIUIHelpers.isRecord) : [];
+  var _useReplyState = (0, _useReplyState7.useReplyState)(0),
+    _useReplyState2 = (0, _slicedToArray2.default)(_useReplyState, 2),
+    selected = _useReplyState2[0],
+    setSelected = _useReplyState2[1];
+  var current = tabs[Math.min(selected, tabs.length - 1)];
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.flex,
+    children: [(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      accessibilityRole: "tablist",
+      contentContainerStyle: styles.tabs,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: tabs.map((tab, index) => {
+        var isSelected = tab === current;
+        return (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "tab",
+          accessibilityState: {
+            selected: isSelected
+          },
+          onPress: () => setSelected(index),
+          style: [styles.capsule, {
+            backgroundColor: isSelected ? tint(palette.accent, 0.15) : 'transparent'
+          }, theme.tab],
+          children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.capsuleText, {
+              color: isSelected ? palette.accent : palette.secondaryText
+            }, theme.tabText],
+            children: textOf(tab.title)
+          })
+        }, index);
+      })
+    }), current ? (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChild, {
+      node: current.child
+    }) : null]
+  });
+};
+var Modal = ({
+  props
+}) => {
+  var _useAITranslation = (0, _contexts.useAITranslation)(),
+    t = _useAITranslation.t;
+  var palette = usePalette();
+  var _useReplyState3 = (0, _useReplyState7.useReplyState)(false),
+    _useReplyState4 = (0, _slicedToArray2.default)(_useReplyState3, 2),
+    open = _useReplyState4[0],
+    setOpen = _useReplyState4[1];
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      onPress: () => setOpen(true),
+      children: (0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChild, {
+          node: props.trigger
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      animationType: "slide",
+      onRequestClose: () => setOpen(false),
+      presentationStyle: "pageSheet",
+      visible: open,
+      children: (0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.sheet, {
+          backgroundColor: palette.surface
+        }],
+        children: [(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: "button",
+          hitSlop: 12,
+          onPress: () => setOpen(false),
+          style: styles.sheetClose,
+          children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.buttonText, {
+              color: palette.accent
+            }],
+            children: t('Close')
+          })
+        }), (0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          contentContainerStyle: styles.flex,
+          children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChild, {
+            node: props.content
+          })
+        })]
+      })
+    })]
+  });
+};
+var Divider = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var vertical = textOf(props.axis) === 'vertical';
+  return (0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [vertical ? styles.dividerVertical : styles.divider, {
+      backgroundColor: palette.border
+    }, theme.divider]
+  });
+};
+var isBorderlessButton = (context, id) => {
+  if (typeof id !== 'string') return false;
+  var component = context.surfaceComponents.get(id);
+  return (component == null ? void 0 : component.type) === 'Button' && component.properties.variant === 'borderless';
+};
+var followUpPlaceOf = context => {
+  if (!context) return undefined;
+  var id = context.componentModel.id;
+  for (var _iterator = _createForOfIteratorHelperLoose(context.surfaceComponents.values), _step; !(_step = _iterator()).done;) {
+    var parent = _step.value;
+    var children = parent.properties.children;
+    if (parent.type !== 'Column' || !Array.isArray(children)) continue;
+    var index = children.indexOf(id);
+    if (index < 0) continue;
+    return index > 0 && isBorderlessButton(context, children[index - 1]) ? 'after' : 'first';
+  }
+  return undefined;
+};
+var Button = ({
+  node,
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var variant = textOf(props.variant);
+  var errors = errorsOf(props);
+  var disabled = props.isValid === false;
+  var action = typeof props.action === 'function' ? props.action : undefined;
+  var look = variant === 'primary' ? {
+    container: {
+      backgroundColor: palette.accent
+    },
+    text: {
+      color: palette.onAccent
+    }
+  } : variant === 'borderless' ? {
+    container: styles.borderless,
+    text: {
+      color: palette.accent
+    }
+  } : {
+    container: {
+      backgroundColor: palette.subtleSurface
+    },
+    text: {
+      color: palette.text
+    }
+  };
+  var label = (0, _react.useMemo)(() => ({
+    ...styles.buttonText,
+    ...look.text,
+    ...theme.buttonText
+  }), [look.text, theme.buttonText]);
+  var followUp = variant === 'borderless' ? followUpPlaceOf(node.context) : undefined;
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.field, followUp && styles.followUp, followUp === 'after' && [styles.followUpAfter, {
+      borderTopColor: palette.border
+    }]],
+    children: [(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled
+      },
+      disabled: disabled || !action,
+      onPress: () => void (action == null ? void 0 : action()),
+      style: ({
+        pressed
+      }) => [styles.button, look.container, followUp && styles.followUpButton, theme.button, {
+        opacity: disabled ? 0.5 : pressed ? 0.7 : 1
+      }],
+      children: (0, _jsxRuntime.jsx)(A2UILabelContext.Provider, {
+        value: label,
+        children: (0, _jsxRuntime.jsx)(_A2UISurface.A2UIChild, {
+          node: props.child
+        })
+      })
+    }), (0, _jsxRuntime.jsx)(Problems, {
+      errors: errors
+    })]
+  });
+};
+var FieldLabel = ({
+  text
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  return text ? (0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [styles.label, {
+      color: palette.secondaryText
+    }, theme.label],
+    children: text
+  }) : null;
+};
+var TextField = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var variant = textOf(props.variant);
+  var setValue = setterOf(props, 'value');
+  var errors = errorsOf(props);
+  var label = textOf(props.label);
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.field,
+    children: [(0, _jsxRuntime.jsx)(FieldLabel, {
+      text: label
+    }), (0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      accessibilityLabel: label || undefined,
+      editable: !!setValue,
+      keyboardType: variant === 'number' ? 'decimal-pad' : 'default',
+      multiline: variant === 'longText',
+      onChangeText: text => setValue == null ? void 0 : setValue(text),
+      placeholder: textOf(props.placeholder) || undefined,
+      placeholderTextColor: palette.secondaryText,
+      secureTextEntry: variant === 'obscured',
+      style: [styles.input, variant === 'longText' && styles.longText, {
+        backgroundColor: palette.surface,
+        borderColor: errors.length ? palette.error : palette.border,
+        color: palette.text
+      }, theme.input],
+      value: textOf(props.value)
+    }), (0, _jsxRuntime.jsx)(Problems, {
+      errors: errors
+    })]
+  });
+};
+var Mark = ({
+  checked,
+  round
+}) => {
+  var palette = usePalette();
+  return (0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.mark, round && styles.markRound, {
+      backgroundColor: checked ? palette.accent : palette.surface,
+      borderColor: checked ? palette.accent : palette.border
+    }],
+    children: checked ? (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.markDot, {
+        backgroundColor: palette.onAccent
+      }]
+    }) : null
+  });
+};
+var CheckBox = ({
+  props
+}) => {
+  var palette = usePalette();
+  var checked = props.value === true;
+  var setValue = setterOf(props, 'value');
+  var errors = errorsOf(props);
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.field,
+    children: [(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+      accessibilityRole: "checkbox",
+      accessibilityState: {
+        checked,
+        disabled: !setValue
+      },
+      disabled: !setValue,
+      onPress: () => setValue == null ? void 0 : setValue(!checked),
+      style: styles.choice,
+      children: [(0, _jsxRuntime.jsx)(Mark, {
+        checked: checked
+      }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.choiceText, {
+          color: palette.text
+        }],
+        children: textOf(props.label)
+      })]
+    }), (0, _jsxRuntime.jsx)(Problems, {
+      errors: errors
+    })]
+  });
+};
+var ChoicePicker = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var _useAITranslation2 = (0, _contexts.useAITranslation)(),
+    t = _useAITranslation2.t;
+  var palette = usePalette();
+  var _useReplyState5 = (0, _useReplyState7.useReplyState)(''),
+    _useReplyState6 = (0, _slicedToArray2.default)(_useReplyState5, 2),
+    filter = _useReplyState6[0],
+    setFilter = _useReplyState6[1];
+  var single = textOf(props.variant) !== 'multipleSelection';
+  var chips = textOf(props.displayStyle) === 'chips';
+  var chosen = stringsOf(props.value);
+  var setValue = setterOf(props, 'value');
+  var options = (Array.isArray(props.options) ? props.options.filter(_AIUIHelpers.isRecord) : []).map(option => ({
+    label: textOf(option.label),
+    value: textOf(option.value)
+  })).filter(({
+    label
+  }) => !filter || label.toLowerCase().includes(filter.toLowerCase()));
+  var toggle = value => {
+    if (!setValue) return;
+    if (single) setValue(chosen.includes(value) ? [] : [value]);else setValue(chosen.includes(value) ? chosen.filter(item => item !== value) : [...chosen, value]);
+  };
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.field,
+    children: [(0, _jsxRuntime.jsx)(FieldLabel, {
+      text: textOf(props.label)
+    }), props.filterable === true ? (0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+      onChangeText: setFilter,
+      placeholder: t('Search'),
+      placeholderTextColor: palette.secondaryText,
+      style: [styles.input, {
+        backgroundColor: palette.surface,
+        borderColor: palette.border,
+        color: palette.text
+      }, theme.input],
+      value: filter
+    }) : null, (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: chips ? styles.chips : styles.flex,
+      children: options.map(({
+        label,
+        value
+      }) => {
+        var isChosen = chosen.includes(value);
+        return chips ? (0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+          accessibilityRole: single ? 'radio' : 'checkbox',
+          accessibilityState: {
+            checked: isChosen
+          },
+          onPress: () => toggle(value),
+          style: [styles.capsule, styles.chip, {
+            backgroundColor: isChosen ? tint(palette.accent, 0.18) : palette.surface,
+            borderColor: isChosen ? palette.accent : palette.border
+          }, theme.chip],
+          children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.capsuleText, {
+              color: isChosen ? palette.accent : palette.text
+            }, theme.chipText],
+            children: label
+          })
+        }, value) : (0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+          accessibilityRole: single ? 'radio' : 'checkbox',
+          accessibilityState: {
+            checked: isChosen
+          },
+          onPress: () => toggle(value),
+          style: styles.choice,
+          children: [(0, _jsxRuntime.jsx)(Mark, {
+            checked: isChosen,
+            round: single
+          }), (0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.choiceText, {
+              color: palette.text
+            }],
+            children: label
+          })]
+        }, value);
+      })
+    }), (0, _jsxRuntime.jsx)(Problems, {
+      errors: errorsOf(props)
+    })]
+  });
+};
+var Slider = ({
+  props
+}) => {
+  var palette = usePalette();
+  var min = typeof props.min === 'number' ? props.min : 0;
+  var max = typeof props.max === 'number' && props.max > min ? props.max : min + 100;
+  var steps = typeof props.steps === 'number' && props.steps > 0 ? props.steps : undefined;
+  var value = Math.min(Math.max(typeof props.value === 'number' ? props.value : min, min), max);
+  var setValue = setterOf(props, 'value');
+  var width = (0, _react.useRef)(0);
+  var set = (0, _react.useRef)(setValue);
+  set.current = setValue;
+  var valueAt = x => {
+    var share = width.current > 0 ? Math.min(Math.max(x / width.current, 0), 1) : 0;
+    var raw = min + share * (max - min);
+    if (!steps) return raw;
+    var step = (max - min) / steps;
+    return min + Math.round((raw - min) / step) * step;
+  };
+  var valueAtRef = (0, _react.useRef)(valueAt);
+  valueAtRef.current = valueAt;
+  var responder = (0, _react.useMemo)(() => _reactNative.PanResponder.create({
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: ({
+      nativeEvent
+    }) => set.current == null ? void 0 : set.current(valueAtRef.current(nativeEvent.locationX)),
+    onPanResponderMove: ({
+      nativeEvent
+    }) => set.current == null ? void 0 : set.current(valueAtRef.current(nativeEvent.locationX)),
+    onPanResponderTerminationRequest: () => false,
+    onStartShouldSetPanResponder: () => true
+  }), []);
+  var share = `${(value - min) / (max - min) * 100}%`;
+  var step = steps ? (max - min) / steps : (max - min) / 10;
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.field,
+    children: [(0, _jsxRuntime.jsx)(FieldLabel, {
+      text: textOf(props.label)
+    }), (0, _jsxRuntime.jsxs)(_reactNative.View, {
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      accessibilityRole: "adjustable",
+      accessibilityValue: {
+        max,
+        min,
+        now: value
+      },
+      onAccessibilityAction: ({
+        nativeEvent
+      }) => setValue == null ? void 0 : setValue(Math.min(Math.max(value + (nativeEvent.actionName === 'increment' ? step : -step), min), max)),
+      onLayout: ({
+        nativeEvent
+      }) => {
+        width.current = nativeEvent.layout.width;
+      },
+      style: styles.slider,
+      ...responder.panHandlers,
+      children: [(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.track, {
+          backgroundColor: palette.border
+        }],
+        children: (0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [styles.trackFill, {
+            backgroundColor: palette.accent,
+            width: share
+          }]
+        })
+      }), (0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: [styles.thumb, {
+          backgroundColor: palette.surface,
+          borderColor: palette.accent,
+          left: share
+        }]
+      })]
+    })]
+  });
+};
+var DateTimeInput = ({
+  props
+}) => {
+  var theme = useA2UITheme();
+  var palette = usePalette();
+  var errors = errorsOf(props);
+  var label = textOf(props.label);
+  var enableTime = props.enableTime === true;
+  var enableDate = props.enableDate === true || !enableTime;
+  return (0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.field,
+    children: [(0, _jsxRuntime.jsx)(FieldLabel, {
+      text: label
+    }), (0, _jsxRuntime.jsx)(_DateTimeInput.DateTimeInputView, {
+      enableDate: enableDate,
+      enableTime: enableTime,
+      hasError: errors.length > 0,
+      inputStyle: theme.input,
+      label: label || undefined,
+      max: typeof props.max === 'string' ? props.max : undefined,
+      min: typeof props.min === 'string' ? props.min : undefined,
+      onChange: setterOf(props, 'value'),
+      palette: palette,
+      value: textOf(props.value)
+    }), (0, _jsxRuntime.jsx)(Problems, {
+      errors: errors
+    })]
+  });
+};
+var A2UI_BASIC_COMPONENTS = exports.A2UI_BASIC_COMPONENTS = {
+  AudioPlayer,
+  Button,
+  Card,
+  CheckBox,
+  ChoicePicker,
+  Column,
+  DateTimeInput,
+  Divider,
+  Icon,
+  Image: ImageComponent,
+  List,
+  Modal,
+  Row,
+  Slider,
+  Tabs,
+  Text,
+  TextField,
+  Video
+};
+var styles = _reactNative.StyleSheet.create({
+  borderless: {
+    paddingHorizontal: 0
+  },
+  followUp: {
+    alignSelf: 'stretch'
+  },
+  followUpAfter: {
+    borderTopWidth: _reactNative.StyleSheet.hairlineWidth
+  },
+  followUpButton: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch'
+  },
+  button: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: 10,
+    paddingHorizontal: _tokens.primitives.spacingMd,
+    paddingVertical: 10
+  },
+  buttonText: {
+    fontSize: _tokens.primitives.typographyFontSizeMd,
+    fontWeight: '600'
+  },
+  capsule: {
+    borderRadius: 9999,
+    paddingHorizontal: _tokens.primitives.spacingSm,
+    paddingVertical: _tokens.primitives.spacingXs
+  },
+  capsuleText: {
+    fontSize: _tokens.primitives.typographyFontSizeSm,
+    fontWeight: '600'
+  },
+  caption: {
+    fontSize: _tokens.primitives.typographyFontSizeXs
+  },
+  card: {
+    borderRadius: _tokens.primitives.radiusLg,
+    padding: _tokens.primitives.spacingSm
+  },
+  chip: {
+    borderWidth: 1
+  },
+  chips: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: _tokens.primitives.spacingXs
+  },
+  choice: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    gap: _tokens.primitives.spacingXs,
+    paddingVertical: 6
+  },
+  choiceText: {
+    flexShrink: 1,
+    fontSize: _tokens.primitives.typographyFontSizeMd
+  },
+  divider: {
+    alignSelf: 'stretch',
+    height: _reactNative.StyleSheet.hairlineWidth
+  },
+  dividerVertical: {
+    alignSelf: 'stretch',
+    width: _reactNative.StyleSheet.hairlineWidth
+  },
+  field: {
+    gap: _tokens.primitives.spacingXxs
+  },
+  flex: {
+    gap: _tokens.primitives.spacingXs
+  },
+  image: {
+    borderRadius: _tokens.primitives.radiusMd
+  },
+  input: {
+    borderRadius: _tokens.primitives.radiusMd,
+    borderWidth: 1,
+    fontSize: _tokens.primitives.typographyFontSizeMd,
+    paddingHorizontal: 10,
+    paddingVertical: 10
+  },
+  label: {
+    fontSize: _tokens.primitives.typographyFontSizeSm
+  },
+  longText: {
+    minHeight: 80,
+    textAlignVertical: 'top'
+  },
+  mark: {
+    alignItems: 'center',
+    borderRadius: 4,
+    borderWidth: 1.5,
+    height: 20,
+    justifyContent: 'center',
+    width: 20
+  },
+  markDot: {
+    borderRadius: 4,
+    height: 8,
+    width: 8
+  },
+  markRound: {
+    borderRadius: 10
+  },
+  problems: {
+    fontSize: _tokens.primitives.typographyFontSizeXs
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  sheet: {
+    flex: 1,
+    padding: _tokens.primitives.spacingMd
+  },
+  sheetClose: {
+    alignSelf: 'flex-end',
+    paddingVertical: _tokens.primitives.spacingXs
+  },
+  slider: {
+    height: 32,
+    justifyContent: 'center'
+  },
+  tabs: {
+    gap: _tokens.primitives.spacingXs,
+    paddingBottom: _tokens.primitives.spacingXs
+  },
+  thumb: {
+    borderRadius: 11,
+    borderWidth: 2,
+    height: 22,
+    marginLeft: -11,
+    position: 'absolute',
+    width: 22
+  },
+  track: {
+    borderRadius: 2,
+    height: 4,
+    overflow: 'hidden'
+  },
+  trackFill: {
+    height: 4
+  }
+});
+//# sourceMappingURL=basicComponents.js.map