@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/commonjs/components/ProfilePicker/ProfilePicker.js

@@ -1,531 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ProfilePicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _color = require("../../utils/color.js");
-var _corners = require("../../utils/corners.js");
-var _index3 = require("../AppIcon/index.js");
-var _index4 = require("../Avatar/index.js");
-var _index5 = require("../FieldBase/index.js");
-var _FilePicker = require("../FilePicker/FilePicker.js");
-var _OptionSheet = require("../OptionSheet/OptionSheet.js");
-var _index6 = require("../Spinner/index.js");
-var _jsxRuntime = require("react/jsx-runtime");
-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 (const 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); }
-/**
- * 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`.
- */
-
-/**
- * `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.
- */
-
-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 : (0, _color.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 = exports.ProfilePicker = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const tokens = theme.components.profilePicker;
-  const tone = toneProp ?? tokens?.defaultTone ?? 'primary';
-  const variant = variantProp ?? tokens?.defaultVariant ?? 'solid';
-  const badge = (0, _react.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 = (0, _react.useMemo)(() => {
-    const toned = avatarTone ? (0, _index4.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 = (0, _react.useMemo)(() => ({
-    ...DEFAULT_LABELS,
-    ...labelsProp
-  }), [labelsProp]);
-  const [pickedUri, setPickedUri] = (0, _react.useState)(null);
-  const [rejectError, setRejectError] = (0, _react.useState)(null);
-  const [sheetOpen, setSheetOpen] = (0, _react.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] = (0, _react.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 = (0, _react.useCallback)(message => {
-    setRejectError(message);
-    onError?.(message);
-    if (haptic !== false) {
-      (0, _index2.triggerHaptic)('notificationError');
-    }
-  }, [onError, haptic]);
-  const runSource = (0, _react.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 && !(0, _FilePicker.matchesAccept)(file.type, accept)) {
-      fail(labels.errorWrongType);
-      return;
-    }
-    setRejectError(null);
-    setPickedUri(file.uri);
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.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 = (0, _react.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 = (0, _react.useCallback)(() => {
-    setPickedUri(null);
-    setRejectError(null);
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.triggerHaptic)(h);
-    }
-    onRemove?.();
-  }, [haptic, onRemove]);
-  const sheetItems = (0, _react.useMemo)(() => {
-    const items = sources.map(source => ({
-      kind: 'source',
-      source
-    }));
-    if (canRemove) {
-      items.push({
-        kind: 'remove'
-      });
-    }
-    return items;
-  }, [sources, canRemove]);
-  const selectSheetItem = (0, _react.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.fill, {
-      width: px,
-      height: px,
-      borderRadius: radius,
-      ..._corners.smoothCorners,
-      backgroundColor: placeholderColors.background
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AppIcon, {
-      name: "user",
-      size: Math.round(px * 0.45),
-      color: placeholderColors.icon
-    })
-  });
-  const photo = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: {
-      width: px,
-      height: px,
-      marginBottom: overhang,
-      marginRight: overhang
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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,
-        ..._corners.smoothCorners
-      }, {
-        opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-      }],
-      children: [shownUri || name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.fill, styles.overlay, {
-          borderRadius: radius,
-          ..._corners.smoothCorners,
-          backgroundColor: theme.colors.background.overlay
-        }],
-        testID: `${idBase}-loading`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.Spinner, {
-          size: px >= 100 ? 'md' : 'sm',
-          color: theme.colors.onPrimary
-        })
-      }) : null, !disabled && interactive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        pointerEvents: "none",
-        testID: `${idBase}-badge`,
-        style: [styles.badge, {
-          width: badgePx,
-          height: badgePx,
-          borderRadius: badgePx / 2,
-          ..._corners.smoothCorners,
-          right: badgeOffset,
-          bottom: badgeOffset,
-          backgroundColor: badge.fill,
-          borderColor: badge.ring
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.AppIcon, {
-          name: badgeIcon,
-          size: Math.round(badgePx * 0.55),
-          color: badge.icon
-        })
-      }) : null]
-    })
-  });
-  const identity = layout !== 'stacked' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.meta, layout === 'profile' ? styles.metaCentred : null],
-    children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.title, layout === 'profile' ? styles.textCentred : null, {
-        color: theme.colors.text.primary,
-        fontSize: theme.typography.fontSize.base,
-        ...(0, _index.fontFor)(theme, 'semibold')
-      }],
-      children: title
-    }) : null, subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.subtitle, layout === 'profile' ? styles.textCentred : null, {
-        color: theme.colors.text.secondary,
-        fontSize: theme.typography.fontSize.sm,
-        ...(0, _index.fontFor)(theme, 'normal')
-      }],
-      children: subtitle
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.FieldMessage, {
-      text: shownError ?? helperText,
-      error: Boolean(shownError)
-    })]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.FieldMessage, {
-    text: shownError ?? helperText,
-    error: Boolean(shownError)
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    style: style,
-    testID: testID,
-    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.FieldLabel, {
-      required: required,
-      children: label
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: layout === 'inline' ? [styles.row, {
-        columnGap: theme.spacing.md
-      }] : [layout === 'profile' ? styles.columnCentred : styles.column, {
-        rowGap: theme.spacing.xs
-      }],
-      children: [photo, identity]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionSheet.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__*/(0, _jsxRuntime.jsx)(_index3.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 = _reactNative.StyleSheet.create({
-  fill: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
-  overlay: {
-    ..._reactNative.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'
-  }
-});
-var _default = exports.default = ProfilePicker;
-//# sourceMappingURL=ProfilePicker.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.ProfilePicker=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_color=require("../../utils/color.js"),_corners=require("../../utils/corners.js"),_index3=require("../AppIcon/index.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_index4=require("../Avatar/index.js"),_index5=require("../FieldBase/index.js"),_FilePicker=require("../FilePicker/FilePicker.js"),_OptionSheet=require("../OptionSheet/OptionSheet.js"),_index6=require("../Spinner/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=r?o:t){if(n.has(e))return n.get(e);n.set(e,s)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(i.get||i.set)?n(s,r,i):s[r]=e[r]);return s})(e,r)}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,r,t)=>Math.min(t,Math.max(r,e)),toneFor=(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}}},badgeLookFor=(e,r,t,o)=>{const n=toneFor(e,r),i=o?.badgeColor??n.base,s=e.colors.background.primary,l="neutral"===r&&void 0===o?.badgeColor;let a;switch(t){case"soft":a={fill:l?e.colors.background.tertiary:(0,_color.blendOf)(i,.14,s,e.colors.background.secondary),ring:s,icon:i};break;case"outline":a={fill:s,ring:l?e.colors.border.primary:i,icon:i};break;default:a={fill:i,ring:s,icon:n.on}}return o?.badgeIconColor?{...a,icon:o.badgeIconColor}:a},resolveRadius=(e,r)=>"circle"===e?r/2:"rounded"===e?Math.max(6,Math.round(.22*r)):0,REMOVE_VALUE="__profile-picker-remove__",ProfilePicker=exports.ProfilePicker=(0,_react.forwardRef)((e,r)=>{const{value:t,name:o,sources:n,onPick:i,onRemove:s,loading:l=!1,disabled:a=!1,accept:c=DEFAULT_ACCEPT,maxSizeMB:u,size:d="md",shape:_="circle",badgeIcon:m="camera",tone:p,variant:x,avatarTone:b,avatarBackgroundColor:g,avatarColor:f,label:h,required:y=!1,helperText:v,error:j,layout:k="stacked",title:C,subtitle:R,ImageComponent:S,labels:P,haptic:I,onError:T,accessibilityLabel:w,style:E,testID:M}=e,F=(0,_index.useTheme)(),A=F.components.profilePicker,O=p??A?.defaultTone??"primary",L=x??A?.defaultVariant??"solid",q=(0,_react.useMemo)(()=>badgeLookFor(F,O,L,A),[F,O,L,A]),N=b??A?.defaultAvatarTone,z=(0,_react.useMemo)(()=>{const e=N?(0,_index4.avatarToneColors)(F,N):null;return{background:g??e?.background??F.colors.background.tertiary,icon:f??e?.color??F.colors.text.tertiary}},[F,N,g,f]),V=(0,_react.useMemo)(()=>({...DEFAULT_LABELS,...P}),[P]),[B,D]=(0,_react.useState)(null),[W,H]=(0,_react.useState)(null),[U,$]=(0,_react.useState)(!1),[Z,G]=(0,_react.useState)(t);t!==Z&&(G(t),D(null));const X=l||a,Q=B??t??null,Y=j??W??void 0,J=!X&&(null!==B||Boolean(t)&&Boolean(s)),K=n.length>0||J,ee="number"==typeof d?d:SIZE_PX[d],re=resolveRadius(_,ee),te=re*(1-Math.SQRT1_2),oe=clamp(Math.round(.28*ee),24,44),ne=te-oe/2,ie=Math.max(0,-ne),se=(0,_react.useCallback)(e=>{H(e),T?.(e),!1!==I&&(0,_index2.triggerHaptic)("notificationError")},[T,I]),le=(0,_react.useCallback)(async e=>{let r;try{r=await e.pick()}catch(e){return void se(e instanceof Error?e.message:String(e))}const t=r?.[0];if(!t)return;if("number"==typeof u&&"number"==typeof t.size&&t.size>1024*u*1024)return void se(V.errorTooLarge(u));if(t.type&&!(0,_FilePicker.matchesAccept)(t.type,c))return void se(V.errorWrongType);H(null),D(t.uri);const o=(0,_index2.resolveHaptic)(I,"selection");o&&(0,_index2.triggerHaptic)(o),i?.(t)},[u,c,V,I,i,se]),ae=(0,_react.useCallback)(()=>{X||(de.current=null,1!==n.length||J?(n.length>0||J)&&$(!0):le(n[0]))},[X,n,J,le]),ce=(0,_react.useCallback)(()=>{D(null),H(null);const e=(0,_index2.resolveHaptic)(I,"selection");e&&(0,_index2.triggerHaptic)(e),s?.()},[I,s]),ue=(0,_react.useMemo)(()=>{const e=n.map(e=>({kind:"source",source:e}));return J&&e.push({kind:"remove"}),e},[n,J]),de=(0,_react.useRef)(null),_e=(0,_react.useCallback)(e=>{de.current||($(!1),"remove"===e.kind?ce():de.current=e.source)},[ce]),me=(0,_react.useCallback)(()=>{const e=de.current;de.current=null,e&&le(e)},[le]),pe=M??"profile-picker",xe=w??(K?V.pick:o),be=(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners,backgroundColor:z.background}],children:(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"user",size:Math.round(.45*ee),color:z.icon})}),ge=(0,_jsxRuntime.jsx)(_reactNative.View,{style:{width:ee,height:ee,marginBottom:ie,marginRight:ie},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:ae,disabled:X||!K,accessibilityRole:K?"button":"image",accessibilityLabel:xe,accessibilityHint:Y,accessibilityState:K?{disabled:X,busy:l}:{busy:l},testID:`${pe}-button`,style:({pressed:e})=>[{width:ee,height:ee,borderRadius:re,..._corners.smoothCorners},{opacity:a?.55:e?.85:1}],children:[Q||o?(0,_jsxRuntime.jsx)(_index4.Avatar,{source:Q?{uri:Q}:void 0,name:o,size:ee,shape:_,tone:N,backgroundColor:g,color:f,ImageComponent:S,accessibilityLabel:xe},Q??"initials"):be,l?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.fill,styles.overlay,{borderRadius:re,..._corners.smoothCorners,backgroundColor:F.colors.background.overlay}],testID:`${pe}-loading`,children:(0,_jsxRuntime.jsx)(_index6.Spinner,{size:ee>=100?"md":"sm",color:F.colors.onPrimary})}):null,!a&&K?(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",testID:`${pe}-badge`,style:[styles.badge,{width:oe,height:oe,borderRadius:oe/2,..._corners.smoothCorners,right:ne,bottom:ne,backgroundColor:q.fill,borderColor:q.ring}],children:(0,_slotIcon.renderSlotIcon)(m,{color:q.icon,size:Math.round(.55*oe),disabled:!1})}):null]})}),fe="stacked"!==k?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.meta,"profile"===k?styles.metaCentred:null],children:[C?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.title,"profile"===k?styles.textCentred:null,{color:F.colors.text.primary,fontSize:F.typography.fontSize.base,...(0,_index.fontFor)(F,"semibold")}],children:C}):null,R?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.subtitle,"profile"===k?styles.textCentred:null,{color:F.colors.text.secondary,fontSize:F.typography.fontSize.sm,...(0,_index.fontFor)(F,"normal")}],children:R}):null,(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:Boolean(Y)})]}):(0,_jsxRuntime.jsx)(_index5.FieldMessage,{text:Y??v,error:Boolean(Y)});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:r,style:E,testID:M,children:[h?(0,_jsxRuntime.jsx)(_index5.FieldLabel,{required:y,children:h}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:"inline"===k?[styles.row,{columnGap:F.spacing.md}]:["profile"===k?styles.columnCentred:styles.column,{rowGap:F.spacing.xs}],children:[ge,fe]}),(0,_jsxRuntime.jsx)(_OptionSheet.OptionSheet,{open:U,onClose:()=>$(!1),onAfterClose:me,title:V.sheetTitle,options:ue,labelOf:e=>{const r=e;return"remove"===r.kind?V.remove:r.source.label},getValue:e=>{const r=e;return"remove"===r.kind?REMOVE_VALUE: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?(0,_jsxRuntime.jsx)(_index3.AppIcon,{name:"trash",size:20,color:F.colors.error}):r.source.icon},isSelected:()=>!1,onSelect:e=>_e(e)})]})});ProfilePicker.displayName="ProfilePicker";const styles=_reactNative.StyleSheet.create({fill:{alignItems:"center",justifyContent:"center",overflow:"hidden"},overlay:{..._reactNative.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"}});var _default=exports.default=ProfilePicker;

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

@@ -1,20 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ProfilePicker", {
-  enumerable: true,
-  get: function () {
-    return _ProfilePicker.ProfilePicker;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _ProfilePicker.default;
-  }
-});
-var _ProfilePicker = _interopRequireWildcard(require("./ProfilePicker.js"));
-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 (const 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); }
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ProfilePicker",{enumerable:!0,get:function(){return _ProfilePicker.ProfilePicker}}),Object.defineProperty(exports,"default",{enumerable:!0,get:function(){return _ProfilePicker.default}});var _ProfilePicker=_interopRequireWildcard(require("./ProfilePicker.js"));function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,i=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var n,o,f={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return f;if(n=r?i:t){if(n.has(e))return n.get(e);n.set(e,f)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?n(f,r,o):f[r]=e[r]);return f})(e,r)}