@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/components/AnimatePresence/AnimatePresence.js

@@ -1,71 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AnimatePresence = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/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); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Animates a single child in on mount and out on unmount. Thin, theme-aware
- * wrapper over Reanimated's `entering`/`exiting` — Reanimated keeps the view
- * alive to play the exit, so the parent only toggles a condition. Honors the OS
- * Reduce Motion setting (renders instantly when reduced).
- *
- * For animating items inside a list, use Reanimated's `itemLayoutAnimation`
- * on `Animated.FlatList` instead — this wrapper targets single conditional nodes.
- */
-const AnimatePresence = ({
-  children,
-  preset = 'fade',
-  duration,
-  style,
-  testID
-}) => {
-  const theme = (0, _index2.useTheme)();
-  const reduceMotion = (0, _index.useReducedMotion)();
-  const visible = children !== null && children !== undefined && children !== false;
-  if (!visible) {
-    return null;
-  }
-  const dur = duration ?? theme.motion.duration.normal;
-  let entering;
-  let exiting;
-  if (!reduceMotion) {
-    switch (preset) {
-      case 'scale':
-        entering = _reactNativeReanimated.ZoomIn.duration(dur);
-        exiting = _reactNativeReanimated.ZoomOut.duration(dur);
-        break;
-      case 'slide-up':
-        entering = _reactNativeReanimated.FadeInUp.duration(dur);
-        exiting = _reactNativeReanimated.FadeOutDown.duration(dur);
-        break;
-      case 'slide-down':
-        entering = _reactNativeReanimated.FadeInDown.duration(dur);
-        exiting = _reactNativeReanimated.FadeOutUp.duration(dur);
-        break;
-      case 'fade':
-      default:
-        entering = _reactNativeReanimated.FadeIn.duration(dur);
-        exiting = _reactNativeReanimated.FadeOut.duration(dur);
-        break;
-    }
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-    entering: entering,
-    exiting: exiting,
-    style: style,
-    testID: testID,
-    children: children
-  });
-};
-exports.AnimatePresence = AnimatePresence;
-AnimatePresence.displayName = 'AnimatePresence';
-var _default = exports.default = AnimatePresence;
-//# sourceMappingURL=AnimatePresence.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AnimatePresence=void 0;var _react=_interopRequireDefault(require("react")),_reactNativeReanimated=_interopRequireWildcard(require("react-native-reanimated")),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var a=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,u={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return u;if(n=t?r:a){if(n.has(e))return n.get(e);n.set(e,u)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(u,t,i):u[t]=e[t]);return u})(e,t)}function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const AnimatePresence=({children:e,preset:t="fade",duration:a,style:r,testID:n})=>{const i=(0,_index2.useTheme)(),u=(0,_index.useReducedMotion)();if(!(null!=e&&!1!==e))return null;const d=a??i.motion.duration.normal;let o,c;if(!u)switch(t){case"scale":o=_reactNativeReanimated.ZoomIn.duration(d),c=_reactNativeReanimated.ZoomOut.duration(d);break;case"slide-up":o=_reactNativeReanimated.FadeInUp.duration(d),c=_reactNativeReanimated.FadeOutDown.duration(d);break;case"slide-down":o=_reactNativeReanimated.FadeInDown.duration(d),c=_reactNativeReanimated.FadeOutUp.duration(d);break;default:o=_reactNativeReanimated.FadeIn.duration(d),c=_reactNativeReanimated.FadeOut.duration(d)}return(0,_jsxRuntime.jsx)(_reactNativeReanimated.default.View,{entering:o,exiting:c,style:r,testID:n,children:e})};exports.AnimatePresence=AnimatePresence,AnimatePresence.displayName="AnimatePresence";var _default=exports.default=AnimatePresence;

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

@@ -1,13 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "AnimatePresence", {
-  enumerable: true,
-  get: function () {
-    return _AnimatePresence.AnimatePresence;
-  }
-});
-var _AnimatePresence = require("./AnimatePresence.js");
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"AnimatePresence",{enumerable:!0,get:function(){return _AnimatePresence.AnimatePresence}});var _AnimatePresence=require("./AnimatePresence.js");

package/lib/commonjs/components/AppBar/AppBar.js

