@webority/mobile-support 0.0.13 → 0.1.0

package/lib/module/components/Attachments.js

@@ -1,240 +1 @@
-"use strict";
-
-import { AppIcon, IconButton, Spinner, Text, toast, useTheme, ZoomableImage } from '@webority/mobile-ui';
-import { useEffect, useMemo, useState } from 'react';
-import { Image, Modal, Pressable, StyleSheet, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { formatBytes, isImage } from "../format.js";
-import { useAttachmentLoader, useAttachmentOpener } from "../SupportProvider.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AttachmentThumb = ({
-  attachment,
-  onOpen
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const load = useAttachmentLoader();
-  const [state, setState] = useState({
-    status: 'loading'
-  });
-  useEffect(() => {
-    let cancelled = false;
-    load(attachment).then(uri => !cancelled && setState({
-      status: 'ready',
-      uri
-    }), () => !cancelled && setState({
-      status: 'error'
-    }));
-    return () => {
-      cancelled = true;
-    };
-  }, [load, attachment]);
-  if (state.status === 'loading') {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.thumb,
-      testID: `support-attachment-${attachment.id}`,
-      children: /*#__PURE__*/_jsx(Spinner, {
-        size: "sm",
-        accessibilityLabel: `Loading ${attachment.fileName}`
-      })
-    });
-  }
-  if (state.status === 'error') {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.thumb,
-      accessible: true,
-      accessibilityLabel: `${attachment.fileName} could not be loaded`,
-      testID: `support-attachment-${attachment.id}`,
-      children: /*#__PURE__*/_jsx(Text, {
-        variant: "caption",
-        color: "tertiary",
-        align: "center",
-        children: "Could not load"
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(Pressable, {
-    onPress: () => onOpen(state.uri, attachment.fileName),
-    accessibilityRole: "imagebutton",
-    accessibilityLabel: `Open ${attachment.fileName}`,
-    testID: `support-attachment-${attachment.id}`,
-    children: /*#__PURE__*/_jsx(Image, {
-      source: {
-        uri: state.uri
-      },
-      style: styles.thumb,
-      resizeMode: "cover"
-    })
-  });
-};
-
-/**
- * A file that is not an image. Tappable when the app gave SupportProvider an
- * `openFile`: it is downloaded through the signed-in client, then handed to the OS.
- */
-const FileRow = ({
-  attachment
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const open = useAttachmentOpener();
-  const [opening, setOpening] = useState(false);
-  const label = `${attachment.fileName}, ${formatBytes(attachment.sizeBytes)}`;
-  if (!open) {
-    return /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "secondary",
-      testID: `support-file-${attachment.id}`,
-      children: label
-    });
-  }
-  const onPress = async () => {
-    setOpening(true);
-    try {
-      await open(attachment);
-    } catch {
-      toast.error(`Could not open ${attachment.fileName}. Try again.`);
-    } finally {
-      setOpening(false);
-    }
-  };
-  return /*#__PURE__*/_jsxs(Pressable, {
-    onPress: () => void onPress(),
-    disabled: opening,
-    accessibilityRole: "button",
-    accessibilityLabel: `Open ${attachment.fileName}`,
-    accessibilityState: {
-      busy: opening,
-      disabled: opening
-    },
-    style: styles.fileRow,
-    testID: `support-file-${attachment.id}`,
-    children: [/*#__PURE__*/_jsx(AppIcon, {
-      name: "document",
-      size: 16,
-      color: theme.colors.text.link
-    }), /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "link",
-      children: label
-    }), opening && /*#__PURE__*/_jsx(Spinner, {
-      size: "sm",
-      accessibilityLabel: `Opening ${attachment.fileName}`
-    })]
-  });
-};
-
-/** A message's files: images as tappable thumbnails, anything else as a file row. */
-export const AttachmentList = ({
-  attachments,
-  onOpenImage
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  if (attachments.length === 0) {
-    return null;
-  }
-  const images = attachments.filter(a => isImage(a.contentType));
-  const others = attachments.filter(a => !isImage(a.contentType));
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.list,
-    children: [images.length > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.thumbRow,
-      children: images.map(a => /*#__PURE__*/_jsx(AttachmentThumb, {
-        attachment: a,
-        onOpen: onOpenImage
-      }, a.id))
-    }), others.map(a => /*#__PURE__*/_jsx(FileRow, {
-      attachment: a
-    }, a.id))]
-  });
-};
-
-/** Full-screen view of one image with pinch to zoom. */
-export const ImageViewer = ({
-  image,
-  onClose
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  return /*#__PURE__*/_jsx(Modal, {
-    visible: image !== null,
-    onRequestClose: onClose,
-    animationType: "fade",
-    transparent: false,
-    children: /*#__PURE__*/_jsxs(GestureHandlerRootView, {
-      style: styles.viewer,
-      testID: "support-image-viewer",
-      children: [image && /*#__PURE__*/_jsx(ZoomableImage, {
-        accessibilityLabel: image.name,
-        style: styles.viewerImageWrap,
-        children: /*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: image.uri
-          },
-          style: styles.viewerImage,
-          resizeMode: "contain"
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.viewerClose,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          icon: ({
-            color,
-            size
-          }) => /*#__PURE__*/_jsx(AppIcon, {
-            name: "close-circle",
-            color: color,
-            size: size
-          }),
-          accessibilityLabel: "Close image",
-          onPress: onClose,
-          variant: "glass"
-        })
-      })]
-    })
-  });
-};
-const THUMB = 84;
-const buildStyles = theme => StyleSheet.create({
-  list: {
-    gap: theme.spacing.xs,
-    marginTop: theme.spacing.sm
-  },
-  fileRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing.xxs,
-    alignSelf: 'flex-start'
-  },
-  thumbRow: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.spacing.xs
-  },
-  thumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.colors.background.secondary,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  viewer: {
-    flex: 1,
-    backgroundColor: theme.colors.background.inverse
-  },
-  viewerImageWrap: {
-    flex: 1
-  },
-  viewerImage: {
-    flex: 1,
-    width: '100%'
-  },
-  viewerClose: {
-    position: 'absolute',
-    top: theme.spacing['2xl'],
-    right: theme.spacing.md
-  }
-});
-//# sourceMappingURL=Attachments.js.map
+import{AppIcon as e,IconButton as t,Spinner as i,Text as r,ToastHost as a,toast as s,useTheme as o,ZoomableImage as n}from"@webority/mobile-ui";import{useEffect as l,useMemo as c,useState as m}from"react";import{Image as p,Modal as d,Pressable as u,StyleSheet as b,View as g}from"react-native";import{GestureHandlerRootView as h}from"react-native-gesture-handler";import{formatBytes as f,isImage as y}from"../format.js";import{useAttachmentLoader as w,useAttachmentOpener as v}from"../SupportProvider.js";import{jsx as x,jsxs as I}from"react/jsx-runtime";const AttachmentThumb=({attachment:e,onOpen:t})=>{const a=o(),s=c(()=>buildStyles(a),[a]),n=w(),[d,b]=m({status:"loading"});return l(()=>{let t=!1;return n(e).then(e=>!t&&b({status:"ready",uri:e}),()=>!t&&b({status:"error"})),()=>{t=!0}},[n,e]),"loading"===d.status?x(g,{style:s.thumb,testID:`support-attachment-${e.id}`,children:x(i,{size:"sm",accessibilityLabel:`Loading ${e.fileName}`})}):"error"===d.status?x(g,{style:s.thumb,accessible:!0,accessibilityLabel:`${e.fileName} could not be loaded`,testID:`support-attachment-${e.id}`,children:x(r,{variant:"caption",color:"tertiary",align:"center",children:"Could not load"})}):x(u,{onPress:()=>t(d.uri,e.fileName),accessibilityRole:"imagebutton",accessibilityLabel:`Open ${e.fileName}`,testID:`support-attachment-${e.id}`,children:x(p,{source:{uri:d.uri},style:s.thumb,resizeMode:"cover"})})},FileRow=({attachment:t})=>{const a=o(),n=c(()=>buildStyles(a),[a]),l=v(),[p,d]=m(!1),b=`${t.fileName}, ${f(t.sizeBytes)}`;if(!l)return x(r,{variant:"caption",color:"secondary",testID:`support-file-${t.id}`,children:b});return I(u,{onPress:()=>{(async()=>{d(!0);try{await l(t)}catch{s.error(`Could not open ${t.fileName}. Try again.`)}finally{d(!1)}})()},disabled:p,accessibilityRole:"button",accessibilityLabel:`Open ${t.fileName}`,accessibilityState:{busy:p,disabled:p},style:n.fileRow,testID:`support-file-${t.id}`,children:[x(e,{name:"document",size:16,color:a.colors.text.link}),x(r,{variant:"caption",color:"link",children:b}),p&&x(i,{size:"sm",accessibilityLabel:`Opening ${t.fileName}`})]})};export const AttachmentList=({attachments:e,onOpenImage:t})=>{const i=o(),r=c(()=>buildStyles(i),[i]);if(0===e.length)return null;const a=e.filter(e=>y(e.contentType)),s=e.filter(e=>!y(e.contentType));return I(g,{style:r.list,children:[a.length>0&&x(g,{style:r.thumbRow,children:a.map(e=>x(AttachmentThumb,{attachment:e,onOpen:t},e.id))}),s.map(e=>x(FileRow,{attachment:e},e.id))]})};export const ImageViewer=({image:i,onClose:r})=>{const s=o(),l=c(()=>buildStyles(s),[s]);return x(d,{visible:null!==i,onRequestClose:r,animationType:"fade",transparent:!1,children:I(h,{style:l.viewer,testID:"support-image-viewer",children:[i&&x(n,{accessibilityLabel:i.name,style:l.viewerImageWrap,children:x(p,{source:{uri:i.uri},style:l.viewerImage,resizeMode:"contain"})}),x(g,{style:l.viewerClose,children:x(t,{icon:({color:t,size:i})=>x(e,{name:"close-circle",color:t,size:i}),accessibilityLabel:"Close image",onPress:r,variant:"glass"})}),x(a,{})]})})};const buildStyles=e=>b.create({list:{gap:e.spacing.xs,marginTop:e.spacing.sm},fileRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.xxs,alignSelf:"flex-start"},thumbRow:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},thumb:{width:84,height:84,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary,alignItems:"center",justifyContent:"center",overflow:"hidden"},viewer:{flex:1,backgroundColor:e.colors.background.inverse},viewerImageWrap:{flex:1},viewerImage:{flex:1,width:"100%"},viewerClose:{position:"absolute",top:e.spacing["2xl"],right:e.spacing.md}});

