@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/{chunk-HPPW424V.js → chunk-LXJCP4PL.js}

@@ -1,4 +1,7 @@
-import { Icon } from './chunk-TKVFVF5D.js';
+import { alignItemsStyle } from './chunk-TUACVJNG.js';
+import { useInputPlatform } from './chunk-KXLDK6HB.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
 import * as React2 from 'react';
 import { Platform, Easing, Keyboard, Animated, View, Pressable, Text, useWindowDimensions, ScrollView } from 'react-native';
 import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
@@ -30,7 +33,7 @@ function keyboardEasing(easing, fallback) {
   }
 }
 function useKeyboardInset() {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const enterDuration = theme.motion.enter.duration;
   const exitDuration = theme.motion.exit.duration;
   const [state, setState] = React2.useState(() => ({
@@ -62,7 +65,7 @@ function useKeyboardInset() {
   return state;
 }
 function useAnimatedKeyboardInset(extra = 0) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const state = useKeyboardInset();
   const inset = React2.useRef(new Animated.Value(0)).current;
   const fallbackCurve = state.visible ? theme.motion.enter.easing : theme.motion.exit.easing;
@@ -79,13 +82,26 @@ function useAnimatedKeyboardInset(extra = 0) {
   }, [inset, target, state.duration, state.easing, fallbackCurve]);
   return { inset, state };
 }
-var PREVIOUS_ICON = "arrow-up";
-var NEXT_ICON = "arrow-down";
+var DEFAULT_LABELS = {
+  done: "Done",
+  previous: "Previous field",
+  next: "Next field"
+};
+var PREVIOUS_ICON = "chevron-up";
+var NEXT_ICON = "chevron-down";
 var ACCESSORY_NAV_MIN_FIELDS = 3;
+var SELF_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
 function KeyboardSpacer({
   extra = 0,
   enabled = true,
-  testID
+  testID,
+  orientation = "vertical",
+  align
 }) {
   const { inset } = useAnimatedKeyboardInset(extra);
   return /* @__PURE__ */ jsx(
@@ -93,7 +109,10 @@ function KeyboardSpacer({
     {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no-hide-descendants",
-      style: { height: enabled ? inset : 0 },
+      style: [
+        orientation === "horizontal" ? { width: enabled ? inset : 0 } : { height: enabled ? inset : 0 },
+        align ? { alignSelf: SELF_ALIGN[align] } : null
+      ],
       testID
     }
   );
@@ -103,7 +122,9 @@ function KeyboardStickyView({
   offset = 0,
   enabled = true,
   style,
-  testID
+  testID,
+  align,
+  orientation = "vertical"
 }) {
   const { styles } = useStyles(sheet);
   const { inset } = useAnimatedKeyboardInset(offset);
@@ -111,7 +132,13 @@ function KeyboardStickyView({
   return /* @__PURE__ */ jsx(
     Animated.View,
     {
-      style: [styles.stickyBar, { transform: [{ translateY: enabled ? lift : 0 }] }, style],
+      style: [
+        styles.stickyBar,
+        orientation === "horizontal" ? { flexDirection: "row" } : null,
+        alignItemsStyle(align),
+        { transform: [{ translateY: enabled ? lift : 0 }] },
+        style
+      ],
       testID,
       children
     }
@@ -125,25 +152,48 @@ function KeyboardAccessoryBar({
   onPrevious,
   onNext,
   onDone,
-  doneLabel = "Done",
-  previousLabel = "Previous field",
-  nextLabel = "Next field",
+  doneLabel: doneLabelProp,
+  previousLabel: previousLabelProp,
+  nextLabel: nextLabelProp,
+  labels: labelsProp,
   children,
   sticky = false,
   style,
-  testID
+  testID,
+  platform,
+  variant = "default",
+  size,
+  density,
+  orientation = "horizontal"
 }) {
-  const { styles } = useStyles(sheet);
+  const os = useInputPlatform(platform);
+  const labels = useLabels("keyboard", DEFAULT_LABELS, labelsProp);
+  const doneLabel = doneLabelProp ?? labels.done;
+  const previousLabel = previousLabelProp ?? labels.previous;
+  const nextLabel = nextLabelProp ?? labels.next;
+  const theme = useLoamTheme("keyboard");
+  const { styles } = useStyles(sheet, { os });
+  const vertical = orientation === "vertical";
+  const compact = density === "compact";
   const showNav = navigable && (fieldCount == null || fieldCount > ACCESSORY_NAV_MIN_FIELDS);
-  const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [styles.accessoryBar, style], testID, children: [
-    showNav ? /* @__PURE__ */ jsxs(View, { style: styles.accessoryNav, children: [
+  const bar = /* @__PURE__ */ jsxs(View, { accessibilityRole: "toolbar", style: [
+    styles.accessoryBar,
+    variant === "plain" ? styles.accessoryBarPlain : null,
+    size ? { height: theme.ctl[size] } : null,
+    compact ? { paddingHorizontal: theme.space.s1 } : null,
+    vertical ? styles.accessoryBarVertical : null,
+    style
+  ], testID, children: [
+    showNav ? /* @__PURE__ */ jsxs(View, { style: [styles.accessoryNav, compact ? { gap: theme.space.s1 } : null], children: [
       /* @__PURE__ */ jsx(
         AccessoryButton,
         {
           icon: PREVIOUS_ICON,
           label: previousLabel,
           disabled: !canGoPrevious,
-          onPress: onPrevious
+          onPress: onPrevious,
+          os,
+          size
         }
       ),
       /* @__PURE__ */ jsx(
@@ -152,7 +202,9 @@ function KeyboardAccessoryBar({
           icon: NEXT_ICON,
           label: nextLabel,
           disabled: !canGoNext,
-          onPress: onNext
+          onPress: onNext,
+          os,
+          size
         }
       )
     ] }) : /* @__PURE__ */ jsx(View, {}),
@@ -174,10 +226,12 @@ function AccessoryButton({
   icon,
   label,
   disabled,
-  onPress
+  onPress,
+  os,
+  size
 }) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { disabled });
+  const theme = useLoamTheme("keyboard");
+  const { styles } = useStyles(sheet, { disabled, os });
   return /* @__PURE__ */ jsx(
     Pressable,
     {
@@ -188,9 +242,17 @@ function AccessoryButton({
       onPress: disabled ? void 0 : onPress,
       style: ({ pressed }) => [
         styles.accessoryButton,
+        size ? { width: theme.ctl[size], height: theme.ctl[size] } : null,
         pressed && !disabled ? { backgroundColor: theme.state.pressed } : null
       ],
-      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color: disabled ? theme.color.text3 : theme.color.text2 })
+      children: /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: icon,
+          size: theme.ctl.icon.lg,
+          color: disabled ? theme.color.text3 : theme.color.text2
+        }
+      )
     }
   );
 }
@@ -202,9 +264,11 @@ function KeyboardAvoidingScrollView({
   contentContainerStyle,
   onScroll,
   testID,
+  align,
+  orientation = "vertical",
   ...rest
 }) {
-  const theme = useLoamTheme();
+  const theme = useLoamTheme("keyboard");
   const inset = useKeyboardInset();
   const { height: windowHeight } = useWindowDimensions();
   const clearance = extraBottom ?? theme.layout.screenPad;
@@ -212,8 +276,9 @@ function KeyboardAvoidingScrollView({
   const offset = React2.useRef(0);
   const restoreTo = React2.useRef(null);
   const pendingNode = React2.useRef(null);
-  const latest = React2.useRef({ inset, windowHeight, clearance });
-  latest.current = { inset, windowHeight, clearance };
+  const horizontal = orientation === "horizontal";
+  const latest = React2.useRef({ inset, windowHeight, clearance, horizontal });
+  latest.current = { inset, windowHeight, clearance, horizontal };
   const handleScroll = React2.useCallback(
     (event) => {
       offset.current = event.nativeEvent.contentOffset.y;
@@ -223,6 +288,7 @@ function KeyboardAvoidingScrollView({
   );
   const bringIntoView = React2.useCallback((node) => {
     if (!node || typeof node.measureInWindow !== "function") return;
+    if (latest.current.horizontal) return;
     const { inset: kbd, windowHeight: winH, clearance: pad } = latest.current;
     if (!kbd.visible) {
       pendingNode.current = node;
@@ -257,11 +323,16 @@ function KeyboardAvoidingScrollView({
     ScrollView,
     {
       ref: scrollRef,
+      horizontal,
       keyboardDismissMode,
       keyboardShouldPersistTaps: "handled",
       scrollEventThrottle: 16,
       onScroll: handleScroll,
-      contentContainerStyle: [{ paddingBottom: inset.height + clearance }, contentContainerStyle],
+      contentContainerStyle: [
+        { paddingBottom: inset.height + clearance },
+        alignItemsStyle(align),
+        contentContainerStyle
+      ],
       testID,
       ...rest,
       children
@@ -277,10 +348,14 @@ function useScrollIntoView() {
   return { ref, onFocus };
 }
 var sheet = createStyleSheet((theme) => ({
-  // The reference draws the accessory bar 42 dp tall; `toolbarH` (44) is the
-  // token for exactly this surface and also clears `tapMin`.
+  // F64: the bar is 44 on iOS (the keyboard accessory) and 48 on Android.
   accessoryBar: {
-    minHeight: theme.layout.toolbarH,
+    variants: {
+      os: {
+        ios: { height: theme.space[44] },
+        android: { height: theme.space[48] }
+      }
+    },
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
@@ -289,19 +364,33 @@ var sheet = createStyleSheet((theme) => ({
     borderTopWidth: theme.borderWidth.base,
     borderTopColor: theme.color.border
   },
+  // `orientation="vertical"`: a column that grows to its content.
+  accessoryBarVertical: {
+    flexDirection: "column",
+    alignItems: "stretch",
+    height: "auto",
+    paddingVertical: theme.space.s2,
+    gap: theme.space.s2
+  },
+  accessoryBarPlain: {
+    backgroundColor: theme.color.bg,
+    borderTopWidth: 0
+  },
   accessoryNav: {
     flexDirection: "row",
     alignItems: "center",
     gap: theme.space.s2
   },
   accessoryMiddle: { flex: 1, alignItems: "center" },
+  // Ghost icon button on the lg tier.
   accessoryButton: {
-    minWidth: theme.tapMin,
-    minHeight: theme.tapMin,
+    width: theme.ctl.lg,
+    height: theme.ctl.lg,
     alignItems: "center",
     justifyContent: "center",
-    borderRadius: theme.radius.sm,
+    borderRadius: theme.ctl.r.lg,
     variants: {
+      os: { ios: {}, android: {} },
       disabled: {
         true: { opacity: theme.state.disabledOpacity },
         false: {}
@@ -315,13 +404,16 @@ var sheet = createStyleSheet((theme) => ({
     justifyContent: "center",
     paddingHorizontal: theme.space.s1
   },
+  // Done is a link: 17 / 600 on iOS, 14 / 500 on Android.
   accessoryDoneLabel: {
     fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.type.footnote.fontSize,
-    lineHeight: theme.type.footnote.lineHeight,
-    letterSpacing: theme.type.footnote.letterSpacing,
-    color: theme.color.accentStrong
+    color: theme.color.accentStrong,
+    variants: {
+      os: {
+        ios: { fontSize: theme.fontSize[17], fontWeight: theme.fontWeight.semibold },
+        android: { fontSize: theme.fontSize[14], fontWeight: theme.fontWeight.medium }
+      }
+    }
   },
   stickyBar: {
     flexDirection: "column",