@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-47FWHGUN.js

@@ -1,394 +0,0 @@
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import * as React from 'react';
-import { View, TextInput, ScrollView, Text, Animated, Pressable, Easing } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-var LEADING_ICON = 18;
-var CANCEL_WIDTH = 52;
-var RECENTS_MAX_H = 120;
-function SearchBar({
-  data,
-  recents = [],
-  onSelect,
-  placeholder = "Search",
-  value,
-  defaultValue = "",
-  onChangeText
-}) {
-  const { styles } = useStyles(sheet);
-  const theme = useLoamTheme();
-  const iconColor = theme.color.text3;
-  const [focused, setFocused] = React.useState(false);
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(defaultValue);
-  const query = isControlled ? value : internal;
-  const handleChangeText = (text) => {
-    if (!isControlled) setInternal(text);
-    onChangeText?.(text);
-  };
-  const isEmpty = query.length === 0;
-  const needle = query.toLowerCase();
-  const matches = isEmpty ? [] : data.filter((item) => item.toLowerCase().includes(needle));
-  const renderRow = (item, leading) => /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel: item,
-      onPress: onSelect ? () => onSelect(item) : void 0,
-      style: ({ pressed }) => [styles.row, pressed ? styles.rowPressed : null],
-      children: [
-        /* @__PURE__ */ jsx(Icon, { name: leading, size: LEADING_ICON, color: iconColor }),
-        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, numberOfLines: 1, children: item }),
-        /* @__PURE__ */ jsx(View, { style: styles.goIcon, children: /* @__PURE__ */ jsx(Icon, { name: "arrow-right", size: theme.icon.sm, color: iconColor }) })
-      ]
-    },
-    item
-  );
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    /* @__PURE__ */ jsxs(View, { style: [styles.field, focused ? styles.fieldFocused : null], children: [
-      /* @__PURE__ */ jsx(Icon, { name: "search", size: LEADING_ICON, color: iconColor }),
-      /* @__PURE__ */ jsx(
-        TextInput,
-        {
-          style: [styles.input, NO_UA_FOCUS_RING],
-          value: query,
-          onChangeText: handleChangeText,
-          onFocus: () => setFocused(true),
-          onBlur: () => setFocused(false),
-          placeholder,
-          placeholderTextColor: theme.color.text3
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(ScrollView, { style: styles.results, contentContainerStyle: styles.resultsContent, children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: "Recent" }),
-      recents.map((item) => renderRow(item, "more-horizontal"))
-    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Text, { style: styles.empty, children: [
-      'No matches for "',
-      query,
-      '"'
-    ] }) })
-  ] });
-}
-function SearchExpand({
-  recents = [],
-  placeholder = "Search",
-  value,
-  defaultValue = "",
-  onChangeText,
-  onCancel,
-  onSelectRecent,
-  motion = "full"
-}) {
-  const { styles: sx } = useStyles(expandSheet);
-  const theme = useLoamTheme();
-  const resolved = useResolvedMotion(motion);
-  const animateTravel = resolved === "full";
-  const animateFade = resolved !== "none";
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(defaultValue);
-  const query = isControlled ? value : internal;
-  const handleChangeText = (text) => {
-    if (!isControlled) setInternal(text);
-    onChangeText?.(text);
-  };
-  const [focused, setFocused] = React.useState(false);
-  const cancelWidth = React.useRef(new Animated.Value(0)).current;
-  const cancelOpacity = React.useRef(new Animated.Value(0)).current;
-  const recentsHeight = React.useRef(new Animated.Value(0)).current;
-  const recentsOpacity = React.useRef(new Animated.Value(0)).current;
-  const drive = (val, to, kind, useNativeDriver) => {
-    const enabled = kind === "fade" ? animateFade : animateTravel;
-    if (!enabled) {
-      val.setValue(to);
-      return null;
-    }
-    return Animated.timing(val, {
-      toValue: to,
-      duration: theme.motion.toggle.duration,
-      easing: Easing.bezier(...theme.motion.toggle.easing),
-      useNativeDriver
-    });
-  };
-  const runToggle = (open) => {
-    const anims = [
-      drive(cancelWidth, open ? CANCEL_WIDTH : 0, "travel", false),
-      drive(cancelOpacity, open ? 1 : 0, "fade", true),
-      drive(recentsHeight, open ? RECENTS_MAX_H : 0, "travel", false),
-      drive(recentsOpacity, open ? 1 : 0, "fade", true)
-    ].filter((a) => a !== null);
-    if (anims.length > 0) Animated.parallel(anims).start();
-  };
-  const openAnim = () => runToggle(true);
-  const closeAnim = () => runToggle(false);
-  const inputRef = React.useRef(null);
-  const handleFocus = () => {
-    setFocused(true);
-    openAnim();
-  };
-  const handleBlur = () => {
-    setTimeout(() => {
-      if (!query) {
-        setFocused(false);
-        closeAnim();
-      }
-    }, 150);
-  };
-  const handleCancel = () => {
-    if (!isControlled) setInternal("");
-    onChangeText?.("");
-    inputRef.current?.blur();
-    setFocused(false);
-    closeAnim();
-    onCancel?.();
-  };
-  const handleChipPress = (label) => {
-    if (!isControlled) setInternal(label);
-    onChangeText?.(label);
-    onSelectRecent?.(label);
-  };
-  return /* @__PURE__ */ jsxs(View, { style: sx.wrapper, children: [
-    /* @__PURE__ */ jsxs(
-      View,
-      {
-        style: [sx.bar, focused ? sx.barFocused : null],
-        accessibilityRole: "search",
-        children: [
-          /* @__PURE__ */ jsx(Icon, { name: "search", size: LEADING_ICON, color: theme.color.text3 }),
-          /* @__PURE__ */ jsx(
-            TextInput,
-            {
-              ref: inputRef,
-              style: [sx.input, NO_UA_FOCUS_RING],
-              value: query,
-              onChangeText: handleChangeText,
-              onFocus: handleFocus,
-              onBlur: handleBlur,
-              placeholder,
-              placeholderTextColor: theme.color.text3,
-              returnKeyType: "search"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              style: {
-                width: cancelWidth,
-                overflow: "hidden",
-                pointerEvents: focused ? "auto" : "none"
-              },
-              children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: cancelOpacity }, children: /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  accessibilityRole: "button",
-                  accessibilityLabel: "Cancel",
-                  onPress: handleCancel,
-                  style: sx.cancelBtn,
-                  children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: "Cancel" })
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [
-          sx.recentsWrap,
-          {
-            height: recentsHeight,
-            opacity: recentsOpacity,
-            pointerEvents: focused ? "auto" : "none"
-          }
-        ],
-        children: /* @__PURE__ */ jsx(View, { style: sx.chipsRow, children: recents.map((label) => /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: label,
-            onPress: () => handleChipPress(label),
-            style: sx.chip,
-            children: [
-              /* @__PURE__ */ jsx(Icon, { name: "search", size: 13, color: theme.color.text3 }),
-              /* @__PURE__ */ jsx(Text, { style: sx.chipText, children: label })
-            ]
-          },
-          label
-        )) })
-      }
-    )
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  container: { gap: theme.space.s3 },
-  field: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s2,
-    // A prominent, full-width field: the touch tier of the control-size ramp
-    // (44pt), which also clears the tap minimum on its own.
-    height: theme.ctl.lg,
-    paddingHorizontal: theme.space.s4,
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface2,
-    // Transparent at rest rather than absent, so gaining focus tints the edge
-    // instead of growing the field by 1.5px and nudging the row below.
-    borderWidth: theme.borderWidth.thick,
-    borderColor: "transparent"
-  },
-  // Same focused treatment as `SearchExpand`: the two sit in the same product.
-  // The edge is the *measured* ring colour, not the raw
-  // accent. `NO_UA_FOCUS_RING` removes the browser's own outline, so this edge
-  // is the **only** focus affordance the field has — which makes it a focus
-  // indicator under SC 1.4.11 and holds it to 3:1 against both the fill inside
-  // it and the ground outside. The raw accent misses that in 10 of the 42
-  // palette x mode x ground cases (worst 1.98:1 on `surface2`, four palettes).
-  // `focus.ringColor` is the same accent lifted only where it could not clear
-  // 3:1, so it is byte-identical in 9 of the 14 palette x mode combos and moves
-  // exactly the five that were failing.
-  fieldFocused: { borderColor: theme.focus.ringColor, backgroundColor: theme.color.surface },
-  input: {
-    flex: 1,
-    padding: 0,
-    color: theme.color.text,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[16],
-    backgroundColor: "transparent"
-  },
-  results: { alignSelf: "stretch" },
-  resultsContent: { gap: theme.space.s1 },
-  recentHeader: {
-    fontFamily: theme.font.mono,
-    fontSize: theme.fontSize[12],
-    color: theme.color.text3,
-    textTransform: "uppercase",
-    // `theme.tracking.*` are em multiples, so they must be scaled by the size.
-    letterSpacing: theme.tracking.wider * theme.fontSize[12],
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s2
-  },
-  row: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space.s3,
-    paddingHorizontal: theme.space.s3,
-    paddingVertical: theme.space.s3,
-    borderRadius: theme.radius.md,
-    backgroundColor: "transparent"
-  },
-  rowPressed: { backgroundColor: theme.color.surface2 },
-  rowLabel: {
-    flex: 1,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[16],
-    color: theme.color.text
-  },
-  goIcon: { transform: [{ rotate: "-45deg" }] },
-  empty: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[14],
-    color: theme.color.text3,
-    textAlign: "center",
-    paddingHorizontal: theme.space.s5,
-    paddingVertical: theme.space.s6
-  }
-}));
-var expandSheet = createStyleSheet((theme) => ({
-  wrapper: {
-    gap: theme.space[12]
-    // reference: `gap:12px` (line 2399)
-  },
-  // Bar — resting state: surface2 pill, no visible border (transparent).
-  // Geometry: `padding:12px 15px`, `border-radius:var(--r-full)` (line 2400).
-  bar: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[10],
-    // reference: `gap:10px`
-    paddingVertical: theme.space[12],
-    paddingHorizontal: theme.space[15],
-    borderRadius: theme.radius.full,
-    backgroundColor: theme.color.surface2,
-    borderWidth: theme.borderWidth.thick,
-    borderColor: "transparent"
-  },
-  // Focused state: accent border + surface background (reference line 2407),
-  // through `focus.ringColor` for the reason given on `fieldFocused` above.
-  barFocused: {
-    borderColor: theme.focus.ringColor,
-    backgroundColor: theme.color.surface
-  },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    padding: 0,
-    color: theme.color.text,
-    fontFamily: theme.font.sans,
-    fontSize: theme.fontSize[15],
-    // reference: `font-size:15px` (line 2402)
-    backgroundColor: "transparent"
-  },
-  // Cancel button content (reference: `color:var(--accent)`, `font-weight:600`,
-  // `font-size:14px`, line 2403 — the colour deliberately diverges, see below).
-  cancelBtn: {
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: theme.space[4]
-  },
-  // The label is real text at 14px semibold, so it is held to AA's 4.5:1 — not
-  // the 3:1 a glyph gets — against the `surface` the bar paints while focused
-  // (the only time Cancel is visible). The raw accent the reference names here
-  // misses 4.5:1 in 40 of the 56 palette x mode x ground cases, bottoming out at
-  // 1.75:1, so this takes `accentStrong`, which is measured against exactly the
-  // reading grounds `surface`/`bg`/`surface-2` and clears AA on all of them by
-  // construction. Unlike a chart mark or a knob glyph, there is no polarity
-  // trap here: the bar's ground follows the colour mode.
-  cancelText: {
-    color: theme.color.accentStrong,
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    // reference: `font-size:14px` (line 2403)
-    whiteSpace: "nowrap"
-  },
-  // Recents chip row — hidden by default, revealed via animated height.
-  // Reference: `display:flex;flex-wrap:wrap;gap:8px` (line 2405).
-  recentsWrap: {
-    overflow: "hidden"
-  },
-  chipsRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: theme.space[8]
-    // reference: `gap:8px`
-  },
-  // Each chip: `padding:8px 14px`, `border-radius:999px`, `font-size:13px`,
-  // `font-weight:600`, `border:1px solid var(--border-strong)`, `color:var(--text-2)`
-  // (reference line 2406).
-  chip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: theme.space[7],
-    // reference: `gap:7px`
-    paddingVertical: theme.space[8],
-    paddingHorizontal: theme.space[14],
-    borderRadius: theme.radius.full,
-    borderWidth: theme.borderWidth.thin,
-    borderColor: theme.color.borderStrong,
-    backgroundColor: "transparent"
-  },
-  chipText: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[13],
-    // reference: `font-size:13px`
-    color: theme.color.text2
-  }
-}));
-
-export { SearchBar, SearchExpand };