package/lib/module/components/NewSupportTicket.js

@@ -1,205 +1 @@
-"use strict";
-
-import { Button, Input, Select, Spinner, Text, useForm, useTheme } from '@webority/mobile-ui';
-import { useMemo, useState } from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
-import { toSupportApiError } from "../client.js";
-import { useCreateSupportTicket, useSupportConfig } from "../SupportProvider.js";
-import { validateBody, validateCategory, validateFiles, validateSubject } from "../validation.js";
-import { PhotoTray } from "./PhotoTray.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const TicketForm = ({
-  config,
-  styles,
-  onCreated,
-  onCancel,
-  initialDraft
-}) => {
-  const createTicket = useCreateSupportTicket();
-  const [photos, setPhotos] = useState([]);
-  const [screenshots, setScreenshots] = useState(initialDraft?.screenshots ?? []);
-  const [filesError, setFilesError] = useState(null);
-  const [submitError, setSubmitError] = useState(null);
-  const form = useForm({
-    initialValues: {
-      category: initialDraft?.category ?? '',
-      subject: initialDraft?.subject ?? '',
-      body: initialDraft?.body ?? ''
-    },
-    validate: {
-      category: v => validateCategory(v, config),
-      subject: v => validateSubject(v, config),
-      body: v => validateBody(v, config)
-    },
-    onSubmit: async values => {
-      const fileProblem = validateFiles([...screenshots, ...photos], config);
-      setFilesError(fileProblem ?? null);
-      if (fileProblem) {
-        return;
-      }
-      setSubmitError(null);
-      try {
-        const created = await createTicket({
-          category: values.category,
-          subject: values.subject.trim(),
-          body: values.body.trim(),
-          pageUrl: initialDraft?.pageUrl,
-          userAgent: initialDraft?.userAgent,
-          appVersion: initialDraft?.appVersion,
-          files: photos,
-          screenshots
-        });
-        onCreated(created);
-      } catch (e) {
-        setSubmitError(toSupportApiError(e).message);
-      }
-    }
-  });
-  const category = form.getFieldProps('category');
-  const subject = form.getFieldProps('subject');
-  const body = form.getFieldProps('body');
-  const attached = screenshots.length + photos.length;
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    contentContainerStyle: styles.content,
-    keyboardShouldPersistTaps: "handled",
-    children: [/*#__PURE__*/_jsx(Text, {
-      variant: "bodySmall",
-      color: "secondary",
-      children: "Tell us what you need. We reply by email and in this ticket."
-    }), /*#__PURE__*/_jsx(Select, {
-      label: "Category",
-      placeholder: "Choose a category",
-      required: true,
-      options: config.categories.map(c => ({
-        label: c,
-        value: c
-      })),
-      value: category.value || undefined,
-      onChange: v => category.setValue(String(v), true),
-      error: category.error,
-      testID: "support-new-category"
-    }), /*#__PURE__*/_jsx(Input, {
-      label: "Subject",
-      placeholder: "A short summary",
-      required: true,
-      maxLength: config.subjectMaxLength,
-      value: subject.value,
-      onChangeText: subject.onChangeText,
-      onBlur: subject.onBlur,
-      error: subject.error,
-      testID: "support-new-subject"
-    }), /*#__PURE__*/_jsx(Input, {
-      label: "Message",
-      placeholder: "What happened, and what did you expect?",
-      required: true,
-      multiline: true,
-      maxLength: config.bodyMaxLength,
-      value: body.value,
-      onChangeText: body.onChangeText,
-      onBlur: body.onBlur,
-      error: body.error,
-      testID: "support-new-body"
-    }), screenshots.length > 0 && /*#__PURE__*/_jsx(PhotoTray, {
-      label: "Screenshot",
-      photos: screenshots,
-      onChange: setScreenshots,
-      remaining: 0,
-      allowAdd: false,
-      maxBytes: config.maxAttachmentBytes,
-      disabled: form.isSubmitting
-    }), /*#__PURE__*/_jsx(PhotoTray, {
-      label: "Photos",
-      photos: photos,
-      onChange: setPhotos,
-      remaining: config.maxAttachmentsPerMessage - attached,
-      maxBytes: config.maxAttachmentBytes,
-      disabled: form.isSubmitting
-    }), /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "tertiary",
-      children: `Attach up to ${config.maxAttachmentsPerMessage} files.`
-    }), (filesError || submitError) && /*#__PURE__*/_jsx(Text, {
-      variant: "bodySmall",
-      color: "error",
-      accessibilityLiveRegion: "polite",
-      children: filesError ?? submitError
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.actions,
-      children: [onCancel && /*#__PURE__*/_jsx(Button, {
-        title: "Cancel",
-        variant: "ghost",
-        tone: "neutral",
-        onPress: onCancel,
-        disabled: form.isSubmitting
-      }), /*#__PURE__*/_jsx(Button, {
-        title: "Send ticket",
-        loading: form.isSubmitting,
-        disabled: form.isSubmitting,
-        onPress: form.submit,
-        testID: "support-new-submit"
-      })]
-    })]
-  });
-};
-export const NewSupportTicket = props => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const {
-    config,
-    loading,
-    error,
-    reload
-  } = useSupportConfig();
-  const testID = props.testID ?? 'support-new-ticket';
-  if (!config) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.center,
-      testID: testID,
-      children: loading ? /*#__PURE__*/_jsx(Spinner, {
-        accessibilityLabel: "Loading"
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Text, {
-          variant: "body",
-          color: "error",
-          align: "center",
-          children: error?.message ?? 'Support is not available right now.'
-        }), /*#__PURE__*/_jsx(Button, {
-          title: "Try again",
-          variant: "ghost",
-          onPress: () => void reload()
-        })]
-      })
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.root,
-    testID: testID,
-    children: /*#__PURE__*/_jsx(TicketForm, {
-      ...props,
-      config: config,
-      styles: styles
-    })
-  });
-};
-const buildStyles = theme => StyleSheet.create({
-  root: {
-    flex: 1
-  },
-  content: {
-    padding: theme.spacing.md,
-    gap: theme.spacing.md
-  },
-  center: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.spacing.xl,
-    gap: theme.spacing.sm
-  },
-  actions: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    gap: theme.spacing.sm
-  }
-});
-//# sourceMappingURL=NewSupportTicket.js.map
+import{Button as e,Input as t,Select as r,Spinner as o,Text as a,useForm as n,useTheme as i}from"@webority/mobile-ui";import{useMemo as s,useState as l}from"react";import{ScrollView as c,StyleSheet as g,View as d}from"react-native";import{toSupportApiError as u}from"../client.js";import{useCreateSupportTicket as p,useSupportConfig as m}from"../SupportProvider.js";import{validateBody as h,validateCategory as y,validateFiles as b,validateSubject as x}from"../validation.js";import{PhotoTray as f}from"./PhotoTray.js";import{jsx as v,jsxs as j,Fragment as S}from"react/jsx-runtime";const TicketForm=({config:o,styles:i,onCreated:s,onCancel:g,initialDraft:m})=>{const S=p(),[C,w]=l([]),[P,A]=l(m?.screenshots??[]),[D,T]=l(null),[B,I]=l(null),L=n({initialValues:{category:m?.category??"",subject:m?.subject??"",body:m?.body??""},validate:{category:e=>y(e,o),subject:e=>x(e,o),body:e=>h(e,o)},onSubmit:async e=>{const t=b([...P,...C],o);if(T(t??null),!t){I(null);try{const t=await S({category:e.category,subject:e.subject.trim(),body:e.body.trim(),pageUrl:m?.pageUrl,userAgent:m?.userAgent,appVersion:m?.appVersion,files:C,screenshots:P});s(t)}catch(e){I(u(e).message)}}}}),k=L.getFieldProps("category"),M=L.getFieldProps("subject"),F=L.getFieldProps("body"),V=P.length+C.length;return j(c,{contentContainerStyle:i.content,keyboardShouldPersistTaps:"handled",children:[v(a,{variant:"bodySmall",color:"secondary",children:"Tell us what you need. We reply by email and in this ticket."}),v(r,{label:"Category",placeholder:"Choose a category",required:!0,options:o.categories.map(e=>({label:e,value:e})),value:k.value||void 0,onChange:e=>k.setValue(String(e),!0),error:k.error,testID:"support-new-category"}),v(t,{label:"Subject",placeholder:"A short summary",required:!0,maxLength:o.subjectMaxLength,value:M.value,onChangeText:M.onChangeText,onBlur:M.onBlur,error:M.error,testID:"support-new-subject"}),v(t,{label:"Message",placeholder:"What happened, and what did you expect?",required:!0,multiline:!0,maxLength:o.bodyMaxLength,value:F.value,onChangeText:F.onChangeText,onBlur:F.onBlur,error:F.error,testID:"support-new-body"}),P.length>0&&v(f,{label:"Screenshot",photos:P,onChange:A,remaining:0,allowAdd:!1,maxBytes:o.maxAttachmentBytes,disabled:L.isSubmitting}),v(f,{label:"Photos",photos:C,onChange:w,remaining:o.maxAttachmentsPerMessage-V,maxBytes:o.maxAttachmentBytes,disabled:L.isSubmitting}),v(a,{variant:"caption",color:"tertiary",children:`Attach up to ${o.maxAttachmentsPerMessage} files.`}),(D||B)&&v(a,{variant:"bodySmall",color:"error",accessibilityLiveRegion:"polite",children:D??B}),j(d,{style:i.actions,children:[g&&v(e,{title:"Cancel",variant:"ghost",tone:"neutral",onPress:g,disabled:L.isSubmitting}),v(e,{title:"Send ticket",loading:L.isSubmitting,disabled:L.isSubmitting,onPress:L.submit,testID:"support-new-submit"})]})]})};export const NewSupportTicket=t=>{const r=i(),n=s(()=>buildStyles(r),[r]),{config:l,loading:c,error:g,reload:u}=m(),p=t.testID??"support-new-ticket";return v(d,l?{style:n.root,testID:p,children:v(TicketForm,{...t,config:l,styles:n})}:{style:n.center,testID:p,children:c?v(o,{accessibilityLabel:"Loading"}):j(S,{children:[v(a,{variant:"body",color:"error",align:"center",children:g?.message??"Support is not available right now."}),v(e,{title:"Try again",variant:"ghost",onPress:()=>{u()}})]})})};const buildStyles=e=>g.create({root:{flex:1},content:{padding:e.spacing.md,gap:e.spacing.md},center:{flex:1,alignItems:"center",justifyContent:"center",padding:e.spacing.xl,gap:e.spacing.sm},actions:{flexDirection:"row",justifyContent:"flex-end",gap:e.spacing.sm}});

