@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-LQP4KEXZ.js

@@ -1,214 +0,0 @@
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { springConfig } from './chunk-J64KGCGX.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 DEFAULT_LABELS = {
-  tabWithBadge: (label, badge) => `${label}, ${badge}`
-};
-var INDICATOR_WIDTH = 28;
-var BADGE_MAX = 99;
-function Tab({
-  item,
-  selected,
-  onPress,
-  motion,
-  bounce,
-  labels
-}) {
-  const theme = useLoamTheme("tab-bar");
-  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, {
-      ...springConfig(theme, "fs"),
-      toValue: to,
-      useNativeDriver: true
-    }).start();
-  };
-  const badgeScale = React.useRef(new Animated.Value(1)).current;
-  const lastBadge = React.useRef(item.badge ?? 0);
-  React.useEffect(() => {
-    const now = item.badge ?? 0;
-    const rose = now > lastBadge.current;
-    lastBadge.current = now;
-    if (!rose || !bounce) return;
-    badgeScale.setValue(1.3);
-    Animated.spring(badgeScale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 20,
-      bounciness: 12
-    }).start();
-  }, [item.badge, bounce, badgeScale]);
-  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: showBadge ? labels.tabWithBadge(item.label, badgeText) : 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(Animated.View, { style: [styles.badge, { transform: [{ scale: badgeScale }] }], 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,
-  onReselect,
-  bottomInset = 0,
-  showIndicator = true,
-  motion = "full",
-  accessibilityLabel,
-  labels: labelsProp
-}) {
-  const theme = useLoamTheme("tab-bar");
-  const labels = useLabels("tabBar", DEFAULT_LABELS, labelsProp);
-  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) => {
-    if (next === value && onReselect) onReselect(next);
-    else 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,
-            bounce: motion !== "none" && !theme.reduceMotion,
-            labels
-          },
-          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 };

package/dist/chunk-NTQ2F3AU.js

@@ -1,257 +0,0 @@
-import { ExpandingSearchField } from './chunk-DVGBZ3TX.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.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
-}) {
-  const theme = useLoamTheme("nav-header");
-  const { styles } = useStyles(sheet, { align: "left", large: false });
-  const color = disabled ? theme.color.text3 : theme.color.text;
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled },
-      disabled,
-      onPress: disabled ? void 0 : onPress,
-      style: ({ pressed }) => [styles.action, pressed && !disabled ? styles.actionPressed : null],
-      children: /* @__PURE__ */ jsx(Icon, { name: icon, size: theme.icon.md, color })
-    }
-  );
-}
-var DEFAULT_LABELS = {
-  back: "Back"
-};
-var STRETCH = 1.06;
-var SHRINK = 0.9;
-function NavHeader({
-  title,
-  subtitle,
-  leading,
-  leadingLabel,
-  onLeadingPress,
-  leadingSlot,
-  trailing,
-  align = "left",
-  large = false,
-  search = false,
-  searchPlaceholder,
-  labels: labelsProp,
-  searchRecents = [],
-  searchValue,
-  onSearchChangeText,
-  onSearchCancel,
-  searchSlot,
-  scrollY
-}) {
-  const labels = useLabels("navHeader", DEFAULT_LABELS, labelsProp);
-  const { styles } = useStyles(sheet, { align, large });
-  const theme = useLoamTheme("nav-header");
-  const showSearch = search || 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, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.bar, children: [
-      /* @__PURE__ */ jsx(View, { style: styles.leftSide, children: leadingSlot != null ? leadingSlot : leading ? /* @__PURE__ */ jsx(
-        NavHeaderAction,
-        {
-          icon: leading,
-          accessibilityLabel: leadingLabel ?? labels.back,
-          onPress: onLeadingPress
-        }
-      ) : null }),
-      /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: collapsing ? /* @__PURE__ */ jsx(
-        Animated.Text,
-        {
-          numberOfLines: 1,
-          style: [styles.title, 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, 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,
-        onLayout: (e) => setSpan(Math.max(1, e.nativeEvent.layout.height)),
-        children: [
-          /* @__PURE__ */ jsx(Animated.Text, { numberOfLines: 1, style: [styles.largeTitle, 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) => ({
-  container: {
-    backgroundColor: theme.color.surface,
-    borderBottomWidth: theme.borderWidth.base,
-    borderBottomColor: theme.color.border
-  },
-  // `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.s4,
-    gap: theme.space.s2
-  },
-  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: {} }
-    }
-  },
-  // 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`.
-  largeTitle: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.largeTitle.fontSize,
-    lineHeight: theme.type.largeTitle.lineHeight,
-    letterSpacing: theme.type.largeTitle.letterSpacing,
-    color: theme.color.text
-  },
-  // `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"
-  },
-  actionPressed: {
-    backgroundColor: theme.color.surface2
-  }
-}));
-
-export { NavHeader, NavHeaderAction };