@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/AppBar/AppBar.js

@@ -1,354 +1 @@
-"use strict";
-
-import React, { forwardRef, useMemo } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { usePressAnimation } from "../../hooks/usePressAnimation.js";
-import { useTheme } from "../../theme/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 = useTheme();
-  const {
-    scale,
-    pressIn,
-    pressOut
-  } = usePressAnimation({
-    enabled: true
-  });
-  const styles = useMemo(() => buildActionStyles(theme), [theme]);
-  const onPress = () => {
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    action.onPress();
-  };
-  const badgeValue = action.badge;
-  const badgeIsDot = typeof badgeValue === 'number' && badgeValue === 0;
-  return /*#__PURE__*/_jsx(Animated.View, {
-    style: {
-      transform: [{
-        scale
-      }]
-    },
-    children: /*#__PURE__*/_jsxs(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__*/_jsx(View, {
-        style: styles.iconWrap,
-        children: action.icon
-      }), badgeValue !== undefined && !badgeIsDot ? /*#__PURE__*/_jsx(View, {
-        style: [styles.badge, badgeStyle],
-        pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(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 = /*#__PURE__*/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 = useTheme();
-  const insets = useSafeAreaInsets();
-  const v = useMemo(() => variantSize(theme, variant), [theme, variant]);
-  const styles = 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 = 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__*/_jsx(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__*/_jsx(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__*/_jsxs(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 ? Animated.View : View;
-  const rootHeightStyle = isCollapsing && collapse ? {
-    height: Animated.add(collapse.barHeight, new Animated.Value(insets.top))
-  } : {
-    height: v.height + insets.top
-  };
-  return /*#__PURE__*/_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 : StyleSheet.hairlineWidth,
-      borderBottomColor: theme.colors.border.primary
-    } : null, style, containerStyle],
-    children: [isCollapsing && collapse && !transparent ? /*#__PURE__*/_jsx(Animated.View, {
-      pointerEvents: "none",
-      style: [styles.animatedBorder, {
-        backgroundColor: theme.colors.border.primary,
-        opacity: collapse.borderOpacity
-      }]
-    }) : null, /*#__PURE__*/_jsxs(View, {
-      style: [styles.row, v.alignBottom ? styles.rowAlignBottom : null, {
-        flex: 1
-      }],
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.sideSlot,
-        children: leftAction ? /*#__PURE__*/_jsx(ActionButton, {
-          action: leftAction,
-          side: "left",
-          haptic: haptic
-        }) : null
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.center, titleAlignment === 'center' ? styles.centerAligned : styles.centerLeft],
-        children: titleBlock
-      }), /*#__PURE__*/_jsx(View, {
-        style: [styles.sideSlot, styles.sideSlotRight],
-        children: rightActions?.map((action, index) => /*#__PURE__*/_jsx(ActionButton, {
-          action: action,
-          side: "right",
-          badgeStyle: badgeStyle,
-          haptic: haptic
-        }, `appbar-right-${index}`))
-      })]
-    })]
-  });
-});
-AppBar.displayName = 'AppBar';
-const buildStyles = theme => 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: StyleSheet.hairlineWidth
-  }
-});
-const buildActionStyles = theme => StyleSheet.create({
-  actionButton: {
-    width: theme.components.appBar?.actionButtonSize ?? 40,
-    height: theme.components.appBar?.actionButtonSize ?? 40,
-    borderRadius: theme.radius.full,
-    ...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,
-    ...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
-  }
-});
-export { AppBar };
-export default AppBar;
-//# sourceMappingURL=AppBar.js.map
+"use strict";import React,{forwardRef,useMemo}from"react";import{Animated,Pressable,StyleSheet,Text,View}from"react-native";import{useSafeAreaInsets}from"react-native-safe-area-context";import{usePressAnimation}from"../../hooks/usePressAnimation.js";import{fontFor,useTheme}from"../../theme/index.js";import{smoothCorners}from"../../utils/corners.js";import{resolveHaptic,triggerHaptic}from"../../utils/hapticUtils.js";import{AppIcon}from"../AppIcon/AppIcon.js";import{Text as ThemedText}from"../Text/Text.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const variantSize=(t,e)=>{switch(e){case"compact":return{height:44,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1};case"large":return{height:96,titleSize:t.typography.fontSize["2xl"],titleWeight:"bold",alignBottom:!0};default:return{height:56,titleSize:t.typography.fontSize.lg,titleWeight:"semibold",alignBottom:!1}}},ActionButton=({action:t,side:e,badgeStyle:i,haptic:o,flush:n})=>{const r=useTheme(),{scale:a,pressIn:l,pressOut:s}=usePressAnimation({enabled:!0}),c=useMemo(()=>buildActionStyles(r),[r]),p=t.badge,d=void 0!==p&&0!==p,m=void 0!==t.text;return _jsx(Animated.View,{style:{transform:[{scale:a}]},children:_jsxs(Pressable,{onPress:()=>{const e=resolveHaptic(o,"selection");e&&triggerHaptic(e),t.onPress()},onPressIn:l,onPressOut:s,accessibilityRole:"button",accessibilityLabel:t.accessibilityLabel??t.text,testID:t.testID,android_ripple:{color:r.colors.surface.pressed,borderless:!m},style:({pressed:t})=>[m?c.textButton:c.actionButton,n?null:"left"===e?c.actionLeft:c.actionRight,t&&!m?c.actionPressed:null,t&&m?c.textPressed:null],children:[m?_jsx(Text,{style:c.actionText,numberOfLines:1,children:t.text}):_jsx(View,{style:c.iconWrap,children:t.icon}),d?_jsx(View,{style:[c.badge,i],pointerEvents:"none",children:_jsx(Text,{style:c.badgeText,numberOfLines:1,children:String(p)})}):null,t.dot?_jsx(View,{testID:t.testID?`${t.testID}-dot`:"appbar-action-dot",style:c.dot,pointerEvents:"none"}):null]})})},COLLAPSE_RANGE=60,LARGE_TITLE_SCALE_END=.71,AppBar=forwardRef((t,e)=>{const{title:i,subtitle:o,titleAlignment:n="left",leftAction:r,rightActions:a,leading:l,trailing:s,onBack:c,gutter:p,titleVariant:d,titleOffset:m,height:g,divider:u,variant:h="default",transparent:f=!1,scrollY:x,style:y,containerStyle:b,titleStyle:S,subtitleStyle:B,badgeStyle:A,haptic:j,testID:T}=t,w=useTheme(),z=useSafeAreaInsets(),C=useMemo(()=>variantSize(w,h),[w,h]),_=useMemo(()=>buildStyles(w),[w]),I="large"===h&&void 0!==x,R=w.components.appBar?.iconSize??24,v=w.components.appBar?.actionButtonSize??44,W=r??(c?{icon:_jsx(AppIcon,{name:"arrow-left",size:R,color:w.colors.text.primary}),onPress:c,accessibilityLabel:"Back"}:void 0),L=s?void 0:a?.[a.length-1],opticalInset=t=>void 0===t?0:void 0!==t.text?w.spacing.sm:Math.max((v-R)/2,0),V=void 0===p?null:{paddingLeft:Math.max(p-opticalInset(W),0),paddingRight:Math.max(p-opticalInset(L),0)},O=void 0!==m,P=Boolean(W)||Boolean(l),H=u??!f,D=w.components.appBar?.dividerWidth??StyleSheet.hairlineWidth,E=w.components.appBar?.collapseTranslateDistance??-20,M=useMemo(()=>{if(!x)return null;const t={inputRange:[0,60],extrapolate:"clamp"};return{titleScale:x.interpolate({...t,outputRange:[1,.71]}),titleTranslateY:x.interpolate({...t,outputRange:[0,E]}),titleTranslateX:x.interpolate({...t,outputRange:"center"===n?[0,0]:[0,8]}),subtitleOpacity:x.interpolate({inputRange:[0,30],outputRange:[1,0],extrapolate:"clamp"}),barHeight:x.interpolate({...t,outputRange:[96,56]}),borderOpacity:x.interpolate({...t,outputRange:[0,1]})}},[x,n,E]),k=I&&M?{transform:[{translateX:M.titleTranslateX},{translateY:M.titleTranslateY},{scale:M.titleScale}]}:null,F=i?d?_jsx(Animated.View,{style:k,children:_jsx(ThemedText,{variant:d,align:"center"===n?"center":"left",accessibilityRole:"header",numberOfLines:1,style:[_.titleVariant,S],children:i})}):_jsx(Animated.Text,{accessibilityRole:"header",style:[_.title,{fontSize:C.titleSize,fontWeight:w.typography.fontWeight[C.titleWeight],textAlign:"center"===n?"center":"left"},k,S],numberOfLines:1,children:i}):null,Y=o?_jsx(Animated.Text,{style:[_.subtitle,{textAlign:"center"===n?"center":"left"},I&&M?{opacity:M.subtitleOpacity}:null,B],numberOfLines:1,children:o}):null,N=_jsxs(View,{style:[_.titleColumn,"center"===n?_.titleColumnCenter:null,C.alignBottom?_.titleColumnBottom:null],children:[F,Y]}),X=I?Animated.View:View,G=I&&M?{height:Animated.add(M.barHeight,new Animated.Value(z.top))}:{height:(g??C.height)+z.top};return _jsxs(X,{ref:e,testID:T,style:[_.root,{paddingTop:z.top,backgroundColor:f?"transparent":w.colors.background.elevated},G,!I&&H?{borderBottomWidth:D,borderBottomColor:w.colors.border.primary}:null,y,b],children:[I&&M&&H?_jsx(Animated.View,{pointerEvents:"none",style:[_.animatedBorder,{backgroundColor:w.colors.border.primary,opacity:M.borderOpacity}]}):null,_jsxs(View,{style:[_.row,C.alignBottom?_.rowAlignBottom:null,V,{flex:1}],children:[_jsxs(View,{style:[_.sideSlot,O?_.sideSlotCompact:null],children:[W?_jsx(ActionButton,{action:W,side:"left",haptic:j,flush:O}):null,l]}),_jsx(View,{pointerEvents:"none",style:[_.center,"center"===n?_.centerAligned:_.centerLeft,O?{paddingLeft:P?m:0,paddingRight:0}:null],children:N}),_jsxs(View,{style:[_.sideSlot,_.sideSlotRight,O?_.sideSlotCompact:null],children:[a?.map((t,e)=>_jsx(ActionButton,{action:t,side:"right",badgeStyle:A,haptic:j,flush:O},`appbar-right-${e}`)),s]})]})]})});AppBar.displayName="AppBar";const buildStyles=t=>StyleSheet.create({root:{width:"100%"},row:{flexDirection:"row",alignItems:"center",paddingHorizontal:t.spacing.xs},rowAlignBottom:{alignItems:"flex-end",paddingBottom:t.spacing.sm},sideSlot:{flexDirection:"row",alignItems:"center",minWidth:t.components.appBar?.sideSlotMinWidth??48},sideSlotRight:{justifyContent:"flex-end"},sideSlotCompact:{minWidth:0},center:{flex:1,paddingHorizontal:t.spacing.xs},centerAligned:{alignItems:"center"},centerLeft:{alignItems:"flex-start"},titleColumn:{flexDirection:"column"},titleColumnCenter:{alignItems:"center"},titleColumnBottom:{justifyContent:"flex-end"},title:{color:t.colors.text.primary},titleVariant:{includeFontPadding:!1,textAlignVertical:"center"},subtitle:{marginTop:t.components.appBar?.subtitleMarginTop??2,color:t.colors.text.tertiary,fontSize:t.typography.fontSize.sm,fontWeight:t.typography.fontWeight.normal},animatedBorder:{position:"absolute",left:0,right:0,bottom:0,height:StyleSheet.hairlineWidth}}),buildActionStyles=t=>StyleSheet.create({actionButton:{width:t.components.appBar?.actionButtonSize??44,height:t.components.appBar?.actionButtonSize??44,borderRadius:t.radius.full,...smoothCorners,alignItems:"center",justifyContent:"center"},actionLeft:{marginRight:t.spacing.xs},actionRight:{marginLeft:t.spacing.xs},actionPressed:{backgroundColor:t.colors.surface.pressed},textButton:{minWidth:44,minHeight:44,paddingHorizontal:t.spacing.sm,alignItems:"center",justifyContent:"center"},textPressed:{opacity:.6},actionText:{color:t.colors.text.link,fontSize:t.typography.fontSize.base,...fontFor(t,"semibold")},dot:{position:"absolute",top:t.components.appBar?.dotOffset??10,right:t.components.appBar?.dotOffset??10,width:t.components.appBar?.dotSize??8,height:t.components.appBar?.dotSize??8,borderRadius:t.radius.full,backgroundColor:t.colors.error},iconWrap:{alignItems:"center",justifyContent:"center"},badge:{position:"absolute",top:t.components.appBar?.badgeOffset??4,right:t.components.appBar?.badgeOffset??4,minWidth:t.components.appBar?.badgeMinWidth??16,height:t.components.appBar?.badgeHeight??16,paddingHorizontal:t.components.appBar?.badgePaddingHorizontal??4,borderRadius:t.radius.full,...smoothCorners,backgroundColor:t.colors.error,alignItems:"center",justifyContent:"center"},badgeText:{color:t.colors.onError,fontSize:t.components.appBar?.badgeFontSize??10,fontWeight:t.typography.fontWeight.semibold,lineHeight:t.components.appBar?.badgeLineHeight??12}});export{AppBar};export default AppBar;

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

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

