@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-3ENTMPQY.js

@@ -0,0 +1,229 @@
+import { Input } from './chunk-ITTYJZWX.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function valueFontSize(theme, size) {
+  return size === "md" || size === "lg" ? theme.fontSize[16] : theme.fontSize[14];
+}
+function InlineEdit({
+  value,
+  onChange,
+  placeholder,
+  label,
+  as = "text",
+  size = "md",
+  disabled = false,
+  multiline = false,
+  optimistic = true,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { size, disabled, multiline });
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(value);
+  const [optimisticValue, setOptimisticValue] = React.useState(null);
+  React.useEffect(() => {
+    setOptimisticValue(null);
+  }, [value]);
+  const display = optimisticValue ?? value;
+  const isPlaceholder = display === "";
+  const fontWeight = as === "heading" ? "700" : "400";
+  const iconSize = theme.ctl.icon[size];
+  const draftRef = React.useRef(draft);
+  draftRef.current = draft;
+  const displayRef = React.useRef(display);
+  displayRef.current = display;
+  const skipBlurRef = React.useRef(false);
+  const enterEdit = () => {
+    if (disabled) return;
+    setDraft(display);
+    setEditing(true);
+  };
+  const finalize = (next) => {
+    if (next === displayRef.current) return;
+    if (optimistic) setOptimisticValue(next);
+    onChange(next);
+  };
+  const save = () => {
+    skipBlurRef.current = true;
+    setEditing(false);
+    finalize(draftRef.current);
+  };
+  const cancel = () => {
+    skipBlurRef.current = true;
+    setDraft(display);
+    setEditing(false);
+  };
+  const onBlur = (_e) => {
+    const captured = draftRef.current;
+    setTimeout(() => {
+      if (skipBlurRef.current) {
+        skipBlurRef.current = false;
+        return;
+      }
+      setEditing(false);
+      finalize(captured);
+    }, 0);
+  };
+  const onSubmit = (_e) => {
+    skipBlurRef.current = true;
+    setEditing(false);
+    finalize(draftRef.current);
+  };
+  const actionOpacity = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    if (!editing) return;
+    if (motion === "none" || theme.reduceMotion) {
+      actionOpacity.setValue(1);
+      return;
+    }
+    actionOpacity.setValue(0);
+    Animated.timing(actionOpacity, {
+      toValue: 1,
+      duration: theme.motion.enter.duration,
+      useNativeDriver: true
+    }).start();
+  }, [editing, motion, actionOpacity, theme.reduceMotion, theme.motion.enter.duration]);
+  if (editing) {
+    return /* @__PURE__ */ jsxs(View, { style: styles.editRow, children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          autoFocus: true,
+          value: draft,
+          onChangeText: setDraft,
+          placeholder,
+          size,
+          multiline,
+          accessibilityLabel: label,
+          onSubmitEditing: onSubmit,
+          onBlur,
+          onFocus: (e) => e.currentTarget.setNativeProps?.({ selection: { start: 0, end: draft.length } }),
+          containerStyle: styles.field,
+          style: { fontWeight }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Animated.View, { style: [styles.actions, { opacity: actionOpacity }], children: [
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Save",
+            onPress: save,
+            style: ({ pressed }) => [styles.action, pressed && { backgroundColor: theme.state.pressed }],
+            children: /* @__PURE__ */ jsx(Icon, { name: "check", size: iconSize, color: theme.color.good })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: "Cancel",
+            onPress: cancel,
+            style: ({ pressed }) => [styles.action, pressed && { backgroundColor: theme.state.pressed }],
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: iconSize, color: theme.color.text2 })
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel: isPlaceholder ? label : `${label}, ${display}`,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: enterEdit,
+      style: ({ pressed }) => [
+        styles.read,
+        !disabled && pressed && { backgroundColor: theme.state.pressed }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            numberOfLines: multiline ? void 0 : 1,
+            style: [
+              styles.value,
+              { fontSize: valueFontSize(theme, size), fontWeight },
+              isPlaceholder && { color: theme.color.text3 },
+              disabled && { color: theme.color.text3 }
+            ],
+            children: isPlaceholder ? placeholder ?? "" : display
+          }
+        ),
+        !disabled ? /* @__PURE__ */ jsx(Icon, { name: "edit", size: iconSize, color: theme.color.text3 }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  editRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space.s2 },
+  field: { flex: 1 },
+  actions: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  action: {
+    alignItems: "center",
+    justifyContent: "center",
+    minWidth: theme.tapMin,
+    minHeight: theme.tapMin,
+    borderRadius: theme.radius.md
+  },
+  // Mirrors the native Input container: a `w2` edge (here transparent, so the
+  // real edge appearing on edit does not shift the text), the same ramp height,
+  // padding, gap and radius. `multiline` swaps to the taller wrapping box.
+  read: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: theme.borderWidth.thick,
+    borderColor: "transparent",
+    variants: {
+      size: {
+        xs: {
+          height: theme.ctl.xs,
+          paddingHorizontal: theme.ctl.px.xs,
+          gap: theme.ctl.gap.xs,
+          borderRadius: theme.ctl.r.xs
+        },
+        sm: {
+          height: theme.ctl.sm,
+          paddingHorizontal: theme.ctl.px.sm,
+          gap: theme.ctl.gap.sm,
+          borderRadius: theme.ctl.r.sm
+        },
+        md: {
+          height: theme.ctl.md,
+          paddingHorizontal: theme.ctl.px.md,
+          gap: theme.ctl.gap.md,
+          borderRadius: theme.ctl.r.md
+        },
+        lg: {
+          height: theme.ctl.lg,
+          paddingHorizontal: theme.ctl.px.lg,
+          gap: theme.ctl.gap.lg,
+          borderRadius: theme.ctl.r.lg
+        }
+      },
+      multiline: {
+        true: {
+          height: void 0,
+          minHeight: theme.ctl.lg * 2,
+          alignItems: "flex-start",
+          paddingVertical: theme.space.s2
+        },
+        false: {}
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  value: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    color: theme.color.text
+  }
+}));
+
+export { InlineEdit };

