@webority/mobile-ui 0.0.38 → 0.1.0

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

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

package/lib/commonjs/components/Tabs/Tabs.js

@@ -1,428 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Tabs = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../theme/index.js");
-var _index2 = require("../../utils/index.js");
-var _corners = require("../../utils/corners.js");
-var _slotIcon = require("../AppIcon/slotIcon.js");
-var _SegmentedControl = require("../SegmentedControl/SegmentedControl.js");
-var _SquircleFill = require("../SquircleFill/SquircleFill.js");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * 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.
- */
-
-/** 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.
- */
-
-// 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 = exports.Tabs = /*#__PURE__*/(0, _react.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 = (0, _index.useTheme)();
-  const styles = (0, _react.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 = _SegmentedControl.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 = (0, _SquircleFill.useSquircle)(isSegmented, trackRadius);
-
-  // Per-tab measured layouts (key → {x, width}).
-  const [layouts, setLayouts] = (0, _react.useState)({});
-  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const indicatorWidth = (0, _react.useRef)((0, _index.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 = (0, _react.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 = (0, _react.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
-  (0, _react.useEffect)(() => {
-    if (!activeLayout) {
-      return;
-    }
-    if (useProgress) {
-      return;
-    }
-    const spring = theme.motion.spring.snappy;
-    const anim = _reactNative.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.
-    _reactNative.Animated.spring(indicatorTranslateX, {
-      toValue: activeLayout.x,
-      damping: spring.damping,
-      stiffness: spring.stiffness,
-      mass: spring.mass,
-      overshootClamping: true,
-      useNativeDriver: false
-    }), _reactNative.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 = (0, _react.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 = (0, _react.useCallback)(tab => {
-    if (tab.disabled) {
-      return;
-    }
-    if (tab.key === activeKey) {
-      return;
-    }
-    const h = (0, _index2.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index2.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__*/(0, _jsxRuntime.jsx)(_reactNative.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,
-      ..._corners.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 = (0, _slotIcon.renderSlotIcon)(tab.icon, {
-      color: labelColor,
-      size: tabIconSize,
-      focused: isActive,
-      disabled: isDisabled
-    });
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.tabIcon, {
-          marginRight: tabIconSpacing
-        }, tabIconStyle],
-        children: iconNode
-      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.tabBadge, {
-          marginLeft: badgeGap,
-          backgroundColor: theme.colors.primaryMuted,
-          borderRadius: theme.radius.full,
-          ..._corners.smoothCorners,
-          paddingHorizontal: theme.spacing.xs
-        }, tabBadgeStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [indicator, renderTabs()]
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [renderTabs(), indicator]
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    ref: ref,
-    style: [styles.container, {
-      borderBottomColor: theme.colors.border.secondary,
-      borderBottomWidth: variant === 'underline' ? _reactNative.StyleSheet.hairlineWidth : 0
-    }, variant === 'underline' ? dividerStyle : null, isSegmented ? {
-      padding: trackPadding,
-      borderRadius: trackRadius,
-      ..._corners.smoothCorners,
-      backgroundColor: squircle.active ? 'transparent' : trackFill
-    } : null, style, containerStyle],
-    onLayout: squircle.onLayout,
-    accessibilityRole: "tablist",
-    accessibilityLabel: accessibilityLabel,
-    testID: testID,
-    children: [squircle.active && squircle.size ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SquircleFill.SquircleFill, {
-      width: squircle.size.width,
-      height: squircle.size.height,
-      radius: trackRadius,
-      fill: trackFill
-    }) : null, scrollable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [baseRowStyle],
-      keyboardShouldPersistTaps: "handled",
-      children: row
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: baseRowStyle,
-      children: row
-    })]
-  });
-});
-Tabs.displayName = 'Tabs';
-const buildStyles = _theme => _reactNative.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
-  }
-});
-var _default = exports.default = Tabs;
-//# sourceMappingURL=Tabs.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.Tabs=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../theme/index.js"),_index2=require("../../utils/index.js"),_corners=require("../../utils/corners.js"),_slotIcon=require("../AppIcon/slotIcon.js"),_SegmentedControl=require("../SegmentedControl/SegmentedControl.js"),_SquircleFill=require("../SquircleFill/SquircleFill.js"),_jsxRuntime=require("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=exports.Tabs=(0,_react.forwardRef)((e,t)=>{const{tabs:i,activeKey:a,onChange:r,variant:n="underline",radius:o,size:l="md",scrollable:s=!1,align:d="left",style:c,containerStyle:u,tabStyle:p,tabLabelStyle:g,tabIconStyle:b,tabBadgeStyle:m,dividerStyle:h,indicatorStyle:y,progress:x,haptic:f,accessibilityLabel:_,testID:S}=e,v=(0,_index.useTheme)(),z=(0,_react.useMemo)(()=>buildStyles(v),[v]),j=v.components.tabs,R=tabsSizes[l],C=j?.[l],H=s?C?.scrollablePaddingHorizontal??j?.tabPaddingHorizontal??R.scrollablePaddingHorizontal:C?.paddingHorizontal??j?.tabPaddingHorizontal??R.paddingHorizontal,w=C?.paddingVertical??j?.tabPaddingVertical??R.paddingVertical,k=C?.fontSize??R.fontSize,I=j?.tabIconSpacing??6,N=C?.iconSize??j?.tabIconSize??R.iconSize,V=j?.underlineHeight??2,q=j?.pillInset??4,P=j?.disabledOpacity??.45,L=j?.badgeGap??6,T="segmented"===n,F=v.components.segmentedControl,W=_SegmentedControl.segmentedControlSizes[l],A=F?.[l]?.height??W.height,M=F?.[l]?.fontSize??W.fontSize,D=F?.[l]?.paddingHorizontal??W.paddingHorizontal,B=j?.trackPadding??4,O="number"==typeof o?o:o?v.radius[o]:j?.radius,E=O??v.radius.md,U=void 0===O?v.radius.sm:Math.max(O-B,0),G=O??v.radius.full,K=O??0,X=v.colors.background.tertiary,J=(0,_SquircleFill.useSquircle)(T,E),[Q,Y]=(0,_react.useState)({}),Z=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,$=(0,_react.useRef)((0,_index.createAnimatedValue)(0)).current,ee=Q[a],te=i.every(e=>void 0!==Q[e.key]),ie=void 0!==x&&te&&i.length>1,ae=(0,_react.useMemo)(()=>ie&&x?x.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>Q[e.key].x),extrapolate:"clamp"}):null,[ie,x,i,Q]),re=(0,_react.useMemo)(()=>ie&&x?x.interpolate({inputRange:i.map((e,t)=>t),outputRange:i.map(e=>Q[e.key].width),extrapolate:"clamp"}):null,[ie,x,i,Q]);(0,_react.useEffect)(()=>{if(!ee)return;if(ie)return;const e=v.motion.spring.snappy,t=_reactNative.Animated.parallel([_reactNative.Animated.spring(Z,{toValue:ee.x,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1}),_reactNative.Animated.spring($,{toValue:ee.width,damping:e.damping,stiffness:e.stiffness,mass:e.mass,overshootClamping:!0,useNativeDriver:!1})]);return t.start(),()=>t.stop()},[ee,a,Z,$,v.motion.spring.snappy,ie]);const ne=(0,_react.useCallback)(e=>t=>{const{x:i,width:a}=t.nativeEvent.layout;Y(t=>{const r=t[e];return r&&r.x===i&&r.width===a?t:{...t,[e]:{x:i,width:a}}})},[]),oe=(0,_react.useCallback)(e=>{if(e.disabled)return;if(e.key===a)return;const t=(0,_index2.resolveHaptic)(f,"selection");t&&(0,_index2.triggerHaptic)(t),r(e.key)},[a,r,f]),le="pills"===n,se=(0,_jsxRuntime.jsx)(_reactNative.Animated.View,{pointerEvents:"none",style:[T?z.indicatorThumb:le?z.indicatorPill:z.indicatorUnderline,T?null:le?{top:q,bottom:q}:{height:V},{width:re??$,transform:[{translateX:ae??Z}],backgroundColor:T?v.colors.background.elevated:le?v.colors.primaryMuted:v.colors.primary,borderRadius:T?U:le?G:K,..._corners.smoothCorners},y]}),renderTabs=()=>i.map(e=>{const t=e.key===a,i=!0===e.disabled,r=t?v.colors.primary:v.colors.text.tertiary,n=(0,_slotIcon.renderSlotIcon)(e.icon,{color:r,size:N,focused:t,disabled:i});return(0,_jsxRuntime.jsxs)(_reactNative.Pressable,{onPress:()=>oe(e),onLayout:ne(e.key),disabled:i,accessibilityRole:"tab",accessibilityLabel:e.label,accessibilityState:{selected:t,disabled:i},android_ripple:T?void 0:{color:v.colors.surface.pressed,borderless:!1},style:({pressed:e})=>[z.tab,s?null:z.tabFlex,T?{paddingHorizontal:D,height:A-2*B}:{paddingHorizontal:H,paddingVertical:w},{opacity:i?P:e&&T&&!t?.7:1,backgroundColor:e&&!T?v.colors.surface.pressed:"transparent"},p],children:[n?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.tabIcon,{marginRight:I},b],children:n}):null,(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[z.tabLabel,{color:r,fontSize:T?M:k,fontWeight:t?v.typography.fontWeight.semibold:v.typography.fontWeight.medium},g],numberOfLines:1,children:e.label}),void 0!==e.badge&&null!==e.badge?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[z.tabBadge,{marginLeft:L,backgroundColor:v.colors.primaryMuted,borderRadius:v.radius.full,..._corners.smoothCorners,paddingHorizontal:v.spacing.xs},m],children:(0,_jsxRuntime.jsx)(_reactNative.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=T?(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[se,renderTabs()]}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[renderTabs(),se]});return(0,_jsxRuntime.jsxs)(_reactNative.View,{ref:t,style:[z.container,{borderBottomColor:v.colors.border.secondary,borderBottomWidth:"underline"===n?_reactNative.StyleSheet.hairlineWidth:0},"underline"===n?h:null,T?{padding:B,borderRadius:E,..._corners.smoothCorners,backgroundColor:J.active?"transparent":X}:null,c,u],onLayout:J.onLayout,accessibilityRole:"tablist",accessibilityLabel:_,testID:S,children:[J.active&&J.size?(0,_jsxRuntime.jsx)(_SquircleFill.SquircleFill,{width:J.size.width,height:J.size.height,radius:E,fill:X}):null,s?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[de],keyboardShouldPersistTaps:"handled",children:ce}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:de,children:ce})]})});Tabs.displayName="Tabs";const buildStyles=e=>_reactNative.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}});var _default=exports.default=Tabs;

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

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

package/lib/commonjs/components/TagInput/TagInput.js

@@ -1,185 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TagInput = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _index = require("../../hooks/index.js");
-var _index2 = require("../../theme/index.js");
-var _index3 = require("../../utils/index.js");
-var _index4 = require("../Chip/index.js");
-var _index5 = require("../FieldBase/index.js");
-var _index6 = require("../FormField/index.js");
-var _jsxRuntime = require("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).
- */
-const TagInput = exports.TagInput = /*#__PURE__*/(0, _react.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 = (0, _index2.useTheme)();
-  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const [tags, setTags] = (0, _index.useControllableState)({
-    value,
-    defaultValue: defaultValue ?? [],
-    onChange
-  });
-  const [draft, setDraft] = (0, _react.useState)('');
-  const [focused, setFocused] = (0, _react.useState)(false);
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const inputRef = (0, _react.useRef)(null);
-  const setInputRef = (0, _react.useMemo)(() => (0, _index3.mergeRefs)(inputRef, ref), [ref]);
-  const focusInput = (0, _react.useCallback)(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  const atCapacity = typeof maxTags === 'number' && tags.length >= maxTags;
-  const commit = (0, _react.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 = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.triggerHaptic)(h);
-    }
-  }, [atCapacity, haptic, setTags, tags, transform, unique]);
-  const removeAt = (0, _react.useCallback)(index => {
-    const next = tags.filter((_, i) => i !== index);
-    setTags(next);
-    const h = (0, _index3.resolveHaptic)(haptic, 'selection');
-    if (h) {
-      (0, _index3.triggerHaptic)(h);
-    }
-  }, [haptic, setTags, tags]);
-  const handleChangeText = (0, _react.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 = (0, _react.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__*/(0, _jsxRuntime.jsx)(_index5.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.wrap,
-      children: [tags.map((tag, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.Chip, {
-        label: tag,
-        size: "sm",
-        onClose: disabled ? undefined : () => removeAt(index),
-        haptic: haptic
-      }, `${tag}-${index}`)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      testID: testID,
-      children: field
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    testID: testID,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index6.FormField, {
-      label: label,
-      helperText: helperText,
-      error: error,
-      required: required,
-      children: field
-    })
-  });
-});
-TagInput.displayName = 'TagInput';
-const buildStyles = theme => _reactNative.StyleSheet.create({
-  wrap: {
-    flex: 1,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    gap: theme.spacing.xs,
-    paddingVertical: theme.spacing.xs
-  },
-  input: {
-    ...(0, _index2.fontFor)(theme, 'normal'),
-    flexGrow: 1,
-    minWidth: 80,
-    padding: 0
-  }
-});
-var _default = exports.default = TagInput;
-//# sourceMappingURL=TagInput.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.TagInput=void 0;var _react=require("react"),_reactNative=require("react-native"),_index=require("../../hooks/index.js"),_index2=require("../../theme/index.js"),_index3=require("../../utils/index.js"),_index4=require("../Chip/index.js"),_index5=require("../FieldBase/index.js"),_index6=require("../FormField/index.js"),_jsxRuntime=require("react/jsx-runtime");const TagInput=exports.TagInput=(0,_react.forwardRef)((e,t)=>{const{value:r,defaultValue:i,onChange:a,placeholder:n,label:s,helperText:l,error:o,required:u,disabled:d=!1,size:c="md",variant:x,maxTags:p,unique:_=!0,transform:m,separators:g=[","],haptic:h,style:f,testID:v}=e,j=(0,_index2.useTheme)(),b=(0,_react.useMemo)(()=>buildStyles(j),[j]),[y,C]=(0,_index.useControllableState)({value:r,defaultValue:i??[],onChange:a}),[T,q]=(0,_react.useState)(""),[I,w]=(0,_react.useState)(!1),R=(0,_react.useRef)(null),S=(0,_react.useMemo)(()=>(0,_index3.mergeRefs)(R,t),[t]),k=(0,_react.useCallback)(()=>{d||R.current?.focus()},[d]),F="number"==typeof p&&y.length>=p,N=(0,_react.useCallback)(e=>{const t=m?m(e.trim()):e.trim();if(!t)return;if(F)return;if(_&&y.some(e=>e.toLowerCase()===t.toLowerCase()))return void q("");C([...y,t]),q("");const r=(0,_index3.resolveHaptic)(h,"selection");r&&(0,_index3.triggerHaptic)(r)},[F,h,C,y,m,_]),V=(0,_react.useCallback)(e=>{const t=y.filter((t,r)=>r!==e);C(t);const r=(0,_index3.resolveHaptic)(h,"selection");r&&(0,_index3.triggerHaptic)(r)},[h,C,y]),z=(0,_react.useCallback)(e=>{const t=g.find(t=>t.length>0&&e.includes(t));if(t){const[r]=e.split(t);return void N(r)}q(e)},[N,g]),B=(0,_react.useCallback)(e=>{d||"Backspace"===e.nativeEvent.key&&""===T&&y.length>0&&V(y.length-1)},[d,T,V,y.length]),D=(0,_jsxRuntime.jsx)(_index5.FieldBase,{size:c,variant:x,focused:I,disabled:d,error:Boolean(o),filled:y.length>0||T.length>0,onPress:k,pressFeedback:!1,style:f,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:b.wrap,children:[y.map((e,t)=>(0,_jsxRuntime.jsx)(_index4.Chip,{label:e,size:"sm",onClose:d?void 0:()=>V(t),haptic:h},`${e}-${t}`)),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:S,value:T,onChangeText:z,onKeyPress:B,onSubmitEditing:()=>N(T),onFocus:()=>w(!0),onBlur:()=>{w(!1),N(T)},editable:!d&&!F,placeholder:F?void 0:n,placeholderTextColor:j.colors.text.tertiary,blurOnSubmit:!1,returnKeyType:"done",style:[b.input,{color:j.colors.text.primary,fontSize:j.typography.fontSize.base}],testID:v?`${v}-input`:void 0})]})});return s||l||o?(0,_jsxRuntime.jsx)(_reactNative.View,{testID:v,children:(0,_jsxRuntime.jsx)(_index6.FormField,{label:s,helperText:l,error:o,required:u,children:D})}):(0,_jsxRuntime.jsx)(_reactNative.View,{testID:v,children:D})});TagInput.displayName="TagInput";const buildStyles=e=>_reactNative.StyleSheet.create({wrap:{flex:1,flexDirection:"row",flexWrap:"wrap",alignItems:"center",gap:e.spacing.xs,paddingVertical:e.spacing.xs},input:{...(0,_index2.fontFor)(e,"normal"),flexGrow:1,minWidth:80,padding:0}});var _default=exports.default=TagInput;