@webority/mobile-ui 0.0.39 → 0.1.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
+import{forwardRef as e,useCallback as t,useEffect as i,useMemo as o,useRef as n,useState as a}from"react";import{Animated as r,Pressable as l,ScrollView as s,StyleSheet as d,Text as c,View as p}from"react-native";import{createAnimatedValue as g,useTheme as u}from"../../theme/index.js";import{resolveHaptic as b,triggerHaptic as m}from"../../utils/index.js";import{smoothCorners as f}from"../../utils/corners.js";import{renderSlotIcon as y}from"../AppIcon/slotIcon.js";import{segmentedControlSizes as h}from"../SegmentedControl/SegmentedControl.js";import{SquircleFill as z,useSquircle as S}from"../SquircleFill/SquircleFill.js";import{jsx as x,jsxs as v,Fragment as H}from"react/jsx-runtime";const k={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}},C=e((e,C)=>{const{tabs:I,activeKey:w,onChange:P,variant:j="underline",radius:L,size:R="md",scrollable:V=!1,align:W="left",style:D,containerStyle:F,tabStyle:B,tabLabelStyle:T,tabIconStyle:M,tabBadgeStyle:N,dividerStyle:O,indicatorStyle:q,progress:E,haptic:U,accessibilityLabel:A,testID:G}=e,K=u(),X=o(()=>buildStyles(K),[K]),_=K.components.tabs,J=k[R],Q=_?.[R],Y=V?Q?.scrollablePaddingHorizontal??_?.tabPaddingHorizontal??J.scrollablePaddingHorizontal:Q?.paddingHorizontal??_?.tabPaddingHorizontal??J.paddingHorizontal,Z=Q?.paddingVertical??_?.tabPaddingVertical??J.paddingVertical,$=Q?.fontSize??J.fontSize,ee=_?.tabIconSpacing??6,te=Q?.iconSize??_?.tabIconSize??J.iconSize,ie=_?.underlineHeight??2,oe=_?.pillInset??4,ne=_?.disabledOpacity??.45,ae=_?.badgeGap??6,re="segmented"===j,le=K.components.segmentedControl,se=h[R],de=le?.[R]?.height??se.height,ce=le?.[R]?.fontSize??se.fontSize,pe=le?.[R]?.paddingHorizontal??se.paddingHorizontal,ge=_?.trackPadding??4,ue="number"==typeof L?L:L?K.radius[L]:_?.radius,be=ue??K.radius.md,me=void 0===ue?K.radius.sm:Math.max(ue-ge,0),fe=ue??K.radius.full,ye=ue??0,he=K.colors.background.tertiary,ze=S(re,be),[Se,xe]=a({}),ve=n(g(0)).current,He=n(g(0)).current,ke=Se[w],Ce=I.every(e=>void 0!==Se[e.key]),Ie=void 0!==E&&Ce&&I.length>1,we=o(()=>Ie&&E?E.interpolate({inputRange:I.map((e,t)=>t),outputRange:I.map(e=>Se[e.key].x),extrapolate:"clamp"}):null,[Ie,E,I,Se]),Pe=o(()=>Ie&&E?E.interpolate({inputRange:I.map((e,t)=>t),outputRange:I.map(e=>Se[e.key].width),extrapolate:"clamp"}):null,[Ie,E,I,Se]);i(()=>{if(!ke)return;if(Ie)return;const e=K.motion.spring.snappy,t=r.parallel([r.spring(ve,{toValue:ke.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),r.spring(He,{toValue:ke.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[ke,w,ve,He,K.motion.spring.snappy,Ie]);const je=t(e=>t=>{const{x:i,width:o}=t.nativeEvent.layout;xe(t=>{const n=t[e];return n&&n.x===i&&n.width===o?t:{...t,[e]:{x:i,width:o}}})},[]),Le=t(e=>{if(e.disabled)return;if(e.key===w)return;const t=b(U,"selection");t&&m(t),P(e.key)},[w,P,U]),Re="pills"===j,Ve=x(r.View,{pointerEvents:"none",style:[re?X.indicatorThumb:Re?X.indicatorPill:X.indicatorUnderline,re?null:Re?{top:oe,bottom:oe}:{height:ie},{width:Pe??He,transform:[{translateX:we??ve}],backgroundColor:re?K.colors.background.elevated:Re?K.colors.primaryMuted:K.colors.primary,borderRadius:re?me:Re?fe:ye,...f},q]}),renderTabs=()=>I.map(e=>{const t=e.key===w,i=!0===e.disabled,o=t?K.colors.primary:K.colors.text.tertiary,n=y(e.icon,{color:o,size:te,focused:t,disabled:i});return v(l,{onPress:()=>Le(e),onLayout:je(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},android_ripple:re?void 0:{color:K.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[X.tab,V?null:X.tabFlex,re?{paddingHorizontal:pe,height:de-2*ge}:{paddingHorizontal:Y,paddingVertical:Z},{opacity:i?ne:e&&re&&!t?.7:1,backgroundColor:e&&!re?K.colors.surface.pressed:"transparent"},B],children:[n?x(p,{style:[X.tabIcon,{marginRight:ee},M],children:n}):null,x(c,{style:[X.tabLabel,{color:o,fontSize:re?ce:$,fontWeight:t?K.typography.fontWeight.semibold:K.typography.fontWeight.medium},T],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?x(p,{style:[X.tabBadge,{marginLeft:ae,backgroundColor:K.colors.primaryMuted,borderRadius:K.radius.full,...f,paddingHorizontal:K.spacing.xs},N],children:x(c,{style:{color:K.colors.primary,fontSize:K.typography.fontSize.xs,fontWeight:K.typography.fontWeight.semibold},numberOfLines:1,children:String(e.badge)})}):null]},e.key)}),We={flexDirection:"row",alignItems:"stretch",justifyContent:V?"flex-start":"center"===W?"center":"flex-start",position:"relative",overflow:"hidden"},De=v(H,re?{children:[Ve,renderTabs()]}:{children:[renderTabs(),Ve]});return v(p,{ref:C,style:[X.container,{borderBottomColor:K.colors.border.secondary,borderBottomWidth:"underline"===j?d.hairlineWidth:0},"underline"===j?O:null,re?{padding:ge,borderRadius:be,...f,backgroundColor:ze.active?"transparent":he}:null,D,F],onLayout:ze.onLayout,accessibilityRole:"tablist",accessibilityLabel:A,testID:G,children:[ze.active&&ze.size?x(z,{width:ze.size.width,height:ze.size.height,radius:be,fill:he}):null,V?x(s,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[We],keyboardShouldPersistTaps:"handled",children:De}):x(p,{style:We,children:De})]})});C.displayName="Tabs";const buildStyles=e=>d.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{C as Tabs};export default C;

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

@@ -1,4 +1 @@
-"use strict";
-
-export { default, Tabs } from "./Tabs.js";
-//# sourceMappingURL=index.js.map
+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
+import{forwardRef as e,useCallback as t,useMemo as r,useRef as o,useState as n}from"react";import{StyleSheet as i,TextInput as a,View as l}from"react-native";import{useControllableState as s}from"../../hooks/index.js";import{fontFor as p,useTheme as d}from"../../theme/index.js";import{mergeRefs as c,resolveHaptic as u,triggerHaptic as m}from"../../utils/index.js";import{Chip as f}from"../Chip/index.js";import{FieldBase as h}from"../FieldBase/index.js";import{FormField as x}from"../FormField/index.js";import{jsx as g,jsxs as y}from"react/jsx-runtime";export const TagInput=e((e,i)=>{const{value:p,defaultValue:v,onChange:b,placeholder:T,label:j,helperText:I,error:C,required:w,disabled:z=!1,size:D="md",variant:F,maxTags:k,unique:B=!0,transform:S,separators:q=[","],haptic:V,style:$,testID:E}=e,K=d(),L=r(()=>buildStyles(K),[K]),[P,W]=s({value:p,defaultValue:v??[],onChange:b}),[G,N]=n(""),[O,A]=n(!1),H=o(null),J=r(()=>c(H,i),[i]),M=t(()=>{z||H.current?.focus()},[z]),Q="number"==typeof k&&P.length>=k,R=t(e=>{const t=S?S(e.trim()):e.trim();if(!t)return;if(Q)return;if(B&&P.some(e=>e.toLowerCase()===t.toLowerCase()))return void N("");W([...P,t]),N("");const r=u(V,"selection");r&&m(r)},[Q,V,W,P,S,B]),U=t(e=>{const t=P.filter((t,r)=>r!==e);W(t);const r=u(V,"selection");r&&m(r)},[V,W,P]),X=t(e=>{const t=q.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void R(r)}N(e)},[R,q]),Y=t(e=>{z||"Backspace"===e.nativeEvent.key&&""===G&&P.length>0&&U(P.length-1)},[z,G,U,P.length]),Z=g(h,{size:D,variant:F,focused:O,disabled:z,error:Boolean(C),filled:P.length>0||G.length>0,onPress:M,pressFeedback:!1,style:$,children:y(l,{style:L.wrap,children:[P.map((e,t)=>g(f,{label:e,size:"sm",onClose:z?void 0:()=>U(t),haptic:V},`${e}-${t}`)),g(a,{ref:J,value:G,onChangeText:X,onKeyPress:Y,onSubmitEditing:()=>R(G),onFocus:()=>A(!0),onBlur:()=>{A(!1),R(G)},editable:!z&&!Q,placeholder:Q?void 0:T,placeholderTextColor:K.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",style:[L.input,{color:K.colors.text.primary,fontSize:K.typography.fontSize.base}],testID:E?`${E}-input`:void 0})]})});return g(l,j||I||C?{testID:E,children:g(x,{label:j,helperText:I,error:C,required:w,children:Z})}:{testID:E,children:Z})});TagInput.displayName="TagInput";const buildStyles=e=>i.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},input:{...p(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
+export{default,TagInput}from"./TagInput.js";