@@ -1,358 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.AppBar = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _usePressAnimation = require("../../hooks/usePressAnimation.js");
-var _index = require("../../theme/index.js");
-var _corners = require("../../utils/corners.js");
-var _hapticUtils = require("../../utils/hapticUtils.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); }
-const variantSize = (theme, variant) => {
-  switch (variant) {
-    case 'compact':
-      return {
-        height: 44,
-        titleSize: theme.typography.fontSize.lg,
-        titleWeight: 'semibold',
-        alignBottom: false
-      };
-    case 'large':
-      return {
-        height: 96,
-        titleSize: theme.typography.fontSize['2xl'],
-        titleWeight: 'bold',
-        alignBottom: true
-      };
-    case 'default':
-    default:
-      return {
-        height: 56,
-        titleSize: theme.typography.fontSize.lg,
-        titleWeight: 'semibold',
-        alignBottom: false
-      };
-  }
-};
-const ActionButton = ({
-  action,
-  side,
-  badgeStyle,
-  haptic
-}) => {
-  const theme = (0, _index.useTheme)();
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = (0, _usePressAnimation.usePressAnimation)({
-    enabled: true
-  });
-  const styles = (0, _react.useMemo)(() => buildActionStyles(theme), [theme]);
-  const onPress = () => {
-    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _hapticUtils.triggerHaptic)(h);
-    }
-    action.onPress();
-  };
-  const badgeValue = action.badge;
-  const badgeIsDot = typeof badgeValue === 'number' && badgeValue === 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: {
-      transform: [{
-        scale
-      }]
-    },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
-      onPress: onPress,
-      onPressIn: pressIn,
-      onPressOut: pressOut,
-      accessibilityRole: "button",
-      accessibilityLabel: action.accessibilityLabel,
-      testID: action.testID,
-      android_ripple: {
-        color: theme.colors.surface.pressed,
-        borderless: true
-      },
-      style: ({
-        pressed
-      }) => [styles.actionButton, side === 'left' ? styles.actionLeft : styles.actionRight, pressed ? styles.actionPressed : null],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.iconWrap,
-        children: action.icon
-      }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.badge, badgeStyle],
-        pointerEvents: "none",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.badgeText,
-          numberOfLines: 1,
-          children: String(badgeValue)
-        })
-      }) : null]
-    })
-  });
-};
-const COLLAPSE_RANGE = 60;
-const LARGE_TITLE_SCALE_END = 0.71; // 2xl(24) -> lg(~17) ≈ 0.71
-
-const AppBar = exports.AppBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  const {
-    title,
-    subtitle,
-    titleAlignment = 'left',
-    leftAction,
-    rightActions,
-    variant = 'default',
-    transparent = false,
-    scrollY,
-    style,
-    containerStyle,
-    titleStyle,
-    subtitleStyle,
-    badgeStyle,
-    haptic,
-    testID
-  } = props;
-  const theme = (0, _index.useTheme)();
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  const v = (0, _react.useMemo)(() => variantSize(theme, variant), [theme, variant]);
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const isCollapsing = variant === 'large' && scrollY !== undefined;
-
-  // Interpolations for the collapsing-app-bar behaviour. Native driver supports
-  // transform/opacity; height + borderBottomWidth must run on the JS driver and
-  // are wired through the same scrollY (RN coalesces the listener).
-  const collapseTranslateDistance = theme.components.appBar?.collapseTranslateDistance ?? -20;
-  const collapse = (0, _react.useMemo)(() => {
-    if (!scrollY) {
-      return null;
-    }
-    const clamp = {
-      inputRange: [0, COLLAPSE_RANGE],
-      extrapolate: 'clamp'
-    };
-    return {
-      titleScale: scrollY.interpolate({
-        ...clamp,
-        outputRange: [1, LARGE_TITLE_SCALE_END]
-      }),
-      // Translate the large title from bottom-left up into the compact bar
-      // area. Approximate vertical travel = (large 96 - default 56) / 2.
-      titleTranslateY: scrollY.interpolate({
-        ...clamp,
-        outputRange: [0, collapseTranslateDistance]
-      }),
-      titleTranslateX: scrollY.interpolate({
-        ...clamp,
-        // Left-align large -> centred compact: nudge slightly toward centre.
-        outputRange: titleAlignment === 'center' ? [0, 0] : [0, 8]
-      }),
-      subtitleOpacity: scrollY.interpolate({
-        inputRange: [0, COLLAPSE_RANGE / 2],
-        outputRange: [1, 0],
-        extrapolate: 'clamp'
-      }),
-      barHeight: scrollY.interpolate({
-        ...clamp,
-        outputRange: [96, 56]
-      }),
-      borderOpacity: scrollY.interpolate({
-        ...clamp,
-        outputRange: [0, 1]
-      })
-    };
-  }, [scrollY, titleAlignment, collapseTranslateDistance]);
-  const titleNode = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
-    style: [styles.title, {
-      fontSize: v.titleSize,
-      fontWeight: theme.typography.fontWeight[v.titleWeight],
-      textAlign: titleAlignment === 'center' ? 'center' : 'left'
-    }, isCollapsing && collapse ? {
-      transform: [{
-        translateX: collapse.titleTranslateX
-      }, {
-        translateY: collapse.titleTranslateY
-      }, {
-        scale: collapse.titleScale
-      }]
-    } : null, titleStyle],
-    numberOfLines: 1,
-    children: title
-  }) : null;
-  const subtitleNode = subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.Text, {
-    style: [styles.subtitle, {
-      textAlign: titleAlignment === 'center' ? 'center' : 'left'
-    }, isCollapsing && collapse ? {
-      opacity: collapse.subtitleOpacity
-    } : null, subtitleStyle],
-    numberOfLines: 1,
-    children: subtitle
-  }) : null;
-  const titleBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [styles.titleColumn, titleAlignment === 'center' ? styles.titleColumnCenter : null, v.alignBottom ? styles.titleColumnBottom : null],
-    children: [titleNode, subtitleNode]
-  });
-
-  // Whole-bar height needs the JS driver (height isn't transform/opacity).
-  // Border opacity is animated via a dedicated overlay so the underlying
-  // background stays on the native driver.
-  const RootContainer = isCollapsing ? _reactNative.Animated.View : _reactNative.View;
-  const rootHeightStyle = isCollapsing && collapse ? {
-    height: _reactNative.Animated.add(collapse.barHeight, new _reactNative.Animated.Value(insets.top))
-  } : {
-    height: v.height + insets.top
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootContainer, {
-    ref: ref,
-    accessibilityRole: "header",
-    testID: testID,
-    style: [styles.root, {
-      paddingTop: insets.top,
-      backgroundColor: transparent ? 'transparent' : theme.colors.background.elevated
-    }, rootHeightStyle,
-    // Static border for non-collapsing case; collapsing case overlays an
-    // animated border below.
-    !isCollapsing ? {
-      borderBottomWidth: transparent ? 0 : _reactNative.StyleSheet.hairlineWidth,
-      borderBottomColor: theme.colors.border.primary
-    } : null, style, containerStyle],
-    children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-      pointerEvents: "none",
-      style: [styles.animatedBorder, {
-        backgroundColor: theme.colors.border.primary,
-        opacity: collapse.borderOpacity
-      }]
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.row, v.alignBottom ? styles.rowAlignBottom : null, {
-        flex: 1
-      }],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.sideSlot,
-        children: leftAction ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
-          action: leftAction,
-          side: "left",
-          haptic: haptic
-        }) : null
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
-        children: titleBlock
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.sideSlot, styles.sideSlotRight],
-        children: rightActions?.map((action, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ActionButton, {
-          action: action,
-          side: "right",
-          badgeStyle: badgeStyle,
-          haptic: haptic
-        }, `appbar-right-${index}`))
-      })]
-    })]
-  });
-});
-AppBar.displayName = 'AppBar';
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  root: {
-    width: '100%'
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: theme.spacing.xs
-  },
-  rowAlignBottom: {
-    alignItems: 'flex-end',
-    paddingBottom: theme.spacing.sm
-  },
-  sideSlot: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: theme.components.appBar?.sideSlotMinWidth ?? 48
-  },
-  sideSlotRight: {
-    justifyContent: 'flex-end'
-  },
-  center: {
-    flex: 1,
-    paddingHorizontal: theme.spacing.xs
-  },
-  centerAligned: {
-    alignItems: 'center'
-  },
-  centerLeft: {
-    alignItems: 'flex-start'
-  },
-  titleColumn: {
-    flexDirection: 'column'
-  },
-  titleColumnCenter: {
-    alignItems: 'center'
-  },
-  titleColumnBottom: {
-    justifyContent: 'flex-end'
-  },
-  title: {
-    color: theme.colors.text.primary
-  },
-  subtitle: {
-    marginTop: theme.components.appBar?.subtitleMarginTop ?? 2,
-    color: theme.colors.text.tertiary,
-    fontSize: theme.typography.fontSize.sm,
-    fontWeight: theme.typography.fontWeight.normal
-  },
-  animatedBorder: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: _reactNative.StyleSheet.hairlineWidth
-  }
-});
-const buildActionStyles = theme => _reactNative.StyleSheet.create({
-  actionButton: {
-    width: theme.components.appBar?.actionButtonSize ?? 40,
-    height: theme.components.appBar?.actionButtonSize ?? 40,
-    borderRadius: theme.radius.full,
-    ..._corners.smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  actionLeft: {
-    marginRight: theme.spacing.xs
-  },
-  actionRight: {
-    marginLeft: theme.spacing.xs
-  },
-  actionPressed: {
-    backgroundColor: theme.colors.surface.pressed
-  },
-  iconWrap: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  badge: {
-    position: 'absolute',
-    top: theme.components.appBar?.badgeOffset ?? 4,
-    right: theme.components.appBar?.badgeOffset ?? 4,
-    minWidth: theme.components.appBar?.badgeMinWidth ?? 16,
-    height: theme.components.appBar?.badgeHeight ?? 16,
-    paddingHorizontal: theme.components.appBar?.badgePaddingHorizontal ?? 4,
-    borderRadius: theme.radius.full,
-    ..._corners.smoothCorners,
-    backgroundColor: theme.colors.error,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  badgeText: {
-    color: theme.colors.text.inverse,
-    fontSize: theme.components.appBar?.badgeFontSize ?? 10,
-    fontWeight: theme.typography.fontWeight.semibold,
-    lineHeight: theme.components.appBar?.badgeLineHeight ?? 12
-  }
-});
-var _default = exports.default = AppBar;
-//# sourceMappingURL=AppBar.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.AppBar=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_reactNativeSafeAreaContext=require("react-native-safe-area-context"),_usePressAnimation=require("../../hooks/usePressAnimation.js"),_index=require("../../theme/index.js"),_corners=require("../../utils/corners.js"),_hapticUtils=require("../../utils/hapticUtils.js"),_AppIcon=require("../AppIcon/AppIcon.js"),_Text=require("../Text/Text.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var r,a,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(r=t?n:i){if(r.has(e))return r.get(e);r.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((a=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(a.get||a.set)?r(o,t,a):o[t]=e[t]);return o})(e,t)}const variantSize=(e,t)=>{switch(t){case"compact":return{height:44,titleSize:e.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:e.typography.fontSize["2xl"],titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:e.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:e,side:t,badgeStyle:i,haptic:n,flush:r})=>{const a=(0,_index.useTheme)(),{scale:o,pressIn:s,pressOut:l}=(0,_usePressAnimation.usePressAnimation)({enabled:!0}),c=(0,_react.useMemo)(()=>buildActionStyles(a),[a]),p=e.badge,d=void 0!==p&&0!==p,u=void 0!==e.text;return(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:{transform:[{scale:o}]},children:(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>{const t=(0,_hapticUtils.resolveHaptic)(n,"selection");t&&(0,_hapticUtils.triggerHaptic)(t),e.onPress()},onPressIn:s,onPressOut:l,accessibilityRole:"button",accessibilityLabel:e.accessibilityLabel??e.text,testID:e.testID,android_ripple:{color:a.colors.surface.pressed,borderless:!u},style:({pressed:e})=>[u?c.textButton:c.actionButton,r?null:"left"===t?c.actionLeft:c.actionRight,e&&!u?c.actionPressed:null,e&&u?c.textPressed:null],children:[u?(0,_jsxRuntime.jsx)(_reactNative.Text,{style:c.actionText,numberOfLines:1,children:e.text}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:c.iconWrap,children:e.icon}),d?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[c.badge,i],pointerEvents:"none",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:c.badgeText,numberOfLines:1,children:String(p)})}):null,e.dot?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:e.testID?`${e.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=exports.AppBar=(0,_react.forwardRef)((e,t)=>{const{title:i,subtitle:n,titleAlignment:r="left",leftAction:a,rightActions:o,leading:s,trailing:l,onBack:c,gutter:p,titleVariant:d,titleOffset:u,height:g,divider:m,variant:h="default",transparent:x=!1,scrollY:f,style:_,containerStyle:y,titleStyle:b,subtitleStyle:j,badgeStyle:S,haptic:v,testID:B}=e,R=(0,_index.useTheme)(),A=(0,_reactNativeSafeAreaContext.useSafeAreaInsets)(),w=(0,_react.useMemo)(()=>variantSize(R,h),[R,h]),N=(0,_react.useMemo)(()=>buildStyles(R),[R]),C="large"===h&&void 0!==f,z=R.components.appBar?.iconSize??24,W=R.components.appBar?.actionButtonSize??44,I=a??(c?{icon:(0,_jsxRuntime.jsx)(_AppIcon.AppIcon,{name:"arrow-left",size:z,color:R.colors.text.primary}),onPress:c,accessibilityLabel:"Back"}:void 0),T=l?void 0:o?.[o.length-1],opticalInset=e=>void 0===e?0:void 0!==e.text?R.spacing.sm:Math.max((W-z)/2,0),O=void 0===p?null:{paddingLeft:Math.max(p-opticalInset(I),0),paddingRight:Math.max(p-opticalInset(T),0)},L=void 0!==u,P=Boolean(I)||Boolean(s),V=m??!x,M=R.components.appBar?.dividerWidth??_reactNative.StyleSheet.hairlineWidth,k=R.components.appBar?.collapseTranslateDistance??-20,q=(0,_react.useMemo)(()=>{if(!f)return null;const e={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:f.interpolate({...e,outputRange:[1,.71]}),titleTranslateY:f.interpolate({...e,outputRange:[0,k]}),titleTranslateX:f.interpolate({...e,outputRange:"center"===r?[0,0]:[0,8]}),subtitleOpacity:f.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:f.interpolate({...e,outputRange:[96,56]}),borderOpacity:f.interpolate({...e,outputRange:[0,1]})}},[f,r,k]),D=C&&q?{transform:[{translateX:q.titleTranslateX},{translateY:q.titleTranslateY},{scale:q.titleScale}]}:null,H=i?d?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{style:D,children:(0,_jsxRuntime.jsx)(_Text.Text,{variant:d,align:"center"===r?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[N.titleVariant,b],children:i})}):(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{accessibilityRole:"header",style:[N.title,{fontSize:w.titleSize,fontWeight:R.typography.fontWeight[w.titleWeight],textAlign:"center"===r?"center":"left"},D,b],numberOfLines:1,children:i}):null,E=n?(0,_jsxRuntime.jsx)(_reactNative.Animated.Text,{style:[N.subtitle,{textAlign:"center"===r?"center":"left"},C&&q?{opacity:q.subtitleOpacity}:null,j],numberOfLines:1,children:n}):null,U=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.titleColumn,"center"===r?N.titleColumnCenter:null,w.alignBottom?N.titleColumnBottom:null],children:[H,E]}),Y=C?_reactNative.Animated.View:_reactNative.View,F=C&&q?{height:_reactNative.Animated.add(q.barHeight,new _reactNative.Animated.Value(A.top))}:{height:(g??w.height)+A.top};return(0,_jsxRuntime.jsxs)(Y,{ref:t,testID:B,style:[N.root,{paddingTop:A.top,backgroundColor:x?"transparent":R.colors.background.elevated},F,!C&&V?{borderBottomWidth:M,borderBottomColor:R.colors.border.primary}:null,_,y],children:[C&&q&&V?(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[N.animatedBorder,{backgroundColor:R.colors.border.primary,opacity:q.borderOpacity}]}):null,(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.row,w.alignBottom?N.rowAlignBottom:null,O,{flex:1}],children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,L?N.sideSlotCompact:null],children:[I?(0,_jsxRuntime.jsx)(ActionButton,{action:I,side:"left",haptic:v,flush:L}):null,s]}),(0,_jsxRuntime.jsx)(_reactNative.View,{pointerEvents:"none",style:[N.center,"center"===r?N.centerAligned:N.centerLeft,L?{paddingLeft:P?u:0,paddingRight:0}:null],children:U}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[N.sideSlot,N.sideSlotRight,L?N.sideSlotCompact:null],children:[o?.map((e,t)=>(0,_jsxRuntime.jsx)(ActionButton,{action:e,side:"right",badgeStyle:S,haptic:v,flush:L},`appbar-right-${t}`)),l]})]})]})});AppBar.displayName="AppBar";const buildStyles=e=>_reactNative.StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:e.spacing.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:e.spacing.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:e.components.appBar?.sideSlotMinWidth??48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},center:{flex:1,paddingHorizontal:e.spacing.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:e.colors.text.primary},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:e.components.appBar?.subtitleMarginTop??2,color:e.colors.text.tertiary,fontSize:e.typography.fontSize.sm,fontWeight:e.typography.fontWeight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:_reactNative.StyleSheet.hairlineWidth}}),buildActionStyles=e=>_reactNative.StyleSheet.create({actionButton:{width:e.components.appBar?.actionButtonSize??44,height:e.components.appBar?.actionButtonSize??44,borderRadius:e.radius.full,..._corners.smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:e.spacing.xs},actionRight:{marginLeft:e.spacing.xs},actionPressed:{backgroundColor:e.colors.surface.pressed},textButton:{minWidth:44,minHeight:44,paddingHorizontal:e.spacing.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},actionText:{color:e.colors.text.link,fontSize:e.typography.fontSize.base,...(0,_index.fontFor)(e,"semibold")},dot:{position:"absolute",top:e.components.appBar?.dotOffset??10,right:e.components.appBar?.dotOffset??10,width:e.components.appBar?.dotSize??8,height:e.components.appBar?.dotSize??8,borderRadius:e.radius.full,backgroundColor:e.colors.error},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:e.components.appBar?.badgeOffset??4,right:e.components.appBar?.badgeOffset??4,minWidth:e.components.appBar?.badgeMinWidth??16,height:e.components.appBar?.badgeHeight??16,paddingHorizontal:e.components.appBar?.badgePaddingHorizontal??4,borderRadius:e.radius.full,..._corners.smoothCorners,backgroundColor:e.colors.error,alignItems:"center",justifyContent:"center"},badgeText:{color:e.colors.onError,fontSize:e.components.appBar?.badgeFontSize??10,fontWeight:e.typography.fontWeight.semibold,lineHeight:e.components.appBar?.badgeLineHeight??12}});var _default=exports.default=AppBar;

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

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

package/lib/commonjs/components/AppIcon/AppIcon.js

@@ -1,155 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AppIcon = exports.APP_ICON_SIZES = void 0;
-Object.defineProperty(exports, "CURATED_ICON_NAMES", {
-  enumerable: true,
-  get: function () {
-    return _glyphsG.CURATED_ICON_NAMES;
-  }
-});
-Object.defineProperty(exports, "ICON_NAMES", {
-  enumerable: true,
-  get: function () {
-    return _catalogG.ICON_NAMES;
-  }
-});
-exports.resolveGlyph = exports.default = exports.buildIconXml = void 0;
-var _mobileCore = require("@webority/mobile-core");
-var _react = _interopRequireWildcard(require("react"));
-var _reactNativeSvg = require("react-native-svg");
-var _index = require("../../theme/index.js");
-var _catalogG = require("./catalog.g.js");
-var _glyphsG = require("./glyphs.g.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); }
-/**
- * AppIcon — the design system's icon set, on mobile.
- *
- * Draws the same Iconsax glyphs webority-ui's `AppIcon` draws on the web,
- * keyed by the same names, so a feature that says `<AppIcon name="send" />`
- * looks identical in the portal and in the app. Two tiers, both generated
- * from webority-ui by `scripts/sync-icons.mjs` (never hand-edit them):
- *
- *   - the curated set: the design system's semantic names ("plus",
- *     "eye-off", "alert-circle") in `glyphs.g.ts` (linear, evaluated at
- *     import) and `variants.g.ts` (the five other styles, on first use);
- *   - the full Iconsax catalogue: every name, every style, as one module per
- *     style and first letter under `catalog/`, reached through the static
- *     require map in `catalog.g.ts`. A shard is evaluated the first time an
- *     icon from it is drawn, so app start does not pay for the catalogue.
- *
- * Rendering: the bodies are 24x24 SVG markup with `currentColor`; we wrap
- * them in an `<svg>` at the requested size, substitute the colour, and hand
- * the string to react-native-svg's `SvgXml`.
- */
-
-/** `linear` is the default Iconsax style; the rest come from the lazy modules. */
-
-/** Pixel sizes behind the size tokens; a raw number is accepted too. */
-const APP_ICON_SIZES = exports.APP_ICON_SIZES = {
-  xs: 14,
-  sm: 18,
-  md: 22,
-  lg: 28,
-  xl: 36
-};
-/**
- * The lazy tiers are reached through literal `require` calls (Metro inlines
- * them). A bundler with no `require` at runtime (the Vite web demo) throws
- * `require is not defined` the first time one runs; there the tier is simply
- * absent and the caller falls back to the curated linear glyph or nothing,
- * which beats taking the screen down for an icon style.
- */
-const tryRequire = load => {
-  try {
-    return load();
-  } catch {
-    return null;
-  }
-};
-let curatedVariants = null;
-const loadCuratedVariants = () => {
-  if (!curatedVariants) {
-    // A literal require so Metro can inline it: evaluated here, on first use.
-    curatedVariants = tryRequire(() => require('./variants.g').VARIANT_GLYPHS) ?? {};
-  }
-  return curatedVariants;
-};
-
-/** Memoised per-shard lookups so a letter module is required at most once. */
-const shardCache = new Map();
-const loadShard = (style, name) => {
-  const letter = name[0]?.toLowerCase() ?? '';
-  const key = `${style}:${letter}`;
-  const cached = shardCache.get(key);
-  if (cached !== undefined) {
-    return cached;
-  }
-  const loader = _catalogG.CATALOG_LOADERS[style]?.[letter];
-  const shard = loader ? tryRequire(loader) : null;
-  shardCache.set(key, shard);
-  return shard;
-};
-const warned = new Set();
-
-/** Resolve the SVG body for a name + variant, or null when the name is unknown. */
-const resolveGlyph = (name, variant = 'linear') => {
-  // Curated names first: the semantic set is the design system's contract.
-  const curatedLinear = _glyphsG.GLYPHS[name];
-  if (curatedLinear) {
-    if (variant === 'linear') {
-      return curatedLinear;
-    }
-    return loadCuratedVariants()[variant]?.[name] ?? curatedLinear;
-  }
-  // Then the full catalogue: the requested style, falling back to linear.
-  const styled = loadShard(variant, name)?.[name];
-  if (styled) {
-    return styled;
-  }
-  return variant === 'linear' ? null : loadShard('linear', name)?.[name] ?? null;
-};
-
-/** Build the complete SVG document AppIcon hands to react-native-svg. */
-exports.resolveGlyph = resolveGlyph;
-const buildIconXml = (body, size, color) => `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none">${body.replace(/currentColor/g, color)}</svg>`;
-exports.buildIconXml = buildIconXml;
-const AppIcon = ({
-  name,
-  size = 'md',
-  color,
-  variant = 'linear',
-  style,
-  accessibilityLabel,
-  testID
-}) => {
-  const theme = (0, _index.useTheme)();
-  const px = typeof size === 'number' ? size : APP_ICON_SIZES[size];
-  const resolvedColor = color ?? theme.colors.text.primary;
-  const body = resolveGlyph(name, variant);
-  const xml = (0, _react.useMemo)(() => body ? buildIconXml(body, px, resolvedColor) : null, [body, px, resolvedColor]);
-  if (!xml) {
-    if (__DEV__ && !warned.has(name)) {
-      warned.add(name);
-      _mobileCore.Logger.warn(`[AppIcon] Unknown icon "${name}". Names come from webority-ui's icon map and the Iconsax catalogue; run scripts/sync-icons.mjs after adding one there.`);
-    }
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.SvgXml, {
-    xml: xml,
-    width: px,
-    height: px,
-    style: style,
-    accessible: accessibilityLabel != null,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityLabel != null ? 'image' : undefined,
-    testID: testID
-  });
-};
-exports.AppIcon = AppIcon;
-AppIcon.displayName = 'AppIcon';
-var _default = exports.default = AppIcon;
-//# sourceMappingURL=AppIcon.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppIcon=exports.APP_ICON_SIZES=void 0,Object.defineProperty(exports,"CURATED_ICON_NAMES",{enumerable:!0,get:function(){return _glyphsG.CURATED_ICON_NAMES}}),exports.ICONSAX_SUFFIX=void 0,Object.defineProperty(exports,"ICON_NAMES",{enumerable:!0,get:function(){return _catalogG.ICON_NAMES}}),exports.resolveGlyph=exports.default=exports.buildIconXml=void 0;var _mobileCore=require("@webority/mobile-core"),_react=_interopRequireWildcard(require("react")),_reactNativeSvg=require("react-native-svg"),_index=require("../../theme/index.js"),_catalogG=require("./catalog.g.js"),_glyphsG=require("./glyphs.g.js"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var o,a,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(o=r?n:t){if(o.has(e))return o.get(e);o.set(e,l)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((a=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(a.get||a.set)?o(l,r,a):l[r]=e[r]);return l})(e,r)}const ICONSAX_SUFFIX=exports.ICONSAX_SUFFIX="-iconsax",APP_ICON_SIZES=exports.APP_ICON_SIZES={xs:14,sm:18,md:22,lg:28,xl:36},tryRequire=e=>{try{return e()}catch{return null}};let curatedVariants=null;const loadCuratedVariants=()=>(curatedVariants||(curatedVariants=tryRequire(()=>require("./variants.g").VARIANT_GLYPHS)??{}),curatedVariants),shardCache=new Map,loadShard=(e,r)=>{const t=r[0]?.toLowerCase()??"",n=`${e}:${t}`,o=shardCache.get(n);if(void 0!==o)return o;const a=_catalogG.CATALOG_LOADERS[e]?.[t],l=a?tryRequire(a):null;return shardCache.set(n,l),l},warned=new Set,resolveCatalogue=(e,r)=>{const t=loadShard(r,e)?.[e];return t||("linear"===r?null:loadShard("linear",e)?.[e]??null)},resolveGlyph=(e,r="linear")=>{if(e.endsWith(ICONSAX_SUFFIX)){const t=e.slice(0,-ICONSAX_SUFFIX.length);return t in _glyphsG.GLYPHS?resolveCatalogue(t,r):null}const t=_glyphsG.GLYPHS[e];return t?"linear"===r?t:loadCuratedVariants()[r]?.[e]??t:resolveCatalogue(e,r)};exports.resolveGlyph=resolveGlyph;const buildIconXml=(e,r,t)=>`<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${r}" viewBox="0 0 24 24" fill="none">${e.replace(/currentColor/g,t)}</svg>`;exports.buildIconXml=buildIconXml;const AppIcon=({name:e,size:r="md",color:t,variant:n="linear",style:o,accessibilityLabel:a,testID:l})=>{const i=(0,_index.useTheme)(),s="number"==typeof r?r:APP_ICON_SIZES[r],c=t??i.colors.text.primary,u=resolveGlyph(e,n),p=(0,_react.useMemo)(()=>u?buildIconXml(u,s,c):null,[u,s,c]);return p?(0,_jsxRuntime.jsx)(_reactNativeSvg.SvgXml,{xml:p,width:s,height:s,style:o,accessible:null!=a,accessibilityLabel:a,accessibilityRole:null!=a?"image":void 0,testID:l}):(__DEV__&&!warned.has(e)&&(warned.add(e),_mobileCore.Logger.warn(`[AppIcon] Unknown icon "${e}". Names come from webority-ui's icon map and the Iconsax catalogue; run scripts/sync-icons.mjs after adding one there.`)),null)};exports.AppIcon=AppIcon,AppIcon.displayName="AppIcon";var _default=exports.default=AppIcon;