@btndprojects/loam-ui-native 0.2.1 → 0.3.1

package/dist/chunk-DVGBZ3TX.js

@@ -1,455 +0,0 @@
-import { NO_UA_FOCUS_RING } from './chunk-3NMD74ZU.js';
-import { announce } from './chunk-W23G6JLF.js';
-import { useLabels } from './chunk-APCWFOZW.js';
-import { Icon } from './chunk-UXGIW7OK.js';
-import { useResolvedMotion } from './chunk-J64KGCGX.js';
-import * as React from 'react';
-import { Platform, View, TextInput, Pressable, Text, ScrollView, Animated, 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;
-var DEFAULT_LABELS = {
-  placeholder: "Search",
-  clear: "Clear search",
-  recent: "Recent",
-  noMatches: "No matches",
-  noMatchesFor: (query) => `No matches for "${query}"`,
-  tryRecent: "Try a recent search",
-  results: (count) => `${count} ${count === 1 ? "result" : "results"}`,
-  cancel: "Cancel"
-};
-function SearchField({
-  data,
-  recents = [],
-  onSelect,
-  placeholder: placeholderProp,
-  value,
-  defaultValue = "",
-  onChangeText,
-  labels: labelsProp
-}) {
-  const { styles } = useStyles(sheet);
-  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
-  const placeholder = placeholderProp ?? labels.placeholder;
-  const theme = useLoamTheme("search-field");
-  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 clear = () => handleChangeText("");
-  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
-  );
-  const countText = isEmpty ? "" : matches.length === 0 ? labels.noMatches : labels.results(matches.length);
-  React.useEffect(() => {
-    if (Platform.OS === "web" || !countText) return;
-    const t = setTimeout(() => announce(countText), 600);
-    return () => clearTimeout(t);
-  }, [countText]);
-  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,
-          returnKeyType: "search",
-          ...Platform.OS === "web" ? { role: "searchbox" } : { accessibilityRole: "search" },
-          accessibilityLabel: placeholder,
-          onSubmitEditing: () => {
-            const top = matches[0];
-            if (top !== void 0) onSelect?.(top);
-          },
-          onKeyPress: (e) => {
-            if (e.nativeEvent.key === "Escape" && !isEmpty) clear();
-          }
-        }
-      ),
-      isEmpty ? null : /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityLabel: labels.clear,
-          onPress: clear,
-          hitSlop: Math.max(0, (theme.tapMin - theme.icon.sm) / 2),
-          children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.sm, color: iconColor })
-        }
-      )
-    ] }),
-    Platform.OS === "web" ? /* @__PURE__ */ jsx(Text, { accessibilityLiveRegion: "polite", style: styles.liveCount, children: countText }) : null,
-    /* @__PURE__ */ jsx(ScrollView, { style: styles.results, contentContainerStyle: styles.resultsContent, children: isEmpty ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      recents.length > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.recent }) : null,
-      recents.map((item) => renderRow(item, "more-horizontal"))
-    ] }) : matches.length > 0 ? matches.map((item) => renderRow(item, "search")) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.empty, children: labels.noMatchesFor(query) }),
-      recents.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Text, { style: styles.recentHeader, children: labels.tryRecent }),
-        recents.map((item) => renderRow(item, "more-horizontal"))
-      ] }) : null
-    ] }) })
-  ] });
-}
-function ExpandingSearchField({
-  recents = [],
-  placeholder: placeholderProp,
-  value,
-  defaultValue = "",
-  onChangeText,
-  onCancel,
-  onSelectRecent,
-  motion = "full",
-  labels: labelsProp
-}) {
-  const { styles: sx } = useStyles(expandSheet);
-  const labels = useLabels("searchField", DEFAULT_LABELS, labelsProp);
-  const placeholder = placeholderProp ?? labels.placeholder;
-  const theme = useLoamTheme("search-field");
-  const resolved = useResolvedMotion(motion, "search-field");
-  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",
-              accessibilityLabel: placeholder
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Animated.View,
-            {
-              style: {
-                width: cancelWidth,
-                overflow: "hidden",
-                pointerEvents: focused ? "auto" : "none"
-              },
-              accessibilityElementsHidden: !focused,
-              importantForAccessibility: focused ? "auto" : "no-hide-descendants",
-              ...focused ? null : { "aria-hidden": true },
-              children: /* @__PURE__ */ jsx(Animated.View, { style: { opacity: cancelOpacity }, children: /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  accessibilityRole: "button",
-                  accessibilityLabel: labels.cancel,
-                  focusable: focused,
-                  tabIndex: focused ? 0 : -1,
-                  onPress: handleCancel,
-                  style: sx.cancelBtn,
-                  children: /* @__PURE__ */ jsx(Text, { style: sx.cancelText, children: labels.cancel })
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        style: [
-          sx.recentsWrap,
-          {
-            height: recentsHeight,
-            opacity: recentsOpacity,
-            pointerEvents: focused ? "auto" : "none"
-          }
-        ],
-        accessibilityElementsHidden: !focused,
-        importantForAccessibility: focused ? "auto" : "no-hide-descendants",
-        ...focused ? null : { "aria-hidden": true },
-        children: /* @__PURE__ */ jsx(View, { style: sx.chipsRow, children: recents.map((label) => /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: label,
-            focusable: focused,
-            tabIndex: focused ? 0 : -1,
-            hitSlop: { top: theme.space[6], bottom: theme.space[6] },
-            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 `ExpandingSearchField`: 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" },
-  liveCount: { position: "absolute", width: 1, height: 1, opacity: 0, overflow: "hidden" },
-  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 { ExpandingSearchField, SearchField };