package/lib/module/components/AppIcon/AppIcon.js

@@ -1,136 +1 @@
-"use strict";
-
-/**
- * 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`.
- */
-
-import { Logger } from '@webority/mobile-core';
-import React, { useMemo } from 'react';
-import { SvgXml } from 'react-native-svg';
-import { useTheme } from "../../theme/index.js";
-import { CATALOG_LOADERS, ICON_NAMES } from "./catalog.g.js";
-import { CURATED_ICON_NAMES, GLYPHS } from "./glyphs.g.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-export { CURATED_ICON_NAMES, ICON_NAMES };
-
-/** `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. */
-export const 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 = 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. */
-export const resolveGlyph = (name, variant = 'linear') => {
-  // Curated names first: the semantic set is the design system's contract.
-  const curatedLinear = 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. */
-export 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>`;
-export const AppIcon = ({
-  name,
-  size = 'md',
-  color,
-  variant = 'linear',
-  style,
-  accessibilityLabel,
-  testID
-}) => {
-  const theme = 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 = useMemo(() => body ? buildIconXml(body, px, resolvedColor) : null, [body, px, resolvedColor]);
-  if (!xml) {
-    if (__DEV__ && !warned.has(name)) {
-      warned.add(name);
-      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__*/_jsx(SvgXml, {
-    xml: xml,
-    width: px,
-    height: px,
-    style: style,
-    accessible: accessibilityLabel != null,
-    accessibilityLabel: accessibilityLabel,
-    accessibilityRole: accessibilityLabel != null ? 'image' : undefined,
-    testID: testID
-  });
-};
-AppIcon.displayName = 'AppIcon';
-export default AppIcon;
-//# sourceMappingURL=AppIcon.js.map
+"use strict";import{Logger}from"@webority/mobile-core";import React,{useMemo}from"react";import{SvgXml}from"react-native-svg";import{useTheme}from"../../theme/index.js";import{CATALOG_LOADERS,ICON_NAMES}from"./catalog.g.js";import{CURATED_ICON_NAMES,GLYPHS}from"./glyphs.g.js";import{jsx as _jsx}from"react/jsx-runtime";export{CURATED_ICON_NAMES,ICON_NAMES};export const ICONSAX_SUFFIX="-iconsax";export const APP_ICON_SIZES={xs:14,sm:18,md:22,lg:28,xl:36};const 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()??"",o=`${e}:${t}`,a=shardCache.get(o);if(void 0!==a)return a;const n=CATALOG_LOADERS[e]?.[t],s=n?tryRequire(n):null;return shardCache.set(o,s),s},warned=new Set,resolveCatalogue=(e,r)=>{const t=loadShard(r,e)?.[e];return t||("linear"===r?null:loadShard("linear",e)?.[e]??null)};export const resolveGlyph=(e,r="linear")=>{if(e.endsWith("-iconsax")){const t=e.slice(0,-8);return t in GLYPHS?resolveCatalogue(t,r):null}const t=GLYPHS[e];return t?"linear"===r?t:loadCuratedVariants()[r]?.[e]??t:resolveCatalogue(e,r)};export 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>`;export const AppIcon=({name:e,size:r="md",color:t,variant:o="linear",style:a,accessibilityLabel:n,testID:s})=>{const l=useTheme(),i="number"==typeof r?r:APP_ICON_SIZES[r],c=t??l.colors.text.primary,u=resolveGlyph(e,o),m=useMemo(()=>u?buildIconXml(u,i,c):null,[u,i,c]);return m?_jsx(SvgXml,{xml:m,width:i,height:i,style:a,accessible:null!=n,accessibilityLabel:n,accessibilityRole:null!=n?"image":void 0,testID:s}):(__DEV__&&!warned.has(e)&&(warned.add(e),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)};AppIcon.displayName="AppIcon";export default AppIcon;