@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-WFMQ3WKM.js

@@ -0,0 +1,378 @@
+import { ExpandingSearchField } from './chunk-6KSUS7DF.js';
+import { isAndroidIdiom } from './chunk-TH4PW2WU.js';
+import { useLabels } from './chunk-APCWFOZW.js';
+import { Icon } from './chunk-PCEFCOLN.js';
+import * as React from 'react';
+import { Pressable, View, Animated, Text } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function NavHeaderAction({
+  icon,
+  accessibilityLabel,
+  onPress,
+  disabled = false,
+  platform
+}) {
+  const theme = useLoamTheme("nav-header");
+  const { styles } = useStyles(sheet, { align: "left", large: false });
+  const android = isAndroidIdiom(theme, platform);
+  const color = disabled ? theme.color.text3 : android ? theme.color.text2 : theme.color.accentStrong;
+  const hit = android ? Math.max(theme.hit.lg, 48) : theme.tapMin;
+  return /* @__PURE__ */ jsx(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      accessibilityState: { disabled },
+      disabled,
+      onPress: disabled ? void 0 : onPress,
+      android_ripple: android ? { color: theme.state.pressed, borderless: true, radius: hit / 2 } : void 0,
+      style: ({ pressed }) => [
+        styles.action,
+        { width: hit, height: hit },
+        // iOS bar buttons dim on press; Android ripples.
+        pressed && !disabled && !android ? { opacity: theme.state.pressedOpacity } : null
+      ],
+      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: android ? theme.icon.lg : theme.icon.md, color })
+    }
+  );
+}
+function BackLink({
+  title,
+  accessibilityLabel,
+  onPress
+}) {
+  const theme = useLoamTheme("nav-header");
+  const { styles } = useStyles(sheet, { align: "left", large: false });
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityLabel,
+      onPress,
+      hitSlop: 8,
+      style: ({ pressed }) => [
+        styles.backLink,
+        pressed ? { opacity: theme.state.pressedOpacity } : null
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: "chevron-left", size: theme.icon.lg, color: theme.color.accentStrong }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.backText, children: title })
+      ]
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  back: "Back"
+};
+var STRETCH = 1.06;
+var SHRINK = 0.9;
+function NavHeader({
+  title,
+  subtitle,
+  leading,
+  backTitle,
+  leadingLabel,
+  onLeadingPress,
+  leadingSlot,
+  trailing,
+  align: alignProp,
+  large = false,
+  density = "standard",
+  scrolled: scrolledProp,
+  platform,
+  showSearch: showSearchProp = false,
+  searchPlaceholder,
+  labels: labelsProp,
+  searchRecents = [],
+  searchValue,
+  onSearchChangeText,
+  onSearchCancel,
+  searchSlot,
+  scrollY
+}) {
+  const labels = useLabels("navHeader", DEFAULT_LABELS, labelsProp);
+  const theme = useLoamTheme("nav-header");
+  const android = isAndroidIdiom(theme, platform);
+  const align = alignProp ?? (android ? "left" : "center");
+  const compact = density === "compact";
+  const { styles } = useStyles(sheet, { align, large });
+  const [scrolledFromY, setScrolledFromY] = React.useState(false);
+  React.useEffect(() => {
+    if (!scrollY) return;
+    const id = scrollY.addListener(({ value }) => setScrolledFromY(value > 0));
+    return () => scrollY.removeListener(id);
+  }, [scrollY]);
+  const scrolled = scrolledProp ?? scrolledFromY;
+  const leadingIcon = android && leading === "chevron-left" ? "arrow-left" : leading;
+  const showSearch = showSearchProp || searchSlot != null;
+  const collapsing = large && scrollY != null;
+  const [span, setSpan] = React.useState(theme.space[48]);
+  const largeStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [0, span * 0.6],
+      outputRange: [1, 0],
+      extrapolate: "clamp"
+    }),
+    transform: [
+      {
+        scale: scrollY.interpolate({
+          inputRange: [-span, 0, span],
+          outputRange: [STRETCH, 1, SHRINK],
+          extrapolate: "clamp"
+        })
+      }
+    ],
+    transformOrigin: "left center"
+  } : null;
+  const inlineStyle = collapsing ? {
+    opacity: scrollY.interpolate({
+      inputRange: [span * 0.5, span],
+      outputRange: [0, 1],
+      extrapolate: "clamp"
+    })
+  } : null;
+  return /* @__PURE__ */ jsxs(
+    View,
+    {
+      accessibilityRole: "header",
+      style: [
+        styles.container,
+        android ? { backgroundColor: scrolled ? theme.color.surface2 : theme.color.surface } : { borderBottomColor: scrolled ? theme.color.border : "transparent" }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.bar,
+              android && styles.barAndroid,
+              compact && android && { height: theme.layout.appbarH - theme.space.s2 },
+              compact && { gap: theme.space.s1 }
+            ],
+            children: [
+              /* @__PURE__ */ jsx(View, { style: styles.leftSide, children: leadingSlot != null ? leadingSlot : !android && backTitle && leading ? /* @__PURE__ */ jsx(
+                BackLink,
+                {
+                  title: backTitle,
+                  accessibilityLabel: leadingLabel ?? labels.back,
+                  onPress: onLeadingPress
+                }
+              ) : leadingIcon ? /* @__PURE__ */ jsx(
+                NavHeaderAction,
+                {
+                  icon: leadingIcon,
+                  accessibilityLabel: leadingLabel ?? labels.back,
+                  onPress: onLeadingPress,
+                  ...platform ? { platform } : null
+                }
+              ) : null }),
+              /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: collapsing ? /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  style: [styles.title, android && styles.titleAndroid, inlineStyle],
+                  "aria-hidden": true,
+                  accessibilityElementsHidden: true,
+                  importantForAccessibility: "no-hide-descendants",
+                  children: title
+                }
+              ) : large ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles.title, android && styles.titleAndroid], children: title }),
+                subtitle ? /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.subtitle, children: subtitle }) : null
+              ] }) }),
+              /* @__PURE__ */ jsx(View, { style: styles.rightSide, children: trailing })
+            ]
+          }
+        ),
+        large ? /* @__PURE__ */ jsxs(
+          View,
+          {
+            style: [
+              styles.largeBlock,
+              compact && { paddingTop: 0, paddingBottom: theme.space.s2, gap: 0 }
+            ],
+            onLayout: (e) => setSpan(Math.max(1, e.nativeEvent.layout.height)),
+            children: [
+              /* @__PURE__ */ jsx(
+                Animated.Text,
+                {
+                  numberOfLines: 1,
+                  style: [styles.largeTitle, android && styles.largeTitleAndroid, largeStyle],
+                  children: title
+                }
+              ),
+              subtitle ? /* @__PURE__ */ jsx(Text, { style: styles.largeSubtitle, children: subtitle }) : null
+            ]
+          }
+        ) : null,
+        showSearch ? /* @__PURE__ */ jsx(View, { style: styles.searchRow, children: searchSlot != null ? searchSlot : /* @__PURE__ */ jsx(
+          ExpandingSearchField,
+          {
+            placeholder: searchPlaceholder,
+            recents: searchRecents,
+            value: searchValue,
+            onChangeText: onSearchChangeText,
+            onCancel: onSearchCancel
+          }
+        ) }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // No edge at rest: iOS shows the hairline, Android the surface-2 tint, only
+  // once content scrolls under the bar.
+  container: {
+    backgroundColor: theme.color.surface,
+    borderBottomWidth: theme.borderWidth.hair,
+    borderBottomColor: "transparent"
+  },
+  // `layout.appbarH` is the one metric that branches on platform: 44 on iOS
+  // (UINavigationBar), 64 on Android (Material top app bar). It replaces a flat
+  // 56px that was wrong on both.
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    height: theme.layout.appbarH,
+    paddingHorizontal: theme.space.s2,
+    gap: theme.space.s2
+  },
+  // Android: 4 to the 48 icon buttons, which carry their own inset.
+  barAndroid: {
+    paddingHorizontal: theme.space[4],
+    gap: theme.space[4]
+  },
+  leftSide: {
+    alignItems: "flex-start",
+    justifyContent: "center",
+    variants: {
+      // Centered titles need matching gutters on both sides, or the title is
+      // only centred within whatever the actions left over.
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  rightSide: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: theme.space.s1,
+    variants: {
+      align: { left: {}, center: { minWidth: theme.tapMin } },
+      large: { true: {}, false: {} }
+    }
+  },
+  titleWrap: {
+    flex: 1,
+    justifyContent: "center",
+    variants: {
+      align: { left: { alignItems: "flex-start" }, center: { alignItems: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // `type.headline` (17/22/600) is the nav-bar title role on both ramps (HIG
+  // headline / M3 title), is what `NavStack`'s own `NavBar` already uses
+  // for the same element, and is what the design reference draws (16/700). The
+  // deprecated `fontSize[20]` (20) it replaced was the web h3, and left no room
+  // for a subtitle inside the 44dp row.
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.type.headline.fontSize,
+    lineHeight: theme.type.headline.lineHeight,
+    letterSpacing: theme.type.headline.letterSpacing,
+    color: theme.color.text,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  // M3 top app bar title: 22 / 28 / 400 at the start.
+  titleAndroid: {
+    fontSize: theme.fontSize[22],
+    lineHeight: theme.space[28],
+    fontWeight: theme.fontWeight.regular,
+    letterSpacing: 0
+  },
+  backLink: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: theme.tapMin,
+    maxWidth: theme.space[128] ?? 128
+  },
+  backText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    fontWeight: theme.fontWeight.regular,
+    color: theme.color.accentStrong
+  },
+  // A subtitle has to fit *under* the title inside the same bar row, so it is a
+  // footnote, not `fontSize[14]`: 13/18 plus 22 for the title is 40 of the 44.
+  subtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing,
+    color: theme.color.text2,
+    variants: {
+      align: { left: { textAlign: "left" }, center: { textAlign: "center" } },
+      large: { true: {}, false: {} }
+    }
+  },
+  largeBlock: {
+    paddingHorizontal: theme.space.s4,
+    paddingTop: theme.space.s2,
+    paddingBottom: theme.space.s4,
+    gap: theme.space.s1
+  },
+  // The integrated search row sits under the bar: reference `padding:0 12px 12px`
+  // (buildAppBar search size), mapped to the space scale (16 horizontal / 12
+  // bottom is close enough on the 4px grid; the field owns its own height).
+  searchRow: {
+    paddingHorizontal: theme.space.s4,
+    paddingBottom: theme.space.s3
+  },
+  // 34 is the intended iOS large title and is unchanged; it just moves from the
+  // deprecated size-only ramp (`fontSize[36]`) to the semantic role that
+  // owns that size, which also brings the 41 line box with it. Without an
+  // explicit `lineHeight` a 34px display-face line was laid out on `normal`.
+  // R14: the OS face, iOS large title 34 / 700.
+  largeTitle: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.bold,
+    fontSize: theme.type.largeTitle.fontSize,
+    lineHeight: theme.type.largeTitle.lineHeight,
+    letterSpacing: theme.type.largeTitle.letterSpacing,
+    color: theme.color.text
+  },
+  // The Android medium top app bar: 28 / 36 / 400.
+  largeTitleAndroid: {
+    fontSize: theme.fontSize[28],
+    lineHeight: theme.space[36],
+    fontWeight: theme.fontWeight.regular,
+    letterSpacing: 0
+  },
+  // `type.callout` is 16 — the same size `fontSize[16]` resolved to, on the
+  // semantic ramp and with a line box.
+  largeSubtitle: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.callout.fontSize,
+    lineHeight: theme.type.callout.lineHeight,
+    letterSpacing: theme.type.callout.letterSpacing,
+    color: theme.color.text2
+  },
+  // A bar button is a touch target before it is a glyph: `tapMin` (44), not the
+  // 40 it used to hardcode.
+  action: {
+    width: theme.tapMin,
+    height: theme.tapMin,
+    borderRadius: theme.radius.full,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+
+export { NavHeader, NavHeaderAction };

package/dist/chunk-WJ2KDRMY.js

@@ -0,0 +1,66 @@
+import 'react';
+import { View } from 'react-native';
+import { useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/stack/stack.tsx
+function useGap(gap) {
+  const theme = useLoamTheme("stack");
+  return gap === 0 ? 0 : theme.space[gap];
+}
+function Stack({
+  gap = 8,
+  align,
+  justify,
+  wrap = false,
+  orientation = "vertical",
+  style,
+  ...rest
+}) {
+  const g = useGap(gap);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          flexDirection: orientation === "horizontal" ? "row" : "column",
+          gap: g,
+          alignItems: align,
+          justifyContent: justify,
+          flexWrap: wrap ? "wrap" : "nowrap"
+        },
+        style
+      ],
+      ...rest
+    }
+  );
+}
+function Row({
+  gap = 8,
+  align = "center",
+  justify,
+  wrap = false,
+  orientation = "horizontal",
+  style,
+  ...rest
+}) {
+  const g = useGap(gap);
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      style: [
+        {
+          flexDirection: orientation === "vertical" ? "column" : "row",
+          gap: g,
+          alignItems: align,
+          justifyContent: justify,
+          flexWrap: wrap ? "wrap" : "nowrap"
+        },
+        style
+      ],
+      ...rest
+    }
+  );
+}
+
+export { Row, Stack };