package/dist/chunk-4DS5ZWVC.js

@@ -1,83 +0,0 @@
-import 'react';
-import { View, Text } from 'react-native';
-import { createStyleSheet, useStyles } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-// src/page-header/page-header.tsx
-function PageHeader({
-  breadcrumb,
-  title,
-  titleAdornment,
-  meta,
-  actions,
-  back,
-  tabs,
-  // Accepted for API consistency; intentionally unused (see PageHeaderMotion).
-  motion: _motion = "none"
-}) {
-  const { styles } = useStyles(sheet);
-  return /* @__PURE__ */ jsxs(View, { style: styles.container, children: [
-    back != null ? /* @__PURE__ */ jsx(View, { style: styles.backRow, children: back }) : null,
-    breadcrumb != null ? /* @__PURE__ */ jsx(View, { children: breadcrumb }) : null,
-    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
-      /* @__PURE__ */ jsxs(View, { style: styles.titleGroup, children: [
-        /* @__PURE__ */ jsx(Text, { accessibilityRole: "header", style: styles.title, children: title }),
-        titleAdornment != null ? /* @__PURE__ */ jsx(View, { style: styles.adornment, children: titleAdornment }) : null
-      ] }),
-      actions != null ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: actions }) : null
-    ] }),
-    meta != null ? typeof meta === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.meta, children: meta }) : /* @__PURE__ */ jsx(View, { children: meta }) : null,
-    tabs != null ? /* @__PURE__ */ jsx(View, { style: styles.tabs, children: tabs }) : null
-  ] });
-}
-var sheet = createStyleSheet((theme) => ({
-  container: {
-    gap: theme.space.s3,
-    paddingHorizontal: theme.space.s4,
-    paddingVertical: theme.space.s4,
-    backgroundColor: theme.color.bg
-  },
-  backRow: { flexDirection: "row", alignItems: "center" },
-  // Wraps the actions block below the title on a narrow viewport.
-  titleRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    alignItems: "flex-start",
-    justifyContent: "space-between",
-    gap: theme.space.s3
-  },
-  // `flexShrink: 1` + `minWidth: 0` lets a long title ellipsize / wrap instead
-  // of pushing the actions off the row.
-  titleGroup: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexShrink: 1,
-    minWidth: 0,
-    gap: theme.space.s2
-  },
-  // `title1` (28/34) is the content page-title role on the mobile ramp — one
-  // step below the app bar's `largeTitle`, so the two never read as the same
-  // element.
-  title: {
-    fontFamily: theme.font.display,
-    fontWeight: theme.font.displayWeight,
-    fontSize: theme.type.title1.fontSize,
-    lineHeight: theme.type.title1.lineHeight,
-    letterSpacing: theme.type.title1.letterSpacing,
-    color: theme.color.text,
-    flexShrink: 1
-  },
-  adornment: { flexDirection: "row", alignItems: "center" },
-  actions: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: theme.space.s2 },
-  // Secondary ink, callout size — the AA-safe muted line under the title.
-  meta: {
-    fontFamily: theme.font.sans,
-    fontSize: theme.type.callout.fontSize,
-    lineHeight: theme.type.callout.lineHeight,
-    letterSpacing: theme.type.callout.letterSpacing,
-    color: theme.color.text2
-  },
-  tabs: { marginTop: theme.space.s1 }
-}));
-
-export { PageHeader };

