@webority/mobile-ui 0.0.38 → 0.1.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
+import e,{forwardRef as r,useCallback as o,useMemo as t,useRef as n,useState as i}from"react";import{Pressable as l,StyleSheet as s,Text as a,View as c}from"react-native";import{fontFor as d,useTheme as u}from"../../theme/index.js";import{resolveHaptic as m,triggerHaptic as p}from"../../utils/index.js";import{blendOf as g}from"../../utils/color.js";import{smoothCorners as b}from"../../utils/corners.js";import{AppIcon as f}from"../AppIcon/index.js";import{renderSlotIcon as h}from"../AppIcon/slotIcon.js";import{Avatar as y,avatarToneColors as k}from"../Avatar/index.js";import{FieldLabel as v,FieldMessage as x}from"../FieldBase/index.js";import{matchesAccept as C}from"../FilePicker/FilePicker.js";import{OptionSheet as I}from"../OptionSheet/OptionSheet.js";import{Spinner as j}from"../Spinner/index.js";import{jsx as S,jsxs as w}from"react/jsx-runtime";const T={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."},z=["image/*"],M={sm:72,md:120,lg:160},P=r((e,r)=>{const{value:s,name:P,sources:R,onPick:O,onRemove:A,loading:D=!1,disabled:F=!1,accept:E=z,maxSizeMB:L,size:_="md",shape:W="circle",badgeIcon:$="camera",tone:q,variant:G,avatarTone:V,avatarBackgroundColor:H,avatarColor:N,label:Q,required:J=!1,helperText:K,error:U,layout:X="stacked",title:Y,subtitle:Z,ImageComponent:ee,labels:re,haptic:oe,onError:te,accessibilityLabel:ne,style:ie,testID:le}=e,se=u(),ae=se.components.profilePicker,ce=q??ae?.defaultTone??"primary",de=G??ae?.defaultVariant??"solid",ue=t(()=>((e,r,o,t)=>{const n=((e,r)=>{switch(r){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}}})(e,r),i=t?.badgeColor??n.base,l=e.colors.background.primary,s="neutral"===r&&void 0===t?.badgeColor;let a;switch(o){case"soft":a={fill:s?e.colors.background.tertiary:g(i,.14,l,e.colors.background.secondary),ring:l,icon:i};break;case"outline":a={fill:l,ring:s?e.colors.border.primary:i,icon:i};break;default:a={fill:i,ring:l,icon:n.on}}return t?.badgeIconColor?{...a,icon:t.badgeIconColor}:a})(se,ce,de,ae),[se,ce,de,ae]),me=V??ae?.defaultAvatarTone,pe=t(()=>{const e=me?k(se,me):null;return{background:H??e?.background??se.colors.background.tertiary,icon:N??e?.color??se.colors.text.tertiary}},[se,me,H,N]),ge=t(()=>({...T,...re}),[re]),[be,fe]=i(null),[he,ye]=i(null),[ke,ve]=i(!1),[xe,Ce]=i(s);s!==xe&&(Ce(s),fe(null));const Ie=D||F,je=be??s??null,Se=U??he??void 0,we=!Ie&&(null!==be||Boolean(s)&&Boolean(A)),Te=R.length>0||we,ze="number"==typeof _?_:M[_],Me=((e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0)(W,ze),Pe=Me*(1-Math.SQRT1_2),Be=(Re=Math.round(.28*ze),Oe=24,Ae=44,Math.min(Ae,Math.max(Oe,Re)));var Re,Oe,Ae;const De=Pe-Be/2,Fe=Math.max(0,-De),Ee=o(e=>{ye(e),te?.(e),!1!==oe&&p("notificationError")},[te,oe]),Le=o(async e=>{let r;try{r=await e.pick()}catch(e){return void Ee(e instanceof Error?e.message:String(e))}const o=r?.[0];if(!o)return;if("number"==typeof L&&"number"==typeof o.size&&o.size>1024*L*1024)return void Ee(ge.errorTooLarge(L));if(o.type&&!C(o.type,E))return void Ee(ge.errorWrongType);ye(null),fe(o.uri);const t=m(oe,"selection");t&&p(t),O?.(o)},[L,E,ge,oe,O,Ee]),_e=o(()=>{Ie||(qe.current=null,1!==R.length||we?(R.length>0||we)&&ve(!0):Le(R[0]))},[Ie,R,we,Le]),We=o(()=>{fe(null),ye(null);const e=m(oe,"selection");e&&p(e),A?.()},[oe,A]),$e=t(()=>{const e=R.map(e=>({kind:"source",source:e}));return we&&e.push({kind:"remove"}),e},[R,we]),qe=n(null),Ge=o(e=>{qe.current||(ve(!1),"remove"===e.kind?We():qe.current=e.source)},[We]),Ve=o(()=>{const e=qe.current;qe.current=null,e&&Le(e)},[Le]),He=le??"profile-picker",Ne=ne??(Te?ge.pick:P),Qe=S(c,{style:[B.fill,{width:ze,height:ze,borderRadius:Me,...b,backgroundColor:pe.background}],children:S(f,{name:"user",size:Math.round(.45*ze),color:pe.icon})}),Je=S(c,{style:{width:ze,height:ze,marginBottom:Fe,marginRight:Fe},children:w(l,{onPress:_e,disabled:Ie||!Te,accessibilityRole:Te?"button":"image",accessibilityLabel:Ne,accessibilityHint:Se,accessibilityState:Te?{disabled:Ie,busy:D}:{busy:D},testID:`${He}-button`,style:({pressed:e})=>[{width:ze,height:ze,borderRadius:Me,...b},{opacity:F?.55:e?.85:1}],children:[je||P?S(y,{source:je?{uri:je}:void 0,name:P,size:ze,shape:W,tone:me,backgroundColor:H,color:N,ImageComponent:ee,accessibilityLabel:Ne},je??"initials"):Qe,D?S(c,{style:[B.fill,B.overlay,{borderRadius:Me,...b,backgroundColor:se.colors.background.overlay}],testID:`${He}-loading`,children:S(j,{size:ze>=100?"md":"sm",color:se.colors.onPrimary})}):null,!F&&Te?S(c,{pointerEvents:"none",testID:`${He}-badge`,style:[B.badge,{width:Be,height:Be,borderRadius:Be/2,...b,right:De,bottom:De,backgroundColor:ue.fill,borderColor:ue.ring}],children:h($,{color:ue.icon,size:Math.round(.55*Be),disabled:!1})}):null]})}),Ke="stacked"!==X?w(c,{style:[B.meta,"profile"===X?B.metaCentred:null],children:[Y?S(a,{style:[B.title,"profile"===X?B.textCentred:null,{color:se.colors.text.primary,fontSize:se.typography.fontSize.base,...d(se,"semibold")}],children:Y}):null,Z?S(a,{style:[B.subtitle,"profile"===X?B.textCentred:null,{color:se.colors.text.secondary,fontSize:se.typography.fontSize.sm,...d(se,"normal")}],children:Z}):null,S(x,{text:Se??K,error:Boolean(Se)})]}):S(x,{text:Se??K,error:Boolean(Se)});return w(c,{ref:r,style:ie,testID:le,children:[Q?S(v,{required:J,children:Q}):null,w(c,{style:"inline"===X?[B.row,{columnGap:se.spacing.md}]:["profile"===X?B.columnCentred:B.column,{rowGap:se.spacing.xs}],children:[Je,Ke]}),S(I,{open:ke,onClose:()=>ve(!1),onAfterClose:Ve,title:ge.sheetTitle,options:$e,labelOf:e=>{const r=e;return"remove"===r.kind?ge.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?"__profile-picker-remove__":r.source.key},disabledOf:()=>!1,destructiveOf:e=>"remove"===e.kind,descriptionOf:e=>{const r=e;return"remove"===r.kind?void 0:r.source.description},iconOf:e=>{const r=e;return"remove"===r.kind?S(f,{name:"trash",size:20,color:se.colors.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>Ge(e)})]})});P.displayName="ProfilePicker";const B=s.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{...s.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{P as ProfilePicker};export default P;

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

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