@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,285 @@
+"use strict";
+
+/**
+ * Tabs — top tabs with animated underline (or pills) indicator.
+ *
+ * Layout: equal-width row by default, or horizontal-scrollable when
+ * `scrollable` is true. The active indicator (underline or pill) 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.
+ */
+
+import React, { 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    tabs,
+    activeKey,
+    onChange,
+    variant = 'underline',
+    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;
+  const tabPaddingHorizontal = tabsTokens?.tabPaddingHorizontal ?? theme.spacing.lg;
+  const tabPaddingVertical = tabsTokens?.tabPaddingVertical ?? theme.spacing.md;
+  const tabIconSpacing = tabsTokens?.tabIconSpacing ?? 6;
+  const underlineHeight = tabsTokens?.underlineHeight ?? 2;
+  const pillInset = tabsTokens?.pillInset ?? 4;
+  const disabledOpacity = tabsTokens?.disabledOpacity ?? 0.45;
+  const badgeGap = tabsTokens?.badgeGap ?? 6;
+
+  // 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.
+    Animated.spring(indicatorTranslateX, {
+      toValue: activeLayout.x,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      useNativeDriver: false
+    }), Animated.spring(indicatorWidth, {
+      toValue: activeLayout.width,
+      damping: spring.damping,
+      stiffness: spring.stiffness,
+      mass: spring.mass,
+      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.
+  const indicator = /*#__PURE__*/_jsx(Animated.View, {
+    pointerEvents: "none",
+    style: [indicatorIsPill ? styles.indicatorPill : styles.indicatorUnderline, indicatorIsPill ? {
+      top: pillInset,
+      bottom: pillInset
+    } : {
+      height: underlineHeight
+    }, {
+      width: progressWidth ?? indicatorWidth,
+      transform: [{
+        translateX: progressTranslateX ?? indicatorTranslateX
+      }],
+      backgroundColor: indicatorIsPill ? theme.colors.primaryMuted : theme.colors.primary,
+      borderRadius: indicatorIsPill ? theme.radius.full : 0
+    }, indicatorStyle]
+  });
+  const renderTabs = () => tabs.map(tab => {
+    const isActive = tab.key === activeKey;
+    const isDisabled = tab.disabled === true;
+    return /*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => handlePress(tab),
+      onLayout: handleLayout(tab.key),
+      disabled: isDisabled,
+      accessibilityRole: "tab",
+      accessibilityLabel: tab.label,
+      accessibilityState: {
+        selected: isActive,
+        disabled: isDisabled
+      },
+      android_ripple: {
+        color: theme.colors.surface.pressed,
+        borderless: false
+      },
+      style: ({
+        pressed
+      }) => [styles.tab, scrollable ? null : styles.tabFlex, {
+        paddingHorizontal: tabPaddingHorizontal,
+        paddingVertical: tabPaddingVertical,
+        opacity: isDisabled ? disabledOpacity : 1,
+        backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
+      }, tabStyle],
+      children: [tab.icon ? /*#__PURE__*/_jsx(View, {
+        style: [styles.tabIcon, {
+          marginRight: tabIconSpacing
+        }, tabIconStyle],
+        children: tab.icon
+      }) : null, /*#__PURE__*/_jsx(Text, {
+        style: [styles.tabLabel, {
+          color: isActive ? theme.colors.primary : theme.colors.text.tertiary,
+          fontSize: theme.typography.fontSize.base,
+          fontWeight: isActive ? theme.typography.fontWeight.semibold : theme.typography.fontWeight.medium
+        }, tabLabelStyle],
+        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,
+          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'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container, {
+      borderBottomColor: theme.colors.border.secondary,
+      borderBottomWidth: variant === 'underline' ? StyleSheet.hairlineWidth : 0
+    }, variant === 'underline' ? dividerStyle : null, style, containerStyle],
+    accessibilityRole: "tablist",
+    accessibilityLabel: accessibilityLabel,
+    testID: testID,
+    children: scrollable ? /*#__PURE__*/_jsxs(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: [baseRowStyle],
+      keyboardShouldPersistTaps: "handled",
+      children: [renderTabs(), indicator]
+    }) : /*#__PURE__*/_jsxs(View, {
+      style: baseRowStyle,
+      children: [renderTabs(), indicator]
+    })
+  });
+});
+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
+  },
+  tabBadge: {
+    minWidth: 18,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  indicatorUnderline: {
+    position: 'absolute',
+    left: 0,
+    bottom: 0
+  },
+  indicatorPill: {
+    position: 'absolute',
+    left: 0,
+    zIndex: -1
+  }
+});
+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,170 @@
+"use strict";
+
+import { forwardRef, useCallback, useMemo, useState } from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
+import { 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);
+  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,
+    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: ref,
+        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