package/dist/chunk-4SZYY6AN.js

@@ -1,99 +0,0 @@
-import { haptics } from './chunk-NY2U3PBI.js';
-import * as React from 'react';
-import { StyleSheet, Animated, Pressable, Easing } from 'react-native';
-import { useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-function Touchable({
-  children,
-  onPress,
-  scaleTo = 0.97,
-  ripple = true,
-  hapticOnPress = false,
-  disabled = false,
-  style,
-  accessibilityLabel
-}) {
-  const theme = useLoamTheme();
-  const scale = React.useRef(new Animated.Value(1)).current;
-  const highlight = React.useRef(new Animated.Value(0)).current;
-  const overlayOpacity = highlight.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.14]
-  });
-  const layerIn = theme.motion.hover;
-  const layerOut = theme.motion.exit;
-  const pressIn = () => {
-    Animated.spring(scale, {
-      toValue: scaleTo,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 6
-    }).start();
-    if (ripple) {
-      Animated.timing(highlight, {
-        toValue: 1,
-        duration: layerIn.duration,
-        easing: Easing.bezier(...layerIn.easing),
-        useNativeDriver: true
-      }).start();
-    }
-  };
-  const pressOut = () => {
-    Animated.spring(scale, {
-      toValue: 1,
-      useNativeDriver: true,
-      speed: 40,
-      bounciness: 6
-    }).start();
-    if (ripple) {
-      Animated.timing(highlight, {
-        toValue: 0,
-        duration: layerOut.duration,
-        easing: Easing.bezier(...layerOut.easing),
-        useNativeDriver: true
-      }).start();
-    }
-  };
-  const handlePress = () => {
-    if (hapticOnPress) haptics.selection();
-    onPress?.();
-  };
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      accessibilityRole: "button",
-      accessibilityLabel,
-      accessibilityState: { disabled },
-      disabled,
-      onPress: disabled ? void 0 : handlePress,
-      onPressIn: disabled ? void 0 : pressIn,
-      onPressOut: disabled ? void 0 : pressOut,
-      children: /* @__PURE__ */ jsxs(Animated.View, { style: [styles.base, style, { transform: [{ scale }] }], children: [
-        children,
-        ripple ? /* @__PURE__ */ jsx(
-          Animated.View,
-          {
-            style: [
-              StyleSheet.absoluteFillObject,
-              styles.highlight,
-              {
-                backgroundColor: theme.color.accent,
-                opacity: overlayOpacity,
-                pointerEvents: "none"
-              }
-            ]
-          }
-        ) : null
-      ] })
-    }
-  );
-}
-var styles = StyleSheet.create({
-  // Clips the highlight overlay to the container's own border radius.
-  base: { overflow: "hidden", position: "relative" },
-  // Kept subtle — the animated `opacity` tops out well below this ceiling.
-  highlight: { opacity: 0 }
-});
-
-export { Touchable };