@btndprojects/loam-ui-native 0.1.1 → 0.3.1

package/dist/chunk-4YQOR7JM.js

@@ -1,204 +0,0 @@
-import { SearchExpand } from './chunk-47FWHGUN.js';
-import { Icon } from './chunk-TKVFVF5D.js';
-import 'react';
-import { Pressable, View, Text } from 'react-native';
-import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-function HeaderAction({
-  icon,
-  accessibilityLabel,
-  onPress,
-  disabled = false
-}) {
-  const theme = useLoamTheme();
-  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 })
-    }
-  );
-}
-function Header({
-  title,
-  subtitle,
-  leading,
-  leadingLabel = "Back",
-  onLeadingPress,
-  leadingSlot,
-  trailing,
-  align = "left",
-  large = false,
-  search = false,
-  searchPlaceholder = "Search",
-  searchRecents = [],
-  searchValue,
-  onSearchChangeText,
-  onSearchCancel,
-  searchSlot
-}) {
-  const { styles } = useStyles(sheet, { align, large });
-  const showSearch = search || searchSlot != 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(
-        HeaderAction,
-        {
-          icon: leading,
-          accessibilityLabel: leadingLabel,
-          onPress: onLeadingPress
-        }
-      ) : null }),
-      /* @__PURE__ */ jsx(View, { style: styles.titleWrap, children: 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, children: [
-      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: styles.largeTitle, 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(
-      SearchExpand,
-      {
-        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 `NavigationStack`'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 { Header, HeaderAction };

package/dist/chunk-52X2VYTD.js

@@ -1,228 +0,0 @@
-import { useColorTransition } from './chunk-ITTYJZWX.js';
-import { haptics } from './chunk-NY2U3PBI.js';
-import * as React from 'react';
-import { Animated, Easing, Pressable, View, TextInput, Text } from 'react-native';
-import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-var MASK = "\u2022";
-var COMPLETE_POP = 1.08;
-var COMPLETE_STAGGER = 55;
-function OTPBox({
-  char,
-  secure,
-  active,
-  borderTarget,
-  fillTarget,
-  caret,
-  pop
-}) {
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { disabled: false });
-  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
-  const borderColor = useColorTransition(borderTarget, theme.duration.base, easing);
-  const backgroundColor = useColorTransition(fillTarget, theme.duration.base, easing);
-  return /* @__PURE__ */ jsx(
-    Animated.View,
-    {
-      testID: "otp-box",
-      style: [styles.box, { borderColor, backgroundColor, transform: [{ scale: pop }] }],
-      children: char ? /* @__PURE__ */ jsx(Text, { style: styles.digit, children: secure ? MASK : char }) : active ? /* @__PURE__ */ jsx(Animated.View, { style: [styles.caret, { opacity: caret }] }) : null
-    }
-  );
-}
-function OTP({
-  length = 6,
-  value,
-  defaultValue = "",
-  onChangeText,
-  onComplete,
-  disabled = false,
-  error = false,
-  secure = false,
-  keyboardType = "number-pad",
-  accessibilityLabel = "One-time code",
-  style
-}) {
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(() => defaultValue.slice(0, length));
-  const current = (isControlled ? value : internal) ?? "";
-  const [focused, setFocused] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const { styles } = useStyles(sheet, { disabled });
-  const theme = useLoamTheme();
-  const caret = React.useRef(new Animated.Value(1)).current;
-  React.useEffect(() => {
-    if (!focused || disabled || theme.reduceMotion) {
-      caret.setValue(1);
-      return;
-    }
-    const half = theme.loop.spin / 2;
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(caret, { toValue: 0, duration: half, useNativeDriver: true }),
-        Animated.timing(caret, { toValue: 1, duration: half, useNativeDriver: true })
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [focused, disabled, caret, theme.reduceMotion, theme.loop.spin]);
-  const numeric = keyboardType === "number-pad" || keyboardType === "numeric" || keyboardType === "phone-pad";
-  const handleChange = (text) => {
-    let next = numeric ? text.replace(/\D/g, "") : text;
-    next = next.slice(0, length);
-    if (next.length > current.length) haptics.impact("light");
-    if (!isControlled) setInternal(next);
-    onChangeText?.(next);
-    if (next.length === length) {
-      haptics.notify("success");
-      onComplete?.(next);
-    }
-  };
-  const focus = () => {
-    if (!disabled) inputRef.current?.focus();
-  };
-  const activeIndex = current.length;
-  const isComplete = length > 0 && current.length === length;
-  const popsRef = React.useRef([]);
-  if (popsRef.current.length !== length) {
-    popsRef.current = Array.from({ length }, (_, i) => popsRef.current[i] ?? new Animated.Value(1));
-  }
-  const pops = popsRef.current;
-  React.useEffect(() => {
-    if (!isComplete || disabled) return;
-    const easing = Easing.bezier(...theme.easing.base);
-    const anim = Animated.stagger(
-      COMPLETE_STAGGER,
-      pops.map(
-        (p) => Animated.sequence([
-          Animated.timing(p, {
-            toValue: COMPLETE_POP,
-            duration: theme.duration.base,
-            easing,
-            useNativeDriver: true
-          }),
-          Animated.timing(p, {
-            toValue: 1,
-            duration: theme.duration.base,
-            easing,
-            useNativeDriver: true
-          })
-        ])
-      )
-    );
-    anim.start();
-    return () => anim.stop();
-  }, [isComplete, disabled, pops, theme.duration.base, theme.easing.base]);
-  return /* @__PURE__ */ jsxs(
-    Pressable,
-    {
-      onPress: focus,
-      disabled,
-      accessibilityRole: "none",
-      style: [styles.row, style],
-      children: [
-        /* @__PURE__ */ jsx(
-          View,
-          {
-            style: styles.boxes,
-            importantForAccessibility: "no-hide-descendants",
-            accessibilityElementsHidden: true,
-            children: Array.from({ length }).map((_, i) => {
-              const char = current[i];
-              const isActive = focused && !disabled && !error && i === activeIndex && i < length;
-              const borderTarget = error ? theme.color.danger : isComplete ? theme.color.good : char || isActive ? theme.color.accent : theme.color.borderStrong;
-              return /* @__PURE__ */ jsx(
-                OTPBox,
-                {
-                  char,
-                  secure,
-                  active: isActive,
-                  borderTarget,
-                  fillTarget: isActive ? theme.color.surface : theme.color.surface2,
-                  caret,
-                  pop: pops[i]
-                },
-                i
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          TextInput,
-          {
-            ref: inputRef,
-            value: current,
-            onChangeText: handleChange,
-            onFocus: () => setFocused(true),
-            onBlur: () => setFocused(false),
-            editable: !disabled,
-            keyboardType,
-            textContentType: "oneTimeCode",
-            autoComplete: "one-time-code",
-            maxLength: length,
-            caretHidden: true,
-            accessibilityLabel,
-            accessibilityState: { disabled },
-            style: styles.hiddenInput
-          }
-        )
-      ]
-    }
-  );
-}
-var sheet = createStyleSheet((theme) => ({
-  row: {
-    position: "relative",
-    alignSelf: "flex-start",
-    variants: {
-      disabled: {
-        true: { opacity: theme.state.disabledOpacity },
-        false: {}
-      }
-    }
-  },
-  boxes: {
-    flexDirection: "row",
-    gap: theme.space.s2
-  },
-  // `borderColor` / `backgroundColor` are supplied at the use site as animated
-  // values so a box can travel between states over `duration.base`.
-  box: {
-    width: theme.space[48],
-    height: theme.space[58],
-    alignItems: "center",
-    justifyContent: "center",
-    // The reference draws a `1.5px` cell edge — the static `w2` weight.
-    borderWidth: theme.borderWidth.thick,
-    borderRadius: theme.radius.md,
-    variants: {
-      disabled: { true: {}, false: {} }
-    }
-  },
-  digit: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.bold,
-    fontSize: theme.fontSize[26],
-    color: theme.color.text
-  },
-  caret: {
-    width: theme.space[2],
-    height: theme.space[24],
-    borderRadius: theme.radius.sm,
-    backgroundColor: theme.color.accent
-  },
-  // Transparent overlay: fills the row so any tap focuses it and the OS can
-  // route autofill/paste here, while the visible UI is the boxes underneath.
-  hiddenInput: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    opacity: 0,
-    color: "transparent"
-  }
-}));
-
-export { OTP };

package/dist/chunk-5YNTNN5A.js

@@ -1,177 +0,0 @@
-import { haptics } from './chunk-NY2U3PBI.js';
-import { useResolvedMotion } from './chunk-6N33LFQA.js';
-import { Icon } from './chunk-TKVFVF5D.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 { jsx, jsxs } from 'react/jsx-runtime';
-
-function SegmentedControl({
-  items,
-  value,
-  defaultValue,
-  onValueChange,
-  size = "md",
-  motion = "full",
-  disabled = false
-}) {
-  const animateSlide = useResolvedMotion(motion) === "full";
-  const isControlled = value !== void 0;
-  const [internal, setInternal] = React.useState(
-    defaultValue ?? items[0]?.value
-  );
-  const current = isControlled ? value : internal;
-  const activeIndex = Math.max(
-    0,
-    items.findIndex((item) => item.value === current)
-  );
-  const theme = useLoamTheme();
-  const { styles } = useStyles(sheet, { size, disabled });
-  const iconSize = theme.ctl.icon[size];
-  const slopY = Math.max(0, (theme.hit[size] - theme.ctl[size]) / 2);
-  const [layouts, setLayouts] = React.useState({});
-  const onSegmentLayout = (index) => (e) => {
-    const { x, y, width, height } = e.nativeEvent.layout;
-    setLayouts((prev) => {
-      const p = prev[index];
-      if (p && p.x === x && p.y === y && p.width === width && p.height === height) return prev;
-      return { ...prev, [index]: { x, y, width, height } };
-    });
-  };
-  const active = layouts[activeIndex];
-  const thumbX = React.useRef(new Animated.Value(0)).current;
-  const thumbWidth = React.useRef(new Animated.Value(0)).current;
-  const measured = React.useRef(false);
-  React.useEffect(() => {
-    if (!active) return;
-    if (!measured.current || !animateSlide) {
-      thumbX.setValue(active.x);
-      thumbWidth.setValue(active.width);
-      measured.current = true;
-      return;
-    }
-    const easing = Easing.bezier(...theme.motion.knob.easing);
-    Animated.parallel([
-      Animated.timing(thumbX, {
-        toValue: active.x,
-        duration: theme.motion.knob.duration,
-        easing,
-        useNativeDriver: false
-      }),
-      Animated.timing(thumbWidth, {
-        toValue: active.width,
-        duration: theme.motion.knob.duration,
-        easing,
-        useNativeDriver: false
-      })
-    ]).start();
-  }, [active, animateSlide, thumbX, thumbWidth, theme.motion.knob]);
-  const select = (next) => {
-    if (!isControlled) setInternal(next);
-    haptics.impact("light");
-    onValueChange?.(next);
-  };
-  return /* @__PURE__ */ jsx(View, { style: styles.container, children: /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
-    /* @__PURE__ */ jsx(
-      Animated.View,
-      {
-        testID: "segmented-indicator",
-        pointerEvents: "none",
-        style: [
-          styles.indicator,
-          { left: thumbX, width: thumbWidth },
-          active ? { top: active.y, height: active.height } : null
-        ]
-      }
-    ),
-    items.map((item, index) => {
-      const selected = item.value === current;
-      const fg = selected ? theme.color.text : theme.color.text3;
-      return /* @__PURE__ */ jsxs(
-        Pressable,
-        {
-          accessibilityRole: "button",
-          accessibilityState: { selected, disabled },
-          disabled,
-          onPress: disabled ? void 0 : () => select(item.value),
-          onLayout: onSegmentLayout(index),
-          hitSlop: { top: slopY, bottom: slopY },
-          style: styles.segment,
-          children: [
-            item.icon ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: iconSize, color: fg }) : null,
-            /* @__PURE__ */ jsx(Text, { style: [styles.label, { color: fg }], children: item.label })
-          ]
-        },
-        item.value
-      );
-    })
-  ] }) });
-}
-var sheet = createStyleSheet((theme) => ({
-  container: {
-    alignSelf: "flex-start",
-    position: "relative",
-    backgroundColor: theme.color.surface2,
-    borderRadius: theme.radius.full,
-    padding: theme.space.s1,
-    variants: {
-      size: { xs: {}, sm: {}, md: {} },
-      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
-    }
-  },
-  indicator: {
-    // `top`/`bottom` are the pre-measurement fallback; once a segment reports
-    // its box the use site overrides them with that segment's `y`/`height`.
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    backgroundColor: theme.color.surface,
-    borderRadius: theme.radius.full,
-    // Which segment is selected is carried by `surface`-on-`surface2` (~1.1:1)
-    // plus `shadow.sm`, and high contrast zeroes the shadow. The accent edge is
-    // what marks the selection there; it is `transparent` at normal contrast.
-    borderWidth: theme.borderWidth.base,
-    borderColor: theme.edge.accent,
-    ...theme.shadow.sm,
-    variants: {
-      size: { xs: {}, sm: {}, md: {} },
-      disabled: { true: {}, false: {} }
-    }
-  },
-  // The measurement frame: no padding of its own, so a segment's measured
-  // `x`/`y` and the thumb's `left`/`top` are in the same coordinate space on
-  // every platform.
-  row: {
-    position: "relative",
-    flexDirection: "row",
-    alignItems: "stretch"
-  },
-  segment: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: theme.space.s2,
-    borderRadius: theme.radius.full,
-    variants: {
-      // Segment height + horizontal padding resolve from the control-size ramp
-      // (26 / 30 / 36); the measured box drives the sliding indicator.
-      size: {
-        xs: { height: theme.ctl.xs, paddingHorizontal: theme.ctl.px.xs },
-        sm: { height: theme.ctl.sm, paddingHorizontal: theme.ctl.px.sm },
-        md: { height: theme.ctl.md, paddingHorizontal: theme.ctl.px.md }
-      },
-      disabled: { true: {}, false: {} }
-    }
-  },
-  label: {
-    fontFamily: theme.font.sans,
-    fontWeight: theme.fontWeight.semibold,
-    fontSize: theme.fontSize[14],
-    variants: {
-      size: { xs: {}, sm: {}, md: {} },
-      disabled: { true: {}, false: {} }
-    }
-  }
-}));
-
-export { SegmentedControl };