@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/ProfilePicker/ProfilePicker.js

@@ -1,526 +1 @@
-"use strict";
-
-/**
- * ProfilePicker — a round profile photo with a camera badge at its
- * bottom-right; tapping it picks a new photo. The mobile counterpart of
- * webority-ui's AppLogoPicker.
- *
- * Native picking stays in the app, exactly as in FilePicker: `sources` are
- * the same `FilePickerSource` adapters (`pick(): Promise<PickedFileInput[]>`),
- * so the library adds no dependency. One source launches straight away;
- * several open the shared OptionSheet. Removing the photo is a row in that
- * same sheet, not a control drawn over the photo, so a removable photo opens
- * the sheet even with a single source. With no source and nothing to remove
- * the photo is display-only: no badge, and a tap does nothing. A freshly
- * picked photo previews at
- * once (optimistic) while the app uploads it and reflects the result back
- * through `value`.
- */
-import React, { forwardRef, useCallback, useMemo, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { blendOf } from "../../utils/color.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { AppIcon } from "../AppIcon/index.js";
-import { Avatar, avatarToneColors } from "../Avatar/index.js";
-import { FieldLabel, FieldMessage } from "../FieldBase/index.js";
-import { matchesAccept } from "../FilePicker/FilePicker.js";
-import { OptionSheet } from "../OptionSheet/OptionSheet.js";
-import { Spinner } from "../Spinner/index.js";
-
-/**
- * `stacked`: the photo alone, hint below. `inline`: a profile row, photo on
- * the left with title / subtitle / hint beside it. `profile`: the same
- * identity block centred beneath the photo.
- */
-
-/** Theme colour of the camera badge; the same set StatusBadge and Chip use. */
-
-/**
- * Look of the camera badge. `solid`: the tone fills it, the icon in the
- * tone's ink. `soft`: a light tint of the tone, the icon in the tone. `outline`:
- * the page colour with a ring and icon in the tone. StatusBadge's three names.
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DEFAULT_LABELS = {
-  pick: 'Change profile photo',
-  remove: 'Remove photo',
-  sheetTitle: 'Change photo',
-  errorTooLarge: maxSizeMB => `The photo is larger than ${maxSizeMB} MB.`,
-  errorWrongType: 'That file is not a supported image.'
-};
-const DEFAULT_ACCEPT = ['image/*'];
-
-/** Glyph size of the remove row's bin, in step with a source's own icon. */
-const SHEET_ICON_SIZE = 20;
-
-/** Strength of the tone in a soft badge's fill; StatusBadge's soft tint. */
-const SOFT_FILL_OPACITY = 0.14;
-
-// Presets are named diameters; everything else scales from the resolved px.
-const SIZE_PX = {
-  sm: 72,
-  md: 120,
-  lg: 160
-};
-const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
-
-/** The badge's fill, its ring and the icon on it. */
-
-/** The badge's tone colour and the ink drawn on its solid fill. Mirrors StatusBadge. */
-const toneFor = (theme, tone) => {
-  switch (tone) {
-    case 'success':
-      return {
-        base: theme.colors.success,
-        on: theme.colors.onSuccess
-      };
-    case 'warning':
-      return {
-        base: theme.colors.warning,
-        on: theme.colors.onWarning
-      };
-    case 'error':
-      return {
-        base: theme.colors.error,
-        on: theme.colors.onError
-      };
-    case 'info':
-      return {
-        base: theme.colors.info,
-        on: theme.colors.onInfo
-      };
-    case 'neutral':
-      // No tone to fill with: the secondary text tier, which stays legible on
-      // the page colour ring, with the inverse ink on it.
-      return {
-        base: theme.colors.text.secondary,
-        on: theme.colors.text.inverse
-      };
-    default:
-      return {
-        base: theme.colors.primary,
-        on: theme.colors.onPrimary
-      };
-  }
-};
-
-/**
- * The badge sits on a photo, so no variant is see-through: soft blends its
- * tint over the page colour rather than laying a translucent tint on the
- * photo, and outline fills with the page colour instead of nothing. The ring
- * is the page colour on solid and soft, separating the badge from the photo,
- * and the tone itself on outline.
- */
-const badgeLookFor = (theme, tone, variant, tokens) => {
-  const palette = toneFor(theme, tone);
-  const base = tokens?.badgeColor ?? palette.base;
-  const page = theme.colors.background.primary;
-  const neutral = tone === 'neutral' && tokens?.badgeColor === undefined;
-  let look;
-  switch (variant) {
-    case 'soft':
-      look = {
-        fill: neutral ? theme.colors.background.tertiary : blendOf(base, SOFT_FILL_OPACITY, page, theme.colors.background.secondary),
-        ring: page,
-        icon: base
-      };
-      break;
-    case 'outline':
-      look = {
-        fill: page,
-        ring: neutral ? theme.colors.border.primary : base,
-        icon: base
-      };
-      break;
-    default:
-      look = {
-        fill: base,
-        ring: page,
-        icon: palette.on
-      };
-  }
-  return tokens?.badgeIconColor ? {
-    ...look,
-    icon: tokens.badgeIconColor
-  } : look;
-};
-const resolveRadius = (shape, px) => shape === 'circle' ? px / 2 : shape === 'rounded' ? Math.max(6, Math.round(px * 0.22)) : 0;
-
-/** One row of the sheet: a source, or the remove action listed after them. */
-
-// The remove row's value, shaped so no app-supplied source key collides with it.
-const REMOVE_VALUE = '__profile-picker-remove__';
-const ProfilePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value,
-    name,
-    sources,
-    onPick,
-    onRemove,
-    loading = false,
-    disabled = false,
-    accept = DEFAULT_ACCEPT,
-    maxSizeMB,
-    size = 'md',
-    shape = 'circle',
-    badgeIcon = 'camera',
-    tone: toneProp,
-    variant: variantProp,
-    avatarTone: avatarToneProp,
-    avatarBackgroundColor,
-    avatarColor,
-    label,
-    required = false,
-    helperText,
-    error,
-    layout = 'stacked',
-    title,
-    subtitle,
-    ImageComponent,
-    labels: labelsProp,
-    haptic,
-    onError,
-    accessibilityLabel,
-    style,
-    testID
-  } = props;
-  const theme = useTheme();
-  const tokens = theme.components.profilePicker;
-  const tone = toneProp ?? tokens?.defaultTone ?? 'primary';
-  const variant = variantProp ?? tokens?.defaultVariant ?? 'solid';
-  const badge = useMemo(() => badgeLookFor(theme, tone, variant, tokens), [theme, tone, variant, tokens]);
-  const avatarTone = avatarToneProp ?? tokens?.defaultAvatarTone;
-  // The placeholder takes the same fill and ink the initials would in this
-  // tone, so switching between a name and no name never changes the colour.
-  const placeholderColors = useMemo(() => {
-    const toned = avatarTone ? avatarToneColors(theme, avatarTone) : null;
-    return {
-      background: avatarBackgroundColor ?? toned?.background ?? theme.colors.background.tertiary,
-      icon: avatarColor ?? toned?.color ?? theme.colors.text.tertiary
-    };
-  }, [theme, avatarTone, avatarBackgroundColor, avatarColor]);
-  const labels = useMemo(() => ({
-    ...DEFAULT_LABELS,
-    ...labelsProp
-  }), [labelsProp]);
-  const [pickedUri, setPickedUri] = useState(null);
-  const [rejectError, setRejectError] = useState(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
-
-  // The app reflected the upload back into `value` (or changed it): drop the
-  // local preview so the photo on screen is the one the app owns. Adjusted
-  // during render rather than in an effect, so no frame shows the stale preview.
-  const [seenValue, setSeenValue] = useState(value);
-  if (value !== seenValue) {
-    setSeenValue(value);
-    setPickedUri(null);
-  }
-  const busy = loading || disabled;
-  const shownUri = pickedUri ?? value ?? null;
-  const shownError = error ?? rejectError ?? undefined;
-  const canRemove = !busy && (pickedUri !== null || Boolean(value) && Boolean(onRemove));
-  // No source and nothing to remove leaves nothing a tap could do, so the
-  // photo shows as a plain avatar: no badge, not a button.
-  const interactive = sources.length > 0 || canRemove;
-  const px = typeof size === 'number' ? size : SIZE_PX[size];
-  const radius = resolveRadius(shape, px);
-  // The camera badge (bottom-right) is centred exactly on the outline at 45°.
-  // That point is inset from the box corner by radius × (1 - 1/√2): 17.6 on
-  // a 120 circle, 0 on a square.
-  const cornerInset = radius * (1 - Math.SQRT1_2);
-  const badgePx = clamp(Math.round(px * 0.28), 24, 44);
-  const badgeOffset = cornerInset - badgePx / 2;
-  // On a rounded or square photo the badge reaches past the box. Reserve that
-  // overhang as margin so it never sits on the hint or the text beside it.
-  const overhang = Math.max(0, -badgeOffset);
-  const fail = useCallback(message => {
-    setRejectError(message);
-    onError?.(message);
-    if (haptic !== false) {
-      triggerHaptic('notificationError');
-    }
-  }, [onError, haptic]);
-  const runSource = useCallback(async source => {
-    let picked;
-    try {
-      picked = await source.pick();
-    } catch (e) {
-      fail(e instanceof Error ? e.message : String(e));
-      return;
-    }
-    const file = picked?.[0];
-    if (!file) {
-      return; // cancelled
-    }
-    if (typeof maxSizeMB === 'number' && typeof file.size === 'number' && file.size > maxSizeMB * 1024 * 1024) {
-      fail(labels.errorTooLarge(maxSizeMB));
-      return;
-    }
-    // Unlike FilePicker, a pick with no mime type passes: camera and gallery
-    // adapters often omit it, and every source here is a photo source.
-    if (file.type && !matchesAccept(file.type, accept)) {
-      fail(labels.errorWrongType);
-      return;
-    }
-    setRejectError(null);
-    setPickedUri(file.uri);
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onPick?.(file);
-  }, [maxSizeMB, accept, labels, haptic, onPick, fail]);
-
-  // A single source launches straight away; anything else goes through the
-  // sheet, including a lone source once the remove row has to be offered.
-  const open = useCallback(() => {
-    if (busy) {
-      return;
-    }
-    if (sources.length === 1 && !canRemove) {
-      void runSource(sources[0]);
-    } else if (sources.length > 0 || canRemove) {
-      setSheetOpen(true);
-    }
-  }, [busy, sources, canRemove, runSource]);
-  const remove = useCallback(() => {
-    setPickedUri(null);
-    setRejectError(null);
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onRemove?.();
-  }, [haptic, onRemove]);
-  const sheetItems = useMemo(() => {
-    const items = sources.map(source => ({
-      kind: 'source',
-      source
-    }));
-    if (canRemove) {
-      items.push({
-        kind: 'remove'
-      });
-    }
-    return items;
-  }, [sources, canRemove]);
-  const selectSheetItem = useCallback(item => {
-    setSheetOpen(false);
-    if (item.kind === 'remove') {
-      remove();
-    } else {
-      void runSource(item.source);
-    }
-  }, [remove, runSource]);
-  const idBase = testID ?? 'profile-picker';
-  const a11yLabel = accessibilityLabel ?? (interactive ? labels.pick : name);
-  const placeholder = /*#__PURE__*/_jsx(View, {
-    style: [styles.fill, {
-      width: px,
-      height: px,
-      borderRadius: radius,
-      ...smoothCorners,
-      backgroundColor: placeholderColors.background
-    }],
-    children: /*#__PURE__*/_jsx(AppIcon, {
-      name: "user",
-      size: Math.round(px * 0.45),
-      color: placeholderColors.icon
-    })
-  });
-  const photo = /*#__PURE__*/_jsx(View, {
-    style: {
-      width: px,
-      height: px,
-      marginBottom: overhang,
-      marginRight: overhang
-    },
-    children: /*#__PURE__*/_jsxs(Pressable, {
-      onPress: open,
-      disabled: busy || !interactive,
-      accessibilityRole: interactive ? 'button' : 'image',
-      accessibilityLabel: a11yLabel,
-      accessibilityHint: shownError,
-      accessibilityState: interactive ? {
-        disabled: busy,
-        busy: loading
-      } : {
-        busy: loading
-      },
-      testID: `${idBase}-button`,
-      style: ({
-        pressed
-      }) => [{
-        width: px,
-        height: px,
-        borderRadius: radius,
-        ...smoothCorners
-      }, {
-        opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-      }],
-      children: [shownUri || name ? /*#__PURE__*/_jsx(Avatar
-      // Re-keyed per photo so a previous URI's load failure does not
-      // stick to the next one.
-      , {
-        source: shownUri ? {
-          uri: shownUri
-        } : undefined,
-        name: name,
-        size: px,
-        shape: shape,
-        tone: avatarTone,
-        backgroundColor: avatarBackgroundColor,
-        color: avatarColor,
-        ImageComponent: ImageComponent,
-        accessibilityLabel: a11yLabel
-      }, shownUri ?? 'initials') : placeholder, loading ? /*#__PURE__*/_jsx(View, {
-        style: [styles.fill, styles.overlay, {
-          borderRadius: radius,
-          ...smoothCorners,
-          backgroundColor: theme.colors.background.overlay
-        }],
-        testID: `${idBase}-loading`,
-        children: /*#__PURE__*/_jsx(Spinner, {
-          size: px >= 100 ? 'md' : 'sm',
-          color: theme.colors.onPrimary
-        })
-      }) : null, !disabled && interactive ? /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
-        testID: `${idBase}-badge`,
-        style: [styles.badge, {
-          width: badgePx,
-          height: badgePx,
-          borderRadius: badgePx / 2,
-          ...smoothCorners,
-          right: badgeOffset,
-          bottom: badgeOffset,
-          backgroundColor: badge.fill,
-          borderColor: badge.ring
-        }],
-        children: /*#__PURE__*/_jsx(AppIcon, {
-          name: badgeIcon,
-          size: Math.round(badgePx * 0.55),
-          color: badge.icon
-        })
-      }) : null]
-    })
-  });
-  const identity = layout !== 'stacked' ? /*#__PURE__*/_jsxs(View, {
-    style: [styles.meta, layout === 'profile' ? styles.metaCentred : null],
-    children: [title ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.title, layout === 'profile' ? styles.textCentred : null, {
-        color: theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base,
-        ...fontFor(theme, 'semibold')
-      }],
-      children: title
-    }) : null, subtitle ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.subtitle, layout === 'profile' ? styles.textCentred : null, {
-        color: theme.colors.text.secondary,
-        fontSize: theme.typography.fontSize.sm,
-        ...fontFor(theme, 'normal')
-      }],
-      children: subtitle
-    }) : null, /*#__PURE__*/_jsx(FieldMessage, {
-      text: shownError ?? helperText,
-      error: Boolean(shownError)
-    })]
-  }) : /*#__PURE__*/_jsx(FieldMessage, {
-    text: shownError ?? helperText,
-    error: Boolean(shownError)
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: style,
-    testID: testID,
-    children: [label ? /*#__PURE__*/_jsx(FieldLabel, {
-      required: required,
-      children: label
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: layout === 'inline' ? [styles.row, {
-        columnGap: theme.spacing.md
-      }] : [layout === 'profile' ? styles.columnCentred : styles.column, {
-        rowGap: theme.spacing.xs
-      }],
-      children: [photo, identity]
-    }), /*#__PURE__*/_jsx(OptionSheet, {
-      open: sheetOpen,
-      onClose: () => setSheetOpen(false),
-      title: labels.sheetTitle,
-      options: sheetItems,
-      labelOf: o => {
-        const item = o;
-        return item.kind === 'remove' ? labels.remove : item.source.label;
-      },
-      getValue: o => {
-        const item = o;
-        return item.kind === 'remove' ? REMOVE_VALUE : item.source.key;
-      },
-      disabledOf: () => false,
-      destructiveOf: o => o.kind === 'remove',
-      descriptionOf: o => {
-        const item = o;
-        return item.kind === 'remove' ? undefined : item.source.description;
-      },
-      iconOf: o => {
-        const item = o;
-        return item.kind === 'remove' ? /*#__PURE__*/_jsx(AppIcon, {
-          name: "trash",
-          size: SHEET_ICON_SIZE,
-          color: theme.colors.error
-        }) : item.source.icon;
-      },
-      isSelected: () => false,
-      onSelect: o => selectSheetItem(o)
-    })]
-  });
-});
-ProfilePicker.displayName = 'ProfilePicker';
-const styles = StyleSheet.create({
-  fill: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  overlay: {
-    ...StyleSheet.absoluteFill
-  },
-  // A 2 px ring (page colour, or the tone on outline) separates the badge from the photo.
-  badge: {
-    position: 'absolute',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 2
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  column: {
-    alignItems: 'flex-start'
-  },
-  columnCentred: {
-    alignItems: 'center'
-  },
-  meta: {
-    flexShrink: 1
-  },
-  metaCentred: {
-    alignItems: 'center'
-  },
-  title: {
-    includeFontPadding: false
-  },
-  subtitle: {
-    includeFontPadding: false,
-    marginTop: 2
-  },
-  textCentred: {
-    textAlign: 'center'
-  }
-});
-export { ProfilePicker };
-export default ProfilePicker;
-//# sourceMappingURL=ProfilePicker.js.map
+"use strict";import React,{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{Pressable,StyleSheet,Text,View}from"react-native";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{blendOf}from"../../utils/color.js";import{smoothCorners}from"../../utils/corners.js";import{AppIcon}from"../AppIcon/index.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{Avatar,avatarToneColors}from"../Avatar/index.js";import{FieldLabel,FieldMessage}from"../FieldBase/index.js";import{matchesAccept}from"../FilePicker/FilePicker.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const DEFAULT_LABELS={pick:"Change profile photo",remove:"Remove photo",sheetTitle:"Change photo",errorTooLarge:e=>`The photo is larger than ${e} MB.`,errorWrongType:"That file is not a supported image."},DEFAULT_ACCEPT=["image/*"],SHEET_ICON_SIZE=20,SOFT_FILL_OPACITY=.14,SIZE_PX={sm:72,md:120,lg:160},clamp=(e,o,r)=>Math.min(r,Math.max(o,e)),toneFor=(e,o)=>{switch(o){case"success":return{base:e.colors.success,on:e.colors.onSuccess};case"warning":return{base:e.colors.warning,on:e.colors.onWarning};case"error":return{base:e.colors.error,on:e.colors.onError};case"info":return{base:e.colors.info,on:e.colors.onInfo};case"neutral":return{base:e.colors.text.secondary,on:e.colors.text.inverse};default:return{base:e.colors.primary,on:e.colors.onPrimary}}},badgeLookFor=(e,o,r,t)=>{const s=toneFor(e,o),n=t?.badgeColor??s.base,l=e.colors.background.primary,i="neutral"===o&&void 0===t?.badgeColor;let a;switch(r){case"soft":a={fill:i?e.colors.background.tertiary:blendOf(n,.14,l,e.colors.background.secondary),ring:l,icon:n};break;case"outline":a={fill:l,ring:i?e.colors.border.primary:n,icon:n};break;default:a={fill:n,ring:l,icon:s.on}}return t?.badgeIconColor?{...a,icon:t.badgeIconColor}:a},resolveRadius=(e,o)=>"circle"===e?o/2:"rounded"===e?Math.max(6,Math.round(.22*o)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=forwardRef((e,o)=>{const{value:r,name:t,sources:s,onPick:n,onRemove:l,loading:i=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:m="circle",badgeIcon:p="camera",tone:b,variant:g,avatarTone:f,avatarBackgroundColor:h,avatarColor:y,label:x,required:k=!1,helperText:C,error:v,layout:S="stacked",title:_,subtitle:j,ImageComponent:I,labels:T,haptic:P,onError:w,accessibilityLabel:A,style:E,testID:F}=e,L=useTheme(),M=L.components.profilePicker,R=b??M?.defaultTone??"primary",O=g??M?.defaultVariant??"solid",V=useMemo(()=>badgeLookFor(L,R,O,M),[L,R,O,M]),z=f??M?.defaultAvatarTone,B=useMemo(()=>{const e=z?avatarToneColors(L,z):null;return{background:h??e?.background??L.colors.background.tertiary,icon:y??e?.color??L.colors.text.tertiary}},[L,z,h,y]),D=useMemo(()=>({...DEFAULT_LABELS,...T}),[T]),[H,U]=useState(null),[W,$]=useState(null),[Z,q]=useState(!1),[G,N]=useState(r);r!==G&&(N(r),U(null));const X=i||a,Q=H??r??null,Y=v??W??void 0,J=!X&&(null!==H||Boolean(r)&&Boolean(l)),K=s.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],oe=resolveRadius(m,ee),re=oe*(1-Math.SQRT1_2),te=clamp(Math.round(.28*ee),24,44),se=re-te/2,ne=Math.max(0,-se),le=useCallback(e=>{$(e),w?.(e),!1!==P&&triggerHaptic("notificationError")},[w,P]),ie=useCallback(async e=>{let o;try{o=await e.pick()}catch(e){return void le(e instanceof Error?e.message:String(e))}const r=o?.[0];if(!r)return;if("number"==typeof u&&"number"==typeof r.size&&r.size>1024*u*1024)return void le(D.errorTooLarge(u));if(r.type&&!matchesAccept(r.type,c))return void le(D.errorWrongType);$(null),U(r.uri);const t=resolveHaptic(P,"selection");t&&triggerHaptic(t),n?.(r)},[u,c,D,P,n,le]),ae=useCallback(()=>{X||(de.current=null,1!==s.length||J?(s.length>0||J)&&q(!0):ie(s[0]))},[X,s,J,ie]),ce=useCallback(()=>{U(null),$(null);const e=resolveHaptic(P,"selection");e&&triggerHaptic(e),l?.()},[P,l]),ue=useMemo(()=>{const e=s.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[s,J]),de=useRef(null),me=useCallback(e=>{de.current||(q(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),pe=useCallback(()=>{const e=de.current;de.current=null,e&&ie(e)},[ie]),be=F??"profile-picker",ge=A??(K?D.pick:t),fe=_jsx(View,{style:[styles.fill,{width:ee,height:ee,borderRadius:oe,...smoothCorners,backgroundColor:B.background}],children:_jsx(AppIcon,{name:"user",size:Math.round(.45*ee),color:B.icon})}),he=_jsx(View,{style:{width:ee,height:ee,marginBottom:ne,marginRight:ne},children:_jsxs(Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:ge,accessibilityHint:Y,accessibilityState:K?{disabled:X,busy:i}:{busy:i},testID:`${be}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:oe,...smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||t?_jsx(Avatar,{source:Q?{uri:Q}:void 0,name:t,size:ee,shape:m,tone:z,backgroundColor:h,color:y,ImageComponent:I,accessibilityLabel:ge},Q??"initials"):fe,i?_jsx(View,{style:[styles.fill,styles.overlay,{borderRadius:oe,...smoothCorners,backgroundColor:L.colors.background.overlay}],testID:`${be}-loading`,children:_jsx(Spinner,{size:ee>=100?"md":"sm",color:L.colors.onPrimary})}):null,!a&&K?_jsx(View,{pointerEvents:"none",testID:`${be}-badge`,style:[styles.badge,{width:te,height:te,borderRadius:te/2,...smoothCorners,right:se,bottom:se,backgroundColor:V.fill,borderColor:V.ring}],children:renderSlotIcon(p,{color:V.icon,size:Math.round(.55*te),disabled:!1})}):null]})}),ye="stacked"!==S?_jsxs(View,{style:[styles.meta,"profile"===S?styles.metaCentred:null],children:[_?_jsx(Text,{style:[styles.title,"profile"===S?styles.textCentred:null,{color:L.colors.text.primary,fontSize:L.typography.fontSize.base,...fontFor(L,"semibold")}],children:_}):null,j?_jsx(Text,{style:[styles.subtitle,"profile"===S?styles.textCentred:null,{color:L.colors.text.secondary,fontSize:L.typography.fontSize.sm,...fontFor(L,"normal")}],children:j}):null,_jsx(FieldMessage,{text:Y??C,error:Boolean(Y)})]}):_jsx(FieldMessage,{text:Y??C,error:Boolean(Y)});return _jsxs(View,{ref:o,style:E,testID:F,children:[x?_jsx(FieldLabel,{required:k,children:x}):null,_jsxs(View,{style:"inline"===S?[styles.row,{columnGap:L.spacing.md}]:["profile"===S?styles.columnCentred:styles.column,{rowGap:L.spacing.xs}],children:[he,ye]}),_jsx(OptionSheet,{open:Z,onClose:()=>q(!1),onAfterClose:pe,title:D.sheetTitle,options:ue,labelOf:e=>{const o=e;return"remove"===o.kind?D.remove:o.source.label},getValue:e=>{const o=e;return"remove"===o.kind?REMOVE_VALUE:o.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const o=e;return"remove"===o.kind?void 0:o.source.description},iconOf:e=>{const o=e;return"remove"===o.kind?_jsx(AppIcon,{name:"trash",size:20,color:L.colors.error}):o.source.icon},isSelected:()=>!1,onSelect:e=>me(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...StyleSheet.absoluteFill},badge:{position:"absolute",alignItems:"center",justifyContent:"center",borderWidth:2},row:{flexDirection:"row",alignItems:"center"},column:{alignItems:"flex-start"},columnCentred:{alignItems:"center"},meta:{flexShrink:1},metaCentred:{alignItems:"center"},title:{includeFontPadding:!1},subtitle:{includeFontPadding:!1,marginTop:2},textCentred:{textAlign:"center"}});export{ProfilePicker};export default ProfilePicker;

package/lib/module/components/ProfilePicker/index.js

@@ -1,4 +1 @@
-"use strict";
-
-export { default, ProfilePicker } from "./ProfilePicker.js";
-//# sourceMappingURL=index.js.map
+"use strict";export{default,ProfilePicker}from"./ProfilePicker.js";