@btndprojects/loam-ui-native 0.0.0-stage → 0.1.0

package/dist/chunk-4GBOGOTV.js

@@ -0,0 +1,295 @@
+import { NODE_STATE_ICON } from './chunk-YLLCXTMC.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Animated, Text, Easing } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function toneSkin(theme, tone) {
+  switch (tone) {
+    case "accent":
+      return {
+        fill: theme.color.accentSoft,
+        edge: theme.focus.ringColor,
+        ink: theme.color.accentOnSoft
+      };
+    case "good":
+      return { fill: theme.color.goodSoft, edge: theme.color.good, ink: theme.color.goodOnSoft };
+    case "warn":
+      return { fill: theme.color.warnSoft, edge: theme.color.warn, ink: theme.color.warnOnSoft };
+    case "danger":
+      return {
+        fill: theme.color.dangerSoft,
+        edge: theme.color.danger,
+        ink: theme.color.dangerOnSoft
+      };
+    case "info":
+      return { fill: theme.color.infoSoft, edge: theme.color.info, ink: theme.color.infoOnSoft };
+    case "neutral":
+    default:
+      return {
+        fill: theme.color.surface3,
+        edge: theme.color.borderStrong,
+        ink: theme.color.text2
+      };
+  }
+}
+var GEOMETRY = {
+  comfortable: { node: 24, dot: 12, icon: 14 },
+  compact: { node: 20, dot: 10, icon: 13 }
+};
+var TimelineContext = React.createContext({ density: "comfortable" });
+function TimelineItem({
+  time,
+  title,
+  description,
+  state,
+  tone,
+  icon,
+  current = false,
+  testID,
+  style,
+  isLast = true,
+  animatedStyle
+}) {
+  const { density } = React.useContext(TimelineContext);
+  const { styles } = useStyles(sheet, { density });
+  const theme = useLoamTheme();
+  const g = GEOMETRY[density];
+  const nodeIcon = icon ?? (state ? NODE_STATE_ICON[state] : void 0);
+  const skin = tone ? toneSkin(theme, tone) : state ? {
+    fill: theme.status[`${state}Soft`],
+    edge: theme.status[state],
+    ink: theme.status[`${state}OnSoft`]
+  } : null;
+  const currentAttr = current ? { "aria-current": "step" } : {};
+  const node = skin ? (
+    // Stateful / toned node: a tone-edged, soft-tinted icon container. The
+    // glyph is the non-colour channel that keeps nodes apart in greyscale /
+    // colour-blindness. A `state` brings one by default; a `tone` does not, so
+    // a toned ladder passes `icon` per rung.
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: state ? `timeline-node-${state}` : `timeline-node-tone-${tone}`,
+        style: {
+          width: g.node,
+          height: g.node,
+          borderRadius: theme.radius.full,
+          backgroundColor: skin.fill,
+          borderWidth: theme.borderWidth.base,
+          borderColor: skin.edge,
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: nodeIcon ? /* @__PURE__ */ jsx(Icon, { name: nodeIcon, size: g.icon, color: skin.ink }) : null
+      }
+    )
+  ) : (
+    // Stateless, toneless node: a plain neutral dot — nothing to encode.
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        testID: "timeline-node",
+        style: {
+          width: g.dot,
+          height: g.dot,
+          borderRadius: theme.radius.full,
+          backgroundColor: theme.color.borderStrong
+        }
+      }
+    )
+  );
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      role: "listitem",
+      ...currentAttr,
+      testID,
+      style: [
+        styles.item,
+        isLast ? styles.itemLast : null,
+        current ? styles.itemCurrent : null,
+        style,
+        animatedStyle
+      ],
+      children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.rail, children: [
+          /* @__PURE__ */ jsx(View, { style: styles.lineBox, children: node }),
+          isLast ? null : /* @__PURE__ */ jsx(View, { style: styles.connector })
+        ] }),
+        /* @__PURE__ */ jsxs(View, { style: styles.content, children: [
+          /* @__PURE__ */ jsxs(View, { style: styles.headerRow, children: [
+            /* @__PURE__ */ jsx(Text, { style: styles.title, children: title }),
+            time ? /* @__PURE__ */ jsx(Text, { style: styles.time, children: time }) : null
+          ] }),
+          description ? /* @__PURE__ */ jsx(Text, { style: styles.description, children: description }) : null
+        ] })
+      ]
+    }
+  );
+}
+function Timeline({
+  items,
+  density = "comfortable",
+  motion = "none",
+  label,
+  style,
+  children
+}) {
+  const { styles } = useStyles(sheet, { density });
+  const theme = useLoamTheme();
+  const staggered = motion === "full" && !theme.reduceMotion;
+  const childArray = items ? null : React.Children.toArray(children).filter(React.isValidElement);
+  const count = items ? items.length : childArray?.length ?? 0;
+  const valuesRef = React.useRef([]);
+  if (valuesRef.current.length !== count) {
+    valuesRef.current = Array.from(
+      { length: count },
+      (_, i) => valuesRef.current[i] ?? new Animated.Value(staggered ? 0 : 1)
+    );
+  }
+  const values = valuesRef.current;
+  const ctx = React.useMemo(() => ({ density }), [density]);
+  React.useEffect(() => {
+    if (!staggered) {
+      values.forEach((v) => v.setValue(1));
+      return;
+    }
+    const easing = Easing.bezier(...theme.motion.enter.easing);
+    const anim = Animated.stagger(
+      theme.timing.stagger,
+      values.map(
+        (v) => Animated.timing(v, {
+          toValue: 1,
+          duration: theme.motion.enter.duration,
+          easing,
+          useNativeDriver: true
+        })
+      )
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [
+    staggered,
+    values,
+    theme.timing.stagger,
+    theme.motion.enter.duration,
+    theme.motion.enter.easing
+  ]);
+  const animatedStyleFor = (i) => {
+    const v = values[i];
+    if (!staggered || !v) return null;
+    return {
+      opacity: v,
+      transform: [{ translateY: v.interpolate({ inputRange: [0, 1], outputRange: [8, 0] }) }]
+    };
+  };
+  let content;
+  if (items) {
+    content = items.map((entry, i) => /* @__PURE__ */ jsx(
+      TimelineItem,
+      {
+        time: entry.time,
+        title: entry.title,
+        description: entry.description,
+        state: entry.state,
+        tone: entry.tone,
+        icon: entry.icon,
+        current: entry.current,
+        testID: entry.testID,
+        isLast: i === count - 1,
+        animatedStyle: animatedStyleFor(i)
+      },
+      entry.id
+    ));
+  } else {
+    content = (childArray ?? []).map(
+      (child, i) => React.cloneElement(child, {
+        isLast: i === count - 1,
+        animatedStyle: animatedStyleFor(i)
+      })
+    );
+  }
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(View, { role: "list", accessibilityLabel: label, style: [styles.list, style], children: content }) });
+}
+var sheet = createStyleSheet((theme) => ({
+  list: { alignSelf: "stretch" },
+  item: {
+    flexDirection: "row",
+    variants: {
+      density: {
+        comfortable: { gap: theme.space.s4, paddingBottom: theme.space.s6 },
+        compact: { gap: theme.space.s3, paddingBottom: theme.space.s4 }
+      }
+    }
+  },
+  // Applied to the last item to drop its trailing rhythm (no connector below it).
+  itemLast: { paddingBottom: 0 },
+  // The "you are here" band. The negative horizontal margin cancels its own
+  // inset so the band bleeds outward and the axis stays on the same vertical
+  // line as every other rung — a current rung that shifted sideways would bend
+  // the axis. The soft fill always carries its tone edge: high contrast drops
+  // the tint to the plain surface and the ring is what is left.
+  itemCurrent: {
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.color.accentSoft,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.edge.accent,
+    paddingHorizontal: theme.space.s2,
+    marginHorizontal: -theme.space.s2
+  },
+  rail: { alignItems: "center" },
+  // The node sits in a first-line-height box so it centres on the title line.
+  lineBox: {
+    alignItems: "center",
+    justifyContent: "center",
+    variants: {
+      density: {
+        comfortable: { height: theme.space[24] },
+        compact: { height: theme.space[22] }
+      }
+    }
+  },
+  // Connector: decorative, joins this node to the next. Never animates — it
+  // threads read data. `borderRadius: full` softens the 1px cap.
+  connector: {
+    width: theme.space[1],
+    flex: 1,
+    marginTop: theme.space.s1,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.border
+  },
+  content: { flex: 1, minWidth: 0 },
+  headerRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "baseline",
+    columnGap: theme.space.s2
+  },
+  title: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.medium,
+    color: theme.color.text,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    letterSpacing: theme.type.body.letterSpacing
+  },
+  time: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text3,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  },
+  description: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text2,
+    marginTop: theme.space.s1,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight,
+    letterSpacing: theme.type.footnote.letterSpacing
+  }
+}));
+
+export { Timeline, TimelineItem };