package/lib/module/components/Text/Text.js

@@ -0,0 +1,142 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { fontFor, useTheme } from "../../theme/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const VARIANTS = {
+  display: {
+    size: '4xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h1: {
+    size: '3xl',
+    weight: 'bold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h2: {
+    size: '2xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  h3: {
+    size: 'xl',
+    weight: 'semibold',
+    line: 'tight',
+    color: 'primary',
+    heading: true
+  },
+  title: {
+    size: 'lg',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'primary'
+  },
+  body: {
+    size: 'base',
+    weight: 'normal',
+    line: 'normal',
+    color: 'primary'
+  },
+  bodySmall: {
+    size: 'sm',
+    weight: 'normal',
+    line: 'normal',
+    color: 'secondary'
+  },
+  caption: {
+    size: 'xs',
+    weight: 'normal',
+    line: 'normal',
+    color: 'tertiary'
+  },
+  label: {
+    size: 'sm',
+    weight: 'medium',
+    line: 'normal',
+    color: 'secondary'
+  },
+  overline: {
+    size: 'xs',
+    weight: 'semibold',
+    line: 'normal',
+    color: 'secondary',
+    uppercase: true,
+    letterSpacing: 'wide'
+  }
+};
+const TEXT_ROLES = {
+  primary: true,
+  secondary: true,
+  tertiary: true,
+  inverse: true,
+  disabled: true,
+  link: true
+};
+const SEMANTIC = {
+  success: true,
+  warning: true,
+  error: true,
+  info: true
+};
+const resolveColor = (theme, color) => {
+  // Text roles win over the same-named brand colour ('primary' -> text.primary),
+  // which is the intent the vast majority of the time for text.
+  if (TEXT_ROLES[color]) {
+    return theme.colors.text[color];
+  }
+  if (SEMANTIC[color]) {
+    return theme.colors[color];
+  }
+  return color; // raw colour string
+};
+const Text = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    variant = 'body',
+    color,
+    weight,
+    size,
+    align,
+    italic,
+    underline,
+    style,
+    children,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const textStyle = useMemo(() => {
+    const spec = VARIANTS[variant];
+    const fontSize = typeof size === 'number' ? size : theme.typography.fontSize[size ?? spec.size];
+    const lineHeight = Math.round(fontSize * theme.typography.lineHeight[spec.line]);
+    return {
+      fontSize,
+      lineHeight,
+      color: resolveColor(theme, color ?? spec.color),
+      textAlign: align,
+      textTransform: spec.uppercase ? 'uppercase' : undefined,
+      letterSpacing: spec.letterSpacing ? theme.typography.letterSpacing[spec.letterSpacing] : undefined,
+      fontStyle: italic ? 'italic' : undefined,
+      textDecorationLine: underline ? 'underline' : undefined,
+      ...fontFor(theme, weight ?? spec.weight)
+    };
+  }, [theme, variant, color, weight, size, align, italic, underline]);
+  const heading = VARIANTS[variant].heading;
+  return /*#__PURE__*/_jsx(RNText, {
+    ref: ref,
+    style: [textStyle, style],
+    accessibilityRole: heading ? 'header' : rest.accessibilityRole,
+    ...rest,
+    children: children
+  });
+});
+Text.displayName = 'Text';
+export { Text };
+export default Text;
+//# sourceMappingURL=Text.js.map

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

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