package/lib/module/components/PhotoTray.js

@@ -1,136 +1 @@
-"use strict";
-
-import { AppIcon, Button, IconButton, Text, useTheme } from '@webority/mobile-ui';
-import { useMemo, useState } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
-import { pickPhotos } from "../photos.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Photos on a message: thumbnails with remove buttons, plus library and camera buttons. */
-export const PhotoTray = ({
-  photos,
-  onChange,
-  remaining,
-  maxBytes,
-  disabled,
-  label,
-  allowAdd = true
-}) => {
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [picking, setPicking] = useState(null);
-  const [error, setError] = useState(null);
-  const add = async source => {
-    setError(null);
-    setPicking(source);
-    try {
-      const picked = await pickPhotos(source, {
-        maxCount: remaining,
-        maxBytes
-      });
-      if (picked.length > 0) {
-        onChange([...photos, ...picked]);
-      }
-    } catch (e) {
-      setError(e instanceof Error && e.name === 'PhotoPermissionError' ? e.message : 'That photo could not be added. Try another one.');
-    } finally {
-      setPicking(null);
-    }
-  };
-  const full = remaining <= 0;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [label ? /*#__PURE__*/_jsx(Text, {
-      variant: "label",
-      color: "secondary",
-      children: label
-    }) : null, photos.length > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.row,
-      children: photos.map((photo, index) => /*#__PURE__*/_jsxs(View, {
-        style: styles.item,
-        children: [/*#__PURE__*/_jsx(Image, {
-          source: {
-            uri: photo.uri
-          },
-          style: styles.thumb,
-          accessibilityLabel: photo.name
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.remove,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            size: "sm",
-            variant: "glass",
-            icon: ({
-              color,
-              size
-            }) => /*#__PURE__*/_jsx(AppIcon, {
-              name: "trash",
-              color: color,
-              size: size
-            }),
-            accessibilityLabel: `Remove ${photo.name}`,
-            disabled: disabled,
-            onPress: () => onChange(photos.filter((_, i) => i !== index))
-          })
-        })]
-      }, `${photo.uri}-${index}`))
-    }), allowAdd && /*#__PURE__*/_jsxs(View, {
-      style: styles.actions,
-      children: [/*#__PURE__*/_jsx(Button, {
-        size: "sm",
-        variant: "outline",
-        tone: "neutral",
-        leftIcon: "gallery",
-        title: "Add photo",
-        accessibilityLabel: "Add a photo from your library",
-        loading: picking === 'library',
-        disabled: disabled || full || picking !== null,
-        onPress: () => void add('library')
-      }), /*#__PURE__*/_jsx(Button, {
-        size: "sm",
-        variant: "outline",
-        tone: "neutral",
-        leftIcon: "camera",
-        title: "Take photo",
-        accessibilityLabel: "Take a photo with your camera",
-        loading: picking === 'camera',
-        disabled: disabled || full || picking !== null,
-        onPress: () => void add('camera')
-      })]
-    }), error ? /*#__PURE__*/_jsx(Text, {
-      variant: "caption",
-      color: "error",
-      accessibilityLiveRegion: "polite",
-      children: error
-    }) : null]
-  });
-};
-const THUMB = 72;
-const buildStyles = theme => StyleSheet.create({
-  root: {
-    gap: theme.spacing.xs
-  },
-  row: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: theme.spacing.xs
-  },
-  item: {
-    width: THUMB,
-    height: THUMB
-  },
-  thumb: {
-    width: THUMB,
-    height: THUMB,
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.colors.background.secondary
-  },
-  remove: {
-    position: 'absolute',
-    top: theme.spacing.xxs,
-    right: theme.spacing.xxs
-  },
-  actions: {
-    flexDirection: 'row',
-    gap: theme.spacing.sm
-  }
-});
-//# sourceMappingURL=PhotoTray.js.map
+import{AppIcon as e,Button as o,IconButton as r,Text as a,useTheme as i}from"@webority/mobile-ui";import{useMemo as t,useState as l}from"react";import{Image as s,StyleSheet as n,View as c}from"react-native";import{pickPhotos as m}from"../photos.js";import{jsx as d,jsxs as h}from"react/jsx-runtime";export const PhotoTray=({photos:n,onChange:u,remaining:p,maxBytes:b,disabled:y,label:g,allowAdd:x=!0})=>{const f=i(),w=t(()=>buildStyles(f),[f]),[v,P]=l(null),[z,L]=l(null),add=async e=>{L(null),P(e);try{const o=await m(e,{maxCount:p,maxBytes:b});o.length>0&&u([...n,...o])}catch(e){L(e instanceof Error&&"PhotoPermissionError"===e.name?e.message:"That photo could not be added. Try another one.")}finally{P(null)}},T=p<=0;return h(c,{style:w.root,children:[g?d(a,{variant:"label",color:"secondary",children:g}):null,n.length>0&&d(c,{style:w.row,children:n.map((o,a)=>h(c,{style:w.item,children:[d(s,{source:{uri:o.uri},style:w.thumb,accessibilityLabel:o.name}),d(c,{style:w.remove,children:d(r,{size:"sm",variant:"glass",icon:({color:o,size:r})=>d(e,{name:"trash",color:o,size:r}),accessibilityLabel:`Remove ${o.name}`,disabled:y,onPress:()=>u(n.filter((e,o)=>o!==a))})})]},`${o.uri}-${a}`))}),x&&h(c,{style:w.actions,children:[d(o,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"gallery",title:"Add photo",accessibilityLabel:"Add a photo from your library",loading:"library"===v,disabled:y||T||null!==v,onPress:()=>{add("library")}}),d(o,{size:"sm",variant:"outline",tone:"neutral",leftIcon:"camera",title:"Take photo",accessibilityLabel:"Take a photo with your camera",loading:"camera"===v,disabled:y||T||null!==v,onPress:()=>{add("camera")}})]}),z?d(a,{variant:"caption",color:"error",accessibilityLiveRegion:"polite",children:z}):null]})};const buildStyles=e=>n.create({root:{gap:e.spacing.xs},row:{flexDirection:"row",flexWrap:"wrap",gap:e.spacing.xs},item:{width:72,height:72},thumb:{width:72,height:72,borderRadius:e.radius.sm,backgroundColor:e.colors.background.secondary},remove:{position:"absolute",top:e.spacing.xxs,right:e.spacing.xxs},actions:{flexDirection:"row",gap:e.spacing.sm}});