@webority/mobile-ui 0.0.0-stage → 0.0.34

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

@@ -0,0 +1,425 @@
+"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

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

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

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

@@ -0,0 +1,181 @@
+"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

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

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