package/dist/chunk-3HJH6FF4.js

@@ -0,0 +1,98 @@
+// src/keyboard/field-keyboard.ts
+var KEYBOARD_FIELD_KINDS = [
+  "email",
+  "phone",
+  "cardNumber",
+  "oneTimeCode",
+  "amount",
+  "search",
+  "message",
+  "text"
+];
+var TERMINAL_RETURN_KEY = {
+  email: "done",
+  phone: "done",
+  cardNumber: "done",
+  // A one-time code submits itself, so its key is Go even mid-form.
+  oneTimeCode: "go",
+  amount: "done",
+  search: "search",
+  // A multiline field's return key inserts a newline; Send is a button.
+  message: "default",
+  text: "done"
+};
+var BASE_PROPS = {
+  email: {
+    inputMode: "email",
+    keyboardType: "email-address",
+    autoComplete: "email",
+    autoCapitalize: "none",
+    autoCorrect: false,
+    textContentType: "emailAddress"
+  },
+  phone: {
+    inputMode: "tel",
+    keyboardType: "phone-pad",
+    autoComplete: "tel",
+    autoCapitalize: "none",
+    autoCorrect: false,
+    textContentType: "telephoneNumber"
+  },
+  cardNumber: {
+    inputMode: "numeric",
+    keyboardType: "number-pad",
+    autoComplete: "cc-number",
+    autoCapitalize: "none",
+    autoCorrect: false,
+    textContentType: "creditCardNumber"
+  },
+  oneTimeCode: {
+    inputMode: "numeric",
+    keyboardType: "number-pad",
+    autoComplete: "one-time-code",
+    autoCapitalize: "none",
+    autoCorrect: false,
+    textContentType: "oneTimeCode"
+  },
+  amount: {
+    inputMode: "decimal",
+    keyboardType: "decimal-pad",
+    autoComplete: "off",
+    autoCapitalize: "none",
+    autoCorrect: false
+  },
+  search: {
+    inputMode: "search",
+    keyboardType: "default",
+    autoComplete: "off",
+    autoCapitalize: "none",
+    autoCorrect: false
+  },
+  message: {
+    inputMode: "text",
+    keyboardType: "default",
+    autoComplete: "off",
+    autoCapitalize: "sentences",
+    autoCorrect: true,
+    multiline: true,
+    // Return must insert a newline rather than submit — Send is a button.
+    blurOnSubmit: false
+  },
+  text: {
+    inputMode: "text",
+    keyboardType: "default",
+    autoComplete: "off",
+    autoCapitalize: "sentences",
+    autoCorrect: true
+  }
+};
+function returnKeyFor(kind, isLast) {
+  if (kind === "message") return TERMINAL_RETURN_KEY.message;
+  if (kind === "oneTimeCode") return TERMINAL_RETURN_KEY.oneTimeCode;
+  return isLast ? TERMINAL_RETURN_KEY[kind] : "next";
+}
+function fieldKeyboardProps(kind, options = {}) {
+  return { ...BASE_PROPS[kind], returnKeyType: returnKeyFor(kind, options.isLast ?? false) };
+}
+
+export { KEYBOARD_FIELD_KINDS, fieldKeyboardProps, returnKeyFor };

package/dist/chunk-3NMD74ZU.js

@@ -0,0 +1,4 @@
+// src/lib/focus-ring.ts
+var NO_UA_FOCUS_RING = { outlineStyle: "none" };
+
+export { NO_UA_FOCUS_RING };

package/dist/chunk-3WPW4KUN.js