package/dist/chunk-4SZYY6AN.js

@@ -0,0 +1,99 @@
+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 };

package/dist/chunk-4YIP3CWS.js

@@ -0,0 +1,237 @@
+import { useColorTransition } from './chunk-ITTYJZWX.js';
+import { useResolvedMotion } from './chunk-6N33LFQA.js';
+import * as React from 'react';
+import { View, Text, Easing, Animated, Pressable } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var RadioGroupContext = React.createContext(null);
+function useRadioGroupContext() {
+  const ctx = React.useContext(RadioGroupContext);
+  if (!ctx) {
+    throw new Error("RadioGroupItem must be rendered inside a <RadioGroup>.");
+  }
+  return ctx;
+}
+function RadioGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  motion = "full",
+  disabled = false,
+  label,
+  accessibilityLabel,
+  children
+}) {
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const selected = isControlled ? value : internal;
+  const { styles } = useStyles(sheet, { size, disabled });
+  const theme = useLoamTheme();
+  const labelId = React.useId();
+  const itemsRef = React.useRef([]);
+  const [, bump] = React.useReducer((c) => c + 1, 0);
+  const register = React.useCallback((entry) => {
+    itemsRef.current = [...itemsRef.current, entry];
+    bump();
+    return () => {
+      itemsRef.current = itemsRef.current.filter((e) => e !== entry);
+      bump();
+    };
+  }, []);
+  const select = React.useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const firstEnabled = itemsRef.current.find((e) => !e.disabled)?.value;
+  const activeValue = disabled ? void 0 : selected ?? firstEnabled;
+  const onItemKeyDown = React.useCallback(
+    (currentValue, event) => {
+      const enabled = itemsRef.current.filter((e) => !e.disabled);
+      if (enabled.length === 0) return;
+      let target;
+      const { key } = event;
+      if (key === "Home") {
+        target = enabled[0];
+      } else if (key === "End") {
+        target = enabled[enabled.length - 1];
+      } else {
+        let dir = 0;
+        if (key === "ArrowDown") dir = 1;
+        else if (key === "ArrowUp") dir = -1;
+        else if (key === "ArrowRight") dir = theme.rtl ? -1 : 1;
+        else if (key === "ArrowLeft") dir = theme.rtl ? 1 : -1;
+        else return;
+        const current = enabled.findIndex((e) => e.value === currentValue);
+        const from = current === -1 ? 0 : current;
+        target = enabled[(from + dir + enabled.length) % enabled.length];
+      }
+      if (!target) return;
+      event.preventDefault?.();
+      select(target.value);
+      target.focus();
+    },
+    [select, theme.rtl]
+  );
+  const ctx = React.useMemo(
+    () => ({
+      value: selected,
+      select,
+      size,
+      motion,
+      disabled,
+      activeValue,
+      register,
+      onItemKeyDown
+    }),
+    [selected, select, size, motion, disabled, activeValue, register, onItemKeyDown]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
+    label ? /* @__PURE__ */ jsx(Text, { nativeID: labelId, style: styles.groupLabel, children: label }) : null,
+    /* @__PURE__ */ jsx(
+      View,
+      {
+        accessibilityRole: "radiogroup",
+        accessibilityLabel: label ? void 0 : accessibilityLabel,
+        ...label ? { "aria-labelledby": labelId } : null,
+        style: styles.group,
+        children
+      }
+    )
+  ] }) });
+}
+function RadioGroupItem({
+  value,
+  label,
+  accessibilityLabel,
+  disabled = false
+}) {
+  const ctx = useRadioGroupContext();
+  const theme = useLoamTheme();
+  const selected = ctx.value === value;
+  const isDisabled = ctx.disabled || disabled;
+  const { styles } = useStyles(sheet, { size: ctx.size, disabled: isDisabled });
+  const nodeRef = React.useRef(null);
+  const entryRef = React.useRef({ value, disabled: isDisabled, focus: () => {
+  } });
+  entryRef.current.value = value;
+  entryRef.current.disabled = isDisabled;
+  entryRef.current.focus = () => nodeRef.current?.focus?.();
+  const { register } = ctx;
+  React.useEffect(() => register(entryRef.current), [register]);
+  const resolvedMotion = useResolvedMotion(ctx.motion);
+  const animateEdge = resolvedMotion !== "none";
+  const animateDot = resolvedMotion === "full";
+  const easing = React.useMemo(() => Easing.bezier(...theme.easing.base), [theme.easing.base]);
+  const borderColor = useColorTransition(
+    selected ? theme.color.accent : theme.color.borderStrong,
+    theme.duration.fast,
+    easing,
+    animateEdge
+  );
+  const dotScale = React.useRef(new Animated.Value(selected ? 1 : 0)).current;
+  React.useEffect(() => {
+    if (!animateDot) {
+      dotScale.setValue(selected ? 1 : 0);
+      return;
+    }
+    Animated.timing(dotScale, {
+      toValue: selected ? 1 : 0,
+      duration: theme.duration.base,
+      easing: Easing.bezier(...theme.easing.spring),
+      useNativeDriver: true
+    }).start();
+  }, [selected, animateDot, dotScale, theme.duration.base, theme.easing.spring]);
+  const isTabStop = ctx.activeValue === value && !isDisabled;
+  const webProps = {
+    tabIndex: isTabStop ? 0 : -1,
+    onKeyDown: (event) => {
+      if (isDisabled) return;
+      ctx.onItemKeyDown(value, event);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Pressable,
+    {
+      ref: nodeRef,
+      accessibilityRole: "radio",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: { checked: selected, disabled: isDisabled },
+      "aria-checked": selected,
+      disabled: isDisabled,
+      onPress: isDisabled ? void 0 : () => ctx.select(value),
+      style: styles.item,
+      ...webProps,
+      children: [
+        /* @__PURE__ */ jsx(Animated.View, { testID: "radio-indicator", style: [styles.indicator, { borderColor }], children: /* @__PURE__ */ jsx(Animated.View, { style: [styles.dot, { transform: [{ scale: dotScale }] }] }) }),
+        label ? /* @__PURE__ */ jsx(Text, { style: styles.label, children: label }) : null
+      ]
+    }
+  );
+}
+var sheet = createStyleSheet((theme) => ({
+  // Stacks the optional group label above the radios.
+  root: { gap: theme.space.s2 },
+  group: { gap: theme.space.s3 },
+  groupLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s3,
+    variants: {
+      disabled: { true: { opacity: theme.state.disabledOpacity }, false: {} }
+    }
+  },
+  // `borderColor` is supplied at the use site as an animated value so the edge
+  // can travel over `duration.fast`. The fill stays transparent — the reference
+  // gives the indicator a border and nothing else.
+  indicator: {
+    alignItems: "center",
+    justifyContent: "center",
+    // A `2px` ring is part of the drawing, so it uses the static `w3` weight.
+    borderWidth: theme.borderWidth.heavy,
+    backgroundColor: "transparent",
+    borderRadius: theme.radius.full,
+    variants: {
+      // The dot is always half the indicator (reference: 11px inside 22px).
+      size: {
+        sm: { width: theme.space[16], height: theme.space[16] },
+        md: { width: theme.space[22], height: theme.space[22] }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  dot: {
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.color.accent,
+    variants: {
+      size: {
+        sm: { width: theme.space[8], height: theme.space[8] },
+        md: { width: theme.space[11], height: theme.space[11] }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  },
+  label: {
+    fontFamily: theme.font.sans,
+    color: theme.color.text,
+    variants: {
+      size: {
+        sm: { fontSize: theme.fontSize[14] },
+        md: { fontSize: theme.fontSize[16] }
+      },
+      disabled: { true: {}, false: {} }
+    }
+  }
+}));
+
+export { RadioGroup, RadioGroupItem };