@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Tabs/Tabs.js

@@ -1,425 +1 @@
-"use strict";
-
-/**
- * Tabs — top tabs with an animated underline, pill or segmented indicator.
- *
- * Layout: equal-width row by default, or horizontal-scrollable when
- * `scrollable` is true. The active indicator (underline, pill or segmented
- * thumb) is an Animated.View positioned absolutely; its translateX + width
- * spring to the measured layout of the active tab. Driven by native driver
- * where possible (transform); width animates separately on the JS thread
- * because RN's native driver does not support layout props.
- *
- * `segmented` borrows SegmentedControl's look (filled track, sliding thumb)
- * for tabs that sit inside content, reading that control's size table and
- * theme overrides so the two stay in step; the inset is the tabs' own token
- * (tabs.trackPadding, 4). It is a look, not a semantic change: the roles
- * stay tablist/tab, and a value choice is still SegmentedControl.
- */
-
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { createAnimatedValue, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { renderSlotIcon } from "../AppIcon/slotIcon.js";
-import { segmentedControlSizes } from "../SegmentedControl/SegmentedControl.js";
-import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
-
-/** A theme radius token or a pixel number. */
-
-/** What a tab knows about itself when it draws its icon. */
-
-/**
- * A tab icon speaks the library's slot language: an AppIcon name
- * (`icon: 'home'`), `{ name, variant }`, a render function that gets
- * `{ color, size, focused, disabled }`, or any node drawn as is. A name is
- * drawn in the label's colour at the tabs' icon size.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// md is the bar as it always was; sm and lg step the type, padding and icon
-// one notch each way on the theme scales (type sm/base/lg, spacing sm/md/lg
-// vertical, xs/sm/md fixed and md/lg/xl scrollable).
-const tabsSizes = {
-  sm: {
-    fontSize: 13,
-    paddingVertical: 8,
-    paddingHorizontal: 4,
-    scrollablePaddingHorizontal: 12,
-    iconSize: 16
-  },
-  md: {
-    fontSize: 15,
-    paddingVertical: 12,
-    paddingHorizontal: 8,
-    scrollablePaddingHorizontal: 16,
-    iconSize: 18
-  },
-  lg: {
-    fontSize: 17,
-    paddingVertical: 16,
-    paddingHorizontal: 12,
-    scrollablePaddingHorizontal: 24,
-    iconSize: 20
-  }
-};
-const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    tabs,
-    activeKey,
-    onChange,
-    variant = 'underline',
-    radius,
-    size = 'md',
-    scrollable = false,
-    align = 'left',
-    style,
-    containerStyle,
-    tabStyle,
-    tabLabelStyle,
-    tabIconStyle,
-    tabBadgeStyle,
-    dividerStyle,
-    indicatorStyle,
-    progress,
-    haptic,
-    accessibilityLabel,
-    testID
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const tabsTokens = theme.components.tabs;
-  // Equal-width tabs get their width from `flex: 1`, so horizontal padding is
-  // only a minimum inset; a generous one starves the label on a phone (four
-  // tabs in ~250dp with 16dp each side left ~30dp for "Overview" and
-  // ellipsized every label). Scrollable tabs size themselves by content, so
-  // there the padding IS the tab width and keeps the wider default.
-  // Precedence: the per-size token, then the flat token, then the size table.
-  const sizeDefaults = tabsSizes[size];
-  const sizeTokens = tabsTokens?.[size];
-  const tabPaddingHorizontal = scrollable ? sizeTokens?.scrollablePaddingHorizontal ?? tabsTokens?.tabPaddingHorizontal ?? sizeDefaults.scrollablePaddingHorizontal : sizeTokens?.paddingHorizontal ?? tabsTokens?.tabPaddingHorizontal ?? sizeDefaults.paddingHorizontal;
-  const tabPaddingVertical = sizeTokens?.paddingVertical ?? tabsTokens?.tabPaddingVertical ?? sizeDefaults.paddingVertical;
-  const labelFontSize = sizeTokens?.fontSize ?? sizeDefaults.fontSize;
-  const tabIconSpacing = tabsTokens?.tabIconSpacing ?? 6;
-  const tabIconSize = sizeTokens?.iconSize ?? tabsTokens?.tabIconSize ?? sizeDefaults.iconSize;
-  const underlineHeight = tabsTokens?.underlineHeight ?? 2;
-  const pillInset = tabsTokens?.pillInset ?? 4;
-  const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
-  const badgeGap = tabsTokens?.badgeGap ?? 6;
-  const isSegmented = variant === 'segmented';
-  // The segmented variant is SegmentedControl's look at the same size name,
-  // numbers included: its height, font size, side padding and track inset,
-  // plus any override a theme gives that control. The tabs tokens above do
-  // not apply to it.
-  const segTheme = theme.components.segmentedControl;
-  const segSize = segmentedControlSizes[size];
-  const segHeight = segTheme?.[size]?.height ?? segSize.height;
-  const segFontSize = segTheme?.[size]?.fontSize ?? segSize.fontSize;
-  const segPaddingHorizontal = segTheme?.[size]?.paddingHorizontal ?? segSize.paddingHorizontal;
-  const trackPadding = tabsTokens?.trackPadding ?? 4;
-
-  // Corner radius: the prop, else the theme's tabs.radius, else each variant's
-  // own default. The segmented thumb nests inside the track, so its corner is
-  // the track's minus the inset (a concentric corner), never larger.
-  const chosenRadius = typeof radius === 'number' ? radius : radius ? theme.radius[radius] : tabsTokens?.radius;
-  const trackRadius = chosenRadius ?? theme.radius.md;
-  const thumbRadius = chosenRadius === undefined ? theme.radius.sm : Math.max(chosenRadius - trackPadding, 0);
-  const pillRadius = chosenRadius ?? theme.radius.full;
-  const underlineRadius = chosenRadius ?? 0;
-
-  // Android smooth corners on the segmented track: the fill is drawn as an
-  // SVG squircle over a transparent host, the same way SegmentedControl draws
-  // its track. Inert for the other two variants.
-  const trackFill = theme.colors.background.tertiary;
-  const squircle = useSquircle(isSegmented, trackRadius);
-
-  // Per-tab measured layouts (key → {x, width}).
-  const [layouts, setLayouts] = useState({});
-  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
-  const indicatorWidth = useRef(createAnimatedValue(0)).current;
-  const activeLayout = layouts[activeKey];
-
-  // Progress-driven mode: when the caller supplies a fractional-index signal
-  // and every tab has reported its layout, the indicator's translateX/width
-  // are interpolated from that signal — the press-spring is suppressed so the
-  // two drivers don't fight for the same view.
-  const allMeasured = tabs.every(t => layouts[t.key] !== undefined);
-  const useProgress = progress !== undefined && allMeasured && tabs.length > 1;
-  const progressTranslateX = useMemo(() => {
-    if (!useProgress || !progress) {
-      return null;
-    }
-    return progress.interpolate({
-      inputRange: tabs.map((_, i) => i),
-      outputRange: tabs.map(t => layouts[t.key].x),
-      extrapolate: 'clamp'
-    });
-  }, [useProgress, progress, tabs, layouts]);
-  const progressWidth = useMemo(() => {
-    if (!useProgress || !progress) {
-      return null;
-    }
-    return progress.interpolate({
-      inputRange: tabs.map((_, i) => i),
-      outputRange: tabs.map(t => layouts[t.key].width),
-      extrapolate: 'clamp'
-    });
-  }, [useProgress, progress, tabs, layouts]);
-
-  // Animate indicator whenever activeKey or its layout changes.
-  // biome-ignore lint/correctness/useExhaustiveDependencies: `activeKey` is the TRIGGER that moves the indicator; the body reads the derived `activeLayout`, so removing it would stop the indicator from animating on tab change
-  useEffect(() => {
-    if (!activeLayout) {
-      return;
-    }
-    if (useProgress) {
-      return;
-    }
-    const spring = theme.motion.spring.snappy;
-    const anim = Animated.parallel([
-    // Both must use the JS driver: width can't run on native, and mixing
-    // drivers on the same view (transform native + width JS) trips RN's
-    // "node already moved to native" guard under the new architecture.
-    // Clamped: the `snappy` preset is underdamped (ratio ~0.7) and would carry
-    // the indicator past the tab and back, poking the segmented thumb out of
-    // its track. With the clamp it decelerates into the target and stops there.
-    Animated.spring(indicatorTranslateX, {
-      toValue: activeLayout.x,
-      damping: spring.damping,
-      stiffness: spring.stiffness,
-      mass: spring.mass,
-      overshootClamping: true,
-      useNativeDriver: false
-    }), Animated.spring(indicatorWidth, {
-      toValue: activeLayout.width,
-      damping: spring.damping,
-      stiffness: spring.stiffness,
-      mass: spring.mass,
-      overshootClamping: true,
-      useNativeDriver: false
-    })]);
-    anim.start();
-    return () => anim.stop();
-  }, [activeLayout, activeKey, indicatorTranslateX, indicatorWidth, theme.motion.spring.snappy, useProgress]);
-  const handleLayout = useCallback(key => e => {
-    const {
-      x,
-      width
-    } = e.nativeEvent.layout;
-    setLayouts(prev => {
-      const existing = prev[key];
-      if (existing && existing.x === x && existing.width === width) {
-        return prev;
-      }
-      return {
-        ...prev,
-        [key]: {
-          x,
-          width
-        }
-      };
-    });
-  }, []);
-  const handlePress = useCallback(tab => {
-    if (tab.disabled) {
-      return;
-    }
-    if (tab.key === activeKey) {
-      return;
-    }
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onChange(tab.key);
-  }, [activeKey, onChange, haptic]);
-  const indicatorIsPill = variant === 'pills';
-
-  // Indicator visual. The segmented thumb is rendered BEFORE the tabs (like
-  // SegmentedControl's), so it sits under the labels without a zIndex trick.
-  const indicator = /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "none",
-    style: [isSegmented ? styles.indicatorThumb : indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, isSegmented ? null : indicatorIsPill ? {
-      top: pillInset,
-      bottom: pillInset
-    } : {
-      height: underlineHeight
-    }, {
-      width: progressWidth ?? indicatorWidth,
-      transform: [{
-        translateX: progressTranslateX ?? indicatorTranslateX
-      }],
-      backgroundColor: isSegmented ? theme.colors.background.elevated : indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
-      borderRadius: isSegmented ? thumbRadius : indicatorIsPill ? pillRadius : underlineRadius,
-      ...smoothCorners
-    }, indicatorStyle]
-  });
-  const renderTabs = () => tabs.map(tab => {
-    const isActive = tab.key === activeKey;
-    const isDisabled = tab.disabled === true;
-    // The active label (and a named icon) is always the brand colour, on
-    // every variant; the team asked for the segmented variant to match.
-    const labelColor = isActive ? theme.colors.primary : theme.colors.text.tertiary;
-    const iconNode = renderSlotIcon(tab.icon, {
-      color: labelColor,
-      size: tabIconSize,
-      focused: isActive,
-      disabled: isDisabled
-    });
-    return /*#__PURE__*/_jsxs(Pressable, {
-      onPress: () => handlePress(tab),
-      onLayout: handleLayout(tab.key),
-      disabled: isDisabled,
-      accessibilityRole: "tab",
-      accessibilityLabel: tab.label,
-      accessibilityState: {
-        selected: isActive,
-        disabled: isDisabled
-      }
-      // A ripple or pressed fill on a segmented tab would paint over the
-      // thumb beneath it, so that variant dims the label instead.
-      ,
-      android_ripple: isSegmented ? undefined : {
-        color: theme.colors.surface.pressed,
-        borderless: false
-      },
-      style: ({
-        pressed
-      }) => [styles.tab, scrollable ? null : styles.tabFlex, isSegmented ? {
-        paddingHorizontal: segPaddingHorizontal,
-        height: segHeight - trackPadding * 2
-      } : {
-        paddingHorizontal: tabPaddingHorizontal,
-        paddingVertical: tabPaddingVertical
-      }, {
-        opacity: isDisabled ? disabledOpacity : pressed && isSegmented && !isActive ? 0.7 : 1,
-        backgroundColor: pressed && !isSegmented ? theme.colors.surface.pressed : 'transparent'
-      }, tabStyle],
-      children: [iconNode ? /*#__PURE__*/_jsx(View, {
-        style: [styles.tabIcon, {
-          marginRight: tabIconSpacing
-        }, tabIconStyle],
-        children: iconNode
-      }) : null, /*#__PURE__*/_jsx(Text, {
-        style: [styles.tabLabel, {
-          color: labelColor,
-          fontSize: isSegmented ? segFontSize : labelFontSize,
-          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
-        }, tabLabelStyle]
-        // One type size for every label in the row: a label that does not fit
-        // ellipsizes at full size. The type used to shrink to 75% first, but
-        // iOS applied that shrink to a badged tab whose label fit, and to a
-        // disabled tab, so one row came out in three sizes (team, 23-Sep-2026).
-        ,
-        numberOfLines: 1,
-        children: tab.label
-      }), tab.badge !== undefined && tab.badge !== null ? /*#__PURE__*/_jsx(View, {
-        style: [styles.tabBadge, {
-          marginLeft: badgeGap,
-          backgroundColor: theme.colors.primaryMuted,
-          borderRadius: theme.radius.full,
-          ...smoothCorners,
-          paddingHorizontal: theme.spacing.xs
-        }, tabBadgeStyle],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: {
-            color: theme.colors.primary,
-            fontSize: theme.typography.fontSize.xs,
-            fontWeight: theme.typography.fontWeight.semibold
-          },
-          numberOfLines: 1,
-          children: String(tab.badge)
-        })
-      }) : null]
-    }, tab.key);
-  });
-  const baseRowStyle = {
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    justifyContent: scrollable ? 'flex-start' : align === 'center' ? 'center' : 'flex-start',
-    position: 'relative',
-    // Second guard: whatever the indicator draws mid-flight stays inside the row.
-    overflow: 'hidden'
-  };
-  const row = isSegmented ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [indicator, renderTabs()]
-  }) : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderTabs(), indicator]
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [styles.container, {
-      borderBottomColor: theme.colors.border.secondary,
-      borderBottomWidth: variant === 'underline' ? StyleSheet.hairlineWidth : 0
-    }, variant === 'underline' ? dividerStyle : null, isSegmented ? {
-      padding: trackPadding,
-      borderRadius: trackRadius,
-      ...smoothCorners,
-      backgroundColor: squircle.active ? 'transparent' : trackFill
-    } : null, style, containerStyle],
-    onLayout: squircle.onLayout,
-    accessibilityRole: "tablist",
-    accessibilityLabel: accessibilityLabel,
-    testID: testID,
-    children: [squircle.active && squircle.size ? /*#__PURE__*/_jsx(SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: trackRadius,
-      fill: trackFill
-    }) : null, scrollable ? /*#__PURE__*/_jsx(ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [baseRowStyle],
-      keyboardShouldPersistTaps: "handled",
-      children: row
-    }) : /*#__PURE__*/_jsx(View, {
-      style: baseRowStyle,
-      children: row
-    })]
-  });
-});
-Tabs.displayName = 'Tabs';
-const buildStyles = _theme => StyleSheet.create({
-  container: {
-    width: '100%',
-    position: 'relative'
-  },
-  tab: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  tabFlex: {
-    flex: 1
-  },
-  tabIcon: {},
-  tabLabel: {
-    includeFontPadding: false,
-    // Let the label give way before the icon or badge is pushed out of the tab.
-    flexShrink: 1
-  },
-  tabBadge: {
-    minWidth: 18,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  indicatorUnderline: {
-    position: 'absolute',
-    left: 0,
-    bottom: 0
-  },
-  indicatorPill: {
-    position: 'absolute',
-    left: 0,
-    zIndex: -1
-  },
-  indicatorThumb: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0
-  }
-});
-export { Tabs };
-export default Tabs;
-//# sourceMappingURL=Tabs.js.map
+"use strict";import{forwardRef,useCallback,useEffect,useMemo,useRef,useState}from"react";import{Animated,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{createAnimatedValue,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{renderSlotIcon}from"../AppIcon/slotIcon.js";import{segmentedControlSizes}from"../SegmentedControl/SegmentedControl.js";import{SquircleFill,useSquircle}from"../SquircleFill/SquircleFill.js";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const tabsSizes={sm:{fontSize:13,paddingVertical:8,paddingHorizontal:4,scrollablePaddingHorizontal:12,iconSize:16},md:{fontSize:15,paddingVertical:12,paddingHorizontal:8,scrollablePaddingHorizontal:16,iconSize:18},lg:{fontSize:17,paddingVertical:16,paddingHorizontal:12,scrollablePaddingHorizontal:24,iconSize:20}},Tabs=forwardRef((e,t)=>{const{tabs:i,activeKey:o,onChange:a,variant:r="underline",radius:n,size:l="md",scrollable:s=!1,align:d="left",style:c,containerStyle:u,tabStyle:p,tabLabelStyle:m,tabIconStyle:g,tabBadgeStyle:b,dividerStyle:f,indicatorStyle:h,progress:y,haptic:S,accessibilityLabel:z,testID:x}=e,v=useTheme(),j=useMemo(()=>buildStyles(v),[v]),C=v.components.tabs,w=tabsSizes[l],H=C?.[l],k=s?H?.scrollablePaddingHorizontal??C?.tabPaddingHorizontal??w.scrollablePaddingHorizontal:H?.paddingHorizontal??C?.tabPaddingHorizontal??w.paddingHorizontal,V=H?.paddingVertical??C?.tabPaddingVertical??w.paddingVertical,I=H?.fontSize??w.fontSize,P=C?.tabIconSpacing??6,_=H?.iconSize??C?.tabIconSize??w.iconSize,R=C?.underlineHeight??2,T=C?.pillInset??4,L=C?.disabledOpacity??.45,F=C?.badgeGap??6,A="segmented"===r,W=v.components.segmentedControl,M=segmentedControlSizes[l],q=W?.[l]?.height??M.height,D=W?.[l]?.fontSize??M.fontSize,B=W?.[l]?.paddingHorizontal??M.paddingHorizontal,E=C?.trackPadding??4,N="number"==typeof n?n:n?v.radius[n]:C?.radius,O=N??v.radius.md,U=void 0===N?v.radius.sm:Math.max(N-E,0),G=N??v.radius.full,K=N??0,X=v.colors.background.tertiary,J=useSquircle(A,O),[Q,Y]=useState({}),Z=useRef(createAnimatedValue(0)).current,$=useRef(createAnimatedValue(0)).current,ee=Q[o],te=i.every(e=>void 0!==Q[e.key]),ie=void 0!==y&&te&&i.length>1,oe=useMemo(()=>ie&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>Q[e.key].x),extrapolate:"clamp"}):null,[ie,y,i,Q]),ae=useMemo(()=>ie&&y?y.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>Q[e.key].width),extrapolate:"clamp"}):null,[ie,y,i,Q]);useEffect(()=>{if(!ee)return;if(ie)return;const e=v.motion.spring.snappy,t=Animated.parallel([Animated.spring(Z,{toValue:ee.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),Animated.spring($,{toValue:ee.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[ee,o,Z,$,v.motion.spring.snappy,ie]);const re=useCallback(e=>t=>{const{x:i,width:o}=t.nativeEvent.layout;Y(t=>{const a=t[e];return a&&a.x===i&&a.width===o?t:{...t,[e]:{x:i,width:o}}})},[]),ne=useCallback(e=>{if(e.disabled)return;if(e.key===o)return;const t=resolveHaptic(S,"selection");t&&triggerHaptic(t),a(e.key)},[o,a,S]),le="pills"===r,se=_jsx(Animated.View,{pointerEvents:"none",style:[A?j.indicatorThumb:le?j.indicatorPill:j.indicatorUnderline,A?null:le?{top:T,bottom:T}:{height:R},{width:ae??$,transform:[{translateX:oe??Z}],backgroundColor:A?v.colors.background.elevated:le?v.colors.primaryMuted:v.colors.primary,borderRadius:A?U:le?G:K,...smoothCorners},h]}),renderTabs=()=>i.map(e=>{const t=e.key===o,i=!0===e.disabled,a=t?v.colors.primary:v.colors.text.tertiary,r=renderSlotIcon(e.icon,{color:a,size:_,focused:t,disabled:i});return _jsxs(Pressable,{onPress:()=>ne(e),onLayout:re(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},android_ripple:A?void 0:{color:v.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[j.tab,s?null:j.tabFlex,A?{paddingHorizontal:B,height:q-2*E}:{paddingHorizontal:k,paddingVertical:V},{opacity:i?L:e&&A&&!t?.7:1,backgroundColor:e&&!A?v.colors.surface.pressed:"transparent"},p],children:[r?_jsx(View,{style:[j.tabIcon,{marginRight:P},g],children:r}):null,_jsx(Text,{style:[j.tabLabel,{color:a,fontSize:A?D:I,fontWeight:t?v.typography.fontWeight.semibold:v.typography.fontWeight.medium},m],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?_jsx(View,{style:[j.tabBadge,{marginLeft:F,backgroundColor:v.colors.primaryMuted,borderRadius:v.radius.full,...smoothCorners,paddingHorizontal:v.spacing.xs},b],children:_jsx(Text,{style:{color:v.colors.primary,fontSize:v.typography.fontSize.xs,fontWeight:v.typography.fontWeight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),de={flexDirection:"row",alignItems:"stretch",justifyContent:s?"flex-start":"center"===d?"center":"flex-start",position:"relative",overflow:"hidden"},ce=_jsxs(_Fragment,A?{children:[se,renderTabs()]}:{children:[renderTabs(),se]});return _jsxs(View,{ref:t,style:[j.container,{borderBottomColor:v.colors.border.secondary,borderBottomWidth:"underline"===r?StyleSheet.hairlineWidth:0},"underline"===r?f:null,A?{padding:E,borderRadius:O,...smoothCorners,backgroundColor:J.active?"transparent":X}:null,c,u],onLayout:J.onLayout,accessibilityRole:"tablist",accessibilityLabel:z,testID:x,children:[J.active&&J.size?_jsx(SquircleFill,{width:J.size.width,height:J.size.height,radius:O,fill:X}):null,s?_jsx(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[de],keyboardShouldPersistTaps:"handled",children:ce}):_jsx(View,{style:de,children:ce})]})});Tabs.displayName="Tabs";const buildStyles=e=>StyleSheet.create({container:{width:"100%",position:"relative"},tab:{flexDirection:"row",alignItems:"center",justifyContent:"center"},tabFlex:{flex:1},tabIcon:{},tabLabel:{includeFontPadding:!1,flexShrink:1},tabBadge:{minWidth:18,alignItems:"center",justifyContent:"center"},indicatorUnderline:{position:"absolute",left:0,bottom:0},indicatorPill:{position:"absolute",left:0,zIndex:-1},indicatorThumb:{position:"absolute",left:0,top:0,bottom:0}});export{Tabs};export default Tabs;

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

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

package/lib/module/components/TagInput/TagInput.js

@@ -1,181 +1 @@
-"use strict";
-
-import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
-import { StyleSheet, TextInput, View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { mergeRefs, resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { Chip } from "../Chip/index.js";
-import { FieldBase } from "../FieldBase/index.js";
-import { FormField } from "../FormField/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Chips as input — the "type a value, press enter, it becomes a tag" field.
- * Chip renders a tag and Input takes text, but nothing joined them, so consumers
- * built this by hand each time (and each one disagreed about backspace).
- */
-export const TagInput = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    onChange,
-    placeholder,
-    label,
-    helperText,
-    error,
-    required,
-    disabled = false,
-    size = 'md',
-    variant,
-    maxTags,
-    unique = true,
-    transform,
-    separators = [','],
-    haptic,
-    style,
-    testID
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [tags, setTags] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? [],
-    onChange
-  });
-  const [draft, setDraft] = useState('');
-  const [focused, setFocused] = useState(false);
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = useRef(null);
-  const setInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
-  const focusInput = useCallback(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  const atCapacity = typeof maxTags === 'number' && tags.length >= maxTags;
-  const commit = useCallback(raw => {
-    const candidate = transform ? transform(raw.trim()) : raw.trim();
-    if (!candidate) {
-      return;
-    }
-    if (atCapacity) {
-      return;
-    }
-    if (unique && tags.some(t => t.toLowerCase() === candidate.toLowerCase())) {
-      setDraft('');
-      return;
-    }
-    setTags([...tags, candidate]);
-    setDraft('');
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-  }, [atCapacity, haptic, setTags, tags, transform, unique]);
-  const removeAt = useCallback(index => {
-    const next = tags.filter((_, i) => i !== index);
-    setTags(next);
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-  }, [haptic, setTags, tags]);
-  const handleChangeText = useCallback(text => {
-    // A separator keystroke commits rather than being typed into the draft.
-    const hit = separators.find(s => s.length > 0 && text.includes(s));
-    if (hit) {
-      const [head] = text.split(hit);
-      commit(head);
-      return;
-    }
-    setDraft(text);
-  }, [commit, separators]);
-  const handleKeyPress = useCallback(e => {
-    if (disabled) {
-      return;
-    }
-    // Backspace on an empty draft removes the last tag — the behaviour every
-    // hand-rolled version got wrong or skipped.
-    if (e.nativeEvent.key === 'Backspace' && draft === '' && tags.length > 0) {
-      removeAt(tags.length - 1);
-    }
-  }, [disabled, draft, removeAt, tags.length]);
-  const field = /*#__PURE__*/_jsx(FieldBase, {
-    size: size,
-    variant: variant,
-    focused: focused,
-    disabled: disabled,
-    error: Boolean(error),
-    filled: tags.length > 0 || draft.length > 0,
-    onPress: focusInput,
-    pressFeedback: false,
-    style: style,
-    children: /*#__PURE__*/_jsxs(View, {
-      style: styles.wrap,
-      children: [tags.map((tag, index) => /*#__PURE__*/_jsx(Chip, {
-        label: tag,
-        size: "sm",
-        onClose: disabled ? undefined : () => removeAt(index),
-        haptic: haptic
-      }, `${tag}-${index}`)), /*#__PURE__*/_jsx(TextInput, {
-        ref: setInputRef,
-        value: draft,
-        onChangeText: handleChangeText,
-        onKeyPress: handleKeyPress,
-        onSubmitEditing: () => commit(draft),
-        onFocus: () => setFocused(true),
-        onBlur: () => {
-          setFocused(false);
-          // Committing on blur means a typed-but-unsubmitted value is not lost.
-          commit(draft);
-        },
-        editable: !disabled && !atCapacity,
-        placeholder: atCapacity ? undefined : placeholder,
-        placeholderTextColor: theme.colors.text.tertiary,
-        blurOnSubmit: false,
-        returnKeyType: "done",
-        style: [styles.input, {
-          color: theme.colors.text.primary,
-          fontSize: theme.typography.fontSize.base
-        }],
-        testID: testID ? `${testID}-input` : undefined
-      })]
-    })
-  });
-  if (!label && !helperText && !error) {
-    return /*#__PURE__*/_jsx(View, {
-      testID: testID,
-      children: field
-    });
-  }
-  return /*#__PURE__*/_jsx(View, {
-    testID: testID,
-    children: /*#__PURE__*/_jsx(FormField, {
-      label: label,
-      helperText: helperText,
-      error: error,
-      required: required,
-      children: field
-    })
-  });
-});
-TagInput.displayName = 'TagInput';
-const buildStyles = theme => StyleSheet.create({
-  wrap: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: theme.spacing.xs,
-    paddingVertical: theme.spacing.xs
-  },
-  input: {
-    ...fontFor(theme, 'normal'),
-    flexGrow: 1,
-    minWidth: 80,
-    padding: 0
-  }
-});
-export default TagInput;
-//# sourceMappingURL=TagInput.js.map
+"use strict";import{forwardRef,useCallback,useMemo,useRef,useState}from"react";import{StyleSheet,TextInput,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{mergeRefs,resolveHaptic,triggerHaptic}from"../../utils/index.js";import{Chip}from"../Chip/index.js";import{FieldBase}from"../FieldBase/index.js";import{FormField}from"../FormField/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";export const TagInput=forwardRef((e,t)=>{const{value:r,defaultValue:s,onChange:o,placeholder:i,label:l,helperText:a,error:n,required:u,disabled:p=!1,size:c="md",variant:d,maxTags:m,unique:f=!0,transform:x,separators:h=[","],haptic:g,style:b,testID:y}=e,C=useTheme(),j=useMemo(()=>buildStyles(C),[C]),[v,S]=useControllableState({value:r,defaultValue:s??[],onChange:o}),[T,F]=useState(""),[w,I]=useState(!1),k=useRef(null),_=useMemo(()=>mergeRefs(k,t),[t]),B=useCallback(()=>{p||k.current?.focus()},[p]),H="number"==typeof m&&v.length>=m,R=useCallback(e=>{const t=x?x(e.trim()):e.trim();if(!t)return;if(H)return;if(f&&v.some(e=>e.toLowerCase()===t.toLowerCase()))return void F("");S([...v,t]),F("");const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[H,g,S,v,x,f]),V=useCallback(e=>{const t=v.filter((t,r)=>r!==e);S(t);const r=resolveHaptic(g,"selection");r&&triggerHaptic(r)},[g,S,v]),z=useCallback(e=>{const t=h.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void R(r)}F(e)},[R,h]),D=useCallback(e=>{p||"Backspace"===e.nativeEvent.key&&""===T&&v.length>0&&V(v.length-1)},[p,T,V,v.length]),q=_jsx(FieldBase,{size:c,variant:d,focused:w,disabled:p,error:Boolean(n),filled:v.length>0||T.length>0,onPress:B,pressFeedback:!1,style:b,children:_jsxs(View,{style:j.wrap,children:[v.map((e,t)=>_jsx(Chip,{label:e,size:"sm",onClose:p?void 0:()=>V(t),haptic:g},`${e}-${t}`)),_jsx(TextInput,{ref:_,value:T,onChangeText:z,onKeyPress:D,onSubmitEditing:()=>R(T),onFocus:()=>I(!0),onBlur:()=>{I(!1),R(T)},editable:!p&&!H,placeholder:H?void 0:i,placeholderTextColor:C.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",style:[j.input,{color:C.colors.text.primary,fontSize:C.typography.fontSize.base}],testID:y?`${y}-input`:void 0})]})});return _jsx(View,l||a||n?{testID:y,children:_jsx(FormField,{label:l,helperText:a,error:n,required:u,children:q})}:{testID:y,children:q})});TagInput.displayName="TagInput";const buildStyles=e=>StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},input:{...fontFor(e,"normal"),flexGrow:1,minWidth:80,padding:0}});export default TagInput;

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

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