@@ -0,0 +1,182 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, View, Pressable, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var INDICATOR_WIDTH = 28;
+var BADGE_MAX = 99;
+function Tab({
+  item,
+  selected,
+  onPress,
+  motion
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const fg = selected ? theme.color.accentStrong : theme.color.text3;
+  const scale = React.useRef(new Animated.Value(1)).current;
+  const spring = (to) => {
+    if (motion === "none") return;
+    Animated.spring(scale, {
+      toValue: to,
+      useNativeDriver: true,
+      speed: 40,
+      bounciness: 4
+    }).start();
+  };
+  const showBadge = item.badge !== void 0 && item.badge > 0;
+  const badgeText = item.badge !== void 0 && item.badge > BADGE_MAX ? `${BADGE_MAX}+` : `${item.badge}`;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "tab",
+      accessibilityLabel: item.label,
+      accessibilityState: { selected },
+      onPress,
+      onPressIn: () => spring(0.9),
+      onPressOut: () => spring(1),
+      style: styles.tab,
+      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.tabInner, { transform: [{ scale }] }], children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.iconWrap, children: [
+          /* @__PURE__ */ jsx(Icon, { name: item.icon, size: 22, color: fg }),
+          showBadge ? /* @__PURE__ */ jsx(View, { style: styles.badge, children: /* @__PURE__ */ jsx(Text, { style: styles.badgeText, numberOfLines: 1, children: badgeText }) }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], numberOfLines: 1, children: item.label })
+      ] })
+    }
+  );
+}
+function TabBar({
+  items,
+  value,
+  onValueChange,
+  bottomInset = 0,
+  showIndicator = true,
+  motion = "full",
+  accessibilityLabel
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet);
+  const activeIndex = Math.max(
+    0,
+    items.findIndex((item) => item.value === value)
+  );
+  const [barWidth, setBarWidth] = React.useState(0);
+  const onBarLayout = (e) => setBarWidth(e.nativeEvent.layout.width);
+  const segmentWidth = items.length > 0 ? barWidth / items.length : 0;
+  const animateIndicator = motion === "full" && !theme.reduceMotion;
+  const progress = React.useRef(new Animated.Value(activeIndex)).current;
+  React.useEffect(() => {
+    if (!animateIndicator) {
+      progress.setValue(activeIndex);
+      return;
+    }
+    Animated.timing(progress, {
+      toValue: activeIndex,
+      duration: theme.duration.base,
+      easing: Easing.bezier(
+        theme.easing.spring[0],
+        theme.easing.spring[1],
+        theme.easing.spring[2],
+        theme.easing.spring[3]
+      ),
+      useNativeDriver: true
+    }).start();
+  }, [activeIndex, animateIndicator, progress, theme.duration.base, theme.easing.spring]);
+  const translateX = Animated.add(
+    Animated.multiply(progress, segmentWidth),
+    (segmentWidth - theme.space[INDICATOR_WIDTH]) / 2
+  );
+  const select = (next) => onValueChange?.(next);
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "tablist",
+      accessibilityLabel,
+      onLayout: onBarLayout,
+      style: [styles.bar, { paddingBottom: bottomInset }],
+      children: [
+        showIndicator && segmentWidth > 0 ? /* @__PURE__ */ jsx(
+          Animated.View,
+          {
+            pointerEvents: "none",
+            style: [styles.indicator, { width: theme.space[INDICATOR_WIDTH], transform: [{ translateX }] }]
+          }
+        ) : null,
+        items.map((item) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            item,
+            selected: item.value === value,
+            onPress: () => select(item.value),
+            motion
+          },
+          item.value
+        ))
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // `layout.tabbarH` branches on platform: 49 on iOS (UITabBar), 64 on Android
+  // (Material navigation bar). It is a floor rather than a fixed height so a
+  // large OS text size can still grow the labels instead of clipping them; the
+  // safe-area inset is added on top at the use site.
+  bar: {
+    flexDirection: "row",
+    alignItems: "stretch",
+    minHeight: theme.layout.tabbarH,
+    backgroundColor: theme.color.surface,
+    borderTopWidth: theme.borderWidth.thin,
+    borderTopColor: theme.color.border
+  },
+  indicator: {
+    position: "absolute",
+    top: 0,
+    height: theme.space[3],
+    backgroundColor: theme.color.accent,
+    borderRadius: theme.radius.full
+  },
+  tab: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: theme.space.s1
+  },
+  tabInner: {
+    alignItems: "center",
+    gap: theme.space.s1
+  },
+  iconWrap: {
+    position: "relative"
+  },
+  badge: {
+    position: "absolute",
+    top: -theme.space[6],
+    left: theme.space[12],
+    // Reference (buildIconButtons): `min-width:18px;height:18px;padding:0 5px`.
+    // 5px is a step of the spacing ramp.
+    minWidth: theme.space[18],
+    height: theme.space[18],
+    paddingHorizontal: theme.space[5],
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.danger,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  badgeText: {
+    color: theme.color.dangerInk,
+    fontFamily: theme.font.sans,
+    // Reference (buildIconButtons): `font-size:11px` — 11px, read from the ramp rather than hardcoded.
+    fontSize: theme.fontSize[11],
+    fontWeight: theme.fontWeight.bold
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[12],
+    fontWeight: theme.fontWeight.semibold
+  }
+}));
+
+export